Index: bower_components/core-scaffold/core-scaffold.html |
diff --git a/bower_components/core-scaffold/core-scaffold.html b/bower_components/core-scaffold/core-scaffold.html |
deleted file mode 100644 |
index 26bece78c48817b10495cc25c39f05c9790500ac..0000000000000000000000000000000000000000 |
--- a/bower_components/core-scaffold/core-scaffold.html |
+++ /dev/null |
@@ -1,188 +0,0 @@ |
-<!-- |
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
-Code distributed by Google as part of the polymer project is also |
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
---> |
- |
-<!-- |
-`core-scaffold` provides general application layout, introducing a |
-responsive scaffold containing a header, toolbar, menu, title and |
-areas for application content. |
- |
-Example: |
- |
- <core-scaffold> |
- <core-header-panel navigation flex mode="seamed"> |
- <core-toolbar>Application</core-toolbar> |
- <core-menu theme="core-light-theme"> |
- <core-item icon="settings" label="item1"></core-item> |
- <core-item icon="settings" label="item2"></core-item> |
- </core-menu> |
- </core-header-panel> |
- <div tool>Title</div> |
- <div>Main content goes here...</div> |
- </core-scaffold> |
- |
-Use `mode` to control the header and scrolling behavior of `core-header-panel` |
-and `responsiveWidth` to change the layout of the scaffold. |
- |
-To have the content fits to the main area, use `fit` attribute. |
- |
- <core-scaffold> |
- <core-header-panel navigation flex mode="seamed"> |
- .... |
- </core-header-panel> |
- <div tool>Title</div> |
- <div fit>Content fits to the main area</div> |
- </core-scaffold> |
- |
-@group Polymer Core Elements |
-@element core-scaffold |
-@homepage github.io |
---> |
- |
-<link rel="import" href="../core-toolbar/core-toolbar.html"> |
-<link rel="import" href="../core-drawer-panel/core-drawer-panel.html"> |
-<link rel="import" href="../core-header-panel/core-header-panel.html"> |
-<link rel="import" href="../core-icon-button/core-icon-button.html"> |
- |
-<polymer-element name="core-scaffold"> |
-<template> |
- |
- <style> |
- |
- :host { |
- display: block; |
- } |
- |
- [drawer] { |
- background-color: #fff; |
- box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1); |
- } |
- |
- [main] { |
- height: 100%; |
- background-color: #eee; |
- } |
- |
- core-toolbar { |
- background-color: #526E9C; |
- color: #fff; |
- } |
- |
- #drawerPanel:not([narrow]) #menuButton { |
- display: none; |
- } |
- |
- </style> |
- |
- <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" responsiveWidth="{{responsiveWidth}}"> |
- |
- <div vertical layout drawer> |
- |
- <content select="[navigation], nav"></content> |
- |
- </div> |
- |
- <core-header-panel id="headerPanel" main mode="{{mode}}"> |
- |
- <core-toolbar> |
- <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button> |
- <content select="[tool]"></content> |
- </core-toolbar> |
- |
- <content select="*"></content> |
- |
- </core-header-panel> |
- |
- </core-drawer-panel> |
- |
-</template> |
-<script> |
- |
- Polymer('core-scaffold', { |
- |
- /** |
- * Fired when the main content has been scrolled. `event.detail.target` returns |
- * the scrollable element which you can use to access scroll info such as |
- * `scrollTop`. |
- * |
- * <core-scaffold on-scroll="{{scrollHandler}}"> |
- * ... |
- * </core-scaffold> |
- * |
- * |
- * scrollHandler: function(event) { |
- * var scroller = event.detail.target; |
- * console.log(scroller.scrollTop); |
- * } |
- * |
- * @event scroll |
- */ |
- |
- publish: { |
- /** |
- * When the browser window size is smaller than the `responsiveWidth`, |
- * `core-drawer-panel` changes to a narrow layout. In narrow layout, |
- * the drawer will be stacked on top of the main panel. |
- * |
- * @attribute responsiveWidth |
- * @type string |
- * @default '600px' |
- */ |
- responsiveWidth: '600px', |
- |
- /** |
- * Used to control the header and scrolling behaviour of `core-header-panel` |
- * |
- * @attribute mode |
- * @type string |
- * @default 'seamed' |
- */ |
- mode: {value: 'seamed', reflect: true} |
- }, |
- |
- ready: function() { |
- this._scrollHandler = this.scroll.bind(this); |
- this.$.headerPanel.addEventListener('scroll', this._scrollHandler); |
- }, |
- |
- detached: function() { |
- this.$.headerPanel.removeEventListener('scroll', this._scrollHandler); |
- }, |
- |
- /** |
- * Toggle the drawer panel |
- * @method togglePanel |
- */ |
- togglePanel: function() { |
- this.$.drawerPanel.togglePanel(); |
- }, |
- |
- /** |
- * Open the drawer panel |
- * @method openDrawer |
- */ |
- openDrawer: function() { |
- this.$.drawerPanel.openDrawer(); |
- }, |
- |
- /** |
- * Close the drawer panel |
- * @method closeDrawer |
- */ |
- closeDrawer: function() { |
- this.$.drawerPanel.closeDrawer(); |
- }, |
- |
- scroll: function(e) { |
- this.fire('scroll', {target: e.detail.target}, this, false); |
- } |
- |
- }); |
- |
-</script> |
-</polymer-element> |