type_number_imitate 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b2e4edc526650500489058a0e180316bf02b82fb
+  data.tar.gz: 004d05628b6d9267bdc91a03496d17d1af975c14
+SHA512:
+  metadata.gz: f5321da312b965f79e9e76bae9e65ef40dbd335e0f37fba82133fa5c575c38c219e2517468bf2a3d0f6bd772ea9cca09aea9a73b872e0ef6f1b9ac7514979729
+  data.tar.gz: 5d784b4f4125123c86c031cce6bc6ce3d7b2274960bcbe67ffa3bf9ba088c6dd5ff9dd08d07d2db093e93818de0956ddc45de6d3a135404fa89bc1f2e5c4b637

data/.gitignore

@@ -0,0 +1,11 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+/.idea/*

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 byzg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,73 @@
+# TypeNumberImitate
+
+jQuery-library to imitate `input[type='number']` for `input[type='text']`
+
+WARNING: jQuery and [Lodash](https://lodash.com/docs) required.
+
+Attributes `step` (default 1), `min`, `max` are supported.
+
+Use attribute `float` (default false) to allow float typing.
+
+Handlers on keyboard up (↑) and down (↓) changes value of input on step
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'type_number_imitate'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install type_number_imitate
+
+## Usage
+
+```html
+<input class="first" float="" min="1" placeholder="1" type="text">
+```
+```javascript
+new TypeNumberImitate('input.first');
+```
+
+Result:
+```html
+<div class="type-number-imitate">
+  <input autocomplete="off" class="cart_variation_quantity" min="1" name="cart_variation[quantity]" placeholder="1" value="1">
+  <span class="plus">+</span>
+  <span class="minus">–</span>
+</div>
+```
+
+## Options
+```javascript
+  new TypeNumberImitate(inputSelector, options);
+```
+* *wrapperClasses* - additional clases for wrapper div.type-number-imitate
+* *plusClasses*, *minusClasses* - additional clases for plus and minus spans
+```javascript
+  new TypeNumberImitate('input.second', {wrapperClasses: 'green-border large'});
+```
+
+[Live demo](http://codepen.io/byzg/pen/VaNPMO)
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/type_number_imitate. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler/gem_tasks'
+task default: :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "type_number_imitate"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/demo/demo.html

@@ -0,0 +1,17 @@
+<style>
+    .green-border { border: solid 3px green; }
+    .large { zoom: 1.2; }
+</style>
+
+Default input:
+<input class="first" float="" min="1" placeholder="1" type="text">
+<br>
+Input with classes of wrapper:
+<input class="second" float="" min="1" placeholder="1" type="text">
+
+<script>
+    jQuery(function() {
+       new TypeNumberImitate('input.first');
+       new TypeNumberImitate('input.second', {wrapperClasses: 'green-border large'});
+    });
+</script>

data/demo/demo.slim

@@ -0,0 +1,15 @@
+style
+  | .green-border { border: solid 3px green; }
+  | .large { zoom: 1.2; }
+
+| Default input:
+input.first type='text' min='1' placeholder='1' float=true
+br
+| Input with classes of wrapper:
+input.second type='text' min='1' placeholder='1' float=true
+
+script
+  | jQuery(function() {
+  |    new TypeNumberImitate('input.first');
+  |    new TypeNumberImitate('input.second', {wrapperClasses: 'green-border large'});
+  | });

data/lib/type_number_imitate/version.rb

@@ -0,0 +1,3 @@
+module TypeNumberImitate
+  VERSION = '0.1.0'
+end

data/lib/type_number_imitate.rb

@@ -0,0 +1,5 @@
+require "type_number_imitate/version"
+
+module TypeNumberImitate
+  # Your code goes here...
+end

data/type_number_imitate.gemspec

@@ -0,0 +1,31 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'type_number_imitate/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "type_number_imitate"
+  spec.version       = TypeNumberImitate::VERSION
+  spec.authors       = ['byzg']
+  spec.email         = ['byzg00@gmail.ru']
+
+  spec.summary       = 'This gem can imitate input[type="number"]'
+  spec.homepage      = 'http://codepen.io/byzg/pen/VaNPMO'
+  spec.license       = 'MIT'
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  # if spec.respond_to?(:metadata)
+  #   spec.metadata['allowed_push_host'] = "TODO: Set to 'http://mygemserver.com'"
+  # else
+  #   raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
+  # end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/vendor/assets/javascripts/type_number_imitate.coffee

@@ -0,0 +1,103 @@
+# created by byzg
+# https://github.com/byzg/type_number_imitate
+# created by byzg
+# https://github.com/byzg/type_number_imitate
+window.TypeNumberImitate = class TypeNumberImitate
+  constructor: ($input, opts = {}) ->
+    @$input = jQuery($input)
+    @opts = opts
+    @opts.wrapperClasses ||= ''
+    @opts.plusClasses ||= ''
+    @opts.minusClasses ||= ''
+    if @$input.length && !@alreadyImitated()
+      @init()
+      @toggleDisabled()
+
+  isValid: (val)->
+    return true if val == '' || !(@min? || @max?)
+    parsed = @parseFn(val);
+    result = !isNaN(parsed) && !!('' + val).match(@regex)
+    result &= (parsed >= @min) if @min
+    result &= (parsed <= @max) if @max
+    !!result
+
+  valAfterType: (typedStr, keyDownCode = null)->
+    currentVal = @$input.val()
+    selectionStart = @$input.get(0).selectionStart
+    selectionEnd = @$input.get(0).selectionEnd
+    deltaStart = deltaEnd = 0
+    deltaStart = -1 if keyDownCode == 8
+    deltaEnd = 1 if keyDownCode == 46
+    currentVal.substr(0, selectionStart + deltaStart) + typedStr + currentVal.substr(selectionEnd + deltaEnd)
+
+  toggleDisabled: ->
+    val = @$input.val()
+    @$plus.toggleClass 'disabled', val == @max
+    @$minus.toggleClass 'disabled', val == @min
+
+  stepFn: (val)->
+    oldVal = @$input.val()
+    oldVal = 0 if oldVal == ''
+    oldVal = @parseFn(oldVal)
+    newVal = oldVal + @parseFn(val)
+    if @isValid(newVal)
+      @$input.val newVal
+      @toggleDisabled()
+      @$input.trigger 'change'
+      newVal
+    else
+      oldVal
+
+  alreadyImitated: ->
+    @$input.data().typeNumberImitated
+
+  increment: ->
+    @stepFn(@step)
+
+  decrement: ->
+    @stepFn(-@step)
+
+  init: ->
+    @initAttrs()
+    @initWrap()
+    @initHandlers()
+    @$input.data('type-number-imitated', true)
+
+  initAttrs: ->
+    @float = @$input.is('[float]')
+    @parseFn = if @float then parseFloat else parseInt
+    @min = @parseFn(min) if min = @$input.attr('min')
+    @max = @parseFn(max) if max = @$input.attr('max')
+    @step = @parseFn(@$input.attr('step') || 1)
+    regexStr = '^[0-9]+'
+    regexStr += '\.?([0-9]+)?' if @float
+    regexStr += '$'
+    regexStr = regexStr.replace(/[.]/g, '\\$&')
+    @regex = new RegExp(regexStr, 'g')
+
+  initHandlers: ->
+    @$input.on('keypress', (e) =>
+      @isValid(@valAfterType(String.fromCharCode(e.charCode)))
+    ).on('keydown', (e) =>
+      if _.includes([38, 40], e.keyCode)
+        @increment() if e.keyCode == 38
+        @decrement() if e.keyCode == 40
+        e.preventDefault()
+      else if _.includes([8, 46], e.keyCode)
+        e.preventDefault() unless @isValid(@valAfterType('', e.keyCode))
+    ).on('paste', (e) =>
+      pasted = e.originalEvent.clipboardData.getData('text')
+      e.preventDefault() unless @isValid(@valAfterType(pasted))
+    ).on('cut', (e) =>
+      e.preventDefault() unless @isValid(@valAfterType(''))
+    )
+    @$plus.click => @increment()
+    @$minus.click => @decrement()
+
+  initWrap: ->
+    @$input.wrap("<div class='type-number-imitate #{@opts.wrapperClasses}'></div>")
+    @$container = @$input.parent()
+    @$plus = jQuery("<span class='plus #{@opts.plusClasses}'>+</span>")
+    @$minus = jQuery("<span class='minus #{@opts.minusClasses}'>–</span>")
+    @$container.append(@$plus)
+    @$container.append(@$minus)

data/vendor/assets/javascripts/type_number_imitate.js

@@ -0,0 +1,181 @@
+// created by byzg
+// https://github.com/byzg/type_number_imitate
+(function () {
+  var TypeNumberImitate;
+
+  window.TypeNumberImitate = TypeNumberImitate = (function() {
+    function TypeNumberImitate($input, opts) {
+      var base, base1, base2;
+      if (opts == null) {
+        opts = {};
+      }
+      this.$input = jQuery($input);
+      this.opts = opts;
+      (base = this.opts).wrapperClasses || (base.wrapperClasses = '');
+      (base1 = this.opts).plusClasses || (base1.plusClasses = '');
+      (base2 = this.opts).minusClasses || (base2.minusClasses = '');
+      if (this.$input.length && !this.alreadyImitated()) {
+        this.init();
+        this.toggleDisabled();
+      }
+    }
+
+    TypeNumberImitate.prototype.isValid = function(val) {
+      var parsed, result;
+      if (val === '' || !((this.min != null) || (this.max != null))) {
+        return true;
+      }
+      parsed = this.parseFn(val);
+      result = !isNaN(parsed) && !!('' + val).match(this.regex);
+      if (this.min) {
+        result &= parsed >= this.min;
+      }
+      if (this.max) {
+        result &= parsed <= this.max;
+      }
+      return !!result;
+    };
+
+    TypeNumberImitate.prototype.valAfterType = function(typedStr, keyDownCode) {
+      var currentVal, deltaEnd, deltaStart, selectionEnd, selectionStart;
+      if (keyDownCode == null) {
+        keyDownCode = null;
+      }
+      currentVal = this.$input.val();
+      selectionStart = this.$input.get(0).selectionStart;
+      selectionEnd = this.$input.get(0).selectionEnd;
+      deltaStart = deltaEnd = 0;
+      if (keyDownCode === 8) {
+        deltaStart = -1;
+      }
+      if (keyDownCode === 46) {
+        deltaEnd = 1;
+      }
+      return currentVal.substr(0, selectionStart + deltaStart) + typedStr + currentVal.substr(selectionEnd + deltaEnd);
+    };
+
+    TypeNumberImitate.prototype.toggleDisabled = function() {
+      var val;
+      val = this.$input.val();
+      this.$plus.toggleClass('disabled', val === this.max);
+      return this.$minus.toggleClass('disabled', val === this.min);
+    };
+
+    TypeNumberImitate.prototype.stepFn = function(val) {
+      var newVal, oldVal;
+      oldVal = this.$input.val();
+      if (oldVal === '') {
+        oldVal = 0;
+      }
+      oldVal = this.parseFn(oldVal);
+      newVal = oldVal + this.parseFn(val);
+      if (this.isValid(newVal)) {
+        this.$input.val(newVal);
+        this.toggleDisabled();
+        this.$input.trigger('change');
+        return newVal;
+      } else {
+        return oldVal;
+      }
+    };
+
+    TypeNumberImitate.prototype.alreadyImitated = function() {
+      return this.$input.data().typeNumberImitated;
+    };
+
+    TypeNumberImitate.prototype.increment = function() {
+      return this.stepFn(this.step);
+    };
+
+    TypeNumberImitate.prototype.decrement = function() {
+      return this.stepFn(-this.step);
+    };
+
+    TypeNumberImitate.prototype.init = function() {
+      this.initAttrs();
+      this.initWrap();
+      this.initHandlers();
+      return this.$input.data('type-number-imitated', true);
+    };
+
+    TypeNumberImitate.prototype.initAttrs = function() {
+      var max, min, regexStr;
+      this.float = this.$input.is('[float]');
+      this.parseFn = this.float ? parseFloat : parseInt;
+      if (min = this.$input.attr('min')) {
+        this.min = this.parseFn(min);
+      }
+      if (max = this.$input.attr('max')) {
+        this.max = this.parseFn(max);
+      }
+      this.step = this.parseFn(this.$input.attr('step') || 1);
+      regexStr = '^[0-9]+';
+      if (this.float) {
+        regexStr += '\.?([0-9]+)?';
+      }
+      regexStr += '$';
+      regexStr = regexStr.replace(/[.]/g, '\\$&');
+      return this.regex = new RegExp(regexStr, 'g');
+    };
+
+    TypeNumberImitate.prototype.initHandlers = function() {
+      this.$input.on('keypress', (function(_this) {
+        return function(e) {
+          return _this.isValid(_this.valAfterType(String.fromCharCode(e.charCode)));
+        };
+      })(this)).on('keydown', (function(_this) {
+        return function(e) {
+          if (_.includes([38, 40], e.keyCode)) {
+            if (e.keyCode === 38) {
+              _this.increment();
+            }
+            if (e.keyCode === 40) {
+              _this.decrement();
+            }
+            return e.preventDefault();
+          } else if (_.includes([8, 46], e.keyCode)) {
+            if (!_this.isValid(_this.valAfterType('', e.keyCode))) {
+              return e.preventDefault();
+            }
+          }
+        };
+      })(this)).on('paste', (function(_this) {
+        return function(e) {
+          var pasted;
+          pasted = e.originalEvent.clipboardData.getData('text');
+          if (!_this.isValid(_this.valAfterType(pasted))) {
+            return e.preventDefault();
+          }
+        };
+      })(this)).on('cut', (function(_this) {
+        return function(e) {
+          if (!_this.isValid(_this.valAfterType(''))) {
+            return e.preventDefault();
+          }
+        };
+      })(this));
+      this.$plus.click((function(_this) {
+        return function() {
+          return _this.increment();
+        };
+      })(this));
+      return this.$minus.click((function(_this) {
+        return function() {
+          return _this.decrement();
+        };
+      })(this));
+    };
+
+    TypeNumberImitate.prototype.initWrap = function() {
+      this.$input.wrap("<div class='type-number-imitate " + this.opts.wrapperClasses + "'></div>");
+      this.$container = this.$input.parent();
+      this.$plus = jQuery("<span class='plus " + this.opts.plusClasses + "'>+</span>");
+      this.$minus = jQuery("<span class='minus " + this.opts.minusClasses + "'>–</span>");
+      this.$container.append(this.$plus);
+      return this.$container.append(this.$minus);
+    };
+
+    return TypeNumberImitate;
+
+  })();
+}.call(this));

data/vendor/assets/stylesheets/type_number_imitate.css

@@ -0,0 +1,54 @@
+.type-number-imitate {
+  width: 60px;
+  height: 30px;
+  position: relative;
+}
+.type-number-imitate input {
+  box-sizing: border-box;
+  width: 44px;
+  padding: 0 10px;
+  vertical-align: top;
+  text-align: left;
+  outline: none;
+  border-radius: 3px 0 0 3px;
+  border: 1px solid #EDC5D8;
+  height: 30px;
+  border-right: none;
+  color: #141415;
+}
+.type-number-imitate .minus, .type-number-imitate .plus {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: block;
+  width: 16px;
+  height: 15px;
+  line-height: 13px;
+  background: #F4F5F5;
+  border: 1px solid #EDC5D8;
+  color: #95989D;
+  text-align: center;
+  font-family: none;
+  font-weight: bold;
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+}
+.type-number-imitate .minus:active, .type-number-imitate .plus:active {
+  background: #ddd;
+}
+.type-number-imitate .minus.disabled, .type-number-imitate .plus.disabled {
+  pointer-events: none;
+  color: #D5D6D8;
+}
+.type-number-imitate .minus {
+  border-radius: 0 0 3px 0;
+  bottom: 0;
+}
+.type-number-imitate .plus {
+  border-radius: 0 3px 0 0;
+  top: 0;
+}

data/vendor/assets/stylesheets/type_number_imitate.sass

@@ -0,0 +1,56 @@
+// design by Mike Burns
+.type-number-imitate
+  $black-russian: #141415
+  $zircon: #F4F5F5
+  $grey-chateau: #95989D
+  $athens-grey: #D5D6D8
+  $chantilly: #EDC5D8
+  =no-select
+    -webkit-touch-callout: none
+    -webkit-user-select: none
+    -khtml-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+  width: 60px
+  height: 30px
+  position: relative
+  input
+    box-sizing: border-box
+    width: 44px
+    padding: 0 10px
+    vertical-align: top
+    text-align: left
+    outline: none
+    border-radius: 3px 0 0 3px
+    border: 1px solid $chantilly
+    height: 30px
+    border-right: none
+    color: $black-russian
+  .minus, .plus
+    +no-select
+    display: block
+    width: 16px
+    height: 15px
+    line-height: 13px
+    background: $zircon
+    border: 1px solid $chantilly
+    color: $grey-chateau
+    text-align: center
+    font-family: none
+    font-weight: bold
+    cursor: pointer
+    position: absolute
+    right: 0
+    &:active
+      background: #ddd
+    &.disabled
+      pointer-events: none
+      color: $athens-grey
+  .minus
+    border-radius: 0 0 3px 0
+    bottom: 0
+    border-top: 0px
+  .plus
+    border-radius: 0 3px 0 0
+    top: 0

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: type_number_imitate
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- byzg
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-07-26 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: 
+email:
+- byzg00@gmail.ru
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- demo/demo.html
+- demo/demo.slim
+- lib/type_number_imitate.rb
+- lib/type_number_imitate/version.rb
+- type_number_imitate.gemspec
+- vendor/assets/javascripts/type_number_imitate.coffee
+- vendor/assets/javascripts/type_number_imitate.js
+- vendor/assets/stylesheets/type_number_imitate.css
+- vendor/assets/stylesheets/type_number_imitate.sass
+homepage: http://codepen.io/byzg/pen/VaNPMO
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.2
+signing_key: 
+specification_version: 4
+summary: This gem can imitate input[type="number"]
+test_files: []