formikation 0.2.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +13 -0
- data/CNAME +1 -0
- data/Gemfile +4 -0
- data/Gulpfile.js +122 -0
- data/LICENSE.txt +20 -0
- data/README.md +90 -0
- data/Rakefile +2 -0
- data/demo/index.html +229 -0
- data/demo/ready.js +3 -0
- data/dist/formikation.css +121 -0
- data/dist/formikation.js +254 -0
- data/dist/formikation.min.css +30 -0
- data/dist/formikation.min.js +12 -0
- data/dist/maps/formikation.js.min.map +1 -0
- data/dist/themes/fk-theme-default.css +111 -0
- data/dist/themes/fk-theme-switches.css +79 -0
- data/formikation.gemspec +23 -0
- data/index.html +126 -0
- data/lib/formikation.rb +6 -0
- data/lib/formikation/engine.rb +13 -0
- data/lib/formikation/version.rb +3 -0
- data/package.json +51 -0
- data/src/formikation.js +243 -0
- data/src/formikation.scss +118 -0
- data/src/themes/fk-theme-default.scss +118 -0
- data/src/themes/fk-theme-switches.scss +82 -0
- metadata +99 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: edc4eedb3b0166f9a04607067c4afea8ca3f912e
|
4
|
+
data.tar.gz: e192581a8ce562cbae4320b0597c6f3d9b4ad797
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 767e10b7bb89eb470d789339fd8aa402ddf931c2bc23270312160d192bb55ca39fee91733d1d0a9f4e5ad983a438db150aa595c42d50f11351b4614b10192dc3
|
7
|
+
data.tar.gz: 9152261f2454c47a844535408911baa5c3063b27e9d38165ee9a3797f83e898ad9bf62abaa915cffedb923c7e83a8e75a1e54887749ea60a9dcf2facbd3a5794
|
data/.gitignore
ADDED
data/CNAME
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
vortizhe.me
|
data/Gemfile
ADDED
data/Gulpfile.js
ADDED
@@ -0,0 +1,122 @@
|
|
1
|
+
(function() {
|
2
|
+
'use strict';
|
3
|
+
|
4
|
+
var gulp = require('gulp'),
|
5
|
+
connect = require('gulp-connect'),
|
6
|
+
open = require('gulp-open'),
|
7
|
+
rename = require('gulp-rename'),
|
8
|
+
header = require('gulp-header'),
|
9
|
+
path = require('path'),
|
10
|
+
uglify = require('gulp-uglify'),
|
11
|
+
size = require('gulp-size'),
|
12
|
+
sourcemaps = require('gulp-sourcemaps'),
|
13
|
+
jshint = require('gulp-jshint'),
|
14
|
+
stylish = require('jshint-stylish'),
|
15
|
+
sass = require('gulp-sass'),
|
16
|
+
paths = {
|
17
|
+
scripts: 'src/*.js',
|
18
|
+
styles: 'src/*.scss',
|
19
|
+
dist: 'dist/',
|
20
|
+
demo: 'demo/',
|
21
|
+
themes: 'src/themes/*.scss'
|
22
|
+
},
|
23
|
+
fk = {
|
24
|
+
pkg: require('./package.json'),
|
25
|
+
date: {
|
26
|
+
year: new Date().getFullYear(),
|
27
|
+
month: ('January February March April May June July August September October November December').split(' ')[new Date().getMonth()],
|
28
|
+
day: new Date().getDate()
|
29
|
+
},
|
30
|
+
banner: [
|
31
|
+
'/*!',
|
32
|
+
' * Formikation <%= pkg.version %>',
|
33
|
+
' * <%= pkg.description %>',
|
34
|
+
' *',
|
35
|
+
' * <%= pkg.homepage %>',
|
36
|
+
' *',
|
37
|
+
' * Copyright <%= date.year %>, <%= pkg.author.name %>. Licensed under <%= pkg.license %>.',
|
38
|
+
' *',
|
39
|
+
' * Released on: <%= date.month %> <%= date.day %>, <%= date.year %>',
|
40
|
+
' */',
|
41
|
+
'',''].join('\n')
|
42
|
+
};
|
43
|
+
|
44
|
+
gulp.task('scripts', function() {
|
45
|
+
gulp.src(paths.scripts)
|
46
|
+
.pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
|
47
|
+
.pipe(gulp.dest(paths.dist))
|
48
|
+
.pipe(jshint())
|
49
|
+
.pipe(jshint.reporter(stylish));
|
50
|
+
});
|
51
|
+
|
52
|
+
gulp.task('styles', function() {
|
53
|
+
gulp.src(paths.styles)
|
54
|
+
.pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
|
55
|
+
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
|
56
|
+
.pipe(gulp.dest(paths.dist));
|
57
|
+
|
58
|
+
|
59
|
+
gulp.src(paths.themes)
|
60
|
+
.pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
|
61
|
+
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
|
62
|
+
.pipe(gulp.dest(paths.dist + 'themes/'));
|
63
|
+
|
64
|
+
});
|
65
|
+
|
66
|
+
gulp.task('update_gem_version', function () {
|
67
|
+
require('fs').writeFileSync('lib/Formikation/version.rb', "module Formikation\n VERSION = \""+fk.pkg.version+"\"\nend");
|
68
|
+
});
|
69
|
+
|
70
|
+
gulp.task('build', function () {
|
71
|
+
gulp.src(paths.scripts)
|
72
|
+
.pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
|
73
|
+
.pipe(size({title: 'Formikation scripts'}))
|
74
|
+
.pipe(jshint())
|
75
|
+
.pipe(jshint.reporter(stylish))
|
76
|
+
.pipe(sourcemaps.init())
|
77
|
+
.pipe(uglify({
|
78
|
+
preserveComments: 'some',
|
79
|
+
mangle: true,
|
80
|
+
compress: {
|
81
|
+
sequences: true,
|
82
|
+
dead_code: true,
|
83
|
+
conditionals: true,
|
84
|
+
booleans: true,
|
85
|
+
unused: true,
|
86
|
+
if_return: true,
|
87
|
+
join_vars: true
|
88
|
+
}
|
89
|
+
}))
|
90
|
+
.pipe(size({title: 'Formikation minified scripts' }))
|
91
|
+
.pipe(sourcemaps.write('./maps'))
|
92
|
+
.pipe(rename({ suffix: '.min' }))
|
93
|
+
.pipe(gulp.dest(paths.dist));
|
94
|
+
|
95
|
+
gulp.src(paths.styles)
|
96
|
+
.pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
|
97
|
+
.pipe(sass({outputStyle: 'compact'}))
|
98
|
+
.pipe(rename({ suffix: '.min'}))
|
99
|
+
.pipe(gulp.dest(paths.dist));
|
100
|
+
});
|
101
|
+
|
102
|
+
gulp.task('watch', function () {
|
103
|
+
gulp.watch(paths.scripts, [ 'scripts' ]);
|
104
|
+
gulp.watch([paths.styles, paths.themes], [ 'styles' ]);
|
105
|
+
});
|
106
|
+
|
107
|
+
gulp.task('connect', function () {
|
108
|
+
return connect.server({
|
109
|
+
root: './',
|
110
|
+
port:'3000'
|
111
|
+
});
|
112
|
+
});
|
113
|
+
|
114
|
+
gulp.task('open', function () {
|
115
|
+
return gulp.src(paths.demo + 'index.html').pipe(open({ uri: 'http://localhost:3000/' + paths.demo + 'index.html'}));
|
116
|
+
});
|
117
|
+
gulp.task('dist', ['styles', 'scripts', 'build', 'update_gem_version']);
|
118
|
+
|
119
|
+
gulp.task('server', ['watch', 'connect', 'open']);
|
120
|
+
|
121
|
+
gulp.task('default', ['server']);
|
122
|
+
})();
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2014 Victor Ortiz
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
6
|
+
this software and associated documentation files (the "Software"), to deal in
|
7
|
+
the Software without restriction, including without limitation the rights to
|
8
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
9
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
10
|
+
subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
17
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
18
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
19
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
20
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,90 @@
|
|
1
|
+
# Formikation
|
2
|
+
|
3
|
+
[![GitHub version](https://badge.fury.io/gh/vortizhe%2Fformikation.svg)](https://badge.fury.io/gh/vortizhe%2Fformikation)
|
4
|
+
|
5
|
+
### Simple form beautifier
|
6
|
+
|
7
|
+
*Formikation* is a simple jQuery plugin to beautify form inputs with some css.
|
8
|
+
|
9
|
+
The elements to work with are:
|
10
|
+
|
11
|
+
`input:checkbox`
|
12
|
+
|
13
|
+
`input:radiobutton`
|
14
|
+
|
15
|
+
`input:file`
|
16
|
+
|
17
|
+
`select`
|
18
|
+
|
19
|
+
### Demo
|
20
|
+
|
21
|
+
Take a look to [online demo](http://vortizhe.me/formikation/examples.html), there are some examples with diferent themes.
|
22
|
+
|
23
|
+
## HTML Requisites
|
24
|
+
|
25
|
+
The only html requisite is to style radiobuttons and checkboxes. Them must be wrapped by a `label`
|
26
|
+
|
27
|
+
```html
|
28
|
+
<label>
|
29
|
+
<input type="checkbox" name="check" id="check">
|
30
|
+
Checkbox label
|
31
|
+
</label>
|
32
|
+
|
33
|
+
<label>
|
34
|
+
<input type="radio" name="radio" id="radio">
|
35
|
+
Radio label
|
36
|
+
</label>
|
37
|
+
```
|
38
|
+
|
39
|
+
## Utility CSS
|
40
|
+
|
41
|
+
Formikation comes with a utility CSS that includes the neccessary CSS styles to work, without any visual styles on it. To add the utility CSS styles, add the `.formikation` class to yout form element this way:
|
42
|
+
|
43
|
+
```html
|
44
|
+
<form action="/" class="formikation" >
|
45
|
+
...
|
46
|
+
```
|
47
|
+
|
48
|
+
## Themes
|
49
|
+
|
50
|
+
The visual styling of the formikation elements comes in an independet stylesheet, to keep separated the visual representation from the _utility_ classes. Two themes are included in the repository `.fk-theme-default` and `.fk-theme-switches`.
|
51
|
+
|
52
|
+
Include the `.fk-theme-default` class on the parent element along the base `.formikation` class, this way:
|
53
|
+
|
54
|
+
```html
|
55
|
+
<form action="/" class="formikation fk-theme-default" >
|
56
|
+
...
|
57
|
+
```
|
58
|
+
|
59
|
+
If you want to develop your own theme, take a look to `src/themes/fk-theme-default.scss` and use it as base to do your own customization.
|
60
|
+
|
61
|
+
|
62
|
+
## Initialization
|
63
|
+
|
64
|
+
Call Formikation jQuery plugin on ready function:
|
65
|
+
|
66
|
+
```js
|
67
|
+
$(function() {
|
68
|
+
|
69
|
+
$('form.formikation').find('select, input:file, input:checkbox, input:radio').formikation();
|
70
|
+
|
71
|
+
});
|
72
|
+
```
|
73
|
+
|
74
|
+
## Update elements with JS
|
75
|
+
|
76
|
+
If you need to update any formikation element with js, it’s necessary to trigger formikation.update event to get UI change reflected.
|
77
|
+
```js
|
78
|
+
// Active a checkbox
|
79
|
+
$('.form-element').prop('checked', true).trigger('formikation.update');
|
80
|
+
```
|
81
|
+
|
82
|
+
## IE8
|
83
|
+
|
84
|
+
IE8 has some dificults on repainting `:before` and `:after` pseudo-elements after change checkbox or radiobuttons status.
|
85
|
+
|
86
|
+
Is simple to fix it, just change pseudo-element content from `''` to `' '` _(this fix is applied on default theme)_.
|
87
|
+
|
88
|
+
## Changelog
|
89
|
+
|
90
|
+
* 0.2.6 (2016/05/XX) Added .fk-is-placeholder to select option without value
|
data/Rakefile
ADDED
data/demo/index.html
ADDED
@@ -0,0 +1,229 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="en">
|
3
|
+
<head>
|
4
|
+
<meta charset="UTF-8">
|
5
|
+
<title>Formikation default theme sample.</title>
|
6
|
+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"/>
|
7
|
+
<link rel="stylesheet" href="../dist/formikation.css"/>
|
8
|
+
<link rel="stylesheet" href="../dist/themes/fk-theme-default.css"/>
|
9
|
+
<link rel="stylesheet" href="../dist/themes/fk-theme-switches.css"/>
|
10
|
+
<style media="screen">
|
11
|
+
body {
|
12
|
+
padding: 0 20px;
|
13
|
+
}
|
14
|
+
*, *:after, *:before {
|
15
|
+
-webkit-box-sizing: border-box;
|
16
|
+
-moz-box-sizing: border-box;
|
17
|
+
box-sizing: border-box;
|
18
|
+
}
|
19
|
+
.row {
|
20
|
+
margin: 1em 0;
|
21
|
+
}
|
22
|
+
form {
|
23
|
+
width: 50%;
|
24
|
+
float: left;
|
25
|
+
padding-right: 20px;
|
26
|
+
}
|
27
|
+
.formikation label {
|
28
|
+
margin: 0 0 1em;
|
29
|
+
}
|
30
|
+
</style>
|
31
|
+
</head>
|
32
|
+
|
33
|
+
<body>
|
34
|
+
<h1>Formikation demo</h1>
|
35
|
+
<form action="./" class="formikation fk-theme-default">
|
36
|
+
<h2>Default theme</h2>
|
37
|
+
<div class="row">
|
38
|
+
<label for="example-select">Select example</label>
|
39
|
+
<select id="example-select" name="example-select">
|
40
|
+
<option>Select an option</option>
|
41
|
+
<option value="1">Option 1</option>
|
42
|
+
<option value="2">Option 2</option>
|
43
|
+
<option value="3">Option 3</option>
|
44
|
+
<option value="4">Option 4</option>
|
45
|
+
<option value="5">Option 5</option>
|
46
|
+
<option value="6">Option 6</option>
|
47
|
+
</select>
|
48
|
+
</div>
|
49
|
+
<div class="row">
|
50
|
+
<label for="example-select">Select with blank option example</label>
|
51
|
+
<select id="example-select" name="example-select">
|
52
|
+
<option value=""> </option>
|
53
|
+
<option value="1">Option 1</option>
|
54
|
+
<option value="2">Option 2</option>
|
55
|
+
<option value="3">Option 3</option>
|
56
|
+
</select>
|
57
|
+
</div>
|
58
|
+
|
59
|
+
<div class="row">
|
60
|
+
<label for="example-select-disabled">Select disabled example</label>
|
61
|
+
<select id="example-select-disabled" name="example-select-disabled" disabled>
|
62
|
+
<option>Select an option</option>
|
63
|
+
<option value="1">Option 1</option>
|
64
|
+
<option value="2">Option 2</option>
|
65
|
+
<option value="3">Option 3</option>
|
66
|
+
<option value="4">Option 4</option>
|
67
|
+
<option value="5">Option 5</option>
|
68
|
+
<option value="6">Option 6</option>
|
69
|
+
</select>
|
70
|
+
</div>
|
71
|
+
|
72
|
+
<div class="row">
|
73
|
+
<label for="example-file-input">File input example</label>
|
74
|
+
<input type="file" name="example-file-input" id="example-file-input" data-text="Select file...">
|
75
|
+
</div>
|
76
|
+
|
77
|
+
<div class="row">
|
78
|
+
<label for="example-file-input">File input disabled example</label>
|
79
|
+
<input type="file" name="example-file-input" id="example-file-input" data-text="Select file disabled..." disabled>
|
80
|
+
</div>
|
81
|
+
|
82
|
+
<div class="row">
|
83
|
+
<label>
|
84
|
+
<input type="radio" name="example-radios" value="1">
|
85
|
+
Radio example
|
86
|
+
</label>
|
87
|
+
<label>
|
88
|
+
<input type="radio" name="example-radios" value="2" checked="checked">
|
89
|
+
Radio checked
|
90
|
+
</label>
|
91
|
+
<label>
|
92
|
+
<input type="radio" name="example-radios" value="3" disabled>
|
93
|
+
Radio disabled
|
94
|
+
</label>
|
95
|
+
</div>
|
96
|
+
|
97
|
+
<div class="row">
|
98
|
+
<label>
|
99
|
+
<input name="example-checkbox-1" type="checkbox" value="1">
|
100
|
+
Checkbox example
|
101
|
+
</label>
|
102
|
+
<label>
|
103
|
+
<input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
|
104
|
+
Checkbox checked
|
105
|
+
</label>
|
106
|
+
<label>
|
107
|
+
<input name="example-checkbox-3" type="checkbox" value="3" disabled>
|
108
|
+
Checkbox disabled
|
109
|
+
</label>
|
110
|
+
</div>
|
111
|
+
|
112
|
+
<div class="fk-theme-switches">
|
113
|
+
<h2>Switches radio and checkboxes theme</h2>
|
114
|
+
<div class="row">
|
115
|
+
<label>
|
116
|
+
<input type="radio" name="example-radios-2" value="1">
|
117
|
+
Radio example
|
118
|
+
</label>
|
119
|
+
<label>
|
120
|
+
<input type="radio" name="example-radios-2" value="2" checked="checked">
|
121
|
+
Radio checked
|
122
|
+
</label>
|
123
|
+
<label>
|
124
|
+
<input type="radio" name="example-radios-2" value="3" disabled>
|
125
|
+
Radio disabled
|
126
|
+
</label>
|
127
|
+
</div>
|
128
|
+
|
129
|
+
<div class="row">
|
130
|
+
<label>
|
131
|
+
<input name="example-checkbox-1" type="checkbox" value="1">
|
132
|
+
Checkbox example
|
133
|
+
</label>
|
134
|
+
<label>
|
135
|
+
<input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
|
136
|
+
Checkbox checked
|
137
|
+
</label>
|
138
|
+
<label>
|
139
|
+
<input name="example-checkbox-3" type="checkbox" value="3" disabled>
|
140
|
+
Checkbox disabled
|
141
|
+
</label>
|
142
|
+
</div>
|
143
|
+
</div>
|
144
|
+
</form>
|
145
|
+
|
146
|
+
<form action="./" class="formikation">
|
147
|
+
<h2>Only functional styles</h2>
|
148
|
+
<div class="row">
|
149
|
+
<label for="example-select">Select example</label>
|
150
|
+
<select id="example-select" name="example-select">
|
151
|
+
<option value="1">Select an option</option>
|
152
|
+
<option value="2">Option 1</option>
|
153
|
+
<option value="3">Option 2</option>
|
154
|
+
<option value="4">Option 3</option>
|
155
|
+
<option value="5">Option 4</option>
|
156
|
+
<option value="6">Option 5</option>
|
157
|
+
<option value="7">Option 6</option>
|
158
|
+
</select>
|
159
|
+
</div>
|
160
|
+
<div class="row">
|
161
|
+
<label for="example-select">Select with blank option example</label>
|
162
|
+
<select id="example-select" name="example-select">
|
163
|
+
<option value="1"></option>
|
164
|
+
<option value="2">Option 1</option>
|
165
|
+
<option value="3">Option 2</option>
|
166
|
+
<option value="4">Option 3</option>
|
167
|
+
</select>
|
168
|
+
</div>
|
169
|
+
|
170
|
+
<div class="row">
|
171
|
+
<label for="example-select-disabled">Select disabled example</label>
|
172
|
+
<select id="example-select-disabled" name="example-select-disabled" disabled>
|
173
|
+
<option value="1">Select an option</option>
|
174
|
+
<option value="2">Option 1</option>
|
175
|
+
<option value="3">Option 2</option>
|
176
|
+
<option value="4">Option 3</option>
|
177
|
+
<option value="5">Option 4</option>
|
178
|
+
<option value="6">Option 5</option>
|
179
|
+
<option value="7">Option 6</option>
|
180
|
+
</select>
|
181
|
+
</div>
|
182
|
+
|
183
|
+
<div class="row">
|
184
|
+
<label for="example-file-input">File input example</label>
|
185
|
+
<input type="file" name="example-file-input" id="example-file-input" data-text="Select file...">
|
186
|
+
</div>
|
187
|
+
|
188
|
+
<div class="row">
|
189
|
+
<label for="example-file-input">File input disabled example</label>
|
190
|
+
<input type="file" name="example-file-input" id="example-file-input" data-text="Select file disabled..." disabled>
|
191
|
+
</div>
|
192
|
+
|
193
|
+
<div class="row">
|
194
|
+
<label>
|
195
|
+
<input type="radio" name="example-radios-3" value="1">
|
196
|
+
Radio example
|
197
|
+
</label>
|
198
|
+
<label>
|
199
|
+
<input type="radio" name="example-radios-3" value="2" checked="checked">
|
200
|
+
Radio checked
|
201
|
+
</label>
|
202
|
+
<label>
|
203
|
+
<input type="radio" name="example-radios-3" value="3" disabled>
|
204
|
+
Radio disabled
|
205
|
+
</label>
|
206
|
+
</div>
|
207
|
+
|
208
|
+
<div class="row">
|
209
|
+
<label>
|
210
|
+
<input name="example-checkbox-1" type="checkbox" value="1">
|
211
|
+
Checkbox example
|
212
|
+
</label>
|
213
|
+
<label>
|
214
|
+
<input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
|
215
|
+
Checkbox checked
|
216
|
+
</label>
|
217
|
+
<label>
|
218
|
+
<input name="example-checkbox-3" type="checkbox" value="3" disabled>
|
219
|
+
Checkbox disabled
|
220
|
+
</label>
|
221
|
+
</div>
|
222
|
+
</form>
|
223
|
+
|
224
|
+
|
225
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
226
|
+
<script src="../src/formikation.js"></script>
|
227
|
+
<script src="./ready.js"></script>
|
228
|
+
</body>
|
229
|
+
</html>
|