From b5fa5ae326b03228e195ab5bfd90fb747c1190f1 Mon Sep 17 00:00:00 2001 From: Chakib Benziane Date: Wed, 28 Mar 2012 14:39:25 +0200 Subject: [PATCH] Initial commit --- bootstrap-magic-button.css | 21 ++++ bootstrap-magic-button.js | 190 +++++++++++++++++++++++++++++++++++++ example.html | 34 +++++++ magicBtn-msg.png | Bin 0 -> 655 bytes magicBtn-pin-off.png | Bin 0 -> 818 bytes magicBtn-pin-on.png | Bin 0 -> 714 bytes 6 files changed, 245 insertions(+) create mode 100644 bootstrap-magic-button.css create mode 100644 bootstrap-magic-button.js create mode 100644 example.html create mode 100644 magicBtn-msg.png create mode 100644 magicBtn-pin-off.png create mode 100644 magicBtn-pin-on.png diff --git a/bootstrap-magic-button.css b/bootstrap-magic-button.css new file mode 100644 index 0000000..5bf51b0 --- /dev/null +++ b/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; +} + diff --git a/bootstrap-magic-button.js b/bootstrap-magic-button.js new file mode 100644 index 0000000..9d27d89 --- /dev/null +++ b/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 ); \ No newline at end of file diff --git a/example.html b/example.html new file mode 100644 index 0000000..e91a678 --- /dev/null +++ b/example.html @@ -0,0 +1,34 @@ + + + + + +
+ +
+

test adsgdsgds

+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/magicBtn-msg.png b/magicBtn-msg.png new file mode 100644 index 0000000000000000000000000000000000000000..67107613ced42833ef70aca98c808402b1d2ab44 GIT binary patch literal 655 zcmV;A0&x9_P)qk2-j={UCo?k7qyL@Ao%!aLv5{+9fRH%jFWr zIgX3PVlblD>-~N|tnrWn<2=u&QYov|df24f?cUSDHH*b!MM5>Oe%tN#!C(MS!S>VX zbUYsKXTqCHCX;Yt!JOkwU|Czy!8J>Pb7w28;)gl#Li70?KB<#4p=L?v#IfN?uUtM} zueVyQwpy)lIBYZ;&rO4KnWuB2=8kkFTC>@_ql0T;h$D%wX*3!f9b5xLwAks9sT2$b6$%CX paC^BAXGPnh{Ok=&lA_im}dvkNcGvwmpLa9^=ZN7H` zr_-r=z-F^yen<{!G#Y(J$em&-{Gyel(-&DTz_v$Lbq=~$te znVCYNAU=w)`O-EgCnvA|q1WqKq51iF@qvWR=k^E$0;8j&C|4vS91f3+j5KXlS69Wy z5;l#OQmfTG9?#Iw5IcV%hYSr551Y;AVzDS5fw1}XB2G_F@!LoV`)JT)QB7$4kw~Om zE=vX>Z0gTvcX!udFsL4be56vTXT>3GK5|g0RHmk;G#btJ_BK>-AW*>>lod}X7Q&_` z1*Y5B*jO_GUauF$!cG^Q^!xpiaatj4s!~LwQ8o?eD?XoZd3m`hgw+6(Kr&7%gv|#I z&}!La;27Oyad8n@fm}YH=LymZVN>A%x9)PeSRqss(zCL%l1wIfB9IU^@A<&3I2;c4 zk!iKswY4?Q;Ut7jnU8EXn@A)kCnp8-Hx`R=MrehwdB?%o*%>Mvg@e7z!ootc>EQrh z@kAgYY~D(Nos`jNL>-}D;Uk1l;rDZSV`D>dxCn$zK@?nIGMSc^me`Y+)a&c(*l!ow zgRr?41)Dl7gxB4Hu*p9GuAZKr-rCyAcMZbkiUOMfbi80Nc-2h^n_LU1y}7wLtd6-Z zL)f%}*PMfc1If$URCwCOm`iIKQ5c5Zx$_seb0MPOB8>svDWV%A0mVQRynzc5 zQN)Fbi?|U)B%&bdN)az88sfqW;-$4psclM2Lu#p(mR@KV{)F~RgED>-gy|yZSg z&UxlNXU@#XVv&Q-=Nk-$QmOQ34eJ?&-;c{=GRb5zM@L6WrE;}eVVhrs$mMeT`}^4D zCpla$S2!HrviU)dUauz>i??jPlViDDvf1n{n{Pz9yUnOJUx|Wkz7Pf5d?pIESu!V| z&&Oi1X0!PpZ4ub!6GPl?_mh7}B$8Ar#k4sB+k9k*TCLt&$C6A0||^fVfcX0us%B2K4MsO)q)n@VtMG#d2Yu+0aC zP;EROk4B@}oWk_MqX%a2;NSoblF8)eCy1w3tI>PIHn$XJv)O1g8V-kp!2q`HZnt}R zd08%(3xz^DosP%jl}bgWQc<%xJUrZc2%%7TadClcZfRhf8wzkWo;47@)9G|L95$QH zWHKEeAH%@s=jT)#lnoV;NR&t05G?0nv52yv_l9lWGK89q&*y8m+pSh>JRZZEgT0kn36~C{_my(F z{K2uX%^QZmOXS8T7!2+%h8+cV?MNg7x6gwG*yc4u`u#r41uSjY`XFki%@Nq<6;ZIw zOQK+#7ev7}Q=(v-=S0Ca1gTc5TrPLZ<|#P>fq>Cy+_D)GqF%2H1OoWR+p_6DI#*X$ wXJ=i_@%07*qoM6N<$g2G!$oB#j- literal 0 HcmV?d00001