Index: sky/examples/htmlish/framework/htmlish.sky |
diff --git a/sky/examples/htmlish/framework/htmlish.sky b/sky/examples/htmlish/framework/htmlish.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1baf62f5f071aba219f88cf71fad5d95934c937d |
--- /dev/null |
+++ b/sky/examples/htmlish/framework/htmlish.sky |
@@ -0,0 +1,109 @@ |
+SKY MODULE - exports some basic HTML-like elements |
+<import src="element.sky"/> |
+ |
+<!-- note: accessibility handling is not implemented yet, because the |
+ mojo ax service isn't yet ready --> |
+ |
+<element name=html> |
+ <!-- implement a scrollable viewport --> |
+</element> |
+ |
+<element name=head /> |
+<element name=body /> |
+<element name=p /> |
+ |
+<element name=h1> |
+ <style> |
+ :host { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=h2> |
+ <style> |
+ :host { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=h3> |
+ <style> |
+ :host { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=h4> |
+ <style> |
+ :host { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=h5> |
+ <style> |
+ :host { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=h6> |
+ <style> |
+ :host { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=b> |
+ <style> |
+ :host { font-weight: bold; } |
+ </style> |
+</element> |
+ |
+<element name=data> |
+ <script> |
+ module.currentScript.parentNode.setPrototype({ |
+ get value () { |
+ return this.getAttribute('value'); |
+ }, |
+ set value (newValue) { |
+ this.setAttribute('value', newValue); |
+ }, |
+ }); |
+ </script> |
+</element> |
+ |
+<element name=progress> |
+ <template> |
+ <div> ... </div> |
+ </template> |
+ <script> |
+ module.currentScript.parentNode.setPrototype({ |
+ ... |
+ }); |
+ </script> |
+</element> |
+ |
+<element name=details> |
+ <style> |
+ :host { display: block; } |
+ .outer { border: solid; } |
+ .header { display: inline; } |
+ .summary { display: inline; } |
+ </style> |
+ <template> |
+ <div class="outer"> |
+ <div class="header"> |
+ <div class="button">OPEN</div> |
+ <div class="summary"><content select="summary"/></div> |
+ </div> |
+ <div class="contents"> |
+ <content/> |
+ </div> |
+ </div> |
+ </template> |
+ <script> |
+ module.currentScript.parentNode.setPrototype({ |
+ init: function () { |
+ |
+ }, |
+ open() { |
+ |
+ } |
+ }); |
+ </script> |
+</element> |