Print Preview component extension

chrome/browser/resources/print_preview/js/preview_list.js

+// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+
+cr.define('pp', function() {
+  // require cr.ui.define
+  // require cr.ui.limitInputWidth.
+  // require cr.ui.contextMenuHandler
+  const List = cr.ui.List;
+  const ListItem = cr.ui.ListItem;
+
+  var listLookup = {};
+
+  /**
+   * Removes all children and appends a new child.
+   * @param {!Node} parent The node to remove all children from.
+   * @param {!Node} newChild The new child to append.
+   */
+  function replaceAllChildren(parent, newChild) {
+    var n;
+    while ((n = parent.lastChild)) {
+      parent.removeChild(n);
+    }
+    parent.appendChild(newChild);
+  }
+
+  /**
+   * Creates a new print preview list.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {HTMLButtonElement}
+   */
+  var PreviewList = cr.ui.define('list');
+
+  PreviewList.prototype = {
+    __proto__: List.prototype,
+    set items(pages) {
+      this.pages = pages;
+      pages.forEach(function(page) {
+        var li = createListItem(page);
+        this.add(li);
+      }, this);
+    },
+
+    decorate: function() {
+      List.prototype.decorate.call(this);
+      this.addEventListener('click', this.handleClick_);
+    },
+    
+    createItem: function(page) {
+      return createListItem(page);
+    },
+
+
+    /**
+     * Handles the clicks on the list so that we can check if the user clicked
+     * on a link or a folder.
+     * @private
+     * @param {Event} e The click event object.
+     */
+    handleClick_: function(e) {
+      var self = this;
+      var event = new cr.Event('pageClicked', true, false);
+      var el = e.target;
+      while (el.parentNode != this) {
+        el = el.parentNode;
+      }
+      event.page = el.page;
+      event.originalEvent = e;
+      self.dispatchEvent(event);     
+    },
+
+  };
+
+  /**
+   * The contextMenu property.
+   * @type {cr.ui.Menu}
+   */
+  cr.ui.contextMenuHandler.addContextMenuProperty(PreviewList);
+
+  /**
+   * Creates a new bookmark list item.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {cr.ui.ListItem}
+   */
+  var PreviewListItem = cr.ui.define('li');
+
+  PreviewListItem.prototype = {
+    __proto__: ListItem.prototype,
+  };
+
+  function createListItem(page) {
+    var li = listItemPromo.cloneNode(true);
+    PreviewListItem.decorate(li);
+    updateListItem(li, page);
+    li.page = page;
+    return li;
+  }
+
+  function updateListItem(el, page) {
+    if (page.thumb) {
+      var holder = el.getElementsByClassName("placeholder")[0];
+      var img = cr.doc.createElement("img");
+      img.className = "preview-image";
+      img.src = page.thumb;
+      holder.appendChild(img);
+    }
+    el.page = page;
+  }
+
+  var listItemPromo = (function() {
+    var div = cr.doc.createElement('div');
+    div.innerHTML = '<div class="preview-holder"><div class="placeholder"></div></div>';
+    return div;
+  })();
+
+  return {
+    createListItem: createListItem,
+    PreviewList: PreviewList,
+    listLookup: listLookup
+  };
+});