/** * jQuery asBgPicker v0.1.4 * https://github.com/amazingSurge/jquery-asBgPicker * * Copyright (c) amazingSurge * Released under the LGPL-3.0 license */ (function(global, factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else if (typeof exports !== 'undefined') { factory(require('jquery')); } else { var mod = { exports: {} }; factory(global.jQuery); global.jqueryAsBgPickerEs = mod.exports; } })(this, function(_jquery) { 'use strict'; var _jquery2 = _interopRequireDefault(_jquery); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } var _createClass = (function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); /* eslint no-empty-function: "off" */ var DEFAULTS = { namespace: 'asBgPicker', skin: null, image: 'images/defaults.png', lang: 'en', repeat: { defaultValue: 'repeat', values: ['no-repeat', 'repeat', 'repeat-x', 'repeat-y'], tpl: function tpl() { return ( '
' + '{{strings.bgRepeat}}' + '' + '
' ); } }, position: { defaultValue: 'top left', values: [ 'top left', 'top center', 'top right', 'center left', 'center center', 'center right', 'bottom left', 'bottom center', 'bottom right' ], tpl: function tpl() { return ( '
' + '{{strings.bgPosition}}' + '' + '
' ); } }, size: { defaultValue: 'auto', values: ['auto', 'cover', 'contain', '100% 100%'], tpl: function tpl() { return ( '
' + '{{strings.bgSize}}' + '' + '
' ); } }, attachment: { namespace: 'asDropdown', defaultValue: 'scroll', values: ['scroll', 'fixed', 'inherit'], tpl: function tpl() { return ( '
' + '{{strings.bgAttach}}' + '
' + '
' + '' + '
' + '
' ); } }, tpl: function tpl() { return ( '
' + '
' + '{{strings.placeholder}}' + '
' + '
' + '
' + '{{strings.placeholder}}' + '
' + '
{{strings.change}}
' + '' + '
' + '
' + '' + '
' + '
' + '
' + '
' + '
' ); }, process: function process(value) { 'use strict'; if (value && typeof value.image !== 'undefined' && value.image !== '') { return JSON.stringify(value); } return ''; }, parse: function parse(value) { 'use strict'; if (value) { return $.parseJSON(value); } return {}; }, getThumbnalil: function getThumbnalil(image) { 'use strict'; var imageData = void 0, imageFormat = void 0, imageName = void 0, imagePath = void 0; imageData = image.match(/([\S]+[\/])([\S]+)(\.+\w+$)/i); imagePath = imageData[1]; imageName = imageData[2]; imageFormat = imageData[3]; if (imageName.search('thumbnail') === 0) { return imagePath + imageName + imageFormat; } return imagePath + 'thumbnail-' + imageName + imageFormat; }, select: function select() {}, onChange: function onChange() {} }; var STRINGS = { en: { placeholder: 'Add Image', change: 'change', bgRepeat: 'Repeat', bgPosition: 'Position', bgAttach: 'Attach', bgSize: 'Scalling' } }; var Repeat = (function() { function Repeat(instance) { _classCallCheck(this, Repeat); this.instance = instance; this.values = instance.options.repeat.values; this.defaultValue = instance.options.repeat.defaultValue; this.init(); } _createClass(Repeat, [ { key: 'init', value: function init() { var _this = this; var tplContent = this.instance.options.repeat .tpl() .replace(/\{\{namespace\}\}/g, this.instance.namespace) .replace( /\{\{strings.bgRepeat\}\}/g, this.instance.strings.bgRepeat ); this.$tplRepeat = $(tplContent); this.instance.$imageWrap.after(this.$tplRepeat); this.$repeat = this.instance.$expand.find( '.' + this.instance.namespace + '-repeat' ); this.$items = this.$repeat.find('li'); $.each(this.values, function(key, value) { _this.$items.eq(key).data('repeat', value); }); var value = typeof this.instance.value.repeat !== 'undefined' ? this.instance.value.repeat : this.defaultValue; this.set(value); this.bindEvent(); } }, { key: 'set', value: function set(value) { var found = false; this.$items.removeClass(this.instance.classes.active); for (var i = 0; i < this.values.length; i++) { if (value === this.values[i]) { this.instance.value.repeat = value; this.$items.eq(i).addClass(this.instance.classes.active); this.instance.$image.css({ 'background-repeat': value }); found = true; } } if (!found) { this.set(this.defaultValue); } } }, { key: 'clear', value: function clear() { this.set(this.defaultValue); } }, { key: 'bindEvent', value: function bindEvent() { var that = this; this.$repeat.on('click', 'li', function() { if (that.instance.disabled) { return; } var value = $(this).data('repeat'); that.set(value); that.instance._update(); return false; }); } } ]); return Repeat; })(); var Size = (function() { function Size(instance) { _classCallCheck(this, Size); this.instance = instance; this.values = instance.options.size.values; this.defaultValue = instance.options.size.defaultValue; this.init(); } _createClass(Size, [ { key: 'init', value: function init() { var _this2 = this; var tplContent = this.instance.options.size .tpl() .replace(/\{\{namespace\}\}/g, this.instance.namespace) .replace(/\{\{strings.bgSize\}\}/g, this.instance.strings.bgSize); this.$tplSize = $(tplContent); this.instance.$imageWrap.after(this.$tplSize); this.$size = this.instance.$expand.find( '.' + this.instance.namespace + '-size' ); this.$items = this.$size.find('li'); $.each(this.values, function(key, value) { _this2.$items.eq(key).data('size', value); }); var value = typeof this.instance.value.size !== 'undefined' ? this.instance.value.size : this.defaultValue; this.set(value); this.bindEvent(); } }, { key: 'set', value: function set(value) { var found = false; this.$items.removeClass(this.instance.classes.active); for (var i = 0; i < this.values.length; i++) { if (value === this.values[i]) { this.instance.value.size = value; this.$items.eq(i).addClass(this.instance.classes.active); this.instance.$image.css({ 'background-size': value }); found = true; } } if (!found) { this.set(this.defaultValue); } } }, { key: 'clear', value: function clear() { this.set(this.defaultValue); } }, { key: 'bindEvent', value: function bindEvent() { var that = this; this.$size.on('click', 'li', function() { if (that.instance.disabled) { return; } var value = $(this).data('size'); that.set(value); that.instance._update(); return false; }); } } ]); return Size; })(); var Position = (function() { function Position(instance) { _classCallCheck(this, Position); this.instance = instance; this.values = instance.options.position.values; this.defaultValue = instance.options.position.defaultValue; this.init(); } _createClass(Position, [ { key: 'init', value: function init() { var _this3 = this; var tplContent = this.instance.options.position .tpl() .replace(/\{\{namespace\}\}/g, this.instance.namespace) .replace( /\{\{strings.bgPosition\}\}/g, this.instance.strings.bgPosition ); this.$tplPosition = $(tplContent); this.instance.$imageWrap.after(this.$tplPosition); this.$position = this.instance.$expand.find( '.' + this.instance.namespace + '-position' ); this.$items = this.$position.find('li'); $.each(this.values, function(key, value) { _this3.$items.eq(key).data('position', value); }); var value = typeof this.instance.value.position !== 'undefined' ? this.instance.value.position : this.defaultValue; this.set(value); this.bindEvent(); } }, { key: 'set', value: function set(value) { var found = false; this.$items.removeClass(this.instance.classes.active); for (var i = 0; i < this.values.length; i++) { if (value === this.values[i]) { this.instance.value.position = value; this.$items.eq(i).addClass(this.instance.classes.active); this.instance.$image.css({ 'background-position': value }); found = true; } } if (!found) { this.set(this.defaultValue); } } }, { key: 'clear', value: function clear() { this.set(this.defaultValue); } }, { key: 'bindEvent', value: function bindEvent() { var that = this; this.$position.on('click', 'li', function() { if (that.instance.disabled) { return; } var value = $(this).data('position'); that.set(value); that.instance._update(); return false; }); } } ]); return Position; })(); var Attachment = (function() { function Attachment(instance) { _classCallCheck(this, Attachment); this.instance = instance; this.values = instance.options.attachment.values; this.defaultValue = instance.options.attachment.defaultValue; this.init(); } _createClass(Attachment, [ { key: 'init', value: function init() { var _this4 = this; var tplContent = this.instance.options.attachment .tpl() .replace( /\{\{attachNamespace\}\}/g, this.instance.options.attachment.namespace ) .replace(/\{\{namespace\}\}/g, this.instance.namespace) .replace( /\{\{strings.bgAttach\}\}/g, this.instance.strings.bgAttach ); this.$tplAttachment = $(tplContent); this.instance.$imageWrap.after(this.$tplAttachment); this.$attachment = this.instance.$expand.find( '.' + this.instance.namespace + '-attachment' ); this.$items = this.$attachment.find('li'); this.$dropdown = this.instance.$expand.find( '.' + this.instance.options.attachment.namespace ); this.values = this.instance.options.attachment.values; $.each(this.values, function(key, value) { _this4.$items.eq(key).data('attachment', value); }); var that = this; this.$dropdown.asDropdown({ namespace: this.instance.options.attachment.namespace, imitateSelect: true, data: 'attachment', onChange: function onChange(value) { if (that.instance.disabled) { return; } that.instance.value.attachment = value; that.instance._update(); that.instance.$image.css({ 'background-attachment': that.instance.value.attachment }); } }); var value = typeof this.instance.value.attachment !== 'undefined' ? this.instance.value.attachment : this.defaultValue; this.set(value); } }, { key: 'set', value: function set(value) { var found = false; this.$items.removeClass(this.instance.classes.active); for (var i = 0; i < this.values.length; i++) { if (value === this.values[i]) { this.$dropdown.data('asDropdown').set(value); found = true; } } if (!found) { this.set(this.defaultValue); } } }, { key: 'clear', value: function clear() { this.set(this.defaultValue); } } ]); return Attachment; })(); var NAMESPACE$1 = 'asBgPicker'; // main constructor var asBgPicker = (function() { function asBgPicker(element, options) { _classCallCheck(this, asBgPicker); this.element = element; this.$element = (0, _jquery2.default)(element); this.options = _jquery2.default.extend( true, {}, DEFAULTS, options, this.$element.data() ); // load lang strings if (typeof STRINGS[this.options.lang] === 'undefined') { this.lang = 'en'; } else { this.lang = this.options.lang; } this.strings = STRINGS[this.lang]; this.namespace = this.options.namespace; // public properties this.classes = { // status skin: this.namespace + '_' + this.options.skin, disabled: this.namespace + '_disabled', active: this.namespace + '_active', hover: this.namespace + '_hover', empty: this.namespace + '_empty', exist: this.namespace + '_exist', expand: this.namespace + '_expand' }; this.$element.addClass(this.namespace + '-input'); // flag this.disabled = false; this.initialed = false; this._trigger('init'); this._init(); } _createClass( asBgPicker, [ { key: '_init', value: function _init() { this._createHtml(); if (this.options.skin) { this.$wrap.addClass(this.classes.skin); } this.value = this.options.parse(this.$element.val()); this.set(this.value, false); if (this.options.disabled) { this.disable(); } // init if (!this.value.image) { this.$wrap.addClass(this.classes.empty); } this.size = new Size(this); this.attachment = new Attachment(this); this.position = new Position(this); this.repeat = new Repeat(this); this.$wrap.addClass(this.classes.exist); this._bindEvent(); this.initialed = true; // after init end trigger 'ready' this._trigger('ready'); } }, { key: '_bindEvent', value: function _bindEvent() { var that = this; this.$initiate.on('click', function() { if (that.disabled) { return; } that.$wrap .addClass(that.classes.expand) .removeClass(that.classes.exist); }); this.$info .on('mouseenter', function() { if (that.disabled) { return; } (0, _jquery2.default)(this).addClass(that.classes.hover); }) .on('mouseleave', function() { if (that.disabled) { return; } (0, _jquery2.default)(this).removeClass(that.classes.hover); }); this.$change.on('click', function() { if (that.disabled) { return; } that.$wrap .addClass(that.classes.expand) .removeClass(that.classes.exist); }); this.$remove.on('click', function() { if (that.disabled) { return; } that.clear(); return false; }); this.$close.on('click', function() { if (that.disabled) { return; } that.$wrap .addClass(that.classes.exist) .removeClass(that.classes.expand); return false; }); this.$image.on('click', function() { if (that.disabled) { return; } that.options.select.call(that); }); } }, { key: '_createHtml', value: function _createHtml() { this.$wrap = (0, _jquery2.default)( this.options .tpl() .replace(/\{\{namespace\}\}/g, this.namespace) .replace( /\{\{strings.placeholder\}\}/g, this.strings.placeholder ) .replace(/\{\{strings.change\}\}/g, this.strings.change) ); this.$element.after(this.$wrap); this.$initiate = (0, _jquery2.default)( '.' + this.namespace + '-initiate', this.$wrap ); this.$info = (0, _jquery2.default)( '.' + this.namespace + '-info', this.$wrap ); this.$infoImageName = (0, _jquery2.default)( '.' + this.namespace + '-info-image-name', this.$info ); this.$remove = (0, _jquery2.default)( '.' + this.namespace + '-info-remove', this.$info ); this.$change = (0, _jquery2.default)( '.' + this.namespace + '-info-change', this.$info ); this.$expand = (0, _jquery2.default)( '.' + this.namespace + '-expand', this.$wrap ); this.$close = (0, _jquery2.default)( '.' + this.namespace + '-expand-close', this.$expand ); this.$imageWrap = (0, _jquery2.default)( '.' + this.namespace + '-expand-image-wrap', this.$expand ); this.$image = (0, _jquery2.default)( '.' + this.namespace + '-expand-image', this.$expand ); } }, { key: '_trigger', value: function _trigger(eventType) { for ( var _len = arguments.length, params = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++ ) { params[_key - 1] = arguments[_key]; } var data = [this].concat(params); // event this.$element.trigger(NAMESPACE$1 + '::' + eventType, data); // callback eventType = eventType.replace(/\b\w+\b/g, function(word) { return word.substring(0, 1).toUpperCase() + word.substring(1); }); var onFunction = 'on' + eventType; if (typeof this.options[onFunction] === 'function') { this.options[onFunction].apply(this, params); } } }, { key: '_setState', value: function _setState(image) { if (!image || image === this.options.image) { this.$wrap.addClass(this.classes.empty); } else { this.$wrap.removeClass(this.classes.empty); } } }, { key: '_returnInfo', value: function _returnInfo(image) { var imgName = void 0; if (!image || image === this.options.image) { this.$infoImageName.text(this.strings.placeholder); } else { imgName = image.match(/([\S]+[\/])([\S]+\w+$)/i)[2]; this.$infoImageName.text(imgName); } } }, { key: '_update', value: function _update() { if (this.value === null) { this.value = {}; } this.$element.val(this.val()); this._trigger('change', this.options.parse(this.val())); } }, { key: 'val', value: function val(value) { if (typeof value === 'undefined') { return this.options.process(this.value); } var valueObj = this.options.parse(value); if (valueObj) { this.set(valueObj); } else { this.clear(); } } }, { key: 'set', value: function set(value, update) { this.value = value; this.setImage(value.image); if (update !== false) { if (typeof value.repeat !== 'undefined') { this.repeat.set(value.repeat); } else { this.repeat.clear(); } if (typeof value.size !== 'undefined') { this.size.set(value.size); } else { this.size.clear(); } if (typeof value.position !== 'undefined') { this.position.set(value.position); } else { this.position.clear(); } if (typeof value.attachment !== 'undefined') { this.attachment.set(value.attachment); } else { this.attachment.clear(); } this._update(); } } }, { key: 'clear', value: function clear(update) { this.value = {}; if (update !== false) { var image = ''; this.setImage(image); this.repeat.clear(); this.size.clear(); this.position.clear(); this.attachment.clear(); this._update(); } } }, { key: 'setImage', value: function setImage(image) { var thumbnailUrl = void 0; var that = this; this._setState(image); this._returnInfo(image); if (image === '' || typeof image === 'undefined') { this.$image.css({ 'background-image': 'none' }); } else if (image || image !== this.options.image) { thumbnailUrl = this.options.getThumbnalil(image); var img = new Image(); img.onload = function() { that.value.image = thumbnailUrl; that._returnInfo(that.value.image); that.$image.css({ 'background-image': "url('" + that.value.image + "')" }); }; img.onerror = function() { that.value.image = image; that._returnInfo(image); that._update(); that.$image.css({ 'background-image': 'none' }); }; img.src = thumbnailUrl; } } }, { key: 'setRepeat', value: function setRepeat(repeat) { this.repeat.set(repeat); this._update(); } }, { key: 'setSize', value: function setSize(size) { this.size.set(size); this._update(); } }, { key: 'setPosition', value: function setPosition(position) { this.position.set(position); this._update(); } }, { key: 'setAttachment', value: function setAttachment(attachment) { this.attachment.set(attachment); this._update(); } }, { key: 'get', value: function get() { return this.value; } }, { key: 'enable', value: function enable() { this.disabled = false; this.$wrap.removeClass(this.classes.disabled); } }, { key: 'disable', value: function disable() { this.disabled = true; this.$wrap.addClass(this.classes.disabled); } }, { key: 'destroy', value: function destroy() { this.$element.data(NAMESPACE$1, null); this.$wrap.remove(); this._trigger('destroy'); } } ], [ { key: 'localize', value: function localize(lang, labels) { STRINGS[lang] = labels; } }, { key: 'setDefaults', value: function setDefaults(options) { _jquery2.default.extend( true, DEFAULTS, _jquery2.default.isPlainObject(options) && options ); } } ] ); return asBgPicker; })(); var info = { version: '0.1.4' }; var NAMESPACE = 'asBgPicker'; var OtherAsBgPicker = _jquery2.default.fn.asBgPicker; var jQueryAsBgPicker = function jQueryAsBgPicker(options) { for ( var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++ ) { args[_key2 - 1] = arguments[_key2]; } if (typeof options === 'string') { var method = options; if (/^_/.test(method)) { return false; } else if ( /^(get)$/.test(method) || (method === 'val' && args.length === 0) ) { var instance = this.first().data(NAMESPACE); if (instance && typeof instance[method] === 'function') { return instance[method].apply(instance, args); } } else { return this.each(function() { var instance = _jquery2.default.data(this, NAMESPACE); if (instance && typeof instance[method] === 'function') { instance[method].apply(instance, args); } }); } } return this.each(function() { if (!(0, _jquery2.default)(this).data(NAMESPACE)) { (0, _jquery2.default)(this).data( NAMESPACE, new asBgPicker(this, options) ); } }); }; _jquery2.default.fn.asBgPicker = jQueryAsBgPicker; _jquery2.default.asBgPicker = _jquery2.default.extend( { setDefaults: asBgPicker.setDefaults, localize: asBgPicker.localize, noConflict: function noConflict() { _jquery2.default.fn.asBgPicker = OtherAsBgPicker; return jQueryAsBgPicker; } }, info ); });