Skip to content
This repository was archived by the owner on May 27, 2024. It is now read-only.

Commit a2f8781

Browse files
chrishumboldtchrishumboldt
authored
Merge pull request #68 from chrishumboldt/dev-rocket
Dev rocket
2 parents abf4104 + 0e38f45 commit a2f8781

24 files changed

+737
-1640
lines changed

‎README.md

Lines changed: 95 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@ A universal form module.
44
* [Getting Started](#getting-started)
55
* [Basic Example](#basic-example)
66
* [Initialization](#initialization)
7-
* [Options](#options)
8-
* [Defaults](#defaults)
7+
* [Options](#options)
8+
* [Defaults](#defaults)
99
* [HTML Examples](#html-examples)
10+
* [Basic Inputs](#basic-inputs)
11+
* [Text Area](#text-area)
12+
* [Checkboxes](#checkboxes)
13+
* [Toggler](#toggler)
14+
* [Radio Buttons](#radio-buttons)
15+
* [Select Element](#select-element)
1016
* [Formplate Deprecated](#formplate-deprecated)
1117

1218
## Getting Started
@@ -16,7 +22,7 @@ Install via NPM.
1622
npm install rocket-form
1723
```
1824

19-
**NOTE** that this module has a dependency [Rocket Tools (21kb)](https://github.com/chrishumboldt/Rocket-Tools) which will automatically be installed as well.
25+
**NOTE** that this module has a dependency [Rocket Tools (28kb)](https://github.com/chrishumboldt/Rocket-Tools) which will automatically be installed as well.
2026

2127
Start by including the necessary files.
2228

@@ -25,7 +31,7 @@ Start by including the necessary files.
2531
<link href="node_modules/rocket-form/css/form.min.css" rel="stylesheet" type="text/css">
2632
</head>
2733
<body>
28-
/* Your content goes here */
34+
<!-- Your content goes here -->
2935
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
3036
<script src="node_modules/rocket-form/js/form.min.js"></script>
3137
</body>
@@ -35,52 +41,38 @@ Start by including the necessary files.
3541
You will need to wrap your form elements with an identifier of your choice. Below is an example of executing the module complete with required HTML and Javascript.
3642

3743
```html
38-
<div class="form-element">
44+
<div class="mod-form">
3945
<label for="input-example">Example Label<label>
40-
<input id="input-example" type="text" placeholder="Example Input">
46+
<input id="input-example" type="text">
4147
</div>
4248

4349
<script>
44-
Rocket.form({
45-
target: '.form-elements',
46-
style: 'raised'
47-
});
50+
Rocket.form();
4851
</script>
4952
```
5053

5154
## Initialization
52-
Each initialization will return an array of module objects (An array will always be returned even if the target is an id). This includes the form element itself as well as relevant methods. For example:
53-
54-
```javascript
55-
var forms = Rocket.form();
56-
57-
// The form elements and all methods
58-
for (var i = 0, len = forms.length; i < len; i++) {
59-
console.log(forms[i].form);
60-
forms[i].clear(); // Clear the value. Works on text inputs and textareas.
61-
forms[i].toggle('on'); // Toggle the form element to "on". Works on radio and checkboxes.
62-
forms[i].toggle('off');
63-
}
64-
```
65-
66-
Alternatively if you know the target is unique you can reference the form element right away with the 0 index. For example:
67-
68-
```javascript
69-
var form = Rocket.form({
70-
target: '#form-element'
71-
})[0]; // Reference the first item in the array right away.
72-
```
55+
Each initialization will bind to new form targets but will overlook existing ones. However existing form targets will have the state updated.
7356

7457
#### Options
7558
See the different options you have available on initialization.
7659

7760
Name | Default | Options | Description
7861
---- | ---- | ---- | ----
79-
`target` | `.form` | | Set the HTML target.
62+
`targets` | `.mod-form` | | Set the HTML target.
8063
`colour` | `blue` | `grey` `black` `white` `aqua` `blue` `green` `orange` `pink` `purple` `red` `grey-blue` | Set the colour of the form elements.
8164
`label` | `normal` | `normal` `shift` | Set an animation on the form label.
8265
`style` | `line` | `flat` `line` `raised` | Set the style of the form elements.
8366

67+
```javascript
68+
Rocket.form({
69+
targets: '.form-element',
70+
colour: 'red',
71+
label: 'shift',
72+
style: 'raised'
73+
});
74+
```
75+
8476
#### Defaults
8577
You can also overwrite the module options globally by altering the Rocket defaults. To do so reference the defaults object property, for example:
8678

@@ -90,98 +82,94 @@ Rocket.defaults.form.colour = 'green';
9082
```
9183

9284
## HTML Examples
85+
There are a variety of unique form elements with each being viable targets. See an example of each below:
86+
87+
#### Basic Inputs
9388
```html
94-
<div class="form">
95-
<label for="text-1">Text Label</label>
96-
<input type="text" id="text-1" placeholder="Text input">
97-
</div>
98-
<div class="form">
99-
<label for="password-1">Password Label</label>
100-
<input type="password" id="password-1" placeholder="Password input">
89+
<!-- Regular input (applies to text, email, search etc...) -->
90+
<div class="mod-form">
91+
<label for="text-1">Text Field</label>
92+
<input id="text-1" type="text">
10193
</div>
102-
<div class="form">
103-
<label for="textarea-1">Textarea Label</label>
104-
<textarea id="textarea-1" placeholder="Textarea"></textarea>
94+
95+
<!-- Password input -->
96+
<div class="mod-form">
97+
<label for="password-1">Password Field</label>
98+
<input id="password-1" type="password">
10599
</div>
106-
<div class="form">
107-
<label for="text-2">Input Icon</label>
108-
<div class="input-icon">
100+
101+
<!-- With icon -->
102+
<div class="mod-form">
103+
<label for="text-2">Text Field</label>
104+
<div class="mod-form-icon">
109105
<i class="fa fa-cog"></i>
110-
<input type="text" id="text-2" placeholder="Text input">
106+
<input id="text-2" type="text">
111107
</div>
112108
</div>
109+
```
113110

114-
<!-- Drop-down -->
115-
<div class="form">
116-
<select>
117-
<option value="1">Select Option 1</option>
118-
<option value="2">Select Option 2</option>
119-
<option value="3">Select Option 3</option>
120-
</select>
111+
#### Text Area
112+
```html
113+
<div class="mod-form">
114+
<label for="textarea-1">Text Area</label>
115+
<textarea id="textarea-1"></textarea>
121116
</div>
117+
```
122118

123-
<!-- Checkboxes -->
124-
<div class="form">
125-
<input type="checkbox" id="checkbox-1" checked="checked">
126-
<label for="checkbox-1">Checkbox 1</label>
127-
</div>
128-
<div class="form">
129-
<input type="checkbox" id="checkbox-2">
130-
<label for="checkbox-2">Checkbox 2</label>
131-
</div>
132-
<div class="form">
133-
<input type="checkbox" id="checkbox-3">
134-
<label for="checkbox-3">Checkbox 3</label>
135-
</div>
119+
#### Checkboxes
120+
In this example the only difference to basic inputs is the oder of the elements and the type. Although it is not 100% necessary to change the order, it is good practice.
136121

137-
<!-- Toggler -->
138-
<div class="form">
139-
<input type="checkbox" class="toggler">
140-
<span class="handle"></span>
122+
```html
123+
<div class="mod-form">
124+
<input id="check-1" type="checkbox">
125+
<label for="check-1">Checkbox 1</label>
141126
</div>
142127

143-
<!-- Radio Inputs -->
144-
<div class="form">
145-
<input type="radio" id="radio-1" name="radio-selection" value="1" checked="checked">
146-
<label for="radio-1">Radio Selection</label>
128+
<!-- Checked example -->
129+
<div class="mod-form">
130+
<input id="check-2" type="checkbox" checked="checked">
131+
<label for="check-2">Checkbox 2</label>
147132
</div>
148-
<div class="form">
149-
<input type="radio" id="radio-2" name="radio-selection" value="2">
150-
<label for="radio-2">Radio Selection</label>
133+
```
134+
135+
#### Toggler
136+
A toggler is a special modifier made to a checkbox. It just looks cool.
137+
138+
```html
139+
<div class="mod-form">
140+
<input type="checkbox" class="_mod-make-toggler">
151141
</div>
152-
<div class="form">
153-
<input type="radio" id="radio-3" name="radio-selection" value="3">
154-
<label for="radio-3">Radio Selection</label>
142+
```
143+
144+
#### Radio Buttons
145+
Radio buttons have the same element order as checkboxes.
146+
147+
```html
148+
<div class="mod-form">
149+
<input id="radio-1" type="radio" name="radio-option" checked="checked">
150+
<label for="radio-1">Radio Option</label>
155151
</div>
156152

157-
<!-- Input Group -->
158-
<div class="form">
159-
<label for="text-3">Two</label>
160-
<div class="input-group-two">
161-
<input type="text" id="text-3" placeholder="Text input">
162-
<input type="text" id="text-4" placeholder="Text input">
163-
</div>
153+
<div class="mod-form">
154+
<input id="radio-2" type="radio" name="radio-option">
155+
<label for="radio-2">Radio Option</label>
164156
</div>
165-
<div class="form">
166-
<label for="text-5">Three</label>
167-
<div class="input-group-three">
168-
<input type="text" id="text-5" placeholder="Text input">
169-
<input type="text" id="text-6" placeholder="Text input">
170-
<input type="text" id="text-7" placeholder="Text input">
171-
</div>
157+
158+
<div class="mod-form">
159+
<input id="radio-3" type="radio" name="radio-option">
160+
<label for="radio-3">Radio Option</label>
172161
</div>
173-
<div class="form">
174-
<label for="text-8">Two With Icon</label>
175-
<div class="input-group-two">
176-
<div class="input-icon">
177-
<i class="fa fa-cog"></i>
178-
<input type="text" id="text-8" placeholder="Text input">
179-
</div>
180-
<div class="input-icon">
181-
<i class="fa fa-cog"></i>
182-
<input type="text" id="text-9" placeholder="Text input">
183-
</div>
184-
</div>
162+
```
163+
164+
#### Select Element
165+
166+
```html
167+
<div class="mod-form">
168+
<select>
169+
<option>Select Option 1</option>
170+
<option>Select Option 2</option>
171+
<option>Select Option 3</option>
172+
</select>
185173
</div>
186174
```
187175

@@ -195,7 +183,7 @@ Twitter: <a href="https://twitter.com/chrishumboldt">twitter.com/chrishumboldt</
195183
GitHub <a href="https://github.com/chrishumboldt">github.com/chrishumboldt</a><br>
196184

197185
## Copyright and License
198-
Copyright 2017 Rocket Project
186+
Copyright 2018 Rocket Project
199187

200188
Licensed under the Apache License, Version 2.0 (the "License");
201189
you may not use this file except in compliance with the License.

0 commit comments

Comments
 (0)