Wed, 31 Dec 2014 06:09:35 +0100
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
michael@0 | 1 | #ifdef 0 |
michael@0 | 2 | /* This Source Code Form is subject to the terms of the Mozilla Public |
michael@0 | 3 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, |
michael@0 | 4 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ |
michael@0 | 5 | #endif |
michael@0 | 6 | |
michael@0 | 7 | /** |
michael@0 | 8 | * This singleton represents the grid that contains all sites. |
michael@0 | 9 | */ |
michael@0 | 10 | let gGrid = { |
michael@0 | 11 | /** |
michael@0 | 12 | * The DOM node of the grid. |
michael@0 | 13 | */ |
michael@0 | 14 | _node: null, |
michael@0 | 15 | get node() this._node, |
michael@0 | 16 | |
michael@0 | 17 | /** |
michael@0 | 18 | * The cached DOM fragment for sites. |
michael@0 | 19 | */ |
michael@0 | 20 | _siteFragment: null, |
michael@0 | 21 | |
michael@0 | 22 | /** |
michael@0 | 23 | * All cells contained in the grid. |
michael@0 | 24 | */ |
michael@0 | 25 | _cells: null, |
michael@0 | 26 | get cells() this._cells, |
michael@0 | 27 | |
michael@0 | 28 | /** |
michael@0 | 29 | * All sites contained in the grid's cells. Sites may be empty. |
michael@0 | 30 | */ |
michael@0 | 31 | get sites() [cell.site for each (cell in this.cells)], |
michael@0 | 32 | |
michael@0 | 33 | // Tells whether the grid has already been initialized. |
michael@0 | 34 | get ready() !!this._node, |
michael@0 | 35 | |
michael@0 | 36 | /** |
michael@0 | 37 | * Initializes the grid. |
michael@0 | 38 | * @param aSelector The query selector of the grid. |
michael@0 | 39 | */ |
michael@0 | 40 | init: function Grid_init() { |
michael@0 | 41 | this._node = document.getElementById("newtab-grid"); |
michael@0 | 42 | this._createSiteFragment(); |
michael@0 | 43 | this._render(); |
michael@0 | 44 | }, |
michael@0 | 45 | |
michael@0 | 46 | /** |
michael@0 | 47 | * Creates a new site in the grid. |
michael@0 | 48 | * @param aLink The new site's link. |
michael@0 | 49 | * @param aCell The cell that will contain the new site. |
michael@0 | 50 | * @return The newly created site. |
michael@0 | 51 | */ |
michael@0 | 52 | createSite: function Grid_createSite(aLink, aCell) { |
michael@0 | 53 | let node = aCell.node; |
michael@0 | 54 | node.appendChild(this._siteFragment.cloneNode(true)); |
michael@0 | 55 | return new Site(node.firstElementChild, aLink); |
michael@0 | 56 | }, |
michael@0 | 57 | |
michael@0 | 58 | /** |
michael@0 | 59 | * Refreshes the grid and re-creates all sites. |
michael@0 | 60 | */ |
michael@0 | 61 | refresh: function Grid_refresh() { |
michael@0 | 62 | // Remove all sites. |
michael@0 | 63 | this.cells.forEach(function (cell) { |
michael@0 | 64 | let node = cell.node; |
michael@0 | 65 | let child = node.firstElementChild; |
michael@0 | 66 | |
michael@0 | 67 | if (child) |
michael@0 | 68 | node.removeChild(child); |
michael@0 | 69 | }, this); |
michael@0 | 70 | |
michael@0 | 71 | // Render the grid again. |
michael@0 | 72 | this._render(); |
michael@0 | 73 | }, |
michael@0 | 74 | |
michael@0 | 75 | /** |
michael@0 | 76 | * Locks the grid to block all pointer events. |
michael@0 | 77 | */ |
michael@0 | 78 | lock: function Grid_lock() { |
michael@0 | 79 | this.node.setAttribute("locked", "true"); |
michael@0 | 80 | }, |
michael@0 | 81 | |
michael@0 | 82 | /** |
michael@0 | 83 | * Unlocks the grid to allow all pointer events. |
michael@0 | 84 | */ |
michael@0 | 85 | unlock: function Grid_unlock() { |
michael@0 | 86 | this.node.removeAttribute("locked"); |
michael@0 | 87 | }, |
michael@0 | 88 | |
michael@0 | 89 | /** |
michael@0 | 90 | * Creates the newtab grid. |
michael@0 | 91 | */ |
michael@0 | 92 | _renderGrid: function Grid_renderGrid() { |
michael@0 | 93 | let row = document.createElementNS(HTML_NAMESPACE, "div"); |
michael@0 | 94 | let cell = document.createElementNS(HTML_NAMESPACE, "div"); |
michael@0 | 95 | row.classList.add("newtab-row"); |
michael@0 | 96 | cell.classList.add("newtab-cell"); |
michael@0 | 97 | |
michael@0 | 98 | // Clear the grid |
michael@0 | 99 | this._node.innerHTML = ""; |
michael@0 | 100 | |
michael@0 | 101 | // Creates the structure of one row |
michael@0 | 102 | for (let i = 0; i < gGridPrefs.gridColumns; i++) { |
michael@0 | 103 | row.appendChild(cell.cloneNode(true)); |
michael@0 | 104 | } |
michael@0 | 105 | // Creates the grid |
michael@0 | 106 | for (let j = 0; j < gGridPrefs.gridRows; j++) { |
michael@0 | 107 | this._node.appendChild(row.cloneNode(true)); |
michael@0 | 108 | } |
michael@0 | 109 | |
michael@0 | 110 | // (Re-)initialize all cells. |
michael@0 | 111 | let cellElements = this.node.querySelectorAll(".newtab-cell"); |
michael@0 | 112 | this._cells = [new Cell(this, cell) for (cell of cellElements)]; |
michael@0 | 113 | }, |
michael@0 | 114 | |
michael@0 | 115 | /** |
michael@0 | 116 | * Creates the DOM fragment that is re-used when creating sites. |
michael@0 | 117 | */ |
michael@0 | 118 | _createSiteFragment: function Grid_createSiteFragment() { |
michael@0 | 119 | let site = document.createElementNS(HTML_NAMESPACE, "div"); |
michael@0 | 120 | site.classList.add("newtab-site"); |
michael@0 | 121 | site.setAttribute("draggable", "true"); |
michael@0 | 122 | |
michael@0 | 123 | // Create the site's inner HTML code. |
michael@0 | 124 | site.innerHTML = |
michael@0 | 125 | '<a class="newtab-link">' + |
michael@0 | 126 | ' <span class="newtab-thumbnail"/>' + |
michael@0 | 127 | ' <span class="newtab-title"/>' + |
michael@0 | 128 | '</a>' + |
michael@0 | 129 | '<input type="button" title="' + newTabString("pin") + '"' + |
michael@0 | 130 | ' class="newtab-control newtab-control-pin"/>' + |
michael@0 | 131 | '<input type="button" title="' + newTabString("block") + '"' + |
michael@0 | 132 | ' class="newtab-control newtab-control-block"/>' + |
michael@0 | 133 | '<input type="button" title="' + newTabString("sponsored") + '"' + |
michael@0 | 134 | ' class="newtab-control newtab-control-sponsored"/>'; |
michael@0 | 135 | |
michael@0 | 136 | this._siteFragment = document.createDocumentFragment(); |
michael@0 | 137 | this._siteFragment.appendChild(site); |
michael@0 | 138 | }, |
michael@0 | 139 | |
michael@0 | 140 | /** |
michael@0 | 141 | * Renders the sites, creates all sites and puts them into their cells. |
michael@0 | 142 | */ |
michael@0 | 143 | _renderSites: function Grid_renderSites() { |
michael@0 | 144 | let cells = this.cells; |
michael@0 | 145 | // Put sites into the cells. |
michael@0 | 146 | let links = gLinks.getLinks(); |
michael@0 | 147 | let length = Math.min(links.length, cells.length); |
michael@0 | 148 | |
michael@0 | 149 | for (let i = 0; i < length; i++) { |
michael@0 | 150 | if (links[i]) |
michael@0 | 151 | this.createSite(links[i], cells[i]); |
michael@0 | 152 | } |
michael@0 | 153 | }, |
michael@0 | 154 | |
michael@0 | 155 | /** |
michael@0 | 156 | * Renders the grid. |
michael@0 | 157 | */ |
michael@0 | 158 | _render: function Grid_render() { |
michael@0 | 159 | if (this._shouldRenderGrid()) { |
michael@0 | 160 | this._renderGrid(); |
michael@0 | 161 | } |
michael@0 | 162 | |
michael@0 | 163 | this._renderSites(); |
michael@0 | 164 | }, |
michael@0 | 165 | |
michael@0 | 166 | _shouldRenderGrid : function Grid_shouldRenderGrid() { |
michael@0 | 167 | let rowsLength = this._node.querySelectorAll(".newtab-row").length; |
michael@0 | 168 | let cellsLength = this._node.querySelectorAll(".newtab-cell").length; |
michael@0 | 169 | |
michael@0 | 170 | return (rowsLength != gGridPrefs.gridRows || |
michael@0 | 171 | cellsLength != (gGridPrefs.gridRows * gGridPrefs.gridColumns)); |
michael@0 | 172 | } |
michael@0 | 173 | }; |