Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(244)

Side by Side Diff: third_party/polymer/core-component-page/core-component-page.html

Issue 582873003: Polymer elements added to third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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.g ithub.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/CONTRI BUTORS.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/PATEN TS.txt
8 -->
9
10 <style>
11
12 body {
13 margin: 0;
14 }
15
16 </style>
17
18 <div hidden><!--
19 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
20 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
21 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
22 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
23 Code distributed by Google as part of the polymer project is also
24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
25 -->
26
27 <!--
28 The `core-layout` element is a helper for using
29 [CSS3 Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Fle xible_boxes).
30 A `core-layout` element enables a set of css selectors for easy flexbox styling.
31
32 Example:
33
34 <core-layout>
35 <div>Left</div>
36 <div core-flex>Main</div>
37 <div>Right</div>
38 </core-layout>
39
40 Renders something like this:
41
42 ---------------------------------
43 |-------------------------------|
44 ||Left| Main |Right||
45 |-------------------------------|
46 ---------------------------------
47
48 __Note__: the `core-layout` element applies layout to itself if it has children or to
49 its parent element, if it does not. This feature allows you to apply layout to a n
50 arbitrary parent.
51
52 Elements can layout horizontally, such that their items stack
53 left to right or vertically, such that their items stack top to bottom. The
54 default is horizontal. Set `vertical` to true to layout the elements vertically.
55
56 To make a particular child _flexible_, use the `core-flex` attribute.
57 You can control flexibility from 1 to 3 by giving the attribute a
58 corresponding value. For other values, apply the css manually.
59
60 It's common in flexbox parlance to hear the terms _main axis_ and _cross axis_.
61 For a horizontal layout the main axis is horizontal and the cross axis is vertic al.
62 These are exchanged for a vertical layout.
63
64 To effect alignment in the main axis, use the `justify` attribute. The
65 supported values are `start`, `center`, `end`, and `between`.
66
67 To effect alignment in the cross axis, use the `align` attribute. The
68 supported values are `start`, `center`, and `end`.
69
70 Note, it's also possible to include the `core-layout.css` stylesheet separate
71 from the `core-layout` element. Including the element automatically includes
72 the stylesheet. To use the stylesheet independent of the element, css classes
73 should be used of the following form: `core-h`, `core-v`, `core-flex`,
74 `core-justify-start`, and `core-align-start`.
75
76 The `core-layout` and css file also provide a few commonly needed layout
77 behaviors. Apply the `core-fit` class to fit an element to its container. To
78 ensure a container will contain an element inside it with the `core-fit` class
79 give it the `core-relative` class.
80
81 More examples:
82
83 <core-layout vertical>
84
85 <div>Header</div>
86 <div core-flex>Body</div>
87 <div>Footer</div>
88
89 </core-layout>
90
91 ----------
92 ||------||
93 ||Header||
94 ||------||
95 ||Body ||
96 || ||
97 || ||
98 || ||
99 || ||
100 || ||
101 || ||
102 ||------||
103 ||Footer||
104 ||------||
105 ----------
106
107 Justify:
108
109 <core-layout justify="end">
110 <div core-flex>Left</div>
111 <div>Main</div>
112 <div>Right</div>
113 </core-layout>
114
115 ---------------------------------
116 |-------------------------------|
117 || Left|Main|Right||
118 |-------------------------------|
119 ---------------------------------
120
121 Align:
122
123 <core-layout align="center">
124 <div>Left</div>
125 <div core-flex>Main</div>
126 <div>Right</div>
127 </core-layout>
128
129 ---------------------------------
130 |-------------------------------|
131 || | | ||
132 ||Left| Main |Right||
133 || | | ||
134 |-------------------------------|
135 ---------------------------------
136
137
138 To layout contents of a parent element, place a `core-layout` inside of it:
139
140 <some-element>
141 <core-layout></core-layout>
142 <div>Left</div>
143 <div core-flex>Main</div>
144 <div>Right</div>
145 <some-element>
146
147 ---------------------------------
148 |-------------------------------|
149 ||Left| Main |Right||
150 |-------------------------------|
151 ---------------------------------
152
153 You may also use the `core-layout` stylesheet directly:
154
155 <link rel="stylesheet" href="../core-layout/core-layout.css">
156 <div class="core-h core-justify-end">
157 <div core-flex>Left</div>
158 <div>Main</div>
159 <div>Right</div>
160 </div>
161
162 ---------------------------------
163 |-------------------------------|
164 || Left|Main|Right||
165 |-------------------------------|
166 ---------------------------------
167
168 @group Polymer Core Elements
169 @element core-layout
170
171 -->
172 <link rel="import" href="../polymer/polymer.html">
173
174 <polymer-element name="core-layout" attributes="vertical justify align isContain er reverse" assetpath="../core-layout/">
175
176 <template>
177
178 <style no-shim="">/*
179 Copyright 2013 The Polymer Authors. All rights reserved.
180 Use of this source code is governed by a BSD-style
181 license that can be found in the LICENSE file.
182 */
183
184 .core-h, .core-v {
185 display: -webkit-box !important;
186 display: -ms-flexbox !important;
187 display: -moz-flex !important;
188 display: -webkit-flex !important;
189 display: flex !important;
190 }
191
192 .core-h {
193 -webkit-box-orient: horizontal;
194 -ms-flex-direction: row;
195 -moz-flex-direction: row;
196 -webkit-flex-direction: row;
197 flex-direction: row;
198 }
199
200 .core-h.core-reverse {
201 -webkit-box-direction: reverse;
202 -ms-flex-direction: row-reverse;
203 -moz-flex-direction: row-reverse;
204 -webkit-flex-direction: row-reverse;
205 flex-direction: row-reverse;
206 }
207
208 .core-v {
209 -webkit-box-orient: vertical;
210 -ms-flex-direction: column;
211 -moz-flex-direction: column;
212 -webkit-flex-direction: column;
213 flex-direction: column;
214 }
215
216 .core-v.core-reverse {
217 -webkit-box-direction: reverse;
218 -ms-flex-direction: column-reverse;
219 -moz-flex-direction: column-reverse;
220 -webkit-flex-direction: column-reverse;
221 flex-direction: column-reverse;
222 }
223
224 .core-relative {
225 position: relative;
226 }
227
228 .core-fit {
229 position: absolute;
230 top: 0;
231 left: 0;
232 height: 100%;
233 width: 100%;
234 }
235
236 body.core-fit {
237 margin: 0;
238 }
239
240 .core-flex, [core-flex] {
241 -webkit-box-flex: 1;
242 -ms-flex: 1;
243 -moz-flex: 1;
244 -webkit-flex: 1;
245 flex: 1;
246 }
247
248 .core-flex-auto, [core-flex-auto] {
249 -webkit-box-flex: 1;
250 -ms-flex: 1 1 auto;
251 -moz-flex: 1 1 auto;
252 -webkit-flex: 1 1 auto;
253 flex: 1 1 auto;
254 }
255
256 .core-flex-none, [core-flex-none] {
257 -webkit-box-flex: none;
258 -ms-flex: none;
259 -moz-flex: none;
260 -webkit-flex: none;
261 flex: none;
262 }
263
264 .core-flex1, [core-flex=1] {
265 -webkit-box-flex: 1;
266 -ms-flex: 1;
267 -moz-flex: 1;
268 -webkit-flex: 1;
269 flex: 1;
270 }
271
272 .core-flex2, [core-flex=2] {
273 -webkit-box-flex: 2;
274 -ms-flex: 2;
275 -moz-flex: 2;
276 -webkit-flex: 2;
277 flex: 2;
278 }
279
280 .core-flex3, [core-flex=3] {
281 -webkit-box-flex: 3;
282 -ms-flex: 3;
283 -moz-flex: 3;
284 -webkit-flex: 3;
285 flex: 3;
286 }
287
288 /* distributed elements */
289 ::content > .core-flex, ::content > [core-flex] {
290 -webkit-box-flex: 1;
291 -ms-flex: 1;
292 -moz-flex: 1;
293 -webkit-flex: 1;
294 flex: 1;
295 }
296
297 ::content > .core-flex-auto, ::content > [core-flex-auto] {
298 -webkit-box-flex: 1;
299 -ms-flex: 1 1 auto;
300 -moz-flex: 1 1 auto;
301 -webkit-flex: 1 1 auto;
302 flex: 1 1 auto;
303 }
304
305 ::content > .core-flex-none, ::content > [core-flex-none] {
306 -webkit-box-flex: none;
307 -ms-flex: none;
308 -moz-flex: none;
309 -webkit-flex: none;
310 flex: none;
311 }
312
313 ::content > .core-flex1, ::content > [core-flex=1] {
314 -webkit-box-flex: 1;
315 -ms-flex: 1;
316 -moz-flex: 1;
317 -webkit-flex: 1;
318 flex: 1;
319 }
320
321 ::content > .core-flex2, ::content > [core-flex=2] {
322 -webkit-box-flex: 2;
323 -ms-flex: 2;
324 -moz-flex: 2;
325 -webkit-flex: 2;
326 flex: 2;
327 }
328
329 ::content > .core-flex3, ::content > [core-flex=3] {
330 -webkit-box-flex: 3;
331 -ms-flex: 3;
332 -moz-flex: 3;
333 -webkit-flex: 3;
334 flex: 3;
335 }
336
337 /* alignment in main axis */
338 .core-justify-start {
339 -webkit-box-pack: start;
340 -ms-flex-pack: start;
341 -moz-justify-content: flex-start;
342 -webkit-justify-content: flex-start;
343 justify-content: flex-start;
344 }
345
346 .core-justify-center {
347 -webkit-box-pack: center;
348 -ms-flex-pack: center;
349 -moz-justify-content: center;
350 -webkit-justify-content: center;
351 justify-content: center;
352 }
353
354 .core-justify-end {
355 -webkit-box-pack: end;
356 -ms-flex-pack: end;
357 -moz-justify-content: flex-end;
358 -webkit-justify-content: flex-end;
359 justify-content: flex-end;
360 }
361
362 .core-justify-between {
363 -webkit-box-pack: justify;
364 -ms-flex-pack: justify;
365 -moz-justify-content: space-between;
366 -webkit-justify-content: space-between;
367 justify-content: space-between;
368 }
369
370 /* alignment in cross axis */
371 .core-align-start {
372 -webkit-box-align: start;
373 -ms-flex-align: start;
374 -moz-align-items: flex-start;
375 -webkit-align-items: flex-start;
376 align-items: flex-start;
377 }
378
379 .core-align-center {
380 -webkit-box-align: center;
381 -ms-flex-align: center;
382 -moz-align-items: center;
383 -webkit-align-items: center;
384 align-items: center;
385 }
386
387 .core-align-end {
388 -webkit-box-align: end;
389 -ms-flex-align: end;
390 -moz-align-items: flex-end;
391 -webkit-align-items: flex-end;
392 align-items: flex-end;
393 }
394 </style>
395 <style no-shim="">/*
396 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
397 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
398 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
399 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
400 Code distributed by Google as part of the polymer project is also
401 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
402 */
403
404 :host {
405 display: -webkit-box !important;
406 display: -ms-flexbox !important;
407 display: -moz-flex !important;
408 display: -webkit-flex !important;
409 display: flex !important;
410 }
411
412 :host(.core-h) {
413 -webkit-box-orient: horizontal;
414 -ms-flex-direction: row;
415 -moz-flex-direction: row;
416 -webkit-flex-direction: row;
417 flex-direction: row;
418 }
419
420 :host(.core-v) {
421 -webkit-box-orient: vertical;
422 -ms-flex-direction: column;
423 -moz-flex-direction: column;
424 -webkit-flex-direction: column;
425 flex-direction: column;
426 }
427
428 :host(.core-h.core-reverse) {
429 -webkit-box-direction: reverse;
430 -ms-flex-direction: row-reverse;
431 -moz-flex-direction: row-reverse;
432 -webkit-flex-direction: row-reverse;
433 flex-direction: row-reverse;
434 }
435
436 :host(.core-v.core-reverse) {
437 -webkit-box-direction: reverse;
438 -ms-flex-direction: column-reverse;
439 -moz-flex-direction: column-reverse;
440 -webkit-flex-direction: column-reverse;
441 flex-direction: column-reverse;
442 }
443
444 /* alignment in main axis */
445 :host(.core-justify-start) {
446 -webkit-box-pack: start;
447 -ms-flex-pack: start;
448 -moz-justify-content: flex-start;
449 -webkit-justify-content: flex-start;
450 justify-content: flex-start;
451 }
452
453 :host(.core-justify-center) {
454 -webkit-box-pack: center;
455 -ms-flex-pack: center;
456 -moz-justify-content: center;
457 -webkit-justify-content: center;
458 justify-content: center;
459 }
460
461 :host(.core-justify-end) {
462 -webkit-box-pack: end;
463 -ms-flex-pack: end;
464 -moz-justify-content: flex-end;
465 -webkit-justify-content: flex-end;
466 justify-content: flex-end;
467 }
468
469 :host(.core-justify-between) {
470 -webkit-box-pack: justify;
471 -ms-flex-pack: justify;
472 -moz-justify-content: space-between;
473 -webkit-justify-content: space-between;
474 justify-content: space-between;
475 }
476
477 /* alignment in cross axis */
478 :host(.core-align-start) {
479 -webkit-box-align: start;
480 -ms-flex-align: start;
481 -moz-align-items: flex-start;
482 -webkit-align-items: flex-start;
483 align-items: flex-start;
484 }
485
486 :host(.core-align-center) {
487 -webkit-box-align: center;
488 -ms-flex-align: center;
489 -moz-align-items: center;
490 -webkit-align-items: center;
491 align-items: center;
492 }
493
494 :host(.core-align-end) {
495 -webkit-box-align: end;
496 -ms-flex-align: end;
497 -moz-align-items: flex-end;
498 -webkit-align-items: flex-end;
499 align-items: flex-end;
500 }
501 </style>
502
503 </template>
504
505 <script>
506
507 (function() {
508
509 Polymer('core-layout', {
510
511 isContainer: false,
512 /**
513 * Controls if the element lays out vertically or not.
514 *
515 * @attribute vertical
516 * @type boolean
517 * @default false
518 */
519 vertical: false,
520 /**
521 * Controls how the items are aligned in the main-axis direction. For
522 * example for a horizontal layout, this controls how each item is aligned
523 * horizontally.
524 *
525 * @attribute justify
526 * @type string start|center|end|between
527 * @default ''
528 */
529 justify: '',
530 /**
531 * Controls how the items are aligned in cross-axis direction. For
532 * example for a horizontal layout, this controls how each item is aligned
533 * vertically.
534 *
535 * @attribute align
536 * @type string start|center|end
537 * @default ''
538 */
539 align: '',
540 /**
541 * Controls whether or not the items layout in reverse order.
542 *
543 * @attribute reverse
544 * @type boolean
545 * @default false
546 */
547 reverse: false,
548 layoutPrefix: 'core-',
549
550 // NOTE: include template so that styles are loaded, but remove
551 // so that we can decide dynamically what part to include
552 registerCallback: function(polymerElement) {
553 var template = polymerElement.querySelector('template');
554 this.styles = template.content.querySelectorAll('style').array();
555 this.styles.forEach(function(s) {
556 s.removeAttribute('no-shim');
557 })
558 },
559
560 fetchTemplate: function() {
561 return null;
562 },
563
564 attached: function() {
565 this.installScopeStyle(this.styles[0]);
566 if (this.children.length) {
567 this.isContainer = true;
568 }
569 var container = this.isContainer ? this : this.parentNode;
570 // detect if laying out a shadowRoot host.
571 var forHost = container instanceof ShadowRoot;
572 if (forHost) {
573 this.installScopeStyle(this.styles[1], 'host');
574 container = container.host || document.body;
575 }
576 this.layoutContainer = container;
577 },
578
579 detached: function() {
580 this.layoutContainer = null;
581 },
582
583 layoutContainerChanged: function(old) {
584 this.style.display = this.layoutContainer === this ? null : 'none';
585 this.verticalChanged();
586 this.alignChanged();
587 this.justifyChanged();
588 },
589
590 setLayoutClass: function(prefix, old, newValue) {
591 if (this.layoutContainer) {
592 prefix = this.layoutPrefix + prefix;
593 if (old) {
594 this.layoutContainer.classList.remove(prefix + old);
595 }
596 if (newValue) {
597 this.layoutContainer.classList.add(prefix + newValue);
598 }
599 }
600 },
601
602 verticalChanged: function(old) {
603 old = old ? 'v' : 'h';
604 var vertical = this.vertical ? 'v' : 'h';
605 this.setLayoutClass('', old, vertical);
606 },
607
608 alignChanged: function(old) {
609 this.setLayoutClass('align-', old, this.align);
610 },
611
612 justifyChanged: function(old) {
613 this.setLayoutClass('justify-', old, this.justify);
614 },
615
616 reverseChanged: function(old) {
617 old = old ? 'reverse' : '';
618 var newValue = this.reverse ? 'reverse' : '';
619 this.setLayoutClass('', old, newValue);
620 }
621
622 });
623
624 })();
625 </script>
626
627 </polymer-element>
628 </div>
629 <div hidden>
630 <!--
631 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
632 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
633 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
634 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
635 Code distributed by Google as part of the polymer project is also
636 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
637 -->
638 <!--
639 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
640 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
641 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
642 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
643 Code distributed by Google as part of the polymer project is also
644 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
645 -->
646
647 <!--
648 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
649 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
650 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
651 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
652 Code distributed by Google as part of the polymer project is also
653 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
654 -->
655
656 <!--
657 /**
658 * @group Polymer Core Elements
659 *
660 * The `core-iconset-svg` element allows users to define their own icon sets
661 * that contain svg icons. The svg icon elements should be children of the
662 * `core-iconset-svg` element. Multiple icons should be given distinct id's.
663 *
664 * Using svg elements to create icons has a few advantages over traditional
665 * bitmap graphics like jpg or png. Icons that use svg are vector based so they
666 * are resolution independent and should look good on any device. They are
667 * stylable via css. Icons can be themed, colorized, and even animated.
668 *
669 * Example:
670 *
671 * <core-iconset-svg id="my-svg-icons" iconSize="24">
672 * <svg>
673 * <defs>
674 * <g id="shape">
675 * <rect x="50" y="50" width="50" height="50" />
676 * <circle cx="50" cy="50" r="50" />
677 * </g>
678 * </defs>
679 * </svg>
680 * </core-iconset-svg>
681 *
682 * This will automatically register the icon set "my-svg-icons" to the iconset
683 * database. To use these icons from within another element, make a
684 * `core-iconset` element and call the `byId` method
685 * to retrieve a given iconset. To apply a particular icon inside an
686 * element use the `applyIcon` method. For example:
687 *
688 * iconset.applyIcon(iconNode, 'car');
689 *
690 * @element core-iconset-svg
691 * @extends core-meta
692 * @homepage github.io
693 */
694 -->
695
696 <!--
697 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
698 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
699 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
700 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
701 Code distributed by Google as part of the polymer project is also
702 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
703 -->
704
705 <!--
706 /**
707 * @group Polymer Core Elements
708 *
709 * The `core-iconset` element allows users to define their own icon sets.
710 * The `src` property specifies the url of the icon image. Multiple icons may
711 * be included in this image and they may be organized into rows.
712 * The `icons` property is a space separated list of names corresponding to the
713 * icons. The names must be ordered as the icons are ordered in the icon image.
714 * Icons are expected to be square and are the size specified by the `iconSize`
715 * property. The `width` property corresponds to the width of the icon image
716 * and must be specified if icons are arranged into multiple rows in the image.
717 *
718 * All `core-iconset` elements are available for use by other `core-iconset`
719 * elements via a database keyed by id. Typically, an element author that wants
720 * to support a set of custom icons uses a `core-iconset` to retrieve
721 * and use another, user-defined iconset.
722 *
723 * Example:
724 *
725 * <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24"
726 * icons="location place starta stopb bus car train walk">
727 * </core-iconset>
728 *
729 * This will automatically register the icon set "my-icons" to the iconset
730 * database. To use these icons from within another element, make a
731 * `core-iconset` element and call the `byId` method to retrieve a
732 * given iconset. To apply a particular icon to an element, use the
733 * `applyIcon` method. For example:
734 *
735 * iconset.applyIcon(iconNode, 'car');
736 *
737 * Themed icon sets are also supported. The `core-iconset` can contain child
738 * `property` elements that specify a theme with an offsetX and offsetY of the
739 * theme within the icon resource. For example.
740 *
741 * <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24"
742 * icons="location place starta stopb bus car train walk">
743 * <property theme="special" offsetX="256" offsetY="24"></property>
744 * </core-iconset>
745 *
746 * Then a themed icon can be applied like this:
747 *
748 * iconset.applyIcon(iconNode, 'car', 'special');
749 *
750 * @element core-iconset
751 * @extends core-meta
752 * @homepage github.io
753 */
754 -->
755
756 <!--
757 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
758 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
759 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
760 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
761 Code distributed by Google as part of the polymer project is also
762 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
763 -->
764
765 <!--
766 `core-meta` provides a method of constructing a self-organizing database.
767 It is useful to collate element meta-data for things like catalogs and for
768 designer.
769
770 Example, an element folder has a `metadata.html` file in it, that contains a
771 `core-meta`, something like this:
772
773 <core-meta id="my-element" label="My Element">
774 <property name="color" value="blue"></property>
775 </core-meta>
776
777 An application can import as many of these files as it wants, and then use
778 `core-meta` again to access the collected data.
779
780 <script>
781 var meta = document.createElement('core-meta');
782 console.log(meta.list); // dump a list of all meta-data elements that have been created
783 </script>
784
785 Use `byId(id)` to retrive a specific core-meta.
786
787 <script>
788 var meta = document.createElement('core-meta');
789 console.log(meta.byId('my-element'));
790 </script>
791
792 By default all meta-data are stored in a single databse. If your meta-data
793 have different types and want them to be stored separately, use `type` to
794 differentiate them.
795
796 Example:
797
798 <core-meta id="x-foo" type="xElt"></core-meta>
799 <core-meta id="x-bar" type="xElt"></core-meta>
800 <core-meta id="y-bar" type="yElt"></core-meta>
801
802 <script>
803 var meta = document.createElement('core-meta');
804 meta.type = 'xElt';
805 console.log(meta.list);
806 </script>
807
808 @group Polymer Core Elements
809 @element core-meta
810 @homepage github.io
811 -->
812
813
814
815 <polymer-element name="core-meta" attributes="list label type" hidden assetpath= "../core-meta/">
816 <script>
817
818 (function() {
819
820 var SKIP_ID = 'meta';
821 var metaData = {}, metaArray = {};
822
823 Polymer('core-meta', {
824
825 /**
826 * The type of meta-data. All meta-data with the same type with be
827 * stored together.
828 *
829 * @attribute type
830 * @type string
831 * @default 'default'
832 */
833 type: 'default',
834
835 alwaysPrepare: true,
836
837 ready: function() {
838 this.register(this.id);
839 },
840
841 get metaArray() {
842 var t = this.type;
843 if (!metaArray[t]) {
844 metaArray[t] = [];
845 }
846 return metaArray[t];
847 },
848
849 get metaData() {
850 var t = this.type;
851 if (!metaData[t]) {
852 metaData[t] = {};
853 }
854 return metaData[t];
855 },
856
857 register: function(id, old) {
858 if (id && id !== SKIP_ID) {
859 this.unregister(this, old);
860 this.metaData[id] = this;
861 this.metaArray.push(this);
862 }
863 },
864
865 unregister: function(meta, id) {
866 delete this.metaData[id || meta.id];
867 var i = this.metaArray.indexOf(meta);
868 if (i >= 0) {
869 this.metaArray.splice(i, 1);
870 }
871 },
872
873 /**
874 * Returns a list of all meta-data elements with the same type.
875 *
876 * @attribute list
877 * @type array
878 * @default []
879 */
880 get list() {
881 return this.metaArray;
882 },
883
884 /**
885 * Retrieves meta-data by ID.
886 *
887 * @method byId
888 * @param {String} id The ID of the meta-data to be returned.
889 * @returns Returns meta-data.
890 */
891 byId: function(id) {
892 return this.metaData[id];
893 }
894
895 });
896
897 })();
898
899 </script>
900 </polymer-element>
901
902
903 <polymer-element name="core-iconset" extends="core-meta" attributes="src width i cons iconSize" assetpath="../core-iconset/">
904
905 <script>
906
907 Polymer('core-iconset', {
908
909 /**
910 * The URL of the iconset image.
911 *
912 * @attribute src
913 * @type string
914 * @default ''
915 */
916 src: '',
917
918 /**
919 * The width of the iconset image. This must only be specified if the
920 * icons are arranged into separate rows inside the image.
921 *
922 * @attribute width
923 * @type number
924 * @default 0
925 */
926 width: 0,
927
928 /**
929 * A space separated list of names corresponding to icons in the iconset
930 * image file. This list must be ordered the same as the icon images
931 * in the image file.
932 *
933 * @attribute icons
934 * @type string
935 * @default ''
936 */
937 icons: '',
938
939 /**
940 * The size of an individual icon. Note that icons must be square.
941 *
942 * @attribute iconSize
943 * @type number
944 * @default 24
945 */
946 iconSize: 24,
947
948 /**
949 * The horizontal offset of the icon images in the inconset src image.
950 * This is typically used if the image resource contains additional images
951 * beside those intended for the iconset.
952 *
953 * @attribute offsetX
954 * @type number
955 * @default 0
956 */
957 offsetX: 0,
958 /**
959 * The vertical offset of the icon images in the inconset src image.
960 * This is typically used if the image resource contains additional images
961 * beside those intended for the iconset.
962 *
963 * @attribute offsetY
964 * @type number
965 * @default 0
966 */
967 offsetY: 0,
968 type: 'iconset',
969
970 created: function() {
971 this.iconMap = {};
972 this.iconNames = [];
973 this.themes = {};
974 },
975
976 ready: function() {
977 // TODO(sorvell): ensure iconset's src is always relative to the main
978 // document
979 if (this.src && (this.ownerDocument !== document)) {
980 this.src = this.resolvePath(this.src, this.ownerDocument.baseURI);
981 }
982 this.super();
983 this.updateThemes();
984 },
985
986 iconsChanged: function() {
987 var ox = this.offsetX;
988 var oy = this.offsetY;
989 this.icons && this.icons.split(/\s+/g).forEach(function(name, i) {
990 this.iconNames.push(name);
991 this.iconMap[name] = {
992 offsetX: ox,
993 offsetY: oy
994 }
995 if (ox + this.iconSize < this.width) {
996 ox += this.iconSize;
997 } else {
998 ox = this.offsetX;
999 oy += this.iconSize;
1000 }
1001 }, this);
1002 },
1003
1004 updateThemes: function() {
1005 var ts = this.querySelectorAll('property[theme]');
1006 ts && ts.array().forEach(function(t) {
1007 this.themes[t.getAttribute('theme')] = {
1008 offsetX: parseInt(t.getAttribute('offsetX')) || 0,
1009 offsetY: parseInt(t.getAttribute('offsetY')) || 0
1010 };
1011 }, this);
1012 },
1013
1014 // TODO(ffu): support retrived by index e.g. getOffset(10);
1015 /**
1016 * Returns an object containing `offsetX` and `offsetY` properties which
1017 * specify the pixel locaion in the iconset's src file for the given
1018 * `icon` and `theme`. It's uncommon to call this method. It is useful,
1019 * for example, to manually position a css backgroundImage to the proper
1020 * offset. It's more common to use the `applyIcon` method.
1021 *
1022 * @method getOffset
1023 * @param {String|Number} icon The name of the icon or the index of the
1024 * icon within in the icon image.
1025 * @param {String} theme The name of the theme.
1026 * @returns {Object} An object specifying the offset of the given icon
1027 * within the icon resource file; `offsetX` is the horizontal offset and
1028 * `offsetY` is the vertical offset. Both values are in pixel units.
1029 */
1030 getOffset: function(icon, theme) {
1031 var i = this.iconMap[icon];
1032 if (!i) {
1033 var n = this.iconNames[Number(icon)];
1034 i = this.iconMap[n];
1035 }
1036 var t = this.themes[theme];
1037 if (i && t) {
1038 return {
1039 offsetX: i.offsetX + t.offsetX,
1040 offsetY: i.offsetY + t.offsetY
1041 }
1042 }
1043 return i;
1044 },
1045
1046 /**
1047 * Applies an icon to the given element as a css background image. This
1048 * method does not size the element, and it's often necessary to set
1049 * the element's height and width so that the background image is visible.
1050 *
1051 * @method applyIcon
1052 * @param {Element} element The element to which the background is
1053 * applied.
1054 * @param {String|Number} icon The name or index of the icon to apply.
1055 * @param {String} theme (optional) The name of the theme for the icon.
1056 * @param {Number} scale (optional, defaults to 1) A scaling factor
1057 * with which the icon can be magnified.
1058 */
1059 applyIcon: function(element, icon, scale) {
1060 var offset = this.getOffset(icon);
1061 scale = scale || 1;
1062 if (element && offset) {
1063 var style = element.style;
1064 style.backgroundImage = 'url(' + this.src + ')';
1065 style.backgroundPosition = (-offset.offsetX * scale + 'px') +
1066 ' ' + (-offset.offsetY * scale + 'px');
1067 style.backgroundSize = scale === 1 ? 'auto' :
1068 this.width * scale + 'px';
1069 }
1070 }
1071
1072 });
1073
1074 </script>
1075
1076 </polymer-element>
1077
1078
1079 <polymer-element name="core-iconset-svg" extends="core-meta" attributes="iconSiz e" assetpath="../core-iconset-svg/">
1080
1081 <script>
1082
1083 Polymer('core-iconset-svg', {
1084
1085
1086 /**
1087 * The size of an individual icon. Note that icons must be square.
1088 *
1089 * @attribute iconSize
1090 * @type number
1091 * @default 24
1092 */
1093 iconSize: 24,
1094 type: 'iconset',
1095
1096 created: function() {
1097 this._icons = {};
1098 },
1099
1100 ready: function() {
1101 this.super();
1102 this.updateIcons();
1103 },
1104
1105 iconById: function(id) {
1106 return this._icons[id] || (this._icons[id] = this.querySelector('#' + id ));
1107 },
1108
1109 cloneIcon: function(id) {
1110 var icon = this.iconById(id);
1111 if (icon) {
1112 var content = icon.cloneNode(true);
1113 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg' );
1114 svg.setAttribute('viewBox', '0 0 ' + this.iconSize + ' ' +
1115 this.iconSize);
1116 // NOTE(dfreedm): work around https://crbug.com/370136
1117 svg.style.pointerEvents = 'none';
1118 svg.appendChild(content);
1119 return svg;
1120 }
1121 },
1122
1123 get iconNames() {
1124 if (!this._iconNames) {
1125 this._iconNames = this.findIconNames();
1126 }
1127 return this._iconNames;
1128 },
1129
1130 findIconNames: function() {
1131 var icons = this.querySelectorAll('[id]').array();
1132 if (icons.length) {
1133 return icons.map(function(n){ return n.id });
1134 }
1135 },
1136
1137 /**
1138 * Applies an icon to the given element. The svg icon is added to the
1139 * element's shadowRoot if one exists or directly to itself.
1140 *
1141 * @method applyIcon
1142 * @param {Element} element The element to which the icon is
1143 * applied.
1144 * @param {String|Number} icon The name the icon to apply.
1145 */
1146 applyIcon: function(element, icon, scale) {
1147 var root = element.shadowRoot || element;
1148 // remove old
1149 var old = root.querySelector('svg');
1150 if (old) {
1151 old.remove();
1152 }
1153 // install new
1154 var svg = this.cloneIcon(icon);
1155 if (!svg) {
1156 return;
1157 }
1158 var size = scale * this.iconSize;
1159 if (size) {
1160 svg.style.height = svg.style.width = size + 'px';
1161 } else {
1162 svg.setAttribute('height', '100%');
1163 svg.setAttribute('width', '100%');
1164 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
1165 }
1166 svg.style.display = 'block';
1167 root.insertBefore(svg, root.firstElementChild);
1168 },
1169
1170 /**
1171 * Tell users of the iconset, that the set has loaded.
1172 * This finds all elements matching the selector argument and calls
1173 * the method argument on them.
1174 * @method updateIcons
1175 * @param selector {string} css selector to identify iconset users,
1176 * defaults to '[icon]'
1177 * @param method {string} method to call on found elements,
1178 * defaults to 'updateIcon'
1179 */
1180 updateIcons: function(selector, method) {
1181 selector = selector || '[icon]';
1182 method = method || 'updateIcon';
1183 var deep = window.ShadowDOMPolyfill ? '' : 'html /deep/ ';
1184 var i$ = document.querySelectorAll(deep + selector);
1185 for (var i=0, e; e=i$[i]; i++) {
1186 if (e[method]) {
1187 e[method].call(e);
1188 }
1189 }
1190 }
1191
1192
1193 });
1194
1195 </script>
1196
1197 </polymer-element>
1198
1199 <core-iconset-svg id="icons" iconsize="24">
1200 <svg><defs>
1201 <g id="accessibility"><path d="M12,2c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9, 2,12,2z M21,9h-6v13h-2v-6h-2v6H9V9H3V7h18V9z"></path></g>
1202 <g id="account-box"><path d="M3,5l0,14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5c0-1. 1-0.9-2-2-2H5C3.9,3,3,3.9,3,5z M15,9c0,1.7-1.3,3-3,3c-1.7,0-3-1.3-3-3c0-1.7,1.3- 3,3-3C13.7,6,15,7.3,15,9z M6,17c0-2,4-3.1,6-3.1s6,1.1,6,3.1v1H6V17z"></path></g>
1203 <g id="account-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5 ,10-10S17.5,2,12,2z M12,5c1.7,0,3,1.3,3,3c0,1.7-1.3,3-3,3c-1.7,0-3-1.3-3-3C9,6.3 ,10.3,5,12,5z M12,19.2c-2.5,0-4.7-1.3-6-3.2c0-2,4-3.1,6-3.1c2,0,6,1.1,6,3.1C16.7 ,17.9,14.5,19.2,12,19.2z"></path></g>
1204 <g id="add"><path d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z"></path></g>
1205 <g id="add-box"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0 .9,2-2V5C21,3.9,20.1,3,19,3z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"></path></g>
1206 <g id="add-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10- 10S17.5,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"></path></g>
1207 <g id="add-circle-outline"><path d="M13,7h-2v4H7v2h4v4h2v-4h4v-2h-4V7z M12,2C6.5 ,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8 -8s3.6-8,8-8c4.4,0,8,3.6,8,8S16.4,20,12,20z"></path></g>
1208 <g id="android"><path d="M6,18c0,0.6,0.4,1,1,1h1v3.5C8,23.3,8.7,24,9.5,24c0.8,0, 1.5-0.7,1.5-1.5V19h2v3.5c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5V19h1c0.6,0, 1-0.4,1-1V8H6V18z M3.5,8C2.7,8,2,8.7,2,9.5v7C2,17.3,2.7,18,3.5,18C4.3,18,5,17.3, 5,16.5v-7C5,8.7,4.3,8,3.5,8z M20.5,8C19.7,8,19,8.7,19,9.5v7c0,0.8,0.7,1.5,1.5,1. 5c0.8,0,1.5-0.7,1.5-1.5v-7C22,8.7,21.3,8,20.5,8z M15.5,2.2l1.3-1.3c0.2-0.2,0.2-0 .5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0l-1.5,1.5C13.9,1.2,13,1,12,1c-1,0-1.9,0.2-2.7,0.6 L7.9,0.1C7.7,0,7.3,0,7.1,0.1C7,0.3,7,0.7,7.1,0.9l1.3,1.3C7,3.3,6,5,6,7h12C18,5,1 7,3.2,15.5,2.2z M10,5H9V4h1V5z M15,5h-1V4h1V5z"></path></g>
1209 <g id="apps"><path d="M4,8h4V4H4V8z M10,20h4v-4h-4V20z M4,20h4v-4H4V20z M4,14h4v -4H4V14z M10,14h4v-4h-4V14z M16,4v4h4V4H16z M10,8h4V4h-4V8z M16,14h4v-4h-4V14z M 16,20h4v-4h-4V20z"></path></g>
1210 <g id="archive"><path d="M20.5,5.2l-1.4-1.7C18.9,3.2,18.5,3,18,3H6C5.5,3,5.1,3.2 ,4.8,3.5L3.5,5.2C3.2,5.6,3,6,3,6.5V19c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V6.5C21, 6,20.8,5.6,20.5,5.2z M12,17.5L6.5,12H10v-2h4v2h3.5L12,17.5z M5.1,5l0.8-1h12l0.9, 1H5.1z"></path></g>
1211 <g id="arrow-back"><path d="M20,11H7.8l5.6-5.6L12,4l-8,8l8,8l1.4-1.4L7.8,13H20V1 1z"></path></g>
1212 <g id="arrow-drop-down"><polygon points="7,10 12,15 17,10 "></polygon></g>
1213 <g id="arrow-drop-down-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5, 0,10-4.5,10-10S17.5,2,12,2z M12,14l-4-4h8L12,14z"></path></g>
1214 <g id="arrow-drop-up"><polygon points="7,14 12,9 17,14 "></polygon></g>
1215 <g id="arrow-forward"><polygon points="12,4 10.6,5.4 16.2,11 4,11 4,13 16.2,13 1 0.6,18.6 12,20 20,12 "></polygon></g>
1216 <g id="attachment"><path d="M7.5,18c-3,0-5.5-2.5-5.5-5.5S4.5,7,7.5,7H18c2.2,0,4, 1.8,4,4s-1.8,4-4,4H9.5C8.1,15,7,13.9,7,12.5S8.1,10,9.5,10H17v1.5H9.5c-0.6,0-1,0. 4-1,1s0.4,1,1,1H18c1.4,0,2.5-1.1,2.5-2.5S19.4,8.5,18,8.5H7.5c-2.2,0-4,1.8-4,4s1. 8,4,4,4H17V18H7.5z"></path></g>
1217 <g id="backspace"><path d="M22,3H7C6.3,3,5.8,3.3,5.4,3.9L0,12l5.4,8.1C5.8,20.6,6 .3,21,7,21h15c1.1,0,2-0.9,2-2V5C24,3.9,23.1,3,22,3z M19,15.6L17.6,17L14,13.4L10. 4,17L9,15.6l3.6-3.6L9,8.4L10.4,7l3.6,3.6L17.6,7L19,8.4L15.4,12L19,15.6z"></path> </g>
1218 <g id="backup"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2.3,8. 4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z M14, 13v4h-4v-4H7l5-5l5,5H14z"></path></g>
1219 <g id="block"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17 .5,2,12,2z M4,12c0-4.4,3.6-8,8-8c1.8,0,3.5,0.6,4.9,1.7L5.7,16.9C4.6,15.5,4,13.8, 4,12z M12,20c-1.8,0-3.5-0.6-4.9-1.7L18.3,7.1C19.4,8.5,20,10.2,20,12C20,16.4,16.4 ,20,12,20z"></path></g>
1220 <g id="book"><path d="M18,22c1.1,0,2-0.9,2-2V4c0-1.1-0.9-2-2-2h-6v7L9.5,7.5L7,9V 2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2H18z"></path></g>
1221 <g id="bookmark"><path d="M17,3H7C5.9,3,5,3.9,5,5l0,16l7-3l7,3V5C19,3.9,18.1,3,1 7,3z"></path></g>
1222 <g id="bookmark-outline"><path d="M17,3H7C5.9,3,5,3.9,5,5l0,16l7-3l7,3V5C19,3.9, 18.1,3,17,3z M17,18l-5-2.2L7,18V5h10V18z"></path></g>
1223 <g id="bug-report"><path d="M20,8h-2.8c-0.5-0.8-1.1-1.5-1.8-2L17,4.4L15.6,3l-2.2 ,2.2C13,5.1,12.5,5,12,5s-1,0.1-1.4,0.2L8.4,3L7,4.4L8.6,6C7.9,6.5,7.3,7.2,6.8,8H4 v2h2.1C6,10.3,6,10.7,6,11v1H4v2h2v1c0,0.3,0,0.7,0.1,1H4v2h2.8c1,1.8,3,3,5.2,3s4. 2-1.2,5.2-3H20v-2h-2.1c0.1-0.3,0.1-0.7,0.1-1v-1h2v-2h-2v-1c0-0.3,0-0.7-0.1-1H20V 8z M14,16h-4v-2h4V16z M14,12h-4v-2h4V12z"></path></g>
1224 <g id="cancel"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S1 7.5,2,12,2z M17,15.6L15.6,17L12,13.4L8.4,17L7,15.6l3.6-3.6L7,8.4L8.4,7l3.6,3.6L1 5.6,7L17,8.4L13.4,12L17,15.6z"></path></g>
1225 <g id="check"><polygon points="9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6 "></pol ygon></g>
1226 <g id="check-box"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2 -0.9,2-2V5C21,3.9,20.1,3,19,3z M10,17l-5-5l1.4-1.4l3.6,3.6l7.6-7.6L19,8L10,17z"> </path></g>
1227 <g id="check-box-blank"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,2,2,2h14 c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z"></path></g>
1228 <g id="check-box-outline"><path d="M7.9,10.1l-1.4,1.4L11,16L21,6l-1.4-1.4L11,13. 2L7.9,10.1z M19,19L5,19V5h10V3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0 .9,2-2v-8h-2V19z"></path></g>
1229 <g id="check-box-outline-blank"><path d="M19,5v14L5,19V5H19 M19,3H5C3.9,3,3,3.9, 3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3z"></path></g >
1230 <g id="check-circle"><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10c5.5,0,10 -4.5,10-10C22,6.5,17.5,2,12,2z M10,17l-5-5l1.4-1.4l3.6,3.6l7.6-7.6L19,8L10,17z"> </path></g>
1231 <g id="check-circle-blank"><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10c5. 5,0,10-4.5,10-10C22,6.5,17.5,2,12,2z"></path></g>
1232 <g id="check-circle-outline"><path d="M7.9,10.1l-1.4,1.4L11,16L21,6l-1.4-1.4L11, 13.2L7.9,10.1z M20,12c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8c0.8,0,1.5,0.1,2.2,0.3 l1.6-1.6C14.6,2.3,13.3,2,12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10H20z"></ path></g>
1233 <g id="check-circle-outline-blank"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c 5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8, 8S16.4,20,12,20z"></path></g>
1234 <g id="chevron-left"><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12 "></polygon></g>
1235 <g id="chevron-right"><polygon points="10,6 8.6,7.4 13.2,12 8.6,16.6 10,18 16,12 "></polygon></g>
1236 <g id="clear"><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6 6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g>
1237 <g id="close"><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6 6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g>
1238 <g id="cloud"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2.3,8.4 ,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z"></pa th></g>
1239 <g id="cloud-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,1 0-10S17.5,2,12,2z M17,15H8H7.5C6.1,15,5,13.9,5,12.5S6.1,10,7.5,10h0.6c0.4-1.7,2- 3,3.9-3c2.2,0,4,1.8,4,4h1c1.1,0,2,0.9,2,2S18.1,15,17,15z"></path></g>
1240 <g id="cloud-done"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2. 3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z M10,17l-3.5-3.5l1.4-1.4l2.1,2.1L15.2,9l1.4,1.4L10,17z"></path></g>
1241 <g id="cloud-download"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4, 8C2.3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4, 10z M17,13l-5,5l-5-5h3V9h4v4H17z"></path></g>
1242 <g id="cloud-off"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6c-1.5,0-2.9,0.4-4,1.2l1. 5,1.5C10.2,6.2,11.1,6,12,6c3,0,5.5,2.5,5.5,5.5V12H19c1.7,0,3,1.3,3,3c0,1.1-0.6,2 .1-1.6,2.6l1.5,1.5c1.3-0.9,2.1-2.4,2.1-4.1C24,12.4,21.9,10.2,19.4,10z M3,5.3L5.8 ,8C2.6,8.2,0,10.8,0,14c0,3.3,2.7,6,6,6h11.7l2,2l1.3-1.3L4.3,4L3,5.3z M7.7,10l8,8 H6c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4H7.7z"></path></g>
1243 <g id="cloud-queue"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2 .3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z M19,18H6c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4h0.7C7.4,7.7,9.5,6,12,6c3,0,5.5,2.5,5. 5,5.5V12H19c1.7,0,3,1.3,3,3S20.7,18,19,18z"></path></g>
1244 <g id="cloud-upload"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C 2.3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10 z M14,13v4h-4v-4H7l5-5l5,5H14z"></path></g>
1245 <g id="content-copy"><path d="M16,1H4C2.9,1,2,1.9,2,3v14h2V3h12V1z M19,5H8C6.9,5 ,6,5.9,6,7v14c0,1.1,0.9,2,2,2h11c1.1,0,2-0.9,2-2V7C21,5.9,20.1,5,19,5z M19,21H8V 7h11V21z"></path></g>
1246 <g id="content-cut"><path d="M10,6c0-2.2-1.8-4-4-4S2,3.8,2,6c0,2.2,1.8,4,4,4c0.6 ,0,1.1-0.1,1.6-0.4L10,12l-2.4,2.4C7.1,14.1,6.6,14,6,14c-2.2,0-4,1.8-4,4c0,2.2,1. 8,4,4,4s4-1.8,4-4c0-0.6-0.1-1.1-0.4-1.6L12,14l7,7h4L9.6,7.6C9.9,7.1,10,6.6,10,6z M6,8C4.9,8,4,7.1,4,6s0.9-2,2-2c1.1,0,2,0.9,2,2S7.1,8,6,8z M6,20c-1.1,0-2-0.9-2- 2s0.9-2,2-2c1.1,0,2,0.9,2,2S7.1,20,6,20z M12,11.5c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0. 2,0.5-0.5,0.5c-0.3,0-0.5-0.2-0.5-0.5C11.5,11.7,11.7,11.5,12,11.5z M23,3h-4l-6,6l 2,2L23,3z"></path></g>
1247 <g id="content-paste"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2c-1.3,0-2.4,0.8-2. 8,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4C21,2.9,20.1,2,19,2 z M12,2c0.6,0,1,0.4,1,1s-0.4,1-1,1c-0.6,0-1-0.4-1-1S11.4,2,12,2z M19,20H5V4h2v3h 10V4h2V20z"></path></g>
1248 <g id="create"><path d="M3,17.2V21h3.8L17.8,9.9l-3.8-3.8L3,17.2z M20.7,7c0.4-0.4 ,0.4-1,0-1.4l-2.3-2.3c-0.4-0.4-1-0.4-1.4,0l-1.8,1.8l3.8,3.8L20.7,7z"></path></g>
1249 <g id="credit-card"><path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0 ,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4v-6h16V18z M20,8H4V6h16V8z"></path></g>
1250 <g id="delete"><path d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M19,4h-3 .5l-1-1h-5l-1,1H5v2h14V4z"></path></g>
1251 <g id="done"><polygon points="9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6 "></poly gon></g>
1252 <g id="done-all"><path d="M18,7l-1.4-1.4l-6.3,6.3l1.4,1.4L18,7z M22.2,5.6L11.7,1 6.2L7.5,12l-1.4,1.4l5.6,5.6l12-12L22.2,5.6z M0.4,13.4L6,19l1.4-1.4L1.8,12L0.4,13 .4z"></path></g>
1253 <g id="drafts"><path d="M22,8c0-0.7-0.4-1.3-0.9-1.7L12,1L2.9,6.3C2.4,6.7,2,7.3,2 ,8v10c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2L22,8z M12,13L3.7,7.8L12,3l8.3,4.8L12,13 z"></path></g>
1254 <g id="drive"><path d="M22.3,14L15.4,2H8.6l0,0l6.9,12H22.3z M9.7,15l-3.4,6h13.1l 3.4-6H9.7z M7.7,3.5L1.2,15l3.4,6l6.6-11.5L7.7,3.5z"></path></g>
1255 <g id="drawer"><path d="M20,4H4C2.8,4,2,4.8,2,6v12c0,1.2,0.8,2,2,2h16c1,0,2-0.8, 2-2V6C22,4.8,21,4,20,4z M20,18h-6V6h6V18z"></path></g>
1256 <g id="drive-document"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1. 1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,9H7V7h10V9z M17,13H7v-2h10V13z M14,17H7v -2h7V17z"></path></g>
1257 <g id="drive-drawing"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1 ,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M18,18h-6v-5.8c-0.7,0.6-1.5,1-2.5,1c-2,0-3.7- 1.7-3.7-3.7s1.7-3.7,3.7-3.7c2,0,3.7,1.7,3.7,3.7c0,1-0.4,1.8-1,2.5H18V18z"></path ></g>
1258 <g id="drive-file"><path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2 -0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z"></path></g>
1259 <g id="drive-form"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0, 2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9,17H7v-2h2V17z M9,13H7v-2h2V13z M9,9H7V7h2V9z M17,17h-7v-2h7V17z M17,13h-7v-2h7V13z M17,9h-7V7h7V9z"></path></g>
1260 <g id="drive-fusiontable"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14 c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,10.2L13,17l-4-4l-4,4v-3l4-4l4,4l6-6.8 V10.2z"></path></g>
1261 <g id="drive-image"><path d="M21,19V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v14c0,1.1 ,0.9,2,2,2h14C20.1,21,21,20.1,21,19z M8.5,13.5l2.5,3l3.5-4.5l4.5,6H5L8.5,13.5z"> </path></g>
1262 <g id="drive-ms-excel"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1. 1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M16.2,17h-2L12,13.2L9.8,17h-2l3.2-5L7.8,7h2l 2.2,3.8L14.2,7h2L13,12L16.2,17z"></path></g>
1263 <g id="drive-ms-powerpoint"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h 14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9.8,13.4V17H8V7h4.3c1.5,0,2.2,0.3,2.8, 0.9c0.7,0.6,0.9,1.4,0.9,2.3c0,1-0.3,1.8-0.9,2.3c-0.6,0.5-1.3,0.8-2.8,0.8H9.8z">< /path><path d="M9.8,12V8.4h2.3c0.7,0,1.2,0.2,1.5,0.6c0.3,0.4,0.5,0.7,0.5,1.2c0,0 .6-0.2,0.9-0.5,1.3c-0.3,0.3-0.7,0.5-1.4,0.5H9.8z"></path></g>
1264 <g id="drive-ms-word"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1 ,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M15.5,17H14l-2-7.5L10,17H8.5L6.1,7h1.7l1.5,7. 5l2-7.5h1.4l2,7.5L16.2,7h1.7L15.5,17z"></path></g>
1265 <g id="drive-pdf"><path d="M11.3,8.6L11.3,8.6C11.4,8.6,11.4,8.6,11.3,8.6c0.1-0.4 ,0.2-0.6,0.2-0.9l0-0.2c0.1-0.5,0.1-0.9,0-1c0,0,0,0,0-0.1l-0.1-0.1c0,0,0,0,0,0c0, 0,0,0,0,0c0,0,0,0.1-0.1,0.1C11.1,7,11.1,7.7,11.3,8.6C11.3,8.6,11.3,8.6,11.3,8.6z M8.3,15.5c-0.2,0.1-0.4,0.2-0.5,0.3c-0.7,0.6-1.2,1.3-1.3,1.6c0,0,0,0,0,0c0,0,0,0 ,0,0c0,0,0,0,0,0C7.1,17.3,7.7,16.7,8.3,15.5C8.4,15.5,8.4,15.5,8.3,15.5C8.4,15.5, 8.3,15.5,8.3,15.5z M17.5,14c-0.1-0.1-0.5-0.4-1.9-0.4c-0.1,0-0.1,0-0.2,0c0,0,0,0, 0,0c0,0,0,0,0,0.1c0.7,0.3,1.4,0.5,1.9,0.5c0.1,0,0.1,0,0.2,0l0,0c0,0,0.1,0,0.1,0c 0,0,0,0,0-0.1c0,0,0,0,0,0C17.6,14.1,17.5,14.1,17.5,14z M19,3H5C3.9,3,3,3.9,3,5v1 4c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17.9,14.8C17.7,14.9, 17.4,15,17,15c-0.8,0-2-0.2-3-0.7c-1.7,0.2-3,0.4-4,0.8c-0.1,0-0.1,0-0.2,0.1c-1.2, 2.1-2.2,3.1-3,3.1c-0.2,0-0.3,0-0.4-0.1l-0.5-0.3l0-0.1c-0.1-0.2-0.1-0.3-0.1-0.5c0 .1-0.5,0.7-1.4,1.9-2.1c0.2-0.1,0.5-0.3,0.9-0.5c0.3-0.5,0.6-1.1,1-1.8c0.5-1,0.8-2 ,1.1-2.9l0,0c-0.4-1.2-0.6-1.9-0.2-3.3c0.1-0.4,0.4-0.8,0.8-0.8l0.2,0c0.2,0,0.4,0. 1,0.6,0.2c0.7,0.7,0.4,2.3,0,3.6c0,0.1,0,0.1,0,0.1c0.4,1.1,1,2,1.6,2.6c0.3,0.2,0. 5,0.4,0.9,0.6c0.5,0,0.9-0.1,1.3-0.1c1.2,0,2,0.2,2.3,0.7c0.1,0.2,0.1,0.4,0.1,0.6C 18.2,14.3,18.1,14.6,17.9,14.8z M11.4,10.9c-0.2,0.7-0.6,1.5-1,2.4c-0.2,0.4-0.4,0. 7-0.6,1.1c0,0,0.1,0,0.1,0l0.1,0v0c1.3-0.5,2.5-0.8,3.3-0.9c-0.2-0.1-0.3-0.2-0.4-0 .3C12.4,12.6,11.8,11.8,11.4,10.9z"></path></g>
1266 <g id="drive-presentation"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h1 4c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,16H5V8h14V16z"></path></g>
1267 <g id="drive-script"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,4h0v6h0l0,4c0,1.1,0.9,2, 2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M11,17v-3H5v-4h6V7l5,5L11,17z"></pa th></g>
1268 <g id="drive-site"><path d="M19,4H5C3.9,4,3,4.9,3,6l0,12c0,1.1,0.9,2,2,2h14c1.1, 0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M14,18H5v-4h9V18z M14,13H5V9h9V13z M19,18h-4V9 h4V18z"></path></g>
1269 <g id="drive-spreadsheet"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,3h0v11c0,1.1,0.9,2, 2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,11h-8v8H9v-8H5V9h4V5h2v4h8V11z" ></path></g>
1270 <g id="drive-video"><path d="M18,4l2,4h-3l-2-4h-2l2,4h-3l-2-4H8l2,4H7L5,4H4C2.9, 4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4H18z"></path></g>
1271 <g id="error"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17 .5,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"></path></g>
1272 <g id="event"><path d="M17,12h-5v5h5V12z M16,1v2H8V1H6v2H5C3.9,3,3,3.9,3,5l0,14c 0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-1V1H16z M19,19H5V8h14V19z" ></path></g>
1273 <g id="exit-to-app"><path d="M10.1,15.6l1.4,1.4l5-5l-5-5l-1.4,1.4l2.6,2.6H3v2h9. 7L10.1,15.6z M19,3H5C3.9,3,3,3.9,3,5v4h2V5h14v14H5v-4H3v4c0,1.1,0.9,2,2,2h14c1.1 ,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z"></path></g>
1274 <g id="expand-less"><polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "></polygon></g>
1275 <g id="expand-more"><polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 " ></polygon></g>
1276 <g id="explore"><path d="M12,10.9c-0.6,0-1.1,0.5-1.1,1.1s0.5,1.1,1.1,1.1c0.6,0,1 .1-0.5,1.1-1.1S12.6,10.9,12,10.9z M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10c5.5, 0,10-4.5,10-10C22,6.5,17.5,2,12,2z M14.2,14.2L6,18l3.8-8.2L18,6L14.2,14.2z"></pa th></g>
1277 <g id="extension"><path d="M20.5,11H19V7c0-1.1-0.9-2-2-2h-4V3.5C13,2.1,11.9,1,10 .5,1C9.1,1,8,2.1,8,3.5V5H4C2.9,5,2,5.9,2,7l0,3.8h1.5c1.5,0,2.7,1.2,2.7,2.7S5,16. 2,3.5,16.2H2L2,20c0,1.1,0.9,2,2,2h3.8v-1.5c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2 .7,2.7V22H17c1.1,0,2-0.9,2-2v-4h1.5c1.4,0,2.5-1.1,2.5-2.5S21.9,11,20.5,11z"></pa th></g>
1278 <g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5 ,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6 .9-8.6,11.5L12,21.4z"></path></g>
1279 <g id="favorite-outline"><path d="M16.5,3c-1.7,0-3.4,0.8-4.5,2.1C10.9,3.8,9.2,3, 7.5,3C4.4,3,2,5.4,2,8.5c0,3.8,3.4,6.9,8.6,11.5l1.4,1.3l1.4-1.3c5.1-4.7,8.6-7.8,8 .6-11.5C22,5.4,19.6,3,16.5,3z M12.1,18.6L12,18.6l-0.1-0.1C7.1,14.2,4,11.4,4,8.5C 4,6.5,5.5,5,7.5,5c1.5,0,3,1,3.6,2.4h1.9C13.5,6,15,5,16.5,5c2,0,3.5,1.5,3.5,3.5C2 0,11.4,16.9,14.2,12.1,18.6z"></path></g>
1280 <g id="file-download"><path d="M19,9h-4V3H9v6H5l7,7L19,9z M5,18v2h14v-2H5z"></pa th></g>
1281 <g id="file-upload"><polygon points="9,16 15,16 15,10 19,10 12,3 5,10 9,10 "><re ct x="5" y="18" width="14" height="2"></rect></polygon></g>
1282 <g id="filter"><path d="M10,18h4v-2h-4V18z M3,6v2h18V6H3z M6,13h12v-2H6V13z"></p ath></g>
1283 <g id="flag"><polygon points="14.4,6 14,4 5,4 5,21 7,21 7,14 12.6,14 13,16 20,16 20,6 "></polygon></g>
1284 <g id="flip-to-back"><path d="M9,7H7l0,2h2V7z M9,11H7v2h2V11z M9,3C7.9,3,7,3.9,7 ,5h2V3z M13,15h-2v2h2V15z M19,3v2h2C21,3.9,20.1,3,19,3z M13,3h-2v2h2V3z M9,17v-2 H7C7,16.1,7.9,17,9,17z M19,13h2v-2h-2V13z M19,9h2V7h-2V9z M19,17c1.1,0,2-0.9,2-2 h-2V17z M5,7H3v2h0l0,10c0,1.1,0.9,2,2,2h12v-2H5V7z M15,5h2V3h-2V5z M15,17h2v-2h- 2V17z"></path></g>
1285 <g id="flip-to-front"><path d="M3,13h2v-2H3L3,13z M3,17h2v-2H3V17z M5,21v-2H3C3, 20.1,3.9,21,5,21z M3,9h2V7H3V9z M15,21h2v-2h-2V21z M19,3H9C7.9,3,7,3.9,7,5v2h0v2 v6c0,1.1,0.9,2,2,2h5h4h1c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,15H9V5h10V15z M11,21h2v-2h-2V21z M7,21h2v-2H7V21z"></path></g>
1286 <g id="folder"><path d="M10,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2- 0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z"></path></g>
1287 <g id="folder-mydrive"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2 ,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M11.7,17l-1.3-2.1l2.8-5l1.5,2.7L12 .3,17H11.7z M18.3,17h-5.5l1.4-2.5h5.1l0.3,0.5L18.3,17z M13.8,9h2.4l2.8,5H16l-2.6 -4.5L13.8,9z"></path></g>
1288 <g id="folder-shared"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2, 2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M15,9c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2 ,2c-1.1,0-2-0.9-2-2C13,9.9,13.9,9,15,9z M19,17h-8v-1c0-1.3,2.7-2,4-2c1.3,0,4,0.7 ,4,2V17z"></path></g>
1289 <g id="forward"><polygon points="12,8 12,4 20,12 12,20 12,16 4,16 4,8 "></polygo n></g>
1290 <g id="fullscreen"><path d="M7,14H5v5h5v-2H7V14z M5,10h2V7h3V5H5V10z M17,17h-3v2 h5v-5h-2V17z M14,5v2h3v3h2V5H14z"></path></g>
1291 <g id="fullscreen-exit"><path d="M5,16h3v3h2v-5H5V16z M8,8H5v2h5V5H8V8z M14,19h2 v-3h3v-2h-5V19z M16,8V5h-2v5h5V8H16z"></path></g>
1292 <g id="gesture"><path d="M4.6,6.9C5.3,6.2,6,5.5,6.3,5.7c0.5,0.2,0,1-0.3,1.5c-0.3 ,0.4-2.9,3.9-2.9,6.3c0,1.3,0.5,2.3,1.3,3c0.8,0.6,1.7,0.7,2.6,0.5c1.1-0.3,1.9-1.4 ,3.1-2.8c1.2-1.5,2.8-3.4,4.1-3.4c1.6,0,1.6,1,1.8,1.8c-3.8,0.6-5.4,3.7-5.4,5.4c0, 1.7,1.4,3.1,3.2,3.1c1.6,0,4.3-1.3,4.7-6.1H21v-2.5h-2.5c-0.2-1.6-1.1-4.2-4-4.2c-2 .2,0-4.2,1.9-4.9,2.8c-0.6,0.7-2.1,2.5-2.3,2.7c-0.3,0.3-0.7,0.8-1.1,0.8c-0.4,0-0. 7-0.8-0.4-1.9c0.4-1.1,1.4-2.9,1.9-3.5C8.4,8,8.9,7.2,8.9,5.9C8.9,3.7,7.3,3,6.4,3C 5.1,3,4,4,3.7,4.3C3.4,4.6,3.1,4.9,2.8,5.2L4.6,6.9z M13.9,18.6c-0.3,0-0.7-0.3-0.7 -0.7c0-0.6,0.7-2.2,2.9-2.8C15.7,17.8,14.6,18.6,13.9,18.6z"></path></g>
1293 <g id="google"><path d="M16.3,13.4l-1.1-0.8c-0.4-0.3-0.8-0.7-0.8-1.4c0-0.7,0.5-1 .3,1-1.6c1.3-1,2.6-2.1,2.6-4.3c0-2.1-1.3-3.3-2-3.9h1.7L18.9,0h-6.2C8.3,0,6.1,2.8 ,6.1,5.8c0,2.3,1.8,4.8,5,4.8h0.8c-0.1,0.3-0.4,0.8-0.4,1.3c0,1,0.4,1.4,0.9,2c-1.4 ,0.1-4,0.4-5.9,1.6c-1.8,1.1-2.3,2.6-2.3,3.7c0,2.3,2.1,4.5,6.6,4.5c5.4,0,8-3,8-5. 9C18.8,15.7,17.7,14.6,16.3,13.4z M8.7,4.3c0-2.2,1.3-3.2,2.7-3.2c2.6,0,4,3.5,4,5. 5c0,2.6-2.1,3.1-2.9,3.1C10,9.7,8.7,6.6,8.7,4.3z M12.3,22.3c-3.3,0-5.4-1.5-5.4-3. 7c0-2.2,2-2.9,2.6-3.2c1.3-0.4,3-0.5,3.3-0.5c0.3,0,0.5,0,0.7,0c2.4,1.7,3.4,2.4,3. 4,4C16.9,20.8,15,22.3,12.3,22.3z"></path></g>
1294 <g id="google-plus"><path d="M21,10V7h-2v3h-3v2h3v3h2v-3h3v-2H21z M13.3,13.4l-1. 1-0.8c-0.4-0.3-0.8-0.7-0.8-1.4c0-0.7,0.5-1.3,1-1.6c1.3-1,2.6-2.1,2.6-4.3c0-2.1-1 .3-3.3-2-3.9h1.7L15.9,0H9.7C5.3,0,3.1,2.8,3.1,5.8c0,2.3,1.8,4.8,5,4.8h0.8c-0.1,0 .3-0.4,0.8-0.4,1.3c0,1,0.4,1.4,0.9,2c-1.4,0.1-4,0.4-5.9,1.6c-1.8,1.1-2.3,2.6-2.3 ,3.7c0,2.3,2.1,4.5,6.6,4.5c5.4,0,8-3,8-5.9C15.8,15.7,14.7,14.6,13.3,13.4z M5.7,4 .3c0-2.2,1.3-3.2,2.7-3.2c2.6,0,4,3.5,4,5.5c0,2.6-2.1,3.1-2.9,3.1C7,9.7,5.7,6.6,5 .7,4.3z M9.3,22.3c-3.3,0-5.4-1.5-5.4-3.7c0-2.2,2-2.9,2.6-3.2c1.3-0.4,3-0.5,3.3-0 .5c0.3,0,0.5,0,0.7,0c2.4,1.7,3.4,2.4,3.4,4C13.9,20.8,12,22.3,9.3,22.3z"></path>< /g>
1295 <g id="help"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17. 5,2,12,2z M13,19h-2v-2h2V19z M15.1,11.3l-0.9,0.9C13.4,12.9,13,13.5,13,15h-2v-0.5 c0-1.1,0.4-2.1,1.2-2.8l1.2-1.3C13.8,10.1,14,9.6,14,9c0-1.1-0.9-2-2-2c-1.1,0-2,0. 9-2,2H8c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4C16,9.9,15.6,10.7,15.1,11.3z"></path></g>
1296 <g id="history"><path opacity="0.9" d="M12.5,2C9,2,5.9,3.9,4.3,6.8L2,4.5V11h6.5L 5.7,8.2C7,5.7,9.5,4,12.5,4c4.1,0,7.5,3.4,7.5,7.5c0,4.1-3.4,7.5-7.5,7.5c-3.3,0-6- 2.1-7.1-5H3.3c1.1,4,4.8,7,9.2,7c5.3,0,9.5-4.3,9.5-9.5S17.7,2,12.5,2z M11,7v5.1l4 .7,2.8l0.8-1.3l-4-2.4V7H11z"></path></g>
1297 <g id="home"><polygon points="10,20 10,14 14,14 14,20 19,20 19,12 22,12 12,3 2,1 2 5,12 5,20 "></polygon></g>
1298 <g id="https"><path d="M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6v2H6c-1.1,0-2,0 .9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,17c-1.1, 0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.7,1.4-3.1 ,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1V8z"></path></g>
1299 <g id="inbox"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,2,2,2h14c1.1,0,2-0 .9,2-2V5C21,3.9,20.1,3,19,3z M19,15h-4c0,1.7-1.3,3-3,3c-1.7,0-3-1.3-3-3H5V5h14V1 5z M16,10h-2V7h-4v3H8l4,4L16,10z"></path></g>
1300 <g id="info"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17. 5,2,12,2z M13,17h-2v-6h2V17z M13,9h-2V7h2V9z"></path></g>
1301 <g id="info-outline"><path d="M11,17h2v-6h-2V17z M12,2C6.5,2,2,6.5,2,12s4.5,10,1 0,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3 .6,8,8S16.4,20,12,20z M11,9h2V7h-2V9z"></path></g>
1302 <g id="invert-colors"><path d="M17,12c0-2.8-2.2-5-5-5v10C14.8,17,17,14.8,17,12z M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19 ,3z M19,19h-7v-2c-2.8,0-5-2.2-5-5s2.2-5,5-5V5h7V19z"></path></g>
1303 <g id="keep"><path d="M16,12V4h1V2H7v2h1v8l-2,2v2h5.2v6h1.6v-6H18v-2L16,12z"></p ath></g>
1304 <g id="label"><path d="M17.6,5.8C17.3,5.3,16.7,5,16,5L5,5C3.9,5,3,5.9,3,7v10c0,1 .1,0.9,2,2,2l11,0c0.7,0,1.3-0.3,1.6-0.8L22,12L17.6,5.8z"></path></g>
1305 <g id="label-outline"><path d="M17.6,5.8C17.3,5.3,16.7,5,16,5L5,5C3.9,5,3,5.9,3, 7v10c0,1.1,0.9,2,2,2l11,0c0.7,0,1.3-0.3,1.6-0.8L22,12L17.6,5.8z M16,17H5V7h11l3. 5,5L16,17z"></path></g>
1306 <g id="language"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10 S17.5,2,12,2z M18.9,8H16c-0.3-1.3-0.8-2.4-1.4-3.6C16.4,5.1,18,6.3,18.9,8z M12,4c 0.8,1.2,1.5,2.5,1.9,4h-3.8C10.5,6.6,11.2,5.2,12,4z M4.3,14C4.1,13.4,4,12.7,4,12s 0.1-1.4,0.3-2h3.4c-0.1,0.7-0.1,1.3-0.1,2s0.1,1.3,0.1,2H4.3z M5.1,16H8c0.3,1.3,0. 8,2.4,1.4,3.6C7.6,18.9,6,17.7,5.1,16z M8,8H5.1c1-1.7,2.5-2.9,4.3-3.6C8.8,5.6,8.3 ,6.7,8,8z M12,20c-0.8-1.2-1.5-2.5-1.9-4h3.8C13.5,17.4,12.8,18.8,12,20z M14.3,14H 9.7c-0.1-0.7-0.2-1.3-0.2-2s0.1-1.3,0.2-2h4.7c0.1,0.7,0.2,1.3,0.2,2S14.4,13.3,14. 3,14z M14.6,19.6c0.6-1.1,1.1-2.3,1.4-3.6h2.9C18,17.7,16.4,18.9,14.6,19.6z M16.4, 14c0.1-0.7,0.1-1.3,0.1-2s-0.1-1.3-0.1-2h3.4c0.2,0.6,0.3,1.3,0.3,2s-0.1,1.4-0.3,2 H16.4z"></path></g>
1307 <g id="launch"><path d="M19,19H5V5h7V3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1 .1,0,2-0.9,2-2v-7h-2V19z M14,3v2h3.6l-9.8,9.8l1.4,1.4L19,6.4V10h2V3H14z"></path> </g>
1308 <g id="link"><path d="M8,13h8v-2H8V13z M3.9,12c0-2.3,1.8-4.1,4.1-4.1h3V6H8c-3.3, 0-6,2.7-6,6s2.7,6,6,6h3v-1.9H8C5.7,16.1,3.9,14.3,3.9,12z M16,6h-3v1.9h3c2.3,0,4. 1,1.8,4.1,4.1c0,2.3-1.8,4.1-4.1,4.1h-3V18h3c3.3,0,6-2.7,6-6S19.3,6,16,6z"></path ></g>
1309 <g id="list"><path d="M3,13h2v-2H3V13z M3,17h2v-2H3V17z M3,9h2V7H3V9z M7,13h14v- 2H7V13z M7,17h14v-2H7V17z M7,7v2h14V7H7z"></path></g>
1310 <g id="lock"><path d="M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6v2H6c-1.1,0-2,0. 9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,17c-1.1,0 -2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.7,1.4-3.1, 3.1-3.1c1.7,0,3.1,1.4,3.1,3.1V8z"></path></g>
1311 <g id="lock-open"><path d="M12,17c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10 .9,17,12,17z M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6h1.9c0-1.7,1.4-3.1,3.1-3. 1c1.7,0,3.1,1.4,3.1,3.1v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2 -2V10C20,8.9,19.1,8,18,8z M18,20H6V10h12V20z"></path></g>
1312 <g id="lock-outline"><path d="M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6v2H6c-1. 1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,2 .9c1.7,0,3.1,1.4,3.1,3.1v2H9V6H8.9C8.9,4.3,10.3,2.9,12,2.9z M18,20H6V10h12V20z M 12,17c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,17,12,17z"></path></g>
1313 <g id="mail"><path d="M20,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0. 9,2-2V6C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"></path></g>
1314 <g id="markunread"><path d="M22,6l2-2l-2-2l-2,2l-2-2l-2,2l-2-2l-2,2l-2-2L8,4L6,2 L4,4L2,2L0,4l2,2L0,8l2,2l-2,2l2,2l-2,2l2,2l-2,2l2,2l2-2l2,2l2-2l2,2l2-2l2,2l2-2l 2,2l2-2l2,2l2-2l-2-2l2-2l-2-2l2-2l-2-2l2-2L22,6z M20,8l-8,5L4,8V6l8,5l8-5V8z"></ path></g>
1315 <g id="menu"><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path ></g>
1316 <g id="more-horiz"><path d="M6,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S7.1 ,10,6,10z M18,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S19.1,10,18,10z M12,1 0c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z"></path></g>
1317 <g id="more-vert"><path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10. 9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,1 6c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path></g>
1318 <g id="polymer"><polygon points="19,4 15,4 7.1,16.6 4.5,12 9,4 5,4 0.5,12 5,20 9 ,20 16.9,7.4 19.5,12 15,20 19,20 23.5,12 "></polygon></g>
1319 <g id="print"><path d="M19,8H5c-1.7,0-3,1.3-3,3v6h4v4h12v-4h4v-6C22,9.3,20.7,8,1 9,8z M16,19H8v-5h8V19z M19,12c-0.6,0-1-0.4-1-1s0.4-1,1-1c0.6,0,1,0.4,1,1S19.6,12 ,19,12z M18,3H6v4h12V3z"></path></g>
1320 <g id="radio-button-off"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4 .5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,8S16.4,20, 12,20z"></path></g>
1321 <g id="radio-button-on"><path d="M12,7c-2.8,0-5,2.2-5,5s2.2,5,5,5c2.8,0,5-2.2,5- 5S14.8,7,12,7z M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12, 2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,8S16.4,20,12,20z"></path></g>
1322 <g id="receipt"><path d="M18,17H6v-2h12V17z M18,13H6v-2h12V13z M18,9H6V7h12V9z M 3,22l1.5-1.5L6,22l1.5-1.5L9,22l1.5-1.5L12,22l1.5-1.5L15,22l1.5-1.5L18,22l1.5-1.5 L21,22V2l-1.5,1.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2L4.5, 3.5L3,2V22z"></path></g>
1323 <g id="refresh"><path d="M17.6,6.4C16.2,4.9,14.2,4,12,4c-4.4,0-8,3.6-8,8s3.6,8,8 ,8c3.7,0,6.8-2.6,7.7-6h-2.1c-0.8,2.3-3,4-5.6,4c-3.3,0-6-2.7-6-6s2.7-6,6-6c1.7,0, 3.1,0.7,4.2,1.8L13,11h7V4L17.6,6.4z"></path></g>
1324 <g id="reminder"><path d="M16.9,13c1.3-1.3,2.1-3,2.1-5c0-3.9-3.1-7-7-7C8.1,1,5,4 .1,5,8c0,2,0.8,3.7,2.1,5l0,0l3.5,3.5L6,21.1l1.4,1.4L16.9,13z M15.5,11.5L15.5,11. 5L12,15.1l-3.5-3.5l0,0l0,0C7.6,10.6,7,9.4,7,8c0-2.8,2.2-5,5-5c2.8,0,5,2.2,5,5C17 ,9.4,16.4,10.6,15.5,11.5L15.5,11.5z M13.4,19.3l3.2,3.2l1.4-1.4l-3.2-3.2L13.4,19. 3z"></path></g>
1325 <g id="remove"><path d="M19,13H5v-2h14V13z"></path></g>
1326 <g id="remove-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5, 10-10S17.5,2,12,2z M17,13H7v-2h10V13z"></path></g>
1327 <g id="remove-circle-outline"><path d="M7,11v2h10v-2H7z M12,2C6.5,2,2,6.5,2,12s4 .5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4. 4,0,8,3.6,8,8S16.4,20,12,20z"></path></g>
1328 <g id="reply"><path d="M10,9V5l-7,7l7,7v-4.1c5,0,8.5,1.6,11,5.1C20,15,17,10,10,9 z"></path></g>
1329 <g id="reply-all"><path d="M7,8V5l-7,7l7,7v-3l-4-4L7,8z M13,9V5l-7,7l7,7v-4.1c5, 0,8.5,1.6,11,5.1C23,15,20,10,13,9z"></path></g>
1330 <g id="report"><path d="M15.7,3H8.3L3,8.3v7.5L8.3,21h7.5l5.3-5.3V8.3L15.7,3z M12 ,17.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3c0.7,0,1.3,0.6,1.3,1.3C13.3,16 .7,12.7,17.3,12,17.3z M13,13h-2V7h2V13z"></path></g>
1331 <g id="rotate-left"><path d="M7.1,8.5L5.7,7.1C4.8,8.3,4.2,9.6,4.1,11h2C6.2,10.1, 6.6,9.3,7.1,8.5z M6.1,13h-2c0.2,1.4,0.7,2.7,1.6,3.9l1.4-1.4C6.6,14.7,6.2,13.9,6. 1,13z M7.1,18.3c1.2,0.9,2.5,1.4,3.9,1.6v-2c-0.9-0.1-1.7-0.5-2.5-1L7.1,18.3z M13, 4.1V1L8.5,5.5L13,10V6.1c2.8,0.5,5,2.9,5,5.9s-2.2,5.4-5,5.9v2c3.9-0.5,7-3.9,7-7.9 S16.9,4.6,13,4.1z"></path></g>
1332 <g id="rotate-right"><path d="M15.5,5.5L11,1v3.1C7.1,4.6,4,7.9,4,12s3.1,7.4,7,7. 9v-2C8.2,17.4,6,15,6,12s2.2-5.4,5-5.9V10L15.5,5.5z M19.9,11c-0.2-1.4-0.7-2.7-1.6 -3.9l-1.4,1.4c0.5,0.8,0.9,1.6,1,2.5H19.9z M13,17.9v2c1.4-0.2,2.7-0.7,3.9-1.6l-1. 4-1.4C14.7,17.4,13.9,17.8,13,17.9z M16.9,15.5l1.4,1.4c0.9-1.2,1.5-2.5,1.6-3.9h-2 C17.8,13.9,17.4,14.7,16.9,15.5z"></path></g>
1333 <g id="save"><path d="M17,3H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,2,2,2h14c1.1,0,2-0. 9,2-2V7L17,3z M12,19c-1.7,0-3-1.3-3-3s1.3-3,3-3c1.7,0,3,1.3,3,3S13.7,19,12,19z M 15,9H5V5h10V9z"></path></g>
1334 <g id="schedule"><path fill-opacity="0.9" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10 c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8 ,8S16.4,20,12,20z"></path><polygon fill-opacity="0.9" points="12.5,7 11,7 11,13 16.2,16.2 17,14.9 12.5,12.2 "></polygon></g>
1335 <g id="search"><path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1 ,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1 .5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z "></path></g>
1336 <g id="select-all"><path d="M3,5h2V3C3.9,3,3,3.9,3,5z M3,13h2v-2H3V13z M7,21h2v- 2H7V21z M3,9h2V7H3V9z M13,3h-2v2h2V3z M19,3v2h2C21,3.9,20.1,3,19,3z M5,21v-2H3C3 ,20.1,3.9,21,5,21z M3,17h2v-2H3V17z M9,3H7v2h2V3z M11,21h2v-2h-2V21z M19,13h2v-2 h-2V13z M19,21c1.1,0,2-0.9,2-2h-2V21z M19,9h2V7h-2V9z M19,17h2v-2h-2V17z M15,21h 2v-2h-2V21z M15,5h2V3h-2V5z M7,17h10V7H7V17z M9,9h6v6H9V9z"></path></g>
1337 <g id="send"><polygon points="2,21 23,12 2,3 2,10 17,12 2,14 "></polygon></g>
1338 <g id="settings"><path d="M19.4,13c0-0.3,0.1-0.6,0.1-1s0-0.7-0.1-1l2.1-1.7c0.2-0 .2,0.2-0.4,0.1-0.6l-2-3.5C19.5,5.1,19.3,5,19,5.1l-2.5,1c-0.5-0.4-1.1-0.7-1.7-1l- 0.4-2.6C14.5,2.2,14.2,2,14,2h-4C9.8,2,9.5,2.2,9.5,2.4L9.1,5.1C8.5,5.3,8,5.7,7.4, 6.1L5,5.1C4.7,5,4.5,5.1,4.3,5.3l-2,3.5C2.2,8.9,2.3,9.2,2.5,9.4L4.6,11c0,0.3-0.1, 0.6-0.1,1s0,0.7,0.1,1l-2.1,1.7c-0.2,0.2-0.2,0.4-0.1,0.6l2,3.5C4.5,18.9,4.7,19,5, 18.9l2.5-1c0.5,0.4,1.1,0.7,1.7,1l0.4,2.6c0,0.2,0.2,0.4,0.5,0.4h4c0.2,0,0.5-0.2,0 .5-0.4l0.4-2.6c0.6-0.3,1.2-0.6,1.7-1l2.5,1c0.2,0.1,0.5,0,0.6-0.2l2-3.5c0.1-0.2,0 .1-0.5-0.1-0.6L19.4,13z M12,15.5c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5s3.5,1.6, 3.5,3.5S13.9,15.5,12,15.5z"></path></g>
1339 <g id="settings-applications"><path d="M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2 -2S13.1,10,12,10z M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V 5C21,3.9,20.1,3,19,3z M17.2,12c0,0.2,0,0.5,0,0.7l1.5,1.2c0.1,0.1,0.2,0.3,0.1,0.4 l-1.4,2.4c-0.1,0.2-0.3,0.2-0.4,0.2l-1.7-0.7c-0.4,0.3-0.8,0.5-1.2,0.7l-0.3,1.9c0, 0.2-0.2,0.3-0.3,0.3h-2.8c-0.2,0-0.3-0.1-0.3-0.3L10,16.9c-0.4-0.2-0.8-0.4-1.2-0.7 l-1.7,0.7c-0.2,0.1-0.3,0-0.4-0.2l-1.4-2.4c-0.1-0.2,0-0.3,0.1-0.4l1.5-1.2c0-0.2,0 -0.5,0-0.7s0-0.5,0-0.7l-1.5-1.2c-0.1-0.1-0.2-0.3-0.1-0.4l1.4-2.4c0.1-0.2,0.3-0.2 ,0.4-0.2l1.7,0.7C9.2,7.6,9.6,7.3,10,7.1l0.3-1.9c0-0.2,0.2-0.3,0.3-0.3h2.8c0.2,0, 0.3,0.1,0.3,0.3L14,7.1c0.4,0.2,0.8,0.4,1.2,0.7l1.7-0.7c0.2-0.1,0.3,0,0.4,0.2l1.4 ,2.4c0.1,0.2,0,0.3-0.1,0.4l-1.5,1.2C17.2,11.5,17.2,11.8,17.2,12z"></path></g>
1340 <g id="settings-bluetooth"><path d="M11,24h2v-2h-2V24z M7,24h2v-2H7V24z M15,24h2 v-2h-2V24z M17.7,5.7L12,0h-1v7.6L6.4,3L5,4.4l5.6,5.6L5,15.6L6.4,17l4.6-4.6V20h1l 5.7-5.7L13.4,10L17.7,5.7z M13,3.8l1.9,1.9L13,7.6V3.8z M14.9,14.3L13,16.2v-3.8L14 .9,14.3z"></path></g>
1341 <g id="settings-cell"><path d="M7,24h2v-2H7V24z M11,24h2v-2h-2V24z M15,24h2v-2h- 2V24z M16,0L8,0C6.9,0,6,0.9,6,2v16c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V2C18,0.9,17 .1,0,16,0z M16,16H8V4h8V16z"></path></g>
1342 <g id="settings-phone"><path d="M13,9h-2v2h2V9z M17,9h-2v2h2V9z M20,15.5c-1.2,0- 2.4-0.2-3.6-0.6c-0.3-0.1-0.7,0-1,0.2l-2.2,2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c0 .3-0.3,0.4-0.7,0.2-1C8.7,6.4,8.5,5.2,8.5,4c0-0.6-0.4-1-1-1H4C3.4,3,3,3.4,3,4c0,9 .4,7.6,17,17,17c0.6,0,1-0.4,1-1v-3.5C21,15.9,20.6,15.5,20,15.5z M19,9v2h2V9H19z" ></path></g>
1343 <g id="settings-power"><path d="M7,24h2v-2H7V24z M11,24h2v-2h-2V24z M13,2h-2v10h 2V2z M16.6,4.4l-1.4,1.4C16.8,6.9,18,8.8,18,11c0,3.3-2.7,6-6,6c-3.3,0-6-2.7-6-6c0 -2.2,1.2-4.1,2.9-5.1L7.4,4.4C5.4,5.9,4,8.3,4,11c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C 20,8.3,18.6,5.9,16.6,4.4z M15,24h2v-2h-2V24z"></path></g>
1344 <g id="settings-voice"><path d="M7,24h2v-2H7V24z M12,13c1.7,0,3-1.3,3-3l0-6c0-1. 7-1.3-3-3-3c-1.7,0-3,1.3-3,3v6C9,11.7,10.3,13,12,13z M11,24h2v-2h-2V24z M15,24h2 v-2h-2V24z M19,10h-1.7c0,3-2.5,5.1-5.3,5.1c-2.8,0-5.3-2.1-5.3-5.1H5c0,3.4,2.7,6. 2,6,6.7V20h2v-3.3C16.3,16.2,19,13.4,19,10z"></path></g>
1345 <g id="shopping-basket"><path d="M17.2,9l-4.4-6.6C12.6,2.2,12.3,2,12,2c-0.3,0-0. 6,0.1-0.8,0.4L6.8,9H2c-0.6,0-1,0.4-1,1c0,0.1,0,0.2,0,0.3l2.5,9.3c0.2,0.8,1,1.5,1 .9,1.5h13c0.9,0,1.7-0.6,1.9-1.5l2.5-9.3c0-0.1,0-0.2,0-0.3c0-0.6-0.4-1-1-1H17.2z M9,9l3-4.4L15,9H9z M12,17c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S13.1,17,12, 17z"></path></g>
1346 <g id="shopping-cart"><path d="M7,18c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S 8.1,18,7,18z M1,2v2h2l3.6,7.6L5.2,14C5.1,14.3,5,14.7,5,15c0,1.1,0.9,2,2,2h12v-2H 7.4c-0.1,0-0.2-0.1-0.2-0.2c0,0,0-0.1,0-0.1L8.1,13h7.4c0.8,0,1.4-0.4,1.7-1l3.6-6. 5C21,5.3,21,5.2,21,5c0-0.6-0.4-1-1-1H5.2L4.3,2H1z M17,18c-1.1,0-2,0.9-2,2s0.9,2, 2,2c1.1,0,2-0.9,2-2S18.1,18,17,18z"></path></g>
1347 <g id="sort"><path d="M3,18h6v-2H3V18z M3,6v2h18V6H3z M3,13h12v-2H3V13z"></path> </g>
1348 <g id="star"><polygon points="12,17.273 18.18,21 16.545,13.971 22,9.244 14.809,8 .627 12,2 9.191,8.627 2,9.244 7.455,13.971 5.82,21 "></polygon></g>
1349 <g id="star-half"><path d="M22,9.744l-7.191-0.617L12,2.5L9.191,9.127L2,9.744v0l0 ,0l5.455,4.727L5.82,21.5L12,17.772l0,0l6.18,3.727l-1.635-7.029L22,9.744z M12,15. 896V6.595l1.71,4.036l4.38,0.376l-3.322,2.878l0.996,4.281L12,15.896z"></path></g>
1350 <g id="star-outline"><path d="M22,9.244l-7.191-0.617L12,2L9.191,8.627L2,9.244l5. 455,4.727L5.82,21L12,17.272L18.18,21l-1.635-7.029L22,9.244z M12,15.396l-3.763,2. 27l0.996-4.281L5.91,10.507l4.38-0.376L12,6.095l1.71,4.036l4.38,0.376l-3.322,2.87 8l0.996,4.281L12,15.396z"></path></g>
1351 <g id="star-rate"><polygon points="12,14.3 15.7,17 14.3,12.6 18,10 13.5,10 12,5. 5 10.5,10 6,10 9.7,12.6 8.3,17 "></polygon></g>
1352 <g id="store"><path d="M20,4H4v2h16V4z M21,14v-2l-1-5H4l-1,5v2h1v6h10v-6h4v6h2v- 6H21z M12,18H6v-4h6V18z"></path></g>
1353 <g id="swap-driving-apps"><circle cx="6.5" cy="15.5" r="1.5"></circle><circle cx ="17.5" cy="15.5" r="1.5"></circle><path d="M18.9,7c-0.2-0.6-0.8-1-1.4-1H16H6V4L 3,7l2,2l1,1V8h11.7l1.3,4H3v9c0,0.6,0.4,1,1,1h1c0.6,0,1-0.4,1-1v-1h12v1c0,0.6,0.4 ,1,1,1h1c0.6,0,1-0.4,1-1v-8L18.9,7z M6.5,17C5.7,17,5,16.3,5,15.5S5.7,14,6.5,14C7 .3,14,8,14.7,8,15.5S7.3,17,6.5,17z M17.5,17c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1 .5c0.8,0,1.5,0.7,1.5,1.5S18.3,17,17.5,17z M16,0v2H8v2h8v2l3-3L16,0z"></path></g>
1354 <g id="swap-horiz"><path d="M7,11l-4,4l4,4v-3h7v-2H7V11z M21,9l-4-4v3h-7v2h7v3L2 1,9z"></path></g>
1355 <g id="swap-vert"><path d="M16,17v-7h-2v7h-3l4,4l4-4H16z M9,3L5,7h3v7h2V7h3L9,3z "></path></g>
1356 <g id="swap-vert-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4 .5,10-10S17.5,2,12,2z M6.5,9L10,5.5L13.5,9H11v4H9V9H6.5z M17.5,15L14,18.5L10.5,1 5H13v-4h2v4H17.5z"></path></g>
1357 <g id="tab"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2 -2V5C21,3.9,20.1,3,19,3z M19,19L5,19V5h7v4h7V19z"></path></g>
1358 <g id="tab-unselected"><path d="M3,9h2V7H3V9z M3,13h2v-2H3V13z M3,5h2V3C3.9,3,3, 3.9,3,5z M7,21h2v-2l-2,0V21z M3,17h2v-2H3V17z M5,21v-2H3C3,20.1,3.9,21,5,21z M19 ,3h-8v6h10V5C21,3.9,20.1,3,19,3z M19,17h2v-2h-2V17z M7,5h2V3H7V5z M19,21c1.1,0,2 -0.9,2-2h-2V21z M19,13h2v-2h-2V13z M11,21h2v-2l-2,0V21z M15,21h2v-2l-2,0V21z"></ path></g>
1359 <g id="text-format"><path d="M5,17v2h14v-2H5z M9.5,12.8h5l0.9,2.2h2.1L12.8,4h-1. 5L6.5,15h2.1L9.5,12.8z M12,6l1.9,5h-3.7L12,6z"></path></g>
1360 <g id="theaters"><path d="M18,3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3H18z M8 ,17H6v-2h2V17z M8,13H6v-2h2V13z M8,9H6V7h2V9z M18,17h-2v-2h2V17z M18,13h-2v-2h2V 13z M18,9h-2V7h2V9z"></path></g>
1361 <g id="thumb-down"><path d="M15,3H6C5.2,3,4.5,3.5,4.2,4.2l-3,7.1C1.1,11.5,1,11.7 ,1,12v1.9l0,0c0,0,0,0.1,0,0.1c0,1.1,0.9,2,2,2h6.3l-1,4.6c0,0.1,0,0.2,0,0.3c0,0.4 ,0.2,0.8,0.4,1.1L9.8,23l6.6-6.6c0.4-0.4,0.6-0.9,0.6-1.4V5C17,3.9,16.1,3,15,3z M1 9,3v12h4V3H19z"></path></g>
1362 <g id="thumb-up"><path d="M1,21h4V9H1V21z M23,10c0-1.1-0.9-2-2-2h-6.3l1-4.6c0-0. 1,0-0.2,0-0.3c0-0.4-0.2-0.8-0.4-1.1L14.2,1L7.6,7.6C7.2,7.9,7,8.4,7,9v10c0,1.1,0. 9,2,2,2h9c0.8,0,1.5-0.5,1.8-1.2l3-7.1c0.1-0.2,0.1-0.5,0.1-0.7V10L23,10C23,10.1,2 3,10,23,10z"></path></g>
1363 <g id="today"><path d="M19,3h-1V1h-2v2H8V1H6v2H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9, 2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V8h14V19z"></path><rect x ="7" y="10" width="5" height="5"></rect></g>
1364 <g id="translate"><path d="M3,17.2V21h3.8L17.8,9.9l-3.8-3.8L3,17.2z M20.7,7c0.4- 0.4,0.4-1,0-1.4l-2.3-2.3c-0.4-0.4-1-0.4-1.4,0l-1.8,1.8l3.8,3.8L20.7,7z M12,19l-2 ,2h13v-2H12z"></path></g>
1365 <g id="undo"><path d="M12,5V1.5l-5,5l5,5V7c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2 .7-6-6H4c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8S16.4,5,12,5z"></path></g>
1366 <g id="unfold-less"><path d="M7.4,18.6L8.8,20l3.2-3.2l3.2,3.2l1.4-1.4L12,14L7.4, 18.6z M16.6,5.4L15.2,4L12,7.2L8.8,4L7.4,5.4L12,10L16.6,5.4z"></path></g>
1367 <g id="unfold-more"><path d="M12,5.8L15.2,9l1.4-1.4L12,3L7.4,7.6L8.8,9L12,5.8z M 12,18.2L8.8,15l-1.4,1.4L12,21l4.6-4.6L15.2,15L12,18.2z"></path></g>
1368 <g id="view-array"><path d="M4,18h3V5H4V18z M18,5v13h3V5H18z M8,18h9V5H8V18z"></ path></g>
1369 <g id="view-column"><path d="M10,18h5V5h-5V18z M4,18h5V5H4V18z M16,5v13h5V5H16z" ></path></g>
1370 <g id="view-headline"><path d="M4,15h17v-2H4V15z M4,19h17v-2H4V19z M4,11h17V9H4V 11z M4,5v2h17V5H4z"></path></g>
1371 <g id="view-list"><path d="M4,14h4v-4H4V14z M4,19h4v-4H4V19z M4,9h4V5H4V9z M9,14 h12v-4H9V14z M9,19h12v-4H9V19z M9,5v4h12V5H9z"></path></g>
1372 <g id="view-module"><path d="M4,11h5V5H4V11z M4,18h5v-6H4V18z M10,18h5v-6h-5V18z M16,18h5v-6h-5V18z M10,11h5V5h-5V11z M16,5v6h5V5H16z"></path></g>
1373 <g id="view-quilt"><path d="M10,18h5v-6h-5V18z M4,18h5V5H4V18z M16,18h5v-6h-5V18 z M10,5v6h11V5H10z"></path></g>
1374 <g id="view-stream"><path d="M4,18h17v-6H4V18z M4,5v6h17V5H4z"></path></g>
1375 <g id="visibility"><path d="M12,4.5C7,4.5,2.7,7.6,1,12c1.7,4.4,6,7.5,11,7.5c5,0, 9.3-3.1,11-7.5C21.3,7.6,17,4.5,12,4.5z M12,17c-2.8,0-5-2.2-5-5s2.2-5,5-5c2.8,0,5 ,2.2,5,5S14.8,17,12,17z M12,9c-1.7,0-3,1.3-3,3s1.3,3,3,3c1.7,0,3-1.3,3-3S13.7,9, 12,9z"></path></g>
1376 <g id="visibility-off"><path d="M12,7c2.8,0,5,2.2,5,5c0,0.6-0.1,1.3-0.4,1.8l2.9, 2.9c1.5-1.3,2.7-2.9,3.4-4.7c-1.7-4.4-6-7.5-11-7.5c-1.4,0-2.7,0.3-4,0.7l2.2,2.2C1 0.7,7.1,11.4,7,12,7z M2,4.3l2.3,2.3L4.7,7c-1.7,1.3-3,3-3.7,5c1.7,4.4,6,7.5,11,7. 5c1.5,0,3-0.3,4.4-0.8l0.4,0.4l2.9,2.9l1.3-1.3L3.3,3L2,4.3z M7.5,9.8l1.5,1.5C9,11 .6,9,11.8,9,12c0,1.7,1.3,3,3,3c0.2,0,0.4,0,0.7-0.1l1.5,1.5C13.5,16.8,12.8,17,12, 17c-2.8,0-5-2.2-5-5C7,11.2,7.2,10.5,7.5,9.8z M11.8,9l3.1,3.1c0-0.1,0-0.1,0-0.2c0 -1.7-1.3-3-3-3C11.9,9,11.9,9,11.8,9z"></path></g>
1377 <g id="warning"><path d="M1,21h22L12,2L1,21z M13,18h-2v-2h2V18z M13,14h-2v-4h2V1 4z"></path></g>
1378 <g id="work"><path d="M20,6h-4V4l-2-2h-4L8,4v2H4C2.9,6,2,6.9,2,8l0,11c0,1.1,0.9, 2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M14,6h-4V4h4V6z"></path></g>
1379 </defs></svg>
1380 </core-iconset-svg>
1381
1382 <!-- import core-icon for convenience
1383 TODO(sorvell): we'd rather do this in core-iconset but we can't until
1384 crbug.com/373461 is addressed
1385 -->
1386 <!--
1387 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1388 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1389 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1390 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1391 Code distributed by Google as part of the polymer project is also
1392 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
1393 -->
1394 <!--
1395
1396 The `core-icon` element displays an icon using CSS background image. By default an icon renders as 24px square.
1397
1398 Example using src:
1399
1400 <core-icon src="star.png"></core-icon>
1401
1402 Example setting size to 32px x 32px:
1403
1404 <core-icon src="big_star.png" size="32"></core-icon>
1405
1406 Example using icon from default iconset:
1407
1408 <core-icon icon="menu"></core-icon>
1409
1410 Example using icon `cherry` from custom iconset `fruit`:
1411
1412 <core-icon icon="fruit:cherry"></core-icon>
1413
1414 See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
1415 how to use a custom iconset.
1416
1417 See [core-icons](#core-icons) for the default set of icons. To use the default s et of icons you'll need to include an import for `core-icons.html`.
1418
1419 @group Polymer Core Elements
1420 @element core-icon
1421 @homepage polymer.github.io
1422 -->
1423
1424
1425 <style shim-shadowdom="">/* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1426 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1427 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1428 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1429 Code distributed by Google as part of the polymer project is also
1430 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt */
1431
1432 html /deep/ core-icon {
1433 display: inline-block;
1434 vertical-align: middle;
1435 background-repeat: no-repeat;
1436 }
1437
1438 html /deep/ core-icon[size=""] {
1439 position: relative;
1440 }
1441
1442 html /deep/ core-icon[size=""] > svg {
1443 position: absolute;
1444 top: 0;
1445 right: 0;
1446 bottom: 0;
1447 left: 0;
1448 }
1449 </style>
1450
1451 <polymer-element name="core-icon" attributes="src size icon" assetpath="../core- icon/">
1452 <script>
1453 (function() {
1454
1455 // mono-state
1456 var meta;
1457
1458 Polymer('core-icon', {
1459
1460 /**
1461 * The URL of an image for the icon. If the src property is specified,
1462 * the icon property should not be.
1463 *
1464 * @attribute src
1465 * @type string
1466 * @default ''
1467 */
1468 src: '',
1469
1470 /**
1471 * Specifies the size of the icon in pixel units.
1472 *
1473 * @attribute size
1474 * @type string
1475 * @default 24
1476 */
1477 size: 24,
1478
1479 /**
1480 * Specifies the icon name or index in the set of icons available in
1481 * the icon's icon set. If the icon property is specified,
1482 * the src property should not be.
1483 *
1484 * @attribute icon
1485 * @type string
1486 * @default ''
1487 */
1488 icon: '',
1489
1490 observe: {
1491 'size icon': 'updateIcon'
1492 },
1493
1494 defaultIconset: 'icons',
1495
1496 ready: function() {
1497 if (!meta) {
1498 meta = document.createElement('core-iconset');
1499 }
1500 this.updateIcon();
1501 },
1502
1503 srcChanged: function() {
1504 this.style.backgroundImage = 'url(' + this.src + ')';
1505 this.style.backgroundPosition = 'center';
1506 this.style.backgroundSize = this.size + 'px ' + this.size + 'px';
1507 },
1508
1509 getIconset: function(name) {
1510 return meta.byId(name || this.defaultIconset);
1511 },
1512
1513 updateIcon: function() {
1514 if (this.size) {
1515 this.style.width = this.style.height = this.size + 'px';
1516 }
1517 if (this.icon) {
1518 var parts = String(this.icon).split(':');
1519 var icon = parts.pop();
1520 if (icon) {
1521 var set = this.getIconset(parts.pop());
1522 if (set) {
1523 set.applyIcon(this, icon, this.size / set.iconSize);
1524 }
1525 }
1526 }
1527 }
1528
1529 });
1530
1531 })();
1532 </script>
1533
1534 </polymer-element>
1535
1536
1537 <!--
1538 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1539 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1540 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1541 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1542 Code distributed by Google as part of the polymer project is also
1543 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
1544 -->
1545
1546 <!--
1547 `core-icon-button` is an icon with button behaviors.
1548
1549 <core-icon-button src="star.png"></core-icon-button>
1550
1551 `core-icon-button` includes a default icon set. Use `icon` to specify
1552 which icon from the icon set to use.
1553
1554 <core-icon-button icon="menu"></core-icon-button>
1555
1556 See [`core-iconset`](#core-iconset) for more information about
1557 how to use a custom icon set.
1558
1559 @group Polymer Core Elements
1560 @element core-icon-button
1561 @homepage github.io
1562 -->
1563
1564
1565
1566
1567 <polymer-element name="core-icon-button" attributes="src icon active" assetpath= "../core-icon-button/">
1568
1569 <template>
1570
1571 <style>/*
1572 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1573 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE
1574 The complete set of authors may be found at http://polymer.github.io/AUTHORS
1575 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
1576 Code distributed by Google as part of the polymer project is also
1577 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS
1578 */
1579
1580 :host {
1581 display: inline-block;
1582 box-sizing: border-box;
1583 -moz-box-sizing: border-box;
1584 width: 38px;
1585 height: 38px;
1586 background-image: none;
1587 border-radius: 2px;
1588 padding: 7px;
1589 margin: 2px;
1590 vertical-align: middle;
1591 font-size: 1rem;
1592 cursor: pointer;
1593 }
1594
1595 :host([disabled]) {
1596 opacity: 0.6;
1597 pointer-events: none;
1598 }
1599
1600 :host(.outline) {
1601 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
1602 }
1603
1604 :host(:hover:not([disabled])) {
1605 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
1606 }
1607
1608 :host(.selected:not([disabled])) {
1609 background-color: rgba(0, 0, 0, 0.05);
1610 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12) ;
1611 }
1612
1613 :host(:active:not([disabled]), .selected:active:not([disabled])) {
1614 background-color: rgba(0, 0, 0, 0.05);
1615 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
1616 }
1617
1618 :host(.core-dark-theme.outline) {
1619 background-color: rgba(200, 200, 200, 0.05);
1620 box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
1621 }
1622
1623 :host(.core-dark-theme:hover) {
1624 background-color: rgba(200, 200, 200, 0.05);
1625 box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
1626 }
1627
1628 :host(.core-dark-theme.selected) {
1629 background-color: rgba(220, 220, 220, 0.05);
1630 box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200 , 200, 0.12);
1631 }
1632
1633 :host(.core-dark-theme:active, .core-dark-theme.selected:active) {
1634 background-color: rgba(200, 200, 200, 0.05);
1635 box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
1636 }
1637
1638 core-icon {
1639 pointer-events: none;
1640 }
1641 </style>
1642
1643 <core-icon src="{{src}}" icon="{{icon}}"><content></content></core-icon>
1644
1645 </template>
1646
1647 <script>
1648
1649 Polymer('core-icon-button', {
1650
1651 /**
1652 * The URL of an image for the icon. Should not use `icon` property
1653 * if you are using this property.
1654 *
1655 * @attribute src
1656 * @type string
1657 * @default ''
1658 */
1659 src: '',
1660
1661 /**
1662 * If true, border is placed around the button to indicate it's
1663 * active state.
1664 *
1665 * @attribute active
1666 * @type boolean
1667 * @default false
1668 */
1669 active: false,
1670
1671 /**
1672 * Specifies the icon name or index in the set of icons available in
1673 * the icon set. Should not use `src` property if you are using this
1674 * property.
1675 *
1676 * @attribute icon
1677 * @type string
1678 * @default ''
1679 */
1680 icon: '',
1681
1682 activeChanged: function() {
1683 this.classList.toggle('selected', this.active);
1684 }
1685
1686 });
1687
1688 </script>
1689
1690 </polymer-element>
1691
1692 <!--
1693 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1694 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1695 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1696 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1697 Code distributed by Google as part of the polymer project is also
1698 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
1699 -->
1700
1701 <!--
1702 `core-toolbar` is a horizontal bar containing elements that can be used for
1703 label, navigation, search and actions.
1704
1705 <core-toolbar>
1706 <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
1707 <div flex>Title</div>
1708 <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
1709 </core-toolbar>
1710
1711 `core-toolbar` has a standard height, but can made be taller by setting `tall`
1712 class on the `core-toolbar`. This will make the toolbar 3x the normal height.
1713
1714 <core-toolbar class="tall">
1715 <core-icon-button icon="menu"></core-icon-button>
1716 </core-toolbar>
1717
1718 Apply `medium-tall` class to make the toolbar medium tall. This will make the
1719 toolbar 2x the normal height.
1720
1721 <core-toolbar class="medium-tall">
1722 <core-icon-button icon="menu"></core-icon-button>
1723 </core-toolbar>
1724
1725 When taller, elements can pin to either the top (default), middle or bottom.
1726
1727 <core-toolbar class="tall">
1728 <core-icon-button icon="menu"></core-icon-button>
1729 <div class="middle indent">Middle Title</div>
1730 <div class="bottom indent">Bottom Title</div>
1731 </core-toolbar>
1732
1733 To make an element completely fit at the bottom of the toolbar, use `fit` along
1734 with `bottom`.
1735
1736 <core-toolbar class="tall">
1737 <div id="progressBar" class="bottom fit"></div>
1738 </core-toolbar>
1739
1740 @group Polymer Core Elements
1741 @element core-toolbar
1742 @homepage github.io
1743 -->
1744
1745
1746
1747 <polymer-element name="core-toolbar" noscript="" assetpath="../core-toolbar/">
1748 <template>
1749
1750 <style>/*
1751 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1752 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1753 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1754 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1755 Code distributed by Google as part of the polymer project is also
1756 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
1757 */
1758
1759 :host {
1760 /* technical */
1761 display: block;
1762 position: relative;
1763 box-sizing: border-box;
1764 -moz-box-sizing: border-box;
1765 /* size */
1766 height: 64px;
1767 /* typography */
1768 font-size: 1.3em;
1769 /* background */
1770 background-color: #CFD8DC;
1771 }
1772
1773 :host(.animate) {
1774 /* transition */
1775 transition: height 0.18s ease-in;
1776 }
1777
1778 :host(.medium-tall) {
1779 height: 128px;
1780 }
1781
1782 :host(.tall) {
1783 height: 192px;
1784 }
1785
1786 .toolbar-tools {
1787 height: 64px;
1788 padding: 0 8px;
1789 pointer-events: none;
1790 }
1791
1792 /* narrow layout */
1793 :host(.narrow) {
1794 height: 56px;
1795 }
1796
1797 :host(.narrow.medium-tall) {
1798 height: 112px;
1799 }
1800
1801 :host(.narrow.tall) {
1802 height: 168px;
1803 }
1804
1805 :host(.narrow) .toolbar-tools {
1806 height: 56px;
1807 padding: 0;
1808 }
1809
1810 /* middle bar */
1811 #middleBar {
1812 position: absolute;
1813 top: 0;
1814 right: 0;
1815 left: 0;
1816 }
1817
1818 :host(.tall, .medium-tall) #middleBar {
1819 -webkit-transform: translateY(100%);
1820 transform: translateY(100%);
1821 }
1822
1823 /* bottom bar */
1824 #bottomBar {
1825 position: absolute;
1826 right: 0;
1827 bottom: 0;
1828 left: 0;
1829 }
1830
1831 /* shows bottom bar only when in normal height (!tall && !medium-tall) */
1832 :host(.animate.no-overlap) > #topBar,
1833 :host(.animate.no-overlap) > #middleBar {
1834 transition: -webkit-transform 0.18s ease-in;
1835 transition: transform 0.18s ease-in;
1836 }
1837
1838 :host(.no-overlap:not(.medium-tall):not(.tall)) > #topBar {
1839 -webkit-transform: translateY(-100%);
1840 transform: translateY(-100%);
1841 }
1842
1843 :host(.no-overlap:not(.medium-tall):not(.tall)) > #middleBar {
1844 -webkit-transform: translateY(-200%);
1845 transform: translateY(-200%);
1846 }
1847
1848 /* make elements (e.g. buttons) respond to mouse/touch events */
1849 polyfill-next-selector { content: '.toolbar-tools > *'; }
1850 ::content > * {
1851 pointer-events: auto;
1852 }
1853
1854 /* elements spacing */
1855 polyfill-next-selector { content: '.toolbar-tools > *'; }
1856 ::content > * {
1857 margin: 0px 8px;
1858 }
1859
1860 /* misc helpers */
1861 polyfill-next-selector { content: '.toolbar-tools > .fit'; }
1862 ::content > .fit {
1863 position: absolute;
1864 top: auto;
1865 right: 0;
1866 bottom: 0;
1867 left: 0;
1868 width: auto;
1869 margin: 0;
1870 }
1871
1872 polyfill-next-selector { content: ':host .indent'; }
1873 ::content > .indent {
1874 margin-left: 60px;
1875 }
1876 </style>
1877
1878 <div id="bottomBar" class="toolbar-tools" center="" horizontal="" layout="">
1879 <content select=".bottom"></content>
1880 </div>
1881
1882 <div id="middleBar" class="toolbar-tools" center="" horizontal="" layout="">
1883 <content select=".middle"></content>
1884 </div>
1885
1886 <div id="topBar" class="toolbar-tools" center="" horizontal="" layout="">
1887 <content></content>
1888 </div>
1889
1890 </template>
1891 </polymer-element>
1892
1893 <!--
1894 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1895 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1896 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1897 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1898 Code distributed by Google as part of the polymer project is also
1899 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
1900 -->
1901
1902 <!--
1903 `core-header-panel` contains a header section and a content panel section.
1904
1905 __Important:__ The `core-header-panel` will not display if its parent does not h ave a height.
1906
1907 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att rs.html), you can easily make the `core-header-panel` fill the screen
1908
1909 <body fullbleed layout vertical>
1910 <core-header-panel flex>
1911 <core-toolbar>
1912 <div>Hello World!</div>
1913 </core-toolbar>
1914 </core-header-panel>
1915 </body>
1916
1917 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-hea der-panel` a height of 100%:
1918
1919 html, body {
1920 height: 100%;
1921 margin: 0;
1922 }
1923 core-header-panel {
1924 height: 100%;
1925 }
1926
1927 Special
1928 support is provided for scrolling modes when one uses a core-toolbar or equivale nt
1929 for the header section.
1930
1931 Example:
1932
1933 <core-header-panel>
1934 <core-toolbar>Header</core-toolbar>
1935 <div>Content goes here...</div>
1936 </core-header-panel>
1937
1938 If you want to use other than `core-toolbar` for the header, add
1939 `core-header` class to that element.
1940
1941 Example:
1942
1943 <core-header-panel>
1944 <div class="core-header">Header</div>
1945 <div>Content goes here...</div>
1946 </core-header-panel>
1947
1948 Use `mode` to control the header and scrolling behavior.
1949
1950 @group Polymer Core Elements
1951 @element core-header-panel
1952 @homepage github.io
1953 -->
1954
1955
1956
1957 <polymer-element name="core-header-panel" assetpath="../core-header-panel/">
1958 <template>
1959
1960 <style>/*
1961 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
1962 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
1963 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
1964 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
1965 Code distributed by Google as part of the polymer project is also
1966 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
1967 */
1968
1969 :host {
1970 display: block;
1971 position: relative;
1972 }
1973
1974 #outerContainer {
1975 position: absolute;
1976 top: 0;
1977 right: 0;
1978 bottom: 0;
1979 left: 0;
1980 overflow-y: auto;
1981 overflow-x: hidden;
1982 -webkit-overflow-scrolling: touch;
1983 }
1984
1985 #mainPanel {
1986 position: relative;
1987 }
1988
1989 #mainContainer {
1990 position: relative;
1991 overflow-y: auto;
1992 overflow-x: hidden;
1993 -webkit-overflow-scrolling: touch;
1994 }
1995
1996 #dropShadow {
1997 position: absolute;
1998 top: 0;
1999 left: 0;
2000 right: 0;
2001 height: 6px;
2002 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
2003 }
2004
2005 #dropShadow.hidden {
2006 display: none;
2007 }
2008
2009 /*
2010 mode: scroll
2011 */
2012 :host([mode=scroll]) #mainContainer {
2013 overflow: visible;
2014 }
2015
2016 /*
2017 mode: cover
2018 */
2019 :host([mode=cover]) #mainPanel {
2020 position: static;
2021 }
2022
2023 :host([mode=cover]) #mainContainer {
2024 position: absolute;
2025 top: 0;
2026 right: 0;
2027 bottom: 0;
2028 left: 0;
2029 }
2030
2031 :host([mode=cover]) #dropShadow {
2032 position: static;
2033 width: 100%;
2034 }
2035 </style>
2036
2037 <div id="outerContainer" on-scroll="{{scroll}}" vertical="" layout="">
2038
2039 <content id="headerContent" select="core-toolbar, .core-header"></content>
2040
2041 <div id="mainPanel" flex="" vertical="" layout="">
2042
2043 <div id="mainContainer" flex?="{{mode !== &apos;cover&apos;}}" on-scroll=" {{scroll}}">
2044 <content id="mainContent" select="*"></content>
2045 </div>
2046
2047 <div id="dropShadow"></div>
2048
2049 </div>
2050
2051 </div>
2052
2053 </template>
2054 <script>
2055
2056 Polymer('core-header-panel', {
2057
2058 publish: {
2059 /**
2060 * Controls header and scrolling behavior. Options are
2061 * `standard`, `seamed`, `waterfall`, `waterfall-tall`,
2062 * `waterfall-medium-tall`, `scroll` and `cover`.
2063 * Default is `standard`.
2064 *
2065 * `standard`: The header is a step above the panel. The header will consu me the
2066 * panel at the point of entry, preventing it from passing through to the
2067 * opposite side.
2068 *
2069 * `seamed`: The header is presented as seamed with the panel.
2070 *
2071 * `waterfall`: Similar to standard mode, but header is initially presente d as
2072 * seamed with panel, but then separates to form the step.
2073 *
2074 * `waterfall-tall`: The header is initially taller (`tall` class is added to
2075 * the header). As the user scrolls, the header separates (forming an edg e)
2076 * while condensing (`tall` class is removed from the header).
2077 *
2078 * `scroll`: The header keeps its seam with the panel, and is pushed off s creen.
2079 *
2080 * `cover`: The panel covers the whole `core-header-panel` including the
2081 * header. This allows user to style the panel in such a way that the pane l is
2082 * partially covering the header.
2083 *
2084 * <style>
2085 * core-header-panel[mode=cover]::shadow #mainContainer {
2086 * left: 80px;
2087 * }
2088 * .content {
2089 * margin: 60px 60px 60px 0;
2090 * }
2091 * </style>
2092 *
2093 * <core-header-panel mode="cover">
2094 * <core-appbar class="tall">
2095 * <core-icon-button icon="menu"></core-icon-button>
2096 * </core-appbar>
2097 * <div class="content"></div>
2098 * </core-header-panel>
2099 *
2100 * @attribute mode
2101 * @type string
2102 * @default ''
2103 */
2104 mode: {value: '', reflect: true},
2105
2106 /**
2107 * The class used in waterfall-tall mode. Change this if the header
2108 * accepts a different class for toggling height, e.g. "medium-tall"
2109 *
2110 * @attribute tallClass
2111 * @type string
2112 * @default 'tall'
2113 */
2114 tallClass: 'tall',
2115
2116 /**
2117 * If true, the drop-shadow is always shown no matter what mode is set to.
2118 *
2119 * @attribute shadow
2120 * @type boolean
2121 * @default false
2122 */
2123 shadow: false,
2124 },
2125
2126 domReady: function() {
2127 this.async('scroll');
2128 },
2129
2130 modeChanged: function() {
2131 this.scroll();
2132 },
2133
2134 get header() {
2135 return this.$.headerContent.getDistributedNodes()[0];
2136 },
2137
2138 scroll: function() {
2139 var shadowMode = {'waterfall': 1, 'waterfall-tall': 1};
2140 var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
2141 var tallMode = {'waterfall-tall': 1};
2142
2143 var main = this.$.mainContainer;
2144 var header = this.header;
2145
2146 var sTop = main.scrollTop;
2147 var atTop = sTop === 0;
2148
2149 if (header) {
2150 this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
2151 (atTop && shadowMode[this.mode] || noShadow[this.mode]));
2152
2153 if (tallMode[this.mode]) {
2154 header.classList.toggle(this.tallClass, atTop);
2155 }
2156
2157 header.classList.toggle('animate', tallMode[this.mode]);
2158 }
2159 }
2160
2161 });
2162
2163 </script>
2164 </polymer-element>
2165
2166 <!--
2167 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
2168 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
2169 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
2170 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
2171 Code distributed by Google as part of the polymer project is also
2172 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
2173 -->
2174
2175
2176 <script>/**
2177 * marked - a markdown parser
2178 * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
2179 * https://github.com/chjj/marked
2180 */
2181
2182 ;(function() {
2183
2184 /**
2185 * Block-Level Grammar
2186 */
2187
2188 var block = {
2189 newline: /^\n+/,
2190 code: /^( {4}[^\n]+\n*)+/,
2191 fences: noop,
2192 hr: /^( *[-*_]){3,} *(?:\n+|$)/,
2193 heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
2194 nptable: noop,
2195 lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
2196 blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
2197 list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
2198 html: /^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,
2199 def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
2200 table: noop,
2201 paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
2202 text: /^[^\n]+/
2203 };
2204
2205 block.bullet = /(?:[*+-]|\d+\.)/;
2206 block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
2207 block.item = replace(block.item, 'gm')
2208 (/bull/g, block.bullet)
2209 ();
2210
2211 block.list = replace(block.list)
2212 (/bull/g, block.bullet)
2213 ('hr', '\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))')
2214 ('def', '\\n+(?=' + block.def.source + ')')
2215 ();
2216
2217 block.blockquote = replace(block.blockquote)
2218 ('def', block.def)
2219 ();
2220
2221 block._tag = '(?!(?:'
2222 + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
2223 + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
2224 + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b';
2225
2226 block.html = replace(block.html)
2227 ('comment', /<!--[\s\S]*?-->/)
2228 ('closed', /<(tag)[\s\S]+?<\/\1>/)
2229 ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
2230 (/tag/g, block._tag)
2231 ();
2232
2233 block.paragraph = replace(block.paragraph)
2234 ('hr', block.hr)
2235 ('heading', block.heading)
2236 ('lheading', block.lheading)
2237 ('blockquote', block.blockquote)
2238 ('tag', '<' + block._tag)
2239 ('def', block.def)
2240 ();
2241
2242 /**
2243 * Normal Block Grammar
2244 */
2245
2246 block.normal = merge({}, block);
2247
2248 /**
2249 * GFM Block Grammar
2250 */
2251
2252 block.gfm = merge({}, block.normal, {
2253 fences: /^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
2254 paragraph: /^/
2255 });
2256
2257 block.gfm.paragraph = replace(block.paragraph)
2258 ('(?!', '(?!'
2259 + block.gfm.fences.source.replace('\\1', '\\2') + '|'
2260 + block.list.source.replace('\\1', '\\3') + '|')
2261 ();
2262
2263 /**
2264 * GFM + Tables Block Grammar
2265 */
2266
2267 block.tables = merge({}, block.gfm, {
2268 nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
2269 table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
2270 });
2271
2272 /**
2273 * Block Lexer
2274 */
2275
2276 function Lexer(options) {
2277 this.tokens = [];
2278 this.tokens.links = {};
2279 this.options = options || marked.defaults;
2280 this.rules = block.normal;
2281
2282 if (this.options.gfm) {
2283 if (this.options.tables) {
2284 this.rules = block.tables;
2285 } else {
2286 this.rules = block.gfm;
2287 }
2288 }
2289 }
2290
2291 /**
2292 * Expose Block Rules
2293 */
2294
2295 Lexer.rules = block;
2296
2297 /**
2298 * Static Lex Method
2299 */
2300
2301 Lexer.lex = function(src, options) {
2302 var lexer = new Lexer(options);
2303 return lexer.lex(src);
2304 };
2305
2306 /**
2307 * Preprocessing
2308 */
2309
2310 Lexer.prototype.lex = function(src) {
2311 src = src
2312 .replace(/\r\n|\r/g, '\n')
2313 .replace(/\t/g, ' ')
2314 .replace(/\u00a0/g, ' ')
2315 .replace(/\u2424/g, '\n');
2316
2317 return this.token(src, true);
2318 };
2319
2320 /**
2321 * Lexing
2322 */
2323
2324 Lexer.prototype.token = function(src, top, bq) {
2325 var src = src.replace(/^ +$/gm, '')
2326 , next
2327 , loose
2328 , cap
2329 , bull
2330 , b
2331 , item
2332 , space
2333 , i
2334 , l;
2335
2336 while (src) {
2337 // newline
2338 if (cap = this.rules.newline.exec(src)) {
2339 src = src.substring(cap[0].length);
2340 if (cap[0].length > 1) {
2341 this.tokens.push({
2342 type: 'space'
2343 });
2344 }
2345 }
2346
2347 // code
2348 if (cap = this.rules.code.exec(src)) {
2349 src = src.substring(cap[0].length);
2350 cap = cap[0].replace(/^ {4}/gm, '');
2351 this.tokens.push({
2352 type: 'code',
2353 text: !this.options.pedantic
2354 ? cap.replace(/\n+$/, '')
2355 : cap
2356 });
2357 continue;
2358 }
2359
2360 // fences (gfm)
2361 if (cap = this.rules.fences.exec(src)) {
2362 src = src.substring(cap[0].length);
2363 this.tokens.push({
2364 type: 'code',
2365 lang: cap[2],
2366 text: cap[3]
2367 });
2368 continue;
2369 }
2370
2371 // heading
2372 if (cap = this.rules.heading.exec(src)) {
2373 src = src.substring(cap[0].length);
2374 this.tokens.push({
2375 type: 'heading',
2376 depth: cap[1].length,
2377 text: cap[2]
2378 });
2379 continue;
2380 }
2381
2382 // table no leading pipe (gfm)
2383 if (top && (cap = this.rules.nptable.exec(src))) {
2384 src = src.substring(cap[0].length);
2385
2386 item = {
2387 type: 'table',
2388 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
2389 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
2390 cells: cap[3].replace(/\n$/, '').split('\n')
2391 };
2392
2393 for (i = 0; i < item.align.length; i++) {
2394 if (/^ *-+: *$/.test(item.align[i])) {
2395 item.align[i] = 'right';
2396 } else if (/^ *:-+: *$/.test(item.align[i])) {
2397 item.align[i] = 'center';
2398 } else if (/^ *:-+ *$/.test(item.align[i])) {
2399 item.align[i] = 'left';
2400 } else {
2401 item.align[i] = null;
2402 }
2403 }
2404
2405 for (i = 0; i < item.cells.length; i++) {
2406 item.cells[i] = item.cells[i].split(/ *\| */);
2407 }
2408
2409 this.tokens.push(item);
2410
2411 continue;
2412 }
2413
2414 // lheading
2415 if (cap = this.rules.lheading.exec(src)) {
2416 src = src.substring(cap[0].length);
2417 this.tokens.push({
2418 type: 'heading',
2419 depth: cap[2] === '=' ? 1 : 2,
2420 text: cap[1]
2421 });
2422 continue;
2423 }
2424
2425 // hr
2426 if (cap = this.rules.hr.exec(src)) {
2427 src = src.substring(cap[0].length);
2428 this.tokens.push({
2429 type: 'hr'
2430 });
2431 continue;
2432 }
2433
2434 // blockquote
2435 if (cap = this.rules.blockquote.exec(src)) {
2436 src = src.substring(cap[0].length);
2437
2438 this.tokens.push({
2439 type: 'blockquote_start'
2440 });
2441
2442 cap = cap[0].replace(/^ *> ?/gm, '');
2443
2444 // Pass `top` to keep the current
2445 // "toplevel" state. This is exactly
2446 // how markdown.pl works.
2447 this.token(cap, top, true);
2448
2449 this.tokens.push({
2450 type: 'blockquote_end'
2451 });
2452
2453 continue;
2454 }
2455
2456 // list
2457 if (cap = this.rules.list.exec(src)) {
2458 src = src.substring(cap[0].length);
2459 bull = cap[2];
2460
2461 this.tokens.push({
2462 type: 'list_start',
2463 ordered: bull.length > 1
2464 });
2465
2466 // Get each top-level item.
2467 cap = cap[0].match(this.rules.item);
2468
2469 next = false;
2470 l = cap.length;
2471 i = 0;
2472
2473 for (; i < l; i++) {
2474 item = cap[i];
2475
2476 // Remove the list item's bullet
2477 // so it is seen as the next token.
2478 space = item.length;
2479 item = item.replace(/^ *([*+-]|\d+\.) +/, '');
2480
2481 // Outdent whatever the
2482 // list item contains. Hacky.
2483 if (~item.indexOf('\n ')) {
2484 space -= item.length;
2485 item = !this.options.pedantic
2486 ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
2487 : item.replace(/^ {1,4}/gm, '');
2488 }
2489
2490 // Determine whether the next list item belongs here.
2491 // Backpedal if it does not belong in this list.
2492 if (this.options.smartLists && i !== l - 1) {
2493 b = block.bullet.exec(cap[i + 1])[0];
2494 if (bull !== b && !(bull.length > 1 && b.length > 1)) {
2495 src = cap.slice(i + 1).join('\n') + src;
2496 i = l - 1;
2497 }
2498 }
2499
2500 // Determine whether item is loose or not.
2501 // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
2502 // for discount behavior.
2503 loose = next || /\n\n(?!\s*$)/.test(item);
2504 if (i !== l - 1) {
2505 next = item.charAt(item.length - 1) === '\n';
2506 if (!loose) loose = next;
2507 }
2508
2509 this.tokens.push({
2510 type: loose
2511 ? 'loose_item_start'
2512 : 'list_item_start'
2513 });
2514
2515 // Recurse.
2516 this.token(item, false, bq);
2517
2518 this.tokens.push({
2519 type: 'list_item_end'
2520 });
2521 }
2522
2523 this.tokens.push({
2524 type: 'list_end'
2525 });
2526
2527 continue;
2528 }
2529
2530 // html
2531 if (cap = this.rules.html.exec(src)) {
2532 src = src.substring(cap[0].length);
2533 this.tokens.push({
2534 type: this.options.sanitize
2535 ? 'paragraph'
2536 : 'html',
2537 pre: cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style',
2538 text: cap[0]
2539 });
2540 continue;
2541 }
2542
2543 // def
2544 if ((!bq && top) && (cap = this.rules.def.exec(src))) {
2545 src = src.substring(cap[0].length);
2546 this.tokens.links[cap[1].toLowerCase()] = {
2547 href: cap[2],
2548 title: cap[3]
2549 };
2550 continue;
2551 }
2552
2553 // table (gfm)
2554 if (top && (cap = this.rules.table.exec(src))) {
2555 src = src.substring(cap[0].length);
2556
2557 item = {
2558 type: 'table',
2559 header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
2560 align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
2561 cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
2562 };
2563
2564 for (i = 0; i < item.align.length; i++) {
2565 if (/^ *-+: *$/.test(item.align[i])) {
2566 item.align[i] = 'right';
2567 } else if (/^ *:-+: *$/.test(item.align[i])) {
2568 item.align[i] = 'center';
2569 } else if (/^ *:-+ *$/.test(item.align[i])) {
2570 item.align[i] = 'left';
2571 } else {
2572 item.align[i] = null;
2573 }
2574 }
2575
2576 for (i = 0; i < item.cells.length; i++) {
2577 item.cells[i] = item.cells[i]
2578 .replace(/^ *\| *| *\| *$/g, '')
2579 .split(/ *\| */);
2580 }
2581
2582 this.tokens.push(item);
2583
2584 continue;
2585 }
2586
2587 // top-level paragraph
2588 if (top && (cap = this.rules.paragraph.exec(src))) {
2589 src = src.substring(cap[0].length);
2590 this.tokens.push({
2591 type: 'paragraph',
2592 text: cap[1].charAt(cap[1].length - 1) === '\n'
2593 ? cap[1].slice(0, -1)
2594 : cap[1]
2595 });
2596 continue;
2597 }
2598
2599 // text
2600 if (cap = this.rules.text.exec(src)) {
2601 // Top-level should never reach here.
2602 src = src.substring(cap[0].length);
2603 this.tokens.push({
2604 type: 'text',
2605 text: cap[0]
2606 });
2607 continue;
2608 }
2609
2610 if (src) {
2611 throw new
2612 Error('Infinite loop on byte: ' + src.charCodeAt(0));
2613 }
2614 }
2615
2616 return this.tokens;
2617 };
2618
2619 /**
2620 * Inline-Level Grammar
2621 */
2622
2623 var inline = {
2624 escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
2625 autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
2626 url: noop,
2627 tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
2628 link: /^!?\[(inside)\]\(href\)/,
2629 reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
2630 nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
2631 strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
2632 em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
2633 code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
2634 br: /^ {2,}\n(?!\s*$)/,
2635 del: noop,
2636 text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
2637 };
2638
2639 inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
2640 inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
2641
2642 inline.link = replace(inline.link)
2643 ('inside', inline._inside)
2644 ('href', inline._href)
2645 ();
2646
2647 inline.reflink = replace(inline.reflink)
2648 ('inside', inline._inside)
2649 ();
2650
2651 /**
2652 * Normal Inline Grammar
2653 */
2654
2655 inline.normal = merge({}, inline);
2656
2657 /**
2658 * Pedantic Inline Grammar
2659 */
2660
2661 inline.pedantic = merge({}, inline.normal, {
2662 strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
2663 em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
2664 });
2665
2666 /**
2667 * GFM Inline Grammar
2668 */
2669
2670 inline.gfm = merge({}, inline.normal, {
2671 escape: replace(inline.escape)('])', '~|])')(),
2672 url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
2673 del: /^~~(?=\S)([\s\S]*?\S)~~/,
2674 text: replace(inline.text)
2675 (']|', '~]|')
2676 ('|', '|https?://|')
2677 ()
2678 });
2679
2680 /**
2681 * GFM + Line Breaks Inline Grammar
2682 */
2683
2684 inline.breaks = merge({}, inline.gfm, {
2685 br: replace(inline.br)('{2,}', '*')(),
2686 text: replace(inline.gfm.text)('{2,}', '*')()
2687 });
2688
2689 /**
2690 * Inline Lexer & Compiler
2691 */
2692
2693 function InlineLexer(links, options) {
2694 this.options = options || marked.defaults;
2695 this.links = links;
2696 this.rules = inline.normal;
2697 this.renderer = this.options.renderer || new Renderer;
2698 this.renderer.options = this.options;
2699
2700 if (!this.links) {
2701 throw new
2702 Error('Tokens array requires a `links` property.');
2703 }
2704
2705 if (this.options.gfm) {
2706 if (this.options.breaks) {
2707 this.rules = inline.breaks;
2708 } else {
2709 this.rules = inline.gfm;
2710 }
2711 } else if (this.options.pedantic) {
2712 this.rules = inline.pedantic;
2713 }
2714 }
2715
2716 /**
2717 * Expose Inline Rules
2718 */
2719
2720 InlineLexer.rules = inline;
2721
2722 /**
2723 * Static Lexing/Compiling Method
2724 */
2725
2726 InlineLexer.output = function(src, links, options) {
2727 var inline = new InlineLexer(links, options);
2728 return inline.output(src);
2729 };
2730
2731 /**
2732 * Lexing/Compiling
2733 */
2734
2735 InlineLexer.prototype.output = function(src) {
2736 var out = ''
2737 , link
2738 , text
2739 , href
2740 , cap;
2741
2742 while (src) {
2743 // escape
2744 if (cap = this.rules.escape.exec(src)) {
2745 src = src.substring(cap[0].length);
2746 out += cap[1];
2747 continue;
2748 }
2749
2750 // autolink
2751 if (cap = this.rules.autolink.exec(src)) {
2752 src = src.substring(cap[0].length);
2753 if (cap[2] === '@') {
2754 text = cap[1].charAt(6) === ':'
2755 ? this.mangle(cap[1].substring(7))
2756 : this.mangle(cap[1]);
2757 href = this.mangle('mailto:') + text;
2758 } else {
2759 text = escape(cap[1]);
2760 href = text;
2761 }
2762 out += this.renderer.link(href, null, text);
2763 continue;
2764 }
2765
2766 // url (gfm)
2767 if (!this.inLink && (cap = this.rules.url.exec(src))) {
2768 src = src.substring(cap[0].length);
2769 text = escape(cap[1]);
2770 href = text;
2771 out += this.renderer.link(href, null, text);
2772 continue;
2773 }
2774
2775 // tag
2776 if (cap = this.rules.tag.exec(src)) {
2777 if (!this.inLink && /^<a /i.test(cap[0])) {
2778 this.inLink = true;
2779 } else if (this.inLink && /^<\/a>/i.test(cap[0])) {
2780 this.inLink = false;
2781 }
2782 src = src.substring(cap[0].length);
2783 out += this.options.sanitize
2784 ? escape(cap[0])
2785 : cap[0];
2786 continue;
2787 }
2788
2789 // link
2790 if (cap = this.rules.link.exec(src)) {
2791 src = src.substring(cap[0].length);
2792 this.inLink = true;
2793 out += this.outputLink(cap, {
2794 href: cap[2],
2795 title: cap[3]
2796 });
2797 this.inLink = false;
2798 continue;
2799 }
2800
2801 // reflink, nolink
2802 if ((cap = this.rules.reflink.exec(src))
2803 || (cap = this.rules.nolink.exec(src))) {
2804 src = src.substring(cap[0].length);
2805 link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
2806 link = this.links[link.toLowerCase()];
2807 if (!link || !link.href) {
2808 out += cap[0].charAt(0);
2809 src = cap[0].substring(1) + src;
2810 continue;
2811 }
2812 this.inLink = true;
2813 out += this.outputLink(cap, link);
2814 this.inLink = false;
2815 continue;
2816 }
2817
2818 // strong
2819 if (cap = this.rules.strong.exec(src)) {
2820 src = src.substring(cap[0].length);
2821 out += this.renderer.strong(this.output(cap[2] || cap[1]));
2822 continue;
2823 }
2824
2825 // em
2826 if (cap = this.rules.em.exec(src)) {
2827 src = src.substring(cap[0].length);
2828 out += this.renderer.em(this.output(cap[2] || cap[1]));
2829 continue;
2830 }
2831
2832 // code
2833 if (cap = this.rules.code.exec(src)) {
2834 src = src.substring(cap[0].length);
2835 out += this.renderer.codespan(escape(cap[2], true));
2836 continue;
2837 }
2838
2839 // br
2840 if (cap = this.rules.br.exec(src)) {
2841 src = src.substring(cap[0].length);
2842 out += this.renderer.br();
2843 continue;
2844 }
2845
2846 // del (gfm)
2847 if (cap = this.rules.del.exec(src)) {
2848 src = src.substring(cap[0].length);
2849 out += this.renderer.del(this.output(cap[1]));
2850 continue;
2851 }
2852
2853 // text
2854 if (cap = this.rules.text.exec(src)) {
2855 src = src.substring(cap[0].length);
2856 out += escape(this.smartypants(cap[0]));
2857 continue;
2858 }
2859
2860 if (src) {
2861 throw new
2862 Error('Infinite loop on byte: ' + src.charCodeAt(0));
2863 }
2864 }
2865
2866 return out;
2867 };
2868
2869 /**
2870 * Compile Link
2871 */
2872
2873 InlineLexer.prototype.outputLink = function(cap, link) {
2874 var href = escape(link.href)
2875 , title = link.title ? escape(link.title) : null;
2876
2877 return cap[0].charAt(0) !== '!'
2878 ? this.renderer.link(href, title, this.output(cap[1]))
2879 : this.renderer.image(href, title, escape(cap[1]));
2880 };
2881
2882 /**
2883 * Smartypants Transformations
2884 */
2885
2886 InlineLexer.prototype.smartypants = function(text) {
2887 if (!this.options.smartypants) return text;
2888 return text
2889 // em-dashes
2890 .replace(/--/g, '\u2014')
2891 // opening singles
2892 .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
2893 // closing singles & apostrophes
2894 .replace(/'/g, '\u2019')
2895 // opening doubles
2896 .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
2897 // closing doubles
2898 .replace(/"/g, '\u201d')
2899 // ellipses
2900 .replace(/\.{3}/g, '\u2026');
2901 };
2902
2903 /**
2904 * Mangle Links
2905 */
2906
2907 InlineLexer.prototype.mangle = function(text) {
2908 var out = ''
2909 , l = text.length
2910 , i = 0
2911 , ch;
2912
2913 for (; i < l; i++) {
2914 ch = text.charCodeAt(i);
2915 if (Math.random() > 0.5) {
2916 ch = 'x' + ch.toString(16);
2917 }
2918 out += '&#' + ch + ';';
2919 }
2920
2921 return out;
2922 };
2923
2924 /**
2925 * Renderer
2926 */
2927
2928 function Renderer(options) {
2929 this.options = options || {};
2930 }
2931
2932 Renderer.prototype.code = function(code, lang, escaped) {
2933 if (this.options.highlight) {
2934 var out = this.options.highlight(code, lang);
2935 if (out != null && out !== code) {
2936 escaped = true;
2937 code = out;
2938 }
2939 }
2940
2941 if (!lang) {
2942 return '<pre><code>'
2943 + (escaped ? code : escape(code, true))
2944 + '\n</code></pre>';
2945 }
2946
2947 return '<pre><code class="'
2948 + this.options.langPrefix
2949 + escape(lang, true)
2950 + '">'
2951 + (escaped ? code : escape(code, true))
2952 + '\n</code></pre>\n';
2953 };
2954
2955 Renderer.prototype.blockquote = function(quote) {
2956 return '<blockquote>\n' + quote + '</blockquote>\n';
2957 };
2958
2959 Renderer.prototype.html = function(html) {
2960 return html;
2961 };
2962
2963 Renderer.prototype.heading = function(text, level, raw) {
2964 return '<h'
2965 + level
2966 + ' id="'
2967 + this.options.headerPrefix
2968 + raw.toLowerCase().replace(/[^\w]+/g, '-')
2969 + '">'
2970 + text
2971 + '</h'
2972 + level
2973 + '>\n';
2974 };
2975
2976 Renderer.prototype.hr = function() {
2977 return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
2978 };
2979
2980 Renderer.prototype.list = function(body, ordered) {
2981 var type = ordered ? 'ol' : 'ul';
2982 return '<' + type + '>\n' + body + '</' + type + '>\n';
2983 };
2984
2985 Renderer.prototype.listitem = function(text) {
2986 return '<li>' + text + '</li>\n';
2987 };
2988
2989 Renderer.prototype.paragraph = function(text) {
2990 return '<p>' + text + '</p>\n';
2991 };
2992
2993 Renderer.prototype.table = function(header, body) {
2994 return '<table>\n'
2995 + '<thead>\n'
2996 + header
2997 + '</thead>\n'
2998 + '<tbody>\n'
2999 + body
3000 + '</tbody>\n'
3001 + '</table>\n';
3002 };
3003
3004 Renderer.prototype.tablerow = function(content) {
3005 return '<tr>\n' + content + '</tr>\n';
3006 };
3007
3008 Renderer.prototype.tablecell = function(content, flags) {
3009 var type = flags.header ? 'th' : 'td';
3010 var tag = flags.align
3011 ? '<' + type + ' style="text-align:' + flags.align + '">'
3012 : '<' + type + '>';
3013 return tag + content + '</' + type + '>\n';
3014 };
3015
3016 // span level renderer
3017 Renderer.prototype.strong = function(text) {
3018 return '<strong>' + text + '</strong>';
3019 };
3020
3021 Renderer.prototype.em = function(text) {
3022 return '<em>' + text + '</em>';
3023 };
3024
3025 Renderer.prototype.codespan = function(text) {
3026 return '<code>' + text + '</code>';
3027 };
3028
3029 Renderer.prototype.br = function() {
3030 return this.options.xhtml ? '<br/>' : '<br>';
3031 };
3032
3033 Renderer.prototype.del = function(text) {
3034 return '<del>' + text + '</del>';
3035 };
3036
3037 Renderer.prototype.link = function(href, title, text) {
3038 if (this.options.sanitize) {
3039 try {
3040 var prot = decodeURIComponent(unescape(href))
3041 .replace(/[^\w:]/g, '')
3042 .toLowerCase();
3043 } catch (e) {
3044 return '';
3045 }
3046 if (prot.indexOf('javascript:') === 0) {
3047 return '';
3048 }
3049 }
3050 var out = '<a href="' + href + '"';
3051 if (title) {
3052 out += ' title="' + title + '"';
3053 }
3054 out += '>' + text + '</a>';
3055 return out;
3056 };
3057
3058 Renderer.prototype.image = function(href, title, text) {
3059 var out = '<img src="' + href + '" alt="' + text + '"';
3060 if (title) {
3061 out += ' title="' + title + '"';
3062 }
3063 out += this.options.xhtml ? '/>' : '>';
3064 return out;
3065 };
3066
3067 /**
3068 * Parsing & Compiling
3069 */
3070
3071 function Parser(options) {
3072 this.tokens = [];
3073 this.token = null;
3074 this.options = options || marked.defaults;
3075 this.options.renderer = this.options.renderer || new Renderer;
3076 this.renderer = this.options.renderer;
3077 this.renderer.options = this.options;
3078 }
3079
3080 /**
3081 * Static Parse Method
3082 */
3083
3084 Parser.parse = function(src, options, renderer) {
3085 var parser = new Parser(options, renderer);
3086 return parser.parse(src);
3087 };
3088
3089 /**
3090 * Parse Loop
3091 */
3092
3093 Parser.prototype.parse = function(src) {
3094 this.inline = new InlineLexer(src.links, this.options, this.renderer);
3095 this.tokens = src.reverse();
3096
3097 var out = '';
3098 while (this.next()) {
3099 out += this.tok();
3100 }
3101
3102 return out;
3103 };
3104
3105 /**
3106 * Next Token
3107 */
3108
3109 Parser.prototype.next = function() {
3110 return this.token = this.tokens.pop();
3111 };
3112
3113 /**
3114 * Preview Next Token
3115 */
3116
3117 Parser.prototype.peek = function() {
3118 return this.tokens[this.tokens.length - 1] || 0;
3119 };
3120
3121 /**
3122 * Parse Text Tokens
3123 */
3124
3125 Parser.prototype.parseText = function() {
3126 var body = this.token.text;
3127
3128 while (this.peek().type === 'text') {
3129 body += '\n' + this.next().text;
3130 }
3131
3132 return this.inline.output(body);
3133 };
3134
3135 /**
3136 * Parse Current Token
3137 */
3138
3139 Parser.prototype.tok = function() {
3140 switch (this.token.type) {
3141 case 'space': {
3142 return '';
3143 }
3144 case 'hr': {
3145 return this.renderer.hr();
3146 }
3147 case 'heading': {
3148 return this.renderer.heading(
3149 this.inline.output(this.token.text),
3150 this.token.depth,
3151 this.token.text);
3152 }
3153 case 'code': {
3154 return this.renderer.code(this.token.text,
3155 this.token.lang,
3156 this.token.escaped);
3157 }
3158 case 'table': {
3159 var header = ''
3160 , body = ''
3161 , i
3162 , row
3163 , cell
3164 , flags
3165 , j;
3166
3167 // header
3168 cell = '';
3169 for (i = 0; i < this.token.header.length; i++) {
3170 flags = { header: true, align: this.token.align[i] };
3171 cell += this.renderer.tablecell(
3172 this.inline.output(this.token.header[i]),
3173 { header: true, align: this.token.align[i] }
3174 );
3175 }
3176 header += this.renderer.tablerow(cell);
3177
3178 for (i = 0; i < this.token.cells.length; i++) {
3179 row = this.token.cells[i];
3180
3181 cell = '';
3182 for (j = 0; j < row.length; j++) {
3183 cell += this.renderer.tablecell(
3184 this.inline.output(row[j]),
3185 { header: false, align: this.token.align[j] }
3186 );
3187 }
3188
3189 body += this.renderer.tablerow(cell);
3190 }
3191 return this.renderer.table(header, body);
3192 }
3193 case 'blockquote_start': {
3194 var body = '';
3195
3196 while (this.next().type !== 'blockquote_end') {
3197 body += this.tok();
3198 }
3199
3200 return this.renderer.blockquote(body);
3201 }
3202 case 'list_start': {
3203 var body = ''
3204 , ordered = this.token.ordered;
3205
3206 while (this.next().type !== 'list_end') {
3207 body += this.tok();
3208 }
3209
3210 return this.renderer.list(body, ordered);
3211 }
3212 case 'list_item_start': {
3213 var body = '';
3214
3215 while (this.next().type !== 'list_item_end') {
3216 body += this.token.type === 'text'
3217 ? this.parseText()
3218 : this.tok();
3219 }
3220
3221 return this.renderer.listitem(body);
3222 }
3223 case 'loose_item_start': {
3224 var body = '';
3225
3226 while (this.next().type !== 'list_item_end') {
3227 body += this.tok();
3228 }
3229
3230 return this.renderer.listitem(body);
3231 }
3232 case 'html': {
3233 var html = !this.token.pre && !this.options.pedantic
3234 ? this.inline.output(this.token.text)
3235 : this.token.text;
3236 return this.renderer.html(html);
3237 }
3238 case 'paragraph': {
3239 return this.renderer.paragraph(this.inline.output(this.token.text));
3240 }
3241 case 'text': {
3242 return this.renderer.paragraph(this.parseText());
3243 }
3244 }
3245 };
3246
3247 /**
3248 * Helpers
3249 */
3250
3251 function escape(html, encode) {
3252 return html
3253 .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&amp;')
3254 .replace(/</g, '&lt;')
3255 .replace(/>/g, '&gt;')
3256 .replace(/"/g, '&quot;')
3257 .replace(/'/g, '&#39;');
3258 }
3259
3260 function unescape(html) {
3261 return html.replace(/&([#\w]+);/g, function(_, n) {
3262 n = n.toLowerCase();
3263 if (n === 'colon') return ':';
3264 if (n.charAt(0) === '#') {
3265 return n.charAt(1) === 'x'
3266 ? String.fromCharCode(parseInt(n.substring(2), 16))
3267 : String.fromCharCode(+n.substring(1));
3268 }
3269 return '';
3270 });
3271 }
3272
3273 function replace(regex, opt) {
3274 regex = regex.source;
3275 opt = opt || '';
3276 return function self(name, val) {
3277 if (!name) return new RegExp(regex, opt);
3278 val = val.source || val;
3279 val = val.replace(/(^|[^\[])\^/g, '$1');
3280 regex = regex.replace(name, val);
3281 return self;
3282 };
3283 }
3284
3285 function noop() {}
3286 noop.exec = noop;
3287
3288 function merge(obj) {
3289 var i = 1
3290 , target
3291 , key;
3292
3293 for (; i < arguments.length; i++) {
3294 target = arguments[i];
3295 for (key in target) {
3296 if (Object.prototype.hasOwnProperty.call(target, key)) {
3297 obj[key] = target[key];
3298 }
3299 }
3300 }
3301
3302 return obj;
3303 }
3304
3305
3306 /**
3307 * Marked
3308 */
3309
3310 function marked(src, opt, callback) {
3311 if (callback || typeof opt === 'function') {
3312 if (!callback) {
3313 callback = opt;
3314 opt = null;
3315 }
3316
3317 opt = merge({}, marked.defaults, opt || {});
3318
3319 var highlight = opt.highlight
3320 , tokens
3321 , pending
3322 , i = 0;
3323
3324 try {
3325 tokens = Lexer.lex(src, opt)
3326 } catch (e) {
3327 return callback(e);
3328 }
3329
3330 pending = tokens.length;
3331
3332 var done = function() {
3333 var out, err;
3334
3335 try {
3336 out = Parser.parse(tokens, opt);
3337 } catch (e) {
3338 err = e;
3339 }
3340
3341 opt.highlight = highlight;
3342
3343 return err
3344 ? callback(err)
3345 : callback(null, out);
3346 };
3347
3348 if (!highlight || highlight.length < 3) {
3349 return done();
3350 }
3351
3352 delete opt.highlight;
3353
3354 if (!pending) return done();
3355
3356 for (; i < tokens.length; i++) {
3357 (function(token) {
3358 if (token.type !== 'code') {
3359 return --pending || done();
3360 }
3361 return highlight(token.text, token.lang, function(err, code) {
3362 if (code == null || code === token.text) {
3363 return --pending || done();
3364 }
3365 token.text = code;
3366 token.escaped = true;
3367 --pending || done();
3368 });
3369 })(tokens[i]);
3370 }
3371
3372 return;
3373 }
3374 try {
3375 if (opt) opt = merge({}, marked.defaults, opt);
3376 return Parser.parse(Lexer.lex(src, opt), opt);
3377 } catch (e) {
3378 e.message += '\nPlease report this to https://github.com/chjj/marked.';
3379 if ((opt || marked.defaults).silent) {
3380 return '<p>An error occured:</p><pre>'
3381 + escape(e.message + '', true)
3382 + '</pre>';
3383 }
3384 throw e;
3385 }
3386 }
3387
3388 /**
3389 * Options
3390 */
3391
3392 marked.options =
3393 marked.setOptions = function(opt) {
3394 merge(marked.defaults, opt);
3395 return marked;
3396 };
3397
3398 marked.defaults = {
3399 gfm: true,
3400 tables: true,
3401 breaks: false,
3402 pedantic: false,
3403 sanitize: false,
3404 smartLists: false,
3405 silent: false,
3406 highlight: null,
3407 langPrefix: 'lang-',
3408 smartypants: false,
3409 headerPrefix: '',
3410 renderer: new Renderer,
3411 xhtml: false
3412 };
3413
3414 /**
3415 * Expose
3416 */
3417
3418 marked.Parser = Parser;
3419 marked.parser = Parser.parse;
3420
3421 marked.Renderer = Renderer;
3422
3423 marked.Lexer = Lexer;
3424 marked.lexer = Lexer.lex;
3425
3426 marked.InlineLexer = InlineLexer;
3427 marked.inlineLexer = InlineLexer.output;
3428
3429 marked.parse = marked;
3430
3431 if (typeof exports === 'object') {
3432 module.exports = marked;
3433 } else if (typeof define === 'function' && define.amd) {
3434 define(function() { return marked; });
3435 } else {
3436 this.marked = marked;
3437 }
3438
3439 }).call(function() {
3440 return this || (typeof window !== 'undefined' ? window : global);
3441 }());
3442 </script>
3443
3444
3445 <!--
3446 Element wrapper for the `marked` (http://marked.org/) library.
3447
3448 @class marked-element
3449 @blurb Element wrapper for the marked library.
3450 @status alpha
3451 @snap snap.png
3452 -->
3453 <polymer-element name="marked-element" attributes="text" assetpath="../marked-el ement/">
3454 <script>
3455
3456 Polymer('marked-element', {
3457
3458 text: '',
3459
3460 attached: function() {
3461 marked.setOptions({
3462 highlight: this.highlight.bind(this)
3463 });
3464 if (!this.text) {
3465 this.text = this.innerHTML;
3466 }
3467 },
3468
3469 textChanged: function () {
3470 this.innerHTML = marked(this.text);
3471 },
3472
3473 highlight: function(code, lang) {
3474 var event = this.fire('marked-js-highlight', {code: code, lang: lang});
3475 return event.detail.code || code;
3476 }
3477
3478 });
3479
3480 </script>
3481 </polymer-element>
3482
3483
3484 <script>// Copyright (C) 2006 Google Inc.
3485 //
3486 // Licensed under the Apache License, Version 2.0 (the "License");
3487 // you may not use this file except in compliance with the License.
3488 // You may obtain a copy of the License at
3489 //
3490 // http://www.apache.org/licenses/LICENSE-2.0
3491 //
3492 // Unless required by applicable law or agreed to in writing, software
3493 // distributed under the License is distributed on an "AS IS" BASIS,
3494 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3495 // See the License for the specific language governing permissions and
3496 // limitations under the License.
3497
3498
3499 /**
3500 * @fileoverview
3501 * some functions for browser-side pretty printing of code contained in html.
3502 *
3503 * <p>
3504 * For a fairly comprehensive set of languages see the
3505 * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#lan gs">README</a>
3506 * file that came with this source. At a minimum, the lexer should work on a
3507 * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
3508 * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk
3509 * and a subset of Perl, but, because of commenting conventions, doesn't work on
3510 * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
3511 * <p>
3512 * Usage: <ol>
3513 * <li> include this source file in an html page via
3514 * {@code <script type="text/javascript" src="/path/to/prettify.js"><\/script> }
3515 * <li> define style rules. See the example page for examples.
3516 * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
3517 * {@code class=prettyprint.}
3518 * You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
3519 * printer needs to do more substantial DOM manipulations to support that, so
3520 * some css styles may not be preserved.
3521 * </ol>
3522 * That's it. I wanted to keep the API as simple as possible, so there's no
3523 * need to specify which language the code is in, but if you wish, you can add
3524 * another class to the {@code <pre>} or {@code <code>} element to specify the
3525 * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
3526 * starts with "lang-" followed by a file extension, specifies the file type.
3527 * See the "lang-*.js" files in this directory for code that implements
3528 * per-language file handlers.
3529 * <p>
3530 * Change log:<br>
3531 * cbeust, 2006/08/22
3532 * <blockquote>
3533 * Java annotations (start with "@") are now captured as literals ("lit")
3534 * </blockquote>
3535 * @requires console
3536 */
3537
3538 // JSLint declarations
3539 /*global console, document, navigator, setTimeout, window, define */
3540
3541 /**
3542 * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
3543 * UI events.
3544 * If set to {@code false}, {@code prettyPrint()} is synchronous.
3545 */
3546 window['PR_SHOULD_USE_CONTINUATION'] = true;
3547
3548 /**
3549 * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
3550 * {@code class=prettyprint} and prettify them.
3551 *
3552 * @param {Function?} opt_whenDone if specified, called when the last entry
3553 * has been finished.
3554 */
3555 var prettyPrintOne;
3556 /**
3557 * Pretty print a chunk of code.
3558 *
3559 * @param {string} sourceCodeHtml code as html
3560 * @return {string} code as html, but prettier
3561 */
3562 var prettyPrint;
3563
3564
3565 (function () {
3566 var win = window;
3567 // Keyword lists for various languages.
3568 // We use things that coerce to strings to make them compact when minified
3569 // and to defeat aggressive optimizers that fold large string constants.
3570 var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
3571 var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
3572 "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
3573 "static,struct,switch,typedef,union,unsigned,void,volatile"];
3574 var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
3575 "new,operator,private,protected,public,this,throw,true,try,typeof"];
3576 var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
3577 "concept,concept_map,const_cast,constexpr,decltype," +
3578 "dynamic_cast,explicit,export,friend,inline,late_check," +
3579 "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
3580 "template,typeid,typename,using,virtual,where"];
3581 var JAVA_KEYWORDS = [COMMON_KEYWORDS,
3582 "abstract,boolean,byte,extends,final,finally,implements,import," +
3583 "instanceof,null,native,package,strictfp,super,synchronized,throws," +
3584 "transient"];
3585 var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
3586 "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
3587 "fixed,foreach,from,group,implicit,in,interface,internal,into,is,let," +
3588 "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
3589 "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
3590 "var,virtual,where"];
3591 var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
3592 "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
3593 "throw,true,try,unless,until,when,while,yes";
3594 var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
3595 "debugger,eval,export,function,get,null,set,undefined,var,with," +
3596 "Infinity,NaN"];
3597 var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
3598 "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
3599 "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
3600 var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
3601 "elif,except,exec,finally,from,global,import,in,is,lambda," +
3602 "nonlocal,not,or,pass,print,raise,try,with,yield," +
3603 "False,True,None"];
3604 var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
3605 "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
3606 "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
3607 "BEGIN,END"];
3608 var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
3609 "function,in,local,set,then,until"];
3610 var ALL_KEYWORDS = [
3611 CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
3612 PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
3613 var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iter ator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
3614
3615 // token style names. correspond to css classes
3616 /**
3617 * token style for a string literal
3618 * @const
3619 */
3620 var PR_STRING = 'str';
3621 /**
3622 * token style for a keyword
3623 * @const
3624 */
3625 var PR_KEYWORD = 'kwd';
3626 /**
3627 * token style for a comment
3628 * @const
3629 */
3630 var PR_COMMENT = 'com';
3631 /**
3632 * token style for a type
3633 * @const
3634 */
3635 var PR_TYPE = 'typ';
3636 /**
3637 * token style for a literal value. e.g. 1, null, true.
3638 * @const
3639 */
3640 var PR_LITERAL = 'lit';
3641 /**
3642 * token style for a punctuation string.
3643 * @const
3644 */
3645 var PR_PUNCTUATION = 'pun';
3646 /**
3647 * token style for plain text.
3648 * @const
3649 */
3650 var PR_PLAIN = 'pln';
3651
3652 /**
3653 * token style for an sgml tag.
3654 * @const
3655 */
3656 var PR_TAG = 'tag';
3657 /**
3658 * token style for a markup declaration such as a DOCTYPE.
3659 * @const
3660 */
3661 var PR_DECLARATION = 'dec';
3662 /**
3663 * token style for embedded source.
3664 * @const
3665 */
3666 var PR_SOURCE = 'src';
3667 /**
3668 * token style for an sgml attribute name.
3669 * @const
3670 */
3671 var PR_ATTRIB_NAME = 'atn';
3672 /**
3673 * token style for an sgml attribute value.
3674 * @const
3675 */
3676 var PR_ATTRIB_VALUE = 'atv';
3677
3678 /**
3679 * A class that indicates a section of markup that is not code, e.g. to allow
3680 * embedding of line numbers within code listings.
3681 * @const
3682 */
3683 var PR_NOCODE = 'nocode';
3684
3685
3686
3687 /**
3688 * A set of tokens that can precede a regular expression literal in
3689 * javascript
3690 * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/ js20/rationale/syntax.html
3691 * has the full list, but I've removed ones that might be problematic when
3692 * seen in languages that don't support regular expression literals.
3693 *
3694 * <p>Specifically, I've removed any keywords that can't precede a regexp
3695 * literal in a syntactically legal javascript program, and I've removed the
3696 * "in" keyword since it's not a keyword in many languages, and might be used
3697 * as a count of inches.
3698 *
3699 * <p>The link above does not accurately describe EcmaScript rules since
3700 * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
3701 * very well in practice.
3702 *
3703 * @private
3704 * @const
3705 */
3706 var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[ +\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|ca se|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
3707
3708 // CAVEAT: this does not properly handle the case where a regular
3709 // expression immediately follows another since a regular expression may
3710 // have flags for case-sensitivity and the like. Having regexp tokens
3711 // adjacent is not valid in any language I'm aware of, so I'm punting.
3712 // TODO: maybe style special characters inside a regexp as punctuation.
3713
3714
3715 /**
3716 * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
3717 * matches the union of the sets of strings matched by the input RegExp.
3718 * Since it matches globally, if the input strings have a start-of-input
3719 * anchor (/^.../), it is ignored for the purposes of unioning.
3720 * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
3721 * @return {RegExp} a global regex.
3722 */
3723 function combinePrefixPatterns(regexs) {
3724 var capturedGroupIndex = 0;
3725
3726 var needToFoldCase = false;
3727 var ignoreCase = false;
3728 for (var i = 0, n = regexs.length; i < n; ++i) {
3729 var regex = regexs[i];
3730 if (regex.ignoreCase) {
3731 ignoreCase = true;
3732 } else if (/[a-z]/i.test(regex.source.replace(
3733 /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
3734 needToFoldCase = true;
3735 ignoreCase = false;
3736 break;
3737 }
3738 }
3739
3740 var escapeCharToCodeUnit = {
3741 'b': 8,
3742 't': 9,
3743 'n': 0xa,
3744 'v': 0xb,
3745 'f': 0xc,
3746 'r': 0xd
3747 };
3748
3749 function decodeEscape(charsetPart) {
3750 var cc0 = charsetPart.charCodeAt(0);
3751 if (cc0 !== 92 /* \\ */) {
3752 return cc0;
3753 }
3754 var c1 = charsetPart.charAt(1);
3755 cc0 = escapeCharToCodeUnit[c1];
3756 if (cc0) {
3757 return cc0;
3758 } else if ('0' <= c1 && c1 <= '7') {
3759 return parseInt(charsetPart.substring(1), 8);
3760 } else if (c1 === 'u' || c1 === 'x') {
3761 return parseInt(charsetPart.substring(2), 16);
3762 } else {
3763 return charsetPart.charCodeAt(1);
3764 }
3765 }
3766
3767 function encodeEscape(charCode) {
3768 if (charCode < 0x20) {
3769 return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
3770 }
3771 var ch = String.fromCharCode(charCode);
3772 return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
3773 ? "\\" + ch : ch;
3774 }
3775
3776 function caseFoldCharset(charSet) {
3777 var charsetParts = charSet.substring(1, charSet.length - 1).match(
3778 new RegExp(
3779 '\\\\u[0-9A-Fa-f]{4}'
3780 + '|\\\\x[0-9A-Fa-f]{2}'
3781 + '|\\\\[0-3][0-7]{0,2}'
3782 + '|\\\\[0-7]{1,2}'
3783 + '|\\\\[\\s\\S]'
3784 + '|-'
3785 + '|[^-\\\\]',
3786 'g'));
3787 var ranges = [];
3788 var inverse = charsetParts[0] === '^';
3789
3790 var out = ['['];
3791 if (inverse) { out.push('^'); }
3792
3793 for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
3794 var p = charsetParts[i];
3795 if (/\\[bdsw]/i.test(p)) { // Don't muck with named groups.
3796 out.push(p);
3797 } else {
3798 var start = decodeEscape(p);
3799 var end;
3800 if (i + 2 < n && '-' === charsetParts[i + 1]) {
3801 end = decodeEscape(charsetParts[i + 2]);
3802 i += 2;
3803 } else {
3804 end = start;
3805 }
3806 ranges.push([start, end]);
3807 // If the range might intersect letters, then expand it.
3808 // This case handling is too simplistic.
3809 // It does not deal with non-latin case folding.
3810 // It works for latin source code identifiers though.
3811 if (!(end < 65 || start > 122)) {
3812 if (!(end < 65 || start > 90)) {
3813 ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
3814 }
3815 if (!(end < 97 || start > 122)) {
3816 ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]) ;
3817 }
3818 }
3819 }
3820 }
3821
3822 // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
3823 // -> [[1, 12], [14, 14], [16, 17]]
3824 ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
3825 var consolidatedRanges = [];
3826 var lastRange = [];
3827 for (var i = 0; i < ranges.length; ++i) {
3828 var range = ranges[i];
3829 if (range[0] <= lastRange[1] + 1) {
3830 lastRange[1] = Math.max(lastRange[1], range[1]);
3831 } else {
3832 consolidatedRanges.push(lastRange = range);
3833 }
3834 }
3835
3836 for (var i = 0; i < consolidatedRanges.length; ++i) {
3837 var range = consolidatedRanges[i];
3838 out.push(encodeEscape(range[0]));
3839 if (range[1] > range[0]) {
3840 if (range[1] + 1 > range[0]) { out.push('-'); }
3841 out.push(encodeEscape(range[1]));
3842 }
3843 }
3844 out.push(']');
3845 return out.join('');
3846 }
3847
3848 function allowAnywhereFoldCaseAndRenumberGroups(regex) {
3849 // Split into character sets, escape sequences, punctuation strings
3850 // like ('(', '(?:', ')', '^'), and runs of characters that do not
3851 // include any of the above.
3852 var parts = regex.source.match(
3853 new RegExp(
3854 '(?:'
3855 + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
3856 + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
3857 + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
3858 + '|\\\\[0-9]+' // a back-reference or octal escape
3859 + '|\\\\[^ux0-9]' // other escape sequence
3860 + '|\\(\\?[:!=]' // start of a non-capturing group
3861 + '|[\\(\\)\\^]' // start/end of a group, or line start
3862 + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
3863 + ')',
3864 'g'));
3865 var n = parts.length;
3866
3867 // Maps captured group numbers to the number they will occupy in
3868 // the output or to -1 if that has not been determined, or to
3869 // undefined if they need not be capturing in the output.
3870 var capturedGroups = [];
3871
3872 // Walk over and identify back references to build the capturedGroups
3873 // mapping.
3874 for (var i = 0, groupIndex = 0; i < n; ++i) {
3875 var p = parts[i];
3876 if (p === '(') {
3877 // groups are 1-indexed, so max group index is count of '('
3878 ++groupIndex;
3879 } else if ('\\' === p.charAt(0)) {
3880 var decimalValue = +p.substring(1);
3881 if (decimalValue) {
3882 if (decimalValue <= groupIndex) {
3883 capturedGroups[decimalValue] = -1;
3884 } else {
3885 // Replace with an unambiguous escape sequence so that
3886 // an octal escape sequence does not turn into a backreference
3887 // to a capturing group from an earlier regex.
3888 parts[i] = encodeEscape(decimalValue);
3889 }
3890 }
3891 }
3892 }
3893
3894 // Renumber groups and reduce capturing groups to non-capturing groups
3895 // where possible.
3896 for (var i = 1; i < capturedGroups.length; ++i) {
3897 if (-1 === capturedGroups[i]) {
3898 capturedGroups[i] = ++capturedGroupIndex;
3899 }
3900 }
3901 for (var i = 0, groupIndex = 0; i < n; ++i) {
3902 var p = parts[i];
3903 if (p === '(') {
3904 ++groupIndex;
3905 if (!capturedGroups[groupIndex]) {
3906 parts[i] = '(?:';
3907 }
3908 } else if ('\\' === p.charAt(0)) {
3909 var decimalValue = +p.substring(1);
3910 if (decimalValue && decimalValue <= groupIndex) {
3911 parts[i] = '\\' + capturedGroups[decimalValue];
3912 }
3913 }
3914 }
3915
3916 // Remove any prefix anchors so that the output will match anywhere.
3917 // ^^ really does mean an anchored match though.
3918 for (var i = 0; i < n; ++i) {
3919 if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
3920 }
3921
3922 // Expand letters to groups to handle mixing of case-sensitive and
3923 // case-insensitive patterns if necessary.
3924 if (regex.ignoreCase && needToFoldCase) {
3925 for (var i = 0; i < n; ++i) {
3926 var p = parts[i];
3927 var ch0 = p.charAt(0);
3928 if (p.length >= 2 && ch0 === '[') {
3929 parts[i] = caseFoldCharset(p);
3930 } else if (ch0 !== '\\') {
3931 // TODO: handle letters in numeric escapes.
3932 parts[i] = p.replace(
3933 /[a-zA-Z]/g,
3934 function (ch) {
3935 var cc = ch.charCodeAt(0);
3936 return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
3937 });
3938 }
3939 }
3940 }
3941
3942 return parts.join('');
3943 }
3944
3945 var rewritten = [];
3946 for (var i = 0, n = regexs.length; i < n; ++i) {
3947 var regex = regexs[i];
3948 if (regex.global || regex.multiline) { throw new Error('' + regex); }
3949 rewritten.push(
3950 '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
3951 }
3952
3953 return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
3954 }
3955
3956
3957 /**
3958 * Split markup into a string of source code and an array mapping ranges in
3959 * that string to the text nodes in which they appear.
3960 *
3961 * <p>
3962 * The HTML DOM structure:</p>
3963 * <pre>
3964 * (Element "p"
3965 * (Element "b"
3966 * (Text "print ")) ; #1
3967 * (Text "'Hello '") ; #2
3968 * (Element "br") ; #3
3969 * (Text " + 'World';")) ; #4
3970 * </pre>
3971 * <p>
3972 * corresponds to the HTML
3973 * {@code <p><b>print </b>'Hello '<br> + 'World';</p>}.</p>
3974 *
3975 * <p>
3976 * It will produce the output:</p>
3977 * <pre>
3978 * {
3979 * sourceCode: "print 'Hello '\n + 'World';",
3980 * // 1 2
3981 * // 012345678901234 5678901234567
3982 * spans: [0, #1, 6, #2, 14, #3, 15, #4]
3983 * }
3984 * </pre>
3985 * <p>
3986 * where #1 is a reference to the {@code "print "} text node above, and so
3987 * on for the other text nodes.
3988 * </p>
3989 *
3990 * <p>
3991 * The {@code} spans array is an array of pairs. Even elements are the start
3992 * indices of substrings, and odd elements are the text nodes (or BR elements)
3993 * that contain the text for those substrings.
3994 * Substrings continue until the next index or the end of the source.
3995 * </p>
3996 *
3997 * @param {Node} node an HTML DOM subtree containing source-code.
3998 * @param {boolean} isPreformatted true if white-space in text nodes should
3999 * be considered significant.
4000 * @return {Object} source code and the text nodes in which they occur.
4001 */
4002 function extractSourceSpans(node, isPreformatted) {
4003 var nocode = /(?:^|\s)nocode(?:\s|$)/;
4004
4005 var chunks = [];
4006 var length = 0;
4007 var spans = [];
4008 var k = 0;
4009
4010 function walk(node) {
4011 switch (node.nodeType) {
4012 case 1: // Element
4013 if (nocode.test(node.className)) { return; }
4014 for (var child = node.firstChild; child; child = child.nextSibling) {
4015 walk(child);
4016 }
4017 var nodeName = node.nodeName.toLowerCase();
4018 if ('br' === nodeName || 'li' === nodeName) {
4019 chunks[k] = '\n';
4020 spans[k << 1] = length++;
4021 spans[(k++ << 1) | 1] = node;
4022 }
4023 break;
4024 case 3: case 4: // Text
4025 var text = node.nodeValue;
4026 if (text.length) {
4027 if (!isPreformatted) {
4028 text = text.replace(/[ \t\r\n]+/g, ' ');
4029 } else {
4030 text = text.replace(/\r\n?/g, '\n'); // Normalize newlines.
4031 }
4032 // TODO: handle tabs here?
4033 chunks[k] = text;
4034 spans[k << 1] = length;
4035 length += text.length;
4036 spans[(k++ << 1) | 1] = node;
4037 }
4038 break;
4039 }
4040 }
4041
4042 walk(node);
4043
4044 return {
4045 sourceCode: chunks.join('').replace(/\n$/, ''),
4046 spans: spans
4047 };
4048 }
4049
4050
4051 /**
4052 * Apply the given language handler to sourceCode and add the resulting
4053 * decorations to out.
4054 * @param {number} basePos the index of sourceCode within the chunk of source
4055 * whose decorations are already present on out.
4056 */
4057 function appendDecorations(basePos, sourceCode, langHandler, out) {
4058 if (!sourceCode) { return; }
4059 var job = {
4060 sourceCode: sourceCode,
4061 basePos: basePos
4062 };
4063 langHandler(job);
4064 out.push.apply(out, job.decorations);
4065 }
4066
4067 var notWs = /\S/;
4068
4069 /**
4070 * Given an element, if it contains only one child element and any text nodes
4071 * it contains contain only space characters, return the sole child element.
4072 * Otherwise returns undefined.
4073 * <p>
4074 * This is meant to return the CODE element in {@code <pre><code ...>} when
4075 * there is a single child element that contains all the non-space textual
4076 * content, but not to return anything where there are multiple child elements
4077 * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
4078 * is textual content.
4079 */
4080 function childContentWrapper(element) {
4081 var wrapper = undefined;
4082 for (var c = element.firstChild; c; c = c.nextSibling) {
4083 var type = c.nodeType;
4084 wrapper = (type === 1) // Element Node
4085 ? (wrapper ? element : c)
4086 : (type === 3) // Text Node
4087 ? (notWs.test(c.nodeValue) ? element : wrapper)
4088 : wrapper;
4089 }
4090 return wrapper === element ? undefined : wrapper;
4091 }
4092
4093 /** Given triples of [style, pattern, context] returns a lexing function,
4094 * The lexing function interprets the patterns to find token boundaries and
4095 * returns a decoration list of the form
4096 * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
4097 * where index_n is an index into the sourceCode, and style_n is a style
4098 * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
4099 * all characters in sourceCode[index_n-1:index_n].
4100 *
4101 * The stylePatterns is a list whose elements have the form
4102 * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
4103 *
4104 * Style is a style constant like PR_PLAIN, or can be a string of the
4105 * form 'lang-FOO', where FOO is a language extension describing the
4106 * language of the portion of the token in $1 after pattern executes.
4107 * E.g., if style is 'lang-lisp', and group 1 contains the text
4108 * '(hello (world))', then that portion of the token will be passed to the
4109 * registered lisp handler for formatting.
4110 * The text before and after group 1 will be restyled using this decorator
4111 * so decorators should take care that this doesn't result in infinite
4112 * recursion. For example, the HTML lexer rule for SCRIPT elements looks
4113 * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
4114 * '<script>foo()<\/script>', which would cause the current decorator to
4115 * be called with '<script>' which would not match the same rule since
4116 * group 1 must not be empty, so it would be instead styled as PR_TAG by
4117 * the generic tag rule. The handler registered for the 'js' extension would
4118 * then be called with 'foo()', and finally, the current decorator would
4119 * be called with '<\/script>' which would not match the original rule and
4120 * so the generic tag rule would identify it as a tag.
4121 *
4122 * Pattern must only match prefixes, and if it matches a prefix, then that
4123 * match is considered a token with the same style.
4124 *
4125 * Context is applied to the last non-whitespace, non-comment token
4126 * recognized.
4127 *
4128 * Shortcut is an optional string of characters, any of which, if the first
4129 * character, gurantee that this pattern and only this pattern matches.
4130 *
4131 * @param {Array} shortcutStylePatterns patterns that always start with
4132 * a known character. Must have a shortcut string.
4133 * @param {Array} fallthroughStylePatterns patterns that will be tried in
4134 * order if the shortcut ones fail. May have shortcuts.
4135 *
4136 * @return {function (Object)} a
4137 * function that takes source code and returns a list of decorations.
4138 */
4139 function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
4140 var shortcuts = {};
4141 var tokenizer;
4142 (function () {
4143 var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
4144 var allRegexs = [];
4145 var regexKeys = {};
4146 for (var i = 0, n = allPatterns.length; i < n; ++i) {
4147 var patternParts = allPatterns[i];
4148 var shortcutChars = patternParts[3];
4149 if (shortcutChars) {
4150 for (var c = shortcutChars.length; --c >= 0;) {
4151 shortcuts[shortcutChars.charAt(c)] = patternParts;
4152 }
4153 }
4154 var regex = patternParts[1];
4155 var k = '' + regex;
4156 if (!regexKeys.hasOwnProperty(k)) {
4157 allRegexs.push(regex);
4158 regexKeys[k] = null;
4159 }
4160 }
4161 allRegexs.push(/[\0-\uffff]/);
4162 tokenizer = combinePrefixPatterns(allRegexs);
4163 })();
4164
4165 var nPatterns = fallthroughStylePatterns.length;
4166
4167 /**
4168 * Lexes job.sourceCode and produces an output array job.decorations of
4169 * style classes preceded by the position at which they start in
4170 * job.sourceCode in order.
4171 *
4172 * @param {Object} job an object like <pre>{
4173 * sourceCode: {string} sourceText plain text,
4174 * basePos: {int} position of job.sourceCode in the larger chunk of
4175 * sourceCode.
4176 * }</pre>
4177 */
4178 var decorate = function (job) {
4179 var sourceCode = job.sourceCode, basePos = job.basePos;
4180 /** Even entries are positions in source in ascending order. Odd enties
4181 * are style markers (e.g., PR_COMMENT) that run from that position until
4182 * the end.
4183 * @type {Array.<number|string>}
4184 */
4185 var decorations = [basePos, PR_PLAIN];
4186 var pos = 0; // index into sourceCode
4187 var tokens = sourceCode.match(tokenizer) || [];
4188 var styleCache = {};
4189
4190 for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
4191 var token = tokens[ti];
4192 var style = styleCache[token];
4193 var match = void 0;
4194
4195 var isEmbedded;
4196 if (typeof style === 'string') {
4197 isEmbedded = false;
4198 } else {
4199 var patternParts = shortcuts[token.charAt(0)];
4200 if (patternParts) {
4201 match = token.match(patternParts[1]);
4202 style = patternParts[0];
4203 } else {
4204 for (var i = 0; i < nPatterns; ++i) {
4205 patternParts = fallthroughStylePatterns[i];
4206 match = token.match(patternParts[1]);
4207 if (match) {
4208 style = patternParts[0];
4209 break;
4210 }
4211 }
4212
4213 if (!match) { // make sure that we make progress
4214 style = PR_PLAIN;
4215 }
4216 }
4217
4218 isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
4219 if (isEmbedded && !(match && typeof match[1] === 'string')) {
4220 isEmbedded = false;
4221 style = PR_SOURCE;
4222 }
4223
4224 if (!isEmbedded) { styleCache[token] = style; }
4225 }
4226
4227 var tokenStart = pos;
4228 pos += token.length;
4229
4230 if (!isEmbedded) {
4231 decorations.push(basePos + tokenStart, style);
4232 } else { // Treat group 1 as an embedded block of source code.
4233 var embeddedSource = match[1];
4234 var embeddedSourceStart = token.indexOf(embeddedSource);
4235 var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
4236 if (match[2]) {
4237 // If embeddedSource can be blank, then it would match at the
4238 // beginning which would cause us to infinitely recurse on the
4239 // entire token, so we catch the right context in match[2].
4240 embeddedSourceEnd = token.length - match[2].length;
4241 embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
4242 }
4243 var lang = style.substring(5);
4244 // Decorate the left of the embedded source
4245 appendDecorations(
4246 basePos + tokenStart,
4247 token.substring(0, embeddedSourceStart),
4248 decorate, decorations);
4249 // Decorate the embedded source
4250 appendDecorations(
4251 basePos + tokenStart + embeddedSourceStart,
4252 embeddedSource,
4253 langHandlerForExtension(lang, embeddedSource),
4254 decorations);
4255 // Decorate the right of the embedded section
4256 appendDecorations(
4257 basePos + tokenStart + embeddedSourceEnd,
4258 token.substring(embeddedSourceEnd),
4259 decorate, decorations);
4260 }
4261 }
4262 job.decorations = decorations;
4263 };
4264 return decorate;
4265 }
4266
4267 /** returns a function that produces a list of decorations from source text.
4268 *
4269 * This code treats ", ', and ` as string delimiters, and \ as a string
4270 * escape. It does not recognize perl's qq() style strings.
4271 * It has no special handling for double delimiter escapes as in basic, or
4272 * the tripled delimiters used in python, but should work on those regardless
4273 * although in those cases a single string literal may be broken up into
4274 * multiple adjacent string literals.
4275 *
4276 * It recognizes C, C++, and shell style comments.
4277 *
4278 * @param {Object} options a set of optional parameters.
4279 * @return {function (Object)} a function that examines the source code
4280 * in the input job and builds the decoration list.
4281 */
4282 function sourceDecorator(options) {
4283 var shortcutStylePatterns = [], fallthroughStylePatterns = [];
4284 if (options['tripleQuotedStrings']) {
4285 // '''multi-line-string''', 'single-line-string', and double-quoted
4286 shortcutStylePatterns.push(
4287 [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\ '|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s \S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
4288 null, '\'"']);
4289 } else if (options['multiLineStrings']) {
4290 // 'multi-line-string', "multi-line-string"
4291 shortcutStylePatterns.push(
4292 [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S ])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
4293 null, '\'"`']);
4294 } else {
4295 // 'single-line-string', "single-line-string"
4296 shortcutStylePatterns.push(
4297 [PR_STRING,
4298 /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
4299 null, '"\'']);
4300 }
4301 if (options['verbatimStrings']) {
4302 // verbatim-string-literal production from the C# grammar. See issue 93.
4303 fallthroughStylePatterns.push(
4304 [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
4305 }
4306 var hc = options['hashComments'];
4307 if (hc) {
4308 if (options['cStyleComments']) {
4309 if (hc > 1) { // multiline hash comments
4310 shortcutStylePatterns.push(
4311 [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
4312 } else {
4313 // Stop C preprocessor declarations at an unclosed open comment
4314 shortcutStylePatterns.push(
4315 [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|includ e|line|pragma|undef|warning)\b|[^\r\n]*)/,
4316 null, '#']);
4317 }
4318 // #include <stdio.h>
4319 fallthroughStylePatterns.push(
4320 [PR_STRING,
4321 /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\ +\+)?|[a-z]\w*)>/,
4322 null]);
4323 } else {
4324 shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
4325 }
4326 }
4327 if (options['cStyleComments']) {
4328 fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
4329 fallthroughStylePatterns.push(
4330 [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
4331 }
4332 if (options['regexLiterals']) {
4333 /**
4334 * @const
4335 */
4336 var REGEX_LITERAL = (
4337 // A regular expression literal starts with a slash that is
4338 // not followed by * or / so that it is not confused with
4339 // comments.
4340 '/(?=[^/*])'
4341 // and then contains any number of raw characters,
4342 + '(?:[^/\\x5B\\x5C]'
4343 // escape sequences (\x5C),
4344 + '|\\x5C[\\s\\S]'
4345 // or non-nesting character sets (\x5B\x5D);
4346 + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
4347 // finally closed by a /.
4348 + '/');
4349 fallthroughStylePatterns.push(
4350 ['lang-regex',
4351 new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
4352 ]);
4353 }
4354
4355 var types = options['types'];
4356 if (types) {
4357 fallthroughStylePatterns.push([PR_TYPE, types]);
4358 }
4359
4360 var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
4361 if (keywords.length) {
4362 fallthroughStylePatterns.push(
4363 [PR_KEYWORD,
4364 new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
4365 null]);
4366 }
4367
4368 shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']);
4369
4370 var punctuation =
4371 // The Bash man page says
4372
4373 // A word is a sequence of characters considered as a single
4374 // unit by GRUB. Words are separated by metacharacters,
4375 // which are the following plus space, tab, and newline: { }
4376 // | & $ ; < >
4377 // ...
4378
4379 // A word beginning with # causes that word and all remaining
4380 // characters on that line to be ignored.
4381
4382 // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
4383 // comment but empirically
4384 // $ echo {#}
4385 // {#}
4386 // $ echo \$#
4387 // $#
4388 // $ echo }#
4389 // }#
4390
4391 // so /(?:^|[|&;<>\s])/ is more appropriate.
4392
4393 // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
4394 // suggests that this definition is compatible with a
4395 // default mode that tries to use a single token definition
4396 // to recognize both bash/python style comments and C
4397 // preprocessor directives.
4398
4399 // This definition of punctuation does not include # in the list of
4400 // follow-on exclusions, so # will not be broken before if preceeded
4401 // by a punctuation character. We could try to exclude # after
4402 // [|&;<>] but that doesn't seem to cause many major problems.
4403 // If that does turn out to be a problem, we should change the below
4404 // when hc is truthy to include # in the run of punctuation characters
4405 // only when not followint [|&;<>].
4406 /^.[^\s\w\.$@\'\"\`\/\\]*/;
4407
4408 fallthroughStylePatterns.push(
4409 // TODO(mikesamuel): recognize non-latin letters and numerals in idents
4410 [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
4411 [PR_TYPE, /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
4412 [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null],
4413 [PR_LITERAL,
4414 new RegExp(
4415 '^(?:'
4416 // A hex number
4417 + '0x[a-f0-9]+'
4418 // or an octal or decimal number,
4419 + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
4420 // possibly in scientific notation
4421 + '(?:e[+\\-]?\\d+)?'
4422 + ')'
4423 // with an optional modifier like UL for unsigned long
4424 + '[a-z]*', 'i'),
4425 null, '0123456789'],
4426 // Don't treat escaped quotes in bash as starting strings. See issue 14 4.
4427 [PR_PLAIN, /^\\[\s\S]?/, null],
4428 [PR_PUNCTUATION, punctuation, null]);
4429
4430 return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
4431 }
4432
4433 var decorateSource = sourceDecorator({
4434 'keywords': ALL_KEYWORDS,
4435 'hashComments': true,
4436 'cStyleComments': true,
4437 'multiLineStrings': true,
4438 'regexLiterals': true
4439 });
4440
4441 /**
4442 * Given a DOM subtree, wraps it in a list, and puts each line into its own
4443 * list item.
4444 *
4445 * @param {Node} node modified in place. Its content is pulled into an
4446 * HTMLOListElement, and each line is moved into a separate list item.
4447 * This requires cloning elements, so the input might not have unique
4448 * IDs after numbering.
4449 * @param {boolean} isPreformatted true iff white-space in text nodes should
4450 * be treated as significant.
4451 */
4452 function numberLines(node, opt_startLineNum, isPreformatted) {
4453 var nocode = /(?:^|\s)nocode(?:\s|$)/;
4454 var lineBreak = /\r\n?|\n/;
4455
4456 var document = node.ownerDocument;
4457
4458 var li = document.createElement('li');
4459 while (node.firstChild) {
4460 li.appendChild(node.firstChild);
4461 }
4462 // An array of lines. We split below, so this is initialized to one
4463 // un-split line.
4464 var listItems = [li];
4465
4466 function walk(node) {
4467 switch (node.nodeType) {
4468 case 1: // Element
4469 if (nocode.test(node.className)) { break; }
4470 if ('br' === node.nodeName) {
4471 breakAfter(node);
4472 // Discard the <BR> since it is now flush against a </LI>.
4473 if (node.parentNode) {
4474 node.parentNode.removeChild(node);
4475 }
4476 } else {
4477 for (var child = node.firstChild; child; child = child.nextSibling) {
4478 walk(child);
4479 }
4480 }
4481 break;
4482 case 3: case 4: // Text
4483 if (isPreformatted) {
4484 var text = node.nodeValue;
4485 var match = text.match(lineBreak);
4486 if (match) {
4487 var firstLine = text.substring(0, match.index);
4488 node.nodeValue = firstLine;
4489 var tail = text.substring(match.index + match[0].length);
4490 if (tail) {
4491 var parent = node.parentNode;
4492 parent.insertBefore(
4493 document.createTextNode(tail), node.nextSibling);
4494 }
4495 breakAfter(node);
4496 if (!firstLine) {
4497 // Don't leave blank text nodes in the DOM.
4498 node.parentNode.removeChild(node);
4499 }
4500 }
4501 }
4502 break;
4503 }
4504 }
4505
4506 // Split a line after the given node.
4507 function breakAfter(lineEndNode) {
4508 // If there's nothing to the right, then we can skip ending the line
4509 // here, and move root-wards since splitting just before an end-tag
4510 // would require us to create a bunch of empty copies.
4511 while (!lineEndNode.nextSibling) {
4512 lineEndNode = lineEndNode.parentNode;
4513 if (!lineEndNode) { return; }
4514 }
4515
4516 function breakLeftOf(limit, copy) {
4517 // Clone shallowly if this node needs to be on both sides of the break.
4518 var rightSide = copy ? limit.cloneNode(false) : limit;
4519 var parent = limit.parentNode;
4520 if (parent) {
4521 // We clone the parent chain.
4522 // This helps us resurrect important styling elements that cross lines .
4523 // E.g. in <i>Foo<br>Bar</i>
4524 // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
4525 var parentClone = breakLeftOf(parent, 1);
4526 // Move the clone and everything to the right of the original
4527 // onto the cloned parent.
4528 var next = limit.nextSibling;
4529 parentClone.appendChild(rightSide);
4530 for (var sibling = next; sibling; sibling = next) {
4531 next = sibling.nextSibling;
4532 parentClone.appendChild(sibling);
4533 }
4534 }
4535 return rightSide;
4536 }
4537
4538 var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
4539
4540 // Walk the parent chain until we reach an unattached LI.
4541 for (var parent;
4542 // Check nodeType since IE invents document fragments.
4543 (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
4544 copiedListItem = parent;
4545 }
4546 // Put it on the list of lines for later processing.
4547 listItems.push(copiedListItem);
4548 }
4549
4550 // Split lines while there are lines left to split.
4551 for (var i = 0; // Number of lines that have been split so far.
4552 i < listItems.length; // length updated by breakAfter calls.
4553 ++i) {
4554 walk(listItems[i]);
4555 }
4556
4557 // Make sure numeric indices show correctly.
4558 if (opt_startLineNum === (opt_startLineNum|0)) {
4559 listItems[0].setAttribute('value', opt_startLineNum);
4560 }
4561
4562 var ol = document.createElement('ol');
4563 ol.className = 'linenums';
4564 var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0 ;
4565 for (var i = 0, n = listItems.length; i < n; ++i) {
4566 li = listItems[i];
4567 // Stick a class on the LIs so that stylesheets can
4568 // color odd/even rows, or any other row pattern that
4569 // is co-prime with 10.
4570 li.className = 'L' + ((i + offset) % 10);
4571 if (!li.firstChild) {
4572 li.appendChild(document.createTextNode('\xA0'));
4573 }
4574 ol.appendChild(li);
4575 }
4576
4577 node.appendChild(ol);
4578 }
4579
4580 /**
4581 * Breaks {@code job.sourceCode} around style boundaries in
4582 * {@code job.decorations} and modifies {@code job.sourceNode} in place.
4583 * @param {Object} job like <pre>{
4584 * sourceCode: {string} source as plain text,
4585 * spans: {Array.<number|Node>} alternating span start indices into source
4586 * and the text node or element (e.g. {@code <BR>}) corresponding to tha t
4587 * span.
4588 * decorations: {Array.<number|string} an array of style classes preceded
4589 * by the position at which they start in job.sourceCode in order
4590 * }</pre>
4591 * @private
4592 */
4593 function recombineTagsAndDecorations(job) {
4594 var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
4595 isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
4596 var newlineRe = /\n/g;
4597
4598 var source = job.sourceCode;
4599 var sourceLength = source.length;
4600 // Index into source after the last code-unit recombined.
4601 var sourceIndex = 0;
4602
4603 var spans = job.spans;
4604 var nSpans = spans.length;
4605 // Index into spans after the last span which ends at or before sourceIndex.
4606 var spanIndex = 0;
4607
4608 var decorations = job.decorations;
4609 var nDecorations = decorations.length;
4610 // Index into decorations after the last decoration which ends at or before
4611 // sourceIndex.
4612 var decorationIndex = 0;
4613
4614 // Remove all zero-length decorations.
4615 decorations[nDecorations] = sourceLength;
4616 var decPos, i;
4617 for (i = decPos = 0; i < nDecorations;) {
4618 if (decorations[i] !== decorations[i + 2]) {
4619 decorations[decPos++] = decorations[i++];
4620 decorations[decPos++] = decorations[i++];
4621 } else {
4622 i += 2;
4623 }
4624 }
4625 nDecorations = decPos;
4626
4627 // Simplify decorations.
4628 for (i = decPos = 0; i < nDecorations;) {
4629 var startPos = decorations[i];
4630 // Conflate all adjacent decorations that use the same style.
4631 var startDec = decorations[i + 1];
4632 var end = i + 2;
4633 while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
4634 end += 2;
4635 }
4636 decorations[decPos++] = startPos;
4637 decorations[decPos++] = startDec;
4638 i = end;
4639 }
4640
4641 nDecorations = decorations.length = decPos;
4642
4643 var sourceNode = job.sourceNode;
4644 var oldDisplay;
4645 if (sourceNode) {
4646 oldDisplay = sourceNode.style.display;
4647 sourceNode.style.display = 'none';
4648 }
4649 try {
4650 var decoration = null;
4651 while (spanIndex < nSpans) {
4652 var spanStart = spans[spanIndex];
4653 var spanEnd = spans[spanIndex + 2] || sourceLength;
4654
4655 var decEnd = decorations[decorationIndex + 2] || sourceLength;
4656
4657 var end = Math.min(spanEnd, decEnd);
4658
4659 var textNode = spans[spanIndex + 1];
4660 var styledText;
4661 if (textNode.nodeType !== 1 // Don't muck with <BR>s or <LI>s
4662 // Don't introduce spans around empty text nodes.
4663 && (styledText = source.substring(sourceIndex, end))) {
4664 // This may seem bizarre, and it is. Emitting LF on IE causes the
4665 // code to display with spaces instead of line breaks.
4666 // Emitting Windows standard issue linebreaks (CRLF) causes a blank
4667 // space to appear at the beginning of every line but the first.
4668 // Emitting an old Mac OS 9 line separator makes everything spiffy.
4669 if (isIE8OrEarlier) {
4670 styledText = styledText.replace(newlineRe, '\r');
4671 }
4672 textNode.nodeValue = styledText;
4673 var document = textNode.ownerDocument;
4674 var span = document.createElement('span');
4675 span.className = decorations[decorationIndex + 1];
4676 var parentNode = textNode.parentNode;
4677 parentNode.replaceChild(span, textNode);
4678 span.appendChild(textNode);
4679 if (sourceIndex < spanEnd) { // Split off a text node.
4680 spans[spanIndex + 1] = textNode
4681 // TODO: Possibly optimize by using '' if there's no flicker.
4682 = document.createTextNode(source.substring(end, spanEnd));
4683 parentNode.insertBefore(textNode, span.nextSibling);
4684 }
4685 }
4686
4687 sourceIndex = end;
4688
4689 if (sourceIndex >= spanEnd) {
4690 spanIndex += 2;
4691 }
4692 if (sourceIndex >= decEnd) {
4693 decorationIndex += 2;
4694 }
4695 }
4696 } finally {
4697 if (sourceNode) {
4698 sourceNode.style.display = oldDisplay;
4699 }
4700 }
4701 }
4702
4703
4704 /** Maps language-specific file extensions to handlers. */
4705 var langHandlerRegistry = {};
4706 /** Register a language handler for the given file extensions.
4707 * @param {function (Object)} handler a function from source code to a list
4708 * of decorations. Takes a single argument job which describes the
4709 * state of the computation. The single parameter has the form
4710 * {@code {
4711 * sourceCode: {string} as plain text.
4712 * decorations: {Array.<number|string>} an array of style classes
4713 * preceded by the position at which they start in
4714 * job.sourceCode in order.
4715 * The language handler should assigned this field.
4716 * basePos: {int} the position of source in the larger source chunk.
4717 * All positions in the output decorations array are relative
4718 * to the larger source chunk.
4719 * } }
4720 * @param {Array.<string>} fileExtensions
4721 */
4722 function registerLangHandler(handler, fileExtensions) {
4723 for (var i = fileExtensions.length; --i >= 0;) {
4724 var ext = fileExtensions[i];
4725 if (!langHandlerRegistry.hasOwnProperty(ext)) {
4726 langHandlerRegistry[ext] = handler;
4727 } else if (win['console']) {
4728 console['warn']('cannot override language handler %s', ext);
4729 }
4730 }
4731 }
4732 function langHandlerForExtension(extension, source) {
4733 if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
4734 // Treat it as markup if the first non whitespace character is a < and
4735 // the last non-whitespace character is a >.
4736 extension = /^\s*</.test(source)
4737 ? 'default-markup'
4738 : 'default-code';
4739 }
4740 return langHandlerRegistry[extension];
4741 }
4742 registerLangHandler(decorateSource, ['default-code']);
4743 registerLangHandler(
4744 createSimpleLexer(
4745 [],
4746 [
4747 [PR_PLAIN, /^[^<?]+/],
4748 [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
4749 [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/],
4750 // Unescaped content in an unknown language
4751 ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/],
4752 ['lang-', /^<%([\s\S]+?)(?:%>|$)/],
4753 [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
4754 ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
4755 // Unescaped content in javascript. (Or possibly vbscript).
4756 ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
4757 // Contains unescaped stylesheet content
4758 ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
4759 ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]
4760 ]),
4761 ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
4762 registerLangHandler(
4763 createSimpleLexer(
4764 [
4765 [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'],
4766 [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
4767 ],
4768 [
4769 [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
4770 [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
4771 ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
4772 [PR_PUNCTUATION, /^[=<>\/]+/],
4773 ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i],
4774 ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i],
4775 ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i],
4776 ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i],
4777 ['lang-css', /^style\s*=\s*\'([^\']+)\'/i],
4778 ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i]
4779 ]),
4780 ['in.tag']);
4781 registerLangHandler(
4782 createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
4783 registerLangHandler(sourceDecorator({
4784 'keywords': CPP_KEYWORDS,
4785 'hashComments': true,
4786 'cStyleComments': true,
4787 'types': C_TYPES
4788 }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
4789 registerLangHandler(sourceDecorator({
4790 'keywords': 'null,true,false'
4791 }), ['json']);
4792 registerLangHandler(sourceDecorator({
4793 'keywords': CSHARP_KEYWORDS,
4794 'hashComments': true,
4795 'cStyleComments': true,
4796 'verbatimStrings': true,
4797 'types': C_TYPES
4798 }), ['cs']);
4799 registerLangHandler(sourceDecorator({
4800 'keywords': JAVA_KEYWORDS,
4801 'cStyleComments': true
4802 }), ['java']);
4803 registerLangHandler(sourceDecorator({
4804 'keywords': SH_KEYWORDS,
4805 'hashComments': true,
4806 'multiLineStrings': true
4807 }), ['bsh', 'csh', 'sh']);
4808 registerLangHandler(sourceDecorator({
4809 'keywords': PYTHON_KEYWORDS,
4810 'hashComments': true,
4811 'multiLineStrings': true,
4812 'tripleQuotedStrings': true
4813 }), ['cv', 'py']);
4814 registerLangHandler(sourceDecorator({
4815 'keywords': PERL_KEYWORDS,
4816 'hashComments': true,
4817 'multiLineStrings': true,
4818 'regexLiterals': true
4819 }), ['perl', 'pl', 'pm']);
4820 registerLangHandler(sourceDecorator({
4821 'keywords': RUBY_KEYWORDS,
4822 'hashComments': true,
4823 'multiLineStrings': true,
4824 'regexLiterals': true
4825 }), ['rb']);
4826 registerLangHandler(sourceDecorator({
4827 'keywords': JSCRIPT_KEYWORDS,
4828 'cStyleComments': true,
4829 'regexLiterals': true
4830 }), ['js']);
4831 registerLangHandler(sourceDecorator({
4832 'keywords': COFFEE_KEYWORDS,
4833 'hashComments': 3, // ### style block comments
4834 'cStyleComments': true,
4835 'multilineStrings': true,
4836 'tripleQuotedStrings': true,
4837 'regexLiterals': true
4838 }), ['coffee']);
4839 registerLangHandler(
4840 createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
4841
4842 function applyDecorator(job) {
4843 var opt_langExtension = job.langExtension;
4844
4845 try {
4846 // Extract tags, and convert the source code to plain text.
4847 var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
4848 /** Plain text. @type {string} */
4849 var source = sourceAndSpans.sourceCode;
4850 job.sourceCode = source;
4851 job.spans = sourceAndSpans.spans;
4852 job.basePos = 0;
4853
4854 // Apply the appropriate language handler
4855 langHandlerForExtension(opt_langExtension, source)(job);
4856
4857 // Integrate the decorations and tags back into the source code,
4858 // modifying the sourceNode in place.
4859 recombineTagsAndDecorations(job);
4860 } catch (e) {
4861 if (win['console']) {
4862 console['log'](e && e['stack'] ? e['stack'] : e);
4863 }
4864 }
4865 }
4866
4867 /**
4868 * @param sourceCodeHtml {string} The HTML to pretty print.
4869 * @param opt_langExtension {string} The language name to use.
4870 * Typically, a filename extension like 'cpp' or 'java'.
4871 * @param opt_numberLines {number|boolean} True to number lines,
4872 * or the 1-indexed number of the first line in sourceCodeHtml.
4873 */
4874 function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
4875 var container = document.createElement('pre');
4876 // This could cause images to load and onload listeners to fire.
4877 // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
4878 // We assume that the inner HTML is from a trusted source.
4879 container.innerHTML = sourceCodeHtml;
4880 if (opt_numberLines) {
4881 numberLines(container, opt_numberLines, true);
4882 }
4883
4884 var job = {
4885 langExtension: opt_langExtension,
4886 numberLines: opt_numberLines,
4887 sourceNode: container,
4888 pre: 1
4889 };
4890 applyDecorator(job);
4891 return container.innerHTML;
4892 }
4893
4894 function prettyPrint(opt_whenDone) {
4895 function byTagName(tn) { return document.getElementsByTagName(tn); }
4896 // fetch a list of nodes to rewrite
4897 var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
4898 var elements = [];
4899 for (var i = 0; i < codeSegments.length; ++i) {
4900 for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
4901 elements.push(codeSegments[i][j]);
4902 }
4903 }
4904 codeSegments = null;
4905
4906 var clock = Date;
4907 if (!clock['now']) {
4908 clock = { 'now': function () { return +(new Date); } };
4909 }
4910
4911 // The loop is broken into a series of continuations to make sure that we
4912 // don't make the browser unresponsive when rewriting a large page.
4913 var k = 0;
4914 var prettyPrintingJob;
4915
4916 var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
4917 var prettyPrintRe = /\bprettyprint\b/;
4918 var prettyPrintedRe = /\bprettyprinted\b/;
4919 var preformattedTagNameRe = /pre|xmp/i;
4920 var codeRe = /^code$/i;
4921 var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
4922
4923 function doWork() {
4924 var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
4925 clock['now']() + 250 /* ms */ :
4926 Infinity);
4927 for (; k < elements.length && clock['now']() < endTime; k++) {
4928 var cs = elements[k];
4929 var className = cs.className;
4930 if (prettyPrintRe.test(className)
4931 // Don't redo this if we've already done it.
4932 // This allows recalling pretty print to just prettyprint elements
4933 // that have been added to the page since last call.
4934 && !prettyPrintedRe.test(className)) {
4935
4936 // make sure this is not nested in an already prettified element
4937 var nested = false;
4938 for (var p = cs.parentNode; p; p = p.parentNode) {
4939 var tn = p.tagName;
4940 if (preCodeXmpRe.test(tn)
4941 && p.className && prettyPrintRe.test(p.className)) {
4942 nested = true;
4943 break;
4944 }
4945 }
4946 if (!nested) {
4947 // Mark done. If we fail to prettyprint for whatever reason,
4948 // we shouldn't try again.
4949 cs.className += ' prettyprinted';
4950
4951 // If the classes includes a language extensions, use it.
4952 // Language extensions can be specified like
4953 // <pre class="prettyprint lang-cpp">
4954 // the language extension "cpp" is used to find a language handler
4955 // as passed to PR.registerLangHandler.
4956 // HTML5 recommends that a language be specified using "language-"
4957 // as the prefix instead. Google Code Prettify supports both.
4958 // http://dev.w3.org/html5/spec-author-view/the-code-element.html
4959 var langExtension = className.match(langExtensionRe);
4960 // Support <pre class="prettyprint"><code class="language-c">
4961 var wrapper;
4962 if (!langExtension && (wrapper = childContentWrapper(cs))
4963 && codeRe.test(wrapper.tagName)) {
4964 langExtension = wrapper.className.match(langExtensionRe);
4965 }
4966
4967 if (langExtension) { langExtension = langExtension[1]; }
4968
4969 var preformatted;
4970 if (preformattedTagNameRe.test(cs.tagName)) {
4971 preformatted = 1;
4972 } else {
4973 var currentStyle = cs['currentStyle'];
4974 var whitespace = (
4975 currentStyle
4976 ? currentStyle['whiteSpace']
4977 : (document.defaultView
4978 && document.defaultView.getComputedStyle)
4979 ? document.defaultView.getComputedStyle(cs, null)
4980 .getPropertyValue('white-space')
4981 : 0);
4982 preformatted = whitespace
4983 && 'pre' === whitespace.substring(0, 3);
4984 }
4985
4986 // Look for a class like linenums or linenums:<n> where <n> is the
4987 // 1-indexed number of the first line.
4988 var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
4989 lineNums = lineNums
4990 ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
4991 : false;
4992 if (lineNums) { numberLines(cs, lineNums, preformatted); }
4993
4994 // do the pretty printing
4995 prettyPrintingJob = {
4996 langExtension: langExtension,
4997 sourceNode: cs,
4998 numberLines: lineNums,
4999 pre: preformatted
5000 };
5001 applyDecorator(prettyPrintingJob);
5002 }
5003 }
5004 }
5005 if (k < elements.length) {
5006 // finish up in a continuation
5007 setTimeout(doWork, 250);
5008 } else if (opt_whenDone) {
5009 opt_whenDone();
5010 }
5011 }
5012
5013 doWork();
5014 }
5015
5016 /**
5017 * Contains functions for creating and registering new language handlers.
5018 * @type {Object}
5019 */
5020 var PR = win['PR'] = {
5021 'createSimpleLexer': createSimpleLexer,
5022 'registerLangHandler': registerLangHandler,
5023 'sourceDecorator': sourceDecorator,
5024 'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
5025 'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
5026 'PR_COMMENT': PR_COMMENT,
5027 'PR_DECLARATION': PR_DECLARATION,
5028 'PR_KEYWORD': PR_KEYWORD,
5029 'PR_LITERAL': PR_LITERAL,
5030 'PR_NOCODE': PR_NOCODE,
5031 'PR_PLAIN': PR_PLAIN,
5032 'PR_PUNCTUATION': PR_PUNCTUATION,
5033 'PR_SOURCE': PR_SOURCE,
5034 'PR_STRING': PR_STRING,
5035 'PR_TAG': PR_TAG,
5036 'PR_TYPE': PR_TYPE,
5037 'prettyPrintOne': win['prettyPrintOne'] = prettyPrintOne,
5038 'prettyPrint': win['prettyPrint'] = prettyPrint
5039 };
5040
5041 // Make PR available via the Asynchronous Module Definition (AMD) API.
5042 // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
5043 // The Asynchronous Module Definition (AMD) API specifies a
5044 // mechanism for defining modules such that the module and its
5045 // dependencies can be asynchronously loaded.
5046 // ...
5047 // To allow a clear indicator that a global define function (as
5048 // needed for script src browser loading) conforms to the AMD API,
5049 // any global define function SHOULD have a property called "amd"
5050 // whose value is an object. This helps avoid conflict with any
5051 // other existing JavaScript code that could have defined a define()
5052 // function that does not conform to the AMD API.
5053 if (typeof define === "function" && define['amd']) {
5054 define(function () {
5055 return PR;
5056 });
5057 }
5058 })();
5059 </script>
5060
5061 <script>(function(scope) {
5062
5063 var ContextFreeParser = {
5064 parse: function(text) {
5065 var top = {};
5066 var entities = [];
5067 var current = top;
5068 var subCurrent = {};
5069
5070 var scriptDocCommentClause = '\\/\\*\\*([\\s\\S]*?)\\*\\/';
5071 var htmlDocCommentClause = '<!--([\\s\\S]*?)-->';
5072
5073 // matches text between /** and */ inclusive and <!-- and --> inclusive
5074 var docCommentRegex = new RegExp(scriptDocCommentClause + '|' + htmlDocCom mentClause, 'g');
5075
5076 // acquire all script doc comments
5077 var docComments = text.match(docCommentRegex) || [];
5078
5079 // each match represents a single block of doc comments
5080 docComments.forEach(function(m) {
5081 // unify line ends, remove all comment characters, split into individual lines
5082 var lines = m.replace(/\r\n/g, '\n').replace(/^\s*\/\*\*|^\s*\*\/|^\s*\* ?|^\s*\<\!-\-|^s*\-\-\>/gm, '').split('\n');
5083
5084 // pragmas (@-rules) must occur on a line by themselves
5085 var pragmas = [];
5086 // filter lines whose first non-whitespace character is @ into the pragm a list
5087 // (and out of the `lines` array)
5088 lines = lines.filter(function(l) {
5089 var m = l.match(/\s*@([\w-]*) (.*)/);
5090 if (!m) {
5091 return true;
5092 }
5093 pragmas.push(m);
5094 });
5095
5096 // collect all other text into a single block
5097 var code = lines.join('\n');
5098
5099 // process pragmas
5100 pragmas.forEach(function(m) {
5101 var pragma = m[1], content = m[2];
5102 switch (pragma) {
5103
5104 // currently all entities are either @class or @element
5105 case 'class':
5106 case 'element':
5107 current = {
5108 name: content,
5109 description: code
5110 };
5111 entities.push(current);
5112 break;
5113
5114 // an entity may have these describable sub-features
5115 case 'attribute':
5116 case 'property':
5117 case 'method':
5118 case 'event':
5119 subCurrent = {
5120 name: content,
5121 description: code
5122 };
5123 var label = pragma == 'property' ? 'properties' : pragma + 's';
5124 makePragma(current, label, subCurrent);
5125 break;
5126
5127 // sub-feature pragmas
5128 case 'default':
5129 case 'type':
5130 subCurrent[pragma] = content;
5131 break;
5132
5133 // everything else
5134 default:
5135 current[pragma] = content;
5136 break;
5137 }
5138 });
5139
5140 // utility function, yay hoisting
5141 function makePragma(object, pragma, content) {
5142 var p$ = object;
5143 var p = p$[pragma];
5144 if (!p) {
5145 p$[pragma] = p = [];
5146 }
5147 p.push(content);
5148 }
5149
5150 });
5151
5152 if (entities.length === 0) {
5153 entities.push({name: 'Entity', description: '**Undocumented**'});
5154 }
5155 return entities;
5156 }
5157 };
5158
5159 if (typeof module !== 'undefined' && module.exports) {
5160 module.exports = ContextFreeParser;
5161 } else {
5162 scope.ContextFreeParser = ContextFreeParser;
5163 }
5164
5165 })(this);</script>
5166 <!--
5167 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5168 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5169 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5170 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
5171 Code distributed by Google as part of the polymer project is also
5172 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
5173 -->
5174
5175 <!--
5176 @group Polymer Core Elements
5177
5178 The `core-ajax` element exposes `XMLHttpRequest` functionality.
5179
5180 <core-ajax
5181 auto
5182 url="http://gdata.youtube.com/feeds/api/videos/"
5183 params='{"alt":"json", "q":"chrome"}'
5184 handleAs="json"
5185 on-core-response="{{handleResponse}}"></core-ajax>
5186
5187 With `auto` set to `true`, the element performs a request whenever
5188 its `url` or `params` properties are changed.
5189
5190 Note: The `params` attribute must be double quoted JSON.
5191
5192 You can trigger a request explicitly by calling `go` on the
5193 element.
5194
5195 @element core-ajax
5196 @status beta
5197 @homepage github.io
5198 -->
5199 <!--
5200 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
5201 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5202 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5203 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
5204 Code distributed by Google as part of the polymer project is also
5205 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
5206 -->
5207 <!--
5208 /**
5209 * @group Polymer Core Elements
5210 *
5211 * core-xhr can be used to perform XMLHttpRequests.
5212 *
5213 * <core-xhr id="xhr"></core-xhr>
5214 * ...
5215 * this.$.xhr.request({url: url, params: params, callback: callback});
5216 *
5217 * @element core-xhr
5218 */
5219 -->
5220
5221
5222
5223 <polymer-element name="core-xhr" hidden assetpath="../core-ajax/">
5224
5225 <script>
5226
5227 Polymer('core-xhr', {
5228
5229 /**
5230 * Sends a HTTP request to the server and returns the XHR object.
5231 *
5232 * @method request
5233 * @param {Object} inOptions
5234 * @param {String} inOptions.url The url to which the request is sent.
5235 * @param {String} inOptions.method The HTTP method to use, default is GET.
5236 * @param {boolean} inOptions.sync By default, all requests are sent as ynchronously. To send synchronous requests, set to true.
5237 * @param {Object} inOptions.params Data to be sent to the server.
5238 * @param {Object} inOptions.body The content for the request body for POST method.
5239 * @param {Object} inOptions.headers HTTP request headers.
5240 * @param {String} inOptions.responseType The response type. Default is 'text'.
5241 * @param {boolean} inOptions.withCredentials Whether or not to send cr edentials on the request. Default is false.
5242 * @param {Object} inOptions.callback Called when request is completed.
5243 * @returns {Object} XHR object.
5244 */
5245 request: function(options) {
5246 var xhr = new XMLHttpRequest();
5247 var url = options.url;
5248 var method = options.method || 'GET';
5249 var async = !options.sync;
5250 //
5251 var params = this.toQueryString(options.params);
5252 if (params && method == 'GET') {
5253 url += (url.indexOf('?') > 0 ? '&' : '?') + params;
5254 }
5255 var xhrParams = this.isBodyMethod(method) ? (options.body || params) : n ull;
5256 //
5257 xhr.open(method, url, async);
5258 if (options.responseType) {
5259 xhr.responseType = options.responseType;
5260 }
5261 if (options.withCredentials) {
5262 xhr.withCredentials = true;
5263 }
5264 this.makeReadyStateHandler(xhr, options.callback);
5265 this.setRequestHeaders(xhr, options.headers);
5266 xhr.send(xhrParams);
5267 if (!async) {
5268 xhr.onreadystatechange(xhr);
5269 }
5270 return xhr;
5271 },
5272
5273 toQueryString: function(params) {
5274 var r = [];
5275 for (var n in params) {
5276 var v = params[n];
5277 n = encodeURIComponent(n);
5278 r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
5279 }
5280 return r.join('&');
5281 },
5282
5283 isBodyMethod: function(method) {
5284 return this.bodyMethods[(method || '').toUpperCase()];
5285 },
5286
5287 bodyMethods: {
5288 POST: 1,
5289 PUT: 1,
5290 DELETE: 1
5291 },
5292
5293 makeReadyStateHandler: function(xhr, callback) {
5294 xhr.onreadystatechange = function() {
5295 if (xhr.readyState == 4) {
5296 callback && callback.call(null, xhr.response, xhr);
5297 }
5298 };
5299 },
5300
5301 setRequestHeaders: function(xhr, headers) {
5302 if (headers) {
5303 for (var name in headers) {
5304 xhr.setRequestHeader(name, headers[name]);
5305 }
5306 }
5307 }
5308
5309 });
5310
5311 </script>
5312
5313 </polymer-element>
5314
5315 <polymer-element name="core-ajax" attributes="url handleAs auto params response method headers body contentType withCredentials" assetpath="../core-ajax/">
5316 <script>
5317
5318 Polymer('core-ajax', {
5319 /**
5320 * Fired when a response is received.
5321 *
5322 * @event core-response
5323 */
5324
5325 /**
5326 * Fired when an error is received.
5327 *
5328 * @event core-error
5329 */
5330
5331 /**
5332 * Fired whenever a response or an error is received.
5333 *
5334 * @event core-complete
5335 */
5336
5337 /**
5338 * The URL target of the request.
5339 *
5340 * @attribute url
5341 * @type string
5342 * @default ''
5343 */
5344 url: '',
5345
5346 /**
5347 * Specifies what data to store in the `response` property, and
5348 * to deliver as `event.response` in `response` events.
5349 *
5350 * One of:
5351 *
5352 * `text`: uses `XHR.responseText`.
5353 *
5354 * `xml`: uses `XHR.responseXML`.
5355 *
5356 * `json`: uses `XHR.responseText` parsed as JSON.
5357 *
5358 * `arraybuffer`: uses `XHR.response`.
5359 *
5360 * `blob`: uses `XHR.response`.
5361 *
5362 * `document`: uses `XHR.response`.
5363 *
5364 * @attribute handleAs
5365 * @type string
5366 * @default 'text'
5367 */
5368 handleAs: '',
5369
5370 /**
5371 * If true, automatically performs an Ajax request when either `url` or `par ams` changes.
5372 *
5373 * @attribute auto
5374 * @type boolean
5375 * @default false
5376 */
5377 auto: false,
5378
5379 /**
5380 * Parameters to send to the specified URL, as JSON.
5381 *
5382 * @attribute params
5383 * @type string (JSON)
5384 * @default ''
5385 */
5386 params: '',
5387
5388 /**
5389 * Returns the response object.
5390 *
5391 * @attribute response
5392 * @type Object
5393 * @default null
5394 */
5395 response: null,
5396
5397 /**
5398 * The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'.
5399 * Default is 'GET'.
5400 *
5401 * @attribute method
5402 * @type string
5403 * @default ''
5404 */
5405 method: '',
5406
5407 /**
5408 * HTTP request headers to send.
5409 *
5410 * Example:
5411 *
5412 * <core-ajax
5413 * auto
5414 * url="http://somesite.com"
5415 * headers='{"X-Requested-With": "XMLHttpRequest"}'
5416 * handleAs="json"
5417 * on-core-response="{{handleResponse}}"></core-ajax>
5418 *
5419 * @attribute headers
5420 * @type Object
5421 * @default null
5422 */
5423 headers: null,
5424
5425 /**
5426 * Optional raw body content to send when method === "POST".
5427 *
5428 * Example:
5429 *
5430 * <core-ajax method="POST" auto url="http://somesite.com"
5431 * body='{"foo":1, "bar":2}'>
5432 * </core-ajax>
5433 *
5434 * @attribute body
5435 * @type Object
5436 * @default null
5437 */
5438 body: null,
5439
5440 /**
5441 * Content type to use when sending data.
5442 *
5443 * @attribute contentType
5444 * @type string
5445 * @default 'application/x-www-form-urlencoded'
5446 */
5447 contentType: 'application/x-www-form-urlencoded',
5448
5449 /**
5450 * Set the withCredentials flag on the request.
5451 *
5452 * @attribute withCredentials
5453 * @type boolean
5454 * @default false
5455 */
5456 withCredentials: false,
5457
5458 /**
5459 * Additional properties to send to core-xhr.
5460 *
5461 * Can be set to an object containing default properties
5462 * to send as arguments to the `core-xhr.request()` method
5463 * which implements the low-level communication.
5464 *
5465 * @property xhrArgs
5466 * @type Object
5467 * @default null
5468 */
5469 xhrArgs: null,
5470
5471 ready: function() {
5472 this.xhr = document.createElement('core-xhr');
5473 },
5474
5475 receive: function(response, xhr) {
5476 if (this.isSuccess(xhr)) {
5477 this.processResponse(xhr);
5478 } else {
5479 this.error(xhr);
5480 }
5481 this.complete(xhr);
5482 },
5483
5484 isSuccess: function(xhr) {
5485 var status = xhr.status || 0;
5486 return !status || (status >= 200 && status < 300);
5487 },
5488
5489 processResponse: function(xhr) {
5490 var response = this.evalResponse(xhr);
5491 this.response = response;
5492 this.fire('core-response', {response: response, xhr: xhr});
5493 },
5494
5495 error: function(xhr) {
5496 var response = xhr.status + ': ' + xhr.responseText;
5497 this.fire('core-error', {response: response, xhr: xhr});
5498 },
5499
5500 complete: function(xhr) {
5501 this.fire('core-complete', {response: xhr.status, xhr: xhr});
5502 },
5503
5504 evalResponse: function(xhr) {
5505 return this[(this.handleAs || 'text') + 'Handler'](xhr);
5506 },
5507
5508 xmlHandler: function(xhr) {
5509 return xhr.responseXML;
5510 },
5511
5512 textHandler: function(xhr) {
5513 return xhr.responseText;
5514 },
5515
5516 jsonHandler: function(xhr) {
5517 var r = xhr.responseText;
5518 try {
5519 return JSON.parse(r);
5520 } catch (x) {
5521 return r;
5522 }
5523 },
5524
5525 documentHandler: function(xhr) {
5526 return xhr.response;
5527 },
5528
5529 blobHandler: function(xhr) {
5530 return xhr.response;
5531 },
5532
5533 arraybufferHandler: function(xhr) {
5534 return xhr.response;
5535 },
5536
5537 urlChanged: function() {
5538 if (!this.handleAs) {
5539 var ext = String(this.url).split('.').pop();
5540 switch (ext) {
5541 case 'json':
5542 this.handleAs = 'json';
5543 break;
5544 }
5545 }
5546 this.autoGo();
5547 },
5548
5549 paramsChanged: function() {
5550 this.autoGo();
5551 },
5552
5553 autoChanged: function() {
5554 this.autoGo();
5555 },
5556
5557 // TODO(sorvell): multiple side-effects could call autoGo
5558 // during one micro-task, use a job to have only one action
5559 // occur
5560 autoGo: function() {
5561 if (this.auto) {
5562 this.goJob = this.job(this.goJob, this.go, 0);
5563 }
5564 },
5565
5566 /**
5567 * Performs an Ajax request to the specified URL.
5568 *
5569 * @method go
5570 */
5571 go: function() {
5572 var args = this.xhrArgs || {};
5573 // TODO(sjmiles): we may want XHR to default to POST if body is set
5574 args.body = this.body || args.body;
5575 args.params = this.params || args.params;
5576 if (args.params && typeof(args.params) == 'string') {
5577 args.params = JSON.parse(args.params);
5578 }
5579 args.headers = this.headers || args.headers || {};
5580 if (args.headers && typeof(args.headers) == 'string') {
5581 args.headers = JSON.parse(args.headers);
5582 }
5583 if (this.contentType) {
5584 args.headers['content-type'] = this.contentType;
5585 }
5586 if (this.handleAs === 'arraybuffer' || this.handleAs === 'blob' ||
5587 this.handleAs === 'document') {
5588 args.responseType = this.handleAs;
5589 }
5590 args.withCredentials = this.withCredentials;
5591 args.callback = this.receive.bind(this);
5592 args.url = this.url;
5593 args.method = this.method;
5594 return args.url && this.xhr.request(args);
5595 }
5596
5597 });
5598
5599 </script>
5600 </polymer-element>
5601
5602
5603 <!--
5604 Scrapes source documentation data from input text or url.
5605
5606 @class context-free-parser
5607 -->
5608 <polymer-element name="context-free-parser" attributes="url text data" assetpath ="../context-free-parser/">
5609 <template>
5610
5611 <core-ajax url="{{url}}" response="{{text}}" auto=""></core-ajax>
5612
5613 </template>
5614 <script>
5615
5616 Polymer('context-free-parser', {
5617
5618 text: null,
5619
5620 textChanged: function() {
5621 if (this.text) {
5622 var entities = ContextFreeParser.parse(this.text);
5623 if (!entities || entities.length === 0) {
5624 entities = [
5625 {name: this.url.split('/').pop(), description: '**Undocumented**'}
5626 ];
5627 }
5628 this.data = { classes: entities };
5629 }
5630 },
5631
5632 dataChanged: function() {
5633 this.fire('data-ready');
5634 }
5635
5636 });
5637
5638 </script>
5639 </polymer-element>
5640
5641
5642 <!--
5643
5644 Displays formatted source documentation scraped from input urls.
5645
5646 @element core-doc-page
5647 -->
5648
5649 <polymer-element name="core-doc-page" attributes="data" assetpath="../core-doc-v iewer/elements/">
5650
5651 <!--
5652
5653 Set url to add documentation from that location to the view.
5654
5655 @attribute url
5656 @type String
5657 -->
5658
5659 <template>
5660
5661 <style>:host {
5662 display: block;
5663 position: relative;
5664 }
5665
5666 #panel {
5667 position: absolute;
5668 top: 0;
5669 left: 0;
5670 height: 100%;
5671 width: 100%;
5672 }
5673
5674 .main {
5675 padding: 0 72px;
5676 max-width: 832px;
5677 margin: 0 auto;
5678 }
5679
5680 markedjs-element {
5681 display: block;
5682 }
5683
5684 h1 {
5685 font-size: 52px;
5686 color: #E91E63
5687 }
5688
5689 .element {
5690 font-size: 21px;
5691 }
5692
5693 .name {
5694 /* typography */
5695 color: white;
5696 /* font-size: 14px; */
5697 font-size: 12px;
5698 font-weight: bold;
5699 text-decoration: none;
5700 /* colors / effects */
5701 background-color: #999;
5702 box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
5703 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
5704 border-radius: 2px;
5705 cursor: pointer;
5706 /* metrics */
5707 display: inline-block;
5708 padding: 4px 12px 5px 12px;
5709 margin: 4px 0;
5710 }
5711
5712 .ntitle {
5713 font-size: 26px;
5714 padding-bottom: 4px;
5715 border-bottom: 1px solid whitesmoke;
5716 }
5717
5718 .box {
5719 margin-bottom: 40px;
5720 }
5721
5722 .top pre {
5723 padding: 12px 13px;
5724 background-color: #f8f8f8;
5725 }
5726
5727 code {
5728 font-family: Consolas, monospace;
5729 border: 1px solid #ddd;
5730 background-color: #f8f8f8;
5731 border-radius: 3px;
5732 padding: 0 3px;
5733 }
5734
5735 pre code {
5736 max-width: 832px;
5737 white-space: pre-wrap;
5738 overflow: hidden;
5739 border: none;
5740 }
5741
5742 /**/
5743
5744 .details {
5745 display: flex;
5746 }
5747
5748 .details-name {
5749 flex: 1;
5750 }
5751
5752 .details-info {
5753 flex: 2;
5754 }
5755
5756 .attribute-box {
5757 }
5758
5759 .attribute-box .details {
5760 background-color: #FFF9C4;
5761 padding: 8px 16px;
5762 border-bottom: 1px solid #D1CCA1;
5763 }
5764
5765 .attribute-box .ntitle {
5766 padding: 24px 16px;
5767 }
5768
5769 .attribute-box code {
5770 color: #FFAB40;
5771 border: none;
5772 background-color: transparent;
5773 border-radius: none;
5774 padding: 0;
5775 font-size: 1.2em;
5776 }
5777
5778 .property-box .ntitle {
5779 padding: 24px 16px;
5780 }
5781
5782 .property-box code {
5783 color: #4285F4;
5784 border: none;
5785 background-color: transparent;
5786 border-radius: none;
5787 padding: 0;
5788 font-size: 1.2em;
5789 }
5790
5791 .property-box .details {
5792 background-color: lightblue;
5793 padding: 8px 16px;
5794 border-bottom: 1px solid #D1CCA1;
5795 }
5796
5797 .method-box {
5798 }
5799
5800 .method-box .details {
5801 background-color: #F0F4C3;
5802 padding: 8px 16px;
5803 border-bottom: 1px solid #D1CCA1;
5804 }
5805
5806 .method-box .ntitle {
5807 background-color: #9E9D24;
5808 padding: 24px 16px;
5809 }
5810
5811 .method-box code {
5812 color: #9E9D24;
5813 border: none;
5814 background-color: transparent;
5815 border-radius: none;
5816 padding: 0;
5817 font-size: 1.2em;
5818 }
5819
5820 .event-box {
5821 }
5822
5823 .event-box .details {
5824 background-color: #B2DFDB;
5825 padding: 8px 16px;
5826 border-bottom: 1px solid #92B7B3;
5827 }
5828
5829 .event-box .ntitle {
5830 background-color: #009688;
5831 padding: 24px 16px;
5832 }
5833
5834 .event-box code {
5835 color: #009688;
5836 border: none;
5837 background-color: transparent;
5838 border-radius: none;
5839 padding: 0;
5840 font-size: 1.2em;
5841 }
5842
5843 code, pre {
5844 color: #9f499b;
5845 font-family: "Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace;
5846 }
5847
5848 pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline {
5849 color: #6b499f
5850 }
5851 pre .pun,.prettyprint .pun {
5852 color: #5c6bc0
5853 }
5854 pre .str,pre .string,.prettyprint .str,.prettyprint .string {
5855 color: #ff4081
5856 }
5857 pre .pln,.prettyprint .pln {
5858 color: #7986cb
5859 }
5860 pre .kwd,.prettyprint .kwd {
5861 color: #d61a7f
5862 }
5863 pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name {
5864 color: #6b499f
5865 }
5866 pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value {
5867 color: #7986cb
5868 }
5869 pre .com,pre .comment,.prettyprint .com,.prettyprint .comment {
5870 color: #8a8a8a
5871 }</style>
5872
5873 <core-header-panel id="panel" mode="waterfall">
5874
5875 <!--<core-toolbar>
5876 <span style="margin: 0 72px;">{{data.name}}</span>
5877 </core-toolbar>-->
5878
5879 <div class="main" on-marked-js-highlight="{{hilight}}">
5880
5881 <h1 style="font-size: 52px; color: #E91E63;">
5882 {{data.name}}
5883 </h1>
5884
5885 <p>
5886 <core-icon icon="home"></core-icon>&nbsp;<a href="{{data | homepageFil ter}}">Home Page</a>
5887 </p>
5888
5889 <template if="{{data.extends}}">
5890 <section class="box">
5891 <div class="ntitle">Extends</div>
5892 <p><a href="#{{data.extends}}">{{data.extends}}</a></p>
5893 </section>
5894 </template>
5895
5896 <template if="{{data.description}}">
5897 <section class="box top">
5898 <div class="ntitle">Summary</div>
5899 <marked-element text="{{data.description}}"></marked-element>
5900 </section>
5901 </template>
5902
5903 <template if="{{data.attributes.length}}">
5904 <section class="box attribute-box">
5905 <div class="ntitle" style="background-color: #FFAB40; color: white;" >Attributes</div>
5906 <template repeat="{{data.attributes}}">
5907 <div class="details">
5908 <div class="details-name">
5909 <p><code>{{name}}</code></p>
5910 </div>
5911 <div class="details-info">
5912 <p><code>{{type}}</code></p>
5913 <marked-element text="{{description}}"></marked-element>
5914 </div>
5915 </div>
5916 </template>
5917 </section>
5918 </template>
5919
5920 <template if="{{data.properties.length}}">
5921 <section class="box property-box">
5922 <div class="ntitle" style="background-color: #4285F4; color: white;" >Properties</div>
5923 <template repeat="{{data.properties}}">
5924 <div class="details">
5925 <div class="details-name">
5926 <p><code>{{name}}</code></p>
5927 </div>
5928 <div class="details-info">
5929 <p><code>{{type}}</code></p>
5930 <marked-element text="{{description}}"></marked-element>
5931 </div>
5932 </div>
5933 </template>
5934 </section>
5935 </template>
5936
5937 <template if="{{data.events.length}}">
5938 <section class="box event-box">
5939 <div class="ntitle" style="color: white;">Events</div>
5940 <template repeat="{{data.events}}">
5941 <div class="details">
5942 <div class="details-name">
5943 <p><code>{{name}}</code></p>
5944 </div>
5945 <div class="details-info">
5946 <marked-element text="{{description}}"></marked-element>
5947 </div>
5948 </div>
5949 </template>
5950 </section>
5951 </template>
5952
5953 <template if="{{data.methods.length}}">
5954 <section class="box method-box">
5955 <div class="ntitle" style="color: white;">Methods</div>
5956 <template repeat="{{data.methods}}">
5957 <div class="details">
5958 <div class="details-name">
5959 <p><code>{{name}}</code></p>
5960 </div>
5961 <div class="details-info">
5962 <marked-element text="{{description}}"></marked-element>
5963 </div>
5964 </div>
5965 </template>
5966 </section>
5967 </template>
5968
5969 </div>
5970
5971 </core-header-panel>
5972
5973 </template>
5974
5975 <script>
5976
5977 Polymer('core-doc-page', {
5978
5979 hilight: function(event, detail, sender) {
5980 detail.code = prettyPrintOne((detail.code || '').replace(/</g,'&lt;').re place(/>/g,'&gt;'));
5981 },
5982
5983 homepageFilter: function(data) {
5984 if (!data) {
5985 return '';
5986 }
5987 if (!data.homepage || data.homepage === 'github.io') {
5988 return '//polymer.github.io/' + data.name;
5989 } else {
5990 return data.homepage;
5991 }
5992 }
5993
5994 });
5995
5996 </script>
5997
5998 </polymer-element>
5999
6000
6001
6002
6003 <!--
6004 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
6005 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6006 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6007 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6008 Code distributed by Google as part of the polymer project is also
6009 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
6010 -->
6011
6012 <!--
6013 `core-menu` is a selector which styles to looks like a menu.
6014
6015 <core-menu selected="0">
6016 <core-item icon="settings" label="Settings"></core-item>
6017 <core-item icon="dialog" label="Dialog"></core-item>
6018 <core-item icon="search" label="Search"></core-item>
6019 </core-menu>
6020
6021 When an item is selected the `core-selected` class is added to it. The user can
6022 use the class to add more stylings to the selected item.
6023
6024 core-item.core-selected {
6025 color: red;
6026 }
6027
6028 The `selectedItem` property references the selected item.
6029
6030 <core-menu selected="0" selectedItem="{{item}}">
6031 <core-item icon="settings" label="Settings"></core-item>
6032 <core-item icon="dialog" label="Dialog"></core-item>
6033 <core-item icon="search" label="Search"></core-item>
6034 </core-menu>
6035
6036 <div>selected label: {{item.label}}</div>
6037
6038 The `core-select` event signals selection change.
6039
6040 <core-menu selected="0" on-core-select="{{selectAction}}">
6041 <core-item icon="settings" label="Settings"></core-item>
6042 <core-item icon="dialog" label="Dialog"></core-item>
6043 <core-item icon="search" label="Search"></core-item>
6044 </core-menu>
6045
6046 ...
6047
6048 selectAction: function(e, detail) {
6049 if (detail.isSelected) {
6050 var selectedItem = detail.item;
6051 ...
6052 }
6053 }
6054
6055 @group Polymer Core Elements
6056 @element core-menu
6057 @extends core-selector
6058 -->
6059
6060 <!--
6061 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
6062 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6063 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6064 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6065 Code distributed by Google as part of the polymer project is also
6066 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
6067 -->
6068
6069 <!--
6070 @group Polymer Core Elements
6071
6072 `<core-selector>` is used to manage a list of elements that can be selected.
6073
6074 The attribute `selected` indicates which item element is being selected.
6075 The attribute `multi` indicates if multiple items can be selected at once.
6076 Tapping on the item element would fire `core-activate` event. Use
6077 `core-select` event to listen for selection changes.
6078
6079 Example:
6080
6081 <core-selector selected="0">
6082 <div>Item 1</div>
6083 <div>Item 2</div>
6084 <div>Item 3</div>
6085 </core-selector>
6086
6087 `<core-selector>` is not styled. Use the `core-selected` CSS class to style the selected element.
6088
6089 <style>
6090 .item.core-selected {
6091 background: #eee;
6092 }
6093 </style>
6094 ...
6095 <core-selector>
6096 <div class="item">Item 1</div>
6097 <div class="item">Item 2</div>
6098 <div class="item">Item 3</div>
6099 </core-selector>
6100
6101 @element core-selector
6102 @status stable
6103 @homepage github.io
6104 -->
6105
6106 <!--
6107 Fired when an item's selection state is changed. This event is fired both
6108 when an item is selected or deselected. The `isSelected` detail property
6109 contains the selection state.
6110
6111 @event core-select
6112 @param {Object} detail
6113 @param {boolean} detail.isSelected true for selection and false for deselectio n
6114 @param {Object} detail.item the item element
6115 -->
6116 <!--
6117 Fired when an item element is tapped.
6118
6119 @event core-activate
6120 @param {Object} detail
6121 @param {Object} detail.item the item element
6122 -->
6123
6124
6125 <!--
6126 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
6127 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6128 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6129 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6130 Code distributed by Google as part of the polymer project is also
6131 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
6132 -->
6133 <!--
6134 @group Polymer Core Elements
6135
6136 The `<core-selection>` element is used to manage selection state. It has no
6137 visual appearance and is typically used in conjunction with another element.
6138 For example, [core-selector](#core-selector)
6139 use a `<core-selection>` to manage selection.
6140
6141 To mark an item as selected, call the `select(item)` method on
6142 `<core-selection>`. The item itself is an argument to this method.
6143
6144 The `<core-selection>`element manages selection state for any given set of
6145 items. When an item is selected, the `core-select` event is fired.
6146
6147 The attribute `multi` indicates if multiple items can be selected at once.
6148
6149 Example:
6150
6151 <polymer-element name="selection-example">
6152 <template>
6153 <style>
6154 polyfill-next-selector { content: ':host > .selected'; }
6155 ::content > .selected {
6156 font-weight: bold;
6157 font-style: italic;
6158 }
6159 </style>
6160 <ul on-tap="{{itemTapAction}}">
6161 <content></content>
6162 </ul>
6163 <core-selection id="selection" multi
6164 on-core-select="{{selectAction}}"></core-selection>
6165 </template>
6166 <script>
6167 Polymer('selection-example', {
6168 itemTapAction: function(e, detail, sender) {
6169 this.$.selection.select(e.target);
6170 },
6171 selectAction: function(e, detail, sender) {
6172 detail.item.classList.toggle('selected', detail.isSelected);
6173 }
6174 });
6175 </script>
6176 </polymer-element>
6177
6178 <selection-example>
6179 <li>Red</li>
6180 <li>Green</li>
6181 <li>Blue</li>
6182 </selection-example>
6183
6184 @element core-selection
6185 -->
6186
6187 <!--
6188 Fired when an item's selection state is changed. This event is fired both
6189 when an item is selected or deselected. The `isSelected` detail property
6190 contains the selection state.
6191
6192 @event core-select
6193 @param {Object} detail
6194 @param {boolean} detail.isSelected true for selection and false for de-selecti on
6195 @param {Object} detail.item the item element
6196 -->
6197
6198
6199 <polymer-element name="core-selection" attributes="multi" hidden assetpath="../c ore-selection/">
6200 <script>
6201 Polymer('core-selection', {
6202 /**
6203 * If true, multiple selections are allowed.
6204 *
6205 * @attribute multi
6206 * @type boolean
6207 * @default false
6208 */
6209 multi: false,
6210 ready: function() {
6211 this.clear();
6212 },
6213 clear: function() {
6214 this.selection = [];
6215 },
6216 /**
6217 * Retrieves the selected item(s).
6218 * @method getSelection
6219 * @returns Returns the selected item(s). If the multi property is true,
6220 * getSelection will return an array, otherwise it will return
6221 * the selected item or undefined if there is no selection.
6222 */
6223 getSelection: function() {
6224 return this.multi ? this.selection : this.selection[0];
6225 },
6226 /**
6227 * Indicates if a given item is selected.
6228 * @method isSelected
6229 * @param {any} item The item whose selection state should be checked.
6230 * @returns Returns true if `item` is selected.
6231 */
6232 isSelected: function(item) {
6233 return this.selection.indexOf(item) >= 0;
6234 },
6235 setItemSelected: function(item, isSelected) {
6236 if (item !== undefined && item !== null) {
6237 if (isSelected) {
6238 this.selection.push(item);
6239 } else {
6240 var i = this.selection.indexOf(item);
6241 if (i >= 0) {
6242 this.selection.splice(i, 1);
6243 }
6244 }
6245 this.fire("core-select", {isSelected: isSelected, item: item});
6246 }
6247 },
6248 /**
6249 * Set the selection state for a given `item`. If the multi property
6250 * is true, then the selected state of `item` will be toggled; otherwise
6251 * the `item` will be selected.
6252 * @method select
6253 * @param {any} item: The item to select.
6254 */
6255 select: function(item) {
6256 if (this.multi) {
6257 this.toggle(item);
6258 } else if (this.getSelection() !== item) {
6259 this.setItemSelected(this.getSelection(), false);
6260 this.setItemSelected(item, true);
6261 }
6262 },
6263 /**
6264 * Toggles the selection state for `item`.
6265 * @method toggle
6266 * @param {any} item: The item to toggle.
6267 */
6268 toggle: function(item) {
6269 this.setItemSelected(item, !this.isSelected(item));
6270 }
6271 });
6272 </script>
6273 </polymer-element>
6274
6275
6276 <polymer-element name="core-selector" attributes="selected multi valueattr selec tedClass selectedProperty selectedAttribute selectedItem selectedModel selectedI ndex notap target itemsSelector activateEvent" assetpath="../core-selector/">
6277
6278 <template>
6279 <core-selection id="selection" multi="{{multi}}" on-core-select="{{selection Select}}"></core-selection>
6280 <content id="items" select="*"></content>
6281 </template>
6282
6283 <script>
6284
6285 Polymer('core-selector', {
6286
6287 /**
6288 * Gets or sets the selected element. Default to use the index
6289 * of the item element.
6290 *
6291 * If you want a specific attribute value of the element to be
6292 * used instead of index, set "valueattr" to that attribute name.
6293 *
6294 * Example:
6295 *
6296 * <core-selector valueattr="label" selected="foo">
6297 * <div label="foo"></div>
6298 * <div label="bar"></div>
6299 * <div label="zot"></div>
6300 * </core-selector>
6301 *
6302 * In multi-selection this should be an array of values.
6303 *
6304 * Example:
6305 *
6306 * <core-selector id="selector" valueattr="label" multi>
6307 * <div label="foo"></div>
6308 * <div label="bar"></div>
6309 * <div label="zot"></div>
6310 * </core-selector>
6311 *
6312 * this.$.selector.selected = ['foo', 'zot'];
6313 *
6314 * @attribute selected
6315 * @type Object
6316 * @default null
6317 */
6318 selected: null,
6319
6320 /**
6321 * If true, multiple selections are allowed.
6322 *
6323 * @attribute multi
6324 * @type boolean
6325 * @default false
6326 */
6327 multi: false,
6328
6329 /**
6330 * Specifies the attribute to be used for "selected" attribute.
6331 *
6332 * @attribute valueattr
6333 * @type string
6334 * @default 'name'
6335 */
6336 valueattr: 'name',
6337
6338 /**
6339 * Specifies the CSS class to be used to add to the selected element.
6340 *
6341 * @attribute selectedClass
6342 * @type string
6343 * @default 'core-selected'
6344 */
6345 selectedClass: 'core-selected',
6346
6347 /**
6348 * Specifies the property to be used to set on the selected element
6349 * to indicate its active state.
6350 *
6351 * @attribute selectedProperty
6352 * @type string
6353 * @default ''
6354 */
6355 selectedProperty: '',
6356
6357 /**
6358 * Specifies the attribute to set on the selected element to indicate
6359 * its active state.
6360 *
6361 * @attribute selectedAttribute
6362 * @type string
6363 * @default 'active'
6364 */
6365 selectedAttribute: 'active',
6366
6367 /**
6368 * Returns the currently selected element. In multi-selection this returns
6369 * an array of selected elements.
6370 *
6371 * @attribute selectedItem
6372 * @type Object
6373 * @default null
6374 */
6375 selectedItem: null,
6376
6377 /**
6378 * In single selection, this returns the model associated with the
6379 * selected element.
6380 *
6381 * @attribute selectedModel
6382 * @type Object
6383 * @default null
6384 */
6385 selectedModel: null,
6386
6387 /**
6388 * In single selection, this returns the selected index.
6389 *
6390 * @attribute selectedIndex
6391 * @type number
6392 * @default -1
6393 */
6394 selectedIndex: -1,
6395
6396 /**
6397 * The target element that contains items. If this is not set
6398 * core-selector is the container.
6399 *
6400 * @attribute target
6401 * @type Object
6402 * @default null
6403 */
6404 target: null,
6405
6406 /**
6407 * This can be used to query nodes from the target node to be used for
6408 * selection items. Note this only works if the 'target' property is set.
6409 *
6410 * Example:
6411 *
6412 * <core-selector target="{{$.myForm}}" itemsSelector="input[type=radi o]"></core-selector>
6413 * <form id="myForm">
6414 * <label><input type="radio" name="color" value="red"> Red</label> <br>
6415 * <label><input type="radio" name="color" value="green"> Green</lab el> <br>
6416 * <label><input type="radio" name="color" value="blue"> Blue</label > <br>
6417 * <p>color = {{color}}</p>
6418 * </form>
6419 *
6420 * @attribute itemSelector
6421 * @type string
6422 * @default ''
6423 */
6424 itemsSelector: '',
6425
6426 /**
6427 * The event that would be fired from the item element to indicate
6428 * it is being selected.
6429 *
6430 * @attribute activateEvent
6431 * @type string
6432 * @default 'tap'
6433 */
6434 activateEvent: 'tap',
6435
6436 /**
6437 * Set this to true to disallow changing the selection via the
6438 * `activateEvent`.
6439 *
6440 * @attribute notap
6441 * @type boolean
6442 * @default false
6443 */
6444 notap: false,
6445
6446 ready: function() {
6447 this.activateListener = this.activateHandler.bind(this);
6448 this.observer = new MutationObserver(this.updateSelected.bind(this));
6449 if (!this.target) {
6450 this.target = this;
6451 }
6452 },
6453
6454 get items() {
6455 if (!this.target) {
6456 return [];
6457 }
6458 var nodes = this.target !== this ? (this.itemsSelector ?
6459 this.target.querySelectorAll(this.itemsSelector) :
6460 this.target.children) : this.$.items.getDistributedNodes();
6461 return Array.prototype.filter.call(nodes || [], function(n) {
6462 return n && n.localName !== 'template';
6463 });
6464 },
6465
6466 targetChanged: function(old) {
6467 if (old) {
6468 this.removeListener(old);
6469 this.observer.disconnect();
6470 this.clearSelection();
6471 }
6472 if (this.target) {
6473 this.addListener(this.target);
6474 this.observer.observe(this.target, {childList: true});
6475 this.updateSelected();
6476 }
6477 },
6478
6479 addListener: function(node) {
6480 node.addEventListener(this.activateEvent, this.activateListener);
6481 },
6482
6483 removeListener: function(node) {
6484 node.removeEventListener(this.activateEvent, this.activateListener);
6485 },
6486
6487 get selection() {
6488 return this.$.selection.getSelection();
6489 },
6490
6491 selectedChanged: function() {
6492 this.updateSelected();
6493 },
6494
6495 updateSelected: function() {
6496 this.validateSelected();
6497 if (this.multi) {
6498 this.clearSelection();
6499 this.selected && this.selected.forEach(function(s) {
6500 this.valueToSelection(s);
6501 }, this);
6502 } else {
6503 this.valueToSelection(this.selected);
6504 }
6505 },
6506
6507 validateSelected: function() {
6508 // convert to an array for multi-selection
6509 if (this.multi && !Array.isArray(this.selected) &&
6510 this.selected !== null && this.selected !== undefined) {
6511 this.selected = [this.selected];
6512 }
6513 },
6514
6515 clearSelection: function() {
6516 if (this.multi) {
6517 this.selection.slice().forEach(function(s) {
6518 this.$.selection.setItemSelected(s, false);
6519 }, this);
6520 } else {
6521 this.$.selection.setItemSelected(this.selection, false);
6522 }
6523 this.selectedItem = null;
6524 this.$.selection.clear();
6525 },
6526
6527 valueToSelection: function(value) {
6528 var item = (value === null || value === undefined) ?
6529 null : this.items[this.valueToIndex(value)];
6530 this.$.selection.select(item);
6531 },
6532
6533 updateSelectedItem: function() {
6534 this.selectedItem = this.selection;
6535 },
6536
6537 selectedItemChanged: function() {
6538 if (this.selectedItem) {
6539 var t = this.selectedItem.templateInstance;
6540 this.selectedModel = t ? t.model : undefined;
6541 } else {
6542 this.selectedModel = null;
6543 }
6544 this.selectedIndex = this.selectedItem ?
6545 parseInt(this.valueToIndex(this.selected)) : -1;
6546 },
6547
6548 valueToIndex: function(value) {
6549 // find an item with value == value and return it's index
6550 for (var i=0, items=this.items, c; (c=items[i]); i++) {
6551 if (this.valueForNode(c) == value) {
6552 return i;
6553 }
6554 }
6555 // if no item found, the value itself is probably the index
6556 return value;
6557 },
6558
6559 valueForNode: function(node) {
6560 return node[this.valueattr] || node.getAttribute(this.valueattr);
6561 },
6562
6563 // events fired from <core-selection> object
6564 selectionSelect: function(e, detail) {
6565 this.updateSelectedItem();
6566 if (detail.item) {
6567 this.applySelection(detail.item, detail.isSelected);
6568 }
6569 },
6570
6571 applySelection: function(item, isSelected) {
6572 if (this.selectedClass) {
6573 item.classList.toggle(this.selectedClass, isSelected);
6574 }
6575 if (this.selectedProperty) {
6576 item[this.selectedProperty] = isSelected;
6577 }
6578 if (this.selectedAttribute && item.setAttribute) {
6579 if (isSelected) {
6580 item.setAttribute(this.selectedAttribute, '');
6581 } else {
6582 item.removeAttribute(this.selectedAttribute);
6583 }
6584 }
6585 },
6586
6587 // event fired from host
6588 activateHandler: function(e) {
6589 if (!this.notap) {
6590 var i = this.findDistributedTarget(e.target, this.items);
6591 if (i >= 0) {
6592 var item = this.items[i];
6593 var s = this.valueForNode(item) || i;
6594 if (this.multi) {
6595 if (this.selected) {
6596 this.addRemoveSelected(s);
6597 } else {
6598 this.selected = [s];
6599 }
6600 } else {
6601 this.selected = s;
6602 }
6603 this.asyncFire('core-activate', {item: item});
6604 }
6605 }
6606 },
6607
6608 addRemoveSelected: function(value) {
6609 var i = this.selected.indexOf(value);
6610 if (i >= 0) {
6611 this.selected.splice(i, 1);
6612 } else {
6613 this.selected.push(value);
6614 }
6615 this.valueToSelection(value);
6616 },
6617
6618 findDistributedTarget: function(target, nodes) {
6619 // find first ancestor of target (including itself) that
6620 // is in nodes, if any
6621 while (target && target != this) {
6622 var i = Array.prototype.indexOf.call(nodes, target);
6623 if (i >= 0) {
6624 return i;
6625 }
6626 target = target.parentNode;
6627 }
6628 }
6629 });
6630 </script>
6631 </polymer-element>
6632
6633
6634 <style shim-shadowdom="">/*
6635 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
6636 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6637 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6638 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6639 Code distributed by Google as part of the polymer project is also
6640 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
6641 */
6642
6643 html /deep/ core-menu {
6644 display: block;
6645 margin: 12px;
6646 }
6647
6648 polyfill-next-selector { content: 'core-menu > core-item'; }
6649 html /deep/ core-menu::shadow ::content > core-item {
6650 cursor: default;
6651 }
6652 </style>
6653
6654 <polymer-element name="core-menu" extends="core-selector" assetpath="../core-men u/">
6655 <script>
6656 Polymer('core-menu',{});
6657 </script>
6658 </polymer-element>
6659
6660 <!--
6661 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
6662 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6663 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6664 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6665 Code distributed by Google as part of the polymer project is also
6666 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
6667 -->
6668
6669 <!--
6670 `core-item` is a simple line-item object: a label and/or an icon that can also
6671 act as a link.
6672
6673 Example:
6674
6675 <core-item icon="settings" label="Settings"></core-item>
6676
6677 To use as a link, put &lt;a&gt; element in the item.
6678
6679 Example:
6680
6681 <core-item icon="settings" label="Settings">
6682 <a href="#settings" target="_self"></a>
6683 </core-item>
6684
6685 @group Polymer Core Elements
6686 @element core-item
6687 @homepage github.io
6688 -->
6689
6690
6691
6692 <style shim-shadowdom="">/*
6693 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
6694 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6695 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6696 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6697 Code distributed by Google as part of the polymer project is also
6698 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
6699 */
6700
6701 html /deep/ core-item {
6702 display: block;
6703 position: relative;
6704 min-height: 40px;
6705 white-space: nowrap;
6706 }
6707
6708 html /deep/ core-item.core-selected {
6709 font-weight: bold;
6710 }
6711
6712 html /deep/ core-item::shadow core-icon {
6713 margin: 0 16px 0 4px;
6714 }
6715
6716 html /deep/ core-item::shadow ::content > a {
6717 position: absolute;
6718 top: 0;
6719 right: 0;
6720 bottom: 0;
6721 left: 0;
6722 }
6723 </style>
6724
6725 <polymer-element name="core-item" attributes="label icon src" horizontal="" cent er="" layout="" assetpath="../core-item/">
6726 <template>
6727
6728 <core-icon src="{{src}}" icon="{{icon}}" hidden?="{{!src &amp;&amp; !icon}}">< /core-icon>{{label}}<content></content>
6729
6730 </template>
6731 <script>
6732
6733 Polymer('core-item', {
6734
6735 /**
6736 * The URL of an image for the icon.
6737 *
6738 * @attribute src
6739 * @type string
6740 * @default ''
6741 */
6742
6743 /**
6744 * Specifies the icon from the Polymer icon set.
6745 *
6746 * @attribute icon
6747 * @type string
6748 * @default ''
6749 */
6750
6751 /**
6752 * Specifies the label for the menu item.
6753 *
6754 * @attribute label
6755 * @type string
6756 * @default ''
6757 */
6758
6759 });
6760
6761 </script>
6762 </polymer-element>
6763
6764
6765 <!--
6766 @class core-doc-toc
6767 -->
6768
6769 <polymer-element name="core-doc-toc" attributes="data selected" assetpath="../co re-doc-viewer/elements/">
6770
6771 <template>
6772
6773 <style>:host {
6774 display: block;
6775 position: relative;
6776 border-right: 1px solid silver;
6777 }
6778
6779 core-header-panel {
6780 position: absolute;
6781 top: 0;
6782 left: 0;
6783 height: 100%;
6784 width: 100%;
6785 }
6786
6787 core-toolbar {
6788 background-color: #eeeeee;
6789 }
6790 </style>
6791
6792 <core-header-panel mode="waterfall">
6793
6794 <!-- <core-toolbar theme="core-light-theme">
6795 <core-icon-button icon="menu"></core-icon-button>
6796 <span core-flex>Topics</span>
6797 <core-icon-button icon="search" on-tap="{{searchAction}}"></core-icon-bu tton>
6798 </core-toolbar>
6799
6800 <core-toolbar id="searchBar" style="background-color: #C2185B; position: a bsolute; top: 0; left: 0; right: 0; opacity: 0; display: none;" class="seamed" t heme="core-dark-theme">
6801 <core-icon-button icon="search"></core-icon-button>
6802 <core-icon-button icon="close" on-tap="{{closeSearchAction}}"></core-ico n-button>
6803 </core-toolbar>-->
6804
6805 <core-menu selected="{{selected}}">
6806 <template repeat="{{data}}">
6807 <core-item><a href="#{{name}}">{{name}}</a></core-item>
6808 </template>
6809 </core-menu>
6810
6811 </core-header-panel>
6812
6813 </template>
6814
6815 <script>
6816
6817 Polymer('core-doc-toc', {
6818
6819 searchAction: function() {
6820 this.$.searchBar.style.opacity = 1;
6821 this.$.searchBar.style.display = '';
6822 },
6823
6824 closeSearchAction: function() {
6825 this.$.searchBar.style.opacity = 0;
6826 this.$.searchBar.style.display = 'none';
6827 }
6828
6829 });
6830
6831 </script>
6832
6833 </polymer-element>
6834
6835
6836
6837 <!--
6838 Displays formatted source documentation scraped from input urls.
6839
6840 Documentation can be encoded into html comments (&lt;!-- ... --&gt;) or using Js Doc notation (/&#42;&#42; ... &#42;/).
6841
6842 When using JsDoc notation, remember that the left-margin includes an asterisk an d a single space.
6843 This is important for markdown constructs that count spaces. Code blocks for exa mple, must be
6844 five spaces from the first asterisk.
6845
6846 ## Markdown
6847
6848 Markdown format is supported.
6849
6850 ### Links
6851
6852 Arbitrary links can be encoded using [standard markdown format](http://daringfir eball.net/projects/markdown/syntax).
6853 [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-mark down) is also supported.
6854
6855 Links to other topics can be made with hash-links [core-doc-viewer](#core-doc-vi ewer).
6856
6857 ### Code
6858
6859 Example
6860
6861 Four space indents indicate code blocks.
6862
6863 <code>blocks are syntax highlighted</code>
6864
6865 <script>
6866 while(true) {
6867 javascript('is highlighted also');
6868 }
6869 </script>
6870
6871 ### Blockquote
6872
6873 > Blockquote is supported for long text that needs to wrap with a common left s ide indent.
6874 > Blockquote is supported for long text that needs to wrap with a common left s ide indent.
6875
6876 ### Lists
6877
6878 1. enumerated
6879 1. lists
6880
6881 Use - or + for bullet points:
6882
6883 - bullet
6884 - lists
6885
6886 ### Tables
6887
6888 | First Header | Second Header |
6889 | ------------- | ------------- |
6890 | Content Cell | Content Cell |
6891 | Content Cell | Content Cell |
6892
6893 ### HTML
6894
6895 Arbitrary HTML is also supported
6896
6897 <input><button>Button</button><hr/>
6898
6899 @class core-doc-viewer
6900 @homepage github.io
6901 -->
6902
6903 <polymer-element name="core-doc-viewer" attributes="sources route url" assetpath ="../core-doc-viewer/">
6904
6905 <template>
6906
6907 <style>
6908
6909 core-doc-toc {
6910 display: none;
6911 width: 332px;
6912 overflow-x: hidden;
6913 }
6914
6915 </style>
6916
6917 <context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></con text-free-parser>
6918
6919 <template repeat="{{sources}}">
6920 <context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></cont ext-free-parser>
6921 </template>
6922
6923 <core-layout></core-layout>
6924 <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc -toc>
6925 <core-doc-page core-flex="" data="{{data}}"></core-doc-page>
6926
6927 </template>
6928
6929 <script>
6930
6931 Polymer('core-doc-viewer', {
6932 /**
6933 * A single file to parse for docs
6934 *
6935 * @attribute url
6936 * @type String
6937 * @default ''
6938 */
6939
6940 /**
6941 * Class documentation extracted from the parser
6942 *
6943 * @property classes
6944 * @type Array
6945 * @default []
6946 */
6947 classes: [],
6948
6949 /**
6950 * Files to parse for docs
6951 *
6952 * @attribute sources
6953 * @type Array
6954 * @default []
6955 */
6956 sources: [],
6957
6958 ready: function() {
6959 window.addEventListener('hashchange', this.parseLocationHash.bind(this)) ;
6960 this.parseLocationHash();
6961 },
6962
6963 parseLocationHash: function() {
6964 this.route = window.location.hash.slice(1);
6965 },
6966
6967 routeChanged: function() {
6968 this.validateRoute();
6969 },
6970
6971 validateRoute: function() {
6972 if (this.route) {
6973 this.classes.some(function(c) {
6974 if (c.name === this.route) {
6975 this.data = c;
6976 this.route = '';
6977 return;
6978 }
6979 }, this);
6980 }
6981 },
6982
6983 selectedChanged: function() {
6984 this.data = this.classes[this.selected];
6985 },
6986
6987 parserDataReady: function(event) {
6988 this.assimilateData(event.target.data);
6989 },
6990
6991 assimilateData: function(data) {
6992 this.classes = this.classes.concat(data.classes);
6993 this.classes.sort(function(a, b) {
6994 var na = a && a.name.toLowerCase(), nb = b && b.name.toLowerCase();
6995 return (na < nb) ? -1 : (na == nb) ? 0 : 1;
6996 });
6997 if (!this.data && !this.route && this.classes.length) {
6998 this.data = this.classes[0];
6999 }
7000 if (this.classes.length > 1) {
7001 this.$.toc.style.display = 'block';
7002 }
7003 this.validateRoute();
7004 }
7005
7006 });
7007
7008 </script>
7009
7010 </polymer-element>
7011 </div>
7012 <div hidden>undefined</div>
7013
7014 <!--
7015
7016 Implements the default landing page for Polymer components.
7017
7018 `<core-component-page>` can render an information page for any component.
7019 Polymer components use this component in `index.html` to provide the standard la nding page.
7020
7021 `<core-component-page>` is _vulcanized_, which means it contains all it's depend encies baked in.
7022 Therefore, this component is intended to be used only by itself in a page.
7023
7024 This *-dev package contains the raw source and the dependency manifest necessary
7025 to reconstruct `core-component-page\core-component-page.html` via vulcanize.
7026
7027 `<core-component-page>` will set the page title automatically.
7028
7029 @group Polymer Core Elements
7030 @element core-component-page
7031
7032 -->
7033
7034 <polymer-element name="core-component-page" attributes="moduleName sources" asse tpath="../core-component-page-dev/">
7035
7036 <template>
7037
7038 <style>/*
7039 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
7040 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
7041 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7042 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7043 Code distributed by Google as part of the polymer project is also
7044 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
7045 */
7046
7047 :host {
7048 font-family: Arial, sans-serif;
7049 height: 100vh;
7050 }
7051
7052 h2 {
7053 display: inline-block;
7054 margin: 8px 6px;
7055 vertical-align: middle;
7056 }
7057
7058 .choiceB, .choiceC, .choiceD {
7059 /* typography */
7060 color: white;
7061 /* font-size: 14px; */
7062 font-size: 12px;
7063 font-weight: bold;
7064 text-decoration: none;
7065 /* colors / effects */
7066 background-color: #4285F4;
7067 box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
7068 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
7069 border-radius: 2px;
7070 cursor: pointer;
7071 /* metrics */
7072 display: inline-block;
7073 padding: 4px 12px 5px 12px;
7074 margin: 4px 0;
7075 }
7076
7077 .appbar {
7078 background-color: #E91E63;
7079 color: white;
7080 }
7081 </style>
7082
7083 <core-layout vertical=""></core-layout>
7084
7085 <core-toolbar class="appbar">
7086 <span>{{moduleName}}</span>
7087 <a class="choiceC" target="_blank" href="../{{moduleName}}/demo.html">demo </a>
7088 </core-toolbar>
7089
7090 <core-doc-viewer core-flex="" url="{{url}}" sources="{{sources}}"></core-doc -viewer>
7091
7092 </template>
7093
7094 <script>
7095
7096 Polymer('core-component-page', {
7097
7098 moduleName: '',
7099 // TODO(sjmiles): needed this to force Object type for deserialization
7100 sources: [],
7101
7102 ready: function() {
7103 this.moduleName = this.moduleName || this.findModuleName();
7104 },
7105
7106 moduleNameChanged: function() {
7107 document.title = this.moduleName;
7108 this.url = !this.sources.length && this.moduleName ? this.moduleName + ' .html' : '';
7109 },
7110
7111 findModuleName: function() {
7112 var path = location.pathname.split('/');
7113 var name = path.pop() || path.pop();
7114 if (name.indexOf('.html') >= 0) {
7115 name = path.pop();
7116 }
7117 return name || '';
7118 }
7119
7120 });
7121
7122 </script>
7123
7124 </polymer-element>
OLDNEW
« no previous file with comments | « third_party/polymer/core-component-page/bower.json ('k') | third_party/polymer/core-component-page/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698