visualselect.js
304 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 = 'avertaVisualSelect', |
| 17 | defaults = { |
| 18 | item : 'axi-select-item', // visual select item [class name] |
| 19 | selected : 'axi-selected', // selected item [class name] |
| 20 | caption : 'axi-select-caption', // caption under visual item [class name] |
| 21 | container : 'axi-visual-select', // select items container [class name] |
| 22 | |
| 23 | insertCaption : false, // whether insert captions to visual items |
| 24 | insertSymbol : true, // whether insert symbol to visual items |
| 25 | insertTitleAttr : true, // adds title attribute to visual item |
| 26 | autoHideElement : true, // hide HTML select element after init |
| 27 | imgTest : /\.jpg|\.png|\.gif|.jpeg|\.svg/ // test for image src |
| 28 | }, |
| 29 | |
| 30 | attributesMap = { |
| 31 | 'type' : 'symbolType', |
| 32 | 'title-attr' : 'insertTitleAttr', |
| 33 | 'auto-hide' : 'autoHideElement', |
| 34 | 'caption' : 'insertCaption' |
| 35 | }; |
| 36 | |
| 37 | // The actual plugin constructor |
| 38 | function Plugin( element, options ) { |
| 39 | this.element = element; |
| 40 | this.$element = $(element); |
| 41 | this.options = $.extend( {}, defaults, options) ; |
| 42 | |
| 43 | // read attributes |
| 44 | for ( var key in attributesMap ) { |
| 45 | var value = attributesMap[ key ], |
| 46 | dataAttr = this.$element.data( key ); |
| 47 | |
| 48 | if ( dataAttr === undefined ) { |
| 49 | continue; |
| 50 | } |
| 51 | |
| 52 | this.options[ value ] = dataAttr; |
| 53 | } |
| 54 | |
| 55 | this._defaults = defaults; |
| 56 | this._name = pluginName; |
| 57 | |
| 58 | this.init(); |
| 59 | } |
| 60 | |
| 61 | $.extend(Plugin.prototype, { |
| 62 | |
| 63 | init : function(){ |
| 64 | var self = this, |
| 65 | st = self.options; |
| 66 | |
| 67 | self.multiple = self.$element.attr('multiple') === 'multiple'; |
| 68 | |
| 69 | if ( st.autoHideElement ) { |
| 70 | self.$element.css('display', 'none'); |
| 71 | } |
| 72 | |
| 73 | // generate select items |
| 74 | self.$selectCont = $('<div class="' + st.container + '"></div>').insertAfter(self.$element); |
| 75 | self.generate(); |
| 76 | |
| 77 | self.$element.on( 'change', this.update.bind( this ) ); |
| 78 | |
| 79 | }, |
| 80 | |
| 81 | /** |
| 82 | * on visual select item clicked |
| 83 | * @private |
| 84 | * @param {jQuery Event} event |
| 85 | */ |
| 86 | _onItemClick : function (event) { |
| 87 | var $visualItem = $(event.currentTarget), |
| 88 | $selectOption = $visualItem.data('selectOption'), |
| 89 | st = this.options; |
| 90 | |
| 91 | if ( this.multiple ) { |
| 92 | |
| 93 | if ( $visualItem.hasClass(st.selected) ) { |
| 94 | $visualItem.removeClass(st.selected); |
| 95 | $selectOption.removeAttr('selected'); |
| 96 | } else { |
| 97 | $visualItem.addClass(st.selected); |
| 98 | $selectOption.attr('selected', 'selected'); |
| 99 | |
| 100 | var val = this.$element.val(); |
| 101 | if ( val === null ) { |
| 102 | val = []; |
| 103 | } |
| 104 | |
| 105 | val.push( $selectOption.attr( 'value' ) ); |
| 106 | |
| 107 | this.$element.val( val ); |
| 108 | } |
| 109 | |
| 110 | } else if ( !$visualItem.hasClass(st.selected) ) { |
| 111 | |
| 112 | $visualItem.addClass(st.selected); |
| 113 | $selectOption.attr('selected', 'selected'); |
| 114 | this.$element.val( $selectOption.attr( 'value' ) ); |
| 115 | |
| 116 | if ( this.$selectedItem ) { |
| 117 | this.$selectedItem.removeClass(st.selected); |
| 118 | this.$selectedItem.data('selectOption').removeAttr('selected'); |
| 119 | } |
| 120 | |
| 121 | this.$selectedItem = $visualItem; |
| 122 | } |
| 123 | |
| 124 | this._internalTrigger = true; |
| 125 | this.$element.trigger('change'); |
| 126 | |
| 127 | }, |
| 128 | |
| 129 | /** |
| 130 | * Generates video element sources by parsing the data-video-src attribute on element |
| 131 | */ |
| 132 | _generateVideoSource: function( videoSrc ) { |
| 133 | var source = ''; |
| 134 | videoSrc.split( ',' ).forEach( function( src ) { |
| 135 | src = src.split( ' ' ); |
| 136 | source += '<source src="' + src[0] + '" type="video/' + src[1] + '">'; |
| 137 | } ); |
| 138 | |
| 139 | return source; |
| 140 | }, |
| 141 | |
| 142 | /** |
| 143 | * On video ready to play |
| 144 | */ |
| 145 | _videoInit: function( event ) { |
| 146 | $(event.currentTarget).on( 'mouseenter', function() { |
| 147 | this.play(); |
| 148 | }).on( 'mouseleave', function() { |
| 149 | this.pause(); |
| 150 | this.currentTime = 0; |
| 151 | }); |
| 152 | }, |
| 153 | |
| 154 | /** |
| 155 | * updates selected items in visual form |
| 156 | */ |
| 157 | update: function() { |
| 158 | if ( this._internalTrigger ) { |
| 159 | this._internalTrigger = false; |
| 160 | return; |
| 161 | } |
| 162 | |
| 163 | var self = this, |
| 164 | st = this.options, |
| 165 | $items = self.$selectCont.find( '.' + st.item ), |
| 166 | val = self.$element.val(); |
| 167 | |
| 168 | self.$element.find( 'option' ).each( function( index, option ) { |
| 169 | var $option = $(option), |
| 170 | $visualItem = $items.eq( index ); |
| 171 | if ( val.indexOf( $option.val() ) !== -1 ) { |
| 172 | self.$selectedItem = $visualItem.addClass( st.selected ); |
| 173 | } else { |
| 174 | $visualItem.removeClass( st.selected ); |
| 175 | } |
| 176 | |
| 177 | } ); |
| 178 | }, |
| 179 | |
| 180 | /** |
| 181 | * create visual items from HTML select element |
| 182 | * @param {boolean} reset Remove old visual items [it's useful for updating visual select] |
| 183 | * @public |
| 184 | */ |
| 185 | generate : function (reset) { |
| 186 | var self = this, |
| 187 | st = self.options; |
| 188 | |
| 189 | if ( reset ) { |
| 190 | this.$selectCont.find('.' + st.item).remove(); |
| 191 | } |
| 192 | |
| 193 | self.$element.find('option').each(function(){ |
| 194 | var $selectOption = $(this), |
| 195 | $visualItem = $('<div class="' + st.item + '"></div>'), |
| 196 | symbol = $selectOption.data('symbol'), |
| 197 | videoSrc = $selectOption.data('video-src'), |
| 198 | caption = $selectOption.html(), |
| 199 | cssClass = $selectOption.data('class'); |
| 200 | |
| 201 | if ( cssClass ) { |
| 202 | $visualItem.addClass(cssClass); |
| 203 | } |
| 204 | |
| 205 | // insert visual symbol to select item |
| 206 | |
| 207 | if ( st.insertSymbol ) { |
| 208 | if ( videoSrc ) { |
| 209 | $visualItem.attr('item-type', 'video'); |
| 210 | var $videoElement = $('<video></video>').attr( 'muted', '' ).attr( 'loop', '' ) |
| 211 | .append( self._generateVideoSource( videoSrc ) ) |
| 212 | .appendTo( $visualItem ); |
| 213 | |
| 214 | $videoElement[0].addEventListener( 'loadedmetadata', self._videoInit ); |
| 215 | } else if ( st.imgTest.test( symbol ) || $selectOption.data( 'type' ) === 'image' ) { |
| 216 | $('<img/>').attr('src', symbol) |
| 217 | .attr('alt', caption) |
| 218 | .appendTo($visualItem); |
| 219 | } else { |
| 220 | $('<span></span>').addClass(symbol) |
| 221 | .appendTo($visualItem); |
| 222 | } |
| 223 | } |
| 224 | |
| 225 | // insert caption |
| 226 | if ( st.insertCaption ) { |
| 227 | $('<span class="' + st.caption + '">' + caption + '</span>').appendTo($visualItem); |
| 228 | } |
| 229 | |
| 230 | $visualItem.click($.proxy(self._onItemClick, self)) |
| 231 | .data('selectOption', $selectOption) |
| 232 | .appendTo(self.$selectCont); |
| 233 | |
| 234 | if ( st.insertTitleAttr ) { |
| 235 | $visualItem.attr('title', caption); |
| 236 | } |
| 237 | |
| 238 | if ( $selectOption.attr('selected') === 'selected' ) { |
| 239 | self.$selectedItem = $visualItem.addClass(st.selected); |
| 240 | } |
| 241 | |
| 242 | }); |
| 243 | } |
| 244 | |
| 245 | }); |
| 246 | |
| 247 | |
| 248 | $.fn[pluginName] = function ( options ) { |
| 249 | var args = arguments; |
| 250 | |
| 251 | // Is the first parameter an object (options), or was omitted, |
| 252 | // instantiate a new instance of the plugin. |
| 253 | if (options === undefined || typeof options === 'object') { |
| 254 | return this.each(function () { |
| 255 | |
| 256 | // Only allow the plugin to be instantiated once, |
| 257 | // so we check that the element has no plugin instantiation yet |
| 258 | if (!$.data(this, 'plugin_' + pluginName)) { |
| 259 | |
| 260 | // if it has no instance, create a new one, |
| 261 | // pass options to our plugin constructor, |
| 262 | // and store the plugin instance |
| 263 | // in the elements jQuery data object. |
| 264 | $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); |
| 265 | } |
| 266 | }); |
| 267 | |
| 268 | // If the first parameter is a string and it doesn't start |
| 269 | // with an underscore or "contains" the `init`-function, |
| 270 | // treat this as a call to a public method. |
| 271 | } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { |
| 272 | |
| 273 | // Cache the method call |
| 274 | // to make it possible |
| 275 | // to return a value |
| 276 | var returns; |
| 277 | |
| 278 | this.each(function () { |
| 279 | var instance = $.data(this, 'plugin_' + pluginName); |
| 280 | |
| 281 | // Tests that there's already a plugin-instance |
| 282 | // and checks that the requested public method exists |
| 283 | if (instance instanceof Plugin && typeof instance[options] === 'function') { |
| 284 | |
| 285 | // Call the method of our plugin instance, |
| 286 | // and pass it the supplied arguments. |
| 287 | returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) ); |
| 288 | } |
| 289 | |
| 290 | // Allow instances to be destroyed via the 'destroy' method |
| 291 | if (options === 'destroy') { |
| 292 | $.data(this, 'plugin_' + pluginName, null); |
| 293 | } |
| 294 | }); |
| 295 | |
| 296 | // If the earlier cached method |
| 297 | // gives a value back return the value, |
| 298 | // otherwise return this to preserve chainability. |
| 299 | return returns !== undefined ? returns : this; |
| 300 | } |
| 301 | } |
| 302 | |
| 303 | }(jQuery, window, document)); |
| 304 |