third_party/polymer/components/core-iconset-svg/demo.html - Issue 592593002: Inline scripts were extracted from Polymer elements.

Side by Side Diff: third_party/polymer/components/core-iconset-svg/demo.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: s/echo ""/echo/ 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

« no previous file with comments | « third_party/polymer/components/core-iconset-svg/core-iconset-svg.html ('k') | third_party/polymer/components/core-iconset-svg/my-icons.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!doctype html>	1 <!doctype html>

2 <!--	2 <!--

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.	3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also	7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 -->	9 -->

10	10

11 <html>	11 <html>

12 <head>	12 <head>

13	13

14 <title>core-iconset</title>	14 <title>core-iconset-svg</title>

	15 <script src="../platform/platform.js"></script>

	16 <link rel="import" href="svg-sample-icons.html">

	17 <style shim-shadowdom>

	18 .embiggen core-icon {

	19 height: 128px;

	20 width: 128px;

	21 }

15	22

16 <script src="../platform/platform.js"></script>	23 core-icon:nth-of-type(1) {

17 <link rel="import" href="core-iconset.html">	24 fill: orange;

18 <link rel="import" href="../core-icon/core-icon.html">	25 }

19	26

	27 core-icon:nth-of-type(2) {

	28 fill: green;

	29 stroke: orange;

	30 }

	31

	32 core-icon:nth-of-type(3) {

	33 fill: navy;

	34 }

	35

	36 core-icon {

	37 transition: all 0.5s;

	38 -webkit-transition: all 0.5s;

	39 }

	40

	41 core-icon:hover {

	42 -webkit-filter: drop-shadow( 2px 2px 2px #333 );

	43 filter: drop-shadow( 2px 2px 2px #333 );

	44 }

	45 </style>

20 </head>	46 </head>

21 <body unresolved>	47 <body unresolved>

22

23 <!-- Register an icon set; you can do this anywhere, including an HTMLImport! -->

24 <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24"

25 icons="location place starta stopb bus car train walk">

26 </core-iconset>

27	48

28 <core-iconset id="my-icons-big" src="my-icons-big.png" width="192" iconSize="4 8"	49 <template is="auto-binding">

29 icons="location place starta stopb bus car train walk">	50 <div class="embiggen">

30 </core-iconset>	51 <template repeat="{{icon in icons}}">

31	52 <core-icon icon="{{icon}}"></core-icon>

32 <!-- Now create a bunch of icons using our iconset -->	53 </template>

33 <core-icon icon="my-icons:location"></core-icon>	54 </div>

34 <core-icon icon="my-icons:place"></core-icon>	55 <core-meta id="meta" type="iconset"></core-meta>

35 <core-icon icon="my-icons:starta"></core-icon>	56 </template>

36 <core-icon icon="my-icons:stopb"></core-icon>	57 <script>

37 <core-icon icon="my-icons:bus"></core-icon>	58 addEventListener('template-bound', function(e) {

38 <core-icon icon="my-icons:car"></core-icon>	59 var template = e.target;

39 <core-icon icon="my-icons:train"></core-icon>	60 var setName = 'svg-sample-icons';

40 <core-icon icon="my-icons:walk"></core-icon>	61 var icons = template.$.meta.byId(setName).iconNames;

41 <br>	62 template.icons = icons.map(function(ic){ return setName + ':' +ic });

42 <!-- icons may also be specified by index -->	63 });

43 <style>	64 </script>

44 .embiggen core-icon {	65 </body>

45 width: 48px;

46 height: 48px;

47 }

48 </style>

49

50 <div class="embiggen">

51 <core-icon icon="my-icons-big:0"></core-icon>

52 <core-icon icon="my-icons-big:1"></core-icon>

53 <core-icon icon="my-icons-big:2"></core-icon>

54 <core-icon icon="my-icons-big:3"></core-icon>

55 <core-icon icon="my-icons-big:4"></core-icon>

56 <core-icon icon="my-icons-big:5"></core-icon>

57 <core-icon icon="my-icons-big:6"></core-icon>

58 <core-icon icon="my-icons-big:7"></core-icon>

59 </div>

60

61 </body>

62 </html>	66 </html>

OLD	NEW