formikation 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Formikation 0.2.7
|
|
3
|
+
* Formikation is a simple jQuery plugin to beautify form inputs with some css.
|
|
4
|
+
*
|
|
5
|
+
* https://github.com/vortizhe/formikation
|
|
6
|
+
*
|
|
7
|
+
* Copyright 2016, Victor Ortiz. Licensed under MIT.
|
|
8
|
+
*
|
|
9
|
+
* Released on: July 12, 2016
|
|
10
|
+
*/
|
|
11
|
+
.fk-theme-switches label.fk-radio:before, .fk-theme-switches label.fk-check:before {
|
|
12
|
+
content: ' ';
|
|
13
|
+
width: 48px;
|
|
14
|
+
height: 20px;
|
|
15
|
+
background: #CDCDCD;
|
|
16
|
+
border: 1px solid #b4b4b4;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.fk-theme-switches label.fk-radio:after, .fk-theme-switches label.fk-check:after {
|
|
20
|
+
content: ' ';
|
|
21
|
+
width: 20px;
|
|
22
|
+
height: 20px;
|
|
23
|
+
top: -2px;
|
|
24
|
+
background: #FFF;
|
|
25
|
+
border: 1px solid #b4b4b4;
|
|
26
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
|
27
|
+
-webkit-transition: all 0.3s ease;
|
|
28
|
+
-o-transition: all 0.3s ease;
|
|
29
|
+
transition: all 0.3s ease;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.fk-theme-switches label.fk-radio:before {
|
|
33
|
+
width: 32px;
|
|
34
|
+
border-radius: 20px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.fk-theme-switches label.fk-radio:after {
|
|
38
|
+
border-radius: 20px;
|
|
39
|
+
left: 12px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.fk-theme-switches label.fk-check:before {
|
|
43
|
+
content: 'OFF';
|
|
44
|
+
padding-right: 18px;
|
|
45
|
+
color: #FFF;
|
|
46
|
+
font-size: 11px;
|
|
47
|
+
text-align: center;
|
|
48
|
+
line-height: 20px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.fk-theme-switches label.fk-check:after {
|
|
52
|
+
left: 28px;
|
|
53
|
+
background: #FFF;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.fk-theme-switches label.checked.fk-radio:before {
|
|
57
|
+
background: #2f97e9;
|
|
58
|
+
border-color: #2f97e9;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.fk-theme-switches label.checked.fk-radio:after {
|
|
62
|
+
left: 0;
|
|
63
|
+
border-color: #2f97e9;
|
|
64
|
+
background: #FFF;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.fk-theme-switches label.checked.fk-check:before {
|
|
68
|
+
content: 'ON';
|
|
69
|
+
background: #2f97e9;
|
|
70
|
+
border-color: #2f97e9;
|
|
71
|
+
padding-right: 0;
|
|
72
|
+
padding-left: 18px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.fk-theme-switches label.checked.fk-check:after {
|
|
76
|
+
left: 0;
|
|
77
|
+
border-color: #2f97e9;
|
|
78
|
+
background: #FFF;
|
|
79
|
+
}
|
data/formikation.gemspec
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# coding: utf-8
|
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
4
|
+
require 'formikation/version'
|
|
5
|
+
|
|
6
|
+
Gem::Specification.new do |spec|
|
|
7
|
+
spec.name = "formikation"
|
|
8
|
+
spec.version = Formikation::VERSION
|
|
9
|
+
spec.authors = ["vortizhe"]
|
|
10
|
+
spec.email = ["kespers@gmail.com"]
|
|
11
|
+
spec.summary = "Formikation is a simple jQuery plugin to beautify form inputs with some css."
|
|
12
|
+
spec.description = "Formikation is a simple jQuery plugin to beautify form inputs, select, radios and checkboxes with some css. It supports custom theming and is IE8+ compatible."
|
|
13
|
+
spec.homepage = "http://vortizhe.me/formikation/"
|
|
14
|
+
spec.license = "MIT"
|
|
15
|
+
|
|
16
|
+
spec.files = `git ls-files -z`.split("\x0")
|
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
|
19
|
+
spec.require_paths = ["lib"]
|
|
20
|
+
|
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.7"
|
|
22
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
|
23
|
+
end
|
data/index.html
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
3
|
+
<!--[if IE 7 ]><html lang="es-ES" class="ie7"> <![endif]-->
|
|
4
|
+
<!--[if IE 8 ]><html lang="es-ES" class="ie8"><![endif]-->
|
|
5
|
+
<!--[if IE 9 ]><html lang="es-ES" class="ie9"><![endif]-->
|
|
6
|
+
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
10
|
+
|
|
11
|
+
<title>Formikation test</title>
|
|
12
|
+
|
|
13
|
+
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
|
|
14
|
+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"/>
|
|
15
|
+
<link rel="stylesheet" href="./dist/formikation.css">
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
// Demo styles
|
|
20
|
+
* {
|
|
21
|
+
-webkit-box-sizing: border-box;
|
|
22
|
+
-moz-box-sizing: border-box;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
padding: 20px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
form {
|
|
31
|
+
max-width: 650px;
|
|
32
|
+
margin-right: 20px;
|
|
33
|
+
padding: 0;
|
|
34
|
+
float: left;
|
|
35
|
+
}
|
|
36
|
+
.row {
|
|
37
|
+
margin-bottom: 1em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
</style>
|
|
41
|
+
|
|
42
|
+
</head>
|
|
43
|
+
<body>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<form action="./" class="formikation">
|
|
47
|
+
<h1>Basic clean styles</h1>
|
|
48
|
+
<div class="row">
|
|
49
|
+
<label for="example-select">Select example</label>
|
|
50
|
+
<select id="example-select" name="example-select">
|
|
51
|
+
<option>Select an option</option>
|
|
52
|
+
<option value="1">Option 1</option>
|
|
53
|
+
<option value="2">Option 2</option>
|
|
54
|
+
<option value="3">Option 3</option>
|
|
55
|
+
<option value="4">Option 4</option>
|
|
56
|
+
<option value="5">Option 5</option>
|
|
57
|
+
<option value="6">Option 6</option>
|
|
58
|
+
</select>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="row">
|
|
62
|
+
<label for="example-select-disabled">Select disabled example</label>
|
|
63
|
+
<select id="example-select-disabled" name="example-select-disabled" disabled>
|
|
64
|
+
<option value="">Select an option</option>
|
|
65
|
+
<option value="1">Option 1</option>
|
|
66
|
+
<option value="2">Option 2</option>
|
|
67
|
+
<option value="3">Option 3</option>
|
|
68
|
+
<option value="4">Option 4</option>
|
|
69
|
+
<option value="5">Option 5</option>
|
|
70
|
+
<option value="6">Option 6</option>
|
|
71
|
+
</select>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="row">
|
|
75
|
+
<label for="example-file-input">File input example</label>
|
|
76
|
+
<input type="file" name="example-file-input" id="example-file-input">
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="row">
|
|
80
|
+
<label for="example-file-input">File input disabled example</label>
|
|
81
|
+
<input type="file" name="example-file-input" id="example-file-input" disabled>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div class="row">
|
|
85
|
+
<label>
|
|
86
|
+
<input type="radio" name="example-radios" value="1">
|
|
87
|
+
Radio example
|
|
88
|
+
</label>
|
|
89
|
+
<label>
|
|
90
|
+
<input type="radio" name="example-radios" value="2" checked="checked">
|
|
91
|
+
Radio checked
|
|
92
|
+
</label>
|
|
93
|
+
<label>
|
|
94
|
+
<input type="radio" name="example-radios" value="3" disabled>
|
|
95
|
+
Radio disabled
|
|
96
|
+
</label>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="row">
|
|
100
|
+
<label>
|
|
101
|
+
<input name="example-checkbox-1" type="checkbox" value="1">
|
|
102
|
+
Checkbox example
|
|
103
|
+
</label>
|
|
104
|
+
<label>
|
|
105
|
+
<input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
|
|
106
|
+
Checkbox checked
|
|
107
|
+
</label>
|
|
108
|
+
<label>
|
|
109
|
+
<input name="example-checkbox-3" type="checkbox" value="3" disabled>
|
|
110
|
+
Checkbox disabled
|
|
111
|
+
</label>
|
|
112
|
+
</label>
|
|
113
|
+
</div>
|
|
114
|
+
</form>
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
118
|
+
<script src="./dist/jquery.formikation.js"></script>
|
|
119
|
+
|
|
120
|
+
<script type="text/javascript">
|
|
121
|
+
$(function() {
|
|
122
|
+
$('.formikation').find('input, select, file').formikation();
|
|
123
|
+
});
|
|
124
|
+
</script>
|
|
125
|
+
</body>
|
|
126
|
+
</html>
|
data/lib/formikation.rb
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
module Formikation
|
|
2
|
+
module Rails
|
|
3
|
+
class Engine < ::Rails::Engine
|
|
4
|
+
initializer 'formikation' do | app |
|
|
5
|
+
formikation_path = File.expand_path("../../../dist", __FILE__)
|
|
6
|
+
app.config.assets.paths << formikation_path
|
|
7
|
+
formikation_themes_path = File.expand_path("../../../dist/themes", __FILE__)
|
|
8
|
+
app.config.assets.paths << formikation_themes_path
|
|
9
|
+
app.middleware.use ::ActionDispatch::Static, "#{root}/dist"
|
|
10
|
+
end
|
|
11
|
+
end
|
|
12
|
+
end
|
|
13
|
+
end
|
data/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Formikation",
|
|
3
|
+
"version": "0.2.7",
|
|
4
|
+
"description": "Formikation is a simple jQuery plugin to beautify form inputs with some css.",
|
|
5
|
+
"keywords": ["jquery-plugin", "forms", "custom form", "checkbox", "radiobutton", "select", "file"],
|
|
6
|
+
"homepage": "https://github.com/vortizhe/formikation",
|
|
7
|
+
"author": {
|
|
8
|
+
"name": "Victor Ortiz",
|
|
9
|
+
"email": "kespers@gmail.com",
|
|
10
|
+
"url": "https://github.com/vortizhe"
|
|
11
|
+
},
|
|
12
|
+
"contributors": {
|
|
13
|
+
"name": "Carlos Cabo",
|
|
14
|
+
"email": "carloscabo@gmail.com",
|
|
15
|
+
"url": "https://github.com/carloscabo"
|
|
16
|
+
},
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/vortizhe/formikation.git"
|
|
20
|
+
},
|
|
21
|
+
"license": ["MIT"],
|
|
22
|
+
"files": [
|
|
23
|
+
"dist",
|
|
24
|
+
"src",
|
|
25
|
+
"*.json",
|
|
26
|
+
"*.js",
|
|
27
|
+
".css"
|
|
28
|
+
],
|
|
29
|
+
"engines": {
|
|
30
|
+
"node": ">= 0.10.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"gulp": "~3.9.0",
|
|
34
|
+
"gulp-connect": "^2.2.0",
|
|
35
|
+
"gulp-header": "~1.7.1",
|
|
36
|
+
"gulp-jshint": "~2.0.0",
|
|
37
|
+
"gulp-open": "^1.0.0",
|
|
38
|
+
"gulp-rename": "~1.2.2",
|
|
39
|
+
"gulp-sass": "~2.1.0",
|
|
40
|
+
"gulp-size": "^2.0.0",
|
|
41
|
+
"gulp-sourcemaps": "~1.6.0",
|
|
42
|
+
"gulp-uglify": "~1.5.1",
|
|
43
|
+
"jshint": "~2.8.0",
|
|
44
|
+
"jshint-stylish": "~2.1.0"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"test": "gulp dist"
|
|
48
|
+
},
|
|
49
|
+
"main": "dist/jquery.formikation.js",
|
|
50
|
+
"style": "dist/mqbe.css"
|
|
51
|
+
}
|
data/src/formikation.js
ADDED
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
formikation = {
|
|
2
|
+
|
|
3
|
+
// Internal variables / DOM caching / etc.
|
|
4
|
+
dat: {
|
|
5
|
+
els: null // elements
|
|
6
|
+
},
|
|
7
|
+
|
|
8
|
+
// Default settings / params
|
|
9
|
+
defaults: {
|
|
10
|
+
mapClass: true,
|
|
11
|
+
mapStyle: true
|
|
12
|
+
},
|
|
13
|
+
|
|
14
|
+
// Aquí se inicializa el tema de verdad
|
|
15
|
+
init: function(params) {
|
|
16
|
+
|
|
17
|
+
// filter out <= IE6
|
|
18
|
+
if (typeof document.body.style.maxHeight === 'undefined') {
|
|
19
|
+
return this;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Merge the params to default
|
|
23
|
+
this.defaults = $.extend(this.defaults, params);
|
|
24
|
+
|
|
25
|
+
// Process elements in collection
|
|
26
|
+
this.dat.els.each( function(idx) {
|
|
27
|
+
// Check / radio
|
|
28
|
+
if ($(this).is(':checkbox, :radio')) {
|
|
29
|
+
formikation.processRadioCheck(this);
|
|
30
|
+
// Select
|
|
31
|
+
} else if ($(this).is('select')) {
|
|
32
|
+
formikation.processSelects(this);
|
|
33
|
+
// File input
|
|
34
|
+
} else if ($(this).is('input:file')) {
|
|
35
|
+
formikation.processInputFile(this);
|
|
36
|
+
// Nor to be processed
|
|
37
|
+
} else {
|
|
38
|
+
// Do nothing?
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
// Aquí se procesan los checks
|
|
44
|
+
processRadioCheck: function(el) {
|
|
45
|
+
var $el = $(el),
|
|
46
|
+
$label = $el.closest('label');
|
|
47
|
+
|
|
48
|
+
// Add class with sprite
|
|
49
|
+
if ($el.is(':checkbox')) {
|
|
50
|
+
$label.addClass('fk-check');
|
|
51
|
+
} else {
|
|
52
|
+
$label.addClass('fk-radio');
|
|
53
|
+
}
|
|
54
|
+
if (this.defaults.mapClass) {
|
|
55
|
+
$label.addClass($el.attr('class'));
|
|
56
|
+
}
|
|
57
|
+
if (this.defaults.mapStyle) {
|
|
58
|
+
$label.attr('style', $el.attr('style'));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
$el.on('formikation.update', function() {
|
|
62
|
+
|
|
63
|
+
if ($el.prop('checked')) {
|
|
64
|
+
$el.closest('form').find(':radio[name="'+$el.attr('name')+'"]').closest('label').removeClass('checked');
|
|
65
|
+
$label.addClass('checked');
|
|
66
|
+
} else {
|
|
67
|
+
$label.removeClass('checked');
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
formikation.is_disabled($el, $label);
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
$el.on('click, change', function() {
|
|
74
|
+
$el.trigger('formikation.update');
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
$el.trigger('formikation.update');
|
|
78
|
+
},
|
|
79
|
+
|
|
80
|
+
// Process selects
|
|
81
|
+
processSelects: function(el) {
|
|
82
|
+
var
|
|
83
|
+
$el = $(el),
|
|
84
|
+
selectInnerSpan = $('<span />').addClass('fk-select-label'),
|
|
85
|
+
selectSpan = $('<span />'),
|
|
86
|
+
prefix = 'fk-select';
|
|
87
|
+
|
|
88
|
+
$el.after(selectSpan.append(selectInnerSpan));
|
|
89
|
+
|
|
90
|
+
selectSpan.addClass(prefix);
|
|
91
|
+
|
|
92
|
+
if (this.defaults.mapClass) {
|
|
93
|
+
selectSpan.addClass($el.attr('class'));
|
|
94
|
+
}
|
|
95
|
+
if (this.defaults.mapStyle) {
|
|
96
|
+
selectSpan.attr('style', $el.attr('style'));
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
$el.addClass('has-fk-select')
|
|
100
|
+
.on('formikation.update', function() {
|
|
101
|
+
formikation.changed($el,selectSpan);
|
|
102
|
+
formikation.updateSelectWH($el);
|
|
103
|
+
formikation.is_disabled($el, selectSpan);
|
|
104
|
+
})
|
|
105
|
+
.on('change', function() {
|
|
106
|
+
selectSpan.addClass(formikation.getClass($el, 'Changed'));
|
|
107
|
+
$el.trigger('formikation.update');
|
|
108
|
+
})
|
|
109
|
+
.on('keyup', function(e) {
|
|
110
|
+
if (!selectSpan.hasClass(formikation.getClass($el, 'Open'))) {
|
|
111
|
+
$el.blur();
|
|
112
|
+
$el.focus();
|
|
113
|
+
} else {
|
|
114
|
+
if (e.which==13||e.which==27) {
|
|
115
|
+
formikation.changed($el,selectSpan);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
})
|
|
119
|
+
.on('mousedown', function(e) {
|
|
120
|
+
selectSpan.removeClass(formikation.getClass($el, 'Changed'));
|
|
121
|
+
})
|
|
122
|
+
.on('mouseup', function(e) {
|
|
123
|
+
if ( !selectSpan.hasClass(formikation.getClass($el, 'Open'))) {
|
|
124
|
+
// if FF and there are other selects open, just apply focus
|
|
125
|
+
if ($('.'+formikation.getClass($el, 'Open')).not(selectSpan).length>0 && typeof InstallTrigger !== 'undefined') {
|
|
126
|
+
$el.focus();
|
|
127
|
+
} else {
|
|
128
|
+
selectSpan.addClass(formikation.getClass($el, 'Open'));
|
|
129
|
+
e.stopPropagation();
|
|
130
|
+
$(document).one('mouseup.'+formikation.getClass($el, 'Open'), function(e) {
|
|
131
|
+
if ( e.target != $el.get(0) && $.inArray(e.target,$el.find('*').get()) < 0 ) {
|
|
132
|
+
$el.blur();
|
|
133
|
+
} else {
|
|
134
|
+
formikation.changed($el,selectSpan);
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
})
|
|
140
|
+
.focus(function() {
|
|
141
|
+
selectSpan.removeClass(formikation.getClass($el, '-changed')).addClass(formikation.getClass($el, '-focus'));
|
|
142
|
+
})
|
|
143
|
+
.blur(function() {
|
|
144
|
+
selectSpan.removeClass(formikation.getClass($el, '-focus')+' '+formikation.getClass($el, '-open'));
|
|
145
|
+
})
|
|
146
|
+
.hover(function() {
|
|
147
|
+
selectSpan.addClass(formikation.getClass($el, '-hover'));
|
|
148
|
+
}, function() {
|
|
149
|
+
selectSpan.removeClass(formikation.getClass($el, '-hover'));
|
|
150
|
+
})
|
|
151
|
+
.trigger('formikation.update');
|
|
152
|
+
},
|
|
153
|
+
|
|
154
|
+
// Process input file
|
|
155
|
+
processInputFile: function(el) {
|
|
156
|
+
var $div = $('<div class="fk-file-input">'),
|
|
157
|
+
$el = $(el),
|
|
158
|
+
text = $el.attr('data-text');
|
|
159
|
+
|
|
160
|
+
$el.on('change', function(e) {
|
|
161
|
+
var fn = $el.val().replace(/C:\\fakepath\\/i, '');
|
|
162
|
+
if (!fn) {
|
|
163
|
+
fn = text;
|
|
164
|
+
}
|
|
165
|
+
$el.prev('p').html(fn);
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
formikation.is_disabled($el, $div);
|
|
169
|
+
$el.wrap($div.attr('data-text', text)).parent().prepend('<p>' + text + '</p>');
|
|
170
|
+
},
|
|
171
|
+
|
|
172
|
+
// Updates select width to match span
|
|
173
|
+
updateSelectWH: function(sel) {
|
|
174
|
+
var $sel = $(sel),
|
|
175
|
+
$spa = $sel.next('span');
|
|
176
|
+
|
|
177
|
+
$sel.css({
|
|
178
|
+
'-webkit-appearance': 'menulist-button',
|
|
179
|
+
width: parseInt($spa.outerWidth(), 10),
|
|
180
|
+
height: parseInt($spa.outerHeight(), 10),
|
|
181
|
+
position: 'absolute',
|
|
182
|
+
opacity: 0,
|
|
183
|
+
fontSize: $spa.css('font-size')
|
|
184
|
+
});
|
|
185
|
+
},
|
|
186
|
+
|
|
187
|
+
// HELPERS FUNCTIONS UTILITIES ================
|
|
188
|
+
// Returns class depending on type adding suffix
|
|
189
|
+
getClass: function(el, suffix){
|
|
190
|
+
var prefix = (el.is('input:file')) ? 'fk-file' : 'fk-select';
|
|
191
|
+
return prefix + suffix;
|
|
192
|
+
},
|
|
193
|
+
|
|
194
|
+
// ?
|
|
195
|
+
changed: function($el,selectSpan) {
|
|
196
|
+
var currentSelected = $el.find(':selected'),
|
|
197
|
+
selectSpanInner = selectSpan.children(':first'),
|
|
198
|
+
html = currentSelected.html() || $el.val();
|
|
199
|
+
|
|
200
|
+
selectSpanInner.html(html);
|
|
201
|
+
|
|
202
|
+
if (currentSelected.prop('disabled')) {
|
|
203
|
+
selectSpan.addClass(formikation.getClass($el, 'fk-disable-option'));
|
|
204
|
+
} else {
|
|
205
|
+
selectSpan.removeClass(formikation.getClass($el, 'fk-disable-option'));
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
// Add placeholder class to span if:
|
|
209
|
+
// - Is first option && has NO value
|
|
210
|
+
// - Is first option && HAS value && value is empty
|
|
211
|
+
if (
|
|
212
|
+
$el[0].selectedIndex < 1 &&
|
|
213
|
+
( !currentSelected[0].hasAttribute('value') || currentSelected.val().length === 0 )
|
|
214
|
+
) {
|
|
215
|
+
selectSpanInner.addClass('fk-is-placeholder');
|
|
216
|
+
} else {
|
|
217
|
+
selectSpanInner.removeClass('fk-is-placeholder');
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
setTimeout(function() {
|
|
221
|
+
selectSpan.removeClass(formikation.getClass($el, 'Open'));
|
|
222
|
+
$(document).off('mouseup.'+formikation.getClass($el, 'Open'));
|
|
223
|
+
}, 60);
|
|
224
|
+
},
|
|
225
|
+
|
|
226
|
+
// Check if element is disabled
|
|
227
|
+
is_disabled: function($el, $target) {
|
|
228
|
+
if ($el.prop('disabled')) {
|
|
229
|
+
$target.addClass('disabled');
|
|
230
|
+
} else {
|
|
231
|
+
$target.removeClass('disabled');
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
// JQuery hooks
|
|
238
|
+
(function ($) {
|
|
239
|
+
$.fn.formikation = function(params) {
|
|
240
|
+
formikation.dat.els = this; // JQuery elements
|
|
241
|
+
formikation.init(params);
|
|
242
|
+
};
|
|
243
|
+
})(jQuery);
|