okos
/
rpg-cards
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

wip

crobi пре 10 година
родитељ
b173084a8e
комит
256dcc0eba
4 измењених фајлова са 76 додато и 14 уклоњено
Подељен поглед Покажи статистику Diff
  1. 15
    1
      generator/components-test.html
  2. 26
    9
      generator/components/card-front.html
  3. 35
    0
      generator/components/card-rule.html
  4. 0
    4
      generator/components/card-title.html

+ 15
- 1
generator/components-test.html Прегледај датотеку 

@@ -12,6 +12,7 @@
12 12 
     <link rel="import" href="components/card-title.html">
13 13 
     <link rel="import" href="components/card-icon.html">
14 14 
     <link rel="import" href="components/card-contents.html">
15 
+    <link rel="import" href="components/card-rule.html">
15 16 
 </head>
16 17 
 <body class="page-background">
17 18 
     <card-front class="card-size-25x35" color="maroon">
 
@@ -22,7 +23,20 @@
22 23 
         </card-title>
23 24 
         <card-contents>
24 25 
             <card-subtitle>Mage spell</card-subtitle>
25 
-            <card-ruler></card-ruler>
26 
+            <card-rule></card-rule>
27 
+            <card-description>Test</card-description>
28 
+        </card-contents>
29 
+    </card-front>
30 
+    &nbsp;
31 
+    <card-front class="card-size-25x35" color="saddlebrown">
32 
+        <card-title>
33 
+            <h1>Brown bear</h1>
34 
+            <h2>1</h2>
35 
+            <card-icon src="/icons/lorc/originals/svg/pawprint.svg"></card-icon>
36 
+        </card-title>
37 
+        <card-contents>
38 
+            <card-subtitle>Medium beast</card-subtitle>
39 
+            <card-rule></card-rule>
26 40 
             <card-description>Test</card-description>
27 41 
         </card-contents>
28 42 
     </card-front>

+ 26
- 9
generator/components/card-front.html Прегледај датотеку 

@@ -3,8 +3,8 @@
3 3 
 -->
4 4
5 5 
 <template id="card-front">
6 
-    <style>
7 
-        #card {
6 
+    <style type='text/css'>
7 
+        :host {
8 8 
             /* Fill the whole area of the shadow root */
9 9 
             width: 100%;
10 10 
             height: 100%;
 
@@ -25,12 +25,22 @@
25 25 
             margin-top: -3px;
26 26 
             margin-bottom: 3px;
27 27 
         }
28 
+    </style>
29 
+
30 
+    <style type='text/css' id="color-style">
31 
+        :host {
32 
+            color: blue;
33 
+            background-color: blue;
34 
+            border-color: blue;
35 
+        }
36 
+        ::content card-rule /deep/ svg {
37 
+            fill: blue;
38 
+        }
28 39
29 40 
     </style>
30 41
31 
-    <div id="card">
32 
-        <content></content>
33 
-    </div>
42 
+
43 
+    <content></content>
34 44
35 45 
 </template>
36 46 
 
@@ -47,10 +57,17 @@
47 57 
             },
48 58 
             set: function (value) {
49 59 
                 var root = this.shadowRoot;
50 
-                var style = root.getElementById("card").style;
51 
-                style.color = value;
52 
-                style.backgroundColor = value;
53 
-                style.borderColor = value;
60 
+                var style = root.getElementById("color-style");
61 
+                style.innerHTML = "\
62 
+                :host {\
63 
+                    color: "+value+";\
64 
+                    background-color: " + value + ";\
65 
+                    border-color: " + value + ";\
66 
+                }\
67 
+                ::content card-rule /deep/ svg {\
68 
+                    fill: " + value + ";\
69 
+                }\
70 
+                ";
54 71 
             }
55 72 
         });
56 73 
         proto.createdCallback = function () {

+ 35
- 0
generator/components/card-rule.html Прегледај датотеку 

@@ -0,0 +1,35 @@
1 
+
2 
+<template id="card-rule">
3 
+    <style>
4 
+        #rule {
5 
+            width: 100%;
6 
+            height: 4px;
7 
+            margin-top: 3px;
8 
+            margin-bottom: 3px;
9 
+        }
10 
+    </style>
11 
+
12 
+    <svg id="rule" height="1" width="100" viewBox="0 0 100 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
13 
+        <polyline points="0,0 100,0.5 0,1"></polyline>
14 
+    </svg>
15 
+
16 
+</template>
17 
+
18 
+<script>
19 
+    (function(window, document) {
20 
+        var elemName = 'card-rule';
21 
+        var mainDoc = document;
22 
+        var importDoc = document.currentScript.ownerDocument;
23 
+
24 
+        var proto = Object.create(HTMLElement.prototype);
25 
+        proto.createdCallback = function () {
26 
+            var template = importDoc.getElementById(elemName);
27 
+            var clone = mainDoc.importNode(template.content, true);
28 
+            var root = this.createShadowRoot();
29 
+            root.appendChild(clone);
30 
+        }
31 
+
32 
+        mainDoc.registerElement(elemName, { prototype: proto });
33 
+
34 
+    })(window, document);
35 
+</script>

+ 0
- 4
generator/components/card-title.html Прегледај датотеку 

@@ -55,10 +55,6 @@
55 55 
             var root = this.createShadowRoot();
56 56 
             root.appendChild(clone);
57 57 
         }
58 
-        proto.attributeChangedCallback = function (name, oldValue, newValue) {
59 
-            switch (name) {
60 
-            }
61 
-        }
62 58
63 59 
         mainDoc.registerElement(elemName, { prototype: proto });
64 60

Write Preview
Loading…
Откажи
Сачувај