You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@htrace.apache.org by cm...@apache.org on 2015/04/23 01:08:03 UTC
[09/41] incubator-htrace git commit: HTRACE-154. Move go and web to
htrace-htraced (abe via cmccabe)
http://git-wip-us.apache.org/repos/asf/incubator-htrace/blob/39e89ea0/htrace-htraced/src/web/lib/js/backgrid-0.3.5.js
----------------------------------------------------------------------
diff --git a/htrace-htraced/src/web/lib/js/backgrid-0.3.5.js b/htrace-htraced/src/web/lib/js/backgrid-0.3.5.js
new file mode 100644
index 0000000..6f8da79
--- /dev/null
+++ b/htrace-htraced/src/web/lib/js/backgrid-0.3.5.js
@@ -0,0 +1,2883 @@
+/*!
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2014 Jimmy Yuen Ho Wong and contributors <wy...@gmail.com>
+ Licensed under the MIT license.
+*/
+
+(function (factory) {
+
+ // CommonJS
+ if (typeof exports == "object") {
+ module.exports = factory(module.exports,
+ require("underscore"),
+ require("backbone"));
+ }
+ // Browser
+ else factory(this, this._, this.Backbone);
+}(function (root, _, Backbone) {
+
+ "use strict";
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+// Copyright 2009, 2010 Kristopher Michael Kowal
+// https://github.com/kriskowal/es5-shim
+// ES5 15.5.4.20
+// http://es5.github.com/#x15.5.4.20
+var ws = "\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003" +
+ "\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028" +
+ "\u2029\uFEFF";
+if (!String.prototype.trim || ws.trim()) {
+ // http://blog.stevenlevithan.com/archives/faster-trim-javascript
+ // http://perfectionkills.com/whitespace-deviations/
+ ws = "[" + ws + "]";
+ var trimBeginRegexp = new RegExp("^" + ws + ws + "*"),
+ trimEndRegexp = new RegExp(ws + ws + "*$");
+ String.prototype.trim = function trim() {
+ if (this === undefined || this === null) {
+ throw new TypeError("can't convert " + this + " to object");
+ }
+ return String(this)
+ .replace(trimBeginRegexp, "")
+ .replace(trimEndRegexp, "");
+ };
+}
+
+function lpad(str, length, padstr) {
+ var paddingLen = length - (str + '').length;
+ paddingLen = paddingLen < 0 ? 0 : paddingLen;
+ var padding = '';
+ for (var i = 0; i < paddingLen; i++) {
+ padding = padding + padstr;
+ }
+ return padding + str;
+}
+
+var $ = Backbone.$;
+
+var Backgrid = root.Backgrid = {
+
+ Extension: {},
+
+ resolveNameToClass: function (name, suffix) {
+ if (_.isString(name)) {
+ var key = _.map(name.split('-'), function (e) {
+ return e.slice(0, 1).toUpperCase() + e.slice(1);
+ }).join('') + suffix;
+ var klass = Backgrid[key] || Backgrid.Extension[key];
+ if (_.isUndefined(klass)) {
+ throw new ReferenceError("Class '" + key + "' not found");
+ }
+ return klass;
+ }
+
+ return name;
+ },
+
+ callByNeed: function () {
+ var value = arguments[0];
+ if (!_.isFunction(value)) return value;
+
+ var context = arguments[1];
+ var args = [].slice.call(arguments, 2);
+ return value.apply(context, !!(args + '') ? args : []);
+ }
+
+};
+_.extend(Backgrid, Backbone.Events);
+
+/**
+ Command translates a DOM Event into commands that Backgrid
+ recognizes. Interested parties can listen on selected Backgrid events that
+ come with an instance of this class and act on the commands.
+
+ It is also possible to globally rebind the keyboard shortcuts by replacing
+ the methods in this class' prototype.
+
+ @class Backgrid.Command
+ @constructor
+ */
+var Command = Backgrid.Command = function (evt) {
+ _.extend(this, {
+ altKey: !!evt.altKey,
+ "char": evt["char"],
+ charCode: evt.charCode,
+ ctrlKey: !!evt.ctrlKey,
+ key: evt.key,
+ keyCode: evt.keyCode,
+ locale: evt.locale,
+ location: evt.location,
+ metaKey: !!evt.metaKey,
+ repeat: !!evt.repeat,
+ shiftKey: !!evt.shiftKey,
+ which: evt.which
+ });
+};
+_.extend(Command.prototype, {
+ /**
+ Up Arrow
+
+ @member Backgrid.Command
+ */
+ moveUp: function () { return this.keyCode == 38; },
+ /**
+ Down Arrow
+
+ @member Backgrid.Command
+ */
+ moveDown: function () { return this.keyCode === 40; },
+ /**
+ Shift Tab
+
+ @member Backgrid.Command
+ */
+ moveLeft: function () { return this.shiftKey && this.keyCode === 9; },
+ /**
+ Tab
+
+ @member Backgrid.Command
+ */
+ moveRight: function () { return !this.shiftKey && this.keyCode === 9; },
+ /**
+ Enter
+
+ @member Backgrid.Command
+ */
+ save: function () { return this.keyCode === 13; },
+ /**
+ Esc
+
+ @member Backgrid.Command
+ */
+ cancel: function () { return this.keyCode === 27; },
+ /**
+ None of the above.
+
+ @member Backgrid.Command
+ */
+ passThru: function () {
+ return !(this.moveUp() || this.moveDown() || this.moveLeft() ||
+ this.moveRight() || this.save() || this.cancel());
+ }
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ Just a convenient class for interested parties to subclass.
+
+ The default Cell classes don't require the formatter to be a subclass of
+ Formatter as long as the fromRaw(rawData) and toRaw(formattedData) methods
+ are defined.
+
+ @abstract
+ @class Backgrid.CellFormatter
+ @constructor
+*/
+var CellFormatter = Backgrid.CellFormatter = function () {};
+_.extend(CellFormatter.prototype, {
+
+ /**
+ Takes a raw value from a model and returns an optionally formatted string
+ for display. The default implementation simply returns the supplied value
+ as is without any type conversion.
+
+ @member Backgrid.CellFormatter
+ @param {*} rawData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {*}
+ */
+ fromRaw: function (rawData, model) {
+ return rawData;
+ },
+
+ /**
+ Takes a formatted string, usually from user input, and returns a
+ appropriately typed value for persistence in the model.
+
+ If the user input is invalid or unable to be converted to a raw value
+ suitable for persistence in the model, toRaw must return `undefined`.
+
+ @member Backgrid.CellFormatter
+ @param {string} formattedData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {*|undefined}
+ */
+ toRaw: function (formattedData, model) {
+ return formattedData;
+ }
+
+});
+
+/**
+ A floating point number formatter. Doesn't understand scientific notation at
+ the moment.
+
+ @class Backgrid.NumberFormatter
+ @extends Backgrid.CellFormatter
+ @constructor
+ @throws {RangeError} If decimals < 0 or > 20.
+*/
+var NumberFormatter = Backgrid.NumberFormatter = function (options) {
+ _.extend(this, this.defaults, options || {});
+
+ if (this.decimals < 0 || this.decimals > 20) {
+ throw new RangeError("decimals must be between 0 and 20");
+ }
+};
+NumberFormatter.prototype = new CellFormatter();
+_.extend(NumberFormatter.prototype, {
+
+ /**
+ @member Backgrid.NumberFormatter
+ @cfg {Object} options
+
+ @cfg {number} [options.decimals=2] Number of decimals to display. Must be an integer.
+
+ @cfg {string} [options.decimalSeparator='.'] The separator to use when
+ displaying decimals.
+
+ @cfg {string} [options.orderSeparator=','] The separator to use to
+ separator thousands. May be an empty string.
+ */
+ defaults: {
+ decimals: 2,
+ decimalSeparator: '.',
+ orderSeparator: ','
+ },
+
+ HUMANIZED_NUM_RE: /(\d)(?=(?:\d{3})+$)/g,
+
+ /**
+ Takes a floating point number and convert it to a formatted string where
+ every thousand is separated by `orderSeparator`, with a `decimal` number of
+ decimals separated by `decimalSeparator`. The number returned is rounded
+ the usual way.
+
+ @member Backgrid.NumberFormatter
+ @param {number} number
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {string}
+ */
+ fromRaw: function (number, model) {
+ if (_.isNull(number) || _.isUndefined(number)) return '';
+
+ number = number.toFixed(~~this.decimals);
+
+ var parts = number.split('.');
+ var integerPart = parts[0];
+ var decimalPart = parts[1] ? (this.decimalSeparator || '.') + parts[1] : '';
+
+ return integerPart.replace(this.HUMANIZED_NUM_RE, '$1' + this.orderSeparator) + decimalPart;
+ },
+
+ /**
+ Takes a string, possibly formatted with `orderSeparator` and/or
+ `decimalSeparator`, and convert it back to a number.
+
+ @member Backgrid.NumberFormatter
+ @param {string} formattedData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {number|undefined} Undefined if the string cannot be converted to
+ a number.
+ */
+ toRaw: function (formattedData, model) {
+ formattedData = formattedData.trim();
+
+ if (formattedData === '') return null;
+
+ var rawData = '';
+
+ var thousands = formattedData.split(this.orderSeparator);
+ for (var i = 0; i < thousands.length; i++) {
+ rawData += thousands[i];
+ }
+
+ var decimalParts = rawData.split(this.decimalSeparator);
+ rawData = '';
+ for (var i = 0; i < decimalParts.length; i++) {
+ rawData = rawData + decimalParts[i] + '.';
+ }
+
+ if (rawData[rawData.length - 1] === '.') {
+ rawData = rawData.slice(0, rawData.length - 1);
+ }
+
+ var result = (rawData * 1).toFixed(~~this.decimals) * 1;
+ if (_.isNumber(result) && !_.isNaN(result)) return result;
+ }
+
+});
+
+/**
+ A number formatter that converts a floating point number, optionally
+ multiplied by a multiplier, to a percentage string and vice versa.
+
+ @class Backgrid.PercentFormatter
+ @extends Backgrid.NumberFormatter
+ @constructor
+ @throws {RangeError} If decimals < 0 or > 20.
+ */
+var PercentFormatter = Backgrid.PercentFormatter = function () {
+ Backgrid.NumberFormatter.apply(this, arguments);
+};
+
+PercentFormatter.prototype = new Backgrid.NumberFormatter(),
+
+_.extend(PercentFormatter.prototype, {
+
+ /**
+ @member Backgrid.PercentFormatter
+ @cfg {Object} options
+
+ @cfg {number} [options.multiplier=1] The number used to multiply the model
+ value for display.
+
+ @cfg {string} [options.symbol='%'] The symbol to append to the percentage
+ string.
+ */
+ defaults: _.extend({}, NumberFormatter.prototype.defaults, {
+ multiplier: 1,
+ symbol: "%"
+ }),
+
+ /**
+ Takes a floating point number, where the number is first multiplied by
+ `multiplier`, then converted to a formatted string like
+ NumberFormatter#fromRaw, then finally append `symbol` to the end.
+
+ @member Backgrid.PercentFormatter
+ @param {number} rawValue
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {string}
+ */
+ fromRaw: function (number, model) {
+ var args = [].slice.call(arguments, 1);
+ args.unshift(number * this.multiplier);
+ return (NumberFormatter.prototype.fromRaw.apply(this, args) || "0") + this.symbol;
+ },
+
+ /**
+ Takes a string, possibly appended with `symbol` and/or `decimalSeparator`,
+ and convert it back to a number for the model like NumberFormatter#toRaw,
+ and then dividing it by `multiplier`.
+
+ @member Backgrid.PercentFormatter
+ @param {string} formattedData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {number|undefined} Undefined if the string cannot be converted to
+ a number.
+ */
+ toRaw: function (formattedValue, model) {
+ var tokens = formattedValue.split(this.symbol);
+ if (tokens && tokens[0] && tokens[1] === "" || tokens[1] == null) {
+ var rawValue = NumberFormatter.prototype.toRaw.call(this, tokens[0]);
+ if (_.isUndefined(rawValue)) return rawValue;
+ return rawValue / this.multiplier;
+ }
+ }
+
+});
+
+/**
+ Formatter to converts between various datetime formats.
+
+ This class only understands ISO-8601 formatted datetime strings and UNIX
+ offset (number of milliseconds since UNIX Epoch). See
+ Backgrid.Extension.MomentFormatter if you need a much more flexible datetime
+ formatter.
+
+ @class Backgrid.DatetimeFormatter
+ @extends Backgrid.CellFormatter
+ @constructor
+ @throws {Error} If both `includeDate` and `includeTime` are false.
+*/
+var DatetimeFormatter = Backgrid.DatetimeFormatter = function (options) {
+ _.extend(this, this.defaults, options || {});
+
+ if (!this.includeDate && !this.includeTime) {
+ throw new Error("Either includeDate or includeTime must be true");
+ }
+};
+DatetimeFormatter.prototype = new CellFormatter();
+_.extend(DatetimeFormatter.prototype, {
+
+ /**
+ @member Backgrid.DatetimeFormatter
+
+ @cfg {Object} options
+
+ @cfg {boolean} [options.includeDate=true] Whether the values include the
+ date part.
+
+ @cfg {boolean} [options.includeTime=true] Whether the values include the
+ time part.
+
+ @cfg {boolean} [options.includeMilli=false] If `includeTime` is true,
+ whether to include the millisecond part, if it exists.
+ */
+ defaults: {
+ includeDate: true,
+ includeTime: true,
+ includeMilli: false
+ },
+
+ DATE_RE: /^([+\-]?\d{4})-(\d{2})-(\d{2})$/,
+ TIME_RE: /^(\d{2}):(\d{2}):(\d{2})(\.(\d{3}))?$/,
+ ISO_SPLITTER_RE: /T|Z| +/,
+
+ _convert: function (data, validate) {
+ if ((data + '').trim() === '') return null;
+
+ var date, time = null;
+ if (_.isNumber(data)) {
+ var jsDate = new Date(data);
+ date = lpad(jsDate.getUTCFullYear(), 4, 0) + '-' + lpad(jsDate.getUTCMonth() + 1, 2, 0) + '-' + lpad(jsDate.getUTCDate(), 2, 0);
+ time = lpad(jsDate.getUTCHours(), 2, 0) + ':' + lpad(jsDate.getUTCMinutes(), 2, 0) + ':' + lpad(jsDate.getUTCSeconds(), 2, 0);
+ }
+ else {
+ data = data.trim();
+ var parts = data.split(this.ISO_SPLITTER_RE) || [];
+ date = this.DATE_RE.test(parts[0]) ? parts[0] : '';
+ time = date && parts[1] ? parts[1] : this.TIME_RE.test(parts[0]) ? parts[0] : '';
+ }
+
+ var YYYYMMDD = this.DATE_RE.exec(date) || [];
+ var HHmmssSSS = this.TIME_RE.exec(time) || [];
+
+ if (validate) {
+ if (this.includeDate && _.isUndefined(YYYYMMDD[0])) return;
+ if (this.includeTime && _.isUndefined(HHmmssSSS[0])) return;
+ if (!this.includeDate && date) return;
+ if (!this.includeTime && time) return;
+ }
+
+ var jsDate = new Date(Date.UTC(YYYYMMDD[1] * 1 || 0,
+ YYYYMMDD[2] * 1 - 1 || 0,
+ YYYYMMDD[3] * 1 || 0,
+ HHmmssSSS[1] * 1 || null,
+ HHmmssSSS[2] * 1 || null,
+ HHmmssSSS[3] * 1 || null,
+ HHmmssSSS[5] * 1 || null));
+
+ var result = '';
+
+ if (this.includeDate) {
+ result = lpad(jsDate.getUTCFullYear(), 4, 0) + '-' + lpad(jsDate.getUTCMonth() + 1, 2, 0) + '-' + lpad(jsDate.getUTCDate(), 2, 0);
+ }
+
+ if (this.includeTime) {
+ result = result + (this.includeDate ? 'T' : '') + lpad(jsDate.getUTCHours(), 2, 0) + ':' + lpad(jsDate.getUTCMinutes(), 2, 0) + ':' + lpad(jsDate.getUTCSeconds(), 2, 0);
+
+ if (this.includeMilli) {
+ result = result + '.' + lpad(jsDate.getUTCMilliseconds(), 3, 0);
+ }
+ }
+
+ if (this.includeDate && this.includeTime) {
+ result += "Z";
+ }
+
+ return result;
+ },
+
+ /**
+ Converts an ISO-8601 formatted datetime string to a datetime string, date
+ string or a time string. The timezone is ignored if supplied.
+
+ @member Backgrid.DatetimeFormatter
+ @param {string} rawData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {string|null|undefined} ISO-8601 string in UTC. Null and undefined
+ values are returned as is.
+ */
+ fromRaw: function (rawData, model) {
+ if (_.isNull(rawData) || _.isUndefined(rawData)) return '';
+ return this._convert(rawData);
+ },
+
+ /**
+ Converts an ISO-8601 formatted datetime string to a datetime string, date
+ string or a time string. The timezone is ignored if supplied. This method
+ parses the input values exactly the same way as
+ Backgrid.Extension.MomentFormatter#fromRaw(), in addition to doing some
+ sanity checks.
+
+ @member Backgrid.DatetimeFormatter
+ @param {string} formattedData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {string|undefined} ISO-8601 string in UTC. Undefined if a date is
+ found when `includeDate` is false, or a time is found when `includeTime` is
+ false, or if `includeDate` is true and a date is not found, or if
+ `includeTime` is true and a time is not found.
+ */
+ toRaw: function (formattedData, model) {
+ return this._convert(formattedData, true);
+ }
+
+});
+
+/**
+ Formatter to convert any value to string.
+
+ @class Backgrid.StringFormatter
+ @extends Backgrid.CellFormatter
+ @constructor
+ */
+var StringFormatter = Backgrid.StringFormatter = function () {};
+StringFormatter.prototype = new CellFormatter();
+_.extend(StringFormatter.prototype, {
+ /**
+ Converts any value to a string using Ecmascript's implicit type
+ conversion. If the given value is `null` or `undefined`, an empty string is
+ returned instead.
+
+ @member Backgrid.StringFormatter
+ @param {*} rawValue
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {string}
+ */
+ fromRaw: function (rawValue, model) {
+ if (_.isUndefined(rawValue) || _.isNull(rawValue)) return '';
+ return rawValue + '';
+ }
+});
+
+/**
+ Simple email validation formatter.
+
+ @class Backgrid.EmailFormatter
+ @extends Backgrid.CellFormatter
+ @constructor
+ */
+var EmailFormatter = Backgrid.EmailFormatter = function () {};
+EmailFormatter.prototype = new CellFormatter();
+_.extend(EmailFormatter.prototype, {
+ /**
+ Return the input if it is a string that contains an '@' character and if
+ the strings before and after '@' are non-empty. If the input does not
+ validate, `undefined` is returned.
+
+ @member Backgrid.EmailFormatter
+ @param {*} formattedData
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {string|undefined}
+ */
+ toRaw: function (formattedData, model) {
+ var parts = formattedData.trim().split("@");
+ if (parts.length === 2 && _.all(parts)) {
+ return formattedData;
+ }
+ }
+});
+
+/**
+ Formatter for SelectCell.
+
+ If the type of a model value is not a string, it is expected that a subclass
+ of this formatter is provided to the SelectCell, with #toRaw overridden to
+ convert the string value returned from the DOM back to whatever value is
+ expected in the model.
+
+ @class Backgrid.SelectFormatter
+ @extends Backgrid.CellFormatter
+ @constructor
+*/
+var SelectFormatter = Backgrid.SelectFormatter = function () {};
+SelectFormatter.prototype = new CellFormatter();
+_.extend(SelectFormatter.prototype, {
+
+ /**
+ Normalizes raw scalar or array values to an array.
+
+ @member Backgrid.SelectFormatter
+ @param {*} rawValue
+ @param {Backbone.Model} model Used for more complicated formatting
+ @return {Array.<*>}
+ */
+ fromRaw: function (rawValue, model) {
+ return _.isArray(rawValue) ? rawValue : rawValue != null ? [rawValue] : [];
+ }
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ Generic cell editor base class. Only defines an initializer for a number of
+ required parameters.
+
+ @abstract
+ @class Backgrid.CellEditor
+ @extends Backbone.View
+*/
+var CellEditor = Backgrid.CellEditor = Backbone.View.extend({
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backgrid.CellFormatter} options.formatter
+ @param {Backgrid.Column} options.column
+ @param {Backbone.Model} options.model
+
+ @throws {TypeError} If `formatter` is not a formatter instance, or when
+ `model` or `column` are undefined.
+ */
+ initialize: function (options) {
+ this.formatter = options.formatter;
+ this.column = options.column;
+ if (!(this.column instanceof Column)) {
+ this.column = new Column(this.column);
+ }
+
+ this.listenTo(this.model, "backgrid:editing", this.postRender);
+ },
+
+ /**
+ Post-rendering setup and initialization. Focuses the cell editor's `el` in
+ this default implementation. **Should** be called by Cell classes after
+ calling Backgrid.CellEditor#render.
+ */
+ postRender: function (model, column) {
+ if (column == null || column.get("name") == this.column.get("name")) {
+ this.$el.focus();
+ }
+ return this;
+ }
+
+});
+
+/**
+ InputCellEditor the cell editor type used by most core cell types. This cell
+ editor renders a text input box as its editor. The input will render a
+ placeholder if the value is empty on supported browsers.
+
+ @class Backgrid.InputCellEditor
+ @extends Backgrid.CellEditor
+*/
+var InputCellEditor = Backgrid.InputCellEditor = CellEditor.extend({
+
+ /** @property */
+ tagName: "input",
+
+ /** @property */
+ attributes: {
+ type: "text"
+ },
+
+ /** @property */
+ events: {
+ "blur": "saveOrCancel",
+ "keydown": "saveOrCancel"
+ },
+
+ /**
+ Initializer. Removes this `el` from the DOM when a `done` event is
+ triggered.
+
+ @param {Object} options
+ @param {Backgrid.CellFormatter} options.formatter
+ @param {Backgrid.Column} options.column
+ @param {Backbone.Model} options.model
+ @param {string} [options.placeholder]
+ */
+ initialize: function (options) {
+ InputCellEditor.__super__.initialize.apply(this, arguments);
+
+ if (options.placeholder) {
+ this.$el.attr("placeholder", options.placeholder);
+ }
+ },
+
+ /**
+ Renders a text input with the cell value formatted for display, if it
+ exists.
+ */
+ render: function () {
+ var model = this.model;
+ this.$el.val(this.formatter.fromRaw(model.get(this.column.get("name")), model));
+ return this;
+ },
+
+ /**
+ If the key pressed is `enter`, `tab`, `up`, or `down`, converts the value
+ in the editor to a raw value for saving into the model using the formatter.
+
+ If the key pressed is `esc` the changes are undone.
+
+ If the editor goes out of focus (`blur`) but the value is invalid, the
+ event is intercepted and cancelled so the cell remains in focus pending for
+ further action. The changes are saved otherwise.
+
+ Triggers a Backbone `backgrid:edited` event from the model when successful,
+ and `backgrid:error` if the value cannot be converted. Classes listening to
+ the `error` event, usually the Cell classes, should respond appropriately,
+ usually by rendering some kind of error feedback.
+
+ @param {Event} e
+ */
+ saveOrCancel: function (e) {
+
+ var formatter = this.formatter;
+ var model = this.model;
+ var column = this.column;
+
+ var command = new Command(e);
+ var blurred = e.type === "blur";
+
+ if (command.moveUp() || command.moveDown() || command.moveLeft() || command.moveRight() ||
+ command.save() || blurred) {
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ var val = this.$el.val();
+ var newValue = formatter.toRaw(val, model);
+ if (_.isUndefined(newValue)) {
+ model.trigger("backgrid:error", model, column, val);
+ }
+ else {
+ model.set(column.get("name"), newValue);
+ model.trigger("backgrid:edited", model, column, command);
+ }
+ }
+ // esc
+ else if (command.cancel()) {
+ // undo
+ e.stopPropagation();
+ model.trigger("backgrid:edited", model, column, command);
+ }
+ },
+
+ postRender: function (model, column) {
+ if (column == null || column.get("name") == this.column.get("name")) {
+ // move the cursor to the end on firefox if text is right aligned
+ if (this.$el.css("text-align") === "right") {
+ var val = this.$el.val();
+ this.$el.focus().val(null).val(val);
+ }
+ else this.$el.focus();
+ }
+ return this;
+ }
+
+});
+
+/**
+ The super-class for all Cell types. By default, this class renders a plain
+ table cell with the model value converted to a string using the
+ formatter. The table cell is clickable, upon which the cell will go into
+ editor mode, which is rendered by a Backgrid.InputCellEditor instance by
+ default. Upon encountering any formatting errors, this class will add an
+ `error` CSS class to the table cell.
+
+ @abstract
+ @class Backgrid.Cell
+ @extends Backbone.View
+*/
+var Cell = Backgrid.Cell = Backbone.View.extend({
+
+ /** @property */
+ tagName: "td",
+
+ /**
+ @property {Backgrid.CellFormatter|Object|string} [formatter=CellFormatter]
+ */
+ formatter: CellFormatter,
+
+ /**
+ @property {Backgrid.CellEditor} [editor=Backgrid.InputCellEditor] The
+ default editor for all cell instances of this class. This value must be a
+ class, it will be automatically instantiated upon entering edit mode.
+
+ See Backgrid.CellEditor
+ */
+ editor: InputCellEditor,
+
+ /** @property */
+ events: {
+ "click": "enterEditMode"
+ },
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backbone.Model} options.model
+ @param {Backgrid.Column} options.column
+
+ @throws {ReferenceError} If formatter is a string but a formatter class of
+ said name cannot be found in the Backgrid module.
+ */
+ initialize: function (options) {
+ this.column = options.column;
+ if (!(this.column instanceof Column)) {
+ this.column = new Column(this.column);
+ }
+
+ var column = this.column, model = this.model, $el = this.$el;
+
+ var formatter = Backgrid.resolveNameToClass(column.get("formatter") ||
+ this.formatter, "Formatter");
+
+ if (!_.isFunction(formatter.fromRaw) && !_.isFunction(formatter.toRaw)) {
+ formatter = new formatter();
+ }
+
+ this.formatter = formatter;
+
+ this.editor = Backgrid.resolveNameToClass(this.editor, "CellEditor");
+
+ this.listenTo(model, "change:" + column.get("name"), function () {
+ if (!$el.hasClass("editor")) this.render();
+ });
+
+ this.listenTo(model, "backgrid:error", this.renderError);
+
+ this.listenTo(column, "change:editable change:sortable change:renderable",
+ function (column) {
+ var changed = column.changedAttributes();
+ for (var key in changed) {
+ if (changed.hasOwnProperty(key)) {
+ $el.toggleClass(key, changed[key]);
+ }
+ }
+ });
+
+ if (Backgrid.callByNeed(column.editable(), column, model)) $el.addClass("editable");
+ if (Backgrid.callByNeed(column.sortable(), column, model)) $el.addClass("sortable");
+ if (Backgrid.callByNeed(column.renderable(), column, model)) $el.addClass("renderable");
+ },
+
+ /**
+ Render a text string in a table cell. The text is converted from the
+ model's raw value for this cell's column.
+ */
+ render: function () {
+ this.$el.empty();
+ var model = this.model;
+ this.$el.text(this.formatter.fromRaw(model.get(this.column.get("name")), model));
+ this.delegateEvents();
+ return this;
+ },
+
+ /**
+ If this column is editable, a new CellEditor instance is instantiated with
+ its required parameters. An `editor` CSS class is added to the cell upon
+ entering edit mode.
+
+ This method triggers a Backbone `backgrid:edit` event from the model when
+ the cell is entering edit mode and an editor instance has been constructed,
+ but before it is rendered and inserted into the DOM. The cell and the
+ constructed cell editor instance are sent as event parameters when this
+ event is triggered.
+
+ When this cell has finished switching to edit mode, a Backbone
+ `backgrid:editing` event is triggered from the model. The cell and the
+ constructed cell instance are also sent as parameters in the event.
+
+ When the model triggers a `backgrid:error` event, it means the editor is
+ unable to convert the current user input to an apprpriate value for the
+ model's column, and an `error` CSS class is added to the cell accordingly.
+ */
+ enterEditMode: function () {
+ var model = this.model;
+ var column = this.column;
+
+ var editable = Backgrid.callByNeed(column.editable(), column, model);
+ if (editable) {
+
+ this.currentEditor = new this.editor({
+ column: this.column,
+ model: this.model,
+ formatter: this.formatter
+ });
+
+ model.trigger("backgrid:edit", model, column, this, this.currentEditor);
+
+ // Need to redundantly undelegate events for Firefox
+ this.undelegateEvents();
+ this.$el.empty();
+ this.$el.append(this.currentEditor.$el);
+ this.currentEditor.render();
+ this.$el.addClass("editor");
+
+ model.trigger("backgrid:editing", model, column, this, this.currentEditor);
+ }
+ },
+
+ /**
+ Put an `error` CSS class on the table cell.
+ */
+ renderError: function (model, column) {
+ if (column == null || column.get("name") == this.column.get("name")) {
+ this.$el.addClass("error");
+ }
+ },
+
+ /**
+ Removes the editor and re-render in display mode.
+ */
+ exitEditMode: function () {
+ this.$el.removeClass("error");
+ this.currentEditor.remove();
+ this.stopListening(this.currentEditor);
+ delete this.currentEditor;
+ this.$el.removeClass("editor");
+ this.render();
+ },
+
+ /**
+ Clean up this cell.
+
+ @chainable
+ */
+ remove: function () {
+ if (this.currentEditor) {
+ this.currentEditor.remove.apply(this.currentEditor, arguments);
+ delete this.currentEditor;
+ }
+ return Cell.__super__.remove.apply(this, arguments);
+ }
+
+});
+
+/**
+ StringCell displays HTML escaped strings and accepts anything typed in.
+
+ @class Backgrid.StringCell
+ @extends Backgrid.Cell
+*/
+var StringCell = Backgrid.StringCell = Cell.extend({
+
+ /** @property */
+ className: "string-cell",
+
+ formatter: StringFormatter
+
+});
+
+/**
+ UriCell renders an HTML `<a>` anchor for the value and accepts URIs as user
+ input values. No type conversion or URL validation is done by the formatter
+ of this cell. Users who need URL validation are encourage to subclass UriCell
+ to take advantage of the parsing capabilities of the HTMLAnchorElement
+ available on HTML5-capable browsers or using a third-party library like
+ [URI.js](https://github.com/medialize/URI.js).
+
+ @class Backgrid.UriCell
+ @extends Backgrid.Cell
+*/
+var UriCell = Backgrid.UriCell = Cell.extend({
+
+ /** @property */
+ className: "uri-cell",
+
+ /**
+ @property {string} [title] The title attribute of the generated anchor. It
+ uses the display value formatted by the `formatter.fromRaw` by default.
+ */
+ title: null,
+
+ /**
+ @property {string} [target="_blank"] The target attribute of the generated
+ anchor.
+ */
+ target: "_blank",
+
+ initialize: function (options) {
+ UriCell.__super__.initialize.apply(this, arguments);
+ this.title = options.title || this.title;
+ this.target = options.target || this.target;
+ },
+
+ render: function () {
+ this.$el.empty();
+ var rawValue = this.model.get(this.column.get("name"));
+ var formattedValue = this.formatter.fromRaw(rawValue, this.model);
+ this.$el.append($("<a>", {
+ tabIndex: -1,
+ href: rawValue,
+ title: this.title || formattedValue,
+ target: this.target
+ }).text(formattedValue));
+ this.delegateEvents();
+ return this;
+ }
+
+});
+
+/**
+ Like Backgrid.UriCell, EmailCell renders an HTML `<a>` anchor for the
+ value. The `href` in the anchor is prefixed with `mailto:`. EmailCell will
+ complain if the user enters a string that doesn't contain the `@` sign.
+
+ @class Backgrid.EmailCell
+ @extends Backgrid.StringCell
+*/
+var EmailCell = Backgrid.EmailCell = StringCell.extend({
+
+ /** @property */
+ className: "email-cell",
+
+ formatter: EmailFormatter,
+
+ render: function () {
+ this.$el.empty();
+ var model = this.model;
+ var formattedValue = this.formatter.fromRaw(model.get(this.column.get("name")), model);
+ this.$el.append($("<a>", {
+ tabIndex: -1,
+ href: "mailto:" + formattedValue,
+ title: formattedValue
+ }).text(formattedValue));
+ this.delegateEvents();
+ return this;
+ }
+
+});
+
+/**
+ NumberCell is a generic cell that renders all numbers. Numbers are formatted
+ using a Backgrid.NumberFormatter.
+
+ @class Backgrid.NumberCell
+ @extends Backgrid.Cell
+*/
+var NumberCell = Backgrid.NumberCell = Cell.extend({
+
+ /** @property */
+ className: "number-cell",
+
+ /**
+ @property {number} [decimals=2] Must be an integer.
+ */
+ decimals: NumberFormatter.prototype.defaults.decimals,
+
+ /** @property {string} [decimalSeparator='.'] */
+ decimalSeparator: NumberFormatter.prototype.defaults.decimalSeparator,
+
+ /** @property {string} [orderSeparator=','] */
+ orderSeparator: NumberFormatter.prototype.defaults.orderSeparator,
+
+ /** @property {Backgrid.CellFormatter} [formatter=Backgrid.NumberFormatter] */
+ formatter: NumberFormatter,
+
+ /**
+ Initializes this cell and the number formatter.
+
+ @param {Object} options
+ @param {Backbone.Model} options.model
+ @param {Backgrid.Column} options.column
+ */
+ initialize: function (options) {
+ NumberCell.__super__.initialize.apply(this, arguments);
+ var formatter = this.formatter;
+ formatter.decimals = this.decimals;
+ formatter.decimalSeparator = this.decimalSeparator;
+ formatter.orderSeparator = this.orderSeparator;
+ }
+
+});
+
+/**
+ An IntegerCell is just a Backgrid.NumberCell with 0 decimals. If a floating
+ point number is supplied, the number is simply rounded the usual way when
+ displayed.
+
+ @class Backgrid.IntegerCell
+ @extends Backgrid.NumberCell
+*/
+var IntegerCell = Backgrid.IntegerCell = NumberCell.extend({
+
+ /** @property */
+ className: "integer-cell",
+
+ /**
+ @property {number} decimals Must be an integer.
+ */
+ decimals: 0
+});
+
+/**
+ A PercentCell is another Backgrid.NumberCell that takes a floating number,
+ optionally multiplied by a multiplier and display it as a percentage.
+
+ @class Backgrid.PercentCell
+ @extends Backgrid.NumberCell
+ */
+var PercentCell = Backgrid.PercentCell = NumberCell.extend({
+
+ /** @property */
+ className: "percent-cell",
+
+ /** @property {number} [multiplier=1] */
+ multiplier: PercentFormatter.prototype.defaults.multiplier,
+
+ /** @property {string} [symbol='%'] */
+ symbol: PercentFormatter.prototype.defaults.symbol,
+
+ /** @property {Backgrid.CellFormatter} [formatter=Backgrid.PercentFormatter] */
+ formatter: PercentFormatter,
+
+ /**
+ Initializes this cell and the percent formatter.
+
+ @param {Object} options
+ @param {Backbone.Model} options.model
+ @param {Backgrid.Column} options.column
+ */
+ initialize: function () {
+ PercentCell.__super__.initialize.apply(this, arguments);
+ var formatter = this.formatter;
+ formatter.multiplier = this.multiplier;
+ formatter.symbol = this.symbol;
+ }
+
+});
+
+/**
+ DatetimeCell is a basic cell that accepts datetime string values in RFC-2822
+ or W3C's subset of ISO-8601 and displays them in ISO-8601 format. For a much
+ more sophisticated date time cell with better datetime formatting, take a
+ look at the Backgrid.Extension.MomentCell extension.
+
+ @class Backgrid.DatetimeCell
+ @extends Backgrid.Cell
+
+ See:
+
+ - Backgrid.Extension.MomentCell
+ - Backgrid.DatetimeFormatter
+*/
+var DatetimeCell = Backgrid.DatetimeCell = Cell.extend({
+
+ /** @property */
+ className: "datetime-cell",
+
+ /**
+ @property {boolean} [includeDate=true]
+ */
+ includeDate: DatetimeFormatter.prototype.defaults.includeDate,
+
+ /**
+ @property {boolean} [includeTime=true]
+ */
+ includeTime: DatetimeFormatter.prototype.defaults.includeTime,
+
+ /**
+ @property {boolean} [includeMilli=false]
+ */
+ includeMilli: DatetimeFormatter.prototype.defaults.includeMilli,
+
+ /** @property {Backgrid.CellFormatter} [formatter=Backgrid.DatetimeFormatter] */
+ formatter: DatetimeFormatter,
+
+ /**
+ Initializes this cell and the datetime formatter.
+
+ @param {Object} options
+ @param {Backbone.Model} options.model
+ @param {Backgrid.Column} options.column
+ */
+ initialize: function (options) {
+ DatetimeCell.__super__.initialize.apply(this, arguments);
+ var formatter = this.formatter;
+ formatter.includeDate = this.includeDate;
+ formatter.includeTime = this.includeTime;
+ formatter.includeMilli = this.includeMilli;
+
+ var placeholder = this.includeDate ? "YYYY-MM-DD" : "";
+ placeholder += (this.includeDate && this.includeTime) ? "T" : "";
+ placeholder += this.includeTime ? "HH:mm:ss" : "";
+ placeholder += (this.includeTime && this.includeMilli) ? ".SSS" : "";
+
+ this.editor = this.editor.extend({
+ attributes: _.extend({}, this.editor.prototype.attributes, this.editor.attributes, {
+ placeholder: placeholder
+ })
+ });
+ }
+
+});
+
+/**
+ DateCell is a Backgrid.DatetimeCell without the time part.
+
+ @class Backgrid.DateCell
+ @extends Backgrid.DatetimeCell
+*/
+var DateCell = Backgrid.DateCell = DatetimeCell.extend({
+
+ /** @property */
+ className: "date-cell",
+
+ /** @property */
+ includeTime: false
+
+});
+
+/**
+ TimeCell is a Backgrid.DatetimeCell without the date part.
+
+ @class Backgrid.TimeCell
+ @extends Backgrid.DatetimeCell
+*/
+var TimeCell = Backgrid.TimeCell = DatetimeCell.extend({
+
+ /** @property */
+ className: "time-cell",
+
+ /** @property */
+ includeDate: false
+
+});
+
+/**
+ BooleanCellEditor renders a checkbox as its editor.
+
+ @class Backgrid.BooleanCellEditor
+ @extends Backgrid.CellEditor
+*/
+var BooleanCellEditor = Backgrid.BooleanCellEditor = CellEditor.extend({
+
+ /** @property */
+ tagName: "input",
+
+ /** @property */
+ attributes: {
+ tabIndex: -1,
+ type: "checkbox"
+ },
+
+ /** @property */
+ events: {
+ "mousedown": function () {
+ this.mouseDown = true;
+ },
+ "blur": "enterOrExitEditMode",
+ "mouseup": function () {
+ this.mouseDown = false;
+ },
+ "change": "saveOrCancel",
+ "keydown": "saveOrCancel"
+ },
+
+ /**
+ Renders a checkbox and check it if the model value of this column is true,
+ uncheck otherwise.
+ */
+ render: function () {
+ var model = this.model;
+ var val = this.formatter.fromRaw(model.get(this.column.get("name")), model);
+ this.$el.prop("checked", val);
+ return this;
+ },
+
+ /**
+ Event handler. Hack to deal with the case where `blur` is fired before
+ `change` and `click` on a checkbox.
+ */
+ enterOrExitEditMode: function (e) {
+ if (!this.mouseDown) {
+ var model = this.model;
+ model.trigger("backgrid:edited", model, this.column, new Command(e));
+ }
+ },
+
+ /**
+ Event handler. Save the value into the model if the event is `change` or
+ one of the keyboard navigation key presses. Exit edit mode without saving
+ if `escape` was pressed.
+ */
+ saveOrCancel: function (e) {
+ var model = this.model;
+ var column = this.column;
+ var formatter = this.formatter;
+ var command = new Command(e);
+ // skip ahead to `change` when space is pressed
+ if (command.passThru() && e.type != "change") return true;
+ if (command.cancel()) {
+ e.stopPropagation();
+ model.trigger("backgrid:edited", model, column, command);
+ }
+
+ var $el = this.$el;
+ if (command.save() || command.moveLeft() || command.moveRight() || command.moveUp() ||
+ command.moveDown()) {
+ e.preventDefault();
+ e.stopPropagation();
+ var val = formatter.toRaw($el.prop("checked"), model);
+ model.set(column.get("name"), val);
+ model.trigger("backgrid:edited", model, column, command);
+ }
+ else if (e.type == "change") {
+ var val = formatter.toRaw($el.prop("checked"), model);
+ model.set(column.get("name"), val);
+ $el.focus();
+ }
+ }
+
+});
+
+/**
+ BooleanCell renders a checkbox both during display mode and edit mode. The
+ checkbox is checked if the model value is true, unchecked otherwise.
+
+ @class Backgrid.BooleanCell
+ @extends Backgrid.Cell
+*/
+var BooleanCell = Backgrid.BooleanCell = Cell.extend({
+
+ /** @property */
+ className: "boolean-cell",
+
+ /** @property */
+ editor: BooleanCellEditor,
+
+ /** @property */
+ events: {
+ "click": "enterEditMode"
+ },
+
+ /**
+ Renders a checkbox and check it if the model value of this column is true,
+ uncheck otherwise.
+ */
+ render: function () {
+ this.$el.empty();
+ var model = this.model, column = this.column;
+ var editable = Backgrid.callByNeed(column.editable(), column, model);
+ this.$el.append($("<input>", {
+ tabIndex: -1,
+ type: "checkbox",
+ checked: this.formatter.fromRaw(model.get(column.get("name")), model),
+ disabled: !editable
+ }));
+ this.delegateEvents();
+ return this;
+ }
+
+});
+
+/**
+ SelectCellEditor renders an HTML `<select>` fragment as the editor.
+
+ @class Backgrid.SelectCellEditor
+ @extends Backgrid.CellEditor
+*/
+var SelectCellEditor = Backgrid.SelectCellEditor = CellEditor.extend({
+
+ /** @property */
+ tagName: "select",
+
+ /** @property */
+ events: {
+ "change": "save",
+ "blur": "close",
+ "keydown": "close"
+ },
+
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>', null, {variable: null}),
+
+ setOptionValues: function (optionValues) {
+ this.optionValues = optionValues;
+ this.optionValues = _.result(this, "optionValues");
+ },
+
+ setMultiple: function (multiple) {
+ this.multiple = multiple;
+ this.$el.prop("multiple", multiple);
+ },
+
+ _renderOptions: function (nvps, selectedValues) {
+ var options = '';
+ for (var i = 0; i < nvps.length; i++) {
+ options = options + this.template({
+ text: nvps[i][0],
+ value: nvps[i][1],
+ selected: _.indexOf(selectedValues, nvps[i][1]) > -1
+ });
+ }
+ return options;
+ },
+
+ /**
+ Renders the options if `optionValues` is a list of name-value pairs. The
+ options are contained inside option groups if `optionValues` is a list of
+ object hashes. The name is rendered at the option text and the value is the
+ option value. If `optionValues` is a function, it is called without a
+ parameter.
+ */
+ render: function () {
+ this.$el.empty();
+
+ var optionValues = _.result(this, "optionValues");
+ var model = this.model;
+ var selectedValues = this.formatter.fromRaw(model.get(this.column.get("name")), model);
+
+ if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
+
+ var optionValue = null;
+ var optionText = null;
+ var optionValue = null;
+ var optgroupName = null;
+ var optgroup = null;
+
+ for (var i = 0; i < optionValues.length; i++) {
+ var optionValue = optionValues[i];
+
+ if (_.isArray(optionValue)) {
+ optionText = optionValue[0];
+ optionValue = optionValue[1];
+
+ this.$el.append(this.template({
+ text: optionText,
+ value: optionValue,
+ selected: _.indexOf(selectedValues, optionValue) > -1
+ }));
+ }
+ else if (_.isObject(optionValue)) {
+ optgroupName = optionValue.name;
+ optgroup = $("<optgroup></optgroup>", { label: optgroupName });
+ optgroup.append(this._renderOptions.call(this, optionValue.values, selectedValues));
+ this.$el.append(optgroup);
+ }
+ else {
+ throw new TypeError("optionValues elements must be a name-value pair or an object hash of { name: 'optgroup label', value: [option name-value pairs] }");
+ }
+ }
+
+ this.delegateEvents();
+
+ return this;
+ },
+
+ /**
+ Saves the value of the selected option to the model attribute.
+ */
+ save: function (e) {
+ var model = this.model;
+ var column = this.column;
+ model.set(column.get("name"), this.formatter.toRaw(this.$el.val(), model));
+ },
+
+ /**
+ Triggers a `backgrid:edited` event from the model so the body can close
+ this editor.
+ */
+ close: function (e) {
+ var model = this.model;
+ var column = this.column;
+ var command = new Command(e);
+ if (command.cancel()) {
+ e.stopPropagation();
+ model.trigger("backgrid:edited", model, column, new Command(e));
+ }
+ else if (command.save() || command.moveLeft() || command.moveRight() ||
+ command.moveUp() || command.moveDown() || e.type == "blur") {
+ e.preventDefault();
+ e.stopPropagation();
+ this.save(e);
+ model.trigger("backgrid:edited", model, column, new Command(e));
+ }
+ }
+
+});
+
+/**
+ SelectCell is also a different kind of cell in that upon going into edit mode
+ the cell renders a list of options to pick from, as opposed to an input box.
+
+ SelectCell cannot be referenced by its string name when used in a column
+ definition because it requires an `optionValues` class attribute to be
+ defined. `optionValues` can either be a list of name-value pairs, to be
+ rendered as options, or a list of object hashes which consist of a key *name*
+ which is the option group name, and a key *values* which is a list of
+ name-value pairs to be rendered as options under that option group.
+
+ In addition, `optionValues` can also be a parameter-less function that
+ returns one of the above. If the options are static, it is recommended the
+ returned values to be memoized. `_.memoize()` is a good function to help with
+ that.
+
+ During display mode, the default formatter will normalize the raw model value
+ to an array of values whether the raw model value is a scalar or an
+ array. Each value is compared with the `optionValues` values using
+ Ecmascript's implicit type conversion rules. When exiting edit mode, no type
+ conversion is performed when saving into the model. This behavior is not
+ always desirable when the value type is anything other than string. To
+ control type conversion on the client-side, you should subclass SelectCell to
+ provide a custom formatter or provide the formatter to your column
+ definition.
+
+ See:
+ [$.fn.val()](http://api.jquery.com/val/)
+
+ @class Backgrid.SelectCell
+ @extends Backgrid.Cell
+*/
+var SelectCell = Backgrid.SelectCell = Cell.extend({
+
+ /** @property */
+ className: "select-cell",
+
+ /** @property */
+ editor: SelectCellEditor,
+
+ /** @property */
+ multiple: false,
+
+ /** @property */
+ formatter: SelectFormatter,
+
+ /**
+ @property {Array.<Array>|Array.<{name: string, values: Array.<Array>}>} optionValues
+ */
+ optionValues: undefined,
+
+ /** @property */
+ delimiter: ', ',
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backbone.Model} options.model
+ @param {Backgrid.Column} options.column
+
+ @throws {TypeError} If `optionsValues` is undefined.
+ */
+ initialize: function (options) {
+ SelectCell.__super__.initialize.apply(this, arguments);
+ this.listenTo(this.model, "backgrid:edit", function (model, column, cell, editor) {
+ if (column.get("name") == this.column.get("name")) {
+ editor.setOptionValues(this.optionValues);
+ editor.setMultiple(this.multiple);
+ }
+ });
+ },
+
+ /**
+ Renders the label using the raw value as key to look up from `optionValues`.
+
+ @throws {TypeError} If `optionValues` is malformed.
+ */
+ render: function () {
+ this.$el.empty();
+
+ var optionValues = _.result(this, "optionValues");
+ var model = this.model;
+ var rawData = this.formatter.fromRaw(model.get(this.column.get("name")), model);
+
+ var selectedText = [];
+
+ try {
+ if (!_.isArray(optionValues) || _.isEmpty(optionValues)) throw new TypeError;
+
+ for (var k = 0; k < rawData.length; k++) {
+ var rawDatum = rawData[k];
+
+ for (var i = 0; i < optionValues.length; i++) {
+ var optionValue = optionValues[i];
+
+ if (_.isArray(optionValue)) {
+ var optionText = optionValue[0];
+ var optionValue = optionValue[1];
+
+ if (optionValue == rawDatum) selectedText.push(optionText);
+ }
+ else if (_.isObject(optionValue)) {
+ var optionGroupValues = optionValue.values;
+
+ for (var j = 0; j < optionGroupValues.length; j++) {
+ var optionGroupValue = optionGroupValues[j];
+ if (optionGroupValue[1] == rawDatum) {
+ selectedText.push(optionGroupValue[0]);
+ }
+ }
+ }
+ else {
+ throw new TypeError;
+ }
+ }
+ }
+
+ this.$el.append(selectedText.join(this.delimiter));
+ }
+ catch (ex) {
+ if (ex instanceof TypeError) {
+ throw new TypeError("'optionValues' must be of type {Array.<Array>|Array.<{name: string, values: Array.<Array>}>}");
+ }
+ throw ex;
+ }
+
+ this.delegateEvents();
+
+ return this;
+ }
+
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ A Column is a placeholder for column metadata.
+
+ You usually don't need to create an instance of this class yourself as a
+ collection of column instances will be created for you from a list of column
+ attributes in the Backgrid.js view class constructors.
+
+ @class Backgrid.Column
+ @extends Backbone.Model
+*/
+var Column = Backgrid.Column = Backbone.Model.extend({
+
+ /**
+ @cfg {Object} defaults Column defaults. To override any of these default
+ values, you can either change the prototype directly to override
+ Column.defaults globally or extend Column and supply the custom class to
+ Backgrid.Grid:
+
+ // Override Column defaults globally
+ Column.prototype.defaults.sortable = false;
+
+ // Override Column defaults locally
+ var MyColumn = Column.extend({
+ defaults: _.defaults({
+ editable: false
+ }, Column.prototype.defaults)
+ });
+
+ var grid = new Backgrid.Grid(columns: new Columns([{...}, {...}], {
+ model: MyColumn
+ }));
+
+ @cfg {string} [defaults.name] The default name of the model attribute.
+
+ @cfg {string} [defaults.label] The default label to show in the header.
+
+ @cfg {string|Backgrid.Cell} [defaults.cell] The default cell type. If this
+ is a string, the capitalized form will be used to look up a cell class in
+ Backbone, i.e.: string => StringCell. If a Cell subclass is supplied, it is
+ initialized with a hash of parameters. If a Cell instance is supplied, it
+ is used directly.
+
+ @cfg {string|Backgrid.HeaderCell} [defaults.headerCell] The default header
+ cell type.
+
+ @cfg {boolean|string|function(): boolean} [defaults.sortable=true] Whether
+ this column is sortable. If the value is a string, a method will the same
+ name will be looked up from the column instance to determine whether the
+ column should be sortable. The method's signature must be `function
+ (Backgrid.Column, Backbone.Model): boolean`.
+
+ @cfg {boolean|string|function(): boolean} [defaults.editable=true] Whether
+ this column is editable. If the value is a string, a method will the same
+ name will be looked up from the column instance to determine whether the
+ column should be editable. The method's signature must be `function
+ (Backgrid.Column, Backbone.Model): boolean`.
+
+ @cfg {boolean|string|function(): boolean} [defaults.renderable=true]
+ Whether this column is renderable. If the value is a string, a method will
+ the same name will be looked up from the column instance to determine
+ whether the column should be renderable. The method's signature must be
+ `function (Backrid.Column, Backbone.Model): boolean`.
+
+ @cfg {Backgrid.CellFormatter | Object | string} [defaults.formatter] The
+ formatter to use to convert between raw model values and user input.
+
+ @cfg {"toggle"|"cycle"} [defaults.sortType="cycle"] Whether sorting will
+ toggle between ascending and descending order, or cycle between insertion
+ order, ascending and descending order.
+
+ @cfg {(function(Backbone.Model, string): *) | string} [defaults.sortValue]
+ The function to use to extract a value from the model for comparison during
+ sorting. If this value is a string, a method with the same name will be
+ looked up from the column instance.
+
+ @cfg {"ascending"|"descending"|null} [defaults.direction=null] The initial
+ sorting direction for this column. The default is ordered by
+ Backbone.Model.cid, which usually means the collection is ordered by
+ insertion order.
+ */
+ defaults: {
+ name: undefined,
+ label: undefined,
+ sortable: true,
+ editable: true,
+ renderable: true,
+ formatter: undefined,
+ sortType: "cycle",
+ sortValue: undefined,
+ direction: null,
+ cell: undefined,
+ headerCell: undefined
+ },
+
+ /**
+ Initializes this Column instance.
+
+ @param {Object} attrs
+
+ @param {string} attrs.name The model attribute this column is responsible
+ for.
+
+ @param {string|Backgrid.Cell} attrs.cell The cell type to use to render
+ this column.
+
+ @param {string} [attrs.label]
+
+ @param {string|Backgrid.HeaderCell} [attrs.headerCell]
+
+ @param {boolean|string|function(): boolean} [attrs.sortable=true]
+
+ @param {boolean|string|function(): boolean} [attrs.editable=true]
+
+ @param {boolean|string|function(): boolean} [attrs.renderable=true]
+
+ @param {Backgrid.CellFormatter | Object | string} [attrs.formatter]
+
+ @param {"toggle"|"cycle"} [attrs.sortType="cycle"]
+
+ @param {(function(Backbone.Model, string): *) | string} [attrs.sortValue]
+
+ @throws {TypeError} If attrs.cell or attrs.options are not supplied.
+
+ @throws {ReferenceError} If formatter is a string but a formatter class of
+ said name cannot be found in the Backgrid module.
+
+ See:
+
+ - Backgrid.Column.defaults
+ - Backgrid.Cell
+ - Backgrid.CellFormatter
+ */
+ initialize: function () {
+ if (!this.has("label")) {
+ this.set({ label: this.get("name") }, { silent: true });
+ }
+
+ var headerCell = Backgrid.resolveNameToClass(this.get("headerCell"), "HeaderCell");
+
+ var cell = Backgrid.resolveNameToClass(this.get("cell"), "Cell");
+
+ this.set({cell: cell, headerCell: headerCell}, { silent: true });
+ },
+
+ /**
+ Returns an appropriate value extraction function from a model for sorting.
+
+ If the column model contains an attribute `sortValue`, if it is a string, a
+ method from the column instance identifified by the `sortValue` string is
+ returned. If it is a function, it it returned as is. If `sortValue` isn't
+ found from the column model's attributes, a default value extraction
+ function is returned which will compare according to the natural order of
+ the value's type.
+
+ @return {function(Backbone.Model, string): *}
+ */
+ sortValue: function () {
+ var sortValue = this.get("sortValue");
+ if (_.isString(sortValue)) return this[sortValue];
+ else if (_.isFunction(sortValue)) return sortValue;
+
+ return function (model, colName) {
+ return model.get(colName);
+ };
+ }
+
+ /**
+ @member Backgrid.Column
+ @protected
+ @method sortable
+ @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+ */
+
+ /**
+ @member Backgrid.Column
+ @protected
+ @method editable
+ @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+ */
+
+ /**
+ @member Backgrid.Column
+ @protected
+ @method renderable
+ @return {function(Backgrid.Column, Backbone.Model): boolean | boolean}
+ */
+});
+
+_.each(["sortable", "renderable", "editable"], function (key) {
+ Column.prototype[key] = function () {
+ var value = this.get(key);
+ if (_.isString(value)) return this[value];
+ else if (_.isFunction(value)) return value;
+
+ return !!value;
+ };
+});
+
+/**
+ A Backbone collection of Column instances.
+
+ @class Backgrid.Columns
+ @extends Backbone.Collection
+ */
+var Columns = Backgrid.Columns = Backbone.Collection.extend({
+
+ /**
+ @property {Backgrid.Column} model
+ */
+ model: Column
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ Row is a simple container view that takes a model instance and a list of
+ column metadata describing how each of the model's attribute is to be
+ rendered, and apply the appropriate cell to each attribute.
+
+ @class Backgrid.Row
+ @extends Backbone.View
+*/
+var Row = Backgrid.Row = Backbone.View.extend({
+
+ /** @property */
+ tagName: "tr",
+
+ /**
+ Initializes a row view instance.
+
+ @param {Object} options
+ @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
+ @param {Backbone.Model} options.model The model instance to render.
+
+ @throws {TypeError} If options.columns or options.model is undefined.
+ */
+ initialize: function (options) {
+
+ var columns = this.columns = options.columns;
+ if (!(columns instanceof Backbone.Collection)) {
+ columns = this.columns = new Columns(columns);
+ }
+
+ var cells = this.cells = [];
+ for (var i = 0; i < columns.length; i++) {
+ cells.push(this.makeCell(columns.at(i), options));
+ }
+
+ this.listenTo(columns, "add", function (column, columns) {
+ var i = columns.indexOf(column);
+ var cell = this.makeCell(column, options);
+ cells.splice(i, 0, cell);
+
+ var $el = this.$el;
+ if (i === 0) {
+ $el.prepend(cell.render().$el);
+ }
+ else if (i === columns.length - 1) {
+ $el.append(cell.render().$el);
+ }
+ else {
+ $el.children().eq(i).before(cell.render().$el);
+ }
+ });
+
+ this.listenTo(columns, "remove", function (column, columns, opts) {
+ cells[opts.index].remove();
+ cells.splice(opts.index, 1);
+ });
+ },
+
+ /**
+ Factory method for making a cell. Used by #initialize internally. Override
+ this to provide an appropriate cell instance for a custom Row subclass.
+
+ @protected
+
+ @param {Backgrid.Column} column
+ @param {Object} options The options passed to #initialize.
+
+ @return {Backgrid.Cell}
+ */
+ makeCell: function (column) {
+ return new (column.get("cell"))({
+ column: column,
+ model: this.model
+ });
+ },
+
+ /**
+ Renders a row of cells for this row's model.
+ */
+ render: function () {
+ this.$el.empty();
+
+ var fragment = document.createDocumentFragment();
+ for (var i = 0; i < this.cells.length; i++) {
+ fragment.appendChild(this.cells[i].render().el);
+ }
+
+ this.el.appendChild(fragment);
+
+ this.delegateEvents();
+
+ return this;
+ },
+
+ /**
+ Clean up this row and its cells.
+
+ @chainable
+ */
+ remove: function () {
+ for (var i = 0; i < this.cells.length; i++) {
+ var cell = this.cells[i];
+ cell.remove.apply(cell, arguments);
+ }
+ return Backbone.View.prototype.remove.apply(this, arguments);
+ }
+
+});
+
+/**
+ EmptyRow is a simple container view that takes a list of column and render a
+ row with a single column.
+
+ @class Backgrid.EmptyRow
+ @extends Backbone.View
+*/
+var EmptyRow = Backgrid.EmptyRow = Backbone.View.extend({
+
+ /** @property */
+ tagName: "tr",
+
+ /** @property {string|function(): string} */
+ emptyText: null,
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {string|function(): string} options.emptyText
+ @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
+ */
+ initialize: function (options) {
+ this.emptyText = options.emptyText;
+ this.columns = options.columns;
+ },
+
+ /**
+ Renders an empty row.
+ */
+ render: function () {
+ this.$el.empty();
+
+ var td = document.createElement("td");
+ td.setAttribute("colspan", this.columns.length);
+ td.appendChild(document.createTextNode(_.result(this, "emptyText")));
+
+ this.el.className = "empty";
+ this.el.appendChild(td);
+
+ return this;
+ }
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ HeaderCell is a special cell class that renders a column header cell. If the
+ column is sortable, a sorter is also rendered and will trigger a table
+ refresh after sorting.
+
+ @class Backgrid.HeaderCell
+ @extends Backbone.View
+ */
+var HeaderCell = Backgrid.HeaderCell = Backbone.View.extend({
+
+ /** @property */
+ tagName: "th",
+
+ /** @property */
+ events: {
+ "click a": "onClick"
+ },
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backgrid.Column|Object} options.column
+
+ @throws {TypeError} If options.column or options.collection is undefined.
+ */
+ initialize: function (options) {
+ this.column = options.column;
+ if (!(this.column instanceof Column)) {
+ this.column = new Column(this.column);
+ }
+
+ var column = this.column, collection = this.collection, $el = this.$el;
+
+ this.listenTo(column, "change:editable change:sortable change:renderable",
+ function (column) {
+ var changed = column.changedAttributes();
+ for (var key in changed) {
+ if (changed.hasOwnProperty(key)) {
+ $el.toggleClass(key, changed[key]);
+ }
+ }
+ });
+ this.listenTo(column, "change:direction", this.setCellDirection);
+ this.listenTo(column, "change:name change:label", this.render);
+
+ if (Backgrid.callByNeed(column.editable(), column, collection)) $el.addClass("editable");
+ if (Backgrid.callByNeed(column.sortable(), column, collection)) $el.addClass("sortable");
+ if (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable");
+
+ this.listenTo(collection.fullCollection || collection, "sort", this.removeCellDirection);
+ },
+
+ /**
+ Event handler for the collection's `sort` event. Removes all the CSS
+ direction classes.
+ */
+ removeCellDirection: function () {
+ this.$el.removeClass("ascending").removeClass("descending");
+ this.column.set("direction", null);
+ },
+
+ /**
+ Event handler for the column's `change:direction` event. If this
+ HeaderCell's column is being sorted on, it applies the direction given as a
+ CSS class to the header cell. Removes all the CSS direction classes
+ otherwise.
+ */
+ setCellDirection: function (column, direction) {
+ this.$el.removeClass("ascending").removeClass("descending");
+ if (column.cid == this.column.cid) this.$el.addClass(direction);
+ },
+
+ /**
+ Event handler for the `click` event on the cell's anchor. If the column is
+ sortable, clicking on the anchor will cycle through 3 sorting orderings -
+ `ascending`, `descending`, and default.
+ */
+ onClick: function (e) {
+ e.preventDefault();
+
+ var column = this.column;
+ var collection = this.collection;
+ var event = "backgrid:sort";
+
+ function cycleSort(header, col) {
+ if (column.get("direction") === "ascending") collection.trigger(event, col, "descending");
+ else if (column.get("direction") === "descending") collection.trigger(event, col, null);
+ else collection.trigger(event, col, "ascending");
+ }
+
+ function toggleSort(header, col) {
+ if (column.get("direction") === "ascending") collection.trigger(event, col, "descending");
+ else collection.trigger(event, col, "ascending");
+ }
+
+ var sortable = Backgrid.callByNeed(column.sortable(), column, this.collection);
+ if (sortable) {
+ var sortType = column.get("sortType");
+ if (sortType === "toggle") toggleSort(this, column);
+ else cycleSort(this, column);
+ }
+ },
+
+ /**
+ Renders a header cell with a sorter, a label, and a class name for this
+ column.
+ */
+ render: function () {
+ this.$el.empty();
+ var column = this.column;
+ var sortable = Backgrid.callByNeed(column.sortable(), column, this.collection);
+ var label;
+ if(sortable){
+ label = $("<a>").text(column.get("label")).append("<b class='sort-caret'></b>");
+ } else {
+ label = document.createTextNode(column.get("label"));
+ }
+
+ this.$el.append(label);
+ this.$el.addClass(column.get("name"));
+ this.$el.addClass(column.get("direction"));
+ this.delegateEvents();
+ return this;
+ }
+
+});
+
+/**
+ HeaderRow is a controller for a row of header cells.
+
+ @class Backgrid.HeaderRow
+ @extends Backgrid.Row
+ */
+var HeaderRow = Backgrid.HeaderRow = Backgrid.Row.extend({
+
+ requiredOptions: ["columns", "collection"],
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns
+ @param {Backgrid.HeaderCell} [options.headerCell] Customized default
+ HeaderCell for all the columns. Supply a HeaderCell class or instance to a
+ the `headerCell` key in a column definition for column-specific header
+ rendering.
+
+ @throws {TypeError} If options.columns or options.collection is undefined.
+ */
+ initialize: function () {
+ Backgrid.Row.prototype.initialize.apply(this, arguments);
+ },
+
+ makeCell: function (column, options) {
+ var headerCell = column.get("headerCell") || options.headerCell || HeaderCell;
+ headerCell = new headerCell({
+ column: column,
+ collection: this.collection
+ });
+ return headerCell;
+ }
+
+});
+
+/**
+ Header is a special structural view class that renders a table head with a
+ single row of header cells.
+
+ @class Backgrid.Header
+ @extends Backbone.View
+ */
+var Header = Backgrid.Header = Backbone.View.extend({
+
+ /** @property */
+ tagName: "thead",
+
+ /**
+ Initializer. Initializes this table head view to contain a single header
+ row view.
+
+ @param {Object} options
+ @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
+ @param {Backbone.Model} options.model The model instance to render.
+
+ @throws {TypeError} If options.columns or options.model is undefined.
+ */
+ initialize: function (options) {
+ this.columns = options.columns;
+ if (!(this.columns instanceof Backbone.Collection)) {
+ this.columns = new Columns(this.columns);
+ }
+
+ this.row = new Backgrid.HeaderRow({
+ columns: this.columns,
+ collection: this.collection
+ });
+ },
+
+ /**
+ Renders this table head with a single row of header cells.
+ */
+ render: function () {
+ this.$el.append(this.row.render().$el);
+ this.delegateEvents();
+ return this;
+ },
+
+ /**
+ Clean up this header and its row.
+
+ @chainable
+ */
+ remove: function () {
+ this.row.remove.apply(this.row, arguments);
+ return Backbone.View.prototype.remove.apply(this, arguments);
+ }
+
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ Body is the table body which contains the rows inside a table. Body is
+ responsible for refreshing the rows after sorting, insertion and removal.
+
+ @class Backgrid.Body
+ @extends Backbone.View
+*/
+var Body = Backgrid.Body = Backbone.View.extend({
+
+ /** @property */
+ tagName: "tbody",
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backbone.Collection} options.collection
+ @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns
+ Column metadata.
+ @param {Backgrid.Row} [options.row=Backgrid.Row] The Row class to use.
+ @param {string|function(): string} [options.emptyText] The text to display in the empty row.
+
+ @throws {TypeError} If options.columns or options.collection is undefined.
+
+ See Backgrid.Row.
+ */
+ initialize: function (options) {
+
+ this.columns = options.columns;
+ if (!(this.columns instanceof Backbone.Collection)) {
+ this.columns = new Columns(this.columns);
+ }
+
+ this.row = options.row || Row;
+ this.rows = this.collection.map(function (model) {
+ var row = new this.row({
+ columns: this.columns,
+ model: model
+ });
+
+ return row;
+ }, this);
+
+ this.emptyText = options.emptyText;
+ this._unshiftEmptyRowMayBe();
+
+ var collection = this.collection;
+ this.listenTo(collection, "add", this.insertRow);
+ this.listenTo(collection, "remove", this.removeRow);
+ this.listenTo(collection, "sort", this.refresh);
+ this.listenTo(collection, "reset", this.refresh);
+ this.listenTo(collection, "backgrid:sort", this.sort);
+ this.listenTo(collection, "backgrid:edited", this.moveToNextCell);
+ },
+
+ _unshiftEmptyRowMayBe: function () {
+ if (this.rows.length === 0 && this.emptyText != null) {
+ this.rows.unshift(new EmptyRow({
+ emptyText: this.emptyText,
+ columns: this.columns
+ }));
+ }
+ },
+
+ /**
+ This method can be called either directly or as a callback to a
+ [Backbone.Collecton#add](http://backbonejs.org/#Collection-add) event.
+
+ When called directly, it accepts a model or an array of models and an
+ option hash just like
+ [Backbone.Collection#add](http://backbonejs.org/#Collection-add) and
+ delegates to it. Once the model is added, a new row is inserted into the
+ body and automatically rendered.
+
+ When called as a callback of an `add` event, splices a new row into the
+ body and renders it.
+
+ @param {Backbone.Model} model The model to render as a row.
+ @param {Backbone.Collection} collection When called directly, this
+ parameter is actually the options to
+ [Backbone.Collection#add](http://backbonejs.org/#Collection-add).
+ @param {Object} options When called directly, this must be null.
+
+ See:
+
+ - [Backbone.Collection#add](http://backbonejs.org/#Collection-add)
+ */
+ insertRow: function (model, collection, options) {
+
+ if (this.rows[0] instanceof EmptyRow) this.rows.pop().remove();
+
+ // insertRow() is called directly
+ if (!(collection instanceof Backbone.Collection) && !options) {
+ this.collection.add(model, (options = collection));
+ return;
+ }
+
+ var row = new this.row({
+ columns: this.columns,
+ model: model
+ });
+
+ var index = collection.indexOf(model);
+ this.rows.splice(index, 0, row);
+
+ var $el = this.$el;
+ var $children = $el.children();
+ var $rowEl = row.render().$el;
+
+ if (index >= $children.length) {
+ $el.append($rowEl);
+ }
+ else {
+ $children.eq(index).before($rowEl);
+ }
+
+ return this;
+ },
+
+ /**
+ The method can be called either directly or as a callback to a
+ [Backbone.Collection#remove](http://backbonejs.org/#Collection-remove)
+ event.
+
+ When called directly, it accepts a model or an array of models and an
+ option hash just like
+ [Backbone.Collection#remove](http://backbonejs.org/#Collection-remove) and
+ delegates to it. Once the model is removed, a corresponding row is removed
+ from the body.
+
+ When called as a callback of a `remove` event, splices into the rows and
+ removes the row responsible for rendering the model.
+
+ @param {Backbone.Model} model The model to remove from the body.
+ @param {Backbone.Collection} collection When called directly, this
+ parameter is actually the options to
+ [Backbone.Collection#remove](http://backbonejs.org/#Collection-remove).
+ @param {Object} options When called directly, this must be null.
+
+ See:
+
+ - [Backbone.Collection#remove](http://backbonejs.org/#Collection-remove)
+ */
+ removeRow: function (model, collection, options) {
+
+ // removeRow() is called directly
+ if (!options) {
+ this.collection.remove(model, (options = collection));
+ this._unshiftEmptyRowMayBe();
+ return;
+ }
+
+ if (_.isUndefined(options.render) || options.render) {
+ this.rows[options.index].remove();
+ }
+
+ this.rows.splice(options.index, 1);
+ this._unshiftEmptyRowMayBe();
+
+ return this;
+ },
+
+ /**
+ Reinitialize all the rows inside the body and re-render them. Triggers a
+ Backbone `backgrid:refresh` event from the collection along with the body
+ instance as its sole parameter when done.
+ */
+ refresh: function () {
+ for (var i = 0; i < this.rows.length; i++) {
+ this.rows[i].remove();
+ }
+
+ this.rows = this.collection.map(function (model) {
+ var row = new this.row({
+ columns: this.columns,
+ model: model
+ });
+
+ return row;
+ }, this);
+ this._unshiftEmptyRowMayBe();
+
+ this.render();
+
+ this.collection.trigger("backgrid:refresh", this);
+
+ return this;
+ },
+
+ /**
+ Renders all the rows inside this body. If the collection is empty and
+ `options.emptyText` is defined and not null in the constructor, an empty
+ row is rendered, otherwise no row is rendered.
+ */
+ render: function () {
+ this.$el.empty();
+
+ var fragment = document.createDocumentFragment();
+ for (var i = 0; i < this.rows.length; i++) {
+ var row = this.rows[i];
+ fragment.appendChild(row.render().el);
+ }
+
+ this.el.appendChild(fragment);
+
+ this.delegateEvents();
+
+ return this;
+ },
+
+ /**
+ Clean up this body and it's rows.
+
+ @chainable
+ */
+ remove: function () {
+ for (var i = 0; i < this.rows.length; i++) {
+ var row = this.rows[i];
+ row.remove.apply(row, arguments);
+ }
+ return Backbone.View.prototype.remove.apply(this, arguments);
+ },
+
+ /**
+ If the underlying collection is a Backbone.PageableCollection in
+ server-mode or infinite-mode, a page of models is fetched after sorting is
+ done on the server.
+
+ If the underlying collection is a Backbone.PageableCollection in
+ client-mode, or any
+ [Backbone.Collection](http://backbonejs.org/#Collection) instance, sorting
+ is done on the client side. If the collection is an instance of a
+ Backbone.PageableCollection, sorting will be done globally on all the pages
+ and the current page will then be returned.
+
+ Triggers a Backbone `backgrid:sorted` event from the collection when done
+ with the column, direction and a reference to the collection.
+
+ @param {Backgrid.Column} column
+ @param {null|"ascending"|"descending"} direction
+
+ See [Backbone.Collection#comparator](http://backbonejs.org/#Collection-comparator)
+ */
+ sort: function (column, direction) {
+
+ if (!_.contains(["ascending", "descending", null], direction)) {
+ throw new RangeError('direction must be one of "ascending", "descending" or `null`');
+ }
+
+ if (_.isString(column)) column = this.columns.findWhere({name: column});
+
+ var collection = this.collection;
+
+ var order;
+ if (direction === "ascending") order = -1;
+ else if (direction === "descending") order = 1;
+ else order = null;
+
+ var comparator = this.makeComparator(column.get("name"), order,
+ order ?
+ column.sortValue() :
+ function (model) {
+ return model.cid.replace('c', '') * 1;
+ });
+
+ if (Backbone.PageableCollection &&
+ collection instanceof Backbone.PageableCollection) {
+
+ collection.setSorting(order && column.get("name"), order,
+ {sortValue: column.sortValue()});
+
+ if (collection.fullCollection) {
+ // If order is null, pageable will remove the comparator on both sides,
+ // in this case the default insertion order comparator needs to be
+ // attached to get back to the order before sorting.
+ if (collection.fullCollection.comparator == null) {
+ collection.fullCollection.comparator = comparator;
+ }
+ collection.fullCollection.sort();
+ collection.trigger("backgrid:sorted", column, direction, collection);
+ }
+ else collection.fetch({reset: true, success: function () {
+ collection.trigger("backgrid:sorted", column, direction, collection);
+ }});
+ }
+ else {
+ collection.comparator = comparator;
+ collection.sort();
+ collection.trigger("backgrid:sorted", column, direction, collection);
+ }
+
+ column.set("direction", direction);
+
+ return this;
+ },
+
+ makeComparator: function (attr, order, func) {
+
+ return function (left, right) {
+ // extract the values from the models
+ var l = func(left, attr), r = func(right, attr), t;
+
+ // if descending order, swap left and right
+ if (order === 1) t = l, l = r, r = t;
+
+ // compare as usual
+ if (l === r) return 0;
+ else if (l < r) return -1;
+ return 1;
+ };
+ },
+
+ /**
+ Moves focus to the next renderable and editable cell and return the
+ currently editing cell to display mode.
+
+ Triggers a `backgrid:next` event on the model with the indices of the row
+ and column the user *intended* to move to, and whether the intended move
+ was going to go out of bounds. Note that *out of bound* always means an
+ attempt to go past the end of the last row.
+
+ @param {Backbone.Model} model The originating model
+ @param {Backgrid.Column} column The originating model column
+ @param {Backgrid.Command} command The Command object constructed from a DOM
+ event
+ */
+ moveToNextCell: function (model, column, command) {
+ var i = this.collection.indexOf(model);
+ var j = this.columns.indexOf(column);
+ var cell, renderable, editable, m, n;
+
+ this.rows[i].cells[j].exitEditMode();
+
+ if (command.moveUp() || command.moveDown() || command.moveLeft() ||
+ command.moveRight() || command.save()) {
+ var l = this.columns.length;
+ var maxOffset = l * this.collection.length;
+
+ if (command.moveUp() || command.moveDown()) {
+ m = i + (command.moveUp() ? -1 : 1);
+ var row = this.rows[m];
+ if (row) {
+ cell = row.cells[j];
+ if (Backgrid.callByNeed(cell.column.editable(), cell.column, model)) {
+ cell.enterEditMode();
+ model.trigger("backgrid:next", m, j, false);
+ }
+ }
+ else model.trigger("backgrid:next", m, j, true);
+ }
+ else if (command.moveLeft() || command.moveRight()) {
+ var right = command.moveRight();
+ for (var offset = i * l + j + (right ? 1 : -1);
+ offset >= 0 && offset < maxOffset;
+ right ? offset++ : offset--) {
+ m = ~~(offset / l);
+ n = offset - m * l;
+ cell = this.rows[m].cells[n];
+ renderable = Backgrid.callByNeed(cell.column.renderable(), cell.column, cell.model);
+ editable = Backgrid.callByNeed(cell.column.editable(), cell.column, model);
+ if (renderable && editable) {
+ cell.enterEditMode();
+ model.trigger("backgrid:next", m, n, false);
+ break;
+ }
+ }
+
+ if (offset == maxOffset) {
+ model.trigger("backgrid:next", ~~(offset / l), offset - m * l, true);
+ }
+ }
+ }
+
+ return this;
+ }
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ A Footer is a generic class that only defines a default tag `tfoot` and
+ number of required parameters in the initializer.
+
+ @abstract
+ @class Backgrid.Footer
+ @extends Backbone.View
+ */
+var Footer = Backgrid.Footer = Backbone.View.extend({
+
+ /** @property */
+ tagName: "tfoot",
+
+ /**
+ Initializer.
+
+ @param {Object} options
+ @param {Backbone.Collection.<Backgrid.Column>|Array.<Backgrid.Column>|Array.<Object>} options.columns
+ Column metadata.
+ @param {Backbone.Collection} options.collection
+
+ @throws {TypeError} If options.columns or options.collection is undefined.
+ */
+ initialize: function (options) {
+ this.columns = options.columns;
+ if (!(this.columns instanceof Backbone.Collection)) {
+ this.columns = new Backgrid.Columns(this.columns);
+ }
+ }
+
+});
+
+/*
+ backgrid
+ http://github.com/wyuenho/backgrid
+
+ Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+ Licensed under the MIT license.
+*/
+
+/**
+ Grid represents a data grid that has a header, body and an optional footer.
+
+ By default, a Grid treats each model in a collection as a row, and each
+ attribute in a model as a column. To render a grid you must provide a list of
+ column metadata and a collection to the Grid constructor. Just like any
+ Backbone.View class, the grid is rendered as a DOM node fragment when you
+ call render().
+
+ var grid = Backgrid.Grid({
+ columns: [{ name: "id", label: "ID", type: "string" },
+ // ...
+ ],
+ collections: books
+ });
+
+ $("#table-container").append(grid.render().el);
+
+ Optionally, if you want to customize the rendering of the grid's header and
+ footer, you may choose to extend Backgrid.Header and Backgrid.Footer, and
+ then supply that class or an instance of that class to the Grid constructor.
+ See the documentation for Header and Footer for further details.
+
+ var grid = Backgrid.Grid({
+ columns: [{ name: "id", label: "ID", type: "string" }],
+ collections: books,
+ header: Backgrid.Header.extend({
+ //...
+ }),
+ footer: Backgrid.Paginator
+ });
+
+ Finally, if you want to override how the rows are rendered in the table body,
+ you can supply a Body subclass as the `body` attribute that uses a different
+ Row class.
+
+ @class Backgrid.Grid
+ @extends Backbone.View
+
+ See:
+
+ - Backgrid.Column
+ - Backgrid.Header
+ - Backgrid.Body
+ - Backgrid.Row
+ - Backgrid.Footer
+*/
+var Grid = Backgrid.Grid = Backbone.View.extend({
+
+ /** @property */
+ tagName: "table",
+
+ /** @property */
+ className: "backgrid",
+
+ /** @property */
+ header: Header,
+
+ /** @property */
+ body: Body,
+
+ /** @property */
+ footer: null,
+
+ /**
+ Initializes a Grid instance.
+
+ @param {Object} options
+ @param {Backbone.Collection.<Backgrid.Columns>|Array.<Backgrid.Column>|Array.<Object>} options.columns Column metadata.
+ @param {Backbone.Collection} options.collection The collection of tabular model data to display.
+ @param {Backgrid.Header} [options.header=Backgrid.Header] An optional Header class to override the default.
+ @param {Backgrid.Body} [options.body=Backgrid.Body] An optional Body class to override the default.
+ @param {Backgrid.Row} [options.row=Backgrid.Row] An optional Row class to override the default.
+ @param {Backgrid.Footer} [options.footer=Backgrid.Footer] An optional Footer class.
+ */
+ initialize: function (options) {
+ // Convert the list of column objects here first so the subviews don't have
+ // to.
+ if (!(options.columns instanceof Backbone.Collection)) {
+ options.columns = new Columns(options.columns);
+ }
+ this.columns = options.columns;
+
+ var filteredOptions = _.omit(options, ["el", "id", "attributes",
+ "className", "tagName", "events"]);
+
+ // must construct body first so it listens to backgrid:sort first
+ this.body = options.body || this.body;
+ this.body = new this.body(filteredOptions);
+
+ this.header = options.header || this.header;
+ if (this.header) {
+ this.header = new this.header(filteredOptions);
+ }
+
+ this.footer = options.footer || this.footer;
+ if (this.footer) {
+ this.footer = new this.footer(filteredOptions);
+ }
+
+ this.listenTo(this.columns, "reset", function () {
+ if (this.header) {
+ this.header = new (this.header.remove().constructor)(filteredOptions);
+ }
+ this.body = new (this.body.remove().constructor)(filteredOptions);
+ if (this.footer) {
+ this.footer = new (this.footer.remove().constructor)(filteredOptions);
+ }
+ this.render();
+ });
+ },
+
+ /**
+ Delegates to Backgrid.Body#insertRow.
+ */
+ insertRow: function () {
+ this.body.insertRow.apply(this.body, arguments);
+ return this;
+ },
+
+ /**
+ Delegates to Backgrid.Body#removeRow.
+ */
+ removeRow: function () {
+ this.body.removeRow.apply(this.body, arguments);
+ return this;
+ },
+
+ /**
+ Delegates to Backgrid.Columns#add for adding a column. Subviews can listen
+ to the `add` event from their internal `columns` if rerendering needs to
+ happen.
+
+ @param {Object} [options] Options for `Backgrid.Columns#add`.
+ */
+ insertColumn: function () {
+ this.columns.add.apply(this.columns, arguments);
+ return this;
+ },
+
+ /**
+ Delegates to Backgrid.Columns#remove for removing a column. Subviews can
+ listen to the `remove` event from the internal `columns` if rerendering
+ needs to happen.
+
+ @param {Object} [options] Options for `Backgrid.Columns#remove`.
+ */
+ removeColumn: function () {
+ this.columns.remove.apply(this.columns, arguments);
+ return this;
+ },
+
+ /**
+ Delegates to Backgrid.Body#sort.
+ */
+ sort: function () {
+ this.body.sort.apply(this.body, arguments);
+ return this;
+ },
+
+ /**
+ Renders the grid's header, then footer, then finally the body. Triggers a
+ Backbone `backgrid:rendered` event along with a reference to the grid when
+ the it has successfully been rendered.
+ */
+ render: function () {
+ this.$el.empty();
+
+ if (this.header) {
+ this.$el.append(this.header.render().$el);
+ }
+
+ if (this.footer) {
+ this.$el.append(this.footer.render().$el);
+ }
+
+ this.$el.append(this.body.render().$el);
+
+ this.delegateEvents();
+
+ this.trigger("backgrid:rendered", this);
+
+ return this;
+ },
+
+ /**
+ Clean up this grid and its subviews.
+
+ @chainable
+ */
+ remove: function () {
+ this.header && this.header.remove.apply(this.header, arguments);
+ this.body.remove.apply(this.body, arguments);
+ this.footer && this.footer.remove.apply(this.footer, arguments);
+ return Backbone.View.prototype.remove.apply(this, arguments);
+ }
+
+});
+return Backgrid;
+}));
\ No newline at end of file