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

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'
+    'closet_hangers/index'