SVG handling

2019-11-22 16:15:53 +01:00
parent 029fe16b6d
commit 698656c8f6
10 changed files with 147 additions and 14 deletions
--- a/test/svg/index.html
+++ b/test/svg/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cerxes - CustomElements - SVG</title>
+</head>
+    <body>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>
--- a/test/svg/index.jsx
+++ b/test/svg/index.jsx
@@ -0,0 +1,11 @@
+import {render} from "../../packages/csx";
+import style from "./index.scss";
+import {SvgLoader} from "./svg-loader";
+
+document.body.appendChild(render(<style>{style}</style>));
+document.body.appendChild(render(
+    <div class="center-me">
+        <h3>SVG Loader</h3>
+        <SvgLoader />
+    </div>
+));
--- a/test/svg/index.scss
+++ b/test/svg/index.scss
@@ -0,0 +1,19 @@
+html{
+  width: 100%;
+  height: 100%;
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.center-me{
+  align-self: center;
+}
--- a/test/svg/svg-loader.jsx
+++ b/test/svg/svg-loader.jsx
@@ -0,0 +1,55 @@
+import {CustomElement, defineElement, Host, ShadowDOM, State} from "../../packages/csx";
+import loaderComponentShadowStyle from './svg-loader.shadow.scss';
+
+// TODO configurability, like inverted and not with props...
+
+@defineElement('svg-loader')
+export class SvgLoader extends CustomElement{
+    // Constructor
+    constructor(){
+        super();
+    }
+    
+    // Private properties
+    
+    // Properties
+    
+    // Handlers
+    
+    // CustomElement
+    render(){
+        return (
+            <Host>
+                <ShadowDOM>
+                    <style>
+                        { loaderComponentShadowStyle }
+                    </style>
+                    
+                    <div class="loader-content">
+                        <div class="spinner">
+                            <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+                                <g fill="none" fill-rule="evenodd">
+                                    <g transform="translate(1 1)" stroke-width="2">
+                                        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+                                        <path d="M36 18c0-9.94-8.06-18-18-18">
+                                            <animateTransform
+                                                attributeName="transform"
+                                                type="rotate"
+                                                from="0 18 18"
+                                                to="360 18 18"
+                                                dur="1s"
+                                                repeatCount="indefinite"/>
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+    
+                        <slot>
+                        </slot>
+                    </div>
+                </ShadowDOM>
+            </Host>
+        )
+    }
+}
--- a/test/svg/svg-loader.shadow.scss
+++ b/test/svg/svg-loader.shadow.scss
@@ -0,0 +1,10 @@
+:host{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .spinner{
+        padding: .5rem;
+    }
+}