backgrid-select-all

<!doctype html> <html lang="en"> <head> <title>Code coverage report for backgrid-select-all.js</title> <meta charset="utf-8"> <link rel="stylesheet" href="../prettify.css"> <style> body, html { margin:0; padding: 0; } body { font-family: Helvetica Neue, Helvetica,Arial; font-size: 10pt; } div.header, div.footer { background: #eee; padding: 1em; } div.header { z-index: 100; position: fixed; top: 0; border-bottom: 1px solid #666; width: 100%; } div.footer { border-top: 1px solid #666; } div.body { margin-top: 10em; } div.meta { font-size: 90%; text-align: center; } h1, h2, h3 { font-weight: normal; } h1 { font-size: 12pt; } h2 { font-size: 10pt; } pre { font-family: Consolas, Menlo, Monaco, monospace; margin: 0; padding: 0; line-height: 14px; font-size: 14px; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } div.path { font-size: 110%; } div.path a:link, div.path a:visited { color: #000; } table.coverage { border-collapse: collapse; margin:0; padding: 0 } table.coverage td { margin: 0; padding: 0; color: #111; vertical-align: top; } table.coverage td.line-count { width: 50px; text-align: right; padding-right: 5px; } table.coverage td.line-coverage { color: #777 !important; text-align: right; border-left: 1px solid #666; border-right: 1px solid #666; } table.coverage td.text { } table.coverage td span.cline-any { display: inline-block; padding: 0 5px; width: 40px; } table.coverage td span.cline-neutral { background: #eee; } table.coverage td span.cline-yes { background: #b5d592; color: #999; } table.coverage td span.cline-no { background: #fc8c84; } .cstat-yes { color: #111; } .cstat-no { background: #fc8c84; color: #111; } .fstat-no { background: #ffc520; color: #111 !important; } .cbranch-no { background: yellow !important; color: #111; } .missing-if-branch { display: inline-block; margin-right: 10px; position: relative; padding: 0 4px; background: black; color: yellow; xtext-decoration: line-through; } .missing-if-branch .typ { color: inherit !important; } .entity, .metric { font-weight: bold; } .metric { display: inline-block; border: 1px solid #333; padding: 0.3em; background: white; } .metric small { font-size: 80%; font-weight: normal; color: #666; } div.coverage-summary table { border-collapse: collapse; margin: 3em; font-size: 110%; } div.coverage-summary td, div.coverage-summary table th { margin: 0; padding: 0.25em 1em; border-top: 1px solid #666; border-bottom: 1px solid #666; } div.coverage-summary th { text-align: left; border: 1px solid #666; background: #eee; font-weight: normal; } div.coverage-summary th.file { border-right: none !important; } div.coverage-summary th.pic { border-left: none !important; text-align: right; } div.coverage-summary th.pct { border-right: none !important; } div.coverage-summary th.abs { border-left: none !important; text-align: right; } div.coverage-summary td.pct { text-align: right; border-left: 1px solid #666; } div.coverage-summary td.abs { text-align: right; font-size: 90%; color: #444; border-right: 1px solid #666; } div.coverage-summary td.file { text-align: right; border-left: 1px solid #666; white-space: nowrap; } div.coverage-summary td.pic { min-width: 120px !important; } div.coverage-summary a:link { text-decoration: none; color: #000; } div.coverage-summary a:visited { text-decoration: none; color: #333; } div.coverage-summary a:hover { text-decoration: underline; } div.coverage-summary tfoot td { border-top: 1px solid #666; } div.coverage-summary .yui3-datatable-sort-indicator, div.coverage-summary .dummy-sort-indicator { height: 10px; width: 7px; display: inline-block; margin-left: 0.5em; } div.coverage-summary .yui3-datatable-sort-indicator { background: url("http://yui.yahooapis.com/3.6.0/build/datatable-sort/assets/skins/sam/sort-arrow-sprite.png") no-repeat scroll 0 0 transparent; } div.coverage-summary .yui3-datatable-sorted .yui3-datatable-sort-indicator { background-position: 0 -20px; } div.coverage-summary .yui3-datatable-sorted-desc .yui3-datatable-sort-indicator { background-position: 0 -10px; } .high { background: #b5d592 !important; } .medium { background: #ffe87c !important; } .low { background: #fc8c84 !important; } span.cover-fill, span.cover-empty { display:inline-block; border:1px solid #444; background: white; height: 12px; } span.cover-fill { background: #ccc; border-right: 1px solid #444; } span.cover-empty { background: white; border-left: none; } span.cover-full { border-right: none !important; } pre.prettyprint { border: none !important; padding: 0 !important; margin: 0 !important; } .com { color: #999 !important; } </style> </head> <body> <div class="header high"> <h1>Code coverage report for backgrid-select-all.js</h1> <h2> Statements: 82.56% (71 / 86)      Branches: 59.18% (29 / 49)      Functions: 75% (15 / 20)      Lines: 82.93% (68 / 82)      </h2> <div class="path"><a href="../index.html">All files</a> » <a href="index.html">./</a> » ckgrid-select-all.js</div> </div> <div class="body"> <pre><table class="coverage"> <tr><td class="line-count">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275</td><td class="line-coverage">              1     1       1                       1                                                 12 12 5     12 12       12   12 4                                                                                   7 7 7             30 30 30                     1                                                       18 18 15     18 18 18   20   5 5       18 2     18 12 12 22 22 15         18 18       18                                 9   9 9 18     9 5 15 5         9                         1 5 5 5 5 5 5 5       5 5 5 5 5 8       5                 1 1 1 2 2          </td><td class="text"><pre class="prettyprint lang-js">/* backgrid-select-all http://github.com/wyuenho/backgrid   Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors Licensed under the MIT @license. */ (function (root, factory) {   // CommonJS Iif (typeof exports == "object") { module.exports = factory(require("backbone"), require("backgrid")); } // Browser else factory(root.Backbone, root.Backgrid);   }(this, function (Backbone, Backgrid) {   "use strict";   /** Renders a checkbox for row selection.   @class Backgrid.Extension.SelectRowCell @extends Backbone.View */ var SelectRowCell = Backgrid.Extension.SelectRowCell = Backbone.View.extend({   /** @property */ className: "select-row-cell",   /** @property */ tagName: "td",   /** @property */ events: { "keydown input[type=checkbox]": "onKeydown", "change input[type=checkbox]": "onChange", "click input[type=checkbox]": "enterEditMode" },   /** Initializer. If the underlying model triggers a `select` event, this cell will change its checked value according to the event's `selected` value.   @param {Object} options @param {Backgrid.Column} options.column @param {Backbone.Model} options.model */ initialize: function (options) {   this.column = options.column; if (!(this.column instanceof Backgrid.Column)) { this.column = new Backgrid.Column(this.column); }   var column = this.column, model = this.model, $el = this.$el; this.listenTo(column, "change:renderable", function (column, renderable) { $el.toggleClass("renderable", renderable); });   Eif (Backgrid.callByNeed(column.renderable(), column, model)) $el.addClass("renderable");   this.listenTo(model, "backgrid:select", function (model, selected) { this.$el.find("input[type=checkbox]").prop("checked", selected).change(); }); },   /** Focuses the checkbox. */ enterEditMode: function () { this.$el.find("input[type=checkbox]").focus(); },   /** Unfocuses the checkbox. */ exitEditMode: function () { this.$el.find("input[type=checkbox]").blur(); },   /** Process keyboard navigation. */ onKeydown: function (e) { var command = new Backgrid.Command(e); if (command.passThru()) return true; // skip ahead to `change` if (command.cancel()) { e.stopPropagation(); this.$el.find("input[type=checkbox]").blur(); } else if (command.save() || command.moveLeft() || command.moveRight() || command.moveUp() || command.moveDown()) { e.preventDefault(); e.stopPropagation(); this.model.trigger("backgrid:edited", this.model, this.column, command); } },   /** When the checkbox's value changes, this method will trigger a Backbone `backgrid:selected` event with a reference of the model and the checkbox's `checked` value. */ onChange: function () { var checked = this.$el.find("input[type=checkbox]").prop("checked"); this.$el.parent().toggleClass("selected", checked); this.model.trigger("backgrid:selected", this.model, checked); },   /** Renders a checkbox in a table cell. */ render: function () { this.$el.empty().append('<input tabindex="-1" type="checkbox" />'); this.delegateEvents(); return this; }   });   /** Renders a checkbox to select all rows on the current page.   @class Backgrid.Extension.SelectAllHeaderCell @extends Backgrid.Extension.SelectRowCell */ var SelectAllHeaderCell = Backgrid.Extension.SelectAllHeaderCell = SelectRowCell.extend({   /** @property */ className: "select-all-header-cell",   /** @property */ tagName: "th",   /** Initializer. When this cell's checkbox is checked, a Backbone `backgrid:select` event will be triggered for each model for the current page in the underlying collection. If a `SelectRowCell` instance exists for the rows representing the models, they will check themselves. If any of the SelectRowCell instances trigger a Backbone `backgrid:selected` event with a `false` value, this cell will uncheck its checkbox. In the event of a Backbone `backgrid:refresh` event, which is triggered when the body refreshes its rows, which can happen under a number of conditions such as paging or the columns were reset, this cell will still remember the previously selected models and trigger a Backbone `backgrid:select` event on them such that the SelectRowCells can recheck themselves upon refreshing.   @param {Object} options @param {Backgrid.Column} options.column @param {Backbone.Collection} options.collection */ initialize: function (options) {   this.column = options.column; if (!(this.column instanceof Backgrid.Column)) { this.column = new Backgrid.Column(this.column); }   var collection = this.collection; var selectedModels = this.selectedModels = {}; this.listenTo(collection.fullCollection || collection, "backgrid:selected", function (model, selected) { if (selected) selectedModels[model.id || model.cid] = 1; else { delete selectedModels[model.id || model.cid]; this.$el.find("input[type=checkbox]").prop("checked", false); } });   this.listenTo(collection.fullCollection || collection, "remove", function (model) { delete selectedModels[model.id || model.cid]; });   this.listenTo(collection, "backgrid:refresh", function () { var checked = this.$el.find("input[type=checkbox]").prop("checked"); for (var i = 0; i < collection.length; i++) { var model = collection.at(i); if (checked || selectedModels[model.id || model.cid]) { model.trigger("backgrid:select", model, true); } } });   var column = this.column, $el = this.$el; this.listenTo(column, "change:renderable", function (column, renderable) { $el.toggleClass("renderable", renderable); });   Eif (Backgrid.callByNeed(column.renderable(), column, collection)) $el.addClass("renderable"); },   /** Propagates the checked value of this checkbox to all the models of the underlying collection by triggering a Backbone `backgrid:select` event on the models on the current page, passing each model and the current `checked` value of the checkbox in each event.   A `backgrid:selected` event will also be triggered with the current `checked` value on all the models regardless of whether they are on the current page.   This method triggers a 'backgrid:select-all' event on the collection afterwards. */ onChange: function () { var checked = this.$el.find("input[type=checkbox]").prop("checked");   var collection = this.collection; collection.each(function (model) { model.trigger("backgrid:select", model, checked); });   if (collection.fullCollection) { collection.fullCollection.each(function (model) { if (!collection.get(model.cid)) { model.trigger("backgrid:selected", model, checked); } }); }   this.collection.trigger("backgrid:select-all", this.collection, checked); }   });   /** Convenient method to retrieve a list of selected models. This method only exists when the `SelectAll` extension has been included. Selected models are retained across pagination.   @member Backgrid.Grid @return {Array.<Backbone.Model>} */ Backgrid.Grid.prototype.getSelectedModels = function () { var selectAllHeaderCell; var headerCells = this.header.row.cells; for (var i = 0, l = headerCells.length; i < l; i++) { var headerCell = headerCells[i]; Eif (headerCell instanceof SelectAllHeaderCell) { selectAllHeaderCell = headerCell; break; } }   var result = []; Eif (selectAllHeaderCell) { var selectedModels = selectAllHeaderCell.selectedModels; var collection = this.collection.fullCollection || this.collection; for (var modelId in selectedModels) { result.push(collection.get(modelId)); } }   return result; };   /** Convenient method to deselect the selected models. This method is only available when the `SelectAll` extension has been included.   @member Backgrid.Grid */ Backgrid.Grid.prototype.clearSelectedModels = function () { var selectedModels = this.getSelectedModels(); for (var i = 0, l = selectedModels.length; i < l; i++) { var model = selectedModels[i]; model.trigger("backgrid:select", model, false); } };   }));  </pre></td></tr> </table></pre> </div> <div class="footer"> <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Tue Jan 21 2014 22:00:25 GMT+0800 (HKT)</div> </div> <script src="../prettify.js"></script> <script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script> <script> YUI().use('datatable', function (Y) { var formatters = { pct: function (o) { o.className += o.record.get('classes')[o.column.key]; try { return o.value.toFixed(2) + '%'; } catch (ex) { return o.value + '%'; } }, html: function (o) { o.className += o.record.get('classes')[o.column.key]; return o.record.get(o.column.key + '_html'); } }, defaultFormatter = function (o) { o.className += o.record.get('classes')[o.column.key]; return o.value; }; function getColumns(theadNode) { var colNodes = theadNode.all('tr th'), cols = [], col; colNodes.each(function (colNode) { col = { key: colNode.getAttribute('data-col'), label: colNode.get('innerHTML') || ' ', sortable: !colNode.getAttribute('data-nosort'), className: colNode.getAttribute('class'), type: colNode.getAttribute('data-type'), allowHTML: colNode.getAttribute('data-html') === 'true' || colNode.getAttribute('data-fmt') === 'html' }; col.formatter = formatters[colNode.getAttribute('data-fmt')] || defaultFormatter; cols.push(col); }); return cols; } function getRowData(trNode, cols) { var tdNodes = trNode.all('td'), i, row = { classes: {} }, node, name; for (i = 0; i < cols.length; i += 1) { name = cols[i].key; node = tdNodes.item(i); row[name] = node.getAttribute('data-value') || node.get('innerHTML'); row[name + '_html'] = node.get('innerHTML'); row.classes[name] = node.getAttribute('class'); //Y.log('Name: ' + name + '; Value: ' + row[name]); if (cols[i].type === 'number') { row[name] = row[name] * 1; } } //Y.log(row); return row; } function getData(tbodyNode, cols) { var data = []; tbodyNode.all('tr').each(function (trNode) { data.push(getRowData(trNode, cols)); }); return data; } function replaceTable(node) { if (!node) { return; } var cols = getColumns(node.one('thead')), data = getData(node.one('tbody'), cols), table, parent = node.get('parentNode'); table = new Y.DataTable({ columns: cols, data: data, sortBy: 'file' }); parent.set('innerHTML', ''); table.render(parent); } Y.on('domready', function () { replaceTable(Y.one('div.coverage-summary table')); if (typeof prettyPrint === 'function') { prettyPrint(); } }); }); </script> </body> </html>