/
Gists
/
Plugin patterns
Gists - Plugin patterns
On gists
Plugin patterns
jQuery
jQuery-plugins
jQuery: plugin pattern
jquery.plugin_pattern.js #
/*
* Project:
* Description:
* Author:
* License:
*/
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {
// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.
// window is passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).
var pluginName = "linkColor",
// the name of using in .data()
dataPlugin = "plugin_" + pluginName,
// default options
defaults = {
color: "black"
};
var privateMethod = function () {
console.log("private method");
};
// The actual plugin constructor
var Plugin = function ( element ) {
/*
* Plugin instantiation
*/
this.options = $.extend( {}, defaults );
};
Plugin.prototype = {
init: function ( options ) {
// extend options ( http://api.jquery.com/jQuery.extend/ )
$.extend( this.options, options );
/*
* Place initialization logic here
*/
this.element.css( 'color', 'red' );
},
destroy: function () {
// unset Plugin data instance
this.element.data( dataPlugin, null );
},
// public get method
href: function () {
return this.element.attr( 'href' );
},
// public chaining method
changeBG: function ( color = null ) {
color = color || this.options['color'];
return this.element.each(function () {
// .css() doesn't need .each(), here just for example
$(this).css( 'background', color );
});
}
}
/*
* Plugin wrapper, preventing against multiple instantiations and
* allowing any public function to be called via the jQuery plugin,
* e.g. $(element).pluginName('functionName', arg1, arg2, ...)
*/
$.fn[ pluginName ] = function ( arg ) {
var args, instance;
// only allow the plugin to be instantiated once
if (!( this.data( dataPlugin ) instanceof Plugin )) {
// if no instance, create one
this.data( dataPlugin, new Plugin( this ) );
}
instance = this.data( dataPlugin );
instance.element = this;
// Is the first parameter an object (arg), or was omitted,
// call Plugin.init( arg )
if (typeof arg === 'undefined' || typeof arg === 'object') {
if ( typeof instance['init'] === 'function' ) {
instance.init( arg );
}
// checks that the requested public method exists
} else if ( typeof arg === 'string' && typeof instance[arg] === 'function' ) {
// copy arguments & remove function name
args = Array.prototype.slice.call( arguments, 1 );
// call the method
return instance[arg].apply( instance, args );
} else {
$.error('Method ' + arg + ' does not exist on jQuery.' + pluginName);
}
};
}(jQuery, window, document));
On gists
JavaScript-OOP
JavaScript
Plugin patterns
JS: patterns Singleton
singleton.js #
var mySingleton = (function () {
// Instance stores a reference to the Singleton
var instance;
function init() {
// Singleton
// Private methods and variables
function privateMethod(){
console.log( "I am private" );
}
var privateVariable = "Im also private";
return {
// Public methods and variables
publicMethod: function () {
console.log( "The public can see me!" );
},
publicProperty: "I am also public"
};
}
return {
// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function () {
if ( !instance ) {
instance = init();
}
return instance;
}
};
})();
On gists
Plugin patterns
jQuery
jQuery-plugins
Common jQuery pattern
plugin.js #
var $ = jQuery.noConflict();
var Plugin = function($self, options) {
this.$self = $self;
this.options = $.extend({}, $.fn.plugin.defaults, options);
};
Plugin.prototype.init = function() {
this.$self.css('color', this.options.color);
};
Plugin.prototype.update = function(newText, author) {
this.$self.html(newText, author);
};
$.fn.plugin = function(option) {
var options = typeof option == "object" && option;
var data = arguments
return this.each(function() {
var $this = $(this);
var $plugin = $this.data("plugin");
if (!$plugin) {
$plugin = new Plugin($this, options);
$this.data("plugin", $plugin);
}
if (typeof option == 'string') {
$plugin[option].apply($plugin, Array.prototype.slice.call( data, 1 ));
} else {
$plugin.init();
}
});
};
$.fn.plugin.defaults = {
color: "black"
};
// usage
var p1 = $('p').eq(0).plugin();
var p2 = $('p').eq(1).plugin({
color: 'red'
});
p2.plugin('update', 'This is a new text', 'by some author');
On gists
Plugin patterns
jQuery-plugins
Star rating (pattern: plugin prototype)
rating.js #
/*
* jQuery StarRatingSvg v1.2.0
*
* http://github.com/nashio/star-rating-svg
* Author: Ignacio Chavez
* hello@ignaciochavez.com
* Licensed under MIT
*/
;(function ( $, window, document, undefined ) {
'use strict';
// Create the defaults once
var pluginName = 'starRating';
var noop = function(){};
var defaults = {
totalStars: 5,
useFullStars: false,
starShape: 'straight',
emptyColor: 'lightgray',
hoverColor: 'orange',
activeColor: 'gold',
ratedColor: 'crimson',
useGradient: true,
readOnly: false,
disableAfterRate: true,
baseUrl: false,
starGradient: {
start: '#FEF7CD',
end: '#FF9511'
},
strokeWidth: 4,
strokeColor: 'black',
initialRating: 0,
starSize: 40,
callback: noop,
onHover: noop,
onLeave: noop
};
// The actual plugin constructor
var Plugin = function( element, options ) {
var _rating;
var newRating;
var roundFn;
this.element = element;
this.$el = $(element);
this.settings = $.extend( {}, defaults, options );
// grab rating if defined on the element
_rating = this.$el.data('rating') || this.settings.initialRating;
// round to the nearest half
roundFn = this.settings.forceRoundUp ? Math.ceil : Math.round;
newRating = (roundFn( _rating * 2 ) / 2).toFixed(1);
this._state = {
rating: newRating
};
// create unique id for stars
this._uid = Math.floor( Math.random() * 999 );
// override gradient if not used
if( !options.starGradient && !this.settings.useGradient ){
this.settings.starGradient.start = this.settings.starGradient.end = this.settings.activeColor;
}
this._defaults = defaults;
this._name = pluginName;
this.init();
};
var methods = {
init: function () {
this.renderMarkup();
this.addListeners();
this.initRating();
},
addListeners: function(){
if( this.settings.readOnly ){ return; }
this.$stars.on('mouseover', this.hoverRating.bind(this));
this.$stars.on('mouseout', this.restoreState.bind(this));
this.$stars.on('click', this.handleRating.bind(this));
},
// apply styles to hovered stars
hoverRating: function(e){
var index = this.getIndex(e);
this.paintStars(index, 'hovered');
this.settings.onHover(index + 1, this._state.rating, this.$el);
},
// clicked on a rate, apply style and state
handleRating: function(e){
var index = this.getIndex(e);
var rating = index + 1;
this.applyRating(rating, this.$el);
this.executeCallback( rating, this.$el );
if(this.settings.disableAfterRate){
this.$stars.off();
}
},
applyRating: function(rating){
var index = rating - 1;
// paint selected and remove hovered color
this.paintStars(index, 'rated');
this._state.rating = index + 1;
this._state.rated = true;
},
restoreState: function(e){
var index = this.getIndex(e);
var rating = this._state.rating || -1;
// determine star color depending on manually rated
var colorType = this._state.rated ? 'rated' : 'active';
this.paintStars(rating - 1, colorType);
this.settings.onLeave(index + 1, this._state.rating, this.$el);
},
getIndex: function(e){
var $target = $(e.currentTarget);
var width = $target.width();
var side = $(e.target).attr('data-side');
var minRating = this.settings.minRating;
// hovered outside the star, calculate by pixel instead
side = (!side) ? this.getOffsetByPixel(e, $target, width) : side;
side = (this.settings.useFullStars) ? 'right' : side ;
// get index for half or whole star
var index = $target.index() - ((side === 'left') ? 0.5 : 0);
// pointer is way to the left, rating should be none
index = ( index < 0.5 && (e.offsetX < width / 4) ) ? -1 : index;
// force minimum rating
index = ( minRating && minRating <= this.settings.totalStars && index < minRating ) ? minRating - 1 : index;
return index;
},
getOffsetByPixel: function(e, $target, width){
var leftX = e.pageX - $target.offset().left;
return ( leftX <= (width / 2) && !this.settings.useFullStars) ? 'left' : 'right';
},
initRating: function(){
this.paintStars(this._state.rating - 1, 'active');
},
paintStars: function(endIndex, stateClass){
var $polygonLeft;
var $polygonRight;
var leftClass;
var rightClass;
$.each(this.$stars, function(index, star){
$polygonLeft = $(star).find('[data-side="left"]');
$polygonRight = $(star).find('[data-side="right"]');
leftClass = rightClass = (index <= endIndex) ? stateClass : 'empty';
// has another half rating, add half star
leftClass = ( index - endIndex === 0.5 ) ? stateClass : leftClass;
$polygonLeft.attr('class', 'svg-' + leftClass + '-' + this._uid);
$polygonRight.attr('class', 'svg-' + rightClass + '-' + this._uid);
}.bind(this));
},
renderMarkup: function () {
var s = this.settings;
var baseUrl = s.baseUrl ? location.href.split('#')[0] : '';
// inject an svg manually to have control over attributes
var star = '<div class="jq-star" style="width:' + s.starSize+ 'px; height:' + s.starSize + 'px;"><svg version="1.0" class="jq-star-svg" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" ' + this.getSvgDimensions(s.starShape) + ' stroke-width:' + s.strokeWidth + 'px;" xml:space="preserve"><style type="text/css">.svg-empty-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + '_SVGID_1_);}.svg-hovered-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + '_SVGID_2_);}.svg-active-' + this._uid + '{fill:url(' + baseUrl + '#' + this._uid + '_SVGID_3_);}.svg-rated-' + this._uid + '{fill:' + s.ratedColor + ';}</style>' +
this.getLinearGradient(this._uid + '_SVGID_1_', s.emptyColor, s.emptyColor, s.starShape) +
this.getLinearGradient(this._uid + '_SVGID_2_', s.hoverColor, s.hoverColor, s.starShape) +
this.getLinearGradient(this._uid + '_SVGID_3_', s.starGradient.start, s.starGradient.end, s.starShape) +
this.getVectorPath(this._uid, {
starShape: s.starShape,
strokeWidth: s.strokeWidth,
strokeColor: s.strokeColor
} ) +
'</svg></div>';
// inject svg markup
var starsMarkup = '';
for( var i = 0; i < s.totalStars; i++){
starsMarkup += star;
}
this.$el.append(starsMarkup);
this.$stars = this.$el.find('.jq-star');
},
getVectorPath: function(id, attrs){
return (attrs.starShape === 'rounded') ?
this.getRoundedVectorPath(id, attrs) : this.getSpikeVectorPath(id, attrs);
},
getSpikeVectorPath: function(id, attrs){
return '<polygon data-side="center" class="svg-empty-' + id + '" points="281.1,129.8 364,55.7 255.5,46.8 214,-59 172.5,46.8 64,55.4 146.8,129.7 121.1,241 212.9,181.1 213.9,181 306.5,241 " style="fill: transparent; stroke: ' + attrs.strokeColor + ';" />' +
'<polygon data-side="left" class="svg-empty-' + id + '" points="281.1,129.8 364,55.7 255.5,46.8 214,-59 172.5,46.8 64,55.4 146.8,129.7 121.1,241 213.9,181.1 213.9,181 306.5,241 " style="stroke-opacity: 0;" />' +
'<polygon data-side="right" class="svg-empty-' + id + '" points="364,55.7 255.5,46.8 214,-59 213.9,181 306.5,241 281.1,129.8 " style="stroke-opacity: 0;" />';
},
getRoundedVectorPath: function(id, attrs){
var fullPoints = 'M520.9,336.5c-3.8-11.8-14.2-20.5-26.5-22.2l-140.9-20.5l-63-127.7 c-5.5-11.2-16.8-18.2-29.3-18.2c-12.5,0-23.8,7-29.3,18.2l-63,127.7L28,314.2C15.7,316,5.4,324.7,1.6,336.5S1,361.3,9.9,370 l102,99.4l-24,140.3c-2.1,12.3,2.9,24.6,13,32c5.7,4.2,12.4,6.2,19.2,6.2c5.2,0,10.5-1.2,15.2-3.8l126-66.3l126,66.2 c4.8,2.6,10,3.8,15.2,3.8c6.8,0,13.5-2.1,19.2-6.2c10.1-7.3,15.1-19.7,13-32l-24-140.3l102-99.4 C521.6,361.3,524.8,348.3,520.9,336.5z';
return '<path data-side="center" class="svg-empty-' + id + '" d="' + fullPoints + '" style="stroke: ' + attrs.strokeColor + '; fill: transparent; " /><path data-side="right" class="svg-empty-' + id + '" d="' + fullPoints + '" style="stroke-opacity: 0;" /><path data-side="left" class="svg-empty-' + id + '" d="M121,648c-7.3,0-14.1-2.2-19.8-6.4c-10.4-7.6-15.6-20.3-13.4-33l24-139.9l-101.6-99 c-9.1-8.9-12.4-22.4-8.6-34.5c3.9-12.1,14.6-21.1,27.2-23l140.4-20.4L232,164.6c5.7-11.6,17.3-18.8,30.2-16.8c0.6,0,1,0.4,1,1 v430.1c0,0.4-0.2,0.7-0.5,0.9l-126,66.3C132,646.6,126.6,648,121,648z" style="stroke: ' + attrs.strokeColor + '; stroke-opacity: 0;" />';
},
getSvgDimensions: function(starShape){
return (starShape === 'rounded') ? 'width="550px" height="500.2px" viewBox="0 146.8 550 500.2" style="enable-background:new 0 0 550 500.2;' : 'x="0px" y="0px" width="305px" height="305px" viewBox="60 -62 309 309" style="enable-background:new 64 -59 305 305;';
},
getLinearGradient: function(id, startColor, endColor, starShape){
var height = (starShape === 'rounded') ? 500 : 250;
return '<linearGradient id="' + id + '" gradientUnits="userSpaceOnUse" x1="0" y1="-50" x2="0" y2="' + height + '"><stop offset="0" style="stop-color:' + startColor + '"/><stop offset="1" style="stop-color:' + endColor + '"/> </linearGradient>';
},
executeCallback: function(rating, $el){
var callback = this.settings.callback;
callback(rating, $el);
}
};
var publicMethods = {
unload: function() {
var _name = 'plugin_' + pluginName;
var $el = $(this);
var $starSet = $el.data(_name).$stars;
$starSet.off();
$el.removeData(_name).remove();
},
setRating: function(rating, round) {
var _name = 'plugin_' + pluginName;
var $el = $(this);
var $plugin = $el.data(_name);
if( rating > $plugin.settings.totalStars || rating < 0 ) { return; }
if( round ){
rating = Math.round(rating);
}
$plugin.applyRating(rating);
},
getRating: function() {
var _name = 'plugin_' + pluginName;
var $el = $(this);
var $starSet = $el.data(_name);
return $starSet._state.rating;
},
resize: function(newSize) {
var _name = 'plugin_' + pluginName;
var $el = $(this);
var $starSet = $el.data(_name);
var $stars = $starSet.$stars;
if(newSize <= 1 || newSize > 200) {
console.log('star size out of bounds');
return;
}
$stars = Array.prototype.slice.call($stars);
$stars.forEach(function(star){
$(star).css({
'width': newSize + 'px',
'height': newSize + 'px'
});
});
},
setReadOnly: function(flag) {
var _name = 'plugin_' + pluginName;
var $el = $(this);
var $plugin = $el.data(_name);
if(flag === true){
$plugin.$stars.off('mouseover mouseout click');
} else {
$plugin.settings.readOnly = false;
$plugin.addListeners();
}
}
};
// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, methods);
$.fn[ pluginName ] = function ( options ) {
// if options is a public method
if( !$.isPlainObject(options) ){
if( publicMethods.hasOwnProperty(options) ){
return publicMethods[options].apply(this, Array.prototype.slice.call(arguments, 1));
} else {
$.error('Method '+ options +' does not exist on ' + pluginName + '.js');
}
}
return this.each(function() {
// preventing against multiple instantiations
if ( !$.data( this, 'plugin_' + pluginName ) ) {
$.data( this, 'plugin_' + pluginName, new Plugin( this, options ) );
}
});
};
})( jQuery, window, document );
On gists
Plugin patterns
jQuery
jQuery-plugins
jQuery plugin pattern
pattern.js #
;(function($) {
var privateFunction = function () {
//do something
}
var methods = {
init : function( options ) {
var defaults = {
center: {
lat: -36.8442,
lng: 174.7676
}
};
var t = $.extend(true, defaults, options);
return this.each(function () {
var $this = $(this),
data = $this.data('myMapPlugin');
if ( !data ) {
var map = new google.maps.Map(this, {
zoom: 8,
center: new google.maps.LatLng(t['center'][lat], t['center']['lng']),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:{
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
}
});
var geocoder = new google.maps.Geocoder();
var $form = $('form', $this.parent());
var form = $form.get(0);
var $search = $('input[data-type=search]', $form);
$form.submit(function () {
$this.myMapPlugin('search', $search.val());
return false;
});
google.maps.event.addListener(map, 'idle', function () {
// do something
});
$this.data('myMapPlugin', {
'target': $this,
'map': map,
'form':form,
'geocoder':geocoder
});
}
});
},
resize : function ( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('myMapPlugin');
google.maps.event.trigger(data.map, 'resize');
});
},
search : function ( searchString ) {
return this.each(function () {
// do something with geocoder
});
},
update : function ( content ) {
// ToDo
},
destroy : function ( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('myMapPlugin');
$(window).unbind('.locationmap');
data.locationmap.remove();
$this.removeData('locationmap');
});
}
};
$.fn.myMapPlugin = function (method) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.myMapPlugin' );
}
};
})(jQuery);