You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by se...@apache.org on 2013/07/18 18:34:42 UTC
[07/39] Format JS
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/widgets/cloudBrowser.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js
index 9a56bb3..a5f253b 100644
--- a/ui/scripts/ui/widgets/cloudBrowser.js
+++ b/ui/scripts/ui/widgets/cloudBrowser.js
@@ -15,418 +15,427 @@
// specific language governing permissions and limitations
// under the License.
(function($, cloudStack) {
- cloudStack.ui.widgets.browser = {};
+ cloudStack.ui.widgets.browser = {};
- /**
- * Breadcrumb-related functions
- */
- var _breadcrumb = cloudStack.ui.widgets.browser.breadcrumb = {
/**
- * Generate new breadcrumb
+ * Breadcrumb-related functions
*/
- create: function($panel, title) {
- // Attach panel as ref for breadcrumb
- return cloudStack.ui.event.elem(
- 'cloudBrowser', 'breadcrumb',
- $('<div>')
- .append(
- $('<li>')
- .attr({
- title: title
- })
- .append(
- $('<span>').html(title)
- )
- )
- .append($('<div>').addClass('end'))
- .children(),
- {
- panel: $panel
- }
- );
- },
-
- /**
- * Get breadcrumbs matching specified panels
- */
- filter: function($panels) {
- var $breadcrumbs = $('#breadcrumbs ul li');
- var $result = $([]);
-
- $panels.each(function() {
- var $panel = $(this);
-
- $.merge(
- $result,
- $.merge(
- $breadcrumbs.filter(function() {
- return $(this).index('#breadcrumbs ul li') == $panel.index();
- }),
-
- // Also include ends
- $breadcrumbs.siblings('div.end').filter(function() {
- return $(this).index('div.end') == $panel.index() + 1;
- })
- )
- );
- });
-
- return $result;
- }
- };
-
- /**
- * Container-related functions
- */
- var _container = cloudStack.ui.widgets.browser.container = {
- /**
- * Get all panels from container
- */
- panels: function($container) {
- return $container.find('div.panel');
- }
- };
-
- /**
- * Panel-related functions
- */
- var _panel = cloudStack.ui.widgets.browser.panel = {
- /**
- * Compute width of panel, relative to container
- */
- width: function($container, options) {
- options = options ? options : {};
- var width = $container.find('div.panel').size() < 1 || options.maximized == true ?
- $container.width() : $container.width() - $container.width() / 4;
-
- return width;
- },
-
- /**
- * Get left position
- */
- position: function($container, options) {
- return $container.find('div.panel').size() <= 1 || options.maximized == true ?
- 0 : _panel.width($container, options) - _panel.width($container, options) / 1.5;
- },
-
- /**
- * Get the top panel z-index, for proper stacking
- */
- topIndex: function($container) {
- var base = 50; // Minimum z-index
-
- return Math.max.apply(
- null,
- $.map(
- $container.find('div.panel'),
- function(elem) {
- return parseInt($(elem).css('z-index')) || base;
- }
- )
- ) + 1;
- },
-
- /**
- * State when panel is outside container
- */
- initialState: function($container) {
- return {
- left: $container.width()
- };
- },
-
- /**
- * Get panel and breadcrumb behind specific panel
- */
- lower: function($container, $panel) {
- return _container.panels($container).filter(function() {
- return $(this).index() < $panel.index();
- });
- },
+ var _breadcrumb = cloudStack.ui.widgets.browser.breadcrumb = {
+ /**
+ * Generate new breadcrumb
+ */
+ create: function($panel, title) {
+ // Attach panel as ref for breadcrumb
+ return cloudStack.ui.event.elem(
+ 'cloudBrowser', 'breadcrumb',
+ $('<div>')
+ .append(
+ $('<li>')
+ .attr({
+ title: title
+ })
+ .append(
+ $('<span>').html(title)
+ )
+ )
+ .append($('<div>').addClass('end'))
+ .children(), {
+ panel: $panel
+ }
+ );
+ },
+
+ /**
+ * Get breadcrumbs matching specified panels
+ */
+ filter: function($panels) {
+ var $breadcrumbs = $('#breadcrumbs ul li');
+ var $result = $([]);
+
+ $panels.each(function() {
+ var $panel = $(this);
+
+ $.merge(
+ $result,
+ $.merge(
+ $breadcrumbs.filter(function() {
+ return $(this).index('#breadcrumbs ul li') == $panel.index();
+ }),
+
+ // Also include ends
+ $breadcrumbs.siblings('div.end').filter(function() {
+ return $(this).index('div.end') == $panel.index() + 1;
+ })
+ )
+ );
+ });
- /**
- * Get panel and breadcrumb stacked above specific panel
- */
- higher: function($container, $panel) {
- return _container.panels($container).filter(function() {
- return $(this).index() > $panel.index();
- });
- },
+ return $result;
+ }
+ };
/**
- * Generate new panel
+ * Container-related functions
*/
- create: function($container, options) {
- var $panel = $('<div>').addClass('panel').css(
- {
- position: 'absolute',
- width: _panel.width($container, { maximized: options.maximized }),
- zIndex: _panel.topIndex($container)
+ var _container = cloudStack.ui.widgets.browser.container = {
+ /**
+ * Get all panels from container
+ */
+ panels: function($container) {
+ return $container.find('div.panel');
}
- ).append(
- // Shadow
- $('<div>').addClass('shadow')
- ).append(options.data);
-
- if (options.maximized) $panel.addClass('always-maximized');
-
- return $panel;
- }
- };
-
- /**
- * Browser -- jQuery widget
- */
- $.widget('cloudStack.cloudBrowser', {
- _init: function() {
- this.element.addClass('cloudStack-widget cloudBrowser');
- $('#breadcrumbs').append(
- $('<ul>')
- );
- },
+ };
/**
- * Make target panel the top-most
+ * Panel-related functions
*/
- selectPanel: function(args) {
- var $panel = args.panel;
- var $container = this.element;
- var $toShow = _panel.lower($container, $panel);
- var $toRemove = _panel.higher($container, $panel);
- var complete = args.complete;
-
- if ($panel.hasClass('maximized')) return false;
-
- _breadcrumb.filter($toRemove).remove();
- _breadcrumb.filter($panel.siblings()).removeClass('active');
- _breadcrumb.filter($panel).addClass('active');
- _breadcrumb.filter($('div.panel')).find('span').animate({
- opacity: 1
- });
- _breadcrumb.filter(
- $('div.panel.maximized')
- .removeClass('maximized')
- .addClass('reduced')
- ).removeClass('active maximized');
-
- $toRemove.animate(
- _panel.initialState($container),
- {
- duration: 500,
- complete: function() {
- $(this).remove();
-
- if (complete) complete($toShow);
- }
+ var _panel = cloudStack.ui.widgets.browser.panel = {
+ /**
+ * Compute width of panel, relative to container
+ */
+ width: function($container, options) {
+ options = options ? options : {};
+ var width = $container.find('div.panel').size() < 1 || options.maximized == true ?
+ $container.width() : $container.width() - $container.width() / 4;
+
+ return width;
+ },
+
+ /**
+ * Get left position
+ */
+ position: function($container, options) {
+ return $container.find('div.panel').size() <= 1 || options.maximized == true ?
+ 0 : _panel.width($container, options) - _panel.width($container, options) / 1.5;
+ },
+
+ /**
+ * Get the top panel z-index, for proper stacking
+ */
+ topIndex: function($container) {
+ var base = 50; // Minimum z-index
+
+ return Math.max.apply(
+ null,
+ $.map(
+ $container.find('div.panel'),
+ function(elem) {
+ return parseInt($(elem).css('z-index')) || base;
+ }
+ )
+ ) + 1;
+ },
+
+ /**
+ * State when panel is outside container
+ */
+ initialState: function($container) {
+ return {
+ left: $container.width()
+ };
+ },
+
+ /**
+ * Get panel and breadcrumb behind specific panel
+ */
+ lower: function($container, $panel) {
+ return _container.panels($container).filter(function() {
+ return $(this).index() < $panel.index();
+ });
+ },
+
+ /**
+ * Get panel and breadcrumb stacked above specific panel
+ */
+ higher: function($container, $panel) {
+ return _container.panels($container).filter(function() {
+ return $(this).index() > $panel.index();
+ });
+ },
+
+ /**
+ * Generate new panel
+ */
+ create: function($container, options) {
+ var $panel = $('<div>').addClass('panel').css({
+ position: 'absolute',
+ width: _panel.width($container, {
+ maximized: options.maximized
+ }),
+ zIndex: _panel.topIndex($container)
+ }).append(
+ // Shadow
+ $('<div>').addClass('shadow')
+ ).append(options.data);
+
+ if (options.maximized) $panel.addClass('always-maximized');
+
+ return $panel;
}
- );
- $toShow.show();
- $panel.animate({
- left: _panel.position($container, { maximized: $panel.hasClass('always-maximized') })
- });
- $panel.show().removeClass('reduced');
- },
+ };
/**
- * Toggle selected panel as fully expanded, hiding/showing other panels
+ * Browser -- jQuery widget
*/
- toggleMaximizePanel: function(args) {
- var $panel = args.panel;
- var $container = this.element;
- var $toHide = $panel.siblings(':not(.always-maximized)');
- var $shadow = $toHide.find('div.shadow');
-
- if (args.panel.hasClass('maximized')) {
- _breadcrumb.filter($panel).removeClass('maximized');
- $panel.removeClass('maximized');
- $panel.addClass('reduced');
- _breadcrumb.filter($panel.siblings()).find('span').animate({ opacity: 1 });
- $toHide.animate({ left: _panel.position($container, {}) },
- { duration: 500 });
- $shadow.show();
- } else {
- _breadcrumb.filter($panel).addClass('maximized');
- $panel.removeClass('reduced');
- $panel.addClass('maximized');
- _breadcrumb.filter($panel.siblings()).find('span').animate({ opacity: 0.5 });
- $toHide.animate(_panel.initialState($container),
- { duration: 500 });
- $shadow.hide();
- }
- },
+ $.widget('cloudStack.cloudBrowser', {
+ _init: function() {
+ this.element.addClass('cloudStack-widget cloudBrowser');
+ $('#breadcrumbs').append(
+ $('<ul>')
+ );
+ },
+
+ /**
+ * Make target panel the top-most
+ */
+ selectPanel: function(args) {
+ var $panel = args.panel;
+ var $container = this.element;
+ var $toShow = _panel.lower($container, $panel);
+ var $toRemove = _panel.higher($container, $panel);
+ var complete = args.complete;
+
+ if ($panel.hasClass('maximized')) return false;
+
+ _breadcrumb.filter($toRemove).remove();
+ _breadcrumb.filter($panel.siblings()).removeClass('active');
+ _breadcrumb.filter($panel).addClass('active');
+ _breadcrumb.filter($('div.panel')).find('span').animate({
+ opacity: 1
+ });
+ _breadcrumb.filter(
+ $('div.panel.maximized')
+ .removeClass('maximized')
+ .addClass('reduced')
+ ).removeClass('active maximized');
+
+ $toRemove.animate(
+ _panel.initialState($container), {
+ duration: 500,
+ complete: function() {
+ $(this).remove();
+
+ if (complete) complete($toShow);
+ }
+ }
+ );
+ $toShow.show();
+ $panel.animate({
+ left: _panel.position($container, {
+ maximized: $panel.hasClass('always-maximized')
+ })
+ });
+ $panel.show().removeClass('reduced');
+ },
+
+ /**
+ * Toggle selected panel as fully expanded, hiding/showing other panels
+ */
+ toggleMaximizePanel: function(args) {
+ var $panel = args.panel;
+ var $container = this.element;
+ var $toHide = $panel.siblings(':not(.always-maximized)');
+ var $shadow = $toHide.find('div.shadow');
+
+ if (args.panel.hasClass('maximized')) {
+ _breadcrumb.filter($panel).removeClass('maximized');
+ $panel.removeClass('maximized');
+ $panel.addClass('reduced');
+ _breadcrumb.filter($panel.siblings()).find('span').animate({
+ opacity: 1
+ });
+ $toHide.animate({
+ left: _panel.position($container, {})
+ }, {
+ duration: 500
+ });
+ $shadow.show();
+ } else {
+ _breadcrumb.filter($panel).addClass('maximized');
+ $panel.removeClass('reduced');
+ $panel.addClass('maximized');
+ _breadcrumb.filter($panel.siblings()).find('span').animate({
+ opacity: 0.5
+ });
+ $toHide.animate(_panel.initialState($container), {
+ duration: 500
+ });
+ $shadow.hide();
+ }
+ },
+
+ /**
+ * Append new panel to end of container
+ */
+ addPanel: function(args) {
+ var duration = args.duration ? args.duration : 500;
+ var $container = this.element;
+ var $parent = args.parent;
+ var $panel, $reduced, targetPosition;
+
+ // Create panel
+ $panel = _panel.create(this.element, {
+ maximized: args.maximizeIfSelected,
+ data: args.data
+ });
- /**
- * Append new panel to end of container
- */
- addPanel: function(args) {
- var duration = args.duration ? args.duration : 500;
- var $container = this.element;
- var $parent = args.parent;
- var $panel, $reduced, targetPosition;
-
- // Create panel
- $panel = _panel.create(this.element, {
- maximized: args.maximizeIfSelected,
- data: args.data
- });
-
- // Remove existing panels from parent
- if ($parent) {
- // Cleanup transitioning panels -- prevent old complete actions from running
- $parent.siblings().stop();
-
- _breadcrumb.filter(
- $('div.panel.maximized')
- .removeClass('maximized')
- .addClass('reduced')
- ).removeClass('active maximized');
-
- $parent.removeClass('maximized');
- _breadcrumb.filter($parent.next()).remove();
- $container.find($parent.next()).remove();
- }
-
- // Append panel
- $panel.appendTo($container);
- _breadcrumb.filter($panel.siblings()).removeClass('active');
- _breadcrumb.create($panel, args.title)
- .addClass('active')
- .appendTo('#breadcrumbs ul');
-
- // Reduced appearance for previous panels
- $panel.siblings().filter(function() {
- return $(this).index() < $panel.index();
- }).addClass('reduced');
-
- // Panel initial state
- if ($panel.index() == 0) $panel.addClass('always-maximized');
- $panel.css(
- _panel.initialState($container, $panel)
- );
-
- // Panel slide-in
- targetPosition = _panel.position($container, {
- maximized: args.maximizeIfSelected
- });
- if (!$panel.index()) {
- // Just show immediately if this is the first panel
- $panel.css(
- { left: targetPosition }
- );
- if (args.complete) args.complete($panel, _breadcrumb.filter($panel));
- } else {
- // Animate slide-in
- $panel.animate({ left: targetPosition }, {
- duration: duration,
- easing: 'easeOutCirc',
- complete: function() {
- // Hide panels
+ // Remove existing panels from parent
+ if ($parent) {
+ // Cleanup transitioning panels -- prevent old complete actions from running
+ $parent.siblings().stop();
+
+ _breadcrumb.filter(
+ $('div.panel.maximized')
+ .removeClass('maximized')
+ .addClass('reduced')
+ ).removeClass('active maximized');
+
+ $parent.removeClass('maximized');
+ _breadcrumb.filter($parent.next()).remove();
+ $container.find($parent.next()).remove();
+ }
+
+ // Append panel
+ $panel.appendTo($container);
+ _breadcrumb.filter($panel.siblings()).removeClass('active');
+ _breadcrumb.create($panel, args.title)
+ .addClass('active')
+ .appendTo('#breadcrumbs ul');
+
+ // Reduced appearance for previous panels
$panel.siblings().filter(function() {
- return $(this).width() == $panel.width();
+ return $(this).index() < $panel.index();
+ }).addClass('reduced');
+
+ // Panel initial state
+ if ($panel.index() == 0) $panel.addClass('always-maximized');
+ $panel.css(
+ _panel.initialState($container, $panel)
+ );
+
+ // Panel slide-in
+ targetPosition = _panel.position($container, {
+ maximized: args.maximizeIfSelected
});
+ if (!$panel.index()) {
+ // Just show immediately if this is the first panel
+ $panel.css({
+ left: targetPosition
+ });
+ if (args.complete) args.complete($panel, _breadcrumb.filter($panel));
+ } else {
+ // Animate slide-in
+ $panel.animate({
+ left: targetPosition
+ }, {
+ duration: duration,
+ easing: 'easeOutCirc',
+ complete: function() {
+ // Hide panels
+ $panel.siblings().filter(function() {
+ return $(this).width() == $panel.width();
+ });
+
+ if ($panel.is(':visible') && args.complete) args.complete($panel);
+ }
+ });
+ };
+
+ return $panel;
+ },
+
+ /**
+ * Clear all panels
+ */
+ removeAllPanels: function(args) {
+ $('div.panel').stop(); // Prevent destroyed panels from animating
+ this.element.find('div.panel').remove();
+ $('#breadcrumbs').find('ul li').remove();
+ $('#breadcrumbs').find('ul div.end').remove();
+ }
+ });
- if ($panel.is(':visible') && args.complete) args.complete($panel);
- }
- });
- };
+ $('#breadcrumbs li').live('click', cloudStack.ui.event.bind(
+ 'cloudBrowser', {
+ 'breadcrumb': function($target, $browser, data) {
- return $panel;
- },
+ if ($('#browser').hasClass('panel-highlight')) {
+ return false;
+ }
- /**
- * Clear all panels
- */
- removeAllPanels: function(args) {
- $('div.panel').stop(); // Prevent destroyed panels from animating
- this.element.find('div.panel').remove();
- $('#breadcrumbs').find('ul li').remove();
- $('#breadcrumbs').find('ul div.end').remove();
- }
- });
-
- $('#breadcrumbs li').live('click', cloudStack.ui.event.bind(
- 'cloudBrowser',
- {
- 'breadcrumb': function($target, $browser, data) {
-
- if ($ ('#browser').hasClass('panel-highlight')) {
- return false;
- }
-
- $browser.cloudBrowser('selectPanel', { panel: data.panel });
- }
- }
- ));
-
- // Breadcrumb hovering
- $('#breadcrumbs li').live('mouseover', cloudStack.ui.event.bind(
- 'cloudBrowser',
- {
- 'breadcrumb': function($target, $browser, data) {
- var $hiddenPanels = data.panel.siblings().filter(function(){
- return $(this).index() > data.panel.index();
- });
- var $targetPanel = data.panel.filter(':first');
- var $targetBreadcrumb = _breadcrumb.filter($targetPanel);
- var $panelWrapper = $('<div>').addClass('panel panel-highlight-wrapper');
-
- $hiddenPanels.addClass('mouseover-hidden');
-
- $browser.data('browser-panel-highlight-timer', setTimeout(function() {
- $('#browser').addClass('panel-highlight');
- $('.overlay').remove();
-
- // Setup panel and wrapper positioning
- $panelWrapper
- .css({
- left: $targetPanel.position().left
- })
- .width($targetPanel.width());
- $targetPanel
- .wrap($panelWrapper);
- $panelWrapper
- .zIndex(10000)
- .overlay();
- $targetPanel.filter(':last').addClass('highlighted');
-
- // Setup breadcrumbs
- $targetBreadcrumb.each(function() {
- $(this).data('breadcrumb-original-zindex', $(this).zIndex());
- });
- $targetBreadcrumb.zIndex(10001);
-
- $hiddenPanels.hide();
- }, 1000));
- }
- }
- ));
-
- $('#breadcrumbs li').live('mouseout',cloudStack.ui.event.bind(
- 'cloudBrowser',
- {
- 'breadcrumb': function($target, $browser, data) {
- var $getHiddenPanels = $browser.find('.panel.mouseover-hidden');
- var $visiblePanels = $getHiddenPanels.siblings();
- var $visibleBreadcrumbs = _breadcrumb.filter($visiblePanels);
-
- clearTimeout($browser.data('browser-panel-highlight-timer'));
- $('#browser').removeClass('panel-highlight');
- $('#browser .panel').removeClass('highlighted');
- $('#browser .panel.panel-highlight-wrapper').each(function() {
- var $wrapper = $(this);
- var $panel = $wrapper.find('.panel');
-
- $wrapper.after($panel);
- $wrapper.remove();
- });
- $getHiddenPanels.removeClass('mouseover-hidden').show();
- $visibleBreadcrumbs.each(function() {
- $(this).zIndex($(this).data('breadcrumb-original-zindex'));
- });
- $('.overlay').remove();
- $('#browser .panel > .highlight-arrow').remove();
- }
- }
- ));
+ $browser.cloudBrowser('selectPanel', {
+ panel: data.panel
+ });
+ }
+ }
+ ));
+
+ // Breadcrumb hovering
+ $('#breadcrumbs li').live('mouseover', cloudStack.ui.event.bind(
+ 'cloudBrowser', {
+ 'breadcrumb': function($target, $browser, data) {
+ var $hiddenPanels = data.panel.siblings().filter(function() {
+ return $(this).index() > data.panel.index();
+ });
+ var $targetPanel = data.panel.filter(':first');
+ var $targetBreadcrumb = _breadcrumb.filter($targetPanel);
+ var $panelWrapper = $('<div>').addClass('panel panel-highlight-wrapper');
+
+ $hiddenPanels.addClass('mouseover-hidden');
+
+ $browser.data('browser-panel-highlight-timer', setTimeout(function() {
+ $('#browser').addClass('panel-highlight');
+ $('.overlay').remove();
+
+ // Setup panel and wrapper positioning
+ $panelWrapper
+ .css({
+ left: $targetPanel.position().left
+ })
+ .width($targetPanel.width());
+ $targetPanel
+ .wrap($panelWrapper);
+ $panelWrapper
+ .zIndex(10000)
+ .overlay();
+ $targetPanel.filter(':last').addClass('highlighted');
+
+ // Setup breadcrumbs
+ $targetBreadcrumb.each(function() {
+ $(this).data('breadcrumb-original-zindex', $(this).zIndex());
+ });
+ $targetBreadcrumb.zIndex(10001);
+
+ $hiddenPanels.hide();
+ }, 1000));
+ }
+ }
+ ));
+
+ $('#breadcrumbs li').live('mouseout', cloudStack.ui.event.bind(
+ 'cloudBrowser', {
+ 'breadcrumb': function($target, $browser, data) {
+ var $getHiddenPanels = $browser.find('.panel.mouseover-hidden');
+ var $visiblePanels = $getHiddenPanels.siblings();
+ var $visibleBreadcrumbs = _breadcrumb.filter($visiblePanels);
+
+ clearTimeout($browser.data('browser-panel-highlight-timer'));
+ $('#browser').removeClass('panel-highlight');
+ $('#browser .panel').removeClass('highlighted');
+ $('#browser .panel.panel-highlight-wrapper').each(function() {
+ var $wrapper = $(this);
+ var $panel = $wrapper.find('.panel');
+
+ $wrapper.after($panel);
+ $wrapper.remove();
+ });
+ $getHiddenPanels.removeClass('mouseover-hidden').show();
+ $visibleBreadcrumbs.each(function() {
+ $(this).zIndex($(this).data('breadcrumb-original-zindex'));
+ });
+ $('.overlay').remove();
+ $('#browser .panel > .highlight-arrow').remove();
+ }
+ }
+ ));
})(jQuery, cloudStack);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui/widgets/dataTable.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js
index 1b3ea82..66d7095 100644
--- a/ui/scripts/ui/widgets/dataTable.js
+++ b/ui/scripts/ui/widgets/dataTable.js
@@ -15,264 +15,264 @@
// specific language governing permissions and limitations
// under the License.
(function($) {
- /**
- * Convert table to be resizable and sortable
- *
- */
- $.fn.dataTable = function(method, options) {
- var $table = this;
-
/**
- * Check if position is in 'resize zone'
+ * Convert table to be resizable and sortable
*
- * @return boolean, true if position is within bounds
- */
- var withinResizeBounds = function($elem, posX) {
- var leftBound = $elem.offset().left + $elem.width() / 1.2;
-
- return posX > leftBound;
- };
-
- /**
- * Handles actual resizing of table headers
*/
- var resizeDragEvent = function(event) {
- var $elem = $(this);
-
- if (event.type == 'mousedown') {
- $elem.addClass('dragging');
-
- return false;
- } else if (event.type == 'mouseup') {
- $table.find('th').removeClass('dragging');
-
- return false;
- }
-
- var isDraggable = $elem.hasClass('dragging');
-
- if (!isDraggable) {
- return false;
- }
-
- var columnIndex = $elem.index();
-
- // Get all TDs from column
- var columnCells = [];
- $table.find('tbody tr:first').each(function() {
- var targetCell = $($(this).find('td')[columnIndex]);
-
- columnCells.push(targetCell);
- });
-
- var tolerance = 25;
- var targetWidth = event.pageX - $elem.offset().left + tolerance;
- $(columnCells).each(function() {
- $(this).css({
- width: targetWidth
- });
- });
-
- resizeHeaders();
-
- return true;
- };
-
- var splitTable = function() {
- var $mainContainer = $('<div>')
- .addClass('data-table')
- .appendTo($table.parent())
- .append(
- $table.remove()
+ $.fn.dataTable = function(method, options) {
+ var $table = this;
+
+ /**
+ * Check if position is in 'resize zone'
+ *
+ * @return boolean, true if position is within bounds
+ */
+ var withinResizeBounds = function($elem, posX) {
+ var leftBound = $elem.offset().left + $elem.width() / 1.2;
+
+ return posX > leftBound;
+ };
+
+ /**
+ * Handles actual resizing of table headers
+ */
+ var resizeDragEvent = function(event) {
+ var $elem = $(this);
+
+ if (event.type == 'mousedown') {
+ $elem.addClass('dragging');
+
+ return false;
+ } else if (event.type == 'mouseup') {
+ $table.find('th').removeClass('dragging');
+
+ return false;
+ }
+
+ var isDraggable = $elem.hasClass('dragging');
+
+ if (!isDraggable) {
+ return false;
+ }
+
+ var columnIndex = $elem.index();
+
+ // Get all TDs from column
+ var columnCells = [];
+ $table.find('tbody tr:first').each(function() {
+ var targetCell = $($(this).find('td')[columnIndex]);
+
+ columnCells.push(targetCell);
+ });
+
+ var tolerance = 25;
+ var targetWidth = event.pageX - $elem.offset().left + tolerance;
+ $(columnCells).each(function() {
+ $(this).css({
+ width: targetWidth
+ });
+ });
+
+ resizeHeaders();
+
+ return true;
+ };
+
+ var splitTable = function() {
+ var $mainContainer = $('<div>')
+ .addClass('data-table')
+ .appendTo($table.parent())
+ .append(
+ $table.remove()
);
- $table = $mainContainer;
- var $theadContainer = $('<div>').addClass('fixed-header').prependTo($table);
- var $theadTable = $('<table>').appendTo($theadContainer).attr('nowrap', 'nowrap');
- var $thead = $table.find('thead').remove().appendTo($theadTable);
-
- return $thead;
- };
-
- /**
- * Event to set resizable appearance on hover
- */
- var hoverResizableEvent = function(event) {
- var $elem = $(this);
- var posX = event.pageX;
-
- if (event.type != 'mouseout' && withinResizeBounds($elem, posX)) {
- $elem.addClass('resizable');
- } else {
- $elem.removeClass('resizable');
- }
-
- return true;
- };
-
- /**
- * Make row at specified index selected or unselected
- *
- * @param rowIndex Row's index, starting at 1
- */
- var toggleSelectRow = function(rowIndex) {
- var $rows = $table.find('tbody tr');
- var $row = $($rows[rowIndex]);
-
- $row.siblings().removeClass('selected');
- return $row.addClass('selected');
- };
-
- var computeEvenOddRows = function() {
- var currentRowType = 'even';
- $table.find('tbody tr').each(function() {
- var $row = $(this);
-
- $row.removeClass('even').removeClass('odd');
- $row.addClass(currentRowType);
-
- if (currentRowType == 'even') currentRowType = 'odd';
- else currentRowType = 'even';
- });
- };
+ $table = $mainContainer;
+ var $theadContainer = $('<div>').addClass('fixed-header').prependTo($table);
+ var $theadTable = $('<table>').appendTo($theadContainer).attr('nowrap', 'nowrap');
+ var $thead = $table.find('thead').remove().appendTo($theadTable);
+
+ return $thead;
+ };
+
+ /**
+ * Event to set resizable appearance on hover
+ */
+ var hoverResizableEvent = function(event) {
+ var $elem = $(this);
+ var posX = event.pageX;
+
+ if (event.type != 'mouseout' && withinResizeBounds($elem, posX)) {
+ $elem.addClass('resizable');
+ } else {
+ $elem.removeClass('resizable');
+ }
+
+ return true;
+ };
+
+ /**
+ * Make row at specified index selected or unselected
+ *
+ * @param rowIndex Row's index, starting at 1
+ */
+ var toggleSelectRow = function(rowIndex) {
+ var $rows = $table.find('tbody tr');
+ var $row = $($rows[rowIndex]);
+
+ $row.siblings().removeClass('selected');
+ return $row.addClass('selected');
+ };
+
+ var computeEvenOddRows = function() {
+ var currentRowType = 'even';
+ $table.find('tbody tr').each(function() {
+ var $row = $(this);
+
+ $row.removeClass('even').removeClass('odd');
+ $row.addClass(currentRowType);
+
+ if (currentRowType == 'even') currentRowType = 'odd';
+ else currentRowType = 'even';
+ });
+ };
+
+ /**
+ * Sort table by column
+ *
+ * @param columnIndex Index of column (starting at 0) to sort by
+ */
+ var sortTable = function(columnIndex) {
+ return false;
+ var direction = 'asc';
+
+ if ($table.find('thead th').hasClass('sorted ' + direction)) {
+ direction = 'desc';
+ }
+
+ $table.find('thead th').removeClass('sorted desc asc');
+ $($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction);
+
+ var $elems = $table.find('tbody td').filter(function() {
+ return $(this).index() == columnIndex;
+ });
+
+ var sortData = [];
+ $elems.each(function() {
+ sortData.push($(this).html());
+ sortData.sort();
+
+ if (direction == 'asc') {
+ sortData.reverse();
+ }
+ });
+
+ $(sortData).each(function() {
+ var sortKey = this;
+ var $targetCell = $elems.filter(function() {
+ return $(this).html() == sortKey;
+ });
+ var $targetContainer = $targetCell.parent();
+
+ $targetContainer.remove().appendTo($table.find('tbody'));
+ });
+
+ computeEvenOddRows();
+ };
+
+ var resizeHeaders = function() {
+ var $thead = $table.closest('div.data-table').find('thead');
+ var $tbody = $table.find('tbody');
+ var $ths = $thead.find('th');
+ var $tds = $tbody.find('tr:first td');
+
+ if ($ths.size() > $tds.size()) {
+ $ths.width(
+ $table.width() / $ths.size()
+ );
+ return false;
+ }
+
+ $ths.each(function() {
+ var $th = $(this);
+
+ var $td = $tds.filter(function() {
+ return $(this).index() == $th.index();
+ });
+
+ $th.width($td.width());
+
+ return true;
+ });
+
+ return $ths;
+ };
+
+ var methods = {
+ removeRow: function(rowIndex) {
+ var $row = $($table.find('tbody tr')[rowIndex]);
+
+ $row.fadeOut(function() {
+ $row.remove();
+ computeEvenOddRows();
+ });
+
+ return $row;
+ },
+
+ refresh: function() {
+ resizeHeaders();
+ computeEvenOddRows();
+ },
+
+ selectRow: function(rowIndex) {
+ var $row = $($table.find('tbody tr')[rowIndex]);
+
+ $row.siblings().removeClass('selected');
+ $row.addClass('selected');
+ }
+ };
+
+ var init = function() {
+ var noSelect = options && options.noSelect == true ? true : false;
+ if (!$table.closest('div.data-table').size() && !$table.hasClass('no-split')) {
+ splitTable();
+ $table.find('tbody').closest('table').addClass('body');
+ }
+
+ $table.find('th').bind('mousemove mouseout', hoverResizableEvent);
+ $table.find('th').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
+ $table.find('th').bind('click', function(event) {
+ if ($(this).hasClass('resizable')) {
+ return false;
+ }
+
+ sortTable($(event.target).index());
+
+ return false;
+ });
+
+ $table.bind('click', function(event) {
+ var $tr = $(event.target).closest('tr');
+
+ if (!$tr.size() || noSelect) return true;
+ var rowIndex = $tr.index();
+
+ toggleSelectRow(rowIndex);
+
+ return true;
+ });
+
+ computeEvenOddRows();
+ resizeHeaders();
+ };
- /**
- * Sort table by column
- *
- * @param columnIndex Index of column (starting at 0) to sort by
- */
- var sortTable = function(columnIndex) {
- return false;
- var direction = 'asc';
-
- if ($table.find('thead th').hasClass('sorted ' + direction)) {
- direction = 'desc';
- }
-
- $table.find('thead th').removeClass('sorted desc asc');
- $($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction);
-
- var $elems = $table.find('tbody td').filter(function() {
- return $(this).index() == columnIndex;
- });
-
- var sortData = [];
- $elems.each(function() {
- sortData.push($(this).html());
- sortData.sort();
-
- if (direction == 'asc') {
- sortData.reverse();
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ } else if (!method) {
+ init();
+ } else {
+ $.error('Method ' + method + ' does not exist on jQuery.dataTable');
}
- });
-
- $(sortData).each(function() {
- var sortKey = this;
- var $targetCell = $elems.filter(function() {
- return $(this).html() == sortKey;
- });
- var $targetContainer = $targetCell.parent();
-
- $targetContainer.remove().appendTo($table.find('tbody'));
- });
- computeEvenOddRows();
+ return $table;
};
-
- var resizeHeaders = function() {
- var $thead = $table.closest('div.data-table').find('thead');
- var $tbody = $table.find('tbody');
- var $ths = $thead.find('th');
- var $tds = $tbody.find('tr:first td');
-
- if ($ths.size() > $tds.size()) {
- $ths.width(
- $table.width() / $ths.size()
- );
- return false;
- }
-
- $ths.each(function() {
- var $th = $(this);
-
- var $td = $tds.filter(function() {
- return $(this).index() == $th.index();
- });
-
- $th.width($td.width());
-
- return true;
- });
-
- return $ths;
- };
-
- var methods = {
- removeRow: function(rowIndex) {
- var $row = $($table.find('tbody tr')[rowIndex]);
-
- $row.fadeOut(function() {
- $row.remove();
- computeEvenOddRows();
- });
-
- return $row;
- },
-
- refresh: function() {
- resizeHeaders();
- computeEvenOddRows();
- },
-
- selectRow: function(rowIndex) {
- var $row = $($table.find('tbody tr')[rowIndex]);
-
- $row.siblings().removeClass('selected');
- $row.addClass('selected');
- }
- };
-
- var init = function() {
- var noSelect = options && options.noSelect == true ? true : false;
- if (!$table.closest('div.data-table').size() && !$table.hasClass('no-split')) {
- splitTable();
- $table.find('tbody').closest('table').addClass('body');
- }
-
- $table.find('th').bind('mousemove mouseout', hoverResizableEvent);
- $table.find('th').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
- $table.find('th').bind('click', function(event) {
- if ($(this).hasClass('resizable')) {
- return false;
- }
-
- sortTable($(event.target).index());
-
- return false;
- });
-
- $table.bind('click', function(event) {
- var $tr = $(event.target).closest('tr');
-
- if (!$tr.size() || noSelect) return true;
- var rowIndex = $tr.index();
-
- toggleSelectRow(rowIndex);
-
- return true;
- });
-
- computeEvenOddRows();
- resizeHeaders();
- };
-
- if (methods[method]) {
- return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
- } else if (!method) {
- init();
- } else {
- $.error('Method ' + method + ' does not exist on jQuery.dataTable');
- }
-
- return $table;
- };
}(jQuery));