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!)

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();
 

app/assets/javascripts/lib/stickUp.min.js

@@ -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");};});});});

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,9 +387,9 @@ body.closet_hangers-index
         text-align: center
         width: 800px
 
-        &.isStuck
+        position: sticky
+        top: 0
         border-bottom: 1px solid $module-border-color
-          border-top: 0
         z-index: 11  /* beat the visibility form */
 
         .bulk-actions-intro, .bulk-actions-target-desc-singular

app/views/closet_hangers/index.html.haml

@@ -55,7 +55,8 @@
     = 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?
+#closet-hangers{:class => public_perspective? ? nil : 'current-user'}
+  - unless public_perspective?
     -# TODO: i18n
     .bulk-actions{'data-target-count' => 0}
       .bulk-actions-intro
@@ -79,10 +80,8 @@
               %button Remove all
           %li
             %button.bulk-actions-deselect-all Deselect all
-
-#closet-hangers{:class => public_perspective? ? nil : 'current-user'}
   - [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'
+    'closet_hangers/index'