Initial commit

bootstrap-magic-button.css

@@ -0,0 +1,21 @@
+button[class^=magicBtn] {
+	display: none;
+	position: fixed;
+	border-style: none;
+	background: none;
+	background-repeat: no-repeat;
+	width: 47px;
+	height: 32px;
+	opacity: 0.7;
+}
+
+button[class*="magicBtn-active"] {
+	position: fixed;
+	border-style: none;
+	background: none;
+	background-repeat: no-repeat;
+	width: 47px;
+	height: 32px;
+	opacity: 1;
+}
+

bootstrap-magic-button.js

@@ -0,0 +1,190 @@
+/* ============================================================
+ * bootstrap-magic-button.js v1.0
+ * https://github.com/sp4ke/bootstrap-magic-button
+ * ============================================================
+ * Copyright 2012 Chakib Benziane
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Modified work : bootstrap-button.js v2.0.2
+ * Copyright 2012 Twitter, Inc.
+ * ============================================================ */
+
+!function( $ ){
+
+  "use strict"
+
+ /* BUTTON PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var MagicBtn = function ( element, options ) {
+    this.$element = $(element)
+	
+	// The parent Div
+	this.$parentDiv = $(element).closest('div')
+	this.$parentHeight = this.$parentDiv.outerHeight()
+	this.$parentWidth = this.$parentDiv.outerWidth()
+	this.$parentPosition = this.$parentDiv.position();
+    this.options = $.extend({}, $.fn.magicBtn.defaults, options)
+	
+	// Store number of buttons on parent div
+	if (!this.$parentDiv.data('nbMagicBtns'))
+		this.$parentDiv.data('nbMagicBtns', 1)
+	else
+		this.$parentDiv.data().nbMagicBtns++;
+		
+	// Store the current button number
+	this.$currentBtnNb = this.$parentDiv.data('nbMagicBtns')
+	
+	// store the currunt button size
+	this.$height = this.$element.outerHeight() + this.options.betweenSpace / 2
+	this.$width = this.$element.outerWidth()
+	
+	// current button image and toggle image if there is
+	this.$imgUrl = 'url("' + this.$element.data('image') + '")'
+	var toggleimg
+	if (toggleimg = this.$element.data('toggle-image')) 
+		this.$toggleImgUrl = 'url("' + toggleimg + '")'
+	else
+		this.$toggleImgUrl = this.$imgUrl
+		
+	
+	this.$isToggled = false
+	}
+	
+  MagicBtn.prototype = {
+
+      constructor: MagicBtn
+	
+	// state is the option recieved from jQuery plugin
+    , setState: function ( state ) {
+        var d = 'disabled'
+          , $el = this.$element
+          , data = $el.data()
+          , val = $el.is('input') ? 'val' : 'html'
+
+        state = state + 'Text'
+        data.resetText || $el.data('resetText', $el[val]())
+
+        $el[val](data[state] || this.options[state])
+
+        // push to event loop to allow forms to submit
+        setTimeout(function () {
+          state == 'loadingText' ?
+            $el.addClass(d).attr(d, d) :
+            $el.removeClass(d).removeAttr(d)
+        }, 0)
+      }
+	  
+	, calculatePosition: function(direction) {
+		var space = (this.$currentBtnNb === 1) ?  0 : this.options.betweenSpace
+		var left = this.$parentPosition.left + this.$parentWidth
+		switch (this.options.alignement) {
+			case 'top':
+				this.$top = (this.$currentBtnNb * this.$height) - this.$height + this.$parentPosition.top + (space * (this.$currentBtnNb - 1))
+				break;
+			case 'center':
+				{	
+					if (this.$currentBtnNb === 1)
+					{
+						this.$top = (this.$parentHeight / 2) - (this.$height / 2) + this.$parentPosition.top 
+						this.$parentDiv.data('top-space', this.$parentHeight / 2 - (this.$height /2))
+						this.$parentDiv.data('bottom-space', this.$parentHeight / 2 - (this.$height /2))
+					}
+					else if (this.$currentBtnNb % 2 === 0) {
+						this.$top = this.$parentDiv.data('top-space') - (this.$height) + this.$parentPosition.top 
+						this.$parentDiv.data('top-space', this.$parentDiv.data('top-space') - this.$height )
+					}
+					
+					else {
+						this.$top = this.$parentHeight - this.$parentDiv.data('bottom-space') + this.$parentPosition.top 
+						this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height )
+					}
+					break;
+						
+				}
+				
+		}
+		
+		this.$left = this.$parentPosition.left + this.$parentWidth
+	}
+	
+	, show: function() {
+		var $o = this.options
+		this.$element.css({
+			top: this.$top,
+			left: this.$left,
+			'background-image': this.$imgUrl,
+		}).show()
+	}
+	
+	, hide: function() {
+		this.$element.hide()
+	}
+
+    , toggle: function () {
+		var $el = this.$element
+		$el.toggleClass('magicBtn-active')
+		if (!this.$isToggled) {
+			$el.css('background-image', this.$toggleImgUrl)
+			this.$isToggled = true
+		}
+		else {
+			$el.css('background-image', this.$imgUrl)
+			this.$isToggled = false
+		}	
+      }
+
+  }
+
+
+ /* BUTTON PLUGIN DEFINITION
+  * ======================== */
+
+  $.fn.magicBtn = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('magicBtn')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('magicBtn', (data = new MagicBtn(this, options)))
+	  data.calculatePosition('right')
+      if (option == 'toggle') data.toggle()
+	  if (option == 'show') data.show()
+	  if (option == 'hide') data.hide()
+      else if (option) data.setState(option)
+	  
+    })
+  }
+
+  $.fn.magicBtn.defaults = {
+    loadingText: 'loading...',
+	direction: 'right',
+	betweenSpace: 2,
+	alignement: 'top'
+  }
+
+  $.fn.magicBtn.Constructor = MagicBtn
+
+
+ /* BUTTON DATA-API
+  * =============== */
+
+  $(function () {
+    $('body').on('click.magicBtn.data-api', '[data-toggle^=magicBtn]', function ( e ) {
+      var $btn = $(e.target)
+      if (!$btn.hasClass('magicBtn')) $btn = $btn.closest('.magicBtn')
+      $btn.magicBtn('toggle')
+    })
+  })
+
+}( window.jQuery );

example.html

@@ -0,0 +1,34 @@
+<html>
+<head>
+<link href="bootstrap-magic-button.css" rel="stylesheet">
+</head>
+<body>
+ <div id="display2"  style="width: 200px; height:200px; border: 1px solid blue;"></div> 
+
+<div id="display1"  style="width: 200px; height:200px; border: 1px solid red;">
+<p>test adsgdsgds</p>
+<br />
+
+<button class="magicBtn" data-image="magicBtn-pin-off.png" data-toggle="magicBtn" data-toggle-image="magicBtn-pin-on.png"/>
+<button class="magicBtn" data-image="magicBtn-pin-off.png" data-toggle="magicBtn" data-toggle-image="magicBtn-pin-on.png"/>
+
+
+
+
+
+</div>
+
+<!-- <button class="magicBtn" data-toggle="magicBtn" data-image="magicBtn-pin-off.png" data-toggle-image="magicBtn-pin-on.png"/>  -->
+
+
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="bootstrap-magic-button.js"></script>
+<script>
+$(function () {
+$('.magicBtn').magicBtn();
+});
+</script>
+
+</body>
+</html>