| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview PageListView implementation. | 6 * @fileoverview PageListView implementation. |
| 7 * PageListView manages page list, dot list, switcher buttons and handles apps | 7 * PageListView manages page list, dot list, switcher buttons and handles apps |
| 8 * pages callbacks from backend. | 8 * pages callbacks from backend. |
| 9 * | 9 * |
| 10 * Note that you need to have AppLauncherHandler in your WebUI to use this code. | 10 * Note that you need to have AppLauncherHandler in your WebUI to use this code. |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 42 var AppInfo; | 42 var AppInfo; |
| 43 | 43 |
| 44 cr.define('ntp', function() { | 44 cr.define('ntp', function() { |
| 45 'use strict'; | 45 'use strict'; |
| 46 | 46 |
| 47 /** | 47 /** |
| 48 * Creates a PageListView object. | 48 * Creates a PageListView object. |
| 49 * @constructor | 49 * @constructor |
| 50 * @extends {Object} | 50 * @extends {Object} |
| 51 */ | 51 */ |
| 52 function PageListView() { | 52 function PageListView() {} |
| 53 } | |
| 54 | 53 |
| 55 PageListView.prototype = { | 54 PageListView.prototype = { |
| 56 /** | 55 /** |
| 57 * The CardSlider object to use for changing app pages. | 56 * The CardSlider object to use for changing app pages. |
| 58 * @type {cr.ui.CardSlider|undefined} | 57 * @type {cr.ui.CardSlider|undefined} |
| 59 */ | 58 */ |
| 60 cardSlider: undefined, | 59 cardSlider: undefined, |
| 61 | 60 |
| 62 /** | 61 /** |
| 63 * The frame div for this.cardSlider. | 62 * The frame div for this.cardSlider. |
| (...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 131 * @param {!Element} dotList An UL element to host nav dots. Each dot | 130 * @param {!Element} dotList An UL element to host nav dots. Each dot |
| 132 * represents a page. | 131 * represents a page. |
| 133 * @param {!Element} cardSliderFrame The card slider frame that hosts | 132 * @param {!Element} cardSliderFrame The card slider frame that hosts |
| 134 * pageList and switcher buttons. | 133 * pageList and switcher buttons. |
| 135 * @param {!Element|undefined} opt_trash Optional trash element. | 134 * @param {!Element|undefined} opt_trash Optional trash element. |
| 136 * @param {!ntp.PageSwitcher|undefined} opt_pageSwitcherStart Optional start | 135 * @param {!ntp.PageSwitcher|undefined} opt_pageSwitcherStart Optional start |
| 137 * page switcher button. | 136 * page switcher button. |
| 138 * @param {!ntp.PageSwitcher|undefined} opt_pageSwitcherEnd Optional end | 137 * @param {!ntp.PageSwitcher|undefined} opt_pageSwitcherEnd Optional end |
| 139 * page switcher button. | 138 * page switcher button. |
| 140 */ | 139 */ |
| 141 initialize: function(pageList, dotList, cardSliderFrame, opt_trash, | 140 initialize: function( |
| 142 opt_pageSwitcherStart, opt_pageSwitcherEnd) { | 141 pageList, dotList, cardSliderFrame, opt_trash, opt_pageSwitcherStart, |
| 142 opt_pageSwitcherEnd) { |
| 143 this.pageList = pageList; | 143 this.pageList = pageList; |
| 144 | 144 |
| 145 this.dotList = dotList; | 145 this.dotList = dotList; |
| 146 cr.ui.decorate(this.dotList, ntp.DotList); | 146 cr.ui.decorate(this.dotList, ntp.DotList); |
| 147 | 147 |
| 148 this.trash = opt_trash; | 148 this.trash = opt_trash; |
| 149 if (this.trash) | 149 if (this.trash) |
| 150 new ntp.Trash(this.trash); | 150 new ntp.Trash(this.trash); |
| 151 | 151 |
| 152 this.pageSwitcherStart = opt_pageSwitcherStart; | 152 this.pageSwitcherStart = opt_pageSwitcherStart; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 167 // be invoked at some point after this function returns. | 167 // be invoked at some point after this function returns. |
| 168 chrome.send('getApps'); | 168 chrome.send('getApps'); |
| 169 | 169 |
| 170 document.addEventListener('keydown', this.onDocKeyDown_.bind(this)); | 170 document.addEventListener('keydown', this.onDocKeyDown_.bind(this)); |
| 171 | 171 |
| 172 this.tilePages = this.pageList.getElementsByClassName('tile-page'); | 172 this.tilePages = this.pageList.getElementsByClassName('tile-page'); |
| 173 this.appsPages = this.pageList.getElementsByClassName('apps-page'); | 173 this.appsPages = this.pageList.getElementsByClassName('apps-page'); |
| 174 | 174 |
| 175 // Initialize the cardSlider without any cards at the moment. | 175 // Initialize the cardSlider without any cards at the moment. |
| 176 this.sliderFrame = cardSliderFrame; | 176 this.sliderFrame = cardSliderFrame; |
| 177 this.cardSlider = new cr.ui.CardSlider(this.sliderFrame, this.pageList, | 177 this.cardSlider = new cr.ui.CardSlider( |
| 178 this.sliderFrame.offsetWidth); | 178 this.sliderFrame, this.pageList, this.sliderFrame.offsetWidth); |
| 179 | 179 |
| 180 // Prevent touch events from triggering any sort of native scrolling if | 180 // Prevent touch events from triggering any sort of native scrolling if |
| 181 // there are multiple cards in the slider frame. | 181 // there are multiple cards in the slider frame. |
| 182 var cardSlider = this.cardSlider; | 182 var cardSlider = this.cardSlider; |
| 183 cardSliderFrame.addEventListener('touchmove', function(e) { | 183 cardSliderFrame.addEventListener('touchmove', function(e) { |
| 184 if (cardSlider.cardCount <= 1) | 184 if (cardSlider.cardCount <= 1) |
| 185 return; | 185 return; |
| 186 e.preventDefault(); | 186 e.preventDefault(); |
| 187 }, true); | 187 }, true); |
| 188 | 188 |
| 189 // Handle mousewheel events anywhere in the card slider, so that wheel | 189 // Handle mousewheel events anywhere in the card slider, so that wheel |
| 190 // events on the page switchers will still scroll the page. | 190 // events on the page switchers will still scroll the page. |
| 191 // This listener must be added before the card slider is initialized, | 191 // This listener must be added before the card slider is initialized, |
| 192 // because it needs to be called before the card slider's handler. | 192 // because it needs to be called before the card slider's handler. |
| 193 cardSliderFrame.addEventListener('mousewheel', function(e) { | 193 cardSliderFrame.addEventListener('mousewheel', function(e) { |
| 194 if (cardSlider.currentCardValue.handleMouseWheel(e)) { | 194 if (cardSlider.currentCardValue.handleMouseWheel(e)) { |
| 195 e.preventDefault(); // Prevent default scroll behavior. | 195 e.preventDefault(); // Prevent default scroll behavior. |
| 196 e.stopImmediatePropagation(); // Prevent horizontal card flipping. | 196 e.stopImmediatePropagation(); // Prevent horizontal card flipping. |
| 197 } | 197 } |
| 198 }); | 198 }); |
| 199 | 199 |
| 200 this.cardSlider.initialize( | 200 this.cardSlider.initialize( |
| 201 loadTimeData.getBoolean('isSwipeTrackingFromScrollEventsEnabled')); | 201 loadTimeData.getBoolean('isSwipeTrackingFromScrollEventsEnabled')); |
| 202 | 202 |
| 203 // Handle events from the card slider. | 203 // Handle events from the card slider. |
| 204 this.pageList.addEventListener('cardSlider:card_changed', | 204 this.pageList.addEventListener( |
| 205 this.onCardChanged_.bind(this)); | 205 'cardSlider:card_changed', this.onCardChanged_.bind(this)); |
| 206 this.pageList.addEventListener('cardSlider:card_added', | 206 this.pageList.addEventListener( |
| 207 this.onCardAdded_.bind(this)); | 207 'cardSlider:card_added', this.onCardAdded_.bind(this)); |
| 208 this.pageList.addEventListener('cardSlider:card_removed', | 208 this.pageList.addEventListener( |
| 209 this.onCardRemoved_.bind(this)); | 209 'cardSlider:card_removed', this.onCardRemoved_.bind(this)); |
| 210 | 210 |
| 211 // Ensure the slider is resized appropriately with the window. | 211 // Ensure the slider is resized appropriately with the window. |
| 212 window.addEventListener('resize', this.onWindowResize_.bind(this)); | 212 window.addEventListener('resize', this.onWindowResize_.bind(this)); |
| 213 | 213 |
| 214 // Update apps when online state changes. | 214 // Update apps when online state changes. |
| 215 window.addEventListener('online', | 215 window.addEventListener( |
| 216 this.updateOfflineEnabledApps_.bind(this)); | 216 'online', this.updateOfflineEnabledApps_.bind(this)); |
| 217 window.addEventListener('offline', | 217 window.addEventListener( |
| 218 this.updateOfflineEnabledApps_.bind(this)); | 218 'offline', this.updateOfflineEnabledApps_.bind(this)); |
| 219 }, | 219 }, |
| 220 | 220 |
| 221 /** | 221 /** |
| 222 * Appends a tile page. | 222 * Appends a tile page. |
| 223 * | 223 * |
| 224 * @param {!ntp.TilePage} page The page element. | 224 * @param {!ntp.TilePage} page The page element. |
| 225 * @param {string} title The title of the tile page. | 225 * @param {string} title The title of the tile page. |
| 226 * @param {boolean} titleIsEditable If true, the title can be changed. | 226 * @param {boolean} titleIsEditable If true, the title can be changed. |
| 227 * @param {ntp.TilePage=} opt_refNode Optional reference node to insert in | 227 * @param {ntp.TilePage=} opt_refNode Optional reference node to insert in |
| 228 * front of. | 228 * front of. |
| 229 * When opt_refNode is falsey, |page| will just be appended to the end of | 229 * When opt_refNode is falsey, |page| will just be appended to the end of |
| 230 * the page list. | 230 * the page list. |
| 231 */ | 231 */ |
| 232 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { | 232 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { |
| 233 if (opt_refNode) { | 233 if (opt_refNode) { |
| 234 var refIndex = this.getTilePageIndex(opt_refNode); | 234 var refIndex = this.getTilePageIndex(opt_refNode); |
| 235 this.cardSlider.addCardAtIndex(page, refIndex); | 235 this.cardSlider.addCardAtIndex(page, refIndex); |
| 236 } else { | 236 } else { |
| 237 this.cardSlider.appendCard(page); | 237 this.cardSlider.appendCard(page); |
| 238 } | 238 } |
| 239 | 239 |
| 240 // If we're appending an AppsPage and it's a temporary page, animate it. | 240 // If we're appending an AppsPage and it's a temporary page, animate it. |
| 241 var animate = page instanceof ntp.AppsPage && | 241 var animate = |
| 242 page.classList.contains('temporary'); | 242 page instanceof ntp.AppsPage && page.classList.contains('temporary'); |
| 243 // Make a deep copy of the dot template to add a new one. | 243 // Make a deep copy of the dot template to add a new one. |
| 244 var newDot = new ntp.NavDot(page, title, titleIsEditable, animate); | 244 var newDot = new ntp.NavDot(page, title, titleIsEditable, animate); |
| 245 page.navigationDot = newDot; | 245 page.navigationDot = newDot; |
| 246 this.dotList.insertBefore(newDot, | 246 this.dotList.insertBefore( |
| 247 opt_refNode ? opt_refNode.navigationDot : null); | 247 newDot, opt_refNode ? opt_refNode.navigationDot : null); |
| 248 // Set a tab index on the first dot. | 248 // Set a tab index on the first dot. |
| 249 if (this.dotList.dots.length == 1) | 249 if (this.dotList.dots.length == 1) |
| 250 newDot.tabIndex = 3; | 250 newDot.tabIndex = 3; |
| 251 | 251 |
| 252 this.eventTracker.add(page, 'pagelayout', this.onPageLayout_.bind(this)); | 252 this.eventTracker.add(page, 'pagelayout', this.onPageLayout_.bind(this)); |
| 253 }, | 253 }, |
| 254 | 254 |
| 255 /** | 255 /** |
| 256 * Called by chrome when an app has changed positions. | 256 * Called by chrome when an app has changed positions. |
| 257 * @param {AppInfo} appData The data for the app. This contains page and | 257 * @param {AppInfo} appData The data for the app. This contains page and |
| 258 * position indices. | 258 * position indices. |
| 259 */ | 259 */ |
| 260 appMoved: function(appData) { | 260 appMoved: function(appData) { |
| 261 assert(loadTimeData.getBoolean('showApps')); | 261 assert(loadTimeData.getBoolean('showApps')); |
| 262 | 262 |
| 263 var app = /** @type {ntp.App} */($(appData.id)); | 263 var app = /** @type {ntp.App} */ ($(appData.id)); |
| 264 assert(app, 'trying to move an app that doesn\'t exist'); | 264 assert(app, 'trying to move an app that doesn\'t exist'); |
| 265 app.remove(false); | 265 app.remove(false); |
| 266 | 266 |
| 267 this.appsPages[appData.page_index].insertApp(appData, false); | 267 this.appsPages[appData.page_index].insertApp(appData, false); |
| 268 }, | 268 }, |
| 269 | 269 |
| 270 /** | 270 /** |
| 271 * Called by chrome when an existing app has been disabled or | 271 * Called by chrome when an existing app has been disabled or |
| 272 * removed/uninstalled from chrome. | 272 * removed/uninstalled from chrome. |
| 273 * @param {AppInfo} appData A data structure full of relevant information | 273 * @param {AppInfo} appData A data structure full of relevant information |
| 274 * for the app. | 274 * for the app. |
| 275 * @param {boolean} isUninstall True if the app is being uninstalled; | 275 * @param {boolean} isUninstall True if the app is being uninstalled; |
| 276 * false if the app is being disabled. | 276 * false if the app is being disabled. |
| 277 * @param {boolean} fromPage True if the removal was from the current page. | 277 * @param {boolean} fromPage True if the removal was from the current page. |
| 278 */ | 278 */ |
| 279 appRemoved: function(appData, isUninstall, fromPage) { | 279 appRemoved: function(appData, isUninstall, fromPage) { |
| 280 assert(loadTimeData.getBoolean('showApps')); | 280 assert(loadTimeData.getBoolean('showApps')); |
| 281 | 281 |
| 282 var app = /** @type {ntp.App} */($(appData.id)); | 282 var app = /** @type {ntp.App} */ ($(appData.id)); |
| 283 assert(app, 'trying to remove an app that doesn\'t exist'); | 283 assert(app, 'trying to remove an app that doesn\'t exist'); |
| 284 | 284 |
| 285 if (!isUninstall) | 285 if (!isUninstall) |
| 286 app.replaceAppData(appData); | 286 app.replaceAppData(appData); |
| 287 else | 287 else |
| 288 app.remove(!!fromPage); | 288 app.remove(!!fromPage); |
| 289 }, | 289 }, |
| 290 | 290 |
| 291 /** | 291 /** |
| 292 * @return {boolean} If the page is still starting up. | 292 * @return {boolean} If the page is still starting up. |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 343 function stringListIsEmpty(list) { | 343 function stringListIsEmpty(list) { |
| 344 for (var i = 0; i < list.length; i++) { | 344 for (var i = 0; i < list.length; i++) { |
| 345 if (list[i]) | 345 if (list[i]) |
| 346 return false; | 346 return false; |
| 347 } | 347 } |
| 348 return true; | 348 return true; |
| 349 } | 349 } |
| 350 | 350 |
| 351 // Sort by launch ordinal | 351 // Sort by launch ordinal |
| 352 apps.sort(function(a, b) { | 352 apps.sort(function(a, b) { |
| 353 return a.app_launch_ordinal > b.app_launch_ordinal ? 1 : | 353 return a.app_launch_ordinal > b.app_launch_ordinal ? |
| 354 a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0; | 354 1 : |
| 355 a.app_launch_ordinal < b.app_launch_ordinal ? -1 : 0; |
| 355 }); | 356 }); |
| 356 | 357 |
| 357 // An app to animate (in case it was just installed). | 358 // An app to animate (in case it was just installed). |
| 358 var highlightApp; | 359 var highlightApp; |
| 359 | 360 |
| 360 // If there are any pages after the apps, add new pages before them. | 361 // If there are any pages after the apps, add new pages before them. |
| 361 var lastAppsPage = (this.appsPages.length > 0) ? | 362 var lastAppsPage = (this.appsPages.length > 0) ? |
| 362 this.appsPages[this.appsPages.length - 1] : null; | 363 this.appsPages[this.appsPages.length - 1] : |
| 364 null; |
| 363 var lastAppsPageIndex = (lastAppsPage != null) ? | 365 var lastAppsPageIndex = (lastAppsPage != null) ? |
| 364 Array.prototype.indexOf.call(this.tilePages, lastAppsPage) : -1; | 366 Array.prototype.indexOf.call(this.tilePages, lastAppsPage) : |
| 367 -1; |
| 365 var nextPageAfterApps = lastAppsPageIndex != -1 ? | 368 var nextPageAfterApps = lastAppsPageIndex != -1 ? |
| 366 this.tilePages[lastAppsPageIndex + 1] : null; | 369 this.tilePages[lastAppsPageIndex + 1] : |
| 370 null; |
| 367 | 371 |
| 368 // Add the apps, creating pages as necessary | 372 // Add the apps, creating pages as necessary |
| 369 for (var i = 0; i < apps.length; i++) { | 373 for (var i = 0; i < apps.length; i++) { |
| 370 var app = apps[i]; | 374 var app = apps[i]; |
| 371 var pageIndex = app.page_index || 0; | 375 var pageIndex = app.page_index || 0; |
| 372 while (pageIndex >= this.appsPages.length) { | 376 while (pageIndex >= this.appsPages.length) { |
| 373 var pageName = loadTimeData.getString('appDefaultPageName'); | 377 var pageName = loadTimeData.getString('appDefaultPageName'); |
| 374 if (this.appsPages.length < pageNames.length) | 378 if (this.appsPages.length < pageNames.length) |
| 375 pageName = pageNames[this.appsPages.length]; | 379 pageName = pageNames[this.appsPages.length]; |
| 376 | 380 |
| 377 var origPageCount = this.appsPages.length; | 381 var origPageCount = this.appsPages.length; |
| 378 this.appendTilePage(new ntp.AppsPage(), pageName, true, | 382 this.appendTilePage( |
| 379 nextPageAfterApps); | 383 new ntp.AppsPage(), pageName, true, nextPageAfterApps); |
| 380 // Confirm that appsPages is a live object, updated when a new page is | 384 // Confirm that appsPages is a live object, updated when a new page is |
| 381 // added (otherwise we'd have an infinite loop) | 385 // added (otherwise we'd have an infinite loop) |
| 382 assert(this.appsPages.length == origPageCount + 1, | 386 assert( |
| 383 'expected new page'); | 387 this.appsPages.length == origPageCount + 1, 'expected new page'); |
| 384 } | 388 } |
| 385 | 389 |
| 386 if (app.id == this.highlightAppId) | 390 if (app.id == this.highlightAppId) |
| 387 highlightApp = app; | 391 highlightApp = app; |
| 388 else | 392 else |
| 389 this.appsPages[pageIndex].insertApp(app, false); | 393 this.appsPages[pageIndex].insertApp(app, false); |
| 390 } | 394 } |
| 391 | 395 |
| 392 this.cardSlider.currentCard = prevCurrentCard; | 396 this.cardSlider.currentCard = prevCurrentCard; |
| 393 | 397 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 420 | 424 |
| 421 if (appData.id == this.highlightAppId) { | 425 if (appData.id == this.highlightAppId) { |
| 422 opt_highlight = true; | 426 opt_highlight = true; |
| 423 this.highlightAppId = null; | 427 this.highlightAppId = null; |
| 424 } | 428 } |
| 425 | 429 |
| 426 var pageIndex = appData.page_index || 0; | 430 var pageIndex = appData.page_index || 0; |
| 427 | 431 |
| 428 if (pageIndex >= this.appsPages.length) { | 432 if (pageIndex >= this.appsPages.length) { |
| 429 while (pageIndex >= this.appsPages.length) { | 433 while (pageIndex >= this.appsPages.length) { |
| 430 this.appendTilePage(new ntp.AppsPage(), | 434 this.appendTilePage( |
| 431 loadTimeData.getString('appDefaultPageName'), | 435 new ntp.AppsPage(), loadTimeData.getString('appDefaultPageName'), |
| 432 true); | 436 true); |
| 433 } | 437 } |
| 434 this.updateSliderCards(); | 438 this.updateSliderCards(); |
| 435 } | 439 } |
| 436 | 440 |
| 437 var page = this.appsPages[pageIndex]; | 441 var page = this.appsPages[pageIndex]; |
| 438 var app = $(appData.id); | 442 var app = $(appData.id); |
| 439 if (app) { | 443 if (app) { |
| 440 app.replaceAppData(appData); | 444 app.replaceAppData(appData); |
| 441 } else if (opt_highlight) { | 445 } else if (opt_highlight) { |
| 442 page.insertAndHighlightApp(appData); | 446 page.insertAndHighlightApp(appData); |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 482 updateAppLauncherPromoHiddenState_: function() { | 486 updateAppLauncherPromoHiddenState_: function() { |
| 483 $('app-launcher-promo').hidden = | 487 $('app-launcher-promo').hidden = |
| 484 !loadTimeData.getBoolean('showAppLauncherPromo'); | 488 !loadTimeData.getBoolean('showAppLauncherPromo'); |
| 485 }, | 489 }, |
| 486 | 490 |
| 487 /** | 491 /** |
| 488 * Invoked whenever the pages in apps-page-list have changed so that | 492 * Invoked whenever the pages in apps-page-list have changed so that |
| 489 * the Slider knows about the new elements. | 493 * the Slider knows about the new elements. |
| 490 */ | 494 */ |
| 491 updateSliderCards: function() { | 495 updateSliderCards: function() { |
| 492 var pageNo = Math.max(0, Math.min(this.cardSlider.currentCard, | 496 var pageNo = Math.max( |
| 493 this.tilePages.length - 1)); | 497 0, Math.min(this.cardSlider.currentCard, this.tilePages.length - 1)); |
| 494 this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages), | 498 this.cardSlider.setCards( |
| 495 pageNo); | 499 Array.prototype.slice.call(this.tilePages), pageNo); |
| 496 if (loadTimeData.getBoolean('showApps')) { | 500 if (loadTimeData.getBoolean('showApps')) { |
| 497 this.cardSlider.selectCardByValue( | 501 this.cardSlider.selectCardByValue(this.appsPages[Math.min( |
| 498 this.appsPages[Math.min(this.shownPageIndex, | 502 this.shownPageIndex, this.appsPages.length - 1)]); |
| 499 this.appsPages.length - 1)]); | |
| 500 } | 503 } |
| 501 }, | 504 }, |
| 502 | 505 |
| 503 /** | 506 /** |
| 504 * Called whenever tiles should be re-arranging themselves out of the way | 507 * Called whenever tiles should be re-arranging themselves out of the way |
| 505 * of a moving or insert tile. | 508 * of a moving or insert tile. |
| 506 */ | 509 */ |
| 507 enterRearrangeMode: function() { | 510 enterRearrangeMode: function() { |
| 508 if (loadTimeData.getBoolean('showApps')) { | 511 if (loadTimeData.getBoolean('showApps')) { |
| 509 var tempPage = new ntp.AppsPage(); | 512 var tempPage = new ntp.AppsPage(); |
| 510 tempPage.classList.add('temporary'); | 513 tempPage.classList.add('temporary'); |
| 511 var pageName = loadTimeData.getString('appDefaultPageName'); | 514 var pageName = loadTimeData.getString('appDefaultPageName'); |
| 512 this.appendTilePage(tempPage, pageName, true); | 515 this.appendTilePage(tempPage, pageName, true); |
| 513 } | 516 } |
| 514 | 517 |
| 515 if (ntp.getCurrentlyDraggingTile().firstChild.canBeRemoved()) { | 518 if (ntp.getCurrentlyDraggingTile().firstChild.canBeRemoved()) { |
| 516 $('footer').classList.add('showing-trash-mode'); | 519 $('footer').classList.add('showing-trash-mode'); |
| 517 $('footer-menu-container').style.minWidth = $('trash').offsetWidth - | 520 $('footer-menu-container').style.minWidth = $('trash').offsetWidth - |
| 518 $('chrome-web-store-link').offsetWidth + 'px'; | 521 $('chrome-web-store-link').offsetWidth + 'px'; |
| 519 } | 522 } |
| 520 | 523 |
| 521 document.documentElement.classList.add('dragging-mode'); | 524 document.documentElement.classList.add('dragging-mode'); |
| 522 }, | 525 }, |
| 523 | 526 |
| 524 /** | 527 /** |
| 525 * Invoked whenever some app is released | 528 * Invoked whenever some app is released |
| 526 */ | 529 */ |
| 527 leaveRearrangeMode: function() { | 530 leaveRearrangeMode: function() { |
| 528 var tempPage = /** @type {ntp.AppsPage} */( | 531 var tempPage = /** @type {ntp.AppsPage} */ ( |
| 529 document.querySelector('.tile-page.temporary')); | 532 document.querySelector('.tile-page.temporary')); |
| 530 if (tempPage) { | 533 if (tempPage) { |
| 531 var dot = tempPage.navigationDot; | 534 var dot = tempPage.navigationDot; |
| 532 if (!tempPage.tileCount && | 535 if (!tempPage.tileCount && |
| 533 tempPage != this.cardSlider.currentCardValue) { | 536 tempPage != this.cardSlider.currentCardValue) { |
| 534 this.removeTilePageAndDot_(tempPage, true); | 537 this.removeTilePageAndDot_(tempPage, true); |
| 535 } else { | 538 } else { |
| 536 tempPage.classList.remove('temporary'); | 539 tempPage.classList.remove('temporary'); |
| 537 this.saveAppPageName(tempPage, | 540 this.saveAppPageName( |
| 538 loadTimeData.getString('appDefaultPageName')); | 541 tempPage, loadTimeData.getString('appDefaultPageName')); |
| 539 } | 542 } |
| 540 } | 543 } |
| 541 | 544 |
| 542 $('footer').classList.remove('showing-trash-mode'); | 545 $('footer').classList.remove('showing-trash-mode'); |
| 543 $('footer-menu-container').style.minWidth = ''; | 546 $('footer-menu-container').style.minWidth = ''; |
| 544 document.documentElement.classList.remove('dragging-mode'); | 547 document.documentElement.classList.remove('dragging-mode'); |
| 545 }, | 548 }, |
| 546 | 549 |
| 547 /** | 550 /** |
| 548 * Callback for the 'pagelayout' event. | 551 * Callback for the 'pagelayout' event. |
| (...skipping 12 matching lines...) Expand all Loading... |
| 561 * Adjusts the size and position of the page switchers according to the | 564 * Adjusts the size and position of the page switchers according to the |
| 562 * layout of the current card, and updates the aria-label attributes of | 565 * layout of the current card, and updates the aria-label attributes of |
| 563 * the page switchers. | 566 * the page switchers. |
| 564 */ | 567 */ |
| 565 updatePageSwitchers: function() { | 568 updatePageSwitchers: function() { |
| 566 if (!this.pageSwitcherStart || !this.pageSwitcherEnd) | 569 if (!this.pageSwitcherStart || !this.pageSwitcherEnd) |
| 567 return; | 570 return; |
| 568 | 571 |
| 569 var page = this.cardSlider.currentCardValue; | 572 var page = this.cardSlider.currentCardValue; |
| 570 | 573 |
| 571 this.pageSwitcherStart.hidden = !page || | 574 this.pageSwitcherStart.hidden = |
| 572 (this.cardSlider.currentCard == 0); | 575 !page || (this.cardSlider.currentCard == 0); |
| 573 this.pageSwitcherEnd.hidden = !page || | 576 this.pageSwitcherEnd.hidden = !page || |
| 574 (this.cardSlider.currentCard == this.cardSlider.cardCount - 1); | 577 (this.cardSlider.currentCard == this.cardSlider.cardCount - 1); |
| 575 | 578 |
| 576 if (!page) | 579 if (!page) |
| 577 return; | 580 return; |
| 578 | 581 |
| 579 var pageSwitcherLeft = isRTL() ? this.pageSwitcherEnd : | 582 var pageSwitcherLeft = |
| 580 this.pageSwitcherStart; | 583 isRTL() ? this.pageSwitcherEnd : this.pageSwitcherStart; |
| 581 var pageSwitcherRight = isRTL() ? this.pageSwitcherStart : | 584 var pageSwitcherRight = |
| 582 this.pageSwitcherEnd; | 585 isRTL() ? this.pageSwitcherStart : this.pageSwitcherEnd; |
| 583 var scrollbarWidth = page.scrollbarWidth; | 586 var scrollbarWidth = page.scrollbarWidth; |
| 584 pageSwitcherLeft.style.width = | 587 pageSwitcherLeft.style.width = (page.sideMargin + 13) + 'px'; |
| 585 (page.sideMargin + 13) + 'px'; | |
| 586 pageSwitcherLeft.style.left = '0'; | 588 pageSwitcherLeft.style.left = '0'; |
| 587 pageSwitcherRight.style.width = | 589 pageSwitcherRight.style.width = |
| 588 (page.sideMargin - scrollbarWidth + 13) + 'px'; | 590 (page.sideMargin - scrollbarWidth + 13) + 'px'; |
| 589 pageSwitcherRight.style.right = scrollbarWidth + 'px'; | 591 pageSwitcherRight.style.right = scrollbarWidth + 'px'; |
| 590 | 592 |
| 591 var offsetTop = page.querySelector('.tile-page-content').offsetTop + 'px'; | 593 var offsetTop = page.querySelector('.tile-page-content').offsetTop + 'px'; |
| 592 pageSwitcherLeft.style.top = offsetTop; | 594 pageSwitcherLeft.style.top = offsetTop; |
| 593 pageSwitcherRight.style.top = offsetTop; | 595 pageSwitcherRight.style.top = offsetTop; |
| 594 pageSwitcherLeft.style.paddingBottom = offsetTop; | 596 pageSwitcherLeft.style.paddingBottom = offsetTop; |
| 595 pageSwitcherRight.style.paddingBottom = offsetTop; | 597 pageSwitcherRight.style.paddingBottom = offsetTop; |
| (...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 729 return; | 731 return; |
| 730 | 732 |
| 731 var direction = 0; | 733 var direction = 0; |
| 732 if (e.key == 'ArrowLeft') | 734 if (e.key == 'ArrowLeft') |
| 733 direction = -1; | 735 direction = -1; |
| 734 else if (e.key == 'ArrowRight') | 736 else if (e.key == 'ArrowRight') |
| 735 direction = 1; | 737 direction = 1; |
| 736 else | 738 else |
| 737 return; | 739 return; |
| 738 | 740 |
| 739 var cardIndex = | 741 var cardIndex = (this.cardSlider.currentCard + direction + |
| 740 (this.cardSlider.currentCard + direction + | 742 this.cardSlider.cardCount) % |
| 741 this.cardSlider.cardCount) % this.cardSlider.cardCount; | 743 this.cardSlider.cardCount; |
| 742 this.cardSlider.selectCard(cardIndex, true); | 744 this.cardSlider.selectCard(cardIndex, true); |
| 743 | 745 |
| 744 e.stopPropagation(); | 746 e.stopPropagation(); |
| 745 }, | 747 }, |
| 746 | 748 |
| 747 /** | 749 /** |
| 748 * Returns the index of a given tile page. | 750 * Returns the index of a given tile page. |
| 749 * @param {ntp.TilePage} page The TilePage we wish to find. | 751 * @param {ntp.TilePage} page The TilePage we wish to find. |
| 750 * @return {number} The index of |page| or -1 if it is not in the | 752 * @return {number} The index of |page| or -1 if it is not in the |
| 751 * collection. | 753 * collection. |
| 752 */ | 754 */ |
| 753 getTilePageIndex: function(page) { | 755 getTilePageIndex: function(page) { |
| 754 return Array.prototype.indexOf.call(this.tilePages, page); | 756 return Array.prototype.indexOf.call(this.tilePages, page); |
| 755 }, | 757 }, |
| 756 | 758 |
| 757 /** | 759 /** |
| 758 * Removes a page and navigation dot (if the navdot exists). | 760 * Removes a page and navigation dot (if the navdot exists). |
| 759 * @param {ntp.TilePage} page The page to be removed. | 761 * @param {ntp.TilePage} page The page to be removed. |
| 760 * @param {boolean=} opt_animate If the removal should be animated. | 762 * @param {boolean=} opt_animate If the removal should be animated. |
| 761 */ | 763 */ |
| 762 removeTilePageAndDot_: function(page, opt_animate) { | 764 removeTilePageAndDot_: function(page, opt_animate) { |
| 763 if (page.navigationDot) | 765 if (page.navigationDot) |
| 764 page.navigationDot.remove(opt_animate); | 766 page.navigationDot.remove(opt_animate); |
| 765 this.cardSlider.removeCard(page); | 767 this.cardSlider.removeCard(page); |
| 766 }, | 768 }, |
| 767 }; | 769 }; |
| 768 | 770 |
| 769 return { | 771 return {PageListView: PageListView}; |
| 770 PageListView: PageListView | |
| 771 }; | |
| 772 }); | 772 }); |
| OLD | NEW |