okos
/
rpg-cards
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

wip

crobi 10 gadus atpakaļ
vecāks
b173084a8e
revīzija
256dcc0eba
4 mainītis faili ar 76 papildinājumiem un 14 dzēšanām
Apvienotais skats Rādīt salīdzināšanas statistiku
  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 Parādīt failu

12 
     <link rel="import" href="components/card-title.html">
 12 
     <link rel="import" href="components/card-title.html">
13 
     <link rel="import" href="components/card-icon.html">
 13 
     <link rel="import" href="components/card-icon.html">
14 
     <link rel="import" href="components/card-contents.html">
 14 
     <link rel="import" href="components/card-contents.html">
15 
+    <link rel="import" href="components/card-rule.html">
15 
 </head>
 16 
 </head>
16 
 <body class="page-background">
 17 
 <body class="page-background">
17 
     <card-front class="card-size-25x35" color="maroon">
 18 
     <card-front class="card-size-25x35" color="maroon">
22 
         </card-title>
 23 
         </card-title>
23 
         <card-contents>
 24 
         <card-contents>
24 
             <card-subtitle>Mage spell</card-subtitle>
 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 
             <card-description>Test</card-description>
 40 
             <card-description>Test</card-description>
27 
         </card-contents>
 41 
         </card-contents>
28 
     </card-front>
 42 
     </card-front>

+ 26
- 9
generator/components/card-front.html Parādīt failu

3 
 -->
 3 
 -->
4
4
5 
 <template id="card-front">
 5 
 <template id="card-front">
6 
-    <style>
7 
-        #card {
6 
+    <style type='text/css'>
7 
+        :host {
8 
             /* Fill the whole area of the shadow root */
 8 
             /* Fill the whole area of the shadow root */
9 
             width: 100%;
 9 
             width: 100%;
10 
             height: 100%;
 10 
             height: 100%;
25 
             margin-top: -3px;
 25 
             margin-top: -3px;
26 
             margin-bottom: 3px;
 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 
     </style>
 40 
     </style>
30
41
31 
-    <div id="card">
32 
-        <content></content>
33 
-    </div>
42 
+
43 
+    <content></content>
34
44
35 
 </template>
 45 
 </template>
36
46
47 
             },
 57 
             },
48 
             set: function (value) {
 58 
             set: function (value) {
49 
                 var root = this.shadowRoot;
 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 
         proto.createdCallback = function () {
 73 
         proto.createdCallback = function () {

+ 35
- 0
generator/components/card-rule.html Parādīt failu

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 Parādīt failu

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

Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt