formikation 0.2.7

Sign up to get free protection for your applications and to get access to all the features.
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
@@ -0,0 +1,13 @@
1
+ node_modules
2
+ bower_components
3
+ _site
4
+ .sass-cache
5
+ /.bundle/
6
+ /.yardoc
7
+ /Gemfile.lock
8
+ /_yardoc/
9
+ /coverage/
10
+ /doc/
11
+ /pkg/
12
+ /spec/reports/
13
+ /tmp/
data/CNAME ADDED
@@ -0,0 +1 @@
1
+ vortizhe.me
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in formikation.gemspec
4
+ gemspec
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
@@ -0,0 +1,2 @@
1
+ require "bundler/gem_tasks"
2
+
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="">&nbsp;</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>