datatable-sort.js revision 14805a30335bf80392758ec6550cd43f8e9c370d
1N/A/**
1N/A * Plugs DataTable with sorting functionality.
1N/A *
1N/A * @module datatable
1N/A * @submodule datatable-sort
1N/A */
1N/A
1N/A/**
1N/A * Adds column sorting to DataTable.
1N/A * @class DataTableSort
1N/A * @extends Plugin.Base
1N/A */
1N/Avar YgetClassName = Y.ClassNameManager.getClassName,
1N/A
1N/A DATATABLE = "datatable",
1N/A COLUMN = "column",
1N/A ASC = "asc",
1N/A DESC = "desc",
1N/A
1N/A //TODO: Don't use hrefs - use tab/arrow/enter
1N/A TEMPLATE = '<a class="{link_class}" title="{link_title}" href="{link_href}">{value}</a>';
1N/A
1N/A
1N/Afunction DataTableSort() {
1N/A DataTableSort.superclass.constructor.apply(this, arguments);
1N/A}
1N/A
1N/A/////////////////////////////////////////////////////////////////////////////
1N/A//
1N/A// STATIC PROPERTIES
1N/A//
1N/A/////////////////////////////////////////////////////////////////////////////
1N/AY.mix(DataTableSort, {
1N/A /**
1N/A * The namespace for the plugin. This will be the property on the host which
1N/A * references the plugin instance.
1N/A *
1N/A * @property NS
1N/A * @type String
1N/A * @static
1N/A * @final
1N/A * @value "sort"
1N/A */
1N/A NS: "sort",
1N/A
1N/A /**
1N/A * Class name.
1N/A *
1N/A * @property NAME
1N/A * @type String
1N/A * @static
1N/A * @final
1N/A * @value "dataTableSort"
1N/A */
1N/A NAME: "dataTableSort",
1N/A
1N/A/////////////////////////////////////////////////////////////////////////////
1N/A//
1N/A// ATTRIBUTES
1N/A//
1N/A/////////////////////////////////////////////////////////////////////////////
1N/A ATTRS: {
1N/A /**
1N/A * @attribute trigger
1N/A * @description Defines the trigger that causes a column to be sorted:
1N/A * {event, selector}, where "event" is an event type and "selector" is
1N/A * is a node query selector.
1N/A * @type Object
1N/A * @default {event:"click", selector:"th"}
1N/A * @writeOnce "initOnly"
1N/A */
1N/A trigger: {
1N/A value: {event:"click", selector:"th"},
1N/A writeOnce: "initOnly"
1N/A },
1N/A
1N/A /**
1N/A * @attribute lastSortedBy
1N/A * @description Describes last known sort state: {key,dir}, where
1N/A * "key" is column key and "dir" is either "asc" or "desc".
1N/A * @type Object
1N/A */
1N/A lastSortedBy: {
1N/A setter: "_setLastSortedBy",
1N/A lazyAdd: false
1N/A },
1N/A
1N/A /**
1N/A * @attribute template
1N/A * @description Tokenized markup template for TH sort element.
1N/A * @type String
1N/A * @default '<a class="{link_class}" title="{link_title}" href="{link_href}">{value}</a>'
1N/A */
1N/A template: {
1N/A value: TEMPLATE
1N/A },
1N/A
1N/A /**
1N/A * Strings used in the UI elements.
1N/A *
1N/A * The strings used are defaulted from the datatable-sort language pack
1N/A * for the language identified in the YUI "lang" configuration (which
1N/A * defaults to "en").
1N/A *
1N/A * Configurable strings are "sortBy" and "reverseSortBy", which are
1N/A * assigned to the sort link's title attribute.
1N/A *
1N/A * @attribute strings
1N/A * @type {Object}
1N/A */
1N/A strings: {
1N/A valueFn: function () { return Y.Intl.get('datatable-sort'); }
1N/A }
1N/A }
1N/A});
1N/A
1N/A/////////////////////////////////////////////////////////////////////////////
1N/A//
1N/A// PROTOTYPE
1N/A//
1N/A/////////////////////////////////////////////////////////////////////////////
1N/AY.extend(DataTableSort, Y.Plugin.Base, {
1N/A
1N/A /////////////////////////////////////////////////////////////////////////////
1N/A //
1N/A // METHODS
1N/A //
1N/A /////////////////////////////////////////////////////////////////////////////
1N/A /**
1N/A * Initializer.
1N/A *
1N/A * @method initializer
1N/A * @param config {Object} Config object.
1N/A * @private
1N/A */
1N/A initializer: function(config) {
1N/A var dt = this.get("host"),
1N/A trigger = this.get("trigger");
1N/A
1N/A dt.get("recordset").plug(Y.Plugin.RecordsetSort, {dt: dt});
1N/A dt.get("recordset").sort.addTarget(dt);
1N/A
1N/A // Wrap link around TH value
1N/A this.doBefore("_createTheadThNode", this._beforeCreateTheadThNode);
1N/A
1N/A // Add class
1N/A this.doBefore("_attachTheadThNode", this._beforeAttachTheadThNode);
1N/A this.doBefore("_attachTbodyTdNode", this._beforeAttachTbodyTdNode);
1N/A
1N/A // Attach trigger handlers
1N/A dt.delegate(trigger.event, Y.bind(this._onEventSortColumn,this), trigger.selector);
1N/A
1N/A // Attach UI hooks
1N/A dt.after("recordsetSort:sort", function() {
1N/A this._uiSetRecordset(this.get("recordset"));
1N/A });
1N/A this.on("lastSortedByChange", function(e) {
1N/A this._uiSetLastSortedBy(e.prevVal, e.newVal, dt);
1N/A });
1N/A
1N/A //TODO
1N/A //dt.after("recordset:mutation", function() {//reset lastSortedBy});
1N/A
1N/A //TODO
1N/A //add Column sortFn ATTR
1N/A
1N/A // Update UI after the fact (render-then-plug case)
1N/A if(dt.get("rendered")) {
1N/A dt._uiSetColumnset(dt.get("columnset"));
1N/A this._uiSetLastSortedBy(null, this.get("lastSortedBy"), dt);
1N/A }
1N/A },
1N/A
1N/A /**
1N/A * @method _setLastSortedBy
1N/A * @description Normalizes lastSortedBy
1N/A * @param val {String | Object} {key, dir} or "key"
1N/A * @return {key, dir, notdir}
1N/A * @private
1N/A */
1N/A _setLastSortedBy: function(val) {
1N/A if (Y.Lang.isString(val)) {
1N/A val = { key: val, dir: "desc" };
1N/A }
1N/A
1N/A if (val) {
1N/A return (val.dir === "desc") ?
1N/A { key: val.key, dir: "desc", notdir: "asc" } :
1N/A { key: val.key, dir: "asc", notdir:"desc" };
1N/A } else {
1N/A return null;
1N/A }
1N/A },
1N/A
1N/A /**
1N/A * Updates sort UI.
1N/A *
1N/A * @method _uiSetLastSortedBy
1N/A * @param val {Object} New lastSortedBy object {key,dir}.
1N/A * @param dt {Y.DataTable.Base} Host.
1N/A * @protected
1N/A */
1N/A _uiSetLastSortedBy: function(prevVal, newVal, dt) {
1N/A var strings = this.get('strings'),
1N/A columnset = dt.get("columnset"),
1N/A prevKey = prevVal && prevVal.key,
1N/A newKey = newVal && newVal.key,
1N/A prevClass = prevVal && dt.getClassName(prevVal.dir),
1N/A newClass = newVal && dt.getClassName(newVal.dir),
1N/A prevColumn = columnset.keyHash[prevKey],
1N/A newColumn = columnset.keyHash[newKey],
1N/A tbodyNode = dt._tbodyNode,
1N/A fromTemplate = Y.Lang.sub,
1N/A th, sortLabel;
1N/A
1N/A // Clear previous UI
1N/A if (prevColumn && prevClass) {
1N/A th = prevColumn.thNode;
1N/A
1N/A th.one('a').set('title', fromTemplate(strings.sortBy, {
1N/A column: prevColumn.get('label')
1N/A }));
1N/A
1N/A th.removeClass(prevClass);
1N/A tbodyNode.all("." + YgetClassName(COLUMN, prevColumn.get("id")))
1N/A .removeClass(prevClass);
1N/A }
1N/A
1N/A // Add new sort UI
1N/A if (newColumn && newClass) {
1N/A th = newColumn.thNode;
1N/A
1N/A sortLabel = (newVal.dir === ASC) ? "reverseSortBy" : "sortBy";
1N/A
1N/A th.one('a').set('title', fromTemplate(strings[sortLabel], {
1N/A column: newColumn.get('label')
1N/A }));
1N/A
1N/A th.addClass(newClass);
1N/A
1N/A tbodyNode.all("." + YgetClassName(COLUMN, newColumn.get("id")))
1N/A .addClass(newClass);
1N/A }
1N/A },
1N/A
1N/A /**
1N/A * Before header cell element is created, inserts link markup around {value}.
1N/A *
1N/A * @method _beforeCreateTheadThNode
1N/A * @param o {Object} {value, column, tr}.
1N/A * @protected
1N/A */
1N/A _beforeCreateTheadThNode: function(o) {
1N/A var sortedBy, sortLabel;
1N/A
1N/A if (o.column.get("sortable")) {
1N/A sortedBy = this.get('lastSortedBy');
1N/A
1N/A sortLabel = (sortedBy && sortedBy.dir === ASC &&
1N/A sortedBy.key === o.column.get('key')) ?
1N/A "reverseSortBy" : "sortBy";
1N/A
1N/A o.value = Y.Lang.sub(this.get("template"), {
1N/A link_class: o.link_class || "",
1N/A link_title: Y.Lang.sub(this.get('strings.' + sortLabel), {
1N/A column: o.column.get('label')
1N/A }),
1N/A link_href: "#",
1N/A value: o.value
1N/A });
1N/A }
1N/A },
1N/A
1N/A /**
1N/A * Before header cell element is attached, sets applicable class names.
1N/A *
1N/A * @method _beforeAttachTheadThNode
1N/A * @param o {Object} {value, column, tr}.
1N/A * @protected
1N/A */
1N/A _beforeAttachTheadThNode: function(o) {
1N/A var lastSortedBy = this.get("lastSortedBy"),
1N/A key = lastSortedBy && lastSortedBy.key,
1N/A dir = lastSortedBy && lastSortedBy.dir,
1N/A notdir = lastSortedBy && lastSortedBy.notdir;
1N/A
1N/A // This Column is sortable
1N/A if(o.column.get("sortable")) {
1N/A o.th.addClass(YgetClassName(DATATABLE, "sortable"));
1N/A }
1N/A // This Column is currently sorted
1N/A if(key && (key === o.column.get("key"))) {
1N/A o.th.replaceClass(YgetClassName(DATATABLE, notdir), YgetClassName(DATATABLE, dir));
1N/A }
1N/A },
1N/A
1N/A /**
1N/A * Before header cell element is attached, sets applicable class names.
1N/A *
1N/A * @method _before_beforeAttachTbodyTdNode
1N/A * @param o {Object} {record, column, tr, headers, classnames, value}.
1N/A * @protected
1N/A */
1N/A _beforeAttachTbodyTdNode: function(o) {
1N/A var lastSortedBy = this.get("lastSortedBy"),
1N/A key = lastSortedBy && lastSortedBy.key,
1N/A dir = lastSortedBy && lastSortedBy.dir,
1N/A notdir = lastSortedBy && lastSortedBy.notdir;
1N/A
1N/A // This Column is sortable
1N/A if(o.column.get("sortable")) {
1N/A o.td.addClass(YgetClassName(DATATABLE, "sortable"));
1N/A }
1N/A // This Column is currently sorted
1N/A if(key && (key === o.column.get("key"))) {
1N/A o.td.replaceClass(YgetClassName(DATATABLE, notdir), YgetClassName(DATATABLE, dir));
1N/A }
1N/A },
1N/A /**
1N/A * In response to the "trigger" event, sorts the underlying Recordset and
1N/A * updates the lastSortedBy attribute.
1N/A *
1N/A * @method _onEventSortColumn
1N/A * @param o {Object} {value, column, tr}.
1N/A * @protected
1N/A */
1N/A _onEventSortColumn: function(e) {
1N/A e.halt();
1N/A //TODO: normalize e.currentTarget to TH
1N/A var table = this.get("host"),
1N/A column = table.get("columnset").idHash[e.currentTarget.get("id")],
1N/A key, field, lastSort, desc, sorter;
1N/A
1N/A if (column.get("sortable")) {
1N/A key = column.get("key");
1N/A field = column.get("field");
1N/A lastSort = this.get("lastSortedBy") || {};
1N/A desc = (lastSort.key === key && lastSort.dir === ASC);
1N/A sorter = column.get("sortFn");
1N/A
1N/A table.get("recordset").sort.sort(field, desc, sorter);
1N/A
1N/A this.set("lastSortedBy", {
1N/A key: key,
1N/A dir: (desc) ? DESC : ASC
1N/A });
1N/A }
1N/A }
1N/A});
1N/A
1N/AY.namespace("Plugin").DataTableSort = DataTableSort;
1N/A
1N/A
1N/A
1N/A