-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
188 lines (188 loc) · 8.25 KB
/
index.html
File metadata and controls
188 lines (188 loc) · 8.25 KB
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/eForm.css">
<script src="js/modular.js"></script>
<script src="js/polyfill.js"></script>
</head>
<body>
<module name="mainTitle">
{
"mainTitle" : "modular.js Documentation"
}
</module>
<!--The contents of the menu are generated in js/generateMenu.js-->
<module name="menu" class="e-dark-gray"></module>
<module name="section">
{
"header" : "Download",
"content" : "You can download the modular.js file <a href="js/modular.js" download>here</a>. You can also find the source code for this page on our <a href="https://github.com/mhanberry1/modular.js">github page</a>."
}
</module>
<module name="section">
{
"header" : "What is modular.js?",
"content" : "Simply put, modular.js is an easier way to develop your website. It allows you to design individual components (modules) on your site without having them interfere with each other. Modules created using modular.js are completely re-usable without the need to copy and paste the same code over and over. Moreover, modular.js is easy to understand and does not require you to learn any new syntax. It is designed to stay out of the way, so feel free to use any framework alongside it -- Although it greatly reduces the need for large frameworks like angular.js. modular.js lets you develop modules as if they are self-contained websites and then augment their functionality when they are used in another document."
}
</module>
<module name="section">
{
"header" : "Benefits of Using modular.js",
"content" : "<span class="subheader">Eliminate Collisions</span>
<br>
Every module gets its own shadow DOM to work with, so you don't have to worry about CSS or Javascript variables inside a module interfering with anything else.
<br>
<br>
<span class="subheader">Increase Portability</span>
<br>
Once you have created a module, you can re-use it in any other project without any modifications at all.
<br>
<br>
<span class="subheader">Decrease Redundancy</span>
<br>
Using modular.js allows you to reduce repeatable code down to a single line, so you only have to focus on unique information."
}
</module>
<module name="section">
{
"header" : "How do I use it?",
"content" : "Using modular.js couldn't be simpler. All you have to do is link the modular.js file to your document, and you're ready to go!
<span class="code"><script src=\"js/modular.js\"></script></span>
You can then reference any modules that are stored in the modules directory like so:
<span class="code"><module name=\"section\"></module></span>
The above module will be populated with the code found in <span class="inlineCode">./modules/section/</span>"
}
</module>
<module name="section">
{
"header" : "Creating a Module",
"content" : "<ol>
<li>In your project root, set up the file structure by creating a directory called <span class="inlineCode">modules</span>.</li>
<li>Inside of the modules directory, create another directory that has the same name as your module.</li>
<li>Create a file called <span class="inlineCode">index.html</span> in the new directory, and fill it with any other assets and code that your module requires.</li>
</ol>"
}
</module>
<module name="section">
{
"header" : "Extra Functionality",
"content" : "The code that goes into a module is no different than the code that goes into a webpage. Nevertheless, there are a few extra capabilities that modular.js brings to the table.
<br>
<br>
<span class="line"></span>
<br>
<span class="subheader">Variable Substitution</span>
<br>
Inside a module, you can specify where unique information can be injected by using <span class="inlineCode">{{ }}</span>
<span class="code">
<div><br>
<h1>{{header}}</h1><br>
<p>{{content}}</p><br>
</div><br>
</span>
When referencing this module, you can feed it information by constructing a JSON inside of the module body.
<span class="code">
<module name=\"moduleName\"><br>
{<br>
\"header\" : \"This is the Header\",<br>
\"content\" : \"This is the content.\"<br>
}<br>
</module>
</span>
The resulting HTML will look like this:
<span class="code">
<div><br>
<h1>This is the Header</h1><br>
<p>This is the content.</p><br>
</div><br>
</span>
<br>
<span class="line"></span>
<br>
<span class="subheader">Accessing the Parent DOM</span>
<br>
Although each module has its own shadow DOM, you can access the parent DOM that the module is embedded in.
<span class="code">
var parentDOM = document.parent;
</span>
In the same manner, you can access the parent of a parent, and so-on.
<span class="code">
var grandparentDOM = document.parent.parent;
</span>
<br>
<span class="line"></span>
<br>
<span class="subheader">Accessing the main DOM</span>
<br>
In the case of modules that are embedded in one another, it may be useful to jump straight to the top of the DOM tree, a.k.a the main Doc.
<span class="code">
var mainDoc = modularjs.mainDoc;
</span>
This is made available to you through the modularjs object, which every module has access to.
<br>
<br>
<span class="line"></span>
<br>
<span class="subheader">Sharing information between modules</span>
<br>
If you would like to share information between modules, you can do so by adding key/value pairs to <span class="inlineCode">modularjs.sharedInfo</span> like so:
<span class="code">
modularjs.sharedInfo[\"key1\"] = \"value1\";<br>
modularjs.sharedInfo[\"key2\"] = \"value2\";
</span>
<br>
<span class="line"></span>
<br>
<span class="subheader">Access the current module's name, ID, and object representation</span>
<br>
In a module's javascript, you can access that module's name, id, and object representation at runtime through the <span class="inlineCode">document.name</span> and <span class="inlineCode">document.id</span> attributes.
<span class="code">
var moduleName = document.name;<br>
var moduleID = document.id;<br>
var module = document.module
</span>
<br>
<span class="line"></span>
<br>
<span class="subheader">Create a new instance of a module programatically</span>
<br>
You don't have to hard-code every instance of a module. You can programatically generate modules using <span class="inlineCode">modularjs.newModule()</span>.
<span class="code">
// Define the information pertaining to a module<br>
var moduleName = \"section\";<br>
var moduleContent = {<br>
\"header\" : \"This is a header\",<br>
\"body\" : \"This is the body\"<br>
};<br>
<br>
<br>
// Create a new instance of a module<br>
var newModule = modularjs.newModule(moduleName, moduleContent);<br>
<br>
<br>
// Append it to the document body<br>
document.body.appendChild(newModule);
</span>
<span class="inlineCode">modularjs.newModule()</span> accepts two arguments. The first is the name of the module you are creating an instance of, and the second is a JSON that defines the values used by that module.
<br>
<br>
<span class="line"></span>
<br>
<span class="subheader">Schedule functions to be completed once all modules have loaded</span>
<br>
If there are functions that need to be executed once all modules have been loaded, you should push them into <span class="inlineCode">modularjs.doOnceLoaded</span>.
<span class="code">
modularjs.doOnceLoaded.push(<br>
function(){<br>
console.log(\"Finished loading!\");<br>
}<br>
);
</span>"
}
</module>
<script src="js/generateMenu.js"></script>
</body>
</html>