type_number_imitate 0.1.2 → 0.1.3

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.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +9 -3
  3. data/lib/type_number_imitate/version.rb +1 -1
  4. data/sources/type_number_imitate.coffee +7 -4
  5. data/vendor/assets/javascripts/type_number_imitate.js +171 -162
  6. metadata +1 -3
  7. data/demo/demo.html +0 -17
  8. data/demo/demo.slim +0 -15
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 61840909ed9a208f9e237b1bd3498f0ace638653
4
- data.tar.gz: 27238ae31895f48c9f9d6764f97e1340b26ab754
3
+ metadata.gz: efe98c7bf15185ec6f410ebf10ae4c8c6a29c0e9
4
+ data.tar.gz: 577ec8f60e4d382db16609b4faa1d11ca3c6f8a2
5
5
  SHA512:
6
- metadata.gz: fdf94c97437c7caafa18b10e3e4c7816922c6427021a4720fd91376fa6f09916e2b2b7023b20602fe2e71204453756be20be9853979ce3c8571ccdc2d37a1ce7
7
- data.tar.gz: a23c0ffbf581f8401b7fae21c83bc2dd90c9d8a3b70f4550ac9bf4f76e48a840bb76ef295ccf72497f184b66f029720374cfcd187aeb758f4c8bae21211cea2b
6
+ metadata.gz: ce32c0a5c896dcbc51d129924f1d1b128ad85ceb491e1311fba27c9ca6747097de5f224b5771bfce1b7fc4bf6cacf7254a7058e6f8d158504559f7fd87fd3066
7
+ data.tar.gz: db2818a2c9d087a270da0371f695319b701d7991cd7771d7807e9db6dafdacf61d34b4f01b443c8a2b682c9dfebaea4244e705ecc11c2d4af7f08ff5bb786cb5
data/README.md CHANGED
@@ -29,7 +29,7 @@ Or install it yourself as:
29
29
  ## Usage
30
30
 
31
31
  ```html
32
- <input class="first" float="" min="1" placeholder="1" type="text">
32
+ <input class="first" float="" min="1" type="text">
33
33
  ```
34
34
  ```javascript
35
35
  new TypeNumberImitate('input.first');
@@ -48,12 +48,18 @@ Result:
48
48
  ```javascript
49
49
  new TypeNumberImitate(inputSelector, options);
50
50
  ```
51
- * *wrapperClasses* - additional clases for wrapper div.type-number-imitate
52
- * *plusClasses*, *minusClasses* - additional clases for plus and minus spans
51
+ * *wrapperClasses* - additional classes for wrapper div.type-number-imitate
52
+ * *plusClasses*, *minusClasses* - additional classes for plus and minus spans
53
+ * *skipPlaceholder* - Use this attribute to clear placeholder. By default placeholder is set from placeholder-attribute, if it's absent placeholder is set as min-attribute.
53
54
  ```javascript
54
55
  new TypeNumberImitate('input.second', {wrapperClasses: 'green-border large'});
55
56
  ```
56
57
 
58
+ All options are available from *data-tni-ATTR* i.e:
59
+ ```html
60
+ <input class="first" float="" min="1" type="text" data-tni-wrapper-classes='green-border large'>
61
+ ```
62
+
57
63
  [Live demo](http://codepen.io/byzg/pen/VaNPMO)
58
64
 
59
65
  ## Development
data/lib/type_number_imitate/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module TypeNumberImitate
2
- VERSION = '0.1.2'
2
+ VERSION = '0.1.3'
3
3
  end
data/sources/type_number_imitate.coffee CHANGED
@@ -1,7 +1,5 @@
1
1
  # created by byzg
2
2
  # https://github.com/byzg/type_number_imitate
3
- # created by byzg
4
- # https://github.com/byzg/type_number_imitate
5
3
  window.TypeNumberImitate = class TypeNumberImitate
6
4
  constructor: ($input, opts = {}) ->
7
5
  @$input = jQuery($input)
@@ -37,7 +35,7 @@ window.TypeNumberImitate = class TypeNumberImitate
37
35
 
38
36
  stepFn: (val)->
39
37
  oldVal = @$input.val()
40
- oldVal = 0 if oldVal == ''
38
+ oldVal = @min - 1 if oldVal == ''
41
39
  oldVal = @parseFn(oldVal)
42
40
  newVal = oldVal + @parseFn(val)
43
41
  if @isValid(newVal)
@@ -64,10 +62,15 @@ window.TypeNumberImitate = class TypeNumberImitate
64
62
  @$input.data('type-number-imitated', true)
65
63
 
66
64
  initAttrs: ->
65
+ _.each @$input.data(), (v, k)=>
66
+ @opts[_.camelCase(k[3..-1])] = v if k[0..2] == 'tni'
67
67
  @float = @$input.is('[float]')
68
68
  @parseFn = if @float then parseFloat else parseInt
69
69
  @min = @parseFn(min) if min = @$input.attr('min')
70
70
  @max = @parseFn(max) if max = @$input.attr('max')
71
+ unless typeof(@opts.skipPlaceholder) == 'string'
72
+ @placeholer = @$input.attr('placeholder') || @min
73
+ @$input.attr('placeholder', @placeholer)
71
74
  @step = @parseFn(@$input.attr('step') || 1)
72
75
  regexStr = '^[0-9]+'
73
76
  regexStr += '\.?([0-9]+)?' if @float
@@ -100,4 +103,4 @@ window.TypeNumberImitate = class TypeNumberImitate
100
103
  @$plus = jQuery("<span class='plus #{@opts.plusClasses}'>+</span>")
101
104
  @$minus = jQuery("<span class='minus #{@opts.minusClasses}'>–</span>")
102
105
  @$container.append(@$plus)
103
- @$container.append(@$minus)
106
+ @$container.append(@$minus)
data/vendor/assets/javascripts/type_number_imitate.js CHANGED
@@ -1,181 +1,190 @@
1
- // created by byzg
2
- // https://github.com/byzg/type_number_imitate
3
- (function () {
4
- var TypeNumberImitate;
1
+ //created by byzg
2
+ //https://github.com/byzg/type_number_imitate
5
3
 
6
- window.TypeNumberImitate = TypeNumberImitate = (function() {
7
- function TypeNumberImitate($input, opts) {
8
- var base, base1, base2;
9
- if (opts == null) {
10
- opts = {};
11
- }
12
- this.$input = jQuery($input);
13
- this.opts = opts;
14
- (base = this.opts).wrapperClasses || (base.wrapperClasses = '');
15
- (base1 = this.opts).plusClasses || (base1.plusClasses = '');
16
- (base2 = this.opts).minusClasses || (base2.minusClasses = '');
17
- if (this.$input.length && !this.alreadyImitated()) {
18
- this.init();
19
- this.toggleDisabled();
20
- }
4
+ var TypeNumberImitate;
5
+ window.TypeNumberImitate = TypeNumberImitate = (function() {
6
+ function TypeNumberImitate($input, opts) {
7
+ var base, base1, base2;
8
+ if (opts == null) {
9
+ opts = {};
21
10
  }
11
+ this.$input = jQuery($input);
12
+ this.opts = opts;
13
+ (base = this.opts).wrapperClasses || (base.wrapperClasses = '');
14
+ (base1 = this.opts).plusClasses || (base1.plusClasses = '');
15
+ (base2 = this.opts).minusClasses || (base2.minusClasses = '');
16
+ if (this.$input.length && !this.alreadyImitated()) {
17
+ this.init();
18
+ this.toggleDisabled();
19
+ }
20
+ }
22
21
 
23
- TypeNumberImitate.prototype.isValid = function(val) {
24
- var parsed, result;
25
- if (val === '' || !((this.min != null) || (this.max != null))) {
26
- return true;
27
- }
28
- parsed = this.parseFn(val);
29
- result = !isNaN(parsed) && !!('' + val).match(this.regex);
30
- if (this.min) {
31
- result &= parsed >= this.min;
32
- }
33
- if (this.max) {
34
- result &= parsed <= this.max;
35
- }
36
- return !!result;
37
- };
22
+ TypeNumberImitate.prototype.isValid = function(val) {
23
+ var parsed, result;
24
+ if (val === '' || !((this.min != null) || (this.max != null))) {
25
+ return true;
26
+ }
27
+ parsed = this.parseFn(val);
28
+ result = !isNaN(parsed) && !!('' + val).match(this.regex);
29
+ if (this.min) {
30
+ result &= parsed >= this.min;
31
+ }
32
+ if (this.max) {
33
+ result &= parsed <= this.max;
34
+ }
35
+ return !!result;
36
+ };
38
37
 
39
- TypeNumberImitate.prototype.valAfterType = function(typedStr, keyDownCode) {
40
- var currentVal, deltaEnd, deltaStart, selectionEnd, selectionStart;
41
- if (keyDownCode == null) {
42
- keyDownCode = null;
43
- }
44
- currentVal = this.$input.val();
45
- selectionStart = this.$input.get(0).selectionStart;
46
- selectionEnd = this.$input.get(0).selectionEnd;
47
- deltaStart = deltaEnd = 0;
48
- if (keyDownCode === 8) {
49
- deltaStart = -1;
50
- }
51
- if (keyDownCode === 46) {
52
- deltaEnd = 1;
53
- }
54
- return currentVal.substr(0, selectionStart + deltaStart) + typedStr + currentVal.substr(selectionEnd + deltaEnd);
55
- };
38
+ TypeNumberImitate.prototype.valAfterType = function(typedStr, keyDownCode) {
39
+ var currentVal, deltaEnd, deltaStart, selectionEnd, selectionStart;
40
+ if (keyDownCode == null) {
41
+ keyDownCode = null;
42
+ }
43
+ currentVal = this.$input.val();
44
+ selectionStart = this.$input.get(0).selectionStart;
45
+ selectionEnd = this.$input.get(0).selectionEnd;
46
+ deltaStart = deltaEnd = 0;
47
+ if (keyDownCode === 8) {
48
+ deltaStart = -1;
49
+ }
50
+ if (keyDownCode === 46) {
51
+ deltaEnd = 1;
52
+ }
53
+ return currentVal.substr(0, selectionStart + deltaStart) + typedStr + currentVal.substr(selectionEnd + deltaEnd);
54
+ };
56
55
 
57
- TypeNumberImitate.prototype.toggleDisabled = function() {
58
- var val;
59
- val = this.$input.val();
60
- this.$plus.toggleClass('disabled', val === this.max);
61
- return this.$minus.toggleClass('disabled', val === this.min);
62
- };
56
+ TypeNumberImitate.prototype.toggleDisabled = function() {
57
+ var val;
58
+ val = this.$input.val();
59
+ this.$plus.toggleClass('disabled', val === this.max);
60
+ return this.$minus.toggleClass('disabled', val === this.min);
61
+ };
63
62
 
64
- TypeNumberImitate.prototype.stepFn = function(val) {
65
- var newVal, oldVal;
66
- oldVal = this.$input.val();
67
- if (oldVal === '') {
68
- oldVal = 0;
69
- }
70
- oldVal = this.parseFn(oldVal);
71
- newVal = oldVal + this.parseFn(val);
72
- if (this.isValid(newVal)) {
73
- this.$input.val(newVal);
74
- this.toggleDisabled();
75
- this.$input.trigger('change');
76
- return newVal;
77
- } else {
78
- return oldVal;
79
- }
80
- };
63
+ TypeNumberImitate.prototype.stepFn = function(val) {
64
+ var newVal, oldVal;
65
+ oldVal = this.$input.val();
66
+ if (oldVal === '') {
67
+ oldVal = this.min - 1;
68
+ }
69
+ oldVal = this.parseFn(oldVal);
70
+ newVal = oldVal + this.parseFn(val);
71
+ if (this.isValid(newVal)) {
72
+ this.$input.val(newVal);
73
+ this.toggleDisabled();
74
+ this.$input.trigger('change');
75
+ return newVal;
76
+ } else {
77
+ return oldVal;
78
+ }
79
+ };
81
80
 
82
- TypeNumberImitate.prototype.alreadyImitated = function() {
83
- return this.$input.data().typeNumberImitated;
84
- };
81
+ TypeNumberImitate.prototype.alreadyImitated = function() {
82
+ return this.$input.data().typeNumberImitated;
83
+ };
85
84
 
86
- TypeNumberImitate.prototype.increment = function() {
87
- return this.stepFn(this.step);
88
- };
85
+ TypeNumberImitate.prototype.increment = function() {
86
+ return this.stepFn(this.step);
87
+ };
89
88
 
90
- TypeNumberImitate.prototype.decrement = function() {
91
- return this.stepFn(-this.step);
92
- };
89
+ TypeNumberImitate.prototype.decrement = function() {
90
+ return this.stepFn(-this.step);
91
+ };
93
92
 
94
- TypeNumberImitate.prototype.init = function() {
95
- this.initAttrs();
96
- this.initWrap();
97
- this.initHandlers();
98
- return this.$input.data('type-number-imitated', true);
99
- };
93
+ TypeNumberImitate.prototype.init = function() {
94
+ this.initAttrs();
95
+ this.initWrap();
96
+ this.initHandlers();
97
+ return this.$input.data('type-number-imitated', true);
98
+ };
100
99
 
101
- TypeNumberImitate.prototype.initAttrs = function() {
102
- var max, min, regexStr;
103
- this.float = this.$input.is('[float]');
104
- this.parseFn = this.float ? parseFloat : parseInt;
105
- if (min = this.$input.attr('min')) {
106
- this.min = this.parseFn(min);
107
- }
108
- if (max = this.$input.attr('max')) {
109
- this.max = this.parseFn(max);
110
- }
111
- this.step = this.parseFn(this.$input.attr('step') || 1);
112
- regexStr = '^[0-9]+';
113
- if (this.float) {
114
- regexStr += '\.?([0-9]+)?';
115
- }
116
- regexStr += '$';
117
- regexStr = regexStr.replace(/[.]/g, '\\$&');
118
- return this.regex = new RegExp(regexStr, 'g');
119
- };
100
+ TypeNumberImitate.prototype.initAttrs = function() {
101
+ var max, min, regexStr;
102
+ _.each(this.$input.data(), (function(_this) {
103
+ return function(v, k) {
104
+ if (k.slice(0, 3) === 'tni') {
105
+ return _this.opts[_.camelCase(k.slice(3))] = v;
106
+ }
107
+ };
108
+ })(this));
109
+ this.float = this.$input.is('[float]');
110
+ this.parseFn = this.float ? parseFloat : parseInt;
111
+ if (min = this.$input.attr('min')) {
112
+ this.min = this.parseFn(min);
113
+ }
114
+ if (max = this.$input.attr('max')) {
115
+ this.max = this.parseFn(max);
116
+ }
117
+ if (typeof this.opts.skipPlaceholder !== 'string') {
118
+ this.placeholer = this.$input.attr('placeholder') || this.min;
119
+ this.$input.attr('placeholder', this.placeholer);
120
+ }
121
+ this.step = this.parseFn(this.$input.attr('step') || 1);
122
+ regexStr = '^[0-9]+';
123
+ if (this.float) {
124
+ regexStr += '\.?([0-9]+)?';
125
+ }
126
+ regexStr += '$';
127
+ regexStr = regexStr.replace(/[.]/g, '\\$&');
128
+ return this.regex = new RegExp(regexStr, 'g');
129
+ };
120
130
 
121
- TypeNumberImitate.prototype.initHandlers = function() {
122
- this.$input.on('keypress', (function(_this) {
123
- return function(e) {
124
- return _this.isValid(_this.valAfterType(String.fromCharCode(e.charCode)));
125
- };
126
- })(this)).on('keydown', (function(_this) {
127
- return function(e) {
128
- if (_.includes([38, 40], e.keyCode)) {
129
- if (e.keyCode === 38) {
130
- _this.increment();
131
- }
132
- if (e.keyCode === 40) {
133
- _this.decrement();
134
- }
135
- return e.preventDefault();
136
- } else if (_.includes([8, 46], e.keyCode)) {
137
- if (!_this.isValid(_this.valAfterType('', e.keyCode))) {
138
- return e.preventDefault();
139
- }
131
+ TypeNumberImitate.prototype.initHandlers = function() {
132
+ this.$input.on('keypress', (function(_this) {
133
+ return function(e) {
134
+ return _this.isValid(_this.valAfterType(String.fromCharCode(e.charCode)));
135
+ };
136
+ })(this)).on('keydown', (function(_this) {
137
+ return function(e) {
138
+ if (_.includes([38, 40], e.keyCode)) {
139
+ if (e.keyCode === 38) {
140
+ _this.increment();
140
141
  }
141
- };
142
- })(this)).on('paste', (function(_this) {
143
- return function(e) {
144
- var pasted;
145
- pasted = e.originalEvent.clipboardData.getData('text');
146
- if (!_this.isValid(_this.valAfterType(pasted))) {
147
- return e.preventDefault();
142
+ if (e.keyCode === 40) {
143
+ _this.decrement();
148
144
  }
149
- };
150
- })(this)).on('cut', (function(_this) {
151
- return function(e) {
152
- if (!_this.isValid(_this.valAfterType(''))) {
145
+ return e.preventDefault();
146
+ } else if (_.includes([8, 46], e.keyCode)) {
147
+ if (!_this.isValid(_this.valAfterType('', e.keyCode))) {
153
148
  return e.preventDefault();
154
149
  }
155
- };
156
- })(this));
157
- this.$plus.click((function(_this) {
158
- return function() {
159
- return _this.increment();
160
- };
161
- })(this));
162
- return this.$minus.click((function(_this) {
163
- return function() {
164
- return _this.decrement();
165
- };
166
- })(this));
167
- };
150
+ }
151
+ };
152
+ })(this)).on('paste', (function(_this) {
153
+ return function(e) {
154
+ var pasted;
155
+ pasted = e.originalEvent.clipboardData.getData('text');
156
+ if (!_this.isValid(_this.valAfterType(pasted))) {
157
+ return e.preventDefault();
158
+ }
159
+ };
160
+ })(this)).on('cut', (function(_this) {
161
+ return function(e) {
162
+ if (!_this.isValid(_this.valAfterType(''))) {
163
+ return e.preventDefault();
164
+ }
165
+ };
166
+ })(this));
167
+ this.$plus.click((function(_this) {
168
+ return function() {
169
+ return _this.increment();
170
+ };
171
+ })(this));
172
+ return this.$minus.click((function(_this) {
173
+ return function() {
174
+ return _this.decrement();
175
+ };
176
+ })(this));
177
+ };
168
178
 
169
- TypeNumberImitate.prototype.initWrap = function() {
170
- this.$input.wrap("<div class='type-number-imitate " + this.opts.wrapperClasses + "'></div>");
171
- this.$container = this.$input.parent();
172
- this.$plus = jQuery("<span class='plus " + this.opts.plusClasses + "'>+</span>");
173
- this.$minus = jQuery("<span class='minus " + this.opts.minusClasses + "'>–</span>");
174
- this.$container.append(this.$plus);
175
- return this.$container.append(this.$minus);
176
- };
179
+ TypeNumberImitate.prototype.initWrap = function() {
180
+ this.$input.wrap("<div class='type-number-imitate " + this.opts.wrapperClasses + "'></div>");
181
+ this.$container = this.$input.parent();
182
+ this.$plus = jQuery("<span class='plus " + this.opts.plusClasses + "'>+</span>");
183
+ this.$minus = jQuery("<span class='minus " + this.opts.minusClasses + "'>–</span>");
184
+ this.$container.append(this.$plus);
185
+ return this.$container.append(this.$minus);
186
+ };
177
187
 
178
- return TypeNumberImitate;
188
+ return TypeNumberImitate;
179
189
 
180
- })();
181
- }.call(this));
190
+ })();
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: type_number_imitate
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.1.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - byzg
@@ -52,8 +52,6 @@ files:
52
52
  - Rakefile
53
53
  - bin/console
54
54
  - bin/setup
55
- - demo/demo.html
56
- - demo/demo.slim
57
55
  - lib/type_number_imitate.rb
58
56
  - lib/type_number_imitate/version.rb
59
57
  - sources/type_number_imitate.coffee
data/demo/demo.html DELETED
@@ -1,17 +0,0 @@
1
- <style>
2
- .green-border { border: solid 3px green; }
3
- .large { zoom: 1.2; }
4
- </style>
5
-
6
- Default input:
7
- <input class="first" float="" min="1" placeholder="1" type="text">
8
- <br>
9
- Input with classes of wrapper:
10
- <input class="second" float="" min="1" placeholder="1" type="text">
11
-
12
- <script>
13
- jQuery(function() {
14
- new TypeNumberImitate('input.first');
15
- new TypeNumberImitate('input.second', {wrapperClasses: 'green-border large'});
16
- });
17
- </script>
data/demo/demo.slim DELETED
@@ -1,15 +0,0 @@
1
- style
2
- | .green-border { border: solid 3px green; }
3
- | .large { zoom: 1.2; }
4
-
5
- | Default input:
6
- input.first type='text' min='1' placeholder='1' float=true
7
- br
8
- | Input with classes of wrapper:
9
- input.second type='text' min='1' placeholder='1' float=true
10
-
11
- script
12
- | jQuery(function() {
13
- | new TypeNumberImitate('input.first');
14
- | new TypeNumberImitate('input.second', {wrapperClasses: 'green-border large'});
15
- | });