Skip to content

Commit c47cdf6

Browse files
JoernTJoernT
committed
cleanup;
new demo files; fix to getModel()
1 parent 57c7d04 commit c47cdf6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+464
-4211
lines changed

‎demo/01-hi.html

+70-28
Original file line numberDiff line numberDiff line change
@@ -25,34 +25,76 @@
2525
</style>
2626
</head>
2727
<body unresolved="unresolved">
28-
<div class="wrapper">
29-
30-
<h1>Get started</h1>
31-
<code>
32-
<data>
33-
<foo></foo>
34-
</data>
35-
</code>
36-
37-
<p>
38-
Ultra-lazy mode creates XML nodes for each 'ref' found in the document. This mode is activated
39-
whenever there is no xf-model element specified.
40-
</p>
41-
42-
<demo-snippet>
43-
<template>
44-
45-
<xf-form>
46-
<xf-output ref="greeting">Hello Universe</xf-output>
47-
</xf-form>
48-
49-
</template>
50-
</demo-snippet>
51-
52-
<!-- <pre>-->
53-
<!-- </pre>-->
54-
55-
</div>
28+
<div class="wrapper">
29+
30+
<h1>Lazy Greeting</h1>
31+
32+
<demo-snippet>
33+
<template>
34+
<xf-form>
35+
<xf-output ref="greeting">Hello Universe</xf-output>
36+
</xf-form>
37+
</template>
38+
</demo-snippet>
39+
40+
<h2>Description</h2>
41+
<p>
42+
Fore is implemented as Web Components. A form in Fore is always wrapped up in a <code>xf-form</code> element. Besides
43+
that we have a <code>xf-output</code> which - well -outputs a referenced data node.
44+
</p>
45+
<p>
46+
Fore is MVC but where's the model? It gets auto-generated if you don't provide one.
47+
For each Fore component with a <code>ref</code> a node in the instance data is created. The value of that
48+
bound component is taken as the default value. The form will create a XML document for your data.
49+
</p>
50+
51+
<p>If you haven't felt that lazy this morning you could have written the equivalent like so:</p>
52+
53+
<demo-snippet>
54+
<template>
55+
<xf-form>
56+
<xf-model>
57+
<xf-instance>
58+
<data>
59+
<greeting>Hello Universe</greeting>
60+
</data>
61+
</xf-instance>
62+
</xf-model>
63+
<xf-output ref="greeting">Hello Universe</xf-output>
64+
</xf-form>
65+
</template>
66+
</demo-snippet>
67+
68+
<p>The form holds a single <code>xf-model</code> which itself contains a <code>xf-instance</code> element. This
69+
is where our actual data are living. A form can contain a single model but as many <code>xf-instance</code> elements
70+
as you like.</p>
71+
72+
<h2>Nesting refs</h2>
73+
74+
<demo-snippet>
75+
<template>
76+
<xf-form>
77+
<xf-group ref="planet">
78+
<xf-output ref="greeting">Hello Earth</xf-output>
79+
</xf-group>
80+
</xf-form>
81+
</template>
82+
</demo-snippet>
83+
84+
<p>Guess how the instance looks like now? Here it is </p>
85+
<demo-snippet>
86+
<template>
87+
<xf-instance>
88+
<data>
89+
<planet>
90+
<greeting>Hello Earth</greeting>
91+
</planet>
92+
</data>
93+
</xf-instance>
94+
</template>
95+
</demo-snippet>
96+
97+
</div>
5698

5799

58100
<script type="module" src="../index.js"></script>

‎demo/02-refs.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
6+
7+
<title>Refs</title>
8+
9+
<script src="../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<script type="module">
11+
import '@polymer/iron-demo-helpers/demo-snippet.js';
12+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
13+
</script>
14+
15+
16+
<link href="../resources/vars.css" rel="stylesheet">
17+
<link href="../resources/demo.css" rel="stylesheet">
18+
19+
20+
<style>
21+
.dynamic {
22+
background: #76ff03;
23+
}
24+
25+
</style>
26+
</head>
27+
<body unresolved="unresolved">
28+
<div class="wrapper">
29+
30+
<h1>What are these <code>ref</code>s about?</h1>
31+
<p>Seen that <code>ref</code> thingy before but what does it actually do?</p>
32+
33+
<demo-snippet>
34+
<template>
35+
<xf-form>
36+
<xf-output ref="greeting">Hello Universe</xf-output>
37+
</xf-form>
38+
</template>
39+
</demo-snippet>
40+
41+
42+
<h2>Description</h2>
43+
<p>A <code>ref</code> (short for 'reference') points to some location in your instance data and binds to it. Whenever
44+
that bound node changes the UI will follow.</p>
45+
46+
47+
<demo-snippet>
48+
<template>
49+
<xf-form>
50+
<xf-model>
51+
<xf-instance>
52+
<data>
53+
<planet>
54+
<greeting>Hello Earth</greeting>
55+
</planet>
56+
</data>
57+
</xf-instance>
58+
</xf-model>
59+
60+
<xf-output ref="planet/greeting"></xf-output>
61+
</xf-form>
62+
</template>
63+
</demo-snippet>
64+
65+
66+
<p>A <code>ref</code> is a path expression - it may have steps ...</p>
67+
68+
<p>The <code>data</code> step does not need to be mentioned - it's always implicit to save typing.</p>
69+
</div>
70+
71+
72+
<script type="module" src="../index.js"></script>
73+
</body>
74+
</html>

‎demo/03-instances.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
6+
7+
<title>Instances</title>
8+
9+
<script src="../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<script type="module">
11+
import '@polymer/iron-demo-helpers/demo-snippet.js';
12+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
13+
</script>
14+
15+
16+
<link href="../resources/vars.css" rel="stylesheet">
17+
<link href="../resources/demo.css" rel="stylesheet">
18+
19+
20+
<style>
21+
.dynamic {
22+
background: #76ff03;
23+
}
24+
25+
</style>
26+
</head>
27+
<body unresolved="unresolved">
28+
<div class="wrapper">
29+
30+
<h1>Instances - a home for your precious data</h1>
31+
32+
<p>First of all - there can as many <code>xf-instance</code> elements as you need.</p>
33+
34+
<demo-snippet>
35+
<template>
36+
<xf-form>
37+
<xf-model>
38+
<xf-instance>
39+
<data>
40+
<foobar></foobar>
41+
</data>
42+
</xf-instance>
43+
<xf-instance id="second">
44+
<data>
45+
<item>second</item>
46+
</data>
47+
</xf-instance>
48+
</xf-model>
49+
</xf-form>
50+
</template>
51+
</demo-snippet>
52+
<h2>Description</h2>
53+
<p>We got 2 instances that create 2 separate XML documents. The first in the document is always
54+
the default. All following ones need to have an <code>id</code>.</p>
55+
</div>
56+
57+
58+
<script type="module" src="../index.js"></script>
59+
</body>
60+
</html>

‎doc/animation.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.tilt-in-top-1 {
2+
-webkit-animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
3+
animation: tilt-in-top-1 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
4+
}
5+
6+
/* ----------------------------------------------
7+
* Generated by Animista on 2021-2-27 16:53:46
8+
* Licensed under FreeBSD License.
9+
* See http://animista.net/license for more info.
10+
* w: http://animista.net, t: @cssanimista
11+
* ---------------------------------------------- */
12+
13+
/**
14+
* ----------------------------------------
15+
* animation tilt-in-top-1
16+
* ----------------------------------------
17+
*/
18+
@-webkit-keyframes tilt-in-top-1 {
19+
0% {
20+
-webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
21+
transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
22+
opacity: 0;
23+
}
24+
100% {
25+
-webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
26+
transform: rotateY(0deg) translateY(0) skewY(0deg);
27+
opacity: 1;
28+
}
29+
}
30+
@keyframes tilt-in-top-1 {
31+
0% {
32+
-webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
33+
transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
34+
opacity: 0;
35+
}
36+
100% {
37+
-webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
38+
transform: rotateY(0deg) translateY(0) skewY(0deg);
39+
opacity: 1;
40+
}
41+
}
42+
43+
.focus-in-contract-bck {
44+
opacity: 1;
45+
-webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
46+
animation: focus-in-contract-bck 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
47+
}
48+
49+
/* ----------------------------------------------
50+
* Generated by Animista on 2021-2-27 17:30:8
51+
* Licensed under FreeBSD License.
52+
* See http://animista.net/license for more info.
53+
* w: http://animista.net, t: @cssanimista
54+
* ---------------------------------------------- */
55+
56+
/**
57+
* ----------------------------------------
58+
* animation focus-in-contract-bck
59+
* ----------------------------------------
60+
*/
61+
@-webkit-keyframes focus-in-contract-bck {
62+
0% {
63+
letter-spacing: 1em;
64+
-webkit-transform: translateZ(300px);
65+
transform: translateZ(300px);
66+
-webkit-filter: blur(12px);
67+
filter: blur(12px);
68+
opacity: 0;
69+
}
70+
100% {
71+
-webkit-transform: translateZ(12px);
72+
transform: translateZ(12px);
73+
-webkit-filter: blur(0);
74+
filter: blur(0);
75+
opacity: 1;
76+
}
77+
}
78+
@keyframes focus-in-contract-bck {
79+
0% {
80+
letter-spacing: 1em;
81+
-webkit-transform: translateZ(300px);
82+
transform: translateZ(300px);
83+
-webkit-filter: blur(12px);
84+
filter: blur(12px);
85+
opacity: 0;
86+
}
87+
100% {
88+
-webkit-transform: translateZ(12px);
89+
transform: translateZ(12px);
90+
-webkit-filter: blur(0);
91+
filter: blur(0);
92+
opacity: 1;
93+
}
94+
}

‎doc/architecture-1.png

-10.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)