Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Adding HtmlTable.Resize #189

Closed
wants to merge 1 commit into from

3 participants

@anutron
Owner

This is the work of marcusmc. It's tested and works, though I have a feeling that the code style might not fit in w/ More.

@anutron anutron Adding HtmlTable.Resize
* Rebased the work of marcusmc
f9b65a6
@fat

Hm.. personally, i think this Class.refactor pattern is bogus.

Say i have 3 tables on a page... 1 table I want regular, 1 zebra, and 1 sortable, resizable, and selectable.

Correct me if I'm wrong, but that means that i have to not only include 5 .js files, but furthermore each file rewrites my HtmlTable class object into an event larger beast of a class. My regular table instance in this case would be loaded with tons of methods and logic that are useless to it...

Instead, what i would like to see is an HtmlTable.js and HtmlTable.extras.js. Thennn... in HtmlTable.extras.js instead of using class refractor, and options to switch how code was executed, we would have mixin classes for zebra, sortable, selectable, and maybe resizable... that way as a developer i could be more flexible with my table development...

@fat
fat commented

I don't like this personally, for the reasons above.

@timwienk
Owner

As far as I understand, Class.refactor is for quick monkey-patches. I agree it shouldn't be used like this. But not using it here will mean inconsistency with the other HtmlTable plugins, removing it from the others as well breaks compatibility. So it's not a dealbreaker for me.

I do agree though, we should change this to either mixins or just extensions of the HtmlTable class some time in the future.

@anutron
Owner

so, I'm going to close this pull request for now. the code isn't mine and it's not as well written as the rest of our stuff.

The refactor pattern was used here because mixins don't give you the ability to call methods of the "super" class. And consider what happens when you have instances of the class in every combo. You'd end up with:

HtmlTable
HtmlTable.Sortable
HtmlTable.SortableZebra
HtmlTable.Zebra
HtmlTable.Resizable
HtmlTable.ResizableZebra
HtmlTable.ResizableSortableZebra

etc.

I'm curious how you guys would avoid this problem. Having mixins is nice, but you still need a base class that mixes in the stuff you need.

Another alternative is just one big-ass file with all the functionality in it to support these features, something else I'm not crazy about...

@anutron anutron closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 5, 2011
  1. @anutron

    Adding HtmlTable.Resize

    anutron authored
    * Rebased the work of marcusmc
This page is out of date. Refresh to see the latest.
View
95 Docs/Interface/HtmlTable.Resize.md
@@ -0,0 +1,95 @@
+Class: HtmlTable.Resize {#HtmlTable.Resize}
+=============================
+
+Makes headers of HtmlTable columns resizable to resize the rows.
+
+### Refactors
+
+* [HtmlTable][]
+
+### Syntax
+
+ new HtmlTable([table, options]);
+
+### Arguments
+
+1. table - (*mixed*; optional) - a Table DOM element or it's id; if you do not specify one, one will be created.
+1. options - (*object*; optional) a key/value set of options.
+
+### Options
+
+* all options defined by [HtmlTable][], plus:
+* classHandle - (*string*) the class applied to the created resize handles. Defaults to 'table-th-resizer'.
+* classResizableHeader - (*string*) the class applied to the headers of resizable columns. Defaults to 'table-th-resizable'.
+* classResizable - (*string*) the class applied to tables which contain resizable columns. Defaults to 'table-resizable'.
+* classNoResize - (*string*) class given to columns that should not be user resizable. Defaults to 'table-th-noresize'.
+* resize - (*string*) the resizing method to use. Three choices:
+ -- 'maintainChanges' (default) - Prioritizes maintaining changes that have been made by the user and maintaining the table's width as a minimum width. If a column is resized to a width larger than its original width, the table grows along with it. However, the table will never be smaller than its original width.
+ -- 'table' - Resizes the table to the same extent that the column being resized has been resized. Results in a variable width table.
+ -- 'neighbor' - Attempt to resize a neighbor to the right to compensate for the resizing of a column. If no column to the right can be resized, the column can not be resized. Results in a fixed width table that will always resize at the user's mouse movement.
+* setStylesOnStartup - (*boolean*) - set styles of table cells on startup. Defaults to true.
+### Events
+
+* onColumnResize - function executed when a column is resized;
+
+HtmlTable Method: enableResize {#HtmlTable:enableResize}
+----------------------------------------
+
+Enables the resizing features of the table.
+
+### Syntax
+
+ myTable.enableResize();
+
+### Returns
+
+* (*object*) This instance of HtmlTable.
+
+
+HtmlTable Method: disableResize {#HtmlTable:disableResize}
+----------------------------------------
+
+Disables the resizing features of the table.
+
+### Syntax
+
+ myTable.disableResize();
+
+### Returns
+
+* (*object*) This instance of HtmlTable.
+
+
+HtmlTable Method: serialize {#HtmlTable:serialize}
+----------------------------------------
+
+Return an object storing the resize state of the table.
+
+### Syntax
+
+ myTable.serialize();
+
+### Returns
+
+* (*object*) Object containing resize state of the table.
+
+
+HtmlTable Method: restore {#HtmlTable:restore}
+----------------------------------------
+
+Restores the resize state of the table from an object passed in.
+
+### Syntax
+
+ myTable.restore(tableState);
+
+### Arguments
+
+1. tableState - Object created by HtmlTable.serialize() which contains the resize state of the table.
+
+
+[HtmlTable]: /more/Interface/HtmlTable
+
+
+
+
View
376 Source/Interface/HtmlTable.Resize.js
@@ -0,0 +1,376 @@
+/*
+---
+
+script: HtmlTable.Resize.js
+
+name: HtmlTable.Resize
+
+description: Builds a table with resizable columns with methods to add rows.
+
+license: MIT-style license
+
+authors:
+ - Marcus McLaughlin
+
+requires:
+ - Core/Element.Dimensions
+ - Core:1.2.4/Hash
+ - /Class.refactor
+ - /Element.Measure
+ - /HtmlTable
+ - /Drag
+
+provides: [HtmlTable.Resize]
+
+...
+*/
+
+if(!HtmlTable.prototype.serialize) {
+ HtmlTable.implement('serialize', function () {
+ return {};
+ });
+}
+if(!HtmlTable.prototype.restore) {
+ HtmlTable.implement('restore', $empty);
+}
+
+HtmlTable = Class.refactor(HtmlTable, {
+
+ options: {
+ // onColumnResize: $empty,
+ classHandle: 'table-th-resizer',
+ classResizableHeader: 'table-th-resizable',
+ classResizable: 'table-resizable',
+ classNoResize: 'table-th-noresize',
+ resize: 'neighbor',
+ setStylesOnStartup: 'true'
+ },
+
+ initialize: function () {
+ this.previous.apply(this, arguments);
+ if (this.options.resizable) {
+ this._boundResizeMethods = {
+ dragStart: this._dragStart.bind(this),
+ drag: this._drag.bind(this),
+ dragComplete: this._dragComplete.bind(this)
+ };
+ this._resizers = [];
+ this.enableResize();
+ this.element.setStyle('table-layout', 'auto');
+ }
+ },
+
+ build: function() {
+ this.previous.apply(this, arguments);
+ this.headerCells = $$(this.head.cells);
+ },
+
+ enableResize: function(){
+ this.element.addClass(this.options.classResizable);
+ this.wrapHeaders(); //wraps header contents in a div
+ this._addResizeElems();
+ this._attachResizers(true);
+ this._resizeEnabled = true;
+ return this;
+ },
+
+ disableResize: function(){
+ this.element.removeClass(this.options.classResizable);
+ this._resizers.each(function(span) { span.destroy(); });
+ this._resizers.empty();
+ this._attachResizers(false);
+ this._resizeEnabled = false;
+ return this;
+ },
+
+ serialize: function() {
+ var previousSerialization = this.previous.apply(this, arguments);
+ if(this.options.resizable && this._resizeWidths) {
+ previousSerialization.resizeWidths = this._resizeWidths;
+ previousSerialization.initialTableSize = this._initialTableSize;
+ previousSerialization.currentTableSize = this.element.getWidth();
+ }
+ return previousSerialization;
+ },
+
+ restore: function(tableState) {
+ if(this.options.resizable && tableState.resizeWidths) {
+ this._resizeWidths = tableState.resizeWidths;
+ this.headerCells.each( function(cell, index) {
+ cell.setStyle('width', this._resizeWidths[index].curWidth);
+ }.bind(this));
+ this.element.setStyle('table-layout', 'fixed');
+ this.element.setStyle('width', tableState.currentTableSize);
+ this._initialTableSize = tableState.initialTableSize;
+ }
+ this.previous.apply(this, arguments);
+ },
+
+ /** PRIVATE METHODS **/
+
+
+ _addResizeElems: function() {
+ this._constraints = {};
+ this.headerCells.each(function(cell, index) {
+ if(!cell.hasClass(this.options.classNoResize)) {
+ var resizeSpan = new Element('span', {'html': '&#160', 'class': this.options.classHandle});
+ this._resizers.push(resizeSpan);
+
+ cell.set({
+ scope: 'col',
+ styles: {
+ padding: '0',
+ whiteSpace: 'nowrap'
+ }
+ });
+ cell.addClass(this.options.classResizableHeader);
+ var contentDiv = this.headerWrappers[index];
+ contentDiv.setStyles({
+ overflow: 'hidden'
+ });
+ var thDiv = new Element('div', {styles:{
+ position: 'relative',
+ width: '100%',
+ padding: '0 6px'
+ }});
+ resizeSpan.inject(thDiv);
+ contentDiv.inject(thDiv);
+ thDiv.inject(cell);
+ if(this.options.setStylesOnStartup) {
+ this.body.getElements('td').each(function(cell) {
+ cell.setStyles({
+ overflow: 'hidden',
+ whiteSpace: 'nowrap'
+ });
+ });
+ }
+ this._constraints[index] = {
+ max: cell.getStyle('max-width') ? cell.getStyle('max-width').toInt() : null,
+ min: cell.getStyle('min-width') ? cell.getStyle('min-width').toInt() : null
+ };
+ }
+ }.bind(this));
+
+ },
+
+ _getHeaderIndex: function(header) {
+ return this.headerCells.indexOf(header);
+ },
+
+ _attachResizers: function(attach){
+ this._resizers.each(function(resizer, index) {
+ var resizeElem = resizer.getParent('th');
+ var drag = resizer.retrieve('htmltable:resizeDrag');
+ if (!drag) {
+ drag = new Drag(resizeElem, {
+ handle: resizer,
+ style: false,
+ preventDefault: true,
+ snap: 1,
+ onDrag: this._boundResizeMethods.drag,
+ onStart: this._boundResizeMethods.dragStart,
+ onComplete: this._boundResizeMethods.dragComplete
+ });
+ resizer.store('htmltable:resizeDrag', drag);
+ }
+ drag[attach ? 'attach' : 'detach']();
+ }.bind(this));
+ },
+
+ _dragStart: function(header) {
+ if (!this._initialTableSize) {
+ if(!this._resizeWidths) this._resizeWidths = [];
+ this.headerCells.each(function(cell, index) {
+ var cellWidth = cell.getComputedSize().width;
+ cell.setStyle('width', cellWidth);
+ this._resizeWidths.push({initial:cellWidth, curWidth:cellWidth});
+ }.bind(this));
+ this.element.setStyle('table-layout', 'fixed');
+ this._initialTableSize = this.element.getWidth();
+ this.element.setStyle('width', this.element.getWidth());
+ }
+ if(header) this._dragStartHeaderSize = header.getComputedSize().width;
+ this._dragStartTableSize = this.element.getWidth();
+ return;
+ },
+
+ _dragComplete: function(header, e) {
+ this._dragStarted = false;
+ this._currentMax = null;
+ this._currentMin = null;
+ this._resizingNeighbor = null;
+ this.headerCells.each(function(head, index) {
+ this._resizeWidths[index].curWidth = head.getComputedSize().width;
+ }.bind(this));
+ this.fireEvent('columnResized');
+ this.fireEvent('stateChanged');
+ return;
+ },
+
+
+ _getResizableNeighbor: function(header, operation) {
+ var index = this._getHeaderIndex(header);
+ var next = this.headerCells[++index];
+ while(next){
+ if(next && this._canBeResized(next, operation)){
+ return next;
+ }
+ next = this.headerCells[++index];
+ }
+ },
+
+ _canBeResized: function(header, operation) {
+ var constraint = this._constraints[this._getHeaderIndex(header)];
+ var currentSize = header.getComputedSize().width;
+ var grow, shrink;
+ if(header.hasClass(this.options.classNoResize)){
+ return false;
+ } else {
+ grow = (!constraint.max || currentSize <= constraint.max);
+ shrink = ((!constraint.min || currentSize > constraint.min + 1) && (currentSize > 1));
+ }
+ if (operation == 'grow') return grow;
+ if (operation == 'shrink') return shrink;
+ if (operation == 'both') return grow && shrink;
+ if (operation == 'either') return grow || shrink;
+ },
+
+ _resizeHeader: function(header, newHeaderSize) {
+ header.setStyles({
+ width: newHeaderSize > 0 ? newHeaderSize : 0
+ });
+ },
+
+ _resizeTable: function(header, dragDiff) {
+ var newHeaderSize = this._dragStartHeaderSize + dragDiff;
+ newTableSize = this._dragStartTableSize + dragDiff;
+ this._resizeHeader(header, newHeaderSize);
+ this.element.setStyles({
+ width: newTableSize > 0 ? newTableSize : 1
+ });
+ },
+
+ _resizeNeighbor: function(header, dragDiff, immediateDragDiff) {
+ var newHeaderSize = this._dragStartHeaderSize + dragDiff;
+ var headerOperation = immediateDragDiff > 0 ? 'grow' : 'shrink';
+ var neighborOperation = immediateDragDiff > 0 ? 'shrink' : 'grow';
+ if(!this._resizingNeighbor) {
+ this._resizingNeighbor = this._getResizableNeighbor(header, neighborOperation);
+ if(this._resizingNeighbor) {
+ this._initialNeighborSize = this._resizingNeighbor.getComputedSize().width;
+ }
+ }
+ if(this._resizingNeighbor && this._canBeResized(this._resizingNeighbor, neighborOperation)) {
+ var newNeighborSize = this._initialNeighborSize - dragDiff;
+ var constraintNeighbor = this._constraints[this._getHeaderIndex(this._resizingNeighbor)];
+ var lowNeighborLimit = constraintNeighbor.min ? constraintNeighbor.min : 0;
+ var constraintHeader = this._constraints[this._getHeaderIndex(header)];
+ var lowHeaderLimit = constraintHeader.min ? constraintHeader.min : 0;
+ var currentHeaderSize = header.getComputedSize().width;
+ //Series of constraints - only resize if the various constraints allow it.
+ if (((!this._currentMax || newHeaderSize <= this._currentMax) && (!this._currentMin || newHeaderSize >= this._currentMin))
+ || ((!constraintNeighbor.max || newNeighborSize <= constraintNeighbor.max) && (!constraintNeighbor.min ||
+ newNeighborSize >= constraintNeighbor.min)) && (newHeaderSize > 0 || currentHeaderSize > 0)) {
+ // Compensate for big drags.
+ // If one can go further than the other, shorten the other's movement by the difference in movement allowed.
+ if(newHeaderSize < lowHeaderLimit) {
+ newNeighborSize += (lowHeaderLimit - newHeaderSize) * -1;
+ }
+ if(newNeighborSize < lowNeighborLimit) {
+ newHeaderSize += (lowNeighborLimit - newNeighborSize) * -1;
+ }
+ this._resizingNeighbor.setStyles({
+ width: newNeighborSize > lowNeighborLimit ? newNeighborSize : lowNeighborLimit
+ });
+ this._resizeHeader(header, newHeaderSize);
+ }
+ } else {
+ //CurrentMax/Min store the maximum and minimum value of the currently resizing header given the surrounding constraints.
+ if (headerOperation == 'grow' && !this._currentMax) this._currentMax = header.getComputedSize().width;
+ if (headerOperation == 'shrink' && !this._currentMin) this._currentMin = header.getComputedSize().width;
+ }
+ },
+
+ _maintainChanges: function(header, dragDiff) {
+ var newHeaderSize = this._dragStartHeaderSize + dragDiff;
+ var resizableWidth = 0;
+ var headerDiff;
+ var newTableSize;
+ var headerWidths = this._resizeWidths[this._getHeaderIndex(header)];
+ if(newHeaderSize > headerWidths.initial) {
+ headerDiff = headerWidths.initial - headerWidths.curWidth;
+ newTableSize = this._dragStartTableSize + dragDiff;
+ //If this drag started in the other state, subtract the distance dragged in the other state from the newTableSize
+ if(headerWidths.curWidth < headerWidths.initial) newTableSize -= headerDiff;
+ newTableSize = newTableSize >= this._initialTableSize ? newTableSize : this._initialTableSize;
+ if(this._dragStartTableSize != this._initialTableSize) {
+ this.element.setStyles({
+ width: newTableSize > 0 ? newTableSize : 1
+ });
+ }
+ //Reset all resized headers to their last measured width.
+ this.headerCells.each(function(head, index) {
+ var width = this._resizeWidths[index];
+ if(head != header && width.resized) head.setStyle('width', width.curWidth);
+ }.bind(this));
+ this._resizeHeader(header, newHeaderSize);
+ headerWidths.resized = true;
+ }
+ if (newHeaderSize <= headerWidths.initial) {
+ var cellShrinkage = headerWidths.curWidth - newHeaderSize;
+ headerDiff = headerWidths.curWidth - headerWidths.initial;
+ //If this drag started in the other state, subtract the distance dragged in the other state from the header's amount of shrinkage.
+ if(headerWidths.curWidth > headerWidths.initial) cellShrinkage -= headerDiff;
+ newTableSize = this._dragStartTableSize;
+ newTableSize = newTableSize >= this._initialTableSize ? newTableSize : this._initialTableSize;
+ //Calculate the total width of the resizable columns.
+ this.headerCells.each(function(head, index) {
+ var width = this._resizeWidths[index];
+ if(!width.resized && head != header) {
+ resizableWidth += width.curWidth;
+ }
+ }.bind(this));
+ //Resize every column. If the column hasn't been resized, resize it by its proportion of the resizableWidth. Otherwise set it to its last measured width.
+ this.headerCells.each(function(head, index) {
+ var width = this._resizeWidths[index];
+ if(head != header) {
+ if(!width.resized) {
+ var newWidth = cellShrinkage * (width.curWidth/resizableWidth) + width.curWidth;
+ head.setStyle('width', newWidth.round());
+ } else {
+ head.setStyle('width', width.curWidth);
+ }
+ }
+ }.bind(this));
+ this._resizeHeader(header, newHeaderSize);
+ headerWidths.resized = true;
+ }
+ },
+
+ _drag: function(header, e) {
+ if(!this._dragStarted){
+ this._dragStarted = true;
+ this._dragStartPosition = e.client.x;
+ } else {
+ var dragDiff = e.client.x - this._dragStartPosition;
+ var immediateDragDiff = dragDiff - this._lastDragDiff;
+ if (immediateDragDiff == 0) return;
+ this._lastDragDiff = dragDiff;
+ var headerOperation = immediateDragDiff > 0 ? 'grow' : 'shrink';
+ if(this._canBeResized(header, headerOperation)) {
+ switch (this.options.resize) {
+ case 'table':
+ this._resizeTable(header, dragDiff);
+ break;
+ case 'neighbor':
+ this._resizeNeighbor(header, dragDiff, immediateDragDiff);
+ break;
+ case 'maintainChanges':
+ this._maintainChanges(header, dragDiff);
+ break;
+ }
+ }
+ }
+ }
+
+});
View
11 Source/Interface/HtmlTable.Sort.js
@@ -67,7 +67,7 @@ HtmlTable = Class.refactor(HtmlTable, {
},
detachSorts: function(){
- this.element.removeEvents('click:relay(' + this.options.thSelector + ')');
+ this.element.removeEvents('click:relay(' + this.options.thSelector + ')', this.bound.headClick);
},
setHeaders: function(){
@@ -80,13 +80,16 @@ HtmlTable = Class.refactor(HtmlTable, {
},
detectParsers: function(){
- return this.head && this.head.getElements(this.options.thSelector).flatten().map(this.detectParser, this);
+ if (this.thead) {
+ this.wrapHeaders();
+ return this.head.getElements(this.options.thSelector).flatten().map(this.detectParser, this);
+ }
},
detectParser: function(cell, index){
if (cell.hasClass(this.options.classNoSort) || cell.retrieve('htmltable-parser')) return cell.retrieve('htmltable-parser');
- var thDiv = new Element('div');
- thDiv.adopt(cell.childNodes).inject(cell);
+
+ var thDiv = this.headerWrappers[index];
var sortSpan = new Element('span', {'html': '&#160;', 'class': this.options.classSortSpan}).inject(thDiv, 'top');
this.sortSpans.push(sortSpan);
var parser = this.options.parsers[index],
View
9 Source/Interface/HtmlTable.js
@@ -129,6 +129,15 @@ var HtmlTable = new Class({
tr: new Element('tr', rowProperties).inject(target || this.body).adopt(tds),
tds: tds
};
+ },
+
+ wrapHeaders: function() {
+ if(!this.headerWrappers) {
+ this.headerWrappers = $$(this.head.cells).map(function(cell) {
+ return new Element('div').adopt(cell.childNodes).inject(cell);
+ });
+ }
+ return this.headerWrappers;
}
});
View
451 Tests/Interface/HtmlTable.Resize.html
@@ -0,0 +1,451 @@
+<style>
+table {
+ border: solid #777;
+ border-width: 0px 0px 1px 1px;
+ margin: 10px 0px;
+}
+thead {
+ background: #777;
+ border-bottom: 1px solid #333;
+ color: #fff;
+}
+tr.table-tr-odd {
+ background: #ccc;
+}
+td, th {
+ padding: 4px;
+ border-right: 1px solid #777;
+ border-top: 1px solid #777;
+ white-space: nowrap;
+ overflow: hidden;
+}
+th, th:hover {
+ cursor: pointer;
+ width: 100px;
+}
+th.table-th-sort {
+ color: #000;
+ background: #fff url(/asset/widgets/bullet_arrow_down.png) no-repeat right 3px;
+}
+th.table-th-sort-rev {
+ background: #fff url(/asset/widgets/bullet_arrow_up.png) no-repeat right 3px;
+}
+span.table-th-resizer {
+ cursor:col-resize;
+ display:block;
+ height:100%;
+ position:absolute;
+ right:-3px;
+ top:0;
+ width:6px;
+ z-index:1;
+}
+table.table-resizable th div {
+ padding-right: 0;
+ position: relative;
+}
+</style>
+
+<h3>resize: 'table' setting</h3>
+
+<table class="resizeTable" cellpadding="0" cellspacing="0">
+ <thead>
+ <tr>
+ <th>
+ ID
+ </th>
+ <th>
+ TimeZone
+ </th>
+ <th>
+ Name
+ </th>
+ <th>
+ GEO Latitude
+ </th>
+ <th>
+ GEO Longitude
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ 22
+ </td>
+ <td>
+ New York City
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 40.7255
+ </td>
+ <td>
+ -73.9983
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 23
+ </td>
+ <td>
+ San Francisco
+ </td>
+ <td>
+ America/Los_Angeles
+ </td>
+ <td>
+ 37.7587
+ </td>
+ <td>
+ -122.433
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 24
+ </td>
+ <td>
+ Boston
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 42.3583
+ </td>
+ <td>
+ -71.0603
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 25
+ </td>
+ <td>
+ Denver
+ </td>
+ <td>
+ America/Denver
+ </td>
+ <td>
+ 39.734
+ </td>
+ <td>
+ -105.026
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 31
+ </td>
+ <td>
+ Washington, DC
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 38.8964
+ </td>
+ <td>
+ -77.0447
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 32
+ </td>
+ <td>
+ Chicago
+ </td>
+ <td>
+ America/Chicago
+ </td>
+ <td>
+ 41.8858
+ </td>
+ <td>
+ -87.6181
+ </td>
+ </tr>
+ </tbody>
+ </table>
+<h3>resize: 'neighbor' setting</h3>
+<table class="resizeNeighbor" cellpadding="0" cellspacing="0">
+ <thead>
+ <tr>
+ <th>
+ ID
+ </th>
+ <th>
+ TimeZone
+ </th>
+ <th>
+ Name
+ </th>
+ <th>
+ GEO Latitude
+ </th>
+ <th>
+ GEO Longitude
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ 22
+ </td>
+ <td>
+ New York City
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 40.7255
+ </td>
+ <td>
+ -73.9983
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 23
+ </td>
+ <td>
+ San Francisco
+ </td>
+ <td>
+ America/Los_Angeles
+ </td>
+ <td>
+ 37.7587
+ </td>
+ <td>
+ -122.433
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 24
+ </td>
+ <td>
+ Boston
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 42.3583
+ </td>
+ <td>
+ -71.0603
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 25
+ </td>
+ <td>
+ Denver
+ </td>
+ <td>
+ America/Denver
+ </td>
+ <td>
+ 39.734
+ </td>
+ <td>
+ -105.026
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 31
+ </td>
+ <td>
+ Washington, DC
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 38.8964
+ </td>
+ <td>
+ -77.0447
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 32
+ </td>
+ <td>
+ Chicago
+ </td>
+ <td>
+ America/Chicago
+ </td>
+ <td>
+ 41.8858
+ </td>
+ <td>
+ -87.6181
+ </td>
+ </tr>
+ </tbody>
+ </table>
+<h3>resize: 'maintainChanges' setting</h3>
+<table class="maintainChanges" cellpadding="0" cellspacing="0">
+ <thead>
+ <tr>
+ <th>
+ ID
+ </th>
+ <th>
+ TimeZone
+ </th>
+ <th>
+ Name
+ </th>
+ <th>
+ GEO Latitude
+ </th>
+ <th>
+ GEO Longitude
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ 22
+ </td>
+ <td>
+ New York City
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 40.7255
+ </td>
+ <td>
+ -73.9983
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 23
+ </td>
+ <td>
+ San Francisco
+ </td>
+ <td>
+ America/Los_Angeles
+ </td>
+ <td>
+ 37.7587
+ </td>
+ <td>
+ -122.433
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 24
+ </td>
+ <td>
+ Boston
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 42.3583
+ </td>
+ <td>
+ -71.0603
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 25
+ </td>
+ <td>
+ Denver
+ </td>
+ <td>
+ America/Denver
+ </td>
+ <td>
+ 39.734
+ </td>
+ <td>
+ -105.026
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 31
+ </td>
+ <td>
+ Washington, DC
+ </td>
+ <td>
+ America/New_York
+ </td>
+ <td>
+ 38.8964
+ </td>
+ <td>
+ -77.0447
+ </td>
+ </tr>
+ <tr>
+ <td>
+ 32
+ </td>
+ <td>
+ Chicago
+ </td>
+ <td>
+ America/Chicago
+ </td>
+ <td>
+ 41.8858
+ </td>
+ <td>
+ -87.6181
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+<script src="/depender/build?require=More/HtmlTable.Resize,More/HtmlTable.Select,More/HtmlTable.Sort,Core/DomReady"></script>
+<script>
+var resizeTable = new HtmlTable($$('.resizeTable')[0],{
+ resizable : true,
+ sortable: true,
+ selectable: true,
+ resize: 'table'
+});
+var resizeNeighbor = new HtmlTable($$('.resizeNeighbor')[0],{
+ resizable: true,
+ sortable: true,
+ selectable: true,
+ resize: 'neighbor'
+});
+var maintainChanges = new HtmlTable($$('.maintainChanges')[0], {
+ resizable: true,
+ sortable: true,
+ selectable: true,
+ resize: 'maintainChanges'
+});
+</script>
View
1  package.yml
@@ -70,6 +70,7 @@ sources:
- "Source/Utilities/IframeShim.js"
- "Source/Interface/HtmlTable.js"
- "Source/Interface/HtmlTable.Zebra.js"
+ - "Source/Interface/HtmlTable.Resize.js"
- "Source/Interface/HtmlTable.Sort.js"
- "Source/Interface/HtmlTable.Select.js"
- "Source/Interface/Keyboard.js"
Something went wrong with that request. Please try again.