featuredColor.js
156 lines
| 1 | /*! |
| 2 | * Visual Select - A jQuery plugin for replacing HTML select element with a visual selection tool. |
| 3 | * |
| 4 | * @version 1.3.0 |
| 5 | * @requires jQuery 1.9+ |
| 6 | * @author Averta [averta.net] |
| 7 | * @package Axiom Framework |
| 8 | * @copyright Copyright © 2017 Averta, all rights reserved |
| 9 | */ |
| 10 | |
| 11 | ;(function ( $, window, document, undefined ) { |
| 12 | |
| 13 | "use strict"; |
| 14 | |
| 15 | // Create the defaults once |
| 16 | var pluginName = 'AuxFeaturedColor', |
| 17 | defaults = {}, |
| 18 | attributesMap = {}; |
| 19 | |
| 20 | // The actual plugin constructor |
| 21 | function Plugin( element, options ) { |
| 22 | this.element = element; |
| 23 | this.$element = $(element); |
| 24 | this.options = $.extend( {}, defaults, options) ; |
| 25 | |
| 26 | // read attributes |
| 27 | for ( var key in attributesMap ) { |
| 28 | var value = attributesMap[ key ], |
| 29 | dataAttr = this.$element.data( key ); |
| 30 | |
| 31 | if ( dataAttr === undefined ) { |
| 32 | continue; |
| 33 | } |
| 34 | |
| 35 | this.options[ value ] = dataAttr; |
| 36 | } |
| 37 | |
| 38 | this._defaults = defaults; |
| 39 | this._name = pluginName; |
| 40 | |
| 41 | this.init(); |
| 42 | } |
| 43 | |
| 44 | $.extend(Plugin.prototype, { |
| 45 | |
| 46 | init : function(){ |
| 47 | var self = this, |
| 48 | st = self.options; |
| 49 | |
| 50 | this.$element.select2({ |
| 51 | dropdownCssClass: 'aux-featured-color-dropdown', |
| 52 | minimumResultsForSearch: Infinity, |
| 53 | templateResult: this.generateOptions, |
| 54 | templateSelection: this.generateOptions |
| 55 | }); |
| 56 | }, |
| 57 | |
| 58 | generateOptions: function( data ) { |
| 59 | var $option = $(data.element), |
| 60 | dataColor = $option.data('color'), |
| 61 | $colorWrapper = $('<span />').attr('class', 'aux-featured-color-item-wrapper'), |
| 62 | $color = $('<span />').attr('class', 'aux-featured-color-item'), |
| 63 | $colorLabel = $('<span />').attr('class', 'aux-featured-color-label').html( data.text ); |
| 64 | |
| 65 | // Color Shape |
| 66 | if( typeof dataColor !== 'undefined' ) { |
| 67 | |
| 68 | var $colorShape = $('<span />').attr('class', 'aux-featured-color-shape'); |
| 69 | |
| 70 | if ( ! dataColor ) { |
| 71 | $colorShape.addClass('aux-featured-color-empty') |
| 72 | } else { |
| 73 | $colorShape.css( 'background-color', dataColor ); |
| 74 | } |
| 75 | |
| 76 | $colorShape.appendTo( $color ); |
| 77 | } |
| 78 | |
| 79 | $colorLabel.appendTo( $color ); |
| 80 | $color.appendTo( $colorWrapper ); |
| 81 | |
| 82 | // Color Hex String |
| 83 | if( typeof dataColor !== 'undefined' ) { |
| 84 | var $colorHex = $('<span />').attr('class', 'aux-featured-color-hex'); |
| 85 | |
| 86 | if ( dataColor ) { |
| 87 | $colorHex.html( dataColor); |
| 88 | } |
| 89 | |
| 90 | $colorHex.appendTo($colorWrapper); |
| 91 | |
| 92 | } |
| 93 | |
| 94 | return $colorWrapper; |
| 95 | } |
| 96 | |
| 97 | }); |
| 98 | |
| 99 | |
| 100 | $.fn[pluginName] = function ( options ) { |
| 101 | var args = arguments; |
| 102 | |
| 103 | // Is the first parameter an object (options), or was omitted, |
| 104 | // instantiate a new instance of the plugin. |
| 105 | if (options === undefined || typeof options === 'object') { |
| 106 | return this.each(function () { |
| 107 | |
| 108 | // Only allow the plugin to be instantiated once, |
| 109 | // so we check that the element has no plugin instantiation yet |
| 110 | if (!$.data(this, 'plugin_' + pluginName)) { |
| 111 | |
| 112 | // if it has no instance, create a new one, |
| 113 | // pass options to our plugin constructor, |
| 114 | // and store the plugin instance |
| 115 | // in the elements jQuery data object. |
| 116 | $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); |
| 117 | } |
| 118 | }); |
| 119 | |
| 120 | // If the first parameter is a string and it doesn't start |
| 121 | // with an underscore or "contains" the `init`-function, |
| 122 | // treat this as a call to a public method. |
| 123 | } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { |
| 124 | |
| 125 | // Cache the method call |
| 126 | // to make it possible |
| 127 | // to return a value |
| 128 | var returns; |
| 129 | |
| 130 | this.each(function () { |
| 131 | var instance = $.data(this, 'plugin_' + pluginName); |
| 132 | |
| 133 | // Tests that there's already a plugin-instance |
| 134 | // and checks that the requested public method exists |
| 135 | if (instance instanceof Plugin && typeof instance[options] === 'function') { |
| 136 | |
| 137 | // Call the method of our plugin instance, |
| 138 | // and pass it the supplied arguments. |
| 139 | returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) ); |
| 140 | } |
| 141 | |
| 142 | // Allow instances to be destroyed via the 'destroy' method |
| 143 | if (options === 'destroy') { |
| 144 | $.data(this, 'plugin_' + pluginName, null); |
| 145 | } |
| 146 | }); |
| 147 | |
| 148 | // If the earlier cached method |
| 149 | // gives a value back return the value, |
| 150 | // otherwise return this to preserve chainability. |
| 151 | return returns !== undefined ? returns : this; |
| 152 | } |
| 153 | } |
| 154 | |
| 155 | }(jQuery, window, document)); |
| 156 |