netsign-ios-checkboxes 0.1.2

data/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+pkg/*
+*.gem
+*.rbc
+*.swp
+.bundle
+Gemfile.lock

data/README.md

@@ -0,0 +1,61 @@
+# iOS Style Checkboxes for Rails 3.1
+
+
+This gem provides an easy way of using [iOS style checkboxes](https://github.com/tdreyno/iphone-style-checkboxes).
+
+
+## Install
+
+Please be sure to have [Rails Assets Pipeline](http://guides.rubyonrails.org/asset_pipeline.html) enabled.
+
+Add the following to your `Gemfile`, preferably inside the assets group:
+
+```ruby
+gem 'ios-checkboxes'
+gem 'jquery' # This is required by ios-checkboxes
+```
+
+Then as usually:
+
+```bash
+$ bundle install
+```
+
+## Usage
+
+After installation, all you need to do is to require `ios-checkboxes` inside JavaScript/CoffeeScript and CSS files.
+
+Usually you would add this to your `app/assets/javascripts/application.js` file:
+
+```javascript
+//= require ios-checkboxes
+```
+
+This will also automatically require `jquery`.
+
+And also update your `app/assets/javascripts/applications.css` to inlude `ios-checkboxes`
+
+```css
+/*
+ *= require ios-checkboxes
+ *= require_self
+*/
+```
+
+That's it. Now you can write stuff like `$(".on-off").iphoneStyle()`.
+
+## Development
+
+- Source hosted at [GitHub](https://github.com/tdreyno/iphone-style-checkboxes). See `rails` directory.
+- Report issues and feature requests to [GitHub Issues](https://github.com/tdreyno/iphone-style-checkboxes/issues)
+
+To update the gem with the latest files do:
+
+```bash
+cd rails
+rake update
+# Now go and update the version manually in lib/ios-checkboxes/version.rb
+git add .
+git commit -m 'update rails gem'
+rake release
+```

data/Rakefile

@@ -0,0 +1,22 @@
+require 'rake'
+require 'bundler/gem_tasks'
+
+desc "Update the gem with the latest files"
+task :update do
+  # Copy the js file and require jQuery
+  js_content = File.read "../jquery/iphone-style-checkboxes.js"
+  f = File.new("vendor/assets/javascripts/ios-checkboxes.js", "w")
+  f.write("//= require jquery\n\n#{js_content}")
+  f.close
+
+  # Copy the images
+  cp_r "../images/", "vendor/assets/"
+
+  # Copy CSS and make sure it references the images via assets pipeline
+  css_content = File.read "../style.css"
+  pattern = /url\('images\/([^']+)'\)/
+  css_processed = css_content.gsub(pattern) {|m| "url('<%= image_path \"#{$1.sub(/\?.*/, '')}\" %>')" }
+  f2 = File.new("vendor/assets/stylesheets/ios-checkboxes.css.erb", "w")
+  f2.write(css_processed)
+  f2.close
+end

data/ios-checkboxes.gemspec

@@ -0,0 +1,19 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/ios-checkboxes/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "netsign-ios-checkboxes"
+  s.version     = IOSCheckboxes::VERSION
+  s.authors     = ["Thomas Reynolds"]
+  s.email       = ["me@tdreyno.com"]
+  s.homepage    = "https://github.com/thermistor/iphone-style-checkboxes"
+  s.summary     = %q{iOS-style Checkboxes}
+  s.description = %q{iOS-style Checkboxes for Rails asset pipeline. Customized specifically for Netsign requirements.}
+
+  s.rubyforge_project = "netsign-ios-checkboxes"
+  s.add_dependency "railties", "~> 3.1"
+
+  s.files = `git ls-files`.split("\n")
+
+  s.require_paths = ["lib"]
+end

data/lib/ios-checkboxes.rb

@@ -0,0 +1,6 @@
+require "ios-checkboxes/version"
+
+module IOSCheckboxes
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/ios-checkboxes/version.rb

@@ -0,0 +1,3 @@
+module IOSCheckboxes
+  VERSION = "0.1.2"
+end

data/vendor/assets/javascripts/ios-checkboxes.js

@@ -0,0 +1,283 @@
+//= require jquery
+
+(function() {
+  var iOSCheckbox,
+    __slice = Array.prototype.slice;
+
+  iOSCheckbox = (function() {
+
+    function iOSCheckbox(elem, options) {
+      var key, opts, value;
+      this.elem = $(elem);
+      opts = $.extend({}, iOSCheckbox.defaults, options);
+      for (key in opts) {
+        value = opts[key];
+        this[key] = value;
+      }
+      this.elem.data(this.dataName, this);
+      this.wrapCheckboxWithDivs();
+      this.attachEvents();
+      this.disableTextSelection();
+      if (this.resizeHandle) this.optionallyResize('handle');
+      if (this.resizeContainer) this.optionallyResize('container');
+      this.initialPosition();
+    }
+
+    iOSCheckbox.prototype.isDisabled = function() {
+      return this.elem.is(':disabled');
+    };
+
+    iOSCheckbox.prototype.wrapCheckboxWithDivs = function() {
+      this.elem.wrap("<div class='" + this.containerClass + "' />");
+      this.container = this.elem.parent();
+      this.offLabel = $("<label class='" + this.labelOffClass + "'>\n  <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container);
+      this.offSpan = this.offLabel.children('span');
+      this.onLabel = $("<label class='" + this.labelOnClass + "'>\n  <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container);
+      this.onSpan = this.onLabel.children('span');
+      return this.handle = $("<div class='" + this.handleClass + "'>\n  <div class='" + this.handleRightClass + "'>\n    <div class='" + this.handleCenterClass + "' />\n  </div>\n</div>").appendTo(this.container);
+    };
+
+    iOSCheckbox.prototype.disableTextSelection = function() {
+      if ($.browser.msie) {
+        return $([this.handle, this.offLabel, this.onLabel, this.container]).attr("unselectable", "on");
+      }
+    };
+
+    iOSCheckbox.prototype._getDimension = function(elem, dimension) {
+      if ($.fn.actual != null) {
+        return elem.actual(dimension);
+      } else {
+        return elem[dimension]();
+      }
+    };
+
+    iOSCheckbox.prototype.optionallyResize = function(mode) {
+      var newWidth, offLabelWidth, onLabelWidth;
+      onLabelWidth = this._getDimension(this.onLabel, "width");
+      offLabelWidth = this._getDimension(this.offLabel, "width");
+      if (mode === "container") {
+        newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
+        newWidth += this._getDimension(this.handle, "width") + this.handleMargin;
+        return this.container.css({
+          width: newWidth
+        });
+      } else {
+        newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
+        return this.handle.css({
+          width: newWidth
+        });
+      }
+    };
+
+    iOSCheckbox.prototype.onMouseDown = function(event) {
+      var x;
+      event.preventDefault();
+      if (this.isDisabled()) return;
+      x = event.pageX || event.originalEvent.changedTouches[0].pageX;
+      iOSCheckbox.currentlyClicking = this.handle;
+      iOSCheckbox.dragStartPosition = x;
+      return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css('left'), 10) || 0;
+    };
+
+    iOSCheckbox.prototype.onDragMove = function(event, x) {
+      var newWidth, p;
+      if (iOSCheckbox.currentlyClicking !== this.handle) return;
+      p = (x + iOSCheckbox.handleLeftOffset - iOSCheckbox.dragStartPosition) / this.rightSide;
+      if (p < 0) p = 0;
+      if (p > 1) p = 1;
+      newWidth = p * this.rightSide;
+      this.handle.css({
+        left: newWidth
+      });
+      this.onLabel.css({
+        width: newWidth + this.handleRadius
+      });
+      this.offSpan.css({
+        marginRight: -newWidth
+      });
+      return this.onSpan.css({
+        marginLeft: -(1 - p) * this.rightSide
+      });
+    };
+
+    iOSCheckbox.prototype.onDragEnd = function(event, x) {
+      var p;
+      if (iOSCheckbox.currentlyClicking !== this.handle) return;
+      if (this.isDisabled()) return;
+      if (iOSCheckbox.dragging) {
+        p = (x - iOSCheckbox.dragStartPosition) / this.rightSide;
+        this.elem.prop('checked', p >= 0.5);
+      } else {
+        this.elem.prop('checked', !this.elem.prop('checked'));
+      }
+      iOSCheckbox.currentlyClicking = null;
+      iOSCheckbox.dragging = null;
+      return this.elem.trigger('change');
+    };
+
+    iOSCheckbox.prototype.refresh = function() {
+      return this.didChange();
+    };
+
+    iOSCheckbox.prototype.didChange = function() {
+      var new_left;
+      if (typeof this.onChange === "function") {
+        this.onChange(this.elem, this.elem.prop('checked'));
+      }
+      if (this.isDisabled()) {
+        this.container.addClass(this.disabledClass);
+        return false;
+      } else {
+        this.container.removeClass(this.disabledClass);
+      }
+      new_left = this.elem.prop('checked') ? this.rightSide : 0;
+      this.handle.animate({
+        left: new_left
+      }, this.duration);
+      this.onLabel.animate({
+        width: new_left + this.handleRadius
+      }, this.duration);
+      this.offSpan.animate({
+        marginRight: -new_left
+      }, this.duration);
+      return this.onSpan.animate({
+        marginLeft: new_left - this.rightSide
+      }, this.duration);
+    };
+
+    iOSCheckbox.prototype.attachEvents = function() {
+      var localMouseMove, localMouseUp, self;
+      self = this;
+      localMouseMove = function(event) {
+        return self.onGlobalMove.apply(self, arguments);
+      };
+      localMouseUp = function(event) {
+        self.onGlobalUp.apply(self, arguments);
+        $(document).unbind('mousemove touchmove', localMouseMove);
+        return $(document).unbind('mouseup touchend', localMouseUp);
+      };
+      this.elem.change(function() {
+        return self.refresh();
+      });
+      return this.container.bind('mousedown touchstart', function(event) {
+        self.onMouseDown.apply(self, arguments);
+        $(document).bind('mousemove touchmove', localMouseMove);
+        return $(document).bind('mouseup touchend', localMouseUp);
+      });
+    };
+
+    iOSCheckbox.prototype.initialPosition = function() {
+      var containerWidth, offset;
+      containerWidth = this._getDimension(this.container, "width");
+      this.offLabel.css({
+        width: containerWidth - this.containerRadius
+      });
+      offset = this.containerRadius + 1;
+      if ($.browser.msie && $.browser.version < 7) offset -= 3;
+      this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset;
+      if (this.elem.is(':checked')) {
+        this.handle.css({
+          left: this.rightSide
+        });
+        this.onLabel.css({
+          width: this.rightSide + this.handleRadius
+        });
+        this.offSpan.css({
+          marginRight: -this.rightSide
+        });
+      } else {
+        this.onLabel.css({
+          width: 0
+        });
+        this.onSpan.css({
+          marginLeft: -this.rightSide
+        });
+      }
+      if (this.isDisabled()) return this.container.addClass(this.disabledClass);
+    };
+
+    iOSCheckbox.prototype.onGlobalMove = function(event) {
+      var x;
+      if (!(!this.isDisabled() && iOSCheckbox.currentlyClicking)) return;
+      event.preventDefault();
+      x = event.pageX || event.originalEvent.changedTouches[0].pageX;
+      if (!iOSCheckbox.dragging && (Math.abs(iOSCheckbox.dragStartPosition - x) > this.dragThreshold)) {
+        iOSCheckbox.dragging = true;
+      }
+      return this.onDragMove(event, x);
+    };
+
+    iOSCheckbox.prototype.onGlobalUp = function(event) {
+      var x;
+      if (!iOSCheckbox.currentlyClicking) return;
+      event.preventDefault();
+      x = event.pageX || event.originalEvent.changedTouches[0].pageX;
+      this.onDragEnd(event, x);
+      return false;
+    };
+
+    iOSCheckbox.defaults = {
+      duration: 200,
+      checkedLabel: 'ON',
+      uncheckedLabel: 'OFF',
+      resizeHandle: true,
+      resizeContainer: true,
+      disabledClass: 'iPhoneCheckDisabled',
+      containerClass: 'iPhoneCheckContainer',
+      labelOnClass: 'iPhoneCheckLabelOn',
+      labelOffClass: 'iPhoneCheckLabelOff',
+      handleClass: 'iPhoneCheckHandle',
+      handleCenterClass: 'iPhoneCheckHandleCenter',
+      handleRightClass: 'iPhoneCheckHandleRight',
+      dragThreshold: 5,
+      handleMargin: 15,
+      handleRadius: 4,
+      containerRadius: 5,
+      dataName: "iphoneStyle",
+      onChange: function() {}
+    };
+
+    return iOSCheckbox;
+
+  })();
+
+  $.iphoneStyle = this.iOSCheckbox = iOSCheckbox;
+
+  $.fn.iphoneStyle = function() {
+    var args, checkbox, dataName, existingControl, method, params, _i, _len, _ref, _ref2, _ref3, _ref4;
+    args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
+    dataName = (_ref = (_ref2 = args[0]) != null ? _ref2.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName;
+    _ref3 = this.filter(':checkbox');
+    for (_i = 0, _len = _ref3.length; _i < _len; _i++) {
+      checkbox = _ref3[_i];
+      existingControl = $(checkbox).data(dataName);
+      if (existingControl != null) {
+        method = args[0], params = 2 <= args.length ? __slice.call(args, 1) : [];
+        if ((_ref4 = existingControl[method]) != null) {
+          _ref4.apply(existingControl, params);
+        }
+      } else {
+        new iOSCheckbox(checkbox, args[0]);
+      }
+    }
+    return this;
+  };
+
+  $.fn.iOSCheckbox = function(options) {
+    var opts;
+    if (options == null) options = {};
+    opts = $.extend({}, options, {
+      resizeHandle: false,
+      disabledClass: 'iOSCheckDisabled',
+      containerClass: 'iOSCheckContainer',
+      labelOnClass: 'iOSCheckLabelOn',
+      labelOffClass: 'iOSCheckLabelOff',
+      handleClass: 'iOSCheckHandle',
+      handleCenterClass: 'iOSCheckHandleCenter',
+      handleRightClass: 'iOSCheckHandleRight',
+      dataName: 'iOSCheckbox'
+    });
+    return this.iphoneStyle(opts);
+  };
+
+}).call(this);

data/vendor/assets/stylesheets/ios-checkboxes.css.erb

@@ -0,0 +1,145 @@
+.iPhoneCheckContainer {
+  position: relative;
+  height: 27px;
+  cursor: pointer;
+  overflow: hidden; }
+  .iPhoneCheckContainer input {
+    position: absolute;
+    top: 5px;
+    left: 30px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0; }
+  .iPhoneCheckContainer label {
+    white-space: nowrap;
+    font-size: 17px;
+    line-height: 17px;
+    font-weight: bold;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+    cursor: pointer;
+    display: block;
+    height: 27px;
+    position: absolute;
+    width: auto;
+    top: 0;
+    padding-top: 5px;
+    overflow: hidden; }
+  .iPhoneCheckContainer, .iPhoneCheckContainer label {
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none; }
+
+.iPhoneCheckDisabled {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+  opacity: 0.5; }
+
+label.iPhoneCheckLabelOn {
+  color: white;
+  background: url('<%= image_path "iphone-style-checkboxes/on.png" %>') no-repeat;
+  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+  left: 0;
+  padding-top: 5px; }
+  label.iPhoneCheckLabelOn span {
+    padding-left: 8px; }
+label.iPhoneCheckLabelOff {
+  color: #8b8b8b;
+  background: url('<%= image_path "iphone-style-checkboxes/off.png" %>') no-repeat right 0;
+  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
+  text-align: right;
+  right: 0; }
+  label.iPhoneCheckLabelOff span {
+    padding-right: 8px; }
+
+.iPhoneCheckHandle {
+  display: block;
+  height: 27px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  background: url('<%= image_path "iphone-style-checkboxes/slider_left.png" %>') no-repeat;
+  padding-left: 3px; }
+
+.iPhoneCheckHandleRight {
+  height: 100%;
+  width: 100%;
+  padding-right: 3px;
+  background: url('<%= image_path "iphone-style-checkboxes/slider_right.png" %>') no-repeat right 0; }
+
+.iPhoneCheckHandleCenter {
+  height: 100%;
+  width: 100%;
+  background: url('<%= image_path "iphone-style-checkboxes/slider_center.png" %>'); }
+
+.iOSCheckContainer {
+  position: relative;
+  height: 27px;
+  cursor: pointer;
+  overflow: hidden; }
+  .iOSCheckContainer input {
+    position: absolute;
+    top: 5px;
+    left: 30px;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0; }
+  .iOSCheckContainer label {
+    white-space: nowrap;
+    font-size: 17px;
+    line-height: 17px;
+    font-weight: bold;
+    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+    cursor: pointer;
+    display: block;
+    height: 27px;
+    position: absolute;
+    width: auto;
+    top: 0;
+    padding-top: 5px;
+    overflow: hidden; }
+  .iOSCheckContainer, .iOSCheckContainer label {
+    user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none; }
+
+.iOSCheckDisabled {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+  opacity: 0.5; }
+
+label.iOSCheckLabelOn {
+  color: white;
+  background: url('<%= image_path "ios-style-checkboxes/on.png" %>') no-repeat;
+  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+  left: 0;
+  padding-top: 5px; }
+  label.iOSCheckLabelOn span {
+    padding-left: 8px; }
+label.iOSCheckLabelOff {
+  color: #8b8b8b;
+  background: url('<%= image_path "ios-style-checkboxes/off.png" %>') no-repeat right 0;
+  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
+  text-align: right;
+  right: 0; }
+  label.iOSCheckLabelOff span {
+    padding-right: 8px; }
+
+.iOSCheckHandle {
+  display: block;
+  height: 27px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  background: url('<%= image_path "ios-style-checkboxes/slider_left.png" %>') no-repeat;
+  padding-left: 3px; }
+
+.iOSCheckHandleRight {
+  height: 100%;
+  width: 100%;
+  padding-right: 3px;
+  background: url('<%= image_path "ios-style-checkboxes/slider_right.png" %>') no-repeat right 0; }
+
+.iOSCheckHandleCenter {
+  height: 100%;
+  width: 100%;
+  background: url('<%= image_path "ios-style-checkboxes/slider_center.png" %>'); }

metadata

@@ -0,0 +1,77 @@
+--- !ruby/object:Gem::Specification
+name: netsign-ios-checkboxes
+version: !ruby/object:Gem::Version
+  version: 0.1.2
+  prerelease: 
+platform: ruby
+authors:
+- Thomas Reynolds
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-01-25 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: &70297727383340 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70297727383340
+description: iOS-style Checkboxes for Rails asset pipeline. Customized specifically
+  for Netsign requirements.
+email:
+- me@tdreyno.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- README.md
+- Rakefile
+- ios-checkboxes.gemspec
+- lib/ios-checkboxes.rb
+- lib/ios-checkboxes/version.rb
+- vendor/assets/images/ios-style-checkboxes/off.png
+- vendor/assets/images/ios-style-checkboxes/on.png
+- vendor/assets/images/ios-style-checkboxes/slider.png
+- vendor/assets/images/ios-style-checkboxes/slider_center.png
+- vendor/assets/images/ios-style-checkboxes/slider_left.png
+- vendor/assets/images/ios-style-checkboxes/slider_right.png
+- vendor/assets/images/iphone-style-checkboxes/off.png
+- vendor/assets/images/iphone-style-checkboxes/on.png
+- vendor/assets/images/iphone-style-checkboxes/slider.png
+- vendor/assets/images/iphone-style-checkboxes/slider_center.png
+- vendor/assets/images/iphone-style-checkboxes/slider_left.png
+- vendor/assets/images/iphone-style-checkboxes/slider_right.png
+- vendor/assets/javascripts/ios-checkboxes.js
+- vendor/assets/stylesheets/ios-checkboxes.css.erb
+homepage: https://github.com/thermistor/iphone-style-checkboxes
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: netsign-ios-checkboxes
+rubygems_version: 1.8.15
+signing_key: 
+specification_version: 3
+summary: iOS-style Checkboxes
+test_files: []