Remove Polymer 0.5.

third_party/polymer/components-chromium/core-header-panel/core-header-panel-extracted.js

-
-
-  Polymer('core-header-panel',{
-
-    /**
-     * Fired when the content has been scrolled.  `event.detail.target` returns
-     * the scrollable element which you can use to access scroll info such as
-     * `scrollTop`.
-     *
-     *     <core-header-panel on-scroll="{{scrollHandler}}">
-     *       ...
-     *     </core-header-panel>
-     *
-     *
-     *     scrollHandler: function(event) {
-     *       var scroller = event.detail.target;
-     *       console.log(scroller.scrollTop);
-     *     }
-     *
-     * @event scroll
-     */
-
-    publish: {
-      /**
-       * Controls header and scrolling behavior. Options are
-       * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and 
-       * `cover`. Default is `standard`.
-       *
-       * `standard`: The header is a step above the panel. The header will consume the
-       * panel at the point of entry, preventing it from passing through to the
-       * opposite side.
-       *
-       * `seamed`: The header is presented as seamed with the panel.
-       *
-       * `waterfall`: Similar to standard mode, but header is initially presented as
-       * seamed with panel, but then separates to form the step.
-       *
-       * `waterfall-tall`: The header is initially taller (`tall` class is added to
-       * the header).  As the user scrolls, the header separates (forming an edge)
-       * while condensing (`tall` class is removed from the header).
-       *
-       * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
-       *
-       * `cover`: The panel covers the whole `core-header-panel` including the
-       * header. This allows user to style the panel in such a way that the panel is
-       * partially covering the header.
-       *
-       *     <style>
-       *       core-header-panel[mode=cover]::shadow #mainContainer {
-       *         left: 80px;
-       *       }
-       *       .content {
-       *         margin: 60px 60px 60px 0;
-       *       }
-       *     </style>
-       *
-       *     <core-header-panel mode="cover">
-       *       <core-toolbar class="tall">
-       *         <core-icon-button icon="menu"></core-icon-button>
-       *       </core-toolbar>
-       *       <div class="content"></div>
-       *     </core-header-panel>
-       *
-       * @attribute mode
-       * @type string
-       * @default ''
-       */
-      mode: {value: '', reflect: true},
-
-      /**
-       * The class used in waterfall-tall mode.  Change this if the header
-       * accepts a different class for toggling height, e.g. "medium-tall"
-       *
-       * @attribute tallClass
-       * @type string
-       * @default 'tall'
-       */
-      tallClass: 'tall',
-
-      /**
-       * If true, the drop-shadow is always shown no matter what mode is set to.
-       *
-       * @attribute shadow
-       * @type boolean
-       * @default false
-       */
-      shadow: false
-    },
-
-    animateDuration: 200,
-
-    modeConfigs: {
-      shadowMode: {'waterfall': 1, 'waterfall-tall': 1},
-      noShadow: {'seamed': 1, 'cover': 1, 'scroll': 1},
-      tallMode: {'waterfall-tall': 1},
-      outerScroll: {'scroll': 1}
-    },
-    
-    ready: function() {
-      this.scrollHandler = this.scroll.bind(this);
-      this.addListener();
-    },
-    
-    detached: function() {
-      this.removeListener(this.mode);
-    },
-    
-    addListener: function() {
-      this.scroller.addEventListener('scroll', this.scrollHandler);
-    },
-    
-    removeListener: function(mode) {
-      var s = this.getScrollerForMode(mode);
-      s.removeEventListener('scroll', this.scrollHandler);
-    },
-
-    domReady: function() {
-      this.async('scroll');
-    },
-
-    modeChanged: function(old) {
-      var configs = this.modeConfigs;
-      var header = this.header;
-      if (header) {
-        // in tallMode it may add tallClass to the header; so do the cleanup
-        // when mode is changed from tallMode to not tallMode
-        if (configs.tallMode[old] && !configs.tallMode[this.mode]) {
-          header.classList.remove(this.tallClass);
-          this.async(function() {
-            header.classList.remove('animate');
-          }, null, this.animateDuration);
-        } else {
-          header.classList.toggle('animate', configs.tallMode[this.mode]);
-        }
-      }
-      if (configs && (configs.outerScroll[this.mode] || configs.outerScroll[old])) {
-        this.removeListener(old);
-        this.addListener();
-      }
-      this.scroll();
-    },
-
-    get header() {
-      return this.$.headerContent.getDistributedNodes()[0];
-    },
-    
-    getScrollerForMode: function(mode) {
-      return this.modeConfigs.outerScroll[mode] ?
-          this.$.outerContainer : this.$.mainContainer;
-    },
-
-    /**
-     * Returns the scrollable element.
-     *
-     * @property scroller
-     * @type Object
-     */
-    get scroller() {
-      return this.getScrollerForMode(this.mode);
-    },
-
-    scroll: function() {
-      var configs = this.modeConfigs;
-      var main = this.$.mainContainer;
-      var header = this.header;
-
-      var sTop = main.scrollTop;
-      var atTop = sTop === 0;
-
-      this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
-          (atTop && configs.shadowMode[this.mode] || configs.noShadow[this.mode]));
-
-      if (header && configs.tallMode[this.mode]) {
-        header.classList.toggle(this.tallClass, atTop ||
-            header.classList.contains(this.tallClass) &&
-            main.scrollHeight < this.$.outerContainer.offsetHeight);
-      }
-
-      this.fire('scroll', {target: this.scroller}, this, false);
-    }
-
-  });
-