OLD | NEW |
(Empty) | |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 /** |
| 6 * @fileoverview Touch-based new tab page |
| 7 * This is the main code for the new tab page used by touch-enabled Chrome |
| 8 * browsers. For now this is still a prototype. |
| 9 */ |
| 10 |
| 11 /** |
| 12 * The Slider object to use for changing app pages. |
| 13 * @type {Slider|undefined} |
| 14 */ |
| 15 var slider; |
| 16 |
| 17 /** |
| 18 * Template to use for creating new 'apps-page' elements |
| 19 * @type {!Element|undefined} |
| 20 */ |
| 21 var appsPageTemplate; |
| 22 |
| 23 /** |
| 24 * Template to use for creating new 'app-container' elements |
| 25 * @type {!Element|undefined} |
| 26 */ |
| 27 var appTemplate; |
| 28 |
| 29 /** |
| 30 * Template to use for creating new 'dot' elements |
| 31 * @type {!Element|undefined} |
| 32 */ |
| 33 var dotTemplate; |
| 34 |
| 35 /** |
| 36 * The 'apps-page-list' element. |
| 37 * @type {!Element} |
| 38 */ |
| 39 var appsPageList = getRequiredElement('apps-page-list'); |
| 40 |
| 41 /** |
| 42 * A list of all 'apps-page' elements. |
| 43 * @type {!NodeList|undefined} |
| 44 */ |
| 45 var appsPages; |
| 46 |
| 47 /** |
| 48 * The 'dots-list' element. |
| 49 * @type {!Element} |
| 50 */ |
| 51 var dotList = getRequiredElement('dot-list'); |
| 52 |
| 53 /** |
| 54 * A list of all 'dots' elements. |
| 55 * @type {!NodeList|undefined} |
| 56 */ |
| 57 var dots; |
| 58 |
| 59 /** |
| 60 * The 'trash' element. Note that technically this is unnecessary, |
| 61 * JavaScript creates the object for us based on the id. But I don't want |
| 62 * to rely on the ID being the same, and JSCompiler doesn't know about it. |
| 63 * @type {!Element} |
| 64 */ |
| 65 var trash = getRequiredElement('trash'); |
| 66 |
| 67 /** |
| 68 * The time in milliseconds for most transitions. This should match what's |
| 69 * in newtab.css. Unfortunately there's no better way to try to time |
| 70 * something to occur until after a transition has completed. |
| 71 * @type {number} |
| 72 * @const |
| 73 */ |
| 74 var DEFAULT_TRANSITION_TIME = 500; |
| 75 |
| 76 /** |
| 77 * All the Grabber objects currently in use on the page |
| 78 * @type {Array.<Grabber>} |
| 79 */ |
| 80 var grabbers = []; |
| 81 |
| 82 /** |
| 83 * Holds all event handlers tied to apps (and so subject to removal when the |
| 84 * app list is refreshed) |
| 85 * @type {!EventTracker} |
| 86 */ |
| 87 var appEvents = new EventTracker(); |
| 88 |
| 89 /** |
| 90 * Invoked at startup once the DOM is available to initialize the app. |
| 91 */ |
| 92 function initializeNtp() { |
| 93 // Prevent touch events from triggering any sort of native scrolling |
| 94 document.addEventListener('touchmove', function(e) { |
| 95 e.preventDefault(); |
| 96 }, true); |
| 97 |
| 98 // Get the template elements and remove them from the DOM. Things are |
| 99 // simpler if we start with 0 pages and 0 apps and don't leave hidden |
| 100 // template elements behind in the DOM. |
| 101 appTemplate = getRequiredElement('app-template'); |
| 102 appTemplate.removeAttribute('id'); |
| 103 appTemplate.id = ''; |
| 104 |
| 105 appsPages = appsPageList.getElementsByClassName('apps-page'); |
| 106 assert(appsPages.length == 1, |
| 107 'Expected exactly one apps-page in the apps-page-list.'); |
| 108 appsPageTemplate = appsPages[0]; |
| 109 appsPageList.removeChild(appsPages[0]); |
| 110 |
| 111 dots = dotList.getElementsByClassName('dot'); |
| 112 assert(dots.length == 1, |
| 113 'Expected exactly one dot in the dots-list.'); |
| 114 dotTemplate = dots[0]; |
| 115 dotList.removeChild(dots[0]); |
| 116 |
| 117 // Initialize the slider without any cards at the moment |
| 118 var appsFrame = getRequiredElement('apps-frame'); |
| 119 slider = new Slider(appsFrame, appsPageList, [], 0, appsFrame.offsetWidth); |
| 120 slider.initialize(); |
| 121 |
| 122 // Ensure the slider is resized appropriately with the window |
| 123 window.addEventListener('resize', function() { |
| 124 slider.resize(appsFrame.offsetWidth); |
| 125 }, false); |
| 126 |
| 127 // Handle the page being changed |
| 128 appsPageList.addEventListener( |
| 129 Slider.EventType.CARD_CHANGED, |
| 130 function(e) { |
| 131 // Update the active dot |
| 132 var curDot = dotList.getElementsByClassName('selected')[0]; |
| 133 if (curDot) { |
| 134 curDot.classList.remove('selected'); |
| 135 } |
| 136 var newPageIndex = e.sender.getCurrentCard(); |
| 137 dots[newPageIndex].classList.add('selected'); |
| 138 // If an app was being dragged, move it to the end of the new page |
| 139 if (draggingAppContainer) { |
| 140 appsPages[newPageIndex].appendChild(draggingAppContainer); |
| 141 } |
| 142 }, false); |
| 143 |
| 144 // Add a drag handler to the body (for drags that don't land on an existing |
| 145 // app) |
| 146 document.body.addEventListener(Grabber.EventType.DRAG_ENTER, appDragEnter, |
| 147 false); |
| 148 |
| 149 // Handle dropping an app anywhere other than on the trash |
| 150 document.body.addEventListener(Grabber.EventType.DROP, appDrop, |
| 151 false); |
| 152 |
| 153 // Add handles to manage the transition into/out-of rearrange mode |
| 154 // Note that we assume here that we only use a Grabber for moving apps, |
| 155 // so ANY GRAB event means we're enterring rearrange mode. |
| 156 appsFrame.addEventListener(Grabber.EventType.GRAB, enterRearrangeMode, |
| 157 false); |
| 158 appsFrame.addEventListener(Grabber.EventType.RELEASE, leaveRearrangeMode, |
| 159 false); |
| 160 |
| 161 // Add handlers for the tash can |
| 162 trash.addEventListener(Grabber.EventType.DRAG_ENTER, function(e) { |
| 163 trash.classList.add('hover'); |
| 164 e.sender.getElement().classList.add('trashing'); |
| 165 e.stopPropagation(); |
| 166 }, false); |
| 167 trash.addEventListener(Grabber.EventType.DRAG_LEAVE, function(e) { |
| 168 e.sender.getElement().classList.remove('trashing'); |
| 169 trash.classList.remove('hover'); |
| 170 }, false); |
| 171 trash.addEventListener(Grabber.EventType.DROP, appTrash, false); |
| 172 |
| 173 // Fill in the apps |
| 174 chrome.send('getApps'); |
| 175 } |
| 176 |
| 177 /** |
| 178 * Simple common assertion API |
| 179 * @param {*} condition The condition to test. Note that this may be used to |
| 180 * test whether a value is defined or not, and we don't want to force a |
| 181 * cast to Boolean. |
| 182 * @param {string=} opt_message A message to use in any error. |
| 183 */ |
| 184 function assert(condition, opt_message) { |
| 185 if (!condition) { |
| 186 var msg = 'Assertion failed'; |
| 187 if (opt_message) { |
| 188 msg = msg + ': ' + opt_message; |
| 189 } |
| 190 throw new Error(msg); |
| 191 } |
| 192 } |
| 193 |
| 194 /** |
| 195 * Get an element that's known to exist by its ID. We use this instead of just |
| 196 * calling getElementById and not checking the result because this lets us |
| 197 * satisfy the JSCompiler type system. |
| 198 * @param {string} id The identifier name. |
| 199 * @return {!Element} the Element. |
| 200 */ |
| 201 function getRequiredElement(id) |
| 202 { |
| 203 var element = /** @type !Element */ (document.getElementById(id)); |
| 204 assert(Boolean(element), 'Missing required element: ' + id); |
| 205 return element; |
| 206 } |
| 207 |
| 208 /** |
| 209 * Remove all children of an element which have a given class in |
| 210 * their classList. |
| 211 * @param {!Element} element The parent element to examine. |
| 212 * @param {string} className The class to look for. |
| 213 */ |
| 214 function removeChildrenByClassName(element, className) { |
| 215 for (var child = element.firstElementChild; child;) { |
| 216 var prev = child; |
| 217 child = child.nextElementSibling; |
| 218 if (prev.classList.contains(className)) { |
| 219 element.removeChild(prev); |
| 220 } |
| 221 } |
| 222 } |
| 223 |
| 224 /** |
| 225 * Callback invoked by chrome with the apps available. |
| 226 * |
| 227 * Note that calls to this function can occur at any time, not just in response |
| 228 * to a getApps request. For example, when a user installs/uninstalls an app on |
| 229 * another synchronized devices. |
| 230 * @param {Object} data An object with all the data on available |
| 231 * applications. |
| 232 */ |
| 233 function getAppsCallback(data) |
| 234 { |
| 235 // Clean up any existing grabber objects - cancelling any outstanding drag. |
| 236 // Ideally an async app update wouldn't disrupt an active drag but |
| 237 // that would require us to re-use existing elements and detect how the apps |
| 238 // have changed, which would be a lot of work. |
| 239 // Note that was have to explicitly clean up the grabber objects so they stop |
| 240 // listening to events and break the DOM<->JS cycles necessary to enable |
| 241 // collection of all these objects. |
| 242 grabbers.forEach(function(g) { |
| 243 // Note that this may raise DRAG_END/RELEASE events to clean up an |
| 244 // oustanding drag. |
| 245 g.dispose(); |
| 246 }); |
| 247 assert(!draggingAppContainer && !draggingAppOriginalPosition && |
| 248 !draggingAppOriginalPage); |
| 249 grabbers = []; |
| 250 appEvents.removeAll(); |
| 251 |
| 252 // Clear any existing apps pages and dots. |
| 253 // TODO(rbyers): It might be nice to preserve animation of dots after an |
| 254 // uninstall. Could we re-use the existing page and dot elements? It seems |
| 255 // unfortunate to have Chrome send us the entire apps list after an uninstall. |
| 256 removeChildrenByClassName(appsPageList, 'apps-page'); |
| 257 removeChildrenByClassName(dotList, 'dot'); |
| 258 |
| 259 // Get the array of apps and add any special synthesized entries |
| 260 var apps = data.apps; |
| 261 apps.push(makeWebstoreApp()); |
| 262 |
| 263 // Sort by launch index |
| 264 apps.sort(function(a, b) { |
| 265 return a.app_launch_index - b.app_launch_index; |
| 266 }); |
| 267 |
| 268 // Add the apps, creating pages as necessary |
| 269 for (var i = 0; i < apps.length; i++) { |
| 270 var app = apps[i]; |
| 271 var pageIndex = (app.page_index || 0); |
| 272 while (pageIndex >= appsPages.length) { |
| 273 var origPageCount = appsPages.length; |
| 274 createAppPage(); |
| 275 // Confirm that appsPages is a live object, updated when a new page is |
| 276 // added (otherwise we'd have an infinite loop) |
| 277 assert(appsPages.length == origPageCount + 1, 'expected new page'); |
| 278 } |
| 279 appendApp(appsPages[pageIndex], app); |
| 280 } |
| 281 |
| 282 // Tell the slider about the pages |
| 283 updateSliderCards(); |
| 284 |
| 285 // Mark the current page |
| 286 dots[slider.getCurrentCard()].classList.add('selected'); |
| 287 } |
| 288 |
| 289 /** |
| 290 * Make a synthesized app object representing the chrome web store. It seems |
| 291 * like this could just as easily come from the back-end, and then would support |
| 292 * being rearranged, etc. |
| 293 * @return {Object} The app object as would be sent from the webui back-end. |
| 294 */ |
| 295 function makeWebstoreApp() { |
| 296 return { |
| 297 id: '', // Empty ID signifies this is a special synthesized app |
| 298 page_index: 0, |
| 299 app_launch_index: -1, // always first |
| 300 name: templateData.web_store_title, |
| 301 launch_url: templateData.web_store_url, |
| 302 icon_big: getThemeUrl('IDR_WEBSTORE_ICON') |
| 303 }; |
| 304 } |
| 305 |
| 306 /** |
| 307 * Given a theme resource name, construct a URL for it. |
| 308 * @param {string} resourceName The name of the resource. |
| 309 * @return {string} A url which can be used to load the resource. |
| 310 */ |
| 311 function getThemeUrl(resourceName) { |
| 312 // Allow standalone_hack.js to hook this mapping (since chrome:// URLs |
| 313 // won't work for a standalone page) |
| 314 if (typeof(themeUrlMapper) == 'function') { |
| 315 var u = themeUrlMapper(resourceName); |
| 316 if (u) { |
| 317 return u; |
| 318 } |
| 319 } |
| 320 return 'chrome://theme/' + resourceName; |
| 321 } |
| 322 |
| 323 /** |
| 324 * Callback invoked by chrome whenever an app preference changes. |
| 325 * The normal NTP uses this to keep track of the current launch-type of an app, |
| 326 * updating the choices in the context menu. We don't have such a menu so don't |
| 327 * use this at all (but it still needs to be here for chrome to call). |
| 328 * @param {Object} data An object with all the data on available |
| 329 * applications. |
| 330 */ |
| 331 function appsPrefChangeCallback(data) { |
| 332 } |
| 333 |
| 334 /** |
| 335 * Invoked whenever the pages in apps-page-list have changed so that |
| 336 * the Slider knows about the new elements. |
| 337 */ |
| 338 function updateSliderCards() |
| 339 { |
| 340 var pageNo = slider.getCurrentCard(); |
| 341 if (pageNo >= appsPages.length) { |
| 342 pageNo = appsPages.length - 1; |
| 343 } |
| 344 var pageArray = []; |
| 345 for (var i = 0; i < appsPages.length; i++) { |
| 346 pageArray[i] = appsPages[i]; |
| 347 } |
| 348 slider.setCards(pageArray, pageNo); |
| 349 } |
| 350 |
| 351 /** |
| 352 * Create a new app element and attach it to the end of the specified app page. |
| 353 * @param {!Element} parent The element where the app should be inserted. |
| 354 * @param {!Object} app The application object to create an app for. |
| 355 */ |
| 356 function appendApp(parent, app) { |
| 357 // Make a deep copy of the template and clear its ID |
| 358 var containerElement = /** @type {!Element} */ (appTemplate.cloneNode(true)); |
| 359 var appElement = containerElement.getElementsByClassName('app')[0]; |
| 360 assert(appElement, 'Expected app-template to have an app child'); |
| 361 assert(typeof(app.id) == 'string', |
| 362 'Expected every app to have an ID or empty string'); |
| 363 appElement.setAttribute('app-id', app.id); |
| 364 |
| 365 // Find the span element (if any) and fill it in with the app name |
| 366 var span = appElement.getElementsByTagName('span')[0]; |
| 367 if (span) { |
| 368 span.textContent = app.name; |
| 369 } |
| 370 |
| 371 // Fill in the image |
| 372 // We use a mask of the same image so CSS rules can highlight just the image |
| 373 // when it's touched. |
| 374 var appImg = appElement.getElementsByTagName('img')[0]; |
| 375 if (appImg) { |
| 376 appImg.src = app.icon_big; |
| 377 appImg.style.webkitMaskImage = 'url(' + app.icon_big + ')'; |
| 378 // We put a click handler just on the app image - so clicking on the margins |
| 379 // between apps doesn't do anything |
| 380 if (app.id) { |
| 381 appEvents.add(appImg, 'click', appClick, false); |
| 382 } else { |
| 383 // Special case of synthesized apps - can't launch directly so just change |
| 384 // the URL as if we clicked a link. We may want to eventually support |
| 385 // tracking clicks with ping messages, but really it seems it would be |
| 386 // better for the back-end to just create virtual apps for such cases. |
| 387 appEvents.add(appImg, 'click', function(e) { |
| 388 window.location = app.launch_url; |
| 389 }, false); |
| 390 } |
| 391 } |
| 392 |
| 393 // Only real apps with back-end storage (for their launch index, etc.) can be |
| 394 // rearranged. |
| 395 if (app.id) { |
| 396 // Create a grabber to support moving apps around |
| 397 // Note that we move the app rather than the container. This is so that an |
| 398 // element remains in the original position so we can detect when an app is |
| 399 // dropped in its starting location. |
| 400 var grabber = new Grabber(/** @type {!Element} */ (appElement)); |
| 401 grabbers.push(grabber); |
| 402 |
| 403 // Register to be made aware of when we are dragged |
| 404 appEvents.add(appElement, Grabber.EventType.DRAG_START, appDragStart, |
| 405 false); |
| 406 appEvents.add(appElement, Grabber.EventType.DRAG_END, appDragEnd, |
| 407 false); |
| 408 |
| 409 // Register to be made aware of any app drags on top of our container |
| 410 appEvents.add(containerElement, Grabber.EventType.DRAG_ENTER, appDragEnter, |
| 411 false); |
| 412 } else { |
| 413 // Prevent any built-in drag-and-drop support from activating for the |
| 414 // element. |
| 415 appEvents.add(appElement, 'dragstart', function(e) { |
| 416 e.preventDefault(); |
| 417 }, true); |
| 418 } |
| 419 |
| 420 // Insert at the end of the provided page |
| 421 parent.appendChild(containerElement); |
| 422 } |
| 423 |
| 424 /** |
| 425 * Creates a new page for apps |
| 426 * |
| 427 * @return {!Element} The apps-page element created. |
| 428 * @param {boolean=} opt_animate If true, add the class 'new' to the created |
| 429 * dot. |
| 430 */ |
| 431 function createAppPage(opt_animate) |
| 432 { |
| 433 // Make a shallow copy of the app page template. |
| 434 var newPage = /** @type !Element */ (appsPageTemplate.cloneNode(false)); |
| 435 appsPageList.appendChild(newPage); |
| 436 |
| 437 // Make a deep copy of the dot template to add a new one. |
| 438 var dotCount = dots.length; |
| 439 var newDot = /** @type !Element */ (dotTemplate.cloneNode(true)); |
| 440 if (opt_animate) { |
| 441 newDot.classList.add('new'); |
| 442 } |
| 443 dotList.appendChild(newDot); |
| 444 |
| 445 // Add click handler to the dot to change the page. |
| 446 // TODO(rbyers): Perhaps this should be TouchHandler.START_EVENT_ (so we don't |
| 447 // rely on synthesized click events, and the change takes effect before |
| 448 // releasing). However, click events seems to be synthesized for a region |
| 449 // outside the border, and a 10px box is too small to require touch events to |
| 450 // fall inside of. We could get around this by adding a box around the dot for |
| 451 // accepting the touch events. |
| 452 var switchPage = function(e) { |
| 453 slider.setCurrentCard(dotCount, true); |
| 454 e.stopPropagation(); |
| 455 } |
| 456 appEvents.add(newDot, 'click', switchPage, false); |
| 457 |
| 458 // Change pages whenever an app is dragged over a dot. |
| 459 appEvents.add(newDot, Grabber.EventType.DRAG_ENTER, switchPage, false); |
| 460 |
| 461 return newPage; |
| 462 } |
| 463 |
| 464 /** |
| 465 * Invoked when an app is clicked |
| 466 * @param {Event} e The click event. |
| 467 */ |
| 468 function appClick(e) { |
| 469 var target = /** @type {!Element} */ (e.currentTarget); |
| 470 var app = getParentByClassName(target, 'app'); |
| 471 assert(app, 'appClick should have been on a descendant of an app'); |
| 472 |
| 473 var appId = app.getAttribute('app-id'); |
| 474 assert(appId, 'unexpected app without appId'); |
| 475 |
| 476 // Tell chrome to launch the app. |
| 477 var NTP_APPS_MAXIMIZED = 0; |
| 478 chrome.send('launchApp', [appId, NTP_APPS_MAXIMIZED]); |
| 479 |
| 480 // Don't propagate the click (in case we have a link or something) |
| 481 e.stopPropagation(); |
| 482 e.preventDefault(); |
| 483 } |
| 484 |
| 485 /** |
| 486 * Search an elements ancestor chain for the nearest element that is a member of |
| 487 * the specified class. |
| 488 * @param {!Element} element The element to start searching from. |
| 489 * @param {string} className The name of the class to locate. |
| 490 * @return {Element} The first ancestor of the specified class or null. |
| 491 */ |
| 492 function getParentByClassName(element, className) |
| 493 { |
| 494 for (var e = element; |
| 495 e && e.nodeType == Node.ELEMENT_NODE; |
| 496 e = e.parentNode) { |
| 497 if (e.classList.contains(className)) { |
| 498 return /** @type {Element} */ (e); |
| 499 } |
| 500 } |
| 501 return null; |
| 502 } |
| 503 |
| 504 /** |
| 505 * The container where the app currently being dragged came from. |
| 506 * @type {Element} |
| 507 */ |
| 508 var draggingAppContainer = null; |
| 509 |
| 510 /** |
| 511 * The apps-page that the app currently being dragged camed from. |
| 512 * @type {Element} |
| 513 */ |
| 514 var draggingAppOriginalPage = null; |
| 515 |
| 516 /** |
| 517 * The element that was originally after the app currently being dragged (or |
| 518 * null if it was the last on the page). |
| 519 * @type {Element} |
| 520 */ |
| 521 var draggingAppOriginalPosition = null; |
| 522 |
| 523 /** |
| 524 * Invoked when app dragging begins. |
| 525 * @param {Event} e The event from the Grabber indicating the drag. |
| 526 */ |
| 527 function appDragStart(e) { |
| 528 // Pull the element out to the appsFrame using fixed positioning. This ensures |
| 529 // that the app is not affected (remains under the finger) if the slider |
| 530 // changes cards and is translated. An alternate approach would be to use |
| 531 // fixed positioning for the slider (so that changes to its position don't |
| 532 // affect children that aren't positioned relative to it), but we don't yet |
| 533 // have GPU acceleration for this. Note that we use the appsFrame |
| 534 var element = e.sender.getElement(); |
| 535 |
| 536 var pos = element.getBoundingClientRect(); |
| 537 element.style.webkitTransform = ''; |
| 538 |
| 539 element.style.position = 'fixed'; |
| 540 // Don't want to zoom around the middle since the left/top co-ordinates |
| 541 // are post-transform values. |
| 542 element.style.webkitTransformOrigin = 'left top'; |
| 543 element.style.left = pos.left + 'px'; |
| 544 element.style.top = pos.top + 'px'; |
| 545 |
| 546 // Keep track of what app is being dragged and where it came from |
| 547 assert(draggingAppContainer == null, |
| 548 'got DRAG_START without DRAG_END'); |
| 549 draggingAppContainer = element.parentNode; |
| 550 assert(draggingAppContainer.classList.contains('app-container')); |
| 551 draggingAppOriginalPosition = draggingAppContainer.nextSibling; |
| 552 draggingAppOriginalPage = draggingAppContainer.parentNode; |
| 553 |
| 554 // Move the app out of the container |
| 555 // Note that appendChild also removes the element from its current parent. |
| 556 getRequiredElement('apps-frame').appendChild(element); |
| 557 } |
| 558 |
| 559 /** |
| 560 * Invoked when app dragging terminates (either successfully or not) |
| 561 * @param {CustomEvent} e The event from the Grabber. |
| 562 */ |
| 563 function appDragEnd(e) { |
| 564 // Stop floating the app |
| 565 var appBeingDragged = e.sender.getElement(); |
| 566 assert(appBeingDragged.classList.contains('app')); |
| 567 appBeingDragged.style.position = ''; |
| 568 appBeingDragged.style.webkitTransformOrigin = ''; |
| 569 appBeingDragged.style.left = ''; |
| 570 appBeingDragged.style.top = ''; |
| 571 |
| 572 // If we have an active drag (i.e. it wasn't aborted by an app update) |
| 573 if (draggingAppContainer) { |
| 574 // Put the app back into it's container |
| 575 if (appBeingDragged.parentNode != draggingAppContainer) { |
| 576 draggingAppContainer.appendChild(appBeingDragged); |
| 577 } |
| 578 |
| 579 // If we care about the container's original position |
| 580 if (draggingAppOriginalPage) |
| 581 { |
| 582 // Then put the container back where it came from |
| 583 if (draggingAppOriginalPosition) { |
| 584 draggingAppOriginalPage.insertBefore(draggingAppContainer, |
| 585 draggingAppOriginalPosition); |
| 586 } else { |
| 587 draggingAppOriginalPage.appendChild(draggingAppContainer); |
| 588 } |
| 589 } |
| 590 } |
| 591 |
| 592 draggingAppContainer = null; |
| 593 draggingAppOriginalPage = null; |
| 594 draggingAppOriginalPosition = null; |
| 595 } |
| 596 |
| 597 /** |
| 598 * Invoked when an app is dragged over another app. Updates the DOM to affect |
| 599 * the rearrangement (but doesn't commit the change until the app is dropped). |
| 600 * @param {Event} e The event from the Grabber indicating the drag. |
| 601 */ |
| 602 function appDragEnter(e) |
| 603 { |
| 604 assert(draggingAppContainer, 'expected stored container'); |
| 605 var sourceContainer = /** @type {!Element} */ (draggingAppContainer); |
| 606 |
| 607 e.stopPropagation(); |
| 608 |
| 609 var curPage = appsPages[slider.getCurrentCard()]; |
| 610 var followingContainer = null; |
| 611 |
| 612 // If we dragged over a specific app, determine which one to insert before |
| 613 if (e.currentTarget != document.body) { |
| 614 |
| 615 // Start by assuming we'll insert the app before the one dragged over |
| 616 followingContainer = e.currentTarget; |
| 617 assert(followingContainer.classList.contains('app-container'), |
| 618 'expected drag over container'); |
| 619 assert(followingContainer.parentNode == curPage); |
| 620 if (followingContainer == draggingAppContainer) { |
| 621 return; |
| 622 } |
| 623 |
| 624 // But if it's after the current container position then we'll need to |
| 625 // move ahead by one to account for the container being removed. |
| 626 if (curPage == draggingAppContainer.parentNode) { |
| 627 for (var c = draggingAppContainer; c; c = c.nextSibling) { |
| 628 if (c == followingContainer) { |
| 629 followingContainer = followingContainer.nextSibling; |
| 630 break; |
| 631 } |
| 632 } |
| 633 } |
| 634 } |
| 635 |
| 636 // Move the container to the appropriate place on the page |
| 637 if (followingContainer) { |
| 638 curPage.insertBefore(draggingAppContainer, followingContainer); |
| 639 } else { |
| 640 curPage.appendChild(draggingAppContainer); |
| 641 } |
| 642 } |
| 643 |
| 644 /** |
| 645 * Invoked when an app is dropped on the trash |
| 646 * @param {Event} e The event from the Grabber indicating the drop. |
| 647 */ |
| 648 function appTrash(e) { |
| 649 var appElement = e.sender.getElement(); |
| 650 assert(appElement.classList.contains('app')); |
| 651 var appId = appElement.getAttribute('app-id'); |
| 652 assert(appId); |
| 653 |
| 654 // Mark this drop as handled |
| 655 e.stopPropagation(); |
| 656 |
| 657 // Tell chrome to uninstall the app (prompting the user) |
| 658 chrome.send('uninstallApp', [appId]); |
| 659 |
| 660 // Return the trash can to normal (we don't get a DRAG_LEAVE) |
| 661 getRequiredElement('trash').classList.remove('hover'); |
| 662 appElement.classList.remove('trashing'); |
| 663 } |
| 664 |
| 665 /** |
| 666 * Called when an app is dropped anywhere other than the trash can. Commits any |
| 667 * movement that has occurred. |
| 668 * @param {Event} e The event from the Grabber indicating the drop. |
| 669 */ |
| 670 function appDrop(e) { |
| 671 if (!draggingAppContainer) { |
| 672 // Drag was aborted (eg. due to an app update) - do nothing |
| 673 return; |
| 674 } |
| 675 |
| 676 // If the app is dropped back into it's original position then do nothing |
| 677 assert(draggingAppOriginalPage); |
| 678 if (draggingAppContainer.parentNode == draggingAppOriginalPage && |
| 679 draggingAppContainer.nextSibling == draggingAppOriginalPosition) |
| 680 { |
| 681 return; |
| 682 } |
| 683 |
| 684 // Determine which app was being dragged |
| 685 var appElement = e.sender.getElement(); |
| 686 assert(appElement.classList.contains('app')); |
| 687 var appId = appElement.getAttribute('app-id'); |
| 688 assert(appId); |
| 689 |
| 690 // Update the page index for the app if it's changed. This doesn't trigger a |
| 691 // call to getAppsCallback so we want to do it before reorderApps |
| 692 var pageIndex = slider.getCurrentCard(); |
| 693 assert(pageIndex >= 0 && pageIndex < appsPages.length, |
| 694 'page number out of range'); |
| 695 if (appsPages[pageIndex] != draggingAppOriginalPage) { |
| 696 chrome.send('setPageIndex', [appId, pageIndex]); |
| 697 } |
| 698 |
| 699 // Put the app being dragged back into it's container |
| 700 draggingAppContainer.appendChild(appElement); |
| 701 |
| 702 // Create a list of all appIds in the order now present in the DOM |
| 703 var appIds = []; |
| 704 for (var page = 0; page < appsPages.length; page++) { |
| 705 var appsOnPage = appsPages[page].getElementsByClassName('app'); |
| 706 for (var i = 0; i < appsOnPage.length; i++) { |
| 707 var id = appsOnPage[i].getAttribute('app-id'); |
| 708 if (id) { |
| 709 appIds.push(id); |
| 710 } |
| 711 } |
| 712 } |
| 713 |
| 714 // We are going to commit this repositioning - clear the original position |
| 715 draggingAppOriginalPage = null; |
| 716 draggingAppOriginalPosition = null; |
| 717 |
| 718 // Tell chrome to update its database to persist this new order of apps This |
| 719 // will cause getAppsCallback to be invoked and the apps to be redrawn. |
| 720 chrome.send('reorderApps', [appId, appIds]); |
| 721 appMoved = true; |
| 722 } |
| 723 |
| 724 /** |
| 725 * Set to true if we're currently in rearrange mode and an app has |
| 726 * been successfully dropped to a new location. This indicates that |
| 727 * a getAppsCallback call is pending and we can rely on the DOM being |
| 728 * updated by that. |
| 729 * @type {boolean} |
| 730 */ |
| 731 var appMoved = false; |
| 732 |
| 733 /** |
| 734 * Invoked whenever some app is grabbed |
| 735 * @param {Event} e The Grabber Grab event. |
| 736 */ |
| 737 function enterRearrangeMode(e) |
| 738 { |
| 739 // Stop the slider from sliding for this touch |
| 740 slider.cancelTouch(); |
| 741 |
| 742 // Add an extra blank page in case the user wants to create a new page |
| 743 createAppPage(true); |
| 744 var pageAdded = appsPages.length - 1; |
| 745 window.setTimeout(function() { |
| 746 dots[pageAdded].classList.remove('new'); |
| 747 }, 0); |
| 748 |
| 749 updateSliderCards(); |
| 750 |
| 751 // Cause the dot-list to grow |
| 752 getRequiredElement('footer').classList.add('rearrange-mode'); |
| 753 |
| 754 assert(!appMoved, 'appMoved should not be set yet'); |
| 755 } |
| 756 |
| 757 /** |
| 758 * Invoked whenever some app is released |
| 759 * @param {Event} e The Grabber RELEASE event. |
| 760 */ |
| 761 function leaveRearrangeMode(e) |
| 762 { |
| 763 // Return the dot-list to normal |
| 764 getRequiredElement('footer').classList.remove('rearrange-mode'); |
| 765 |
| 766 // If we didn't successfully re-arrange an app, then we won't be |
| 767 // refreshing the app view in getAppCallback and need to explicitly remove the |
| 768 // extra empty page we added. We don't want to do this in the normal case |
| 769 // because if we did actually drop an app there, we want to retain that page |
| 770 // as our current page number. |
| 771 if (!appMoved) { |
| 772 assert(appsPages[appsPages.length - 1]. |
| 773 getElementsByClassName('app-container').length == 0, |
| 774 'Last app page should be empty'); |
| 775 removePage(appsPages.length - 1); |
| 776 } |
| 777 appMoved = false; |
| 778 } |
| 779 |
| 780 /** |
| 781 * Remove the page with the specified index and update the slider. |
| 782 * @param {number} pageNo The index of the page to remove. |
| 783 */ |
| 784 function removePage(pageNo) |
| 785 { |
| 786 var page = appsPages[pageNo]; |
| 787 |
| 788 // Remove the page from the DOM |
| 789 page.parentNode.removeChild(page); |
| 790 |
| 791 // Remove the corresponding dot |
| 792 // Need to give it a chance to animate though |
| 793 var dot = dots[pageNo]; |
| 794 dot.classList.add('new'); |
| 795 window.setTimeout(function() { |
| 796 // If we've re-created the apps (eg. because an app was uninstalled) then |
| 797 // we will have removed the old dots from the document already, so skip. |
| 798 if (dot.parentNode) { |
| 799 dot.parentNode.removeChild(dot); |
| 800 } |
| 801 }, DEFAULT_TRANSITION_TIME); |
| 802 |
| 803 updateSliderCards(); |
| 804 } |
| 805 |
| 806 // There doesn't seem to be any need to wait for DOMContentLoaded |
| 807 initializeNtp(); |
| 808 |
OLD | NEW |