switchbox 0.0.1 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 59ce04ff9e76e8174b44622b35215e67e6d164a8
-  data.tar.gz: 023db749cdfcd2077e5089ced6948a427dcdda8a
+  metadata.gz: 013764ba5d65fcf36037f67bd0266ef418a698af
+  data.tar.gz: 6cd598a63516966df93ef7757135ae32012ba725
 SHA512:
-  metadata.gz: d25cf643b468c666a31e1db1a330b8aa3bb589d19f904a632ead2f595d3d438ab242083860a6edf6ca736d97276082a27b635a000bf2f260399128da06c49aee
-  data.tar.gz: 00f937c3e1986ab831034b857cb34a0a0213290a5417fa32f9b94db84063729ac49aa6d529d88615c67d5697b2ccd71f681f94a797df428bc92f190dff9ea119
+  metadata.gz: b68206b3e6639e06840335001bf4677c0440f8c768a4348e5b051e1b82304f2644599cc37aba406ac6a21808d01045982395dbe4549c86bd9b0691df7792bba4
+  data.tar.gz: ce96aed6de8f6420dee169a09b9f21b40ca92a98fb0ff3307c33669c294c93618db7903fc16f1267275c7e5276137cfdf3c6ebfa146d0520df31b3e451cbc12e

data/README.md

@@ -1,6 +1,7 @@
 # Switchbox
 
-TODO: Write a gem description
+An awesome plugin that extends Rails FormBuilder making the boolean fields looks like an awesome animated switch.
+It's switchable, It's draggable, It's switchbox.
 
 ## Installation
 
@@ -16,9 +17,37 @@ Or install it yourself as:
 
     $ gem install switchbox
 
+Add this to application.js
+
+    //= require switch_rails
+
+And add this to application.css
+
+    *= require switch_rails
+
 ## Usage
 
-TODO: Write usage instructions here
+Instead of:
+
+    <%= f.check_box :boolean_field %>
+
+Use:
+
+    <%= f.switch_box :boolean_field %>
+
+##customization
+
+To override your switch use:
+
+ outterSwitch' class to modify the outer container
+
+ 'innerSwitch class to modify the inner switch
+
+ The first div with 'content' class will be the left option, and the seccond will be the right option.
+
+ #known bugs
+
+ You cannot edit the width of the switch yet or the texts inside the 'content' divs.  Ill release this fix really soon.
 
 ## Contributing
 

data/app/assets/javascripts/switch_rails.js

@@ -2,9 +2,10 @@
 
 function inicialSetCheckboxesState(checkbox) {
     var id = checkbox.prop('id');
-    console.log(checkbox);
     if (checkbox.prop('value') == 1) {
-        $('.outterSwitch[data-id=' +  id + '] div.innerSwitch').css({left: parseInt($('.outterSwitch[data-id=' +  id + '] div.innerSwitch').parent().css('width'),10)/2 });
+        var outterWidth = parseInt($('.outterSwitch[data-id=' +  id + '] div.innerSwitch').parent().css('width'),10);
+        var innerWidth = parseInt($('.outterSwitch[data-id=' +  id + '] div.innerSwitch').css('width'),10);
+        $('.outterSwitch[data-id=' +  id + '] div.innerSwitch').css({left: outterWidth-innerWidth });
         $('.outterSwitch[data-id=' +  id + '] .content[data-onoff=on]').css({ opacity: 1 });
         $('.outterSwitch[data-id=' +  id + '] .content[data-onoff=off]').css({ opacity: 0 });
         $('.outterSwitch[data-id=' +  id + ']').css('background-color', 'red');
@@ -18,11 +19,13 @@ function inicialSetCheckboxesState(checkbox) {
 
 function setCheckBoxState(checkbox, state) {
     var id = checkbox.prop('id');
+    var outterWidth = parseInt($('.outterSwitch[data-id=' +  id + '] div.innerSwitch').parent().css('width'),10);
+    var innerWidth = parseInt($('.outterSwitch[data-id=' +  id + '] div.innerSwitch').css('width'),10);
     if (state == true) {
         checkbox.prop('checked', true);
         checkbox.val(1);
         $('input[name="' +  checkbox.prop('name') + '"][type=hidden]').val(1);
-        $('.outterSwitch[data-id=' +  id + '] div.innerSwitch').animate({left: parseInt($('.outterSwitch[data-id=' +  id + '] div.innerSwitch').parent().css('width'),10)/2 }, 300);
+        $('.outterSwitch[data-id=' +  id + '] div.innerSwitch').animate({left: outterWidth-innerWidth }, 300);
         $('.outterSwitch[data-id=' +  id + '] .content[data-onoff=on]').animate({ opacity: 1 }, 300);
         $('.outterSwitch[data-id=' +  id + '] .content[data-onoff=off]').animate({ opacity: 0 }, 300);
         $('.outterSwitch[data-id=' +  id + ']').css('background-color', 'red');

data/app/assets/stylesheets/switch_rails.css

@@ -21,7 +21,7 @@
     transition: background-color .3s ease;
 }
 
-.innerSwitch {
+.outterSwitch .innerSwitch {
     position: relative;
     left: 0px;
     width: 25px;
@@ -34,7 +34,7 @@
     box-shadow: inset 0px 1px 6px 0px rgba(0,0,0,0.45);
 
 }
-.content {
+.outterSwitch .content {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9px;
     float: left;
@@ -44,7 +44,7 @@
     width: 50%;
     height: 100%;
 }
-.content p {
+.outterSwitch .content p {
     position: relative;
     text-align: center;
 }

data/lib/switchbox/version.rb

@@ -1,3 +1,3 @@
 module Switchbox
-  VERSION = "0.0.1"
+  VERSION = "1.0.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: switchbox
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 1.0.2
 platform: ruby
 authors:
 - Gabriel Hamdan
@@ -66,7 +66,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: Create switches to boolean fields
+description: An awesome plugin that extends Rails FormBuilder making the boolean fields
+  looks like an awesome animated switch
 email:
 - ghamdan.eng@gmail.com
 executables: []
@@ -81,7 +82,7 @@ files:
 - LICENSE.txt
 - Rakefile
 - README.md
-homepage: ''
+homepage: https://github.com/Hamdan85/switchbox
 licenses:
 - MIT
 metadata: {}
@@ -104,5 +105,6 @@ rubyforge_project:
 rubygems_version: 2.1.11
 signing_key: 
 specification_version: 4
-summary: Create switches to boolean fields
+summary: An awesome plugin that extends Rails FormBuilder making the boolean fields
+  looks like an awesome animated switch
 test_files: []