├── README.md
├── bower.json
├── core-scaffold.html
├── demo.html
├── index.html
└── metadata.html


/README.md:
--------------------------------------------------------------------------------
1 | core-scaffold
2 | =============
3 | 
4 | See the [component page](https://www.polymer-project.org/0.5/docs/elements/core-scaffold.html) for more information.
5 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "core-scaffold",
 3 |   "private": true,
 4 |   "dependencies": {
 5 |     "core-drawer-panel": "Polymer/core-drawer-panel#master",
 6 |     "core-header-panel": "Polymer/core-header-panel#master",
 7 |     "core-icon-button": "Polymer/core-icon-button#master",
 8 |     "core-toolbar": "Polymer/core-toolbar#master"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/core-scaffold.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  6 | Code distributed by Google as part of the polymer project is also
  7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  8 | -->
  9 | 
 10 | <!--
 11 | `core-scaffold` provides general application layout, introducing a 
 12 | responsive scaffold containing a header, toolbar, menu, title and 
 13 | areas for application content.
 14 | 
 15 | Example:
 16 | 
 17 |     <core-scaffold>
 18 |       <core-header-panel navigation flex mode="seamed">
 19 |         <core-toolbar>Application</core-toolbar>
 20 |         <core-menu theme="core-light-theme">
 21 |           <core-item icon="settings" label="item1"></core-item>
 22 |           <core-item icon="settings" label="item2"></core-item>
 23 |         </core-menu>
 24 |       </core-header-panel>
 25 |       <div tool>Title</div>
 26 |       <div>Main content goes here...</div>
 27 |     </core-scaffold>
 28 | 
 29 | Use `mode` to control the header and scrolling behavior of `core-header-panel`
 30 | and `responsiveWidth` to change the layout of the scaffold.  Use 'disableSwipe'
 31 | to disable swipe-to-open on toolbar.
 32 | 
 33 | Use `rightDrawer` to move position of folding toolbar to the right instead of
 34 | left (default).  This will also position content to the left of the menu button
 35 | instead of the right.  You can use `flex` within your `tool` content to push the menu
 36 | button to the far right:
 37 | 
 38 |     <core-scaffold rightDrawer>
 39 |       <div tool flex >Title</div>
 40 |     </core-scaffold>
 41 |     
 42 | You may also add `middle` or `bottom` classes to your `tool` content when using tall
 43 | modes to adjust vertical content positioning in the core-toolbar (e.g. when using 
 44 | mode="waterfall-tall"):
 45 | 
 46 |     <core-scaffold rightDrawer mode="waterfall-tall">
 47 |       <div tool flex >Title</div>
 48 |       <div tool horizontal layout flex center-justified class="middle">Title-middle</div>
 49 |       <div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>
 50 |     </core-scaffold>
 51 | 
 52 | To have the content fit to the main area, use `fit` attribute.
 53 | 
 54 |     <core-scaffold>
 55 |       <core-header-panel navigation flex mode="seamed">
 56 |         ....
 57 |       </core-header-panel>
 58 |       <div tool>Title</div>
 59 |       <div fit>Content fits to the main area</div>
 60 |     </core-scaffold>
 61 | 
 62 | @group Polymer Core Elements
 63 | @element core-scaffold
 64 | @homepage github.io
 65 | -->
 66 | 
 67 | <link rel="import" href="../core-toolbar/core-toolbar.html">
 68 | <link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
 69 | <link rel="import" href="../core-header-panel/core-header-panel.html">
 70 | <link rel="import" href="../core-icon-button/core-icon-button.html">
 71 | 
 72 | <polymer-element name="core-scaffold">
 73 | <template>
 74 | 
 75 |   <style>
 76 |     
 77 |     :host {
 78 |       display: block;
 79 |     }
 80 |     
 81 |     [drawer] {
 82 |       background-color: #fff;
 83 |       box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
 84 |     }
 85 |     
 86 |     [main] {
 87 |       height: 100%;
 88 |       background-color: #eee;
 89 |     }
 90 |     
 91 |     core-toolbar {
 92 |       background-color: #526E9C;
 93 |       color: #fff;
 94 |     }
 95 |     
 96 |     #drawerPanel:not([narrow]) #menuButton {
 97 |       display: none;
 98 |     }
 99 |     
100 |   </style>
101 | 
102 |   <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="{{drawerWidth}}" rightDrawer="{{rightDrawer}}" responsiveWidth="{{responsiveWidth}}" disableSwipe="{{disableSwipe}}">
103 | 
104 |     <div vertical layout drawer>
105 | 
106 |       <content select="[navigation], nav"></content>
107 | 
108 |     </div>
109 |     
110 |     <core-header-panel id="headerPanel" main mode="{{mode}}">
111 | 
112 |       <core-toolbar>
113 |         <template if="{{!rightDrawer}}">
114 |           <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
115 |         </template>
116 |         <content select="[tool]"></content>
117 |         <template if="{{rightDrawer}}">
118 |           <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
119 |         </template>
120 |       </core-toolbar>
121 |       
122 |       <content select="*"></content>
123 |       
124 |     </core-header-panel>
125 | 
126 |   </core-drawer-panel>
127 | 
128 | </template>
129 | <script>
130 | 
131 |   Polymer('core-scaffold', {
132 |     
133 |     /**
134 |      * Fired when the main content has been scrolled.  `event.detail.target` returns
135 |      * the scrollable element which you can use to access scroll info such as
136 |      * `scrollTop`.
137 |      *
138 |      *     <core-scaffold on-scroll="{{scrollHandler}}">
139 |      *       ...
140 |      *     </core-scaffold>
141 |      *
142 |      *
143 |      *     scrollHandler: function(event) {
144 |      *       var scroller = event.detail.target;
145 |      *       console.log(scroller.scrollTop);
146 |      *     }
147 |      *
148 |      * @event scroll
149 |      */
150 |     
151 |     publish: {
152 |       
153 |       /**
154 |        * Width of the drawer panel.
155 |        *
156 |        * @attribute drawerWidth
157 |        * @type string
158 |        * @default '256px'
159 |        */
160 |       drawerWidth: '256px',
161 |       
162 |       /**
163 |        * When the browser window size is smaller than the `responsiveWidth`, 
164 |        * `core-drawer-panel` changes to a narrow layout. In narrow layout, 
165 |        * the drawer will be stacked on top of the main panel.
166 |        *
167 |        * @attribute responsiveWidth
168 |        * @type string
169 |        * @default '600px'
170 |        */    
171 |       responsiveWidth: '600px',
172 |       
173 |       /**
174 |        * If true, position the drawer to the right. Also place menu icon to
175 |        * the right of the content instead of left.
176 |        *
177 |        * @attribute rightDrawer
178 |        * @type boolean
179 |        * @default false
180 |        */
181 |       rightDrawer: false,
182 | 
183 |       /**
184 |        * If true, swipe to open/close the drawer is disabled.
185 |        *
186 |        * @attribute disableSwipe
187 |        * @type boolean
188 |        * @default false
189 |        */
190 |       disableSwipe: false,
191 |   
192 |       /**
193 |        * Used to control the header and scrolling behaviour of `core-header-panel`
194 |        *
195 |        * @attribute mode
196 |        * @type string
197 |        * @default 'seamed'
198 |        */     
199 |       mode: {value: 'seamed', reflect: true}
200 |     },
201 |     
202 |     ready: function() {
203 |       this._scrollHandler = this.scroll.bind(this);
204 |       this.$.headerPanel.addEventListener('scroll', this._scrollHandler);
205 |     },
206 |     
207 |     detached: function() {
208 |       this.$.headerPanel.removeEventListener('scroll', this._scrollHandler);
209 |     },
210 | 
211 |     /**
212 |      * Toggle the drawer panel
213 |      * @method togglePanel
214 |      */    
215 |     togglePanel: function() {
216 |       this.$.drawerPanel.togglePanel();
217 |     },
218 | 
219 |     /**
220 |      * Open the drawer panel
221 |      * @method openDrawer
222 |      */      
223 |     openDrawer: function() {
224 |       this.$.drawerPanel.openDrawer();
225 |     },
226 | 
227 |     /**
228 |      * Close the drawer panel
229 |      * @method closeDrawer
230 |      */     
231 |     closeDrawer: function() {
232 |       this.$.drawerPanel.closeDrawer();
233 |     },
234 |     
235 |     /**
236 |      * Returns the scrollable element on the main area.
237 |      *
238 |      * @property scroller
239 |      * @type Object
240 |      */
241 |     get scroller() {
242 |       return this.$.headerPanel.scroller;
243 |     },
244 |     
245 |     scroll: function(e) {
246 |       this.fire('scroll', {target: e.detail.target}, this, false);
247 |     }
248 |     
249 |   });
250 | 
251 | </script>
252 | </polymer-element>
253 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | <html>
11 | <head>
12 |   <title>core-scaffold</title>
13 |   
14 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
15 |   <meta name="mobile-web-app-capable" content="yes">
16 |   <meta name="apple-mobile-web-app-capable" content="yes">
17 |   
18 |   <script src="../webcomponentsjs/webcomponents.js"></script>
19 |   
20 |   <link rel="import" href="core-scaffold.html">
21 |   <link rel="import" href="../core-header-panel/core-header-panel.html">
22 |   <link rel="import" href="../core-menu/core-menu.html">
23 |   <link rel="import" href="../core-item/core-item.html">
24 |   
25 |   <style>
26 | 
27 |     html, body {
28 |       height: 100%;
29 |       margin: 0;
30 |     }
31 |   
32 |     body {
33 |       font-family: sans-serif;
34 |     }
35 |     
36 |     core-scaffold {
37 |       position: absolute;
38 |       top: 0;
39 |       right: 0;
40 |       bottom: 0;
41 |       left: 0;
42 |     }
43 |     
44 |     .content {
45 |       background-color: #fff;
46 |       height: 5000px;
47 |       padding: 20px;
48 |     }
49 |     
50 |     /* some default styles for mode="cover" on core-scaffold */
51 |     core-scaffold[mode=cover]::shadow core-header-panel::shadow #mainContainer {
52 |       left: 120px;
53 |     }
54 |     
55 |     core-scaffold[mode=cover] .content {
56 |       margin: 20px 100px 20px 0;
57 |     }
58 |     
59 |   </style>
60 |   
61 | </head>
62 | 
63 | <body unresolved>
64 | 
65 |   <core-scaffold>
66 |   
67 |     <core-header-panel navigation flex mode="seamed">
68 |       <core-toolbar style="background-color: #526E9C; color: #fff;">Application</core-toolbar>
69 |       <core-menu>
70 |         <core-item icon="settings" label="item1"></core-item>
71 |         <core-item icon="settings" label="item2"></core-item>
72 |       </core-menu>
73 |     </core-header-panel>
74 |     
75 |     <div tool>Title</div>
76 |     
77 |     <div class="content">Content goes here...</div>
78 |   
79 |   </core-scaffold>
80 |   
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
 9 | -->
10 | <html>
11 | <head>
12 | 
13 |   <script src="../webcomponentsjs/webcomponents.js"></script>
14 |   <link rel="import" href="../core-component-page/core-component-page.html">
15 | 
16 | </head>
17 | <body unresolved>
18 | 
19 |   <core-component-page></core-component-page>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/metadata.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 |     @license
 3 |     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 |     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 |     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 |     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 |     Code distributed by Google as part of the polymer project is also
 8 |     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | <x-meta id="core-scaffold" label="Scaffold" isContainer group="Core">
11 | 
12 |   <template>
13 | 
14 |     <core-scaffold style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
15 |   
16 |       <core-header-panel navigation flex mode="seamed" style="background-color: #fff;">
17 |       
18 |         <core-toolbar style="background-color: #4F7DC9 ; color: #fff;"></core-toolbar>
19 |         
20 |         <core-menu valueattr="label" style="font-size: 16px;" theme="core-light-theme">
21 |           <core-item icon="settings" label="Item1"></core-item>
22 |           <core-item icon="settings" label="Item2"></core-item>
23 |         </core-menu>
24 |         
25 |       </core-header-panel>
26 |       
27 |       <div tool>Title</div>
28 |       
29 |     </core-scaffold>
30 | 
31 |   </template>
32 | 
33 |   <template id="imports">
34 | 
35 |     <link rel="import" href="core-scaffold.html">
36 |     <link rel="import" href="../core-header-panel/core-header-panel.html">
37 |     <link rel="import" href="../core-menu/core-menu.html">
38 |     <link rel="import" href="../core-item/core-item.html">
39 | 
40 |   </template>
41 | 
42 | </x-meta>
43 | 
44 | <x-meta id="core-card" label="Card" isContainer group="Core">
45 | 
46 |   <template>
47 |   
48 |     <core-card style="position: absolute; width: 300px; height: 300px; background-color: #fff; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;" layout vertical></core-card>
49 |   
50 |   </template>
51 |   
52 | </x-meta>
53 | 


--------------------------------------------------------------------------------