cerxes/csx
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v0.0.11: Added unit-tests, solved the key={...} problem, updated the build/watch configuration of CSX to be able to build minified and non-minified bundle outputs, as well as a CJS version of lib/ (for consuming in Node-environment, like Jest). The previous tests were renamed to examples, and should still need to be updated.

Browse Source
This commit is contained in:
Miel Truyen
2020-04-14 11:54:30 +02:00
parent 05f0e66a42
commit b95e5506d2
121 changed files with 3406 additions and 4929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/svg/index.html Normal file
View File

@@ -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>

47
examples/svg/index.jsx Normal file
View File

@@ -0,0 +1,47 @@
import {render} from "../../packages/csx";
import style from "./index.scss";
import {SvgLoader} from "./svg-loader";
import {SvgTester} from "./svg-tester";
import {SvgTesterTwo} from "./svg-tester-two";
let loader = render(<SvgLoader inverted="yes"/>);
document.body.appendChild(render(<style>{style}</style>));
document.body.appendChild(render(
<div class="center-me">
<h3>SVG Loader</h3>
{loader}
<h3>SVG Tester</h3>
<SvgTester/>
<h3>SVG Tester Two</h3>
<SvgTesterTwo/>
</div>
));
setTimeout(()=>{
console.log("Uninverting");
loader.removeAttribute("inverted");
setTimeout(()=>{
console.log("Inverting");
loader.setAttribute("inverted", "ja");
setTimeout(()=>{
console.log("Stays inverted");
loader.setAttribute("inverted", "");
setTimeout(()=>{
console.log("Inverted color");
loader.setAttribute("inverted-color", "#0F0");
}, 1000);
}, 1000);
}, 1000);
}, 1000);

19
examples/svg/index.scss Normal file
View File

@@ -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;
}

57
examples/svg/svg-loader.jsx Normal file
View File

@@ -0,0 +1,57 @@
import {CustomElement, defineElement, Host, ShadowDOM, state, prop} 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
@prop({reflect: true}) inverted;
@prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
// 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={(this.inverted??false)!==false? this.invertedColor : "#F00"}>
<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>
)
}
}

10
examples/svg/svg-loader.shadow.scss Normal file
View File

@@ -0,0 +1,10 @@
:host{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.spinner{
padding: .5rem;
}
}

43
examples/svg/svg-tester-two.jsx Normal file
View File

@@ -0,0 +1,43 @@
import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
import {SvgLoader} from "./svg-loader";
@defineElement('svg-tester-two')
export class SvgTesterTwo extends CustomElement{
// Constructor
constructor(){
super();
}
// Private properties
states = [
{ inverted: true, invertedColor: "#F00"},
{ inverted: true, invertedColor: "#FF0"},
{ inverted: true, invertedColor: "#0FF"},
{ inverted: false},
{ inverted: true, invertedColor: "#0F0"},
];
// Properties
@state() state = this.states[0];
// Handlers
// CustomElement
connectedCallback() {
setInterval(()=>{
// Moving state
let curIndex = this.states.indexOf(this.state);
this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
}, 1000);
super.connectedCallback();
}
render(){
// invertedColor instead of inverted-color is the only difference!
return (
<Host>
<SvgLoader inverted={this.state.inverted} invertedColor={this.state.invertedColor} />
</Host>
);
}
}

42
examples/svg/svg-tester.jsx Normal file
View File

@@ -0,0 +1,42 @@
import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
import {SvgLoader} from "./svg-loader";
@defineElement('svg-tester')
export class SvgTester extends CustomElement{
// Constructor
constructor(){
super();
}
// Private properties
states = [
{ inverted: true, invertedColor: "#F00"},
{ inverted: true, invertedColor: "#FF0"},
{ inverted: true, invertedColor: "#0FF"},
{ inverted: false},
{ inverted: true, invertedColor: "#0F0"},
];
// Properties
@state() state = this.states[0];
// Handlers
// CustomElement
connectedCallback() {
setInterval(()=>{
// Moving state
let curIndex = this.states.indexOf(this.state);
this.state = this.states[(curIndex+1)>=this.states.length?0:curIndex+1];
}, 1000);
super.connectedCallback();
}
render(){
return (
<Host>
<SvgLoader inverted={this.state.inverted} inverted-color={this.state.invertedColor} />
</Host>
);
}
}