1/** 2 * Toolbar.js 3 * 4 * @fileoverview jQuery plugin that creates tooltip style toolbars. 5 * @link http://paulkinzett.github.com/toolbar/ 6 * @author Paul Kinzett (http://kinzett.co.nz/) 7 * @version 1.0.4 8 * @requires jQuery 1.7+ 9 * 10 * @license jQuery Toolbar Plugin v1.0.4 11 * http://paulkinzett.github.com/toolbar/ 12 * Copyright 2013 Paul Kinzett (http://kinzett.co.nz/) 13 * Released under the MIT license. 14 * <https://raw.github.com/paulkinzett/toolbar/master/LICENSE.txt> 15 */ 16 17if ( typeof Object.create !== 'function' ) { 18 Object.create = function( obj ) { 19 function F() {} 20 F.prototype = obj; 21 return new F(); 22 }; 23} 24 25(function( $, window, document, undefined ) { 26 27 var ToolBar = { 28 init: function( options, elem ) { 29 var self = this; 30 self.elem = elem; 31 self.$elem = $( elem ); 32 self.options = $.extend( {}, $.fn.toolbar.options, options ); 33 self.toolbar = $('<div class="tool-container gradient" />') 34 .addClass('tool-'+self.options.position) 35 .addClass('tool-rounded') 36 .append('<div class="tool-items" />') 37 .append('<div class="arrow" />') 38 .appendTo('body') 39 .css('opacity', 0) 40 .hide(); 41 self.toolbar_arrow = self.toolbar.find('.arrow'); 42 self.initializeToolbar(); 43 }, 44 45 initializeToolbar: function() { 46 var self = this; 47 self.populateContent(); 48 self.setTrigger(); 49 self.toolbarWidth = self.toolbar.width(); 50 }, 51 52 setTrigger: function() { 53 var self = this; 54 55 self.$elem.on('click', function(event) { 56 event.preventDefault(); 57 if(self.$elem.hasClass('pressed')) { 58 self.hide(); 59 } else { 60 self.show(); 61 } 62 }); 63 64 if (self.options.hideOnClick) { 65 $('html').on("click.toolbar", function ( event ) { 66 if (event.target != self.elem && 67 self.$elem.has(event.target).length === 0 && 68 self.toolbar.has(event.target).length === 0 && 69 self.toolbar.is(":visible")) { 70 self.hide(); 71 } 72 }); 73 } 74 75 $(window).resize(function( event ) { 76 event.stopPropagation(); 77 if ( self.toolbar.is(":visible") ) { 78 self.toolbarCss = self.getCoordinates(self.options.position, 20); 79 self.collisionDetection(); 80 self.toolbar.css( self.toolbarCss ); 81 self.toolbar_arrow.css( self.arrowCss ); 82 } 83 }); 84 }, 85 86 populateContent: function() { 87 var self = this; 88 var location = self.toolbar.find('.tool-items'); 89 var content = $(self.options.content).clone( true ).find('a').addClass('tool-item gradient'); 90 location.html(content); 91 location.find('.tool-item').on('click', function(event) { 92 event.preventDefault(); 93 self.$elem.trigger('toolbarItemClick', this); 94 }); 95 }, 96 97 calculatePosition: function() { 98 var self = this; 99 self.arrowCss = {}; 100 self.toolbarCss = self.getCoordinates(self.options.position, 0); 101 self.toolbarCss.position = 'absolute'; 102 self.toolbarCss.zIndex = self.options.zIndex; 103 self.collisionDetection(); 104 self.toolbar.css(self.toolbarCss); 105 self.toolbar_arrow.css(self.arrowCss); 106 }, 107 108 getCoordinates: function( position, adjustment ) { 109 var self = this; 110 self.coordinates = self.$elem.offset(); 111 112 if (self.options.adjustment && self.options.adjustment[self.options.position]) { 113 adjustment = self.options.adjustment[self.options.position] + adjustment; 114 } 115 116 switch(self.options.position) { 117 case 'top': 118 return { 119 left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.outerWidth()/2), 120 //top: self.coordinates.top-self.$elem.height()-adjustment, 121 right: 'auto' 122 }; 123 case 'left': 124 return { 125 left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment, 126 top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.outerHeight()/2), 127 right: 'auto' 128 }; 129 case 'right': 130 return { 131 left: self.coordinates.left+(self.toolbar.width()/2)+(self.$elem.width()/3)+adjustment, 132 top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.outerHeight()/2), 133 right: 'auto' 134 }; 135 case 'bottom': 136 return { 137 left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.outerWidth()/2), 138 top: self.coordinates.top+self.$elem.height()+adjustment, 139 right: 'auto' 140 }; 141 } 142 }, 143 144 collisionDetection: function() { 145 var self = this; 146 var edgeOffset = 20; 147 if(self.options.position =='top' || self.options.position == 'bottom') { 148 self.arrowCss = {left: '50%', right: '50%'}; 149 if( self.toolbarCss.left < edgeOffset ) { 150 self.toolbarCss.left = edgeOffset; 151 self.arrowCss.left = self.$elem.offset().left + self.$elem.width()/2-(edgeOffset); 152 } 153 else if(($(window).width() - (self.toolbarCss.left + self.toolbarWidth)) < edgeOffset) { 154 self.toolbarCss.right = edgeOffset; 155 self.toolbarCss.left = 'auto'; 156 self.arrowCss.left = 'auto'; 157 self.arrowCss.right = ($(window).width()-self.$elem.offset().left)-(self.$elem.width()/2)-(edgeOffset)-5; 158 } 159 } 160 }, 161 162 show: function() { 163 var self = this; 164 var animation = {'opacity': 1}; 165 166 self.$elem.addClass('pressed'); 167 self.calculatePosition(); 168 169 switch(self.options.position) { 170 case 'top': 171 //animation.top = '-=20'; 172 break; 173 case 'left': 174 animation.left = '-=20'; 175 break; 176 case 'right': 177 animation.left = '+=20'; 178 break; 179 case 'bottom': 180 animation.top = '+=20'; 181 break; 182 } 183 184 self.toolbar.show().animate(animation, 200 ); 185 self.$elem.trigger('toolbarShown'); 186 }, 187 188 hide: function() { 189 var self = this; 190 var animation = {'opacity': 0}; 191 192 self.$elem.removeClass('pressed'); 193 194 switch(self.options.position) { 195 case 'top': 196 //animation.top = '+=20'; 197 break; 198 case 'left': 199 animation.left = '+=20'; 200 break; 201 case 'right': 202 animation.left = '-=20'; 203 break; 204 case 'bottom': 205 animation.top = '-=20'; 206 break; 207 } 208 209 self.toolbar.animate(animation, 200, function() { 210 self.toolbar.hide(); 211 }); 212 213 self.$elem.trigger('toolbarHidden'); 214 }, 215 216 getToolbarElement: function () { 217 return this.toolbar.find('.tool-items'); 218 } 219 }; 220 221 $.fn.toolbar = function( options ) { 222 if ($.isPlainObject( options )) { 223 return this.each(function() { 224 var toolbarObj = Object.create( ToolBar ); 225 toolbarObj.init( options, this ); 226 $(this).data('toolbarObj', toolbarObj); 227 }); 228 } else if ( typeof options === 'string' && options.indexOf('_') !== 0 ) { 229 var toolbarObj = $(this).data('toolbarObj'); 230 var method = toolbarObj[options]; 231 return method.apply(toolbarObj, $.makeArray(arguments).slice(1)); 232 } 233 }; 234 235 $.fn.toolbar.options = { 236 content: '#myContent', 237 position: 'top', 238 hideOnClick: false, 239 zIndex: 120 240 }; 241 242}) ( jQuery, window, document );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.