From 13b92b30d0b39603beb75ac9ed6f569cd114dc1e Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Tue, 20 Feb 2024 18:33:23 -0800 Subject: [PATCH] Replace old stickUp dependency with `position: sticky` From an era when we didn't have that! Now we do! (My motivation is that I'm trying to add new JS to this page and errors in stickUp are crashing the page early, womp womp!) --- .../javascripts/closet_hangers/index.js | 7 --- app/assets/javascripts/lib/stickUp.min.js | 1 - .../stylesheets/closet_hangers/_index.sass | 13 +++-- app/views/closet_hangers/index.html.haml | 53 +++++++++---------- 4 files changed, 34 insertions(+), 40 deletions(-) delete mode 100644 app/assets/javascripts/lib/stickUp.min.js diff --git a/app/assets/javascripts/closet_hangers/index.js b/app/assets/javascripts/closet_hangers/index.js index 556154f4..fd4d3675 100644 --- a/app/assets/javascripts/closet_hangers/index.js +++ b/app/assets/javascripts/closet_hangers/index.js @@ -481,13 +481,6 @@ updateBulkActions(); }); - // hahaha, nasty hacks to make stickUp use our old jQuery - $.fn.on = $.fn.bind; - - $(function () { - $(".bulk-actions").stickUp(); - }); - function maintainCheckboxes(fn) { var checkedIds = getCheckedIds(); diff --git a/app/assets/javascripts/lib/stickUp.min.js b/app/assets/javascripts/lib/stickUp.min.js deleted file mode 100644 index 88dc671e..00000000 --- a/app/assets/javascripts/lib/stickUp.min.js +++ /dev/null @@ -1 +0,0 @@ -jQuery(function($){$(document).ready(function(){var contentButton = [];var contentTop = [];var content = [];var lastScrollTop = 0;var scrollDir = '';var itemClass = '';var itemHover = '';var menuSize = null;var stickyHeight = 0;var stickyMarginB = 0;var currentMarginT = 0;var topMargin = 0;$(window).scroll(function(event){var st = $(this).scrollTop();if (st > lastScrollTop){scrollDir = 'down';} else {scrollDir = 'up';}lastScrollTop = st;});$.fn.stickUp = function( options ) {$(this).addClass('stuckMenu');var objn = 0;if(options != null) {for(var o in options.parts) {if (options.parts.hasOwnProperty(o)){content[objn] = options.parts[objn];objn++;}}if(objn == 0) {console.log('error:needs arguments');}itemClass = options.itemClass;itemHover = options.itemHover;if(options.topMargin != null) {if(options.topMargin == 'auto') {topMargin = parseInt($('.stuckMenu').css('margin-top'));} else {if(isNaN(options.topMargin) && options.topMargin.search("px") > 0){topMargin = parseInt(options.topMargin.replace("px",""));} else if(!isNaN(parseInt(options.topMargin))) {topMargin = parseInt(options.topMargin);} else {console.log("incorrect argument, ignored.");topMargin = 0;} }} else {topMargin = 0;}menuSize = $('.'+itemClass).size();}stickyHeight = parseInt($(this).height());stickyMarginB = parseInt($(this).css('margin-bottom'));currentMarginT = parseInt($(this).next().closest('div').css('margin-top'));vartop = parseInt($(this).offset().top);};$(document).on('scroll', function() {varscroll = parseInt($(document).scrollTop());if(menuSize != null){for(var i=0;i < menuSize;i++){contentTop[i] = $('#'+content[i]+'').offset().top;function bottomView(i) {contentView = $('#'+content[i]+'').height()*.4;testView = contentTop[i] - contentView;if(varscroll > testView){$('.'+itemClass).removeClass(itemHover);$('.'+itemClass+':eq('+i+')').addClass(itemHover);} else if(varscroll < 50){$('.'+itemClass).removeClass(itemHover);$('.'+itemClass+':eq(0)').addClass(itemHover);}}if(scrollDir == 'down' && varscroll > contentTop[i]-50 && varscroll < contentTop[i]+50) {$('.'+itemClass).removeClass(itemHover);$('.'+itemClass+':eq('+i+')').addClass(itemHover);}if(scrollDir == 'up') {bottomView(i);}}}if(vartop < varscroll + topMargin){$('.stuckMenu').addClass('isStuck');$('.stuckMenu').next().closest('div').css({'margin-top': stickyHeight + stickyMarginB + currentMarginT + 'px'}, 10);$('.stuckMenu').css("position","fixed");$('.isStuck').css({top: '0px'}, 10, function(){});};if(varscroll + topMargin < vartop){$('.stuckMenu').removeClass('isStuck');$('.stuckMenu').next().closest('div').css({'margin-top': currentMarginT + 'px'}, 10);$('.stuckMenu').css("position","relative");};});});}); \ No newline at end of file diff --git a/app/assets/stylesheets/closet_hangers/_index.sass b/app/assets/stylesheets/closet_hangers/_index.sass index 04ceb3d1..7c5c3bf1 100644 --- a/app/assets/stylesheets/closet_hangers/_index.sass +++ b/app/assets/stylesheets/closet_hangers/_index.sass @@ -96,6 +96,7 @@ body.closet_hangers-index #closet-hangers clear: both text-align: center + border-top: 1px solid $module-border-color .object .quantity @@ -152,6 +153,9 @@ body.closet_hangers-index margin-bottom: 2em padding-bottom: 1em + &:first-of-type + border-top: 0 + > header border-bottom: 1px solid $soft-border-color display: block @@ -376,7 +380,6 @@ body.closet_hangers-index .bulk-actions background: $background-color - border-top: 1px solid $module-border-color box-sizing: border-box display: block font-size: 85% @@ -384,10 +387,10 @@ body.closet_hangers-index text-align: center width: 800px - &.isStuck - border-bottom: 1px solid $module-border-color - border-top: 0 - z-index: 11 /* beat the visibility form */ + position: sticky + top: 0 + border-bottom: 1px solid $module-border-color + z-index: 11 /* beat the visibility form */ .bulk-actions-intro, .bulk-actions-target-desc-singular display: none diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml index dab815a1..bd40f54d 100644 --- a/app/views/closet_hangers/index.html.haml +++ b/app/views/closet_hangers/index.html.haml @@ -55,34 +55,33 @@ = link_to t('.import_from.gallery'), new_neopets_page_import_task_path(page_type: 'gallery', expected_index: 1) = link_to t('.export_to.petpage'), petpage_user_closet_hangers_path(@user) -- unless public_perspective? - -# TODO: i18n - .bulk-actions{'data-target-count' => 0} - .bulk-actions-intro - Manage items in bulk! Select an item by clicking its thumbnail, or choose - a list and Select All. - .bulk-actions-form - .bulk-actions-target-desc - %span.bulk-actions-target-desc-singular - With the 1 selected item: - %span.bulk-actions-target-desc-plural - With the - %span.bulk-actions-target-count 0 - selected items: - %ul.bulk-actions-options - %li - = form_tag user_closet_hangers_path(@user), method: :put, class: 'bulk-actions-move-all' do - = select_tag 'list_id', options_for_select(destination_options) - %button Move - %li - = form_tag user_closet_hangers_path(@user), method: :delete, class: 'bulk-actions-remove-all' do - %button Remove all - %li - %button.bulk-actions-deselect-all Deselect all - #closet-hangers{:class => public_perspective? ? nil : 'current-user'} + - unless public_perspective? + -# TODO: i18n + .bulk-actions{'data-target-count' => 0} + .bulk-actions-intro + Manage items in bulk! Select an item by clicking its thumbnail, or choose + a list and Select All. + .bulk-actions-form + .bulk-actions-target-desc + %span.bulk-actions-target-desc-singular + With the 1 selected item: + %span.bulk-actions-target-desc-plural + With the + %span.bulk-actions-target-count 0 + selected items: + %ul.bulk-actions-options + %li + = form_tag user_closet_hangers_path(@user), method: :put, class: 'bulk-actions-move-all' do + = select_tag 'list_id', options_for_select(destination_options) + %button Move + %li + = form_tag user_closet_hangers_path(@user), method: :delete, class: 'bulk-actions-remove-all' do + %button Remove all + %li + %button.bulk-actions-deselect-all Deselect all - [true, false].each do |owned| - .closet-hangers-group{'data-owned' => owned.to_s, :id => "closet-hangers-group-#{owned}"} + %section.closet-hangers-group{'data-owned' => owned.to_s, :id => "closet-hangers-group-#{owned}"} %header %h3= closet_lists_group_name(closet_hangers_subject(@user), owned) %span.toggle.show= t '.toggle_group.show' @@ -154,4 +153,4 @@ - content_for :javascripts do = include_javascript_libraries :jquery, :jquery_tmpl = javascript_include_tag 'ajax_auth', 'lib/jquery.ui', 'lib/jquery.jgrowl', - 'lib/stickUp.min', 'closet_hangers/index' \ No newline at end of file + 'closet_hangers/index'