1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/base/content/newtab/grid.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,173 @@
1.4 +#ifdef 0
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this file,
1.7 + * You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +#endif
1.9 +
1.10 +/**
1.11 + * This singleton represents the grid that contains all sites.
1.12 + */
1.13 +let gGrid = {
1.14 + /**
1.15 + * The DOM node of the grid.
1.16 + */
1.17 + _node: null,
1.18 + get node() this._node,
1.19 +
1.20 + /**
1.21 + * The cached DOM fragment for sites.
1.22 + */
1.23 + _siteFragment: null,
1.24 +
1.25 + /**
1.26 + * All cells contained in the grid.
1.27 + */
1.28 + _cells: null,
1.29 + get cells() this._cells,
1.30 +
1.31 + /**
1.32 + * All sites contained in the grid's cells. Sites may be empty.
1.33 + */
1.34 + get sites() [cell.site for each (cell in this.cells)],
1.35 +
1.36 + // Tells whether the grid has already been initialized.
1.37 + get ready() !!this._node,
1.38 +
1.39 + /**
1.40 + * Initializes the grid.
1.41 + * @param aSelector The query selector of the grid.
1.42 + */
1.43 + init: function Grid_init() {
1.44 + this._node = document.getElementById("newtab-grid");
1.45 + this._createSiteFragment();
1.46 + this._render();
1.47 + },
1.48 +
1.49 + /**
1.50 + * Creates a new site in the grid.
1.51 + * @param aLink The new site's link.
1.52 + * @param aCell The cell that will contain the new site.
1.53 + * @return The newly created site.
1.54 + */
1.55 + createSite: function Grid_createSite(aLink, aCell) {
1.56 + let node = aCell.node;
1.57 + node.appendChild(this._siteFragment.cloneNode(true));
1.58 + return new Site(node.firstElementChild, aLink);
1.59 + },
1.60 +
1.61 + /**
1.62 + * Refreshes the grid and re-creates all sites.
1.63 + */
1.64 + refresh: function Grid_refresh() {
1.65 + // Remove all sites.
1.66 + this.cells.forEach(function (cell) {
1.67 + let node = cell.node;
1.68 + let child = node.firstElementChild;
1.69 +
1.70 + if (child)
1.71 + node.removeChild(child);
1.72 + }, this);
1.73 +
1.74 + // Render the grid again.
1.75 + this._render();
1.76 + },
1.77 +
1.78 + /**
1.79 + * Locks the grid to block all pointer events.
1.80 + */
1.81 + lock: function Grid_lock() {
1.82 + this.node.setAttribute("locked", "true");
1.83 + },
1.84 +
1.85 + /**
1.86 + * Unlocks the grid to allow all pointer events.
1.87 + */
1.88 + unlock: function Grid_unlock() {
1.89 + this.node.removeAttribute("locked");
1.90 + },
1.91 +
1.92 + /**
1.93 + * Creates the newtab grid.
1.94 + */
1.95 + _renderGrid: function Grid_renderGrid() {
1.96 + let row = document.createElementNS(HTML_NAMESPACE, "div");
1.97 + let cell = document.createElementNS(HTML_NAMESPACE, "div");
1.98 + row.classList.add("newtab-row");
1.99 + cell.classList.add("newtab-cell");
1.100 +
1.101 + // Clear the grid
1.102 + this._node.innerHTML = "";
1.103 +
1.104 + // Creates the structure of one row
1.105 + for (let i = 0; i < gGridPrefs.gridColumns; i++) {
1.106 + row.appendChild(cell.cloneNode(true));
1.107 + }
1.108 + // Creates the grid
1.109 + for (let j = 0; j < gGridPrefs.gridRows; j++) {
1.110 + this._node.appendChild(row.cloneNode(true));
1.111 + }
1.112 +
1.113 + // (Re-)initialize all cells.
1.114 + let cellElements = this.node.querySelectorAll(".newtab-cell");
1.115 + this._cells = [new Cell(this, cell) for (cell of cellElements)];
1.116 + },
1.117 +
1.118 + /**
1.119 + * Creates the DOM fragment that is re-used when creating sites.
1.120 + */
1.121 + _createSiteFragment: function Grid_createSiteFragment() {
1.122 + let site = document.createElementNS(HTML_NAMESPACE, "div");
1.123 + site.classList.add("newtab-site");
1.124 + site.setAttribute("draggable", "true");
1.125 +
1.126 + // Create the site's inner HTML code.
1.127 + site.innerHTML =
1.128 + '<a class="newtab-link">' +
1.129 + ' <span class="newtab-thumbnail"/>' +
1.130 + ' <span class="newtab-title"/>' +
1.131 + '</a>' +
1.132 + '<input type="button" title="' + newTabString("pin") + '"' +
1.133 + ' class="newtab-control newtab-control-pin"/>' +
1.134 + '<input type="button" title="' + newTabString("block") + '"' +
1.135 + ' class="newtab-control newtab-control-block"/>' +
1.136 + '<input type="button" title="' + newTabString("sponsored") + '"' +
1.137 + ' class="newtab-control newtab-control-sponsored"/>';
1.138 +
1.139 + this._siteFragment = document.createDocumentFragment();
1.140 + this._siteFragment.appendChild(site);
1.141 + },
1.142 +
1.143 + /**
1.144 + * Renders the sites, creates all sites and puts them into their cells.
1.145 + */
1.146 + _renderSites: function Grid_renderSites() {
1.147 + let cells = this.cells;
1.148 + // Put sites into the cells.
1.149 + let links = gLinks.getLinks();
1.150 + let length = Math.min(links.length, cells.length);
1.151 +
1.152 + for (let i = 0; i < length; i++) {
1.153 + if (links[i])
1.154 + this.createSite(links[i], cells[i]);
1.155 + }
1.156 + },
1.157 +
1.158 + /**
1.159 + * Renders the grid.
1.160 + */
1.161 + _render: function Grid_render() {
1.162 + if (this._shouldRenderGrid()) {
1.163 + this._renderGrid();
1.164 + }
1.165 +
1.166 + this._renderSites();
1.167 + },
1.168 +
1.169 + _shouldRenderGrid : function Grid_shouldRenderGrid() {
1.170 + let rowsLength = this._node.querySelectorAll(".newtab-row").length;
1.171 + let cellsLength = this._node.querySelectorAll(".newtab-cell").length;
1.172 +
1.173 + return (rowsLength != gGridPrefs.gridRows ||
1.174 + cellsLength != (gGridPrefs.gridRows * gGridPrefs.gridColumns));
1.175 + }
1.176 +};
