src/jp/sourceforge/manganetwork/page/javascripts/spinelz/sortableTable.js

   1 // Copyright (c) 2005 spinelz.org (http://script.spinelz.org/)
   2 //
   3 // Permission is hereby granted, free of charge, to any person obtaining
   4 // a copy of this software and associated documentation files (the
   5 // "Software"), to deal in the Software without restriction, including
   6 // without limitation the rights to use, copy, modify, merge, publish,
   7 // distribute, sublicense, and/or sell copies of the Software, and to
   8 // permit persons to whom the Software is furnished to do so, subject to
   9 // the following conditions:
  10 //
  11 // The above copyright notice and this permission notice shall be
  12 // included in all copies or substantial portions of the Software.
  13 //
  14 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  15 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  16 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  17 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  18 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  19 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  20 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  21
  22 var SortableTable = Class.create();
  23
  24 SortableTable.classNames = {
  25   header: 'sortableTable_header',
  26   title: 'sortableTable_title',
  27   empty: 'sortableTable_empty',
  28   down: 'sortableTable_down',
  29   up: 'sortableTable_up',
  30   mark: 'sortableTable_mark',
  31   thead: 'sortableTable_thead',
  32   tbody: 'sortableTable_tbody'
  33 }
  34
  35 SortableTable.prototype = {
  36
  37   initialize:  function(element) {
  38     this.element = $(element);
  39     Element.setStyle(this.element, {visibility: 'hidden'});
  40
  41     var options = Object.extend({
  42       sortType: false,
  43       cssPrefix: 'custom_'
  44     }, arguments[1] || {});
  45
  46     var customCss = CssUtil.appendPrefix(options.cssPrefix, SortableTable.classNames);
  47     this.classNames = new CssUtil([SortableTable.classNames, customCss]);
  48
  49     this.sortType = options.sortType;
  50
  51     this.currentOrder = 'default';
  52     this.defaultOrder = new Array();
  53     for (var i = 1; i < this.element.rows.length; i++) {
  54       this.defaultOrder[i - 1] = this.element.rows[i];
  55     }
  56
  57     this.build();
  58     Element.setStyle(this.element, {visibility: 'visible'});
  59   },
  60
  61   build: function() {
  62     thead = this.element.tHead;
  63     this.classNames.addClassNames(thead, 'thead');
  64     tbody = thead.nextSibling;
  65     while ((tbody.nodeType != 1) || (tbody.tagName.toLowerCase() != 'tbody')) {
  66       tbody = tbody.nextSibling;
  67     }
  68     this.classNames.addClassNames(tbody, 'tbody');
  69     var rows = this.element.rows[0];
  70     if (!rows) return;
  71
  72     for (var i = 0; i < rows.cells.length; i++) {
  73
  74       var cell = rows.cells[i];
  75       cell.style.cursor = 'pointer';
  76
  77       Element.cleanWhitespace(cell);
  78       var title = Builder.node('DIV', $A(cell.childNodes));
  79       this.classNames.addClassNames(title, 'title');
  80
  81       var img = Builder.node('DIV');
  82       this.classNames.addClassNames(img, 'mark');
  83       this.classNames.addClassNames(img, 'empty');
  84
  85       var header = Builder.node('DIV', [title, img]);
  86       this.classNames.addClassNames(header, 'header');
  87       cell.appendChild(header);
  88
  89       var titleWidth = title.offsetWidth;
  90       var imgWidth = img.offsetWidth;
  91
  92       title.style.width = (titleWidth + imgWidth) + 'px';
  93       Event.observe(rows.cells[i], 'click', this.sortTable.bindAsEventListener(this));
  94     }
  95   },
  96
  97   sortTable: function(event) {
  98     var cell = Event.element(event);
  99
 100     if (cell.tagName.toUpperCase() != 'TD' && cell.tagName.toUpperCase() != 'TH') {
 101       cell = Element.getParentByTagName(['TD','TH'], cell);
 102     }
 103
 104     var tmpColumn = cell.cellIndex;
 105     if (this.targetColumn != tmpColumn) {
 106       this.currentOrder = 'default';
 107     }
 108     this.targetColumn = tmpColumn;
 109
 110     var newRows = new Array();
 111     for (var i = 1; i < this.element.rows.length; i++) {
 112       newRows[i - 1] = this.element.rows[i];
 113     }
 114     if (newRows.length < 1) return;
 115
 116     if (this.currentOrder == 'default') {
 117       newRows.sort(this.getSortFunc());
 118       this.currentOrder = 'asc';
 119     } else if (this.currentOrder == 'asc') {
 120       newRows = newRows.reverse();
 121       this.currentOrder = 'desc';
 122     } else if (this.currentOrder == 'desc') {
 123       newRows = this.defaultOrder;
 124       this.currentOrder = 'default';
 125     }
 126
 127     for (var i = 0; i < newRows.length; i++) {
 128       this.element.tBodies[0].appendChild(newRows[i]);
 129     }
 130
 131     this.mark(cell);
 132   },
 133
 134   mark: function(cell) {
 135     var images = document.getElementsByClassName(SortableTable.classNames.mark, this.element);
 136     var targetImg = document.getElementsByClassName(SortableTable.classNames.mark, cell)[0];
 137
 138     for (var i = 0; i < images.length; i++) {
 139       var parent = images[i].parentNode;
 140       var title = document.getElementsByClassName(SortableTable.classNames.title, parent)[0];
 141       var titleWidth = title.offsetWidth;
 142
 143       if (targetImg == images[i]) {
 144
 145          var imgWidth = targetImg.offsetWidth;
 146
 147         if (this.currentOrder == 'asc') {
 148           this.classNames.addClassNames(targetImg, 'down');
 149           this.classNames.removeClassNames(targetImg, 'empty');
 150           if (!document.all) title.style.width = (titleWidth - imgWidth) + 'px';
 151
 152         } else if (this.currentOrder == 'desc') {
 153           this.classNames.addClassNames(targetImg, 'up');
 154           this.classNames.removeClassNames(targetImg, 'down');
 155
 156         } else if (this.currentOrder == 'default') {
 157           this.classNames.addClassNames(targetImg, 'empty');
 158           this.classNames.removeClassNames(targetImg, 'up');
 159           if (!document.all) title.style.width = (titleWidth + imgWidth) + 'px';
 160         }
 161
 162       } else {
 163
 164         if (Element.hasClassName(images[i], SortableTable.classNames.empty))
 165           continue;
 166
 167         else if (Element.hasClassName(images[i], SortableTable.classNames.down))
 168           this.classNames.removeClassNames(images[i], 'down');
 169
 170         else if (Element.hasClassName(images[i], SortableTable.classNames.up))
 171           this.classNames.removeClassNames(images[i], 'up');
 172
 173          var imgWidth = targetImg.offsetWidth;
 174         this.classNames.addClassNames(images[i], 'empty');
 175         if (!document.all) title.style.width = (titleWidth + imgWidth) + 'px';
 176       }
 177     }
 178   },
 179
 180   getSortFunc: function() {
 181     if (!this.sortType || !this.sortType[this.targetColumn])
 182       return SortFunction.string(this);
 183
 184     var type = this.getSortType();
 185
 186     if (!this.sortType || !type) {
 187       return SortFunction.string(this);
 188     } else if (type == SortFunction.numeric) {
 189       return SortFunction.number(this);
 190     }
 191
 192     return SortFunction.date(this);
 193   },
 194
 195   getSortType: function() {
 196     return this.sortType[this.targetColumn];
 197   }
 198 }
 199
 200 var SortFunction = Class.create();
 201 SortFunction = {
 202   string: 'string',
 203   numeric: 'numeric',
 204   mmddyyyy: 'mmddyyyy',
 205   mmddyy: 'mmddyy',
 206   yyyymmdd: 'yyyymmdd',
 207   yymmdd: 'yymmdd',
 208   ddmmyyyy: 'ddmmyyyy',
 209   ddmmyy: 'ddmmyy',
 210
 211   date: function(grid) {
 212     return function(fst, snd) {
 213       var aValue = Element.collectTextNodes(fst.cells[grid.targetColumn]);
 214       var bValue = Element.collectTextNodes(snd.cells[grid.targetColumn]);
 215       var date1, date2;
 216
 217       var date1 = SortFunction.getDateString(aValue, grid.getSortType());
 218       var date2 = SortFunction.getDateString(bValue, grid.getSortType());
 219
 220       if (date1 == date2) return 0;
 221       if (date1 < date2) return -1;
 222
 223       return 1;
 224     }
 225   },
 226
 227   number: function(grid) {
 228     return function(fst, snd) {
 229       var aValue = parseFloat(Element.collectTextNodes(fst.cells[grid.targetColumn]));
 230       if (isNaN(aValue)) aValue = 0;
 231       var bValue = parseFloat(Element.collectTextNodes(snd.cells[grid.targetColumn]));
 232       if (isNaN(bValue)) bValue = 0;
 233
 234       return aValue - bValue;
 235     }
 236   },
 237
 238   string: function(grid) {
 239     return function(fst, snd) {
 240       var aValue = Element.collectTextNodes(fst.cells[grid.targetColumn]);
 241       var bValue = Element.collectTextNodes(snd.cells[grid.targetColumn]);
 242       if (aValue == bValue) return 0;
 243       if (aValue < bValue) return -1;
 244       return 1;
 245     }
 246   },
 247
 248   getDateString: function(date, type) {
 249     var array = date.split('/');
 250
 251     if ((type == SortFunction.mmddyyyy) ||
 252         (type == SortFunction.mmddyy)) {
 253       var newArray = new Array();
 254       newArray.push(array[2]);
 255       newArray.push(array[0]);
 256       newArray.push(array[1]);
 257     } else if ((type == SortFunction.ddmmyyyy) ||
 258                (type == SortFunction.ddmmyy)) {
 259       var newArray = new Array();
 260       newArray.push(array[2]);
 261       newArray.push(array[1]);
 262       newArray.push(array[0]);
 263     } else {
 264       newArray = array;
 265     }
 266
 267     return newArray.join();
 268   }
 269 }
 270