/wp-content/plugins/js_composer/assets/js/params/css_editor.js

/* =========================================================
 * css_editor.js v1.0.1
 * =========================================================
 * Copyright 2014 Wpbakery
 *
 * Shortcodes css editor for edit form backbone/underscore version
 * ========================================================= */
// Safety first
/** global window.i18nLocale */
if (_.isUndefined(window.vc)) var vc = {atts: {}};
(function ($) {
	var preloaderUrl = ajaxurl.replace(/admin\-ajax\.php/, 'images/wpspin_light.gif'),
		template_options = {
			evaluate: /<#([\s\S]+?)#>/g,
			interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
			escape: /\{\{([^\}]+?)\}\}(?!\})/g
		},
		removeOldDesignOptions;
	wp.media.controller.VcCssSingleImage = wp.media.controller.VcSingleImage.extend({
		setCssEditor: function (view) {
			if (view) this._css_editor = view;
			return this;
		},
		updateSelection: function () {
			var selection = this.get('selection'),
				id = this._css_editor.getBackgroundImage(),
				attachment;
			if (id) {
				attachment = wp.media.model.Attachment.get(id);
				attachment.fetch();
			}
			selection.reset(attachment ? [attachment] : []);
		}
	});
	/**
	 * Css editor view.
	 * @type {*}
	 */
	var VcCssEditor;
	VcCssEditor = vc.CssEditor = Backbone.View.extend({
		attrs: {},
		layouts: ['margin', 'border-width', 'padding'],
		positions: ['top', 'right', 'bottom', 'left'],
		$field: false,
		simplify: false,
		$simplify: false,
		events: {
			'click .icon-remove': 'removeImage',
			'click .vc_add-image': 'addBackgroundImage',
			'change .vc_simplify': 'changeSimplify'
		},
		initialize: function () {
			// _.bindAll(wp.media.vc_css_editor, 'open');
			_.bindAll(this, 'setSimplify')
		},
		render: function (value) {
			this.attrs = {};
			this.$simplify = this.$el.find('.vc_simplify');
			_.isString(value) && this.parse(value);
			// wp.media.vc_css_editor.init(this);
			return this;
		},
		parse: function (value) {
			var data_split = value.split(/\s*(\.[^\{]+)\s*\{\s*([^\}]+)\s*\}\s*/g);
			data_split[2] && this.parseAtts(data_split[2].replace(/\s+!important/g, ''));
		},
		addBackgroundImage: function (e) {
			e.preventDefault();
			if (this.image_media)
				return this.image_media.open('vc_editor');
			this.image_media = wp.media({
				state: 'vc_single-image',
				states: [new wp.media.controller.VcCssSingleImage().setCssEditor(this)]
			});
			this.image_media.on('toolbar:create:vc_single-image', function (toolbar) {
				this.createSelectToolbar(toolbar, {
					text: window.i18nLocale.set_image
				});
			}, this.image_media);
			this.image_media.state('vc_single-image').on('select', this.setBgImage);
			this.image_media.open('vc_editor');
		},
		setBgImage: function () {
			var selection = this.get('selection').single();
			selection && this._css_editor.$el.find('.vc_background-image .vc_image').html(_.template($('#vc_css-editor-image-block').html(), selection.attributes, _.extend({variable: 'img'}, template_options)));
		},
		setCurrentBgImage: function (value) {
			var image_regexp = /([^\?]+)(\?id=\d+){0,1}/, url = '', id = '', image_split;
			if (value.match(/^\d+$/)) {
				this.$el.find('.vc_background-image .vc_image').html(_.template($('#vc_css-editor-image-block').html(), {
					url: preloaderUrl,
					id: value,
					css_class: 'vc_preview'
				}, _.extend({variable: 'img'}, template_options)));
				$.ajax({
					type: 'POST',
					url: window.ajaxurl,
					data: {
						action: 'wpb_single_image_src',
						content: value,
						size: 'full'
					},
					dataType: 'html',
					context: this
				}).done(function (url) {
					this.$el.find('.vc_ce-image').attr('src', url + '?id=' + value).removeClass('vc_preview');
				});
			} else if (value.match(image_regexp)) {
				image_split = value.split(image_regexp);
				url = image_split[1];
				if (image_split[2]) id = image_split[2].replace(/[^\d]+/, '');
				this.$el.find('.vc_background-image .vc_image').html(_.template($('#vc_css-editor-image-block').html(), {
					url: url,
					id: id
				}, _.extend({variable: 'img'}, template_options)));
			}
		},
		changeSimplify: function () {
			var f = _.debounce(this.setSimplify, 100);
			f && f();
		},
		setSimplify: function () {
			this.simplifiedMode(this.$simplify.is(':checked'));

		},
		simplifiedMode: function (enable) {
			if (enable) {
				this.simplify = true;
				this.$el.addClass('vc_simplified');
			} else {
				this.simplify = false;
				this.$el.removeClass('vc_simplified');
				_.each(this.layouts, function (attr) {
					if (attr === 'border-width') attr = 'border';
					var $control = $('[data-attribute=' + attr + '].vc_top');
					this.$el.find('[data-attribute=' + attr + ']:not(.vc_top)').val($control.val());
				}, this);
			}
		},
		removeImage: function (e) {
			var $control = $(e.currentTarget);
			e.preventDefault();
			$control.parent().remove();
		},
		getBackgroundImage: function () {
			return this.$el.find('.vc_ce-image').data('imageId');
		},
		parseAtts: function (string) {
			var border_regex, background_regex, background_size;
			border_regex = /(\d+\S*)\s+(\w+)\s+([\d\w#\(,]+)/;
			background_regex = /^([^\s]+)\s+url\(([^\)]+)\)([\d\w]+\s+[\d\w]+)?$/;
			background_size = false;
			_.map(string.split(';'), function (val) {
				var val_s = val.split(/:\s/), val_pos, border_split, background_split,
					value = val_s[1] || '',
					name = val_s[0] || '';
				if (value) value = value.trim();
				if (name.match(new RegExp('^(' + this.layouts.join('|').replace('-', '\\-') + ')$')) && value) {
					val_pos = value.split(/\s+/g);
					if (val_pos.length == 1) {
						val_pos = [val_pos[0], val_pos[0], val_pos[0], val_pos[0]];
					} else if (val_pos.length === 2) {
						val_pos[2] = val_pos[0];
						val_pos[3] = val_pos[1];
					} else if (val_pos.length === 3) {
						val_pos[3] = val_pos[1];
					}
					_.each(this.positions, function (pos, key) {
						this.$el.find('[data-name=' + name + '-' + pos + ']').val(val_pos[key]);
					}, this);
				} else if (name === 'background-size') {
					background_size = value;
					this.$el.find('[name=background_style]').val(value);
				} else if (name === 'background-repeat' && !background_size) {
					this.$el.find('[name=background_style]').val(value);
				} else if (name === 'background-image') {
					this.setCurrentBgImage(value.replace(/url\(([^\)]+)\)/, '$1'));
				} else if (name === 'background' && value) {
					background_split = value.split(background_regex);
					background_split[1] && this.$el.find('[name=' + name + '_color]').val(background_split[1]);
					background_split[2] && this.setCurrentBgImage(background_split[2]);
				} else if (name == 'border' && value && value.match(border_regex)) {
					border_split = value.split(border_regex);
					val_pos = [border_split[1], border_split[1], border_split[1], border_split[1]];
					_.each(this.positions, function (pos, key) {
						this.$el.find('[name=' + name + '_' + pos + '_width]').val(val_pos[key]);
					}, this);
					this.$el.find('[name=border_style]').val(border_split[2]);
					this.$el.find('[name=border_color]').val(border_split[3]).trigger('change');
				} else if (name.indexOf('border') != -1 && value) {
					if (name.indexOf('style') != -1) {
						this.$el.find('[name=border_style]').val(value);
					} else if (name.indexOf('color') != -1) {
						this.$el.find('[name=border_color]').val(value).trigger('change');
					} else if (name.match(/^[\w\-\d]+$/)) {
						this.$el.find('[name=' + name.replace(/\-+/g, '_') + ']').val(value);
					}
				} else if (name.match(/^[\w\-\d]+$/) && value) {
					this.$el.find('[name=' + name.replace(/\-+/g, '_') + ']').val(value);
				}
			}, this);
		},
		save: function () {
			var string = '';
			this.attrs = {};
			_.each(this.layouts, function (type) {
				this.getFields(type)
			}, this);
			this.getBackground();
			this.getBorder();
			if (!_.isEmpty(this.attrs)) {
				string = '.vc_custom_' + (+new Date) + '{' + _.reduce(this.attrs, function (memo, value, key) {
					return value ? memo + key + ': ' + value + ' !important;' : memo;
				}, '', this) + '}';
			}
			string && vc.frame_window && vc.frame_window.vc_iframe.setCustomShortcodeCss(string);
			return string;
		},
		getBackgroundImageSrc: function () {
			return this.$el.find('.vc_background-image img').attr('src');
		},
		getBackgroundColor: function () {
			return this.$el.find('[name=background_color]').val();
		},
		getBackgroundStyle: function () {
			return this.$el.find('[name=background_style]').val();
		},
		getBackground: function () {
			var color = this.getBackgroundColor(),
				image = this.getBackgroundImageSrc(),
				style = this.getBackgroundStyle();
			if (color && image) {
				this.attrs['background'] = color + ' ' + 'url(' + image + ')';
			} else if (color) {
				this.attrs['background-color'] = color;
			} else if (image) {
				this.attrs['background-image'] = 'url(' + image + ')';
			}
			if (style.match(/repeat/)) {
				this.attrs['background-position'] = '0 0';
				this.attrs['background-repeat'] = style;
			} else if (style.match(/cover|contain/)) {
				this.attrs['background-position'] = 'center';
				this.attrs['background-repeat'] = 'no-repeat';
				this.attrs['background-size'] = style;
			}
			if (color.match(/^rgba/)) {
				this.attrs['*background-color'] = color.replace(/\s+/, '').replace(/(rgb)a\((\d+)\,(\d+),(\d+),[^\)]+\)/, '$1($2,$3,$4)');
			}
		},
		getBorder: function () {
			var style = this.$el.find('[name=border_style]').val(),
				color = this.$el.find('[name=border_color]').val();
			var sides = ['left', 'right', 'top', 'bottom'];
			if (style && color && this.attrs['border-width'] && this.attrs['border-width'].match(/^\d+\S+$/)) {
				this.attrs.border = this.attrs['border-width'] + ' ' + style + ' ' + color;
				this.attrs['border-width'] = undefined;
			} else {
				_.each(sides, function (side) {
					if (this.attrs['border-' + side + '-width']) {
						if (color) this.attrs['border-' + side + '-color'] = color;
						if (style) this.attrs['border-' + side + '-style'] = style;
					}
				}, this);
			}
		},
		getFields: function (type) {
			var data = [];
			if (this.simplify) return this.getSimplifiedField(type);
			_.each(this.positions, function (pos) {
				var val = this.$el.find('[data-name=' + type + '-' + pos + ']').val().replace(/\s+/, '');
				if (!val.match(/^\d*(\.\d?){0,1}(%|in|cm|mm|em|rem|ex|pt|pc|px|vw|vh|vmin|vmax)$/)) {
					val = (isNaN(parseFloat(val)) ? '' : '' + parseFloat(val) + 'px');
				}
				val.length && data.push({name: pos, val: val});
			}, this);
			_.each(data, function (attr) {
				var attr_name = type == 'border-width' ? 'border-' + attr.name + '-width' : type + '-' + attr.name;
				this.attrs[attr_name] = attr.val;
			}, this);
		},
		getSimplifiedField: function (type) {
			var pos = 'top',
				val = this.$el.find('[data-name=' + type + '-' + pos + ']').val().replace(/\s+/, '');
			if (!val.match(/^-?\d*(\.\d?){0,1}(%|in|cm|mm|em|rem|ex|pt|pc|px|vw|vh|vmin|vmax)$/)) {
				val = (isNaN(parseFloat(val)) ? '' : '' + parseFloat(val) + 'px');
			}
			if (val.length) this.attrs[type] = val;
		}
	});
	/**
	 * Add new param to atts types list for vc
	 * @type {Object}
	 */
	vc.atts.css_editor = {
		parse: function (param) {
			var $field, css_editor, result;
			$field = this.content().find('input.wpb_vc_param_value[name="' + param.param_name + '"]' );
			css_editor = $field.data('vcFieldManager');
			result = css_editor.save();

			if (result) vc.edit_form_callbacks.push(removeOldDesignOptions);
			return result;
		},
		init: function (param, $field) {
			/**
			 * Find all fields with css_editor type and initialize.
			 */
			$('[data-css-editor=true]', this.content()).each(function () {
				var $editor = $(this),
					$param = $editor.find('input.wpb_vc_param_value[name="' + param.param_name +'"]' ),
					value = $param.val();
				if (!value) value = parseOldDesignOptions();
				$param.data('vcFieldManager', new VcCssEditor({el: $editor}).render(value));
			});
			vc.atts.colorpicker.init.call(this, param, $field);
		}
	};
	/**
	 * Backward capability for old css attributes
	 * @return {String} - Css settings with class name and css attributes settings.
	 */
	var parseOldDesignOptions = function () {
		var keys = {
				'bg_color': 'background-color',
				'padding': 'padding',
				'margin_bottom': 'margin-bottom',
				'bg_image': 'background-image'
			},
			params = vc.edit_element_block_view.model.get('params'),
			cssString = _.reduce(keys, function (memo, css_name, attr_name) {
			var value = params[attr_name];
			if (_.isUndefined(value) || !value.length) return memo;
			if (attr_name === 'bg_image')  value = 'url(' + value + ')';
			return memo + css_name + ': ' + value + ';';
		}, '', this);
		return cssString ? '.tmp_class{' + cssString + '}' : '';
	};
	removeOldDesignOptions = function () {
		this.params = _.omit(this.params, 'bg_color', 'padding', 'margin_bottom', 'bg_image');
	};

})(window.jQuery);