☰

OutOfMilk.com Category-List Manager Scrolling Fix

Fixes the jQuery UI Draggable bug revolving around dragged item getting offset when scrolling.

  1. // ==UserScript==
  2. // @name          OutOfMilk.com Category-List Manager Scrolling Fix
  3. // @version       0.1.4
  4. // @description   Fixes the jQuery UI Draggable bug revolving around dragged item getting offset when scrolling.
  5. // @namespace     https://greasyfork.org/en/users/15562
  6. // @author        Jonathan Brochu (https://greasyfork.org/en/users/15562)
  7. // @license       GPLv3 or later (http://www.gnu.org/licenses/gpl-3.0.en.html)
  8. // @include       http://outofmilk.com/ManageCategories.aspx*
  9. // @include       http://www.outofmilk.com/ManageCategories.aspx*
  10. // @include       https://outofmilk.com/ManageCategories.aspx*
  11. // @include       https://www.outofmilk.com/ManageCategories.aspx*
  12. // @grant         none
  13. // ==/UserScript==
  14.  
  15. /***
  16.  * History:
  17.  *
  18.  * 0.1.4  Changes made:
  19.  *        - Updated script for use with the repository [greasyfork.org].
  20.  *        - No change made to the code.
  21.  *        (2015-09-14)
  22.  * 0.1.3  Change made:
  23.  *        - Added outofmilk.com as a possible domain for include URLs.
  24.  *        (2015-04-02)
  25.  * 0.1.2  Changes made:
  26.  *        - Fixed previously noted z-index issue. Now, everytime a category
  27.  *          name is being dragged it is made the topmost element on the page.
  28.  *          This is not the most elegant of solutions (i.e. re-check all
  29.  *          z-indices everytime), but it is the best we can do considering
  30.  *          we don't have control over the page.
  31.  *        (2013-04-05)
  32.  * 0.1.1  Changes made:
  33.  *        - Removed the unneeded library @include (jQuery v1.8.2), since now
  34.  *          it conflicts anyway with the (new?) version of the library being
  35.  *          used on the page.
  36.  *        - Tweaked @include to allow for URL params and anchors.
  37.  *        NOTE: The (probably updated) version of the jQuery library used by
  38.  *              the site/page recently introduced issues with the z-order of
  39.  *              items being dragged (i.e. the dragged item might disappear
  40.  *              when scrolling, but it can be made to re-appear after being
  41.  *              dragged all-the-way to the bottom and then back up the page).
  42.  *              This issue still needs further investigation.
  43.  *        (2013-04-02)
  44.  * 0.1.0  First implementation. (2013-02-17)
  45.  *
  46.  */
  47.  
  48. (function() {
  49.     // constants
  50.     var USERSCRIPT_NAME = 'OutOfMilk.com Category-List Manager Scrolling Fix';
  51.     
  52.     // reference some outside objects
  53.     window.console = window.console || (function() {
  54.         if (typeof(unsafeWindow) == 'undefined') return { 'log': function() {} };
  55.         return unsafeWindow.console;
  56.     })();
  57.     
  58.     // re-implement jQuery.ui.draggable
  59.     if (jQuery.ui.draggable) {
  60.         jQuery.ui.draggable.prototype._mouseDrag = function(event, noPropagation) {
  61.             
  62.             // Compute the helpers position
  63. /* --> */   /* Added: */ var currentRelativeOffset = this._getRelativeOffset();
  64.             this.position = this._generatePosition(event);
  65.             this.positionAbs = this._convertPositionTo("absolute");
  66.             
  67.             // Call plugins and callbacks and use the resulting position if something is returned
  68.             if (!noPropagation) {
  69.                 var ui = this._uiHash();
  70.                 if(this._trigger("drag", event, ui) === false) {
  71.                     this._mouseUp({});
  72.                     return false;
  73.                 }
  74.                 this.position = ui.position;
  75.             }
  76.             
  77.             if(!this.options.axis || this.options.axis !== "y") {
  78.                 /* Original line:
  79.                  * this.helper[0].style.left = this.position.left + "px";
  80.                  * 
  81.                  * Updated line, using currentRelativeOffset:
  82.                  */
  83. /* --> */       this.helper[0].style.left = this.position.left + (this.offset.relative.left - currentRelativeOffset.left) + "px";
  84.             }
  85.             if(!this.options.axis || this.options.axis !== "x") {
  86.                 /* Original line:
  87.                  * this.helper[0].style.top = this.position.top + "px";
  88.                  * 
  89.                  * Updated line, using currentRelativeOffset:
  90.                  */
  91. /* --> */        this.helper[0].style.top = this.position.top + (this.offset.relative.top - currentRelativeOffset.top) + "px";
  92.             }
  93.             if($.ui.ddmanager) {
  94.                 $.ui.ddmanager.drag(this, event);
  95.             }
  96.  
  97.             return false;
  98.         };
  99.     }
  100.     
  101.     // Unbind from previous draggable implementation
  102.     $(".draggableItem").draggable("destroy");
  103.     // Rebind to new implementation (as done in 'js/methods/categories/ManageCategories.js?v=...')
  104.     $(".draggableItem").draggable({ revert: true });
  105.     
  106.     // 2013-04-04: Force every newly-clicked span.draggableItem to be the topmost item
  107.     // Reference: http://stackoverflow.com/questions/4755631/css-javascript-make-element-top-most-z-index-top-most-modal-element
  108.     try {
  109.         $('span.draggableItem').each(function(){
  110.             this.addEventListener('mousedown', function(){
  111.                 var highest_index = 0;
  112.                 $('[z-index]').each(function() {
  113.                     if ($(this).attr('z-index') > highest_index) {
  114.                          highest_index = $(this).attr('z-index');
  115.                     }
  116.                 });
  117.                 $(this).attr('z-index', highest_index + 1);
  118.             }, false);
  119.         });
  120.     } catch(err) {
  121.         console.log(err);
  122.     }
  123. })();