-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
121 lines (102 loc) · 5.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="kickstart.min.css">
<link rel="stylesheet" href="style.css">
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>Mozart.js Documentation</title>
</head>
<body>
<nav>
<span class="title">Mozart 3</span>
<iframe class="github_stars" src="https://ghbtns.com/github-btn.html?user=adamjgrant&repo=Mozart&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</nav>
<article data-attach="about/why">
<h1>Mozart is not a framework</h1>
<h2>In fact, it's hardly anything at all.</h2>
<p>Mozart's purpose is to enable a component-centric pattern for web development using a <a href="https://github.com/adamjgrant/Mozart/blob/master/mozart.min.js">very small JavaScript file</a>.</p>
</article>
<article data-attach="about/components">
<h2>Components</h2>
<p>Components are just ordinary DOM elements designated with <code>data-component</code> attributes.</p>
<img src="components.png">
</article>
<article data-attach="about/dedicated-files">
<p>Each component gets its own dedicated JavaScript and CSS file...</p>
</article>
<article data-attach="about/scoped-selector">
<p>Components have a scoped query selector <code>q()</code> that selects only from the elements inside of it.</p>
</article>
<article data-attach="about/deferred-actions">
<p>Actions defined on a component can defer downstream logic to other components thereby separating concerns and keeping code tidy.</p>
</article>
<article>
<div class="text">
<h1>Basics</h1>
<label>
<input id="show-tests" type="checkbox">
Show tests
</label>
<div id="test_results" hidden class="test_results">
<h1>Test results</h1>
<p>
⚪️ <span>0</span> Total, 🟢 <span>0</span> Passing, 🔴 <span>0</span> Failing,
</p>
</div>
<p><a href="//cdn.everything.io/mozart/v3/mozart.min.js">Download Mozart</a> or use the CDN links</p>
<input type="text" onclick="select()" value="https://cdn.everything.io/v3/mozart/mozart.min.js" />
<input type="text" onclick="select()" value="https://cdn.everything.io/v3/mozart/mozart.js" />
</div>
<pre></pre>
</article>
<article data-attach="basics/create-a-component">
<h2>Creating a component</h2>
<p>Create your markup using <code>data-component</code> to name your component.</p>
<p>Import <code>Component</code> from <code>mozart.js</code> whenever you need to define a component.</p>
<p>Then give it a name and <code>export</code> it so other components can <code>import</code> it.</p>
</article>
<article data-attach="basics/methods-added">
<h2>Add some methods</h2>
<p>You'll probably want to define some behaviors next.</p>
<p>Once we define these behaviors with methods, you'll be able to call them either on the component's
name or on <code>this</code> if in the right context.</p>
</p>
</article>
<article data-attach="basics/actions">
<p>You can define your actions one-by-one on the component...</p>
</article>
<article data-attach="basics/actions2">
<p>...or <code>assign</code> a whole set of them.</p>
</article>
<article data-attach="basics/calling">
<p>Calling a method should feel like native JavaScript because it mostly is.</p>
</article>
<article data-attach="basics/element-selection">
<h1>Selecting elements</h1>
<p>Selecting an element can be done with <code>q</code> which is merely a shortcut to <code>document.querySelector</code> that:</p>
<ol>
<li>Prefaces the query with <code>[data-component="<your-component-name-here>"]</code></li>
<li>Returns one element if one is found, or an array of elements otherwise</li>
</ol>
<p>The scoped selector is also a forcing function to use short and simple class names for elements.</p>
</article>
<article data-attach="events/attaching">
<h1>Attaching events</h1>
<p>Attaching events isn't mostly native JS with some help from <code>q</code> and overall shortened syntax</p>
</article>
<article data-attach="advanced/self-selection">
<h1>Advanced</h1>
<h2>Selecting the component itself</h2>
<p>Select the component itself by leaving <code>q</code> empty or by calling <code>me</code>.</p>
</article>
<article data-attach="advanced/storing-data">
<h2>Storing data</h2>
<p>To save some arbitrary data to the component as you would any in-memory object, use the <code>.store</code> method.</p>
</article>
<script type="module" src="mozart.js"></script>
<script data-manual src="docs/prism.js"></script>
<script src="docs.js"></script>
<link rel="stylesheet" href="docs/prism.css">
</body>
</html>