Dragtable: add original files

css/dragtable.mod.css

@@ -0,0 +1,40 @@
+/* 
+ * dragtable
+ *
+ * @Version 2.0.14
+ *
+ * default css
+ *
+ */
+/*##### the dragtable stuff #####*/
+.dragtable-sortable { 
+    list-style-type: none; margin: 0; padding: 0; -moz-user-select: none;
+}
+.dragtable-sortable li {
+    margin: 0; padding: 0; float: left; font-size: 1em; background: white; 
+}
+
+.dragtable-sortable th, .dragtable-sortable td{
+    border-left: 0px;
+}
+
+.dragtable-sortable li:first-child th, .dragtable-sortable li:first-child td {
+    border-left: 1px solid #CCC; 
+}
+
+.ui-sortable-helper {
+    opacity: 0.7;filter: alpha(opacity=70);
+}
+.ui-sortable-placeholder { 
+    -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;
+    -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;
+    box-shadow: 4px 5px 4px #C6C6C6 inset;
+    border-bottom: 1px solid #CCCCCC;
+    border-top: 1px solid #CCCCCC;
+    visibility: visible !important;
+    background: #EFEFEF !important; 
+    visibility: visible !important;
+}
+.ui-sortable-placeholder * { 
+    opacity: 0.0; visibility: hidden; 
+}

js/extras/jquery.dragtable.mod.js

@@ -0,0 +1,403 @@
+/*!
+ * dragtable
+ *
+ * @Version 2.0.14
+ *
+ * Copyright (c) 2010-2013, Andres akottr@gmail.com
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * Inspired by the the dragtable from Dan Vanderkam (danvk.org/dragtable/)
+ * Thanks to the jquery and jqueryui comitters
+ *
+ * Any comment, bug report, feature-request is welcome
+ * Feel free to contact me.
+ */
+
+/* TOKNOW:
+ * For IE7 you need this css rule:
+ * table {
+ *   border-collapse: collapse;
+ * }
+ * Or take a clean reset.css (see http://meyerweb.com/eric/tools/css/reset/)
+ */
+
+/* TODO: investigate
+ * Does not work properly with css rule:
+ * html {
+ *      overflow: -moz-scrollbars-vertical;
+ *  }
+ * Workaround:
+ * Fixing Firefox issues by scrolling down the page
+ * http://stackoverflow.com/questions/2451528/jquery-ui-sortable-scroll-helper-element-offset-firefox-issue
+ *
+ * var start = $.noop;
+ * var beforeStop = $.noop;
+ * if($.browser.mozilla) {
+ * var start = function (event, ui) {
+ *               if( ui.helper !== undefined )
+ *                 ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
+ *               }
+ * var beforeStop = function (event, ui) {
+ *              if( ui.offset !== undefined )
+ *                ui.helper.css('margin-top', 0);
+ *              }
+ * }
+ *
+ * and pass this as start and stop function to the sortable initialisation
+ * start: start,
+ * beforeStop: beforeStop
+ */
+/*
+ * Special thx to all pull requests comitters
+ */
+
+(function($) {
+  $.widget("akottr.dragtable", {
+    options: {
+      revert: false,               // smooth revert
+      dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
+      maxMovingRows: 40,           // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
+      excludeFooter: false,        // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
+      onlyHeaderThreshold: 100,    // TODO:  not implemented yet, switch automatically between entire col moving / only header moving
+      dragaccept: null,            // draggable cols -> default all
+      persistState: null,          // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
+      restoreState: null,          // JSON-Object or function:  some kind of experimental aka Quick-Hack TODO: do it better
+      exact: true,                 // removes pixels, so that the overlay table width fits exactly the original table width
+      clickDelay: 10,              // ms to wait before rendering sortable list and delegating click event
+      containment: null,           // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
+      cursor: 'move',              // @see http://api.jqueryui.com/sortable/#option-cursor
+      cursorAt: false,             // @see http://api.jqueryui.com/sortable/#option-cursorAt
+      distance: 0,                 // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
+      tolerance: 'pointer',        // @see http://api.jqueryui.com/sortable/#option-tolerance
+      axis: 'x',                   // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
+      beforeStart: $.noop,         // returning FALSE will stop the execution chain.
+      beforeMoving: $.noop,
+      beforeReorganize: $.noop,
+      beforeStop: $.noop
+    },
+    originalTable: {
+      el: null,
+      selectedHandle: null,
+      sortOrder: null,
+      startIndex: 0,
+      endIndex: 0
+    },
+    sortableTable: {
+      el: $(),
+      selectedHandle: $(),
+      movingRow: $()
+    },
+    persistState: function() {
+      var _this = this;
+      this.originalTable.el.find('th').each(function(i) {
+        if (this.id !== '') {
+          _this.originalTable.sortOrder[this.id] = i;
+        }
+      });
+      $.ajax({
+        url: this.options.persistState,
+        data: this.originalTable.sortOrder
+      });
+    },
+    /*
+     * persistObj looks like
+     * {'id1':'2','id3':'3','id2':'1'}
+     * table looks like
+     * |   id2  |   id1   |   id3   |
+     */
+    _restoreState: function(persistObj) {
+      for (var n in persistObj) {
+        this.originalTable.startIndex = $('#' + n).closest('th').prevAll().size() + 1;
+        this.originalTable.endIndex = parseInt(persistObj[n], 10) + 1;
+        this._bubbleCols();
+      }
+    },
+    // bubble the moved col left or right
+    _bubbleCols: function() {
+      var i, j, col1, col2;
+      var from = this.originalTable.startIndex;
+      var to = this.originalTable.endIndex;
+      /* Find children thead and tbody.
+       * Only to process the immediate tr-children. Bugfix for inner tables
+       */
+      var thtb = this.originalTable.el.children();
+      if (this.options.excludeFooter) {
+        thtb = thtb.not('tfoot');
+      }
+      if (from < to) {
+        for (i = from; i < to; i++) {
+          col1 = thtb.find('> tr > td:nth-child(' + i + ')')
+            .add(thtb.find('> tr > th:nth-child(' + i + ')'));
+          col2 = thtb.find('> tr > td:nth-child(' + (i + 1) + ')')
+            .add(thtb.find('> tr > th:nth-child(' + (i + 1) + ')'));
+          for (j = 0; j < col1.length; j++) {
+            swapNodes(col1[j], col2[j]);
+          }
+        }
+      } else {
+        for (i = from; i > to; i--) {
+          col1 = thtb.find('> tr > td:nth-child(' + i + ')')
+            .add(thtb.find('> tr > th:nth-child(' + i + ')'));
+          col2 = thtb.find('> tr > td:nth-child(' + (i - 1) + ')')
+            .add(thtb.find('> tr > th:nth-child(' + (i - 1) + ')'));
+          for (j = 0; j < col1.length; j++) {
+            swapNodes(col1[j], col2[j]);
+          }
+        }
+      }
+    },
+    _rearrangeTableBackroundProcessing: function() {
+      var _this = this;
+      return function() {
+        _this._bubbleCols();
+        _this.options.beforeStop(_this.originalTable);
+        _this.sortableTable.el.remove();
+        restoreTextSelection();
+        // persist state if necessary
+        if (_this.options.persistState !== null) {
+          $.isFunction(_this.options.persistState) ? _this.options.persistState(_this.originalTable) : _this.persistState();
+        }
+      };
+    },
+    _rearrangeTable: function() {
+      var _this = this;
+      return function() {
+        // remove handler-class -> handler is now finished
+        _this.originalTable.selectedHandle.removeClass('dragtable-handle-selected');
+        // add disabled class -> reorgorganisation starts soon
+        _this.sortableTable.el.sortable("disable");
+        _this.sortableTable.el.addClass('dragtable-disabled');
+        _this.options.beforeReorganize(_this.originalTable, _this.sortableTable);
+        // do reorganisation asynchronous
+        // for chrome a little bit more than 1 ms because we want to force a rerender
+        _this.originalTable.endIndex = _this.sortableTable.movingRow.prevAll().size() + 1;
+        setTimeout(_this._rearrangeTableBackroundProcessing(), 50);
+      };
+    },
+    /*
+     * Disrupts the table. The original table stays the same.
+     * But on a layer above the original table we are constructing a list (ul > li)
+     * each li with a separate table representig a single col of the original table.
+     */
+    _generateSortable: function(e) {
+      !e.cancelBubble && (e.cancelBubble = true);
+      var _this = this;
+      // table attributes
+      var attrs = this.originalTable.el[0].attributes;
+      var attrsString = '';
+      for (var i = 0; i < attrs.length; i++) {
+        if (attrs[i].nodeValue && attrs[i].nodeName != 'id' && attrs[i].nodeName != 'width') {
+          attrsString += attrs[i].nodeName + '="' + attrs[i].nodeValue + '" ';
+        }
+      }
+
+      // row attributes
+      var rowAttrsArr = [];
+      //compute height, special handling for ie needed :-(
+      var heightArr = [];
+      this.originalTable.el.find('tr').slice(0, this.options.maxMovingRows).each(function(i, v) {
+        // row attributes
+        var attrs = this.attributes;
+        var attrsString = "";
+        for (var j = 0; j < attrs.length; j++) {
+          if (attrs[j].nodeValue && attrs[j].nodeName != 'id') {
+            attrsString += " " + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"';
+          }
+        }
+        rowAttrsArr.push(attrsString);
+        heightArr.push($(this).height());
+      });
+
+      // compute width, no special handling for ie needed :-)
+      var widthArr = [];
+      // compute total width, needed for not wrapping around after the screen ends (floating)
+      var totalWidth = 0;
+      /* Find children thead and tbody.
+       * Only to process the immediate tr-children. Bugfix for inner tables
+       */
+      var thtb = _this.originalTable.el.children();
+      if (this.options.excludeFooter) {
+        thtb = thtb.not('tfoot');
+      }
+      thtb.find('> tr > th').each(function(i, v) {
+        var w = $(this).outerWidth();
+        widthArr.push(w);
+        totalWidth += w;
+      });
+      if(_this.options.exact) {
+          var difference = totalWidth - _this.originalTable.el.outerWidth();
+          widthArr[0] -= difference;
+      }
+      // one extra px on right and left side
+      totalWidth += 2
+
+      var sortableHtml = '<ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;">';
+      // assemble the needed html
+      thtb.find('> tr > th').each(function(i, v) {
+        var width_li = $(this).outerWidth();
+        sortableHtml += '<li style="width:' + width_li + 'px;">';
+        sortableHtml += '<table ' + attrsString + '>';
+        var row = thtb.find('> tr > th:nth-child(' + (i + 1) + ')');
+        if (_this.options.maxMovingRows > 1) {
+          row = row.add(thtb.find('> tr > td:nth-child(' + (i + 1) + ')').slice(0, _this.options.maxMovingRows - 1));
+        }
+        row.each(function(j) {
+          // TODO: May cause duplicate style-Attribute
+          var row_content = $(this).clone().wrap('<div></div>').parent().html();
+          if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "<thead>";
+          sortableHtml += '<tr ' + rowAttrsArr[j] + '" style="height:' + heightArr[j] + 'px;">';
+          sortableHtml += row_content;
+          if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "</thead>";
+          sortableHtml += '</tr>';
+        });
+        sortableHtml += '</table>';
+        sortableHtml += '</li>';
+      });
+      sortableHtml += '</ul>';
+      this.sortableTable.el = this.originalTable.el.before(sortableHtml).prev();
+      // set width if necessary
+      this.sortableTable.el.find('> li > table').each(function(i, v) {
+        $(this).css('width', widthArr[i] + 'px');
+      });
+
+      // assign this.sortableTable.selectedHandle
+      this.sortableTable.selectedHandle = this.sortableTable.el.find('th .dragtable-handle-selected');
+
+      var items = !this.options.dragaccept ? 'li' : 'li:has(' + this.options.dragaccept + ')';
+      this.sortableTable.el.sortable({
+        items: items,
+        stop: this._rearrangeTable(),
+        // pass thru options for sortable widget
+        revert: this.options.revert,
+        tolerance: this.options.tolerance,
+        containment: this.options.containment,
+        cursor: this.options.cursor,
+        cursorAt: this.options.cursorAt,
+        distance: this.options.distance,
+        axis: this.options.axis
+      });
+
+      // assign start index
+      this.originalTable.startIndex = $(e.target).closest('th').prevAll().size() + 1;
+
+      this.options.beforeMoving(this.originalTable, this.sortableTable);
+      // Start moving by delegating the original event to the new sortable table
+      this.sortableTable.movingRow = this.sortableTable.el.find('> li:nth-child(' + this.originalTable.startIndex + ')');
+
+      // prevent the user from drag selecting "highlighting" surrounding page elements
+      disableTextSelection();
+      // clone the initial event and trigger the sort with it
+      this.sortableTable.movingRow.trigger($.extend($.Event(e.type), {
+        which: 1,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        pageX: e.pageX,
+        pageY: e.pageY,
+        screenX: e.screenX,
+        screenY: e.screenY
+      }));
+
+      // Some inner divs to deliver the posibillity to style the placeholder more sophisticated
+      var placeholder = this.sortableTable.el.find('.ui-sortable-placeholder');
+      if(!placeholder.height()  <= 0) {
+        placeholder.css('height', this.sortableTable.el.find('.ui-sortable-helper').height());
+      }
+
+      placeholder.html('<div class="outer" style="height:100%;"><div class="inner" style="height:100%;"></div></div>');
+    },
+    bindTo: {},
+    _create: function() {
+      this.originalTable = {
+        el: this.element,
+        selectedHandle: $(),
+        sortOrder: {},
+        startIndex: 0,
+        endIndex: 0
+      };
+      // bind draggable to 'th' by default
+      this.bindTo = this.originalTable.el.find('th');
+      // filter only the cols that are accepted
+      if (this.options.dragaccept) {
+        this.bindTo = this.bindTo.filter(this.options.dragaccept);
+      }
+      // bind draggable to handle if exists
+      if (this.bindTo.find(this.options.dragHandle).size() > 0) {
+        this.bindTo = this.bindTo.find(this.options.dragHandle);
+      }
+      // restore state if necessary
+      if (this.options.restoreState !== null) {
+        $.isFunction(this.options.restoreState) ? this.options.restoreState(this.originalTable) : this._restoreState(this.options.restoreState);
+      }
+      var _this = this;
+      this.bindTo.mousedown(function(evt) {
+        // listen only to left mouse click
+        if(evt.which!==1) return;
+        if (_this.options.beforeStart(_this.originalTable) === false) {
+          return;
+        }
+        clearTimeout(this.downTimer);
+        this.downTimer = setTimeout(function() {
+          _this.originalTable.selectedHandle = $(this);
+          _this.originalTable.selectedHandle.addClass('dragtable-handle-selected');
+          _this._generateSortable(evt);
+        }, _this.options.clickDelay);
+      }).mouseup(function(evt) {
+        clearTimeout(this.downTimer);
+      });
+    },
+    redraw: function(){
+      this.destroy();
+      this._create();
+    },
+    destroy: function() {
+      this.bindTo.unbind('mousedown');
+      $.Widget.prototype.destroy.apply(this, arguments); // default destroy
+      // now do other stuff particular to this widget
+    }
+  });
+
+  /** closure-scoped "private" functions **/
+
+  var body_onselectstart_save = $(document.body).attr('onselectstart'),
+    body_unselectable_save = $(document.body).attr('unselectable');
+
+  // css properties to disable user-select on the body tag by appending a <style> tag to the <head>
+  // remove any current document selections
+
+  function disableTextSelection() {
+    // jQuery doesn't support the element.text attribute in MSIE 8
+    // http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie
+    var $style = $('<style id="__dragtable_disable_text_selection__" type="text/css">body { -ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none; }</style>');
+    $(document.head).append($style);
+    $(document.body).attr('onselectstart', 'return false;').attr('unselectable', 'on');
+    if (window.getSelection) {
+      window.getSelection().removeAllRanges();
+    } else {
+      document.selection.empty(); // MSIE http://msdn.microsoft.com/en-us/library/ms535869%28v=VS.85%29.aspx
+    }
+  }
+
+  // remove the <style> tag, and restore the original <body> onselectstart attribute
+
+  function restoreTextSelection() {
+    $('#__dragtable_disable_text_selection__').remove();
+    if (body_onselectstart_save) {
+      $(document.body).attr('onselectstart', body_onselectstart_save);
+    } else {
+      $(document.body).removeAttr('onselectstart');
+    }
+    if (body_unselectable_save) {
+      $(document.body).attr('unselectable', body_unselectable_save);
+    } else {
+      $(document.body).removeAttr('unselectable');
+    }
+  }
+
+  function swapNodes(a, b) {
+    var aparent = a.parentNode;
+    var asibling = a.nextSibling === b ? a : a.nextSibling;
+    b.parentNode.insertBefore(a, b);
+    aparent.insertBefore(b, asibling);
+  }
+})(jQuery);