[Add] add feature to only create rcSwitcher once, optimization, add new theme yellowish-green, enhance autrostick

ahmad-sa3d · ahmad-sa3d · commit 314decb754ae · 2017-02-18T16:44:14.000+02:00
diff --git a/README.md b/README.md
@@ -24,11 +24,10 @@
 >@author	Ahmed Saad <a7mad.sa3d.2014@gmail.com>
 
 ### Version
-> 4.0
+> 4.1
 
 ### Updated
-> 29 Sep 2016
-
+> 18 Feb 2017
 
 ----
 
@@ -77,6 +76,25 @@
 ----
 ### Changelog:
 
+> __V 4.1__
+
+1. Add feature that input should only have on switcher
+		
+		$(':checkbox').rcSwitcher(); // create switcher
+		$(':checkbox').rcSwitcher(); // will not create switcher as it has already creatred
+		
+		
+2. Add rcSwitcher Object on input as property
+		
+		// We now can access rcSwitcher Object from element itself
+		$('#input').rcSwitcher(); // Create Switcher
+		
+		$('#input').[0].rcSwitcher; // Access its rcSwitcher Object
+		
+3. Add attribute 'data-has-rcswitcher="1"' on input to mark that input has rcswitcher
+4. Enhance Auto Stick
+
+> __V 4.0.1__
 
 1. add support for control switch by changing input _`check`_ status
 	
@@ -96,7 +114,9 @@
 2. change `change.rcSwitcher` Event to `toggle.rcSwitcher` to avoid built-in javascript `change` event
 3. enhance __*Demo*__ example to adapt with screen sizes and mobile phones
 4. some other tweaks.
-	####*Version 4 Changes :*
+
+> __V 4.0__
+
 5. Add Support For Track Disable And Enable Status on changing _`disable`_ status on Input'
 	
 		$input = $('input[type=checkbox]').first().rcSwitcher();
diff --git a/css/rcswitcher.css b/css/rcswitcher.css
@@ -292,3 +292,38 @@ background: linear-gradient(#e4e4e4, #f9f9f9);
 .swraper.flat .stoggler .slabel-on:before, .swraper.flat .stoggler .slabel-off:before{}
 
 /* ------------  END THEME Flat ------------ */
+
+/* ------------  THEME Yellowish-green ------------ */
+.swraper.yellowish-green
+{
+	border-radius: 99px;
+	border: 2px solid #58d30b;
+}
+
+.swraper.yellowish-green .stoggler
+{
+	color: rgba( 0, 0, 0, 0.6 );
+}
+
+.swraper.yellowish-green .stoggler.on
+{
+}
+
+.swraper.yellowish-green .stoggler .sblob
+{
+	border-radius: 99px;
+	background: #ff8700;
+	transition: background linear .5s;
+}
+
+.swraper.yellowish-green .stoggler.on .sblob
+{
+	background: #58d30b;
+}
+
+.swraper.yellowish-green .stoggler .sblob:hover
+{
+	background: #0bcfd3;
+}
+
+/* ------------  END THEME yellowish-green ------------ */
diff --git a/index.html b/index.html
@@ -5,19 +5,22 @@
 	<meta charset="UTF-8" >
 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	<link type="text/css" rel="stylesheet" href="css/style.min.css">
-	<link type="text/css" rel="stylesheet" href="css/rcswitcher.min.css">
+	<link type="text/css" rel="stylesheet" href="css/rcswitcher.css">
 	<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
-	<script type="text/javascript" src="js/rcswitcher-4.0.min.js"></script>
+	<script type="text/javascript" src="js/rcswitcher.js"></script>
 
 	<script>
 
 			window.onload = function(){
 
 				$('.gender :radio').rcSwitcher({
 					// reverse: true,
-					theme: 'light',
-					// width: 70,
-					blobOffset: 0,
+					theme: 'yellowish-green',
+					width: 48,
+					height: 16,
+					onText: '&check;',
+					offText: '&cross;',
+					blobOffset: 2,
 					inputs: true,
 					autoStick: true,
 				})
diff --git a/js/rcswitcher.js b/js/rcswitcher.js
@@ -9,7 +9,11 @@
  *
  * @package 	rcSwitcher
  * @name 		rcSwitcher
- * @version 	4.0	< 29 Sep 2016 >	
+ * @version 	4.1	< 18 Feb 2017 >	
+ * @changes 	4.1 - Add feature that input shold only have on switcher
+ * 					- Add rcSwitcher Object on input as property
+ * 					- Add attribute 'data-has-rcswitcher="1"' on input to mark that input has rcswitcher
+ * 					- Enhance Auto Stick
  * @author  	ahmed saad <a7mad.sa3d.2014@gmail.com><ahmedfadlshaker@gmail.com>
  * @copyright  	ahmed saad april 2015
  * @link 		http://plus.google.com/+AhmedSaadGmail
@@ -34,7 +38,7 @@
 		$blob: $( '<span>', {'class': 'sblob'} ),
 
 		// Allowed Themes
-		themes: [ 'light', 'modern', 'dark', 'flat' ],
+		themes: [ 'light', 'modern', 'dark', 'flat', 'yellowish-green' ],
 
 	};
 
@@ -64,6 +68,12 @@
 			switcherP.$this.each( function( i, input )
 			{
 				// console.log( $input.type );
+				if( input.hasOwnProperty( 'rcSwitcher' ) )
+				{
+					console.warn( 'already has instance' );
+					return;
+				}
+
 				this.makeSwitcher( $( input ), switcherP, options );
 			}.bind( this ) );
 
@@ -198,6 +208,12 @@
 			// Add to switchers collections
 			switcherP.$switchers = switcherP.$switchers.add( data.$switcher );
 
+			// Store In Element Input JS
+			$input[0].rcSwitcher = data;
+
+			// Add attribute to mark this input that it has rcswitcher
+			$input.attr( 'data-has-rcswitcher', 1 );
+
 			// Update input type length
 			cat.length++;
 
@@ -308,7 +324,17 @@
 					var margin = parentAW - options.width;
 
 					// remove border width if exists
-					margin -= ( options.theme == 'dark' ) ? 0 : 2;
+					switch( options.theme )
+					{
+						case 'dark':
+							margin -= 2;
+							break;
+
+						case 'yellowish-green':
+							margin -= 4;
+							break;
+					}
+					
 
 					// Left OR Right margin
 					if( switcherP.cssValues.dir == 'rtl' )
@@ -471,7 +497,6 @@
 					{
 						--family.disabled;
 						++family.enabled;
-						// If Checked, Disable All Group
 						if( family.enabled - family.disabled >= 2 )
 							family.switchable = true;
 
@@ -509,9 +534,11 @@
 				data.$input.prop( 'checked', false );
 
 			// Fire Event and pass data object to event handler
-			data.$input.trigger( 'turnoff.rcSwitcher', data );
-			data.$input.trigger( 'toggle.rcSwitcher', [ data, 'turnoff' ] );
-
+			// Wait Transition 500ms Time 
+			setTimeout( function(){
+				data.$input.trigger( 'turnoff.rcSwitcher', data );
+				data.$input.trigger( 'toggle.rcSwitcher', [ data, 'turnoff' ] );
+			}, 500 );
 		},
 
 
@@ -540,8 +567,12 @@
 			if( !outsideChange )
 				data.$input.prop( 'checked', true );
 
-			data.$input.trigger( 'turnon.rcSwitcher', data );
-			data.$input.trigger( 'toggle.rcSwitcher', [ data, 'turnon' ] );
+			// Wait Transition 500ms Time 
+			setTimeout( function(){
+				data.$input.trigger( 'turnon.rcSwitcher', data );
+				data.$input.trigger( 'toggle.rcSwitcher', [ data, 'turnon' ] );
+			}, 500 );
+
 
 		},
 
@@ -565,20 +596,14 @@
 
 
 			// On Click on switchers
-			switcherP.$switchers.on( 'click', function( e ){
-			// $switcher.on( 'click', function( e ){
-
-				// console.log( e.currentTarget );
+			switcherP.$switchers.on( 'click', function( e )
+			{
 				var obj = {};
 
 				obj.type = e.currentTarget.getAttribute( 'input-type' );
 				obj.name = e.currentTarget.getAttribute( 'input-name' );
 				obj.value = e.currentTarget.getAttribute( 'input-value' );
 
-				// obj.type = $switcher.attr( 'input-type' );
-				// obj.name = $switcher.attr( 'input-name' );
-				// obj.value = $switcher.attr( 'input-value' );
-
 				// Toggle
 				this.toggle( obj, switcherP );
 
@@ -628,11 +653,11 @@
 		// Filter this
 		// Get Only Checkbox and Radio inputs only
 
-		switcherP.$this = this.filter( 'input[type=checkbox], input[type=radio]' );
+		switcherP.$this = this.filter( 'input[type=checkbox], input[type=radio]' ).not( '[data-has-rcswitcher]' );
 
 		// Stop if we havenot any checkboxs or radios
 		if( switcherP.$this.length == 0 )
-			return;
+			return this;
 
 		switcherP.cssValues.dir = window.getComputedStyle( switcherP.$this[0], null ).direction || 'ltr';
 
@@ -672,7 +697,6 @@
 		// Start
 		switcherM.start( switcherP, options );
 
-		
 		// Return selected jquery object to allow chaining
 		return this;
 
