');
};
Generator.prototype.stripTags = function (input, allowed) {
allowed = (((allowed || '') + '')
.toLowerCase()
.match(/<[a-z][a-z0-9]*>/g) || [])
.join(''); // making sure the allowed arg is a string containing only tags in lowercase (
H: ' + parseInt(this.$layer.height()) + 'px');
}
if (document.activeElement) {
document.activeElement.blur();
}
}, this),
'mouseup.n2-ss-absolute': $.proxy(function (e) {
N2Classes.PositionDisplay.get().hide('Canvas');
}, this)
});
};
PlacementAbsolute.prototype.____makeLayerResizeableStart = function (event, ui) {
this.preventActivation = true;
this.resizableDeferred = $.Deferred();
this.fragmentEditor.layerWindow.hideWithDeferred(this.resizableDeferred);
$('body').addClass('n2-ss-resize-layer');
if (this._resizableJustClick) {
this._resizableJustClick = false;
}
this.____makeLayerResizeableResize(event, ui);
N2Classes.PositionDisplay.get().show('Canvas');
};
PlacementAbsolute.prototype.____makeLayerResizeableResize = function (e, ui) {
N2Classes.PositionDisplay.get().update(e, 'Canvas', 'W: ' + ui.size.width + 'px
H: ' + ui.size.height + 'px');
this.triggerLayerResized();
};
PlacementAbsolute.prototype.____makeLayerResizeableStop = function (event, ui) {
$('body').removeClass('n2-ss-resize-layer');
this.resizableDeferred.resolve();
var isAutoWidth = false;
if (ui.axis == "n" || ui.axis == "s" || ui.originalSize.width == ui.size.width) {
var currentValue = this.layer.getProperty('width');
if (this.layer.isDimensionPropertyAccepted(currentValue)) {
isAutoWidth = true;
this._syncwidth();
}
}
var isAutoHeight = false;
if (ui.axis == "e" || ui.axis == "w" || ui.originalSize.height == ui.size.height) {
var currentValue = this.layer.getProperty('height');
if (this.layer.isDimensionPropertyAccepted(currentValue)) {
isAutoHeight = true;
this._syncheight();
}
}
var ratioSizeH = this.fragmentEditor.getResponsiveRatioHorizontal(),
ratioSizeV = this.fragmentEditor.getResponsiveRatioVertical();
if (!parseInt(this.layer.getProperty('responsivesize'))) {
ratioSizeH = ratioSizeV = 1;
}
var width = null;
if (!isAutoWidth) {
width = Math.round(ui.size.width * (1 / ratioSizeH));
}
var height = null;
if (!isAutoHeight) {
height = Math.round(ui.size.height * (1 / ratioSizeV));
}
this._setPosition(null, null, ui.position.left, ui.position.top, width, height, true);
this.triggerLayerResized();
this.$layer.triggerHandler('LayerUnParent');
N2Classes.PositionDisplay.get().hide('Canvas');
setTimeout($.proxy(function () {
this.preventActivation = false;
}, this), 80);
//this.fragmentEditor.panel.positionMenu(this.$layer);
};
//
';
}
N2Classes.PositionDisplay.get().update(e, 'Spacing', html);
}, this),
stop: $.proxy(this.onSpacingStop, this),
});
};
PlacementNormal.prototype.onSpacingStop = function (event, ui) {
N2Classes.PositionDisplay.get().hide('Spacing');
var margin = this.layer.getProperty('margin').split('|*|'),
ratioH = 1,
ratioV = 1;
if (margin[margin.length - 1] == 'px+' && Math.abs(parseFloat(this.$layer.css('fontSize')) - this.layer.baseSize) > 1) {
ratioH = this.fragmentEditor.getResponsiveRatioHorizontal();
ratioV = this.fragmentEditor.getResponsiveRatioVertical();
}
for (var k in ui.changed) {
var value = ui.changed[k];
switch (k) {
case 'top':
margin[0] = Math.round(value / ratioV);
break;
case 'right':
margin[1] = Math.round(value / ratioH);
break;
case 'bottom':
margin[2] = Math.round(value / ratioV);
break;
case 'left':
margin[3] = Math.round(value / ratioH);
break;
}
}
this.layer.setProperty('margin', margin.join('|*|'));
$('#layernormal-margin').data('field').insideChange(margin.join('|*|'));
};
PlacementNormal.prototype.startUISizing = function () {
var needSize = false;
if (this.layer.item && this.layer.item.needSize) {
needSize = true;
}
this.$layer.nUINormalSizing({
height: needSize,
syncWidth: true,
start: $.proxy(function (e, prop) {
N2Classes.PositionDisplay.get().show('NormalSizing');
if (prop === 'maxwidth') {
this.layer.layer.attr('data-has-maxwidth', '1');
}
}, this),
resizeMaxWidth: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().update(e, 'NormalSizing', 'Max-width: ' + (ui.value == 0 ? 'none' : (ui.value + 'px')));
}, this),
stopMaxWidth: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().hide('NormalSizing');
this.layer.setProperty('maxwidth', ui.value);
}, this),
resizeHeight: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().update(e, 'NormalSizing', 'Height: ' + ui.value + 'px');
}, this),
stopHeight: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().hide('NormalSizing');
var ratio = 1;
if (parseInt(this.$layer.css('fontSize')) != this.layer.baseSize) {
ratio = this.fragmentEditor.getResponsiveRatioHorizontal();
}
var value = Math.round(value / ratio);
this.layer.setProperty('height', ui.value);
}, this)
});
};
PlacementNormal.prototype._syncheight = function () {
var height = parseInt(this.layer.getProperty('height'));
if (height > 0) {
var unit = 'px',
baseSize = this.layer.baseSize;
if (baseSize > 0) {
unit = 'em';
height = parseInt(height) / baseSize;
}
this.layer.layer.css('height', height + unit);
} else {
this.layer.layer.css('height', '');
}
this.layer.update();
};
PlacementNormal.prototype._syncmaxwidth = function () {
var value = parseInt(this.layer.getProperty('maxwidth'));
if (value <= 0 || isNaN(value)) {
this.layer.layer.css('maxWidth', '')
.attr('data-has-maxwidth', '0');
} else {
this.layer.layer.css('maxWidth', value + 'px')
.attr('data-has-maxwidth', '1');
}
this.layer.update();
};
PlacementNormal.prototype._syncselfalign = function () {
this.layer.layer.attr('data-cssselfalign', this.layer.getProperty('selfalign'));
};
PlacementNormal.prototype.sync = function () {
this._syncmargin();
this._syncheight();
this._syncmaxwidth();
};
return PlacementNormal;
});
N2D('Placement', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param layer
* @constructor
*/
function Placement(layer) {
this.layer = layer;
this.fragmentEditor = layer.fragmentEditor;
this.modes = {};
this.current = null;
this.isTransferHandled = false;
this.updatePositionThrottled = NextendDeBounce(this.updatePosition, 200);
}
Placement.prototype.allow = function (mode) {
switch (mode) {
case 'absolute':
this.modes.absolute = new N2Classes.PlacementAbsolute(this, this.layer, this.fragmentEditor);
break;
case 'normal':
this.modes.normal = new N2Classes.PlacementNormal(this, this.layer, this.fragmentEditor);
break;
case 'group':
this.modes.absolute = new N2Classes.PlacementGroup(this, this.layer, this.fragmentEditor);
break;
case 'content':
this.modes.absolute = new N2Classes.PlacementContent(this, this.layer, this.fragmentEditor);
break;
case 'default':
this.modes['default'] = new N2Classes.PlacementDefault(this, this.layer, this.fragmentEditor);
break;
}
};
Placement.prototype.start = function () {
for (var k in this.modes) {
this.modes[k].start();
}
};
Placement.prototype.setMode = function (mode, properties) {
var historicalData = false;
properties = properties || {};
if (typeof this.modes[mode] !== 'undefined') {
if (this.current != this.modes[mode]) {
var lastType;
if (this.current) {
this.modes[mode].preActivation(this.current);
lastType = this.current.type;
historicalData = this.current.deActivated(this.modes[mode]);
}
this.current = this.modes[mode];
this.layer.layer.attr('data-pm', this.current.type);
this.current.activated(properties);
this.layer.$.triggerHandler('placementChanged', [this.current.type, lastType]);
}
} else {
throw new Exception('Layer placement(' + mode + ') not allowed for the container', this.layer);
}
return historicalData;
};
Placement.prototype.doAction = function (action) {
try {
return this.current[action].apply(this.current, Array.prototype.slice.call(arguments, 1));
} catch (e) {
}
};
Placement.prototype.getType = function () {
return this.current.type;
};
Placement.prototype.onResize = function (isForced) {
if (typeof this.current.onResize == 'function') {
this.current.onResize(isForced);
}
};
Placement.prototype.updatePosition = function () {
this.current.updatePosition();
};
Placement.prototype.getIndex = function () {
return this.current.getIndex();
};
Placement.prototype.renderIndex = function (index) {
return this.current.renderIndex(index);
};
Placement.prototype.doLinearResize = function (ratios) {
this.current.doLinearResize(ratios);
};
Placement.prototype.sync = function () {
this.current.sync();
};
Placement.prototype.renderModeProperties = function (isReset) {
var fontSize = this.layer.getProperty('fontsize');
this.layer.adjustFontSize(this.layer.getProperty('adaptivefont'), fontSize, false);
this.current._renderModeProperties(isReset);
};
Placement.prototype.delete = function () {
this.current.delete();
};
return Placement;
});
N2D('PlacementAbstract', ['Placement'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param placement
* @param {N2Classes.ComponentAbstract} layer
* @param fragmentEditor
* @constructor
*/
function PlacementAbstract(placement, layer, fragmentEditor) {
this.placement = placement;
/**
* @type {N2Classes.ComponentAbstract}
*/
this.layer = layer;
this.fragmentEditor = fragmentEditor;
}
PlacementAbstract.prototype.start = function () {
};
PlacementAbstract.prototype.preActivation = function (lastPlacement) {
};
PlacementAbstract.prototype.activated = function () {
};
PlacementAbstract.prototype.deActivated = function (newMode) {
return false;
};
PlacementAbstract.prototype.updatePosition = function () {
this.layer.group.update();
};
PlacementAbstract.prototype._renderModeProperties = function (isReset) {
};
PlacementAbstract.prototype._hide = function () {
};
PlacementAbstract.prototype._show = function () {
};
PlacementAbstract.prototype.snap = function () {
return false;
};
PlacementAbstract.prototype.getIndex = function () {
return this.layer.layer.index();
};
PlacementAbstract.prototype.renderIndex = function (index) {
};
PlacementAbstract.prototype.doLinearResize = function (ratios) {
};
PlacementAbstract.prototype.sync = function () {
};
PlacementAbstract.prototype.delete = function () {
};
PlacementAbstract.prototype.triggerLayerResized = function (isThrottled, ratios) {
};
PlacementAbstract.prototype.changeStatus = function (oldStatus, newStatus) {
};
return PlacementAbstract;
});
N2D('Item', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
* @augments N2Classes.Historical
*
* @constructor
*/
function Item($item, layer, itemEditor) {
if (this.type === undefined) {
this.type = $item.data('item');
}
this.needSize = this.constructor.needSize;
this.fragmentEditor = itemEditor.fragmentEditor;
/**
* @type {N2Classes.Generator}
*/
this.generator = this.fragmentEditor.editor.generator;
this.self = this;
this.$item = $item;
this.layer = layer;
this.itemEditor = itemEditor;
this.fonts = [];
this.styles = [];
this.needFill = [];
this.values = this.$item.data('itemvalues');
if (typeof this.values !== 'object') {
this.values = $.parseJSON(this.values);
}
this.pre = 'div#' + this.fragmentEditor.editor.frontend.elementID + ' ';
this.defaultValues = itemEditor.getItemForm(this.type).values;
this.added();
this.$item.data('item', this);
this.$item.appendTo(this.layer.getContent());
this.layer.item = this;
if (this.$item.children().length === 0) {
// It's create, so render the item
this.layer.readyDeferred.done($.proxy(this.reRender, this));
}
$('')
.addClass('n2-ss-item-overlay')
.css('zIndex', 89)
.appendTo(this.$item);
this.$item.find('a').on('click', function (e) {
e.preventDefault();
});
$(window).trigger('ItemCreated');
}
Item.needSize = false;
N2Classes.Historical(Item);
Item.prototype.changeValue = function (property, value) {
if (this == this.itemEditor.activeItem) {
$('#item_' + this.type + property).data('field')
.insideChange(value);
} else {
this.values[property] = value;
}
};
Item.prototype.activate = function (e, context, force) {
if (this.itemEditor.setActiveItem(this, context, force)) {
nextend.basicCSS.activate('ss3item' + this.type, this.values, {
font: this.fonts,
style: this.styles
});
this.itemEditor.lastValues[this.type] = this.values;
}
};
Item.prototype.deActivate = function () {
nextend.basicCSS.deActivate();
};
Item.prototype.render = function (data, originalData) {
this.layer.layer.triggerHandler('itemRender');
this.$item.html('');
this.parseAll(data);
this._render(data);
// These will be available on the backend render
this.itemEditor.lastValues[this.type] = this.values = originalData;
$('')
.addClass('n2-ss-item-overlay')
.css('zIndex', 89)
.appendTo(this.$item);
var layerName = this.getName(data);
if (layerName === false || layerName == '' || layerName == 'Layer') {
layerName = this.type;
} else {
layerName = layerName.replace(/[<>]/gi, '');
}
this.layer.rename(layerName, false);
this.layer.update();
this.$item.find('a').on('click', function (e) {
e.preventDefault();
});
};
Item.prototype._render = function (data) {
};
Item.prototype.reRender = function (newData) {
this.values = $.extend({}, this.getDefault(), this.values, newData);
this.render($.extend({}, this.values), this.values);
};
Item.prototype.delete = function () {
this.$item.trigger('mouseleave');
this.$item.remove();
if (this.itemEditor.activeItem == this) {
this.itemEditor.activeItem = null;
}
};
Item.prototype.getHTML = function (base64) {
var item = '';
if (base64) {
item = '[' + this.type + ' values="' + N2Classes.Base64.encode(JSON.stringify(this.values)) + '"]';
} else {
item = $('')
.attr('data-item', this.type)
.attr('data-itemvalues', JSON.stringify(this.values));
}
return item;
};
Item.prototype.getData = function () {
return {
type: this.type,
values: this.values
};
};
Item.prototype.getDefault = function () {
return {};
};
Item.prototype.added = function () {
};
Item.prototype.addedFont = function (mode, name) {
var $input = $('#item_' + this.type + name);
if ($input.length) {
this.fonts.push({
mode: mode,
name: name,
field: $input.data('field'),
def: this.defaultValues[name]
});
$.when(nextend.fontManager.addVisualUsage(mode, this.values[name], this.pre))
.done($.proxy(function (existsFont) {
if (!existsFont) {
this.changeValue(name, '');
}
}, this));
}
};
Item.prototype.addedStyle = function (mode, name) {
var $input = $('#item_' + this.type + name);
if ($input.length) {
this.styles.push({
mode: mode,
name: name,
field: $input.data('field'),
def: this.defaultValues[name]
});
$.when(nextend.styleManager.addVisualUsage(mode, this.values[name], this.pre))
.done($.proxy(function (existsStyle) {
if (!existsStyle) {
this.changeValue(name, '');
}
}, this));
}
};
Item.prototype.parseAll = function (data) {
for (var i = 0; i < this.fonts.length; i++) {
data[this.fonts[i].name + 'class'] = nextend.fontManager.getClass(data[this.fonts[i].name], this.fonts[i].mode) + ' ';
}
for (var i = 0; i < this.styles.length; i++) {
data[this.styles[i].name + 'class'] = nextend.styleManager.getClass(data[this.styles[i].name], this.styles[i].mode) + ' ';
}
for (var i = 0; i < this.needFill.length; i++) {
if (typeof data[this.needFill[i]] !== 'undefined') {
data[this.needFill[i]] = this.generator.fill(data[this.needFill[i]] + '');
}
}
};
Item.prototype.getName = function (data) {
return 'Layer';
};
Item.prototype.resizeLayerToImage = function (image) {
var layer = this.layer,
$image = $("")
.attr("src", image)
.on('load', $.proxy(function () {
var width = $image[0].width,
height = $image[0].height;
if (width > 0 && height > 0) {
var $containerElement = this.fragmentEditor.editor.getMainContainerElement(),
maxWidth = $containerElement.width(),
maxHeight = $containerElement.height();
if (width > maxWidth) {
height = height * maxWidth / width;
width = maxWidth;
}
if (height > maxHeight) {
width = width * maxHeight / height;
//height = maxHeight;
}
N2Classes.History.get().off();
layer.setProperty('width', width);
layer.setProperty('height', 'auto');
N2Classes.History.get().on();
}
}, this));
};
Item.prototype.fitLayer = function (item) {
return false;
};
return Item;
});
N2D('ItemManager', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param {N2Classes.FragmentEditor} fragmentEditor
* @param options
* @constructor
*/
function ItemManager(fragmentEditor, options) {
this.suppressChange = false;
this.activeItemOriginalData = null;
this.fragmentEditor = fragmentEditor;
this.lastValues = {};
this.startItems();
this.forms = {};
this.activeForm = false;
if (!options.isUploadDisabled) {
var dropArea = $('#n2-ss-slide-canvas-container-inner');
dropArea.nUIFileUpload({
url: options.uploadUrl,
pasteZone: false,
dropZone: dropArea,
dataType: 'json',
paramName: 'image',
add: function (e, data) {
data.formData = {path: '/' + options.uploadDir};
data.submit();
},
done: $.proxy(function (e, data) {
var response = data.result;
if (response.data && response.data.name) {
var item = this.createLayerItem(false, {item: 'image'});
item.reRender({
image: response.data.url
});
item.activate(null, null, true);
} else {
N2Classes.AjaxHelper.notification(response);
}
}, this),
fail: function (e, data) {
N2Classes.AjaxHelper.notification(data.jqXHR.responseJSON);
},
start: function () {
N2Classes.AjaxHelper.startLoading();
},
stop: function () {
setTimeout(function () {
N2Classes.AjaxHelper.stopLoading();
}, 100);
}
});
}
}
ItemManager.prototype.setActiveItem = function (item, context, force) {
// Must be called through N2Classes.Item.activate();
if (item != this.activeItem || force) {
this.activeItemOriginalData = null;
var type = item.type;
if (this.activeForm) {
this.activeForm.form.css('display', 'none');
}
if (this.activeItem) {
this.activeItem.deActivate();
}
this.activeForm = this.getItemForm(type);
var values = $.extend({}, this.activeForm.values, item.values);
this.activeItem = item;
this.suppressChange = true;
for (var key in values) {
var field = $('#item_' + type + key).data('field');
if (field) {
field.insideChange(values[key]);
}
}
this.suppressChange = false;
this.activeForm.form.css('display', 'block');
this.focusFirst(context);
return true;
}
//this.focusFirst(context);
return false;
};
ItemManager.prototype.focusFirst = function (context) {
var field = this.activeForm.fields.eq(0).data('field');
if (this.fragmentEditor.editor.generator.isDynamicSlide() && field.connectedField && field.connectedField instanceof N2Classes.FormElementImage) {
} else {
field.focus(typeof context !== 'undefined' && context);
}
};
ItemManager.prototype.startItems = function () {
$('.n2-ss-core-item').nUICanvasItem({
canvasUIManager: this.fragmentEditor.mainContainer.canvasUIManager,
distance: 5,
$layer: function () {
return this.element.clone();
},
onCreate: $.proxy(function (e, itemOptions, targetContainer, targetIndex) {
switch (targetContainer.layer.type) {
case 'content':
case 'col':
N2Classes.History.get().startBatch();
var item = this.createLayerItem(targetContainer.layer, itemOptions.$layer.data(), 'click');
N2Classes.History.get().addControl('skipForwardUndos');
targetContainer.layer.container.insertLayerAt(item.layer, targetIndex);
item.layer.changeGroup(false, targetContainer.layer);
N2Classes.History.get().endBatch();
break;
case 'row':
var col = targetContainer.layer.createCol();
targetContainer.layer.moveCol(col.getIndex(), targetIndex);
N2Classes.History.get().startBatch();
var item = this.createLayerItem(col, itemOptions.$layer.data(), 'click');
N2Classes.History.get().addControl('skipForwardUndos');
col.container.insertLayerAt(item.layer, 0);
item.layer.changeGroup(false, col);
N2Classes.History.get().endBatch();
break;
default:
var mainContainerOffset = this.fragmentEditor.mainContainer.layer.offset(),
item = this.createLayerItem(this.fragmentEditor.mainContainer, itemOptions.$layer.data(), 'click');
item.layer.placement.current.setPosition(e.pageX - mainContainerOffset.left - 20, e.pageY - mainContainerOffset.top - 20);
break;
}
}, this),
start: function () {
$('#n2-ss-add-sidebar').removeClass('n2-active');
}
}).on('click', $.proxy(function (e) {
this.createLayerItem(this.fragmentEditor.mainContainer.getActiveGroup(), $(e.currentTarget).data(), 'click');
}, this));
$('[data-itemshortcut]').on({
click: $.proxy(function (e) {
e.preventDefault();
$('.n2-ss-core-item[data-item="' + $(e.currentTarget).data('itemshortcut') + '"]').trigger('click');
}, this),
mousedown: $.proxy(function (e) {
$('.n2-ss-core-item[data-item="' + $(e.currentTarget).data('itemshortcut') + '"]').trigger(e);
}, this)
});
$('[data-structureshortcut]').on({
click: $.proxy(function (e) {
e.preventDefault();
$('.n2-ss-add-layer-button').trigger('click');
$('#n2-ss-layers-switcher > .n2-labels .n2-td').eq(1).trigger('click');
}, this),
mousedown: $.proxy(function (e) {
$('.n2-ss-core-item[data-sstype="' + $(e.currentTarget).data('structureshortcut') + '"]').trigger(e);
}, this)
});
};
ItemManager.prototype.createLayerItem = function (group, data, interaction, props) {
group = group || this.fragmentEditor.mainContainer.getActiveGroup();
var type = data.item;
if (type === 'structure') {
var layer = new N2Classes.Row(this.fragmentEditor, group, {});
layer.create(data.sstype);
layer.hightlightStructure();
return {
layer: layer
};
} else {
var itemData = this.getItemForm(type),
extraValues = {};
switch (type) {
case 'image':
if (group.container.allowedPlacementMode === 'absolute') {
extraValues.size = '100%|*|auto';
} else {
extraValues.size = 'auto|*|auto';
}
break;
}
var $item = $('').attr('data-item', type)
.data('itemvalues', $.extend(true, {}, itemData.values, this.getLastValues(type), extraValues))
.addClass('n2-ss-item n2-ss-item-' + type),
layer = this._createLayer($item, group, $.extend($('.n2-ss-core-item-' + type).data('layerproperties'), props));
if (interaction && interaction == "click") {
setTimeout(function () {
layer.layer.trigger('mousedown', ['create']).trigger('mouseup', ['create']).trigger('click', ['create']);
}, 500);
} else {
layer.activate();
}
this.fragmentEditor.layerWindow.switchTab('item');
N2Classes.History.get().addSimple(this, this.historyDelete, this.historyCreate, [group, layer, data]);
return layer.item;
}
};
ItemManager.prototype.getLastValues = function (type) {
if (this.lastValues[type] !== undefined) {
return this.lastValues[type];
}
return {};
};
ItemManager.prototype.getItemClass = function (type) {
var itemClass = 'Item' + N2Classes.StringHelper.capitalize(type);
if (typeof N2Classes[itemClass] === 'undefined') {
return 'Item';
}
return itemClass;
};
ItemManager.prototype._createLayer = function ($item, group, properties) {
var defaultAlign = this.fragmentEditor.layerOptions.layerFeatures.layerDefault;
for (var k in defaultAlign) {
if (defaultAlign[k] !== null) {
properties[k] = defaultAlign[k];
}
}
var newLayer = new N2Classes.Layer(this.fragmentEditor, group, properties);
newLayer.create(function (layer) {
return layer._createLayer()
.append($item);
});
return newLayer;
};
/**
* Initialize an item type and subscribe the field changes on that type.
* We use event normalization to prevent rendering.
* @param type
* @private
*/
ItemManager.prototype.getItemForm = function (type) {
if (this.forms[type] === undefined) {
var form = $('#smartslider-slide-toolbox-item-type-' + type),
formData = {
form: form,
values: form.data('itemvalues'),
fields: form.find('[name^="item_' + type + '"]'),
fieldNameRegexp: new RegExp('item_' + type + "\\[(.*?)\\]", "")
};
formData.fields.on({
nextendChange: $.proxy(this.updateCurrentItem, this),
keydown: $.proxy(this.updateCurrentItemDeBounced, this)
});
this.forms[type] = formData;
}
return this.forms[type];
};
/**
* This function renders the current item with the current values of the related form field.
*/
ItemManager.prototype.updateCurrentItem = function (e) {
if (!this.suppressChange) {
if (this.activeItemOriginalData === null) {
this.activeItemOriginalData = $.extend({}, this.activeItem.values);
}
var data = {},
originalData = {};
// Get the current values of the fields
// Run through the related item filter
this.activeForm.fields.each($.proxy(function (i, field) {
var field = $(field),
name = field.attr('name').match(this.activeForm.fieldNameRegexp)[1];
originalData[name] = data[name] = field.val();
}, this));
if (e && e.type == 'nextendChange') {
var task = N2Classes.History.get().addValue(this, this.historyUpdateCurrentItem, [this.activeItem]);
if (task) {
task.setValues(this.activeItemOriginalData, $.extend({}, originalData));
}
this.activeItemOriginalData = null;
}
this.activeItem.render($.extend({}, this.activeItem.getDefault(), data), originalData);
}
};
ItemManager.prototype.historyUpdateCurrentItem = function (values, historyActiveItem) {
var maybeOldActiveItem = historyActiveItem.getSelf();
maybeOldActiveItem.reRender($.extend(true, {}, values));
maybeOldActiveItem.values = values;
if (this.activeItem == maybeOldActiveItem) {
maybeOldActiveItem.activate(null, null, true);
}
};
ItemManager.prototype.updateCurrentItemDeBounced = NextendDeBounce(function (e) {
this.updateCurrentItem(e);
}, 100);
ItemManager.prototype.historyDelete = function (historyGroup, historyLayer) {
historyLayer.getSelf().delete();
};
ItemManager.prototype.historyCreate = function (historyGroup, historyLayer, data) {
var item = this.createLayerItem(historyGroup.getSelf(), data);
historyLayer.setSelf(item.layer);
};
ItemManager.prototype.historyCreateStructure = function (historyGroup, historyLayer, data) {
var obj = this.createLayerItem(historyGroup.getSelf(), data);
historyLayer.setSelf(obj.layer);
};
ItemManager.prototype.getSelf = function () {
return this;
};
return ItemManager;
});
N2D('PluginActivatable', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
*/
function PluginActivatable() {
this.isActive = false;
this.preventActivation = false;
}
PluginActivatable.prototype.activate = function (e, context, preventExitFromSelection) {
if (this.preventActivation) return false;
if (document.activeElement) {
document.activeElement.blur();
}
if (e && (e.ctrlKey || e.metaKey) && this.fragmentEditor.mainContainer.getSelectedLayer()) {
return !this.select();
} else {
if (e && e.which == 3 && this.fragmentEditor.selectMode) {
return false;
}
if (!preventExitFromSelection) {
this.fragmentEditor.exitSelectMode();
}
}
if (e) {
this.positionSidebar();
}
// Set the layer active if it is not active currently
if (this.fragmentEditor.mainContainer.getSelectedLayer() !== this) {
this.layerRow.addClass('n2-active');
this.layer.addClass('n2-active');
this.layer.triggerHandler('n2-ss-activate');
this.fragmentEditor.changeActiveLayer(this, preventExitFromSelection);
nextend.activeLayer = this.layer;
this.fragmentEditor.ui.onActivateLayer(this);
}
this.isActive = true;
return true;
};
PluginActivatable.prototype.deActivate = function () {
this.isActive = false;
if (this.layer === undefined) {
console.error();
}
this.layer.removeClass('n2-active');
this.layerRow.removeClass('n2-active');
this.layer.triggerHandler('n2-ss-deactivate');
};
return PluginActivatable;
});
N2D('PluginEditableName', function ($, undefined) {
"use strict";
var dblClickInterval = 300,
timeout = null;
/**
* @memberOf N2Classes
*
* @constructor
*/
function PluginEditableName() {
}
PluginEditableName.prototype.addProperties = function ($layer) {
this.createProperty('name', this.label, $layer);
this.createProperty('nameSynced', 1, $layer);
};
PluginEditableName.prototype.makeNameEditable = function () {
this.layerTitleSpan.on({
mouseup: $.proxy(function (e) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
this.editName();
} else {
this.activate(e);
timeout = setTimeout($.proxy(function () {
timeout = null;
}, this), dblClickInterval);
}
}, this)
})
};
PluginEditableName.prototype.editName = function () {
var input = new N2Classes.InlineField();
input.$input.on({
valueChanged: $.proxy(function (e, newName) {
this.rename(newName, true);
this.layerTitleSpan.css('display', 'inline');
}, this),
cancel: $.proxy(function () {
this.layerTitleSpan.css('display', 'inline');
}, this)
});
this.layerTitleSpan.css('display', 'none');
input.injectNode(this.layerTitle, this.property.name);
};
PluginEditableName.prototype.rename = function (newName, force) {
if (this.property.nameSynced || force) {
if (force) {
this.property.nameSynced = 0;
}
if (newName == '') {
if (force) {
this.property.nameSynced = 1;
this.item.reRender();
return false;
}
newName = 'Layer #' + (this.group.getLayerCount() + 1);
}
newName = newName.substr(0, 35);
if (this.property.name != newName) {
this.property.name = newName;
this.layerTitleSpan.html(newName);
this.$.trigger('layerRenamed', newName);
}
}
};
return PluginEditableName;
});
N2D('PluginShowOn', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
*/
function PluginShowOn() {
}
PluginShowOn.prototype.addProperties = function ($layer) {
this.showsOnCurrent = true;
this.createProperty('generatorvisible', '', $layer);
this.createProperty('desktopPortrait', 1, $layer);
this.createProperty('desktopLandscape', 1, $layer);
this.createProperty('tabletPortrait', 1, $layer);
this.createProperty('tabletLandscape', 1, $layer);
this.createProperty('mobilePortrait', 1, $layer);
this.createProperty('mobileLandscape', 1, $layer);
};
PluginShowOn.prototype._hide = function () {
this.layer.css('display', 'none');
this.showsOnCurrent = false;
this.update();
};
PluginShowOn.prototype._show = function () {
if (parseInt(this.property[this.fragmentEditor.getMode()])) {
this.layer.css('display', '');
this.showsOnCurrent = true;
}
this.update();
};
PluginShowOn.prototype._syncdesktopPortrait = function () {
var value = this.getProperty('desktopPortrait');
this.__syncShowOnDevice('desktopPortrait', value);
};
PluginShowOn.prototype._syncdesktopLandscape = function () {
var value = this.getProperty('desktopLandscape');
this.__syncShowOnDevice('desktopLandscape', value);
};
PluginShowOn.prototype._synctabletPortrait = function () {
var value = this.getProperty('tabletPortrait');
this.__syncShowOnDevice('tabletPortrait', value);
};
PluginShowOn.prototype._synctabletLandscape = function () {
var value = this.getProperty('tabletLandscape');
this.__syncShowOnDevice('tabletLandscape', value);
};
PluginShowOn.prototype._syncmobilePortrait = function () {
var value = this.getProperty('mobilePortrait');
this.__syncShowOnDevice('mobilePortrait', value);
};
PluginShowOn.prototype._syncmobileLandscape = function () {
var value = this.getProperty('mobileLandscape');
this.__syncShowOnDevice('mobileLandscape', value);
};
PluginShowOn.prototype.__syncShowOnDevice = function (mode, value) {
if (this.getMode() == mode) {
var value = parseInt(value);
if (value) {
this._show();
} else {
this._hide();
}
this.layer.triggerHandler('LayerShowChange', [mode, value]);
this.placement.doAction('triggerLayerResized');
}
};
return PluginShowOn;
});
N2D('Col', ['ContentAbstract'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param fragmentEditor
* @param group
* @param properties
* @constructor
* @augments ContentAbstract
*/
function Col(fragmentEditor, group, properties) {
this.label = 'Col';
this.type = 'col';
this.innerContainer = '> .n2-ss-layer-col';
this.localStyle = [
{
group: 'normal', selector: '-inner', css: {
transition: 'transition:all .3s;transition-property:border,background-image,background-color,border-radius,box-shadow;'
}
},
{group: 'hover', selector: '-inner:HOVER', css: {}}
];
N2Classes.ContentAbstract.prototype.constructor.call(this, fragmentEditor, group, properties);
this.placement.allow('default');
}
Col.prototype = Object.create(N2Classes.ContentAbstract.prototype);
Col.prototype.constructor = Col;
Col.prototype._createLayer = function () {
return $('
'), 'normal', '> .n2-ss-layer', ['row', 'layer']);
this.container.setLayerContainerElement(this.$content);
this.addClassElement(this.layer);
this.addClassElement(this.$content, '-inner');
var remove = $('').on('click', $.proxy(this.delete, this)),
duplicate = $('').on('click', $.proxy(function () {
this.duplicate(true, false)
}, this));
this._createLayerListRow([
$('').append(duplicate).append(remove)
]).addClass('n2-ss-layer-content-row');
this.openerElement = $('').insertBefore(this.layerTitleSpan)
.on('click', $.proxy(this.switchOpened, this));
this.container.$ul.appendTo(this.layerRow);
this.readyDeferred.done($.proxy(this._syncopened, this));
};
Col.prototype._start = function (isCreate) {
N2Classes.ContentAbstract.prototype._start.call(this, isCreate);
if (isCreate) {
this.highlight(2000);
}
};
Col.prototype.getRealOrder = function () {
var order = this.getProperty('order');
if (order == 0) {
return 10;
}
return order;
};
Col.prototype._syncorder = function () {
var order = this.getProperty('order');
if (order == 0) {
this.layer.css('order', '');
} else {
this.layer.css('order', order * 2);
}
this.group.refreshUI();
};
Col.prototype._synccolwidth = function () {
this.widthPercentage = ((new Fraction(this.getProperty('colwidth'))).valueOf() * 100);
//this.layer.css('width', this.widthPercentage + '%');
this.group.refreshUI();
};
Col.prototype.getWidthPercentage = function () {
return this.widthPercentage;
};
Col.prototype._synchref =
Col.prototype['_synchref-target'] = function () {
};
Col.prototype._syncborderradius =
Col.prototype['_syncborderradius-hover'] = function () {
var borderRadius = this.getProperty('borderradius');
if (borderRadius > 0) {
this.addLocalStyle('normal', 'borderradius', 'border-radius:' + borderRadius + 'px;');
}
var borderRadiusHover = this.getProperty('borderradius-hover');
if (borderRadiusHover && borderRadiusHover != borderRadius) {
this.addLocalStyle('hover', 'borderradius', 'border-radius:' + borderRadiusHover + 'px;');
}
};
Col.prototype._syncborderwidth =
Col.prototype._syncbordercolor =
Col.prototype._syncborderstyle =
Col.prototype['_syncborderstyle-hover'] =
Col.prototype['_syncbordercolor-hover'] =
Col.prototype['_syncborderwidth-hover'] = function () {
this._syncborder();
};
Col.prototype._syncborder = function () {
var borderstyle = this.getProperty('borderstyle'),
bordercolor = this.getProperty('bordercolor'),
borderwidth = this.getProperty('borderwidth');
this.addLocalStyle('normal', 'border', this.getBorderCSS(borderstyle, bordercolor, borderwidth));
var hoverStyle = '',
isHoverDifferent = false,
borderstyleHover = this.getProperty('borderstyle-hover'),
bordercolorHover = this.getProperty('bordercolor-hover'),
borderwidthHover = this.getProperty('borderwidth-hover');
if (borderstyleHover !== undefined && borderstyleHover != borderstyle) {
isHoverDifferent = true;
}
if (bordercolorHover !== undefined && bordercolorHover != bordercolor) {
isHoverDifferent = true;
}
if (borderwidthHover !== undefined && borderwidthHover != borderwidth) {
isHoverDifferent = true;
}
if (isHoverDifferent) {
if (borderstyleHover === undefined) {
borderstyleHover = borderstyle;
}
if (bordercolorHover === undefined) {
bordercolorHover = bordercolor;
}
if (borderwidthHover === undefined) {
borderwidthHover = borderwidth;
}
hoverStyle = this.getBorderCSS(borderstyleHover, bordercolorHover, borderwidthHover);
}
this.addLocalStyle('hover', 'border', hoverStyle);
this.update();
};
Col.prototype.getBorderCSS = function (borderStyle, borderColor, borderWidth) {
var style = '';
if (borderStyle != 'none') {
style += 'border-color:' + N2Color.hex2rgbaCSS(borderColor) + ';';
style += 'border-style:' + borderStyle + ';';
borderWidth = borderWidth.split('|*|');
var unit = 'px';
style += 'border-width:' + borderWidth.join(unit + ' ') + unit + ';';
}
return style;
};
Col.prototype._syncboxshadow =
Col.prototype['_syncboxshadow-hover'] = function () {
var boxShadow = this.getProperty('boxshadow');
this.addLocalStyle('normal', 'boxshadow', this.getBoxShadowCSS(boxShadow.split('|*|')));
var hoverStyle = '',
boxShadowHover = this.getProperty('boxshadow-hover');
if (boxShadowHover !== undefined && boxShadowHover != boxShadow) {
hoverStyle = this.getBoxShadowCSS(boxShadowHover.split('|*|'));
}
this.addLocalStyle('hover', 'boxshadow', hoverStyle);
};
Col.prototype.getBoxShadowCSS = function (boxShadow) {
if ((boxShadow[0] != 0 || boxShadow[1] != 0 || boxShadow[2] != 0 || boxShadow[3] != 0) && N2Color.hex2alpha(boxShadow[4]) != 0) {
return 'box-shadow:' + boxShadow[0] + 'px ' + boxShadow[1] + 'px ' + boxShadow[2] + 'px ' + boxShadow[3] + 'px ' + N2Color.hex2rgbaCSS(boxShadow[4]) + ';';
}
return '';
};
Col.prototype.delete = function () {
if (this.group.container.getLayerCount() > 1) {
this._delete();
} else {
this.group.delete();
}
};
Col.prototype.getHTML = function (base64) {
var layer = N2Classes.ComponentAbstract.prototype.getHTML.call(this, base64);
layer.attr('data-rowcolumns', this.group.getColumns());
return layer;
};
Col.prototype.renderModeProperties = function (isReset) {
this._syncorder();
N2Classes.ContentAbstract.prototype.renderModeProperties.call(this, isReset);
};
Col.prototype.update = function () {
this.group._syncwrapafter();
N2Classes.ComponentAbstract.prototype.update.call(this);
};
Col.prototype.setPropertystylemode = function () {
N2Classes.ContentAbstract.prototype.setPropertystylemode.apply(this, arguments);
this.syncAdvancedField('borderradius');
this.syncAdvancedField('boxshadow');
this.syncAdvancedField('borderwidth');
this.syncAdvancedField('borderstyle');
this.syncAdvancedField('bordercolor');
};
Col.prototype.getOrderedIndex = function () {
return this.group.getOrderedColumns().indexOf(this);
};
return Col;
});
var dependencies = ['Historical', 'LayerDataStorage', 'PluginEditableName'];
N2D('ComponentAbstract', dependencies, function ($, undefined) {
"use strict";
var i = 0;
window.layers = [];
/**
* @memberOf N2Classes
*
* @param {N2Classes.FragmentEditor} fragmentEditor
* @param group
* @param properties
* @constructor
* @augments N2Classes.Historical
* @augments N2Classes.PluginActivatable
* @augments N2Classes.LayerDataStorage
* @augments N2Classes.PluginEditableName
* @augments N2Classes.PluginAnimatable
* @augments N2Classes.PluginShowOn
*/
function ComponentAbstract(fragmentEditor, group, properties) {
this.wraps = {};
this.counter = i++;
window.layers[this.counter] = this;
this.self = this;
this.originalProperties = properties || {};
N2Classes.LayerDataStorage.prototype.constructor.call(this);
this.readyDeferred = $.Deferred();
this.readyDeferred.done($.proxy(this.onReady, this));
this.isDeleteStarted = false;
this.isDeleted = false;
this._lastClasses = false;
this.$ = $(this);
this.proxyRefreshBaseSize = $.proxy(this.refreshBaseSize, this);
this.proxyRefreshTextAlign = $.proxy(this.refreshTextAlign, this);
this.status = ComponentAbstract.STATUS.UNDEFINED;
this.fragmentEditor = fragmentEditor;
this.group = group;
this.classElements = [];
this.localStyleSyncThrottled = NextendThrottle(this.localStyleSync, 50);
N2Classes.PluginActivatable.prototype.constructor.call(this);
/** @type {N2Classes.Placement} */
this.placement = new N2Classes.Placement(this);
this.readyDeferred.done($.proxy(this.addUILabels, this));
}
ComponentAbstract.STATUS = {
UNDEFINED: 0,
NORMAL: 1,
LOCKED: 2,
HIDDEN: 3
};
ComponentAbstract.STATUS_INV = {
0: 'UNDEFINED',
1: 'NORMAL',
2: 'LOCKED',
3: 'HIDDEN'
};
for (var k in N2Classes.PluginActivatable.prototype) {
ComponentAbstract.prototype[k] = N2Classes.PluginActivatable.prototype[k];
}
for (var k in N2Classes.LayerDataStorage.prototype) {
ComponentAbstract.prototype[k] = N2Classes.LayerDataStorage.prototype[k];
}
for (var k in N2Classes.PluginEditableName.prototype) {
ComponentAbstract.prototype[k] = N2Classes.PluginEditableName.prototype[k];
}
for (var k in N2Classes.PluginShowOn.prototype) {
ComponentAbstract.prototype[k] = N2Classes.PluginShowOn.prototype[k];
}
N2Classes.Historical(ComponentAbstract);
ComponentAbstract.prototype.onSelfChange = function () {
};
ComponentAbstract.prototype.addUILabels = function () {
this.markTimer = null;
this.uiLabel = $('
'), 'normal', '> .n2-ss-layer', ['row', 'layer']);
this.container.setLayerContainerElement(this.$content);
$('').appendTo(status).on('click', $.proxy(function (e) {
e.preventDefault();
if (this.status == N2Classes.ComponentAbstract.STATUS.HIDDEN) {
this.setStatusNormal();
} else {
this.changeStatus(N2Classes.ComponentAbstract.STATUS.HIDDEN);
}
}, this));
this._createLayerListRow([
$('').append(status),
$('').append(remove)
]).addClass('n2-ss-layer-content-row');
this.openerElement = $('').insertBefore(this.layerTitleSpan)
.on('click', $.proxy(this.switchOpened, this));
this.container.$ul.appendTo(this.layerRow);
this.readyDeferred.done($.proxy(this._syncopened, this));
};
Content.prototype.create = function () {
this.originalProperties.adaptivefont = 1;
N2Classes.ContentAbstract.prototype.create.call(this);
this._syncselfalign();
this._onReady();
};
Content.prototype.load = function ($layer, isEditorStart) {
N2Classes.ContentAbstract.prototype.load.call(this, $layer, isEditorStart);
this._syncselfalign();
this._onReady();
};
Content.prototype._onReady = function () {
N2Classes.ContentAbstract.prototype._onReady.call(this);
this.startUISizing();
};
Content.prototype.startUISizing = function () {
this.layer.nUINormalSizing({
start: $.proxy(function (e, prop) {
N2Classes.PositionDisplay.get().show('NormalSizing');
if (prop === 'maxwidth') {
this.layer.attr('data-has-maxwidth', '1');
}
}, this),
resizeMaxWidth: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().update(e, 'NormalSizing', 'Max-width: ' + (ui.value == 0 ? 'none' : (ui.value + 'px')));
}, this),
stopMaxWidth: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().hide('NormalSizing');
this.setProperty('maxwidth', ui.value);
}, this)
});
};
Content.prototype.delete = function () {
var layers = this.container.getSortedLayers();
for (var i = 0; i < layers.length; i++) {
layers[i].delete();
}
};
Content.prototype.remove = function () {
this._delete();
};
Content.prototype.update = function () {
this.fragmentEditor.editor.getMainContainerElement().triggerHandler('updateSize');
};
Content.prototype.onChildCountChange = function () {
var layers = this.container.getSortedLayers();
this.layer.toggleClass('n2-ss-content-empty', layers.length == 0);
};
Content.prototype.renderModeProperties = function (isReset) {
N2Classes.ContentAbstract.prototype.renderModeProperties.call(this, isReset);
this._syncselfalign();
};
Content.prototype._syncselfalign = function () {
this.layer.attr('data-cssselfalign', this.getProperty('selfalign'));
};
Content.prototype.duplicate = function (needActivate) {
console.error('Content can not be duplicated!');
};
return Content;
});
N2D('ContentAbstract', ['LayerContainer', 'ComponentAbstract'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param fragmentEditor
* @param group
* @param properties
* @constructor
* @augments ComponentAbstract
*/
function ContentAbstract(fragmentEditor, group, properties) {
this._defaults = $.extend({verticalalign: 'flex-start'}, this._defaults);
this._syncbgThrottled = NextendThrottle(this._syncbgThrottled, 50);
this.stylemode = '';
N2Classes.ComponentAbstract.prototype.constructor.call(this, fragmentEditor, group, properties);
}
ContentAbstract.prototype = Object.create(N2Classes.ComponentAbstract.prototype);
ContentAbstract.prototype.constructor = ContentAbstract;
ContentAbstract.prototype.addProperties = function ($layer) {
this.createProperty('opened', 1, $layer, this);
N2Classes.ComponentAbstract.prototype.addProperties.call(this, $layer);
this.createProperty('bgimage', '', $layer);
this.createProperty('bgimagex', 50, $layer);
this.createProperty('bgimagey', 50, $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('bgcolor', '00000000', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('bgcolorgradient', 'off', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('bgcolorgradientend', '00000000', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createProperty('verticalalign', this._defaults.verticalalign, $layer);
this.createDeviceProperty('maxwidth', {desktopPortrait: 0}, $layer);
this.createDeviceProperty('inneralign', {desktopPortrait: 'inherit'}, $layer);
this.createDeviceProperty('padding', {desktopPortrait: '10|*|10|*|10|*|10|*|px+'}, $layer);
this.$.on('baseSizeUpdated.contentAbstract', $.proxy(this._syncpadding, this));
};
ContentAbstract.prototype.getBackgroundElement = function () {
return this.$content;
};
ContentAbstract.prototype.getPaddingElement = function () {
return this.$content;
};
ContentAbstract.prototype.create = function () {
N2Classes.ComponentAbstract.prototype.create.call(this);
this.initUI();
this._syncverticalalign();
this._syncmaxwidth();
this._syncpadding();
this._syncinneralign();
this._syncbgThrottled();
};
ContentAbstract.prototype.load = function ($layer, isEditorStart) {
N2Classes.ComponentAbstract.prototype.load.call(this, $layer, isEditorStart);
this.initUI();
this._syncverticalalign();
this._syncmaxwidth();
this._syncpadding();
this._syncinneralign();
this._syncbgThrottled();
this.container.startWithExistingNodes(isEditorStart);
};
ContentAbstract.prototype.initUI = function () {
this.layer.on({
mousedown: $.proxy(N2Classes.WindowManager.setMouseDownArea, null, 'layerClicked'),
click: $.proxy(function (e) {
if (!nextend.shouldPreventMouseUp && this.fragmentEditor.preventActivationBubbling()) {
this.activate(e);
}
}, this),
dblclick: $.proxy(function (e) {
e.stopPropagation();
$('[data-tab="layer"]').trigger('click');
}, this)
});
this.getPaddingElement().nUISpacing({
handles: 'n, s, e, w',
start: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().show('Spacing');
}, this),
spacing: $.proxy(function (e, ui) {
var html = '';
for (var k in ui.changed) {
html += 'Padding ' + k + ': ' + ui.changed[k] + 'px
';
}
N2Classes.PositionDisplay.get().update(e, 'Spacing', html);
}, this),
stop: $.proxy(this.onSpacingStop, this),
});
};
ContentAbstract.prototype.onSpacingStop = function (event, ui) {
N2Classes.PositionDisplay.get().hide('Spacing');
var padding = this.getPadding().split('|*|'),
ratioH = 1,
ratioV = 1;
if (padding[padding.length - 1] == 'px+' && Math.abs(parseFloat(this.layer.css('fontSize')) - this.baseSize) > 1) {
ratioH = this.fragmentEditor.getResponsiveRatioHorizontal();
ratioV = this.fragmentEditor.getResponsiveRatioVertical();
}
for (var k in ui.changed) {
var value = ui.changed[k];
switch (k) {
case 'top':
padding[0] = Math.round(value / ratioV);
break;
case 'right':
padding[1] = Math.round(value / ratioH);
break;
case 'bottom':
padding[2] = Math.round(value / ratioV);
break;
case 'left':
padding[3] = Math.round(value / ratioH);
break;
}
}
this.setProperty('padding', padding.join('|*|'));
$('#layercol-padding').data('field').insideChange(padding.join('|*|'));
};
ContentAbstract.prototype.switchOpened = function (e) {
e.preventDefault();
if (this.getProperty('opened')) {
this.setProperty('opened', 0);
} else {
this.setProperty('opened', 1);
}
};
ContentAbstract.prototype._syncopened = function () {
if (this.getProperty('opened')) {
this.openerElement.removeClass('n2-closed');
this.container.$ul.css('display', '');
this.layer.triggerHandler('opened');
} else {
this.openerElement.addClass('n2-closed');
this.container.$ul.css('display', 'none');
this.layer.triggerHandler('closed');
}
};
ContentAbstract.prototype.getPadding = function () {
return this.getProperty('padding');
};
ContentAbstract.prototype._syncpadding = function () {
var padding = this.getPadding().split('|*|'),
unit = padding.pop(),
baseSize = this.baseSize;
if (unit == 'px+' && baseSize > 0) {
unit = 'em';
for (var i = 0; i < padding.length; i++) {
padding[i] = parseInt(padding[i]) / baseSize;
}
}
var css = padding.join(unit + ' ') + unit;
this.getPaddingElement().css('padding', css);
this.update();
this.getPaddingElement().nUISpacing('option', 'current', css);
};
ContentAbstract.prototype._syncmaxwidth = function () {
var value = parseInt(this.getProperty('maxwidth'));
if (value <= 0 || isNaN(value)) {
this.layer.css('maxWidth', '')
.attr('data-has-maxwidth', '0');
} else {
this.layer.css('maxWidth', value + 'px')
.attr('data-has-maxwidth', '1');
}
this.update();
};
ContentAbstract.prototype.getInnerAlign = function () {
return this.getProperty('inneralign');
};
ContentAbstract.prototype._syncinneralign = function () {
this.layer.attr('data-csstextalign', this.getInnerAlign());
this.refreshTextAlign();
};
ContentAbstract.prototype.getVerticalAlign = function () {
return this.getProperty('verticalalign');
};
ContentAbstract.prototype._syncverticalalign = function () {
this.$content.attr('data-verticalalign', this.getVerticalAlign());
};
ContentAbstract.prototype._syncbgimage =
ContentAbstract.prototype._syncbgimagex =
ContentAbstract.prototype._syncbgimagey =
ContentAbstract.prototype._syncbgcolor =
ContentAbstract.prototype._syncbgcolorgradient =
ContentAbstract.prototype._syncbgcolorgradientend =
ContentAbstract.prototype['_syncbgcolor-hover'] =
ContentAbstract.prototype['_syncbgcolorgradient-hover'] =
ContentAbstract.prototype['_syncbgcolorgradientend-hover'] = function () {
this._syncbgThrottled();
};
ContentAbstract.prototype._syncbgThrottled = function () {
var background = '',
image = this.fragmentEditor.editor.generator.fill(this.getProperty('bgimage')),
gradientBackgroundProps = '';
if (image != '') {
var x = parseInt(this.getProperty('bgimagex'));
if (!isFinite(x)) {
x = 50;
}
var y = parseInt(this.getProperty('bgimagey'));
if (!isFinite(y)) {
y = 50;
}
background += 'URL("' + nextend.imageHelper.fixed(image) + '") ' + x + '% ' + y + '% / cover no-repeat';
gradientBackgroundProps = ' ' + x + '% ' + y + '% / cover no-repeat'
}
var color = this.getProperty('bgcolor'),
gradient = this.getProperty('bgcolorgradient'),
colorend = this.getProperty('bgcolorgradientend');
var normalStyle = this.getBackgroundCSS(color, gradient, colorend, background, gradientBackgroundProps);
this.addLocalStyle('normal', 'bgcolor', normalStyle);
var hoverStyle = '',
isHoverDifferent = false,
colorHover = this.getProperty('bgcolor-hover'),
gradientHover = this.getProperty('bgcolorgradient-hover'),
colorendHover = this.getProperty('bgcolorgradientend-hover');
if (colorHover !== undefined && colorHover != color) {
isHoverDifferent = true;
}
if (gradientHover !== undefined && gradientHover != gradient) {
isHoverDifferent = true;
}
if (colorendHover !== undefined && colorendHover != colorend) {
isHoverDifferent = true;
}
if (isHoverDifferent) {
if (colorHover === undefined) {
colorHover = color;
}
if (gradientHover === undefined) {
gradientHover = gradient;
}
if (colorendHover === undefined) {
colorendHover = colorend;
}
hoverStyle = this.getBackgroundCSS(colorHover, gradientHover, colorendHover, background, gradientBackgroundProps);
}
this.addLocalStyle('hover', 'bgcolor', hoverStyle);
};
ContentAbstract.prototype.getBackgroundCSS = function (color, gradient, colorend, backgroundImage, gradientBackgroundProps) {
if (N2Color.hex2alpha(color) != 0 || (gradient != 'off' && N2Color.hex2alpha(colorend) != 0)) {
var after = '';
if (backgroundImage != '') {
after = gradientBackgroundProps + ',' + backgroundImage;
}
switch (gradient) {
case 'horizontal':
return 'background:linear-gradient(to right, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'vertical':
return 'background:linear-gradient(to bottom, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'diagonal1':
return 'background:linear-gradient(45deg, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'diagonal2':
return 'background:linear-gradient(135deg, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'off':
default:
if (backgroundImage != '') {
return "background: linear-gradient(" + N2Color.hex2rgbaCSS(color) + ", " + N2Color.hex2rgbaCSS(color) + ")" + after + ';';
}
return 'background:' + N2Color.hex2rgbaCSS(color) + ';';
}
} else if (backgroundImage != '') {
return 'background:' + backgroundImage + ';';
}
return '';
};
ContentAbstract.prototype.getData = function (params) {
var data = N2Classes.ComponentAbstract.prototype.getData.call(this, params);
if (params.layersIncluded) {
data.layers = this.container.getData(params);
}
return data;
};
ContentAbstract.prototype.onChildCountChange = function () {
this.layer.toggleClass('n2-ss-content-empty', this.container.getLayerCount() == 0);
this.update();
};
ContentAbstract.prototype.renderModeProperties = function (isReset) {
N2Classes.ComponentAbstract.prototype.renderModeProperties.call(this, isReset);
this._syncmaxwidth();
this._syncpadding();
this._syncinneralign();
};
ContentAbstract.prototype.getDroppable = function () {
if (!this.layer.is(":visible") || this.status == N2Classes.ComponentAbstract.STATUS.HIDDEN || this.status == N2Classes.ComponentAbstract.STATUS.LOCKED) {
return 'hidden';
}
return {
$container: this.$content,
layer: this,
placement: 'normal',
axis: 'y'
}
};
ContentAbstract.prototype.getLLDroppable = function (layer) {
switch (layer.type) {
case 'layer':
case 'row':
return {
$container: this.container.$ul,
layer: this
};
break;
}
return false;
};
ContentAbstract.prototype.getContents = function () {
return this.$content;
};
ContentAbstract.prototype.setPropertystylemode = function (name, value, from) {
this.stylemode = value;
this.syncAdvancedField('bgcolor');
this.syncAdvancedField('bgcolorgradient');
this.syncAdvancedField('bgcolorgradientend');
};
ContentAbstract.prototype.onSyncFields = function () {
this.fragmentEditor.layerOptions.updateField('stylemode', this.stylemode);
};
return ContentAbstract;
});
N2D('Layer', ['ComponentAbstract'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
* @augments ComponentAbstract
*/
function Layer(fragmentEditor, group, properties) {
this.label = n2_('Layer');
this.type = 'layer';
this.parent = false;
this.itemEditor = fragmentEditor.itemEditor;
N2Classes.ComponentAbstract.prototype.constructor.call(this, fragmentEditor, group, properties);
this.placement.allow('absolute');
this.placement.allow('normal');
this.$.on('load create', $.proxy(this.startItem, this));
};
Layer.prototype = Object.create(N2Classes.ComponentAbstract.prototype);
Layer.prototype.constructor = Layer;
Layer.prototype.create = function () {
N2Classes.ComponentAbstract.prototype.create.apply(this, arguments);
this.initUI();
this._onReady();
};
Layer.prototype.load = function ($layer, isEditorStart) {
N2Classes.ComponentAbstract.prototype.load.call(this, $layer, isEditorStart);
this.initUI();
this._onReady();
};
Layer.prototype.startItem = function () {
var $item = this.layer.find('.n2-ss-item');
new N2Classes[this.itemEditor.getItemClass($item.data('item'))]($item, this, this.itemEditor);
this.layer.nUICanvasItem({
canvasUIManager: this.fragmentEditor.mainContainer.canvasUIManager,
layer: this,
$layer: this.layer
});
if (this.item.needSize) {
this.layer.addClass('n2-ss-layer-needsize');
}
};
Layer.prototype.initUI = function () {
this.layer.on({
mousedown: $.proxy(N2Classes.WindowManager.setMouseDownArea, null, 'layerClicked'),
click: $.proxy(function (e) {
if (this.fragmentEditor.preventActivationBubbling()) {
this.activate(e);
}
}, this),
dblclick: $.proxy(function (e) {
if (!N2Classes.WindowManager.get().isPreventDblClick) {
e.stopPropagation();
$('[data-tab="item"]').trigger('click');
this.item.itemEditor.focusFirst('dblclick');
}
}, this)
});
};
Layer.prototype.getContent = function () {
var $content = this.layer,
selector = $content.data('animatableselector');
if (selector) {
$content = $content.find(selector);
}
return $content;
};
Layer.prototype._createLayer = function () {
return $('')
.attr('data-sstype', this.type);
};
Layer.prototype.createRow = function () {
var status = $(''),
remove = $('').on('click', $.proxy(this.delete, this)),
duplicate = $('').on('click', $.proxy(function () {
this.duplicate(true, false)
}, this));
$('').appendTo(status).on('click', $.proxy(function (e) {
e.preventDefault();
if (this.status == N2Classes.ComponentAbstract.STATUS.HIDDEN) {
this.setStatusNormal();
} else {
this.changeStatus(N2Classes.ComponentAbstract.STATUS.HIDDEN);
}
}, this));
this._createLayerListRow([
$('').append(status),
$('').append(duplicate).append(remove)
])
.addClass('n2-ss-layer-layer-row');
};
/**
*
* @param e if provided, the layerWindow will show
* @param context
* @param preventExitFromSelection
*/
Layer.prototype.activate = function (e, context, preventExitFromSelection) {
N2Classes.PluginActivatable.prototype.activate.call(this, e, context, preventExitFromSelection);
if (this.item) {
this.item.activate(null, context);
} else {
console.error('The layer do not have item on it!');
}
};
Layer.prototype.getHTML = function (base64) {
var $node = N2Classes.ComponentAbstract.prototype.getHTML.call(this, base64);
var $item = this.item.getHTML(base64);
$node.attr('style', $node.attr('style') + this.getStyleText())
.append($item);
return $node;
};
Layer.prototype.getData = function (params) {
var data = N2Classes.ComponentAbstract.prototype.getData.call(this, params);
if (params.itemsIncluded) {
data.item = this.item.getData();
}
return data;
};
Layer.prototype.getStyleText = function () {
var style = '';
var crop = this.property.crop;
if (crop == 'auto' || crop == 'mask') {
crop = 'hidden';
}
style += 'overflow:' + crop + ';';
return style;
};
Layer.prototype.getContents = function () {
return this.item.$item;
};
Layer.prototype.onSelfChange = function () {
N2Classes.ComponentAbstract.prototype.onSelfChange.call(this);
this.item.setSelf(this.self.item);
};
return Layer;
});
N2D('LayerAdvancedProperty', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param basename
* @param def
* @param modesDef
* @param obj
* @param propName
* @constructor
*/
function LayerAdvancedProperty(basename, def, modesDef, obj, propName) {
this.basename = basename;
this.def = def;
this.modesDef = modesDef;
this.obj = obj;
this.propName = propName;
}
LayerAdvancedProperty.prototype.getBaseName = function () {
return this.basename;
};
/**
*
* @returns {object}
*/
LayerAdvancedProperty.prototype.getNames = function () {
var a = {};
a[this.basename] = this.def;
for (var k in this.modesDef) {
a[this.basename + k] = this.modesDef[k];
}
return a;
};
LayerAdvancedProperty.prototype.getCurrentMode = function () {
return this.obj[this.propName];
};
LayerAdvancedProperty.prototype.getName = function () {
var currentMode = this.getCurrentMode();
if (currentMode !== '') {
return this.basename + currentMode;
}
return this.basename;
};
LayerAdvancedProperty.prototype.getDefault = function () {
var currentMode = this.getCurrentMode();
if (currentMode !== '') {
return this.modesDef[currentMode];
}
return this.def;
};
LayerAdvancedProperty.prototype.resetMode = function (name) {
if (this.propName == name) {
var currentMode = this.getCurrentMode();
if (currentMode !== '') {
var oldValue = this.obj.property[this.basename + currentMode];
this.obj.property[this.basename + currentMode] = this.modesDef[currentMode];
this.obj.syncAdvancedField(this.basename);
this.obj.render(this.basename + currentMode, oldValue, 'manager');
}
}
};
return LayerAdvancedProperty;
});
N2D('MainContainer', ['LayerContainer'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param {N2Classes.FragmentEditor} fragmentEditor
* @constructor
*/
function MainContainer(fragmentEditor) {
this.baseSize = 16;
this.activeLayer = null;
this.$ = fragmentEditor.$;
this.isActiveGroupBlurred = true;
this.isMainGroup = true;
this.fragmentEditor = fragmentEditor;
this.layer = fragmentEditor.editor.getMainContainerElement();
this.layer.nUICanvas({
mainContainer: this,
tolerance: 5,
smartguides: $.proxy(function (context) {
context.$layer.triggerHandler('LayerParent');
return this.fragmentEditor.getSnap();
}, this),
display: {
hidden: true,
show: $.proxy(function () {
N2Classes.PositionDisplay.get().show('Canvas');
}, this),
update: $.proxy(function (e, position) {
N2Classes.PositionDisplay.get().update(e, 'Canvas', 'L: ' + parseInt(position.left | 0) + 'px
T: ' + parseInt(position.top | 0) + 'px');
}, this),
hide: $.proxy(function () {
N2Classes.PositionDisplay.get().hide('Canvas');
}, this)
},
start: $.proxy(function (e, ui) {
this.fragmentEditor.canvasDragStart(e, ui);
}, this),
drag: $.proxy(function (e, ui) {
this.fragmentEditor.canvasDragMove(e, ui);
if (ui.layer) ui.layer.placement.current.triggerLayerResized();
}, this),
stop: $.proxy(function (e, ui) {
this.fragmentEditor.canvasDragStop(e, ui);
if (ui.layer) ui.layer.placement.current.triggerLayerResized();
}, this)
});
this.canvasUIManager = this.layer.nUICanvas('instance');
this.layer.nUILayerList({
mainContainer: this,
$fixed: $('#n2-ss-layers'),
$scrolled: $('#n2-ss-layer-list')
});
this.layerListUIManager = this.layer.nUILayerList('instance');
this.layer.parent().prepend('');
this.container = new N2Classes.LayerContainer(this, $('#n2-ss-layer-list').find('ul'), 'absolute', '> .n2-ss-layer, > .n2-ss-layer-group', ['content', 'row', 'layer', 'group']);
this.layerRow = this.container.$ul;
this.$.on('layerCreated', $.proxy(function () {
this.refreshHasLayers();
}, this));
}
MainContainer.prototype.lateInit = function () {
this.container.startWithExistingNodes(true);
this.layer.parent().on('click', $.proxy(function () {
if (this.fragmentEditor.shouldPreventActivationBubble) {
this.blurActiveGroup();
} else {
this.unBlurActiveGroup();
}
this.fragmentEditor.allowActivation();
}, this));
};
MainContainer.prototype.onResize = function (ratios) {
var sortedLayerList = this.getEverySortedLayers();
for (var i = 0; i < sortedLayerList.length; i++) {
sortedLayerList[i].placement.doLinearResize(ratios);
}
};
MainContainer.prototype.getEverySortedLayers = function () {
var list = this.container.getChildLayersRecursive(false),
children = {};
for (var i = list.length - 1; i >= 0; i--) {
if (typeof list[i].property.parentid !== 'undefined' && list[i].property.parentid) {
if (typeof children[list[i].property.parentid] == 'undefined') {
children[list[i].property.parentid] = [];
}
children[list[i].property.parentid].push(list[i]);
list.splice(i, 1);
}
}
for (var i = 0; i < list.length; i++) {
if (typeof list[i].property.id !== 'undefined' && list[i].property.id && typeof children[list[i].property.id] !== 'undefined') {
children[list[i].property.id].unshift(0);
children[list[i].property.id].unshift(i + 1);
list.splice.apply(list, children[list[i].property.id]);
delete children[list[i].property.id];
}
}
return list;
};
MainContainer.prototype.deleteLayers = function () {
var layers = this.container.getSortedLayers();
for (var i = 0; i < layers.length; i++) {
layers[i].delete();
}
};
MainContainer.prototype.blurActiveGroup = function () {
this.isActiveGroupBlurred = true;
};
MainContainer.prototype.unBlurActiveGroup = function () {
this.isActiveGroupBlurred = false;
};
MainContainer.prototype.getActiveGroup = function () {
if (this.isActiveGroupBlurred) {
var group = this,
activeLayer = this.activeLayer;
if (this.fragmentEditor.isGroup(activeLayer) || this.fragmentEditor.isCol(activeLayer) || this.fragmentEditor.isContent(activeLayer)) {
group = activeLayer;
} else if (this.fragmentEditor.isRow(activeLayer)) {
group = activeLayer.container.getSortedLayers()[0];
} else if (activeLayer) {
group = activeLayer.group;
}
switch (this.fragmentEditor.currentEditorMode) {
case 'content':
if (group == this) {
group = this.fragmentEditor.mainContent;
}
break;
case 'canvas':
if (group == this.fragmentEditor.mainContent) {
group = this;
}
break;
}
return group;
}
switch (this.fragmentEditor.currentEditorMode) {
case 'content':
return this.fragmentEditor.mainContent;
}
return this;
};
MainContainer.prototype.getSelectedLayer = function () {
if (this.activeLayer == null) {
return false;
}
return this.activeLayer;
};
MainContainer.prototype.getLayerData = function (requestedLayers) {
if (requestedLayers === undefined) {
return [];
}
var layersData = [],
layers = [];
for (var i = 0; i < requestedLayers.length; i++) {
requestedLayers[i].getDataWithChildren(layersData, layers);
}
return layersData;
};
MainContainer.prototype.layerDeleted = function (layer) {
var i = this.fragmentEditor.selectedLayers.length;
while (i--) {
if (layer == this.fragmentEditor.selectedLayers[i]) {
this.fragmentEditor.selectedLayers.splice(i, 1);
}
}
this._afterLayerDeletedDeBounced(layer);
this.refreshHasLayers();
};
MainContainer.prototype._afterLayerDeletedDeBounced = NextendDeBounce(function (layer) {
if (!this.activeLayer || this.activeLayer.isDeleted) {
this.fragmentEditor.resetActiveLayer();
}
}, 50);
MainContainer.prototype.refreshHasLayers = function () {
$('body').toggleClass('n2-ss-has-layers', this.container.getLayerCount() > 0);
nextend.triggerResize();
};
MainContainer.prototype.getName = function () {
return 'Slide';
};
MainContainer.prototype.update = function () {
};
MainContainer.prototype.onChildCountChange = function () {
};
MainContainer.prototype.markEnter = function (e) {
};
MainContainer.prototype.markLeave = function (e) {
};
MainContainer.prototype.getSelf = function () {
return this;
};
/**
*
* @returns {N2Classes.FrontendLayerAnimationManager[]}
*/
MainContainer.prototype.createLayerAnimations = function () {
var horizontalRatio = this.fragmentEditor.editor.getHorizontalRatio(),
verticalRatio = this.fragmentEditor.editor.getVerticalRatio(),
animations = [],
children = this.container.getSortedLayers();
for (var i = 0; i < children.length; i++) {
animations.push.apply(animations, children[i].createLayerAnimations(horizontalRatio, verticalRatio));
}
return animations;
};
MainContainer.prototype.getDroppables = function (exclude) {
var editorMode = this.fragmentEditor.currentEditorMode,
droppables = [],
layers;
if (editorMode == 'canvas') {
droppables.push(this.getDroppable());
layers = this.container.getSortedLayers();
var index = $.inArray(this.fragmentEditor.mainContent, layers);
if (index > -1) {
layers.splice(index, 1);
}
} else if (editorMode == 'content') {
layers = [this.fragmentEditor.mainContent]
}
for (var i = 0; i < layers.length; i++) {
if (layers[i] == exclude) continue;
var droppable = layers[i].getDroppable();
if (typeof droppable == 'object') {
droppables.push(droppable);
}
if (droppable != 'hidden' && layers[i].container) {
droppables.push.apply(droppables, layers[i].container.getDroppables(exclude));
}
}
return droppables;
};
MainContainer.prototype.getLLDroppables = function (layer) {
return this.container.getLLDroppables(layer);
};
MainContainer.prototype.getDroppable = function () {
return {
$container: this.layer,
layer: this,
placement: 'absolute'
}
};
MainContainer.prototype.getLLDroppable = function (layer) {
switch (layer.type) {
case 'layer':
case 'row':
case 'group':
case 'content':
return {
$container: this.container.$ul,
layer: this
};
break;
}
return false;
};
MainContainer.prototype.replaceLayers = function (layersData) {
this._idTranslation = {};
var layerNodes = this.dataToLayers($.extend(true, [], layersData).reverse()),
layers = [];
this.deleteLayers();
this.fragmentEditor.mainContent.remove();
for (var i = 0; i < layerNodes.length; i++) {
layers.push(this.container.append(layerNodes[i]));
}
this.fragmentEditor.refreshMode();
this.container.layerContainerElement.n2imagesLoaded()
.always($.proxy(this.fragmentEditor.refreshMode, this.fragmentEditor));
if (!this.getSelectedLayer()) {
if (layers.length > 0) {
layers[0].activate();
}
}
if (N2Classes.History.get().isEnabled()) {
N2Classes.History.get().addSimple(this, this.historyDeleteAll, this.historyReplaceLayers, [layersData, layers, this.container.getAllLayers()]);
}
return layers;
};
MainContainer.prototype.historyDeleteAll = function (layersData, historicalLayers) {
for (var i = 0; i < historicalLayers.length; i++) {
historicalLayers[i].getSelf().delete();
}
this.fragmentEditor.mainContent.getSelf().remove();
};
MainContainer.prototype.historyReplaceLayers = function (layersData, historicalLayers, historicalAllLayers) {
this.replaceLayers(layersData);
var layers = this.container.getAllLayers();
for (var i = 0; i < historicalAllLayers.length; i++) {
historicalAllLayers[i].setSelf(layers[i]);
}
};
MainContainer.prototype.addLayers = function (layersData, group) {
this._idTranslation = {};
var layerNodes = this.dataToLayers($.extend(true, [], layersData)),
layers = [];
for (var i = 0; i < layerNodes.length; i++) {
layers.push(group.container.append(layerNodes[i]));
}
this.fragmentEditor.refreshMode();
N2Classes.History.get().addSimple(this, this.historyDeleteLayers, this.historyAddLayers, [layersData, layers, group]);
return layers;
};
MainContainer.prototype.historyDeleteLayers = function (layersData, historicalLayers, historicalGroup) {
for (var i = 0; i < historicalLayers.length; i++) {
historicalLayers[i].getSelf().delete();
}
};
MainContainer.prototype.historyAddLayers = function (layersData, historicalLayers, historicalGroup) {
var layers = this.addLayers(layersData, historicalGroup.getSelf());
for (var i = 0; i < historicalLayers.length; i++) {
historicalLayers[i].setSelf(layers[i]);
}
};
MainContainer.prototype.dataToLayers = function (layers, $targetGroupContent) {
var nodes = [];
for (var i = 0; i < layers.length; i++) {
switch (layers[i].type) {
case 'group':
console.error('Group data to layer not implemented!');
//new N2Classes.Group(this, this.mainContainer, false, layers[i].data, layers[i]);
break;
case 'row':
nodes.push(this.buildRowNode(layers[i], $targetGroupContent));
break;
case 'col':
nodes.push(this.buildColNode(layers[i], $targetGroupContent));
break;
case 'content':
nodes.push(this.buildContentNode(layers[i], $targetGroupContent));
break;
case 'layer':
default:
nodes.push(this.buildLayerNode(layers[i], $targetGroupContent));
break;
}
}
return nodes;
};
MainContainer.prototype._buildNodePrepareID = function ($layer, layerData) {
if (layerData.id) {
var id = $.fn.uid();
var deferred = false;
if (typeof this._idTranslation[layerData.id] == 'object') {
deferred = this._idTranslation[layerData.id];
}
this._idTranslation[layerData.id] = id;
layerData.id = id;
$layer.attr('id', id);
if (deferred) {
deferred.resolve(layerData.id, id);
}
}
if (layerData.parentid) {
switch (typeof this._idTranslation[layerData.parentid]) {
case 'string':
layerData.parentid = this._idTranslation[layerData.parentid];
break;
case 'undefined':
this._idTranslation[layerData.parentid] = $.Deferred();
case 'object':
this._idTranslation[layerData.parentid].done($.proxy(function ($_layer, originalID, newID) {
$_layer.data('parentid', newID);
}, this, $layer));
break;
default:
layerData.parentid = '';
}
}
};
MainContainer.prototype.buildContentNode = function (layerData, $targetGroupContent) {
var $layer = $(""),
$content = $("").appendTo($layer);
for (var k in layerData) {
$layer.data(k, layerData[k]);
}
if ($targetGroupContent !== undefined) {
$layer.appendTo($targetGroupContent);
}
this.dataToLayers(layerData.layers, $content);
return $layer;
};
MainContainer.prototype.buildRowNode = function (layerData, $targetGroupContent) {
var $layer = $(""),
$content = $("").appendTo($layer);
this._buildNodePrepareID($layer, layerData);
for (var k in layerData) {
$layer.data(k, layerData[k]);
}
if ($targetGroupContent !== undefined) {
$layer.appendTo($targetGroupContent);
}
this.dataToLayers(layerData.cols, $content);
return $layer;
};
MainContainer.prototype.buildColNode = function (layerData, $targetGroupContent) {
var $layer = $(""),
$content = $("").appendTo($layer);
for (var k in layerData) {
$layer.data(k, layerData[k]);
}
if ($targetGroupContent !== undefined) {
$layer.appendTo($targetGroupContent);
}
this.dataToLayers(layerData.layers, $content);
return $layer;
};
MainContainer.prototype.buildLayerNode = function (layerData, $targetGroupContent) {
var $layer = $("")
.attr('style', layerData.style);
var storedIndex = 1;
if (layerData.zIndex) {
storedIndex = layerData.zIndex;
}
this._buildNodePrepareID($layer, layerData);
if (layerData.items !== undefined) {
layerData.item = layerData.items[0];
delete layerData.items;
}
$('')
.data('item', layerData.item.type)
.data('itemvalues', layerData.item.values)
.appendTo($layer);
delete layerData.style;
delete layerData.item;
for (var k in layerData) {
$layer.data(k, layerData[k]);
}
if ($targetGroupContent !== undefined) {
$layer.appendTo($targetGroupContent);
}
return $layer;
};
return MainContainer;
});
N2D('Row', ['LayerContainer', 'ComponentAbstract'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param fragmentEditor
* @param group
* @param properties
* @constructor
* @augments ComponentAbstract
*/
function Row(fragmentEditor, group, properties) {
this.label = n2_('Row');
this.type = 'row';
this._syncbgThrottled = NextendThrottle(this._syncbgThrottled, 50);
this.innerContainer = '> .n2-ss-layer-row > .n2-ss-layer-row-inner';
this.localStyle = [
{
group: 'normal', selector: '-inner', css: {
transition: 'transition:all .3s;transition-property:border,background-image,background-color,border-radius,box-shadow;'
}
},
{group: 'hover', selector: '-inner:HOVER', css: {}}
];
this.columnsField = $('#layerrow-columns').data('field');
this.refreshUI = NextendDeBounce(this.refreshUI, 100);
this.stylemode = '';
N2Classes.ComponentAbstract.prototype.constructor.call(this, fragmentEditor, group, properties);
this.placement.allow('absolute');
this.placement.allow('normal');
}
Row.prototype = Object.create(N2Classes.ComponentAbstract.prototype);
Row.prototype.constructor = Row;
Row.prototype.addProperties = function ($layer) {
this.createProperty('opened', 1, $layer, this);
N2Classes.ComponentAbstract.prototype.addProperties.call(this, $layer);
this.createProperty('href', '', $layer);
this.createProperty('href-target', '_self', $layer);
this.createProperty('bgimage', '', $layer);
this.createProperty('bgimagex', 50, $layer);
this.createProperty('bgimagey', 50, $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('bgcolor', '00000000', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('bgcolorgradient', 'off', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('bgcolorgradientend', '00000000', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('borderradius', 0, {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createAdvancedProperty(new N2Classes.LayerAdvancedProperty('boxshadow', '0|*|0|*|0|*|0|*|00000080', {
"-hover": undefined
}, this, "stylemode"), $layer);
this.createProperty('fullwidth', 1, $layer);
this.createProperty('stretch', 0, $layer);
this.createDeviceProperty('inneralign', {desktopPortrait: 'inherit'}, $layer);
this.createDeviceProperty('padding', {desktopPortrait: '10|*|10|*|10|*|10|*|px+'}, $layer);
this.createDeviceProperty('gutter', {desktopPortrait: 20}, $layer);
this.createDeviceProperty('wrapafter', {desktopPortrait: 0, mobilePortrait: 1, mobileLandscape: 1}, $layer);
this.$.on('baseSizeUpdated.row', $.proxy(this._syncpadding, this));
};
Row.prototype.historyDeleteSelf = function () {
this.delete();
};
Row.prototype.historyCreateSelf = function (historyGroup, preset, historyCols) {
var newLayer = new N2Classes.Row(this.fragmentEditor, historyGroup.getSelf(), {});
newLayer.create(preset);
this.setSelf(newLayer);
var newCols = newLayer.container.getSortedLayers();
for (var i = 0; i < newCols.length; i++) {
historyCols[i].setSelf(newCols[i]);
}
};
Row.prototype.create = function (preset) {
var cb,
_createRawRow = function (cols) {
return $("")
.append($("")
.append($("")
.append(cols)))
.attr('data-sstype', 'row');
},
_createRawCol = function (inner) {
return $("").append($("").append(inner));
};
switch (preset) {
case '2col':
cb = function (layer) {
return _createRawRow([_createRawCol(), _createRawCol()]);
};
break;
case '2col-60-40':
cb = function (layer) {
return _createRawRow([_createRawCol().data('colwidth', '6/10'), _createRawCol().data('colwidth', '4/10')]);
};
break;
case '2col-40-60':
cb = function (layer) {
return _createRawRow([_createRawCol().data('colwidth', '4/10'), _createRawCol().data('colwidth', '6/10')]);
};
break;
case '2col-80-20':
cb = function (layer) {
return _createRawRow([_createRawCol().data('colwidth', '8/10'), _createRawCol().data('colwidth', '2/10')]);
};
break;
case '2col-20-80':
cb = function (layer) {
return _createRawRow([_createRawCol().data('colwidth', '2/10'), _createRawCol().data('colwidth', '8/10')]);
};
break;
case '3col':
cb = function (layer) {
return _createRawRow([_createRawCol(), _createRawCol(), _createRawCol()]);
};
break;
case '3col-20-60-20':
cb = function (layer) {
return _createRawRow([_createRawCol().data('colwidth', '2/10'), _createRawCol().data('colwidth', '6/10'), _createRawCol().data('colwidth', '2/10')]);
};
break;
case '4col':
cb = function (layer) {
return _createRawRow([_createRawCol(), _createRawCol(), _createRawCol(), _createRawCol()]);
};
break;
case "special":
cb = function (layer) {
var $innerRow = _createRawRow([_createRawCol(), _createRawCol()]);
return _createRawRow([_createRawCol().data('colwidth', '1/5'), _createRawCol($innerRow).data('colwidth', '4/5')]);
};
break;
default:
cb = function (layer) {
return _createRawRow([_createRawCol()]);
};
}
if (this.group.container.allowedPlacementMode === 'absolute') {
this.originalProperties = $.extend({
width: '100%',
align: 'center',
valign: 'top',
top: 20
}, this.originalProperties);
}
N2Classes.ComponentAbstract.prototype.create.call(this, cb, true);
this.initUI();
this.container.startWithExistingNodes(false);
this._syncpadding();
this._syncinneralign();
this._syncfullwidth();
this._syncstretch();
this._syncbgThrottled();
this._syncborderradius();
this._syncboxshadow();
this.renderModeProperties();
this.container.renderModeProperties();
N2Classes.History.get().addSimple(this, this.historyDeleteSelf, this.historyCreateSelf, [this.group, preset, this.container.getSortedLayers()]);
this._onReady();
};
Row.prototype.load = function ($layer, isEditorStart) {
N2Classes.ComponentAbstract.prototype.load.call(this, $layer, isEditorStart);
this.initUI();
this.container.startWithExistingNodes(isEditorStart);
this._syncpadding();
this._syncinneralign();
this._syncfullwidth();
this._syncstretch();
this._syncbgThrottled();
this._syncborderradius();
this._syncboxshadow();
this._onReady();
};
Row.prototype.initUI = function () {
this.layer.nUICanvasItem({
canvasUIManager: this.fragmentEditor.mainContainer.canvasUIManager,
layer: this,
$layer: this.layer
});
this.layer.on({
mousedown: $.proxy(N2Classes.WindowManager.setMouseDownArea, null, 'layerClicked'),
click: $.proxy(function (e) {
if (!nextend.shouldPreventMouseUp && this.fragmentEditor.preventActivationBubbling()) {
this.activate(e);
}
}, this),
dblclick: $.proxy(function (e) {
e.stopPropagation();
$('[data-tab="row"]').trigger('click');
}, this)
});
this.$row.nUISpacing({
handles: 'n, s, e, w',
start: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().show('Spacing');
}, this),
spacing: $.proxy(function (e, ui) {
var html = '';
for (var k in ui.changed) {
html += 'Padding ' + k + ': ' + ui.changed[k] + 'px
';
}
N2Classes.PositionDisplay.get().update(e, 'Spacing', html);
}, this),
stop: $.proxy(this.____makeLayerResizeableStop, this),
});
this.$row.nUIColumns({
columns: '1',
gutter: this.getGutter(),
start: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().show('Columns');
}, this),
colwidth: $.proxy(function (e, ui) {
this.updateColumnWidth(ui.currentPercent);
N2Classes.PositionDisplay.get().update(e, 'Columns', Math.round(ui.currentPercent[ui.index] * 100) + '% — ' + Math.round(ui.currentPercent[ui.index + 1] * 100) + '%');
}, this),
stop: $.proxy(function (e, ui) {
N2Classes.PositionDisplay.get().hide('Columns');
this.setRealColsWidth(ui.currentFractions);
}, this)
});
var context = {};
this.$rowInner.nUISortableRow({
distance: 10,
helper: 'clone_hide',
forceHelperSize: true,
forcePlaceholderSize: true,
items: '> .n2-ss-layer',
handle: " > .n2-ss-layer-ui-label-container > .n2-ss-layer-ui-label-self",
start: $.proxy(function (e, ui) {
context.originalPrevLayer = ui.item.prevAll('.n2-ss-layer').not(ui.placeholder).first()
.data('layerObject');
var parts = this.getColumns().split('+');
ui.placeholder.css({
width: ((new Fraction(parts[ui.item.data('layerObject').getIndex()])).valueOf() * 100) + '%',
visibility: 'visible',
margin: this.getGutter() + 'px'
});
if (ui.helper.hasClass('n2-ss-last-in-row')) {
ui.placeholder.addClass('n2-ss-last-in-row');
}
ui.placeholder.css('order', ui.helper.css('order'));
ui.placeholder.attr('data-r', ui.helper.attr('data-r'));
}, this),
beforestop: $.proxy(function (e, ui) {
ui.placeholder.detach();
context.layer = ui.item.data('layerObject');
context.oldIndex = context.layer.getOrderedIndex();
}, this),
stop: $.proxy(function (e, ui) {
var layer = context.layer,
oldIndex = context.oldIndex,
newIndex = 0;
if (context.originalPrevLayer) {
layer.layer.insertAfter(context.originalPrevLayer.layer);
} else {
layer.layer.prependTo(layer.group.container.layerContainerElement);
}
switch (ui.lastPosition[1]) {
case 'before':
newIndex = ui.lastPosition[0].data('layerObject').getOrderedIndex();
if (newIndex > oldIndex) {
newIndex--;
}
break;
case 'after':
newIndex = ui.lastPosition[0].data('layerObject').getOrderedIndex();
if (newIndex < oldIndex) {
newIndex++;
}
break;
}
if (oldIndex !== newIndex) {
this.moveCol(oldIndex, newIndex);
}
}, this)
});
};
Row.prototype.____makeLayerResizeableStop = function (event, ui) {
N2Classes.PositionDisplay.get().hide('Spacing');
var padding = this.getPadding().split('|*|'),
ratioH = 1,
ratioV = 1;
if (padding[padding.length - 1] == 'px+' && Math.abs(parseFloat(this.layer.css('fontSize')) - this.baseSize) > 1) {
ratioH = this.fragmentEditor.getResponsiveRatioHorizontal();
ratioV = this.fragmentEditor.getResponsiveRatioVertical();
}
for (var k in ui.changed) {
var value = ui.changed[k];
switch (k) {
case 'top':
padding[0] = Math.round(value / ratioV);
break;
case 'right':
padding[1] = Math.round(value / ratioH);
break;
case 'bottom':
padding[2] = Math.round(value / ratioV);
break;
case 'left':
padding[3] = Math.round(value / ratioH);
break;
}
}
this.setProperty('padding', padding.join('|*|'));
$('#layerrow-padding').data('field').insideChange(padding.join('|*|'));
};
Row.prototype._createLayer = function () {
return $(''), 'default', ' > .n2-ss-layer', ['col']);
this.container.setLayerContainerElement(this.$rowInner);
this.addClassElement(this.layer);
this.addClassElement(this.$row, '-inner');
var status = $(''),
remove = $('').on('click', $.proxy(this.delete, this)),
duplicate = $('').on('click', $.proxy(function () {
this.duplicate(true, false)
}, this));
$('').appendTo(status).on('click', $.proxy(function (e) {
e.preventDefault();
if (this.status == N2Classes.ComponentAbstract.STATUS.HIDDEN) {
this.setStatusNormal();
} else {
this.changeStatus(N2Classes.ComponentAbstract.STATUS.HIDDEN);
}
}, this));
this._createLayerListRow([
$('').append(status),
$('').append(duplicate).append(remove)
]).addClass('n2-ss-layer-row-row');
this.openerElement = $('').insertBefore(this.layerTitleSpan)
.on('click', $.proxy(this.switchOpened, this));
this.container.$ul.appendTo(this.layerRow);
this.readyDeferred.done($.proxy(this._syncopened, this));
};
Row.prototype.activate = function () {
N2Classes.PluginActivatable.prototype.activate.apply(this, arguments);
this.columnsField.setRow(this);
this.$row.nUIColumns('option', 'active', 1);
};
Row.prototype.deActivate = function () {
this.$row.nUIColumns('option', 'active', 0);
N2Classes.PluginActivatable.prototype.deActivate.apply(this, arguments);
};
Row.prototype.switchOpened = function (e) {
e.preventDefault();
if (this.getProperty('opened')) {
this.setProperty('opened', 0);
} else {
this.setProperty('opened', 1);
}
};
Row.prototype._syncopened = function () {
if (this.getProperty('opened')) {
this.openerElement.removeClass('n2-closed');
this.container.$ul.css('display', '');
this.layer.triggerHandler('opened');
} else {
this.openerElement.addClass('n2-closed');
this.container.$ul.css('display', 'none');
this.layer.triggerHandler('closed');
}
};
Row.prototype.getColumns = function () {
var layers = this.container.getSortedLayers(),
columns = [];
for (var i = 0; i < layers.length; i++) {
columns.push(layers[i].getProperty('colwidth'));
}
return columns.join('+');
};
Row.prototype.getColumnsOrdered = function () {
var layers = this.getOrderedColumns(),
columns = [];
for (var i = 0; i < layers.length; i++) {
columns.push(layers[i].getProperty('colwidth'));
}
return columns.join('+');
};
Row.prototype._synccolumns = function () {
var layers = this.container.getSortedLayers();
for (var i = 0; i < layers.length; i++) {
layers[i]._synccolwidth();
}
this.update();
};
Row.prototype.getPadding = function () {
return this.getProperty('padding');
};
Row.prototype._syncpadding = function () {
var padding = this.getPadding().split('|*|'),
unit = padding.pop(),
baseSize = this.baseSize;
if (unit == 'px+' && baseSize > 0) {
unit = 'em';
for (var i = 0; i < padding.length; i++) {
padding[i] = parseInt(padding[i]) / baseSize;
}
}
var css = padding.join(unit + ' ') + unit;
this.$row.css('padding', css);
this.$row.nUISpacing('option', 'current', css);
this.update();
};
Row.prototype.getGutter = function () {
return this.getProperty('gutter');
};
Row.prototype._syncgutter = function () {
var gutterValue = this.getGutter(),
sideGutterValue = gutterValue / 2,
cols = this.container.getSortedLayers();
if (cols.length > 0) {
for (var i = cols.length - 1; i >= 0; i--) {
cols[i].layer
.css('margin', sideGutterValue + 'px');
}
}
this.$rowInner.css({
width: 'calc(100% + ' + (gutterValue + 1) + 'px)',
margin: -sideGutterValue + 'px'
});
this.$row.nUIColumns('option', 'gutter', this.getGutter());
this._syncwrapafter();
this.update();
};
Row.prototype._syncwrapafter = function () {
if (!this.isDeleted && !this.isDeleteStarted) {
var wrapAfter = parseInt(this.getProperty('wrapafter')),
columns = this.getOrderedColumns(),
isWrapped = false,
i;
for (i = columns.length - 1; i >= 0; i--) {
if (!columns[i].showsOnCurrent) {
columns.splice(i, 1);
}
}
// columnsLength can be 0 if all the columns hidden in the row
var columnsLength = columns.length;
if (wrapAfter > 0 && wrapAfter < columnsLength) {
isWrapped = true;
}
this.$row.attr('row-wrapped', isWrapped ? 1 : 0);
if (isWrapped) {
var flexLines = [];
for (i = 0; i < columnsLength; i++) {
var row = Math.floor(i / wrapAfter);
if (typeof flexLines[row] === 'undefined') {
flexLines[row] = [];
}
flexLines[row].push(columns[i]);
columns[i].layer
.attr('data-r', row)
.toggleClass('n2-ss-last-in-row', (i + 1) % wrapAfter === 0 || i === columnsLength - 1);
}
var gutterValue = this.getGutter();
for (i = 0; i < flexLines.length; i++) {
var flexLine = flexLines[i],
sumWidth = 0,
j;
for (j = 0; j < flexLine.length; j++) {
sumWidth += flexLine[j].getWidthPercentage();
}
for (j = 0; j < flexLine.length; j++) {
flexLine[j].layer.css('width', 'calc(' + (flexLine[j].getWidthPercentage() / sumWidth * 100) + '% - ' + (n2const.isIE || n2const.isEdge ? gutterValue + 1 : gutterValue) + 'px)');
}
}
} else {
var sumWidth = 0;
for (i = 0; i < columnsLength; i++) {
sumWidth += columns[i].getWidthPercentage();
}
for (i = 0; i < columnsLength; i++) {
columns[i].layer
.css('width', (columns[i].getWidthPercentage() / sumWidth * 100) + '%')
.removeClass('n2-ss-last-in-row')
.attr('data-r', 0);
}
if (columnsLength > 0) {
columns[columnsLength - 1].layer.addClass('n2-ss-last-in-row');
}
}
this.update();
}
};
Row.prototype.getOrderedColumns = function () {
return this.container.getSortedLayers().sort(function (a, b) {
return a.getRealOrder() - b.getRealOrder();
});
};
Row.prototype.getInnerAlign = function () {
return this.getProperty('inneralign');
};
Row.prototype._syncinneralign = function () {
this.layer.attr('data-csstextalign', this.getInnerAlign());
this.refreshTextAlign();
};
Row.prototype._syncfullwidth = function () {
this.layer.attr('data-frontend-fullwidth', this.getProperty('fullwidth') == 0 ? '0' : '1')
};
Row.prototype._syncstretch = function () {
this.layer.toggleClass('n2-ss-stretch-layer', this.getProperty('stretch') == 1);
};
Row.prototype._syncborderradius =
Row.prototype['_syncborderradius-hover'] = function () {
var borderRadius = this.getProperty('borderradius');
if (borderRadius > 0) {
this.addLocalStyle('normal', 'borderradius', 'border-radius:' + borderRadius + 'px;');
}
var borderRadiusHover = this.getProperty('borderradius-hover');
if (borderRadiusHover && borderRadiusHover != borderRadius) {
this.addLocalStyle('hover', 'borderradius', 'border-radius:' + borderRadiusHover + 'px;');
}
};
Row.prototype._syncboxshadow =
Row.prototype['_syncboxshadow-hover'] = function () {
var boxShadow = this.getProperty('boxshadow');
this.addLocalStyle('normal', 'boxshadow', this.getBoxShadowCSS(boxShadow.split('|*|')));
var hoverStyle = '',
boxShadowHover = this.getProperty('boxshadow-hover');
if (boxShadowHover !== undefined && boxShadowHover != boxShadow) {
hoverStyle = this.getBoxShadowCSS(boxShadowHover.split('|*|'));
}
this.addLocalStyle('hover', 'boxshadow', hoverStyle);
};
Row.prototype.getBoxShadowCSS = function (boxShadow) {
if ((boxShadow[0] != 0 || boxShadow[1] != 0 || boxShadow[2] != 0 || boxShadow[3] != 0) && N2Color.hex2alpha(boxShadow[4]) != 0) {
return 'box-shadow:' + boxShadow[0] + 'px ' + boxShadow[1] + 'px ' + boxShadow[2] + 'px ' + boxShadow[3] + 'px ' + N2Color.hex2rgbaCSS(boxShadow[4]) + ';';
}
return '';
};
Row.prototype._synchref =
Row.prototype['_synchref-target'] = function () {
};
Row.prototype._syncbgimage =
Row.prototype._syncbgimagex =
Row.prototype._syncbgimagey =
Row.prototype._syncbgcolor =
Row.prototype._syncbgcolorgradient =
Row.prototype._syncbgcolorgradientend =
Row.prototype['_syncbgcolor-hover'] =
Row.prototype['_syncbgcolorgradient-hover'] =
Row.prototype['_syncbgcolorgradientend-hover'] = function () {
this._syncbgThrottled();
};
Row.prototype._syncbgThrottled = function () {
var background = '',
image = this.fragmentEditor.editor.generator.fill(this.getProperty('bgimage')),
gradientBackgroundProps = '';
if (image != '') {
var x = parseInt(this.getProperty('bgimagex'));
if (!isFinite(x)) {
x = 50;
}
var y = parseInt(this.getProperty('bgimagey'));
if (!isFinite(y)) {
y = 50;
}
background += 'URL("' + nextend.imageHelper.fixed(image) + '") ' + x + '% ' + y + '% / cover no-repeat';
gradientBackgroundProps = ' ' + x + '% ' + y + '% / cover no-repeat';
}
var color = this.getProperty('bgcolor'),
gradient = this.getProperty('bgcolorgradient'),
colorend = this.getProperty('bgcolorgradientend');
var normalStyle = this.getBackgroundCSS(color, gradient, colorend, background, gradientBackgroundProps);
this.addLocalStyle('normal', 'bgcolor', normalStyle);
var hoverStyle = '',
isHoverDifferent = false,
colorHover = this.getProperty('bgcolor-hover'),
gradientHover = this.getProperty('bgcolorgradient-hover'),
colorendHover = this.getProperty('bgcolorgradientend-hover');
if (colorHover !== undefined && colorHover != color) {
isHoverDifferent = true;
}
if (gradientHover !== undefined && gradientHover != gradient) {
isHoverDifferent = true;
}
if (colorendHover !== undefined && colorendHover != colorend) {
isHoverDifferent = true;
}
if (isHoverDifferent) {
if (colorHover === undefined) {
colorHover = color;
}
if (gradientHover === undefined) {
gradientHover = gradient;
}
if (colorendHover === undefined) {
colorendHover = colorend;
}
hoverStyle = this.getBackgroundCSS(colorHover, gradientHover, colorendHover, background, gradientBackgroundProps);
}
this.addLocalStyle('hover', 'bgcolor', hoverStyle);
};
Row.prototype.getBackgroundCSS = function (color, gradient, colorend, backgroundImage, gradientBackgroundProps) {
if (N2Color.hex2alpha(color) != 0 || (gradient != 'off' && N2Color.hex2alpha(colorend) != 0)) {
var after = '';
if (backgroundImage != '') {
after = gradientBackgroundProps + ',' + backgroundImage;
}
switch (gradient) {
case 'horizontal':
return 'background:linear-gradient(to right, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'vertical':
return 'background:linear-gradient(to bottom, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'diagonal1':
return 'background:linear-gradient(45deg, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'diagonal2':
return 'background:linear-gradient(135deg, ' + N2Color.hex2rgbaCSS(color) + ' 0%,' + N2Color.hex2rgbaCSS(colorend) + ' 100%)' + after + ';';
case 'off':
default:
if (backgroundImage != '') {
return "background: linear-gradient(" + N2Color.hex2rgbaCSS(color) + ", " + N2Color.hex2rgbaCSS(color) + ")" + after + ';';
}
return 'background:' + N2Color.hex2rgbaCSS(color) + ';';
}
} else if (backgroundImage != '') {
return 'background:' + backgroundImage + ';';
}
return '';
};
Row.prototype.getData = function (params) {
var data = N2Classes.ComponentAbstract.prototype.getData.call(this, params);
if (params.itemsIncluded) {
data.cols = this.container.getData(params);
}
return data;
};
/**
* Example: Cols: 0 - 1 - 2
* oldIndex: 0, newIndex: 2 => 1 - 2 - 0 Moves the col #0 to after the #2 col
* @param oldIndex
* @param newIndex
*/
Row.prototype.moveCol = function (oldIndex, newIndex) {
if (this.getMode() == 'desktopPortrait') {
this._moveCol(oldIndex, newIndex);
var task = N2Classes.History.get().addValue(this, this.historyMoveCol, []);
if (task) {
task.setValues({
oldIndex: newIndex,
newIndex: oldIndex
}, {
oldIndex: oldIndex,
newIndex: newIndex
});
}
} else {
var orderedColumns = this.getOrderedColumns(),
colToMove = orderedColumns[oldIndex];
orderedColumns.splice(oldIndex, 1);
orderedColumns.splice(newIndex, 0, colToMove);
for (var i = 0; i < orderedColumns.length; i++) {
orderedColumns[i].setProperty('order', i + 1);
}
this.refreshUI();
}
};
Row.prototype._moveCol = function (oldIndex, newIndex) {
var layers = this.container.getSortedLayers();
this.container.insertLayerAt(layers[oldIndex], newIndex);
this.refreshUI();
};
Row.prototype.historyMoveCol = function (data) {
this._moveCol(data.oldIndex, data.newIndex);
};
Row.prototype.setColsWidth = function (fractions) {
var cols = this.container.getSortedLayers();
for (var i = 0; i < fractions.length; i++) {
cols[i].setProperty('colwidth', fractions[i].toFraction());
}
this._syncwrapafter();
this.update();
this.refreshUI();
};
Row.prototype.setRealColsWidth = function (fractions) {
var cols = this.getOrderedColumns();
for (var i = 0; i < fractions.length; i++) {
cols[i].setProperty('colwidth', fractions[i].toFraction());
}
this._syncwrapafter();
this.update();
this.refreshUI();
};
Row.prototype.updateColumnWidth = function (widths) {
var wrapAfter = parseInt(this.getProperty('wrapafter')),
columns = this.getOrderedColumns(),
i;
for (i = columns.length - 1; i >= 0; i--) {
if (!columns[i].showsOnCurrent) {
columns.splice(i, 1);
widths.splice(i, 1);
}
}
var columnsLength = columns.length;
if (wrapAfter > 0 && wrapAfter < columnsLength) {
var flexLines = [];
for (i = 0; i < columnsLength; i++) {
var row = Math.floor(i / wrapAfter);
if (typeof flexLines[row] === 'undefined') {
flexLines[row] = [];
}
columns[i]._tempWidth = widths[i];
flexLines[row].push(columns[i]);
}
var gutterValue = this.getGutter();
for (i = 0; i < flexLines.length; i++) {
var flexLine = flexLines[i],
sumWidth = 0,
j;
for (j = 0; j < flexLine.length; j++) {
sumWidth += flexLine[j]._tempWidth;
}
for (j = 0; j < flexLine.length; j++) {
flexLine[j].layer.css('width', 'calc(' + (flexLine[j]._tempWidth / sumWidth * 100) + '% - ' + (n2const.isIE || n2const.isEdge ? gutterValue + 1 : gutterValue) + 'px)');
}
}
} else {
for (i = 0; i < columnsLength; i++) {
columns[i].layer.css('width', (widths[i] * 100) + '%');
}
}
this.update();
};
Row.prototype.activateColumn = function (index, e) {
this.container.getSortedLayers()[index].activate(e);
};
Row.prototype.onChildCountChange = function () {
if (!this.isDeleted && !this.isDeleteStarted) {
var layers = this.container.getSortedLayers(),
colLength = layers.length;
if (colLength) {
var currentColumns = this.getColumns().split('+'),
add = 0;
for (var i = 0; i < currentColumns.length; i++) {
add = (new Fraction(currentColumns[i])).add(add);
}
if (add.valueOf() != 1) {
for (var i = 0; i < colLength; i++) {
layers[i].setProperty('colwidth', "1/" + colLength);
}
} else {
for (var i = 0; i < colLength; i++) {
layers[i]._synccolwidth();
}
}
this.refreshUI();
}
this._syncgutter();
}
};
Row.prototype.renderModeProperties = function (isReset) {
N2Classes.ComponentAbstract.prototype.renderModeProperties.call(this, isReset);
this._syncpadding();
this._syncinneralign();
this._syncgutter();
if (this.isActive) {
this.columnsField.setRow(this);
}
};
Row.prototype.hightlightStructure = function (hideInterval) {
hideInterval = hideInterval || 4000;
if (this.isStructureHighlighted) {
clearTimeout(this.isStructureHighlighted);
this.isStructureHighlighted = false;
}
this.layer.addClass('n2-highlight-structure');
this.isStructureHighlighted = setTimeout($.proxy(function () {
if (!this.isDeleted) {
this.layer.removeClass('n2-highlight-structure');
}
}, this), hideInterval);
};
Row.prototype.refreshUI = function () {
if (!this.isDeleteStarted) {
if (this.isActive) {
this.columnsField.setRow(this);
}
this._syncwrapafter();
this.$row.nUIColumns('option', 'columns', this.getColumnsOrdered());
}
};
Row.prototype.getDroppable = function () {
if (!this.layer.is(":visible") || this.status == N2Classes.ComponentAbstract.STATUS.HIDDEN || this.status == N2Classes.ComponentAbstract.STATUS.LOCKED) {
return 'hidden';
}
return {
$container: this.$row,
layer: this,
placement: 'normal',
axis: 'x'
}
};
Row.prototype.getLLDroppable = function (layer) {
switch (layer.type) {
case 'col':
if (layer.group == this) {
return {
$container: this.container.$ul,
layer: this
};
}
break;
}
return false;
};
Row.prototype.getContents = function () {
return this.$row;
};
Row.prototype.setPropertystylemode = function (name, value, from) {
this.stylemode = value;
this.syncAdvancedField('bgcolor');
this.syncAdvancedField('bgcolorgradient');
this.syncAdvancedField('bgcolorgradientend');
this.syncAdvancedField('borderradius');
this.syncAdvancedField('boxshadow');
};
Row.prototype.onSyncFields = function () {
this.fragmentEditor.layerOptions.updateField('stylemode', this.stylemode);
};
return Row;
});
N2D('ComponentSettings', function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @param {N2Classes.FragmentEditor} fragmentEditor
* @constructor
*/
function ComponentSettings(fragmentEditor) {
this.componentType = 'undefined';
this.placementType = 'undefined';
$('html')
.attr('data-component', '')
.attr('data-placement', '');
this.currentForm = {};
this.forms = {
'undefined': null,
placement: {
absolute: {},
normal: {},
default: {}
},
component: {
content: {},
layer: {},
row: {},
col: {},
group: {}
},
global: {
id: $('#layerid'),
uniqueclass: $('#layeruniqueclass'),
desktopPortrait: $('#layershow-desktop-portrait'),
desktopLandscape: $('#layershow-desktop-landscape'),
tabletPortrait: $('#layershow-tablet-portrait'),
tabletLandscape: $('#layershow-tablet-landscape'),
mobilePortrait: $('#layershow-mobile-portrait'),
mobileLandscape: $('#layershow-mobile-landscape'),
class: $('#layerclass'),
generatorvisible: $('#layergenerator-visible'),
crop: $('#layercrop'),
rotation: $('#layerrotation'),
parallax: $('#layerparallax'),
fontsize: $('#layerfont-size'),
adaptivefont: $('#layeradaptive-font'),
mouseenter: $('#layeronmouseenter'),
click: $('#layeronclick'),
mouseleave: $('#layeronmouseleave'),
play: $('#layeronplay'),
pause: $('#layeronpause'),
stop: $('#layeronstop')
}
};
fragmentEditor.editor.generator.registerField(this.forms.global.class);
this.fragmentEditor = fragmentEditor;
var availableDeviceModes = fragmentEditor.editor.getAvailableDeviceModes();
if (!availableDeviceModes.desktopLandscape) {
this.forms.global.desktopLandscape.closest('.n2-mixed-group').css('display', 'none');
}
if (!availableDeviceModes.tabletPortrait) {
this.forms.global.tabletPortrait.closest('.n2-mixed-group').css('display', 'none');
}
if (!availableDeviceModes.tabletLandscape) {
this.forms.global.tabletLandscape.closest('.n2-mixed-group').css('display', 'none');
}
if (!availableDeviceModes.mobilePortrait) {
this.forms.global.mobilePortrait.closest('.n2-mixed-group').css('display', 'none');
}
if (!availableDeviceModes.mobileLandscape) {
this.forms.global.mobileLandscape.closest('.n2-mixed-group').css('display', 'none');
}
this.forms.placement.absolute = {
parentid: $('#layerparentid'),
parentalign: $('#layerparentalign'),
parentvalign: $('#layerparentvalign'),
left: $('#layerleft'),
top: $('#layertop'),
responsiveposition: $('#layerresponsive-position'),
width: $('#layerwidth'),
height: $('#layerheight'),
responsivesize: $('#layerresponsive-size'),
align: $('#layeralign'),
valign: $('#layervalign')
};
this.forms.placement.normal = {
margin: $('#layernormal-margin'),
height: $('#layernormal-height'),
maxwidth: $('#layernormal-maxwidth'),
selfalign: $('#layernormal-selfalign')
};
this.forms.component.content = {
maxwidth: $('#layercontent-maxwidth'),
selfalign: $('#layercontent-selfalign'),
padding: $('#layercontent-padding'),
inneralign: $('#layercontent-inneralign'),
verticalalign: $('#layercontent-verticalalign'),
stylemode: $('#layercontent-style-mode').on('n2resetmode', $.proxy(this.resetStyleMode, this, 'stylemode')),
bgcolor: $('#layercontent-background-color'),
bgimage: $('#layercontent-background-image'),
bgimagex: $('#layercontent-background-focus-x'),
bgimagey: $('#layercontent-background-focus-y'),
bgcolorgradient: $('#layercontent-background-gradient'),
bgcolorgradientend: $('#layercontent-background-color-end'),
opened: $('#layercontent-opened')
};
fragmentEditor.editor.generator.registerField(this.forms.component.content.bgimage);
this.forms.component.row = {
padding: $('#layerrow-padding'),
gutter: $('#layerrow-gutter'),
fullwidth: $('#layerrow-fullwidth'),
stretch: $('#layerrow-stretch'),
wrapafter: $('#layerrow-wrap-after'),
inneralign: $('#layerrow-inneralign'),
href: $('#layerrow-href'),
'href-target': $('#layerrow-href-target'),
bgimage: $('#layerrow-background-image'),
bgimagex: $('#layerrow-background-focus-x'),
bgimagey: $('#layerrow-background-focus-y'),
stylemode: $('#layerrow-style-mode').on('n2resetmode', $.proxy(this.resetStyleMode, this, 'stylemode')),
bgcolor: $('#layerrow-background-color'),
bgcolorgradient: $('#layerrow-background-gradient'),
bgcolorgradientend: $('#layerrow-background-color-end'),
borderradius: $('#layerrow-border-radius'),
boxshadow: $('#layerrow-boxshadow'),
opened: $('#layerrow-opened')
};
fragmentEditor.editor.generator.registerField(this.forms.component.row.href);
fragmentEditor.editor.generator.registerField(this.forms.component.row.bgimage);
this.forms.component.col = {
maxwidth: $('#layercol-maxwidth'),
padding: $('#layercol-padding'),
inneralign: $('#layercol-inneralign'),
verticalalign: $('#layercol-verticalalign'),
href: $('#layercol-href'),
'href-target': $('#layercol-href-target'),
bgimage: $('#layercol-background-image'),
bgimagex: $('#layercol-background-focus-x'),
bgimagey: $('#layercol-background-focus-y'),
stylemode: $('#layercol-style-mode').on('n2resetmode', $.proxy(this.resetStyleMode, this, 'stylemode')),
bgcolor: $('#layercol-background-color'),
bgcolorgradient: $('#layercol-background-gradient'),
bgcolorgradientend: $('#layercol-background-color-end'),
borderradius: $('#layercol-border-radius'),
boxshadow: $('#layercol-boxshadow'),
borderwidth: $('#layercol-border-width'),
borderstyle: $('#layercol-border-style'),
bordercolor: $('#layercol-border-color'),
opened: $('#layercol-opened'),
colwidth: $('#layercol-colwidth'),
order: $('#layercol-order')
};
fragmentEditor.editor.generator.registerField(this.forms.component.col.href);
fragmentEditor.editor.generator.registerField(this.forms.component.col.bgimage);
}
ComponentSettings.prototype.changeActiveComponent = function (layer, componentType, placementType, properties) {
this.currentLayer = layer;
if (this.componentType != componentType) {
$('html').attr('data-component', componentType);
var pane = $('#n2-tabbed-slide-editor-settings').data('pane');
switch (componentType) {
case 'content':
pane.showTabs(['content', 'animations', 'position']);
break;
case 'layer':
pane.showTabs(['item', 'style', 'animations', 'position']);
break;
case 'group':
pane.showTabs(['group', 'animations']);
break;
case 'row':
pane.showTabs(['row', 'animations', 'position']);
break;
case 'col':
pane.showTabs(['column', 'animations', 'position']);
break;
}
this.componentType = componentType;
}
this.changeActiveComponentPlacement(placementType);
this.syncFields(properties);
};
ComponentSettings.prototype.changeActiveComponentPlacement = function (placementType, properties) {
if (this.placementType != placementType) {
$('html').attr('data-placement', placementType);
this.placementType = placementType;
}
this.syncFields(properties);
};
ComponentSettings.prototype.syncFields = function (properties) {
if (typeof properties == 'object') {
this.currentForm = $.extend({}, this.forms.global, this.forms.component[this.componentType], this.forms.placement[this.placementType]);
for (var name in properties) {
if (typeof properties[name] !== undefined) {
this.updateField(name, properties[name]);
} else {
console.error('Value is undefined for: ' + name);
}
}
this.currentLayer.onSyncFields();
for (var k in this.currentForm) {
this.currentForm[k].off('.layeroptions').on('outsideChange.layeroptions', $.proxy(this.activeComponentPropertyChanged, this, k));
}
}
};
ComponentSettings.prototype.onUpdateField = function (e, name, value) {
if (e.target == this.currentLayer) {
this.updateField(name, value);
}
};
ComponentSettings.prototype.updateField = function (name, value) {
if (typeof this.currentLayer['formSet' + name] === 'function') {
this.currentLayer['formSet' + name](this, value);
} else {
if (this.currentForm[name] !== undefined) {
var field = this.currentForm[name].data('field');
if (field !== undefined) {
field.insideChange(value);
}
}
}
};
ComponentSettings.prototype.activeComponentPropertyChanged = function (name, e) {
if (this.currentLayer && !this.currentLayer.isDeleted) {
this.updateLayerProperty(name);
} else {
var field = this.currentForm[name].data('field');
if (typeof field !== 'undefined' && field !== null) {
field.insideChange('');
}
}
};
ComponentSettings.prototype.updateLayerProperty = function (name) {
var value = this.currentForm[name].val();
this.currentLayer.setProperty(name, value, 'manager');
};
ComponentSettings.prototype.startFeatures = function () {
this.layerFeatures = new N2Classes.LayerFeatures(this.forms.placement.absolute, this.fragmentEditor);
var globalAdaptiveFont = $('#n2-ss-layer-adaptive-font').on('click', $.proxy(function () {
this.currentForm.adaptivefont.data('field').onoff.trigger('click');
}, this));
this.forms.global.adaptivefont.on('nextendChange', $.proxy(function () {
if (this.currentForm.adaptivefont.val() == 1) {
globalAdaptiveFont.addClass('n2-active');
} else {
globalAdaptiveFont.removeClass('n2-active');
}
}, this));
new N2Classes.FormElementNumber("n2-ss-layer-font-size", -Number.MAX_VALUE, Number.MAX_VALUE);
new N2Classes.FormElementNumberSlider("n2-ss-layer-font-size", {
min: 50,
max: 300,
step: 5
});
var globalFontSize = $('#n2-ss-layer-font-size').on('outsideChange', $.proxy(function () {
var value = parseInt(globalFontSize.val());
this.currentForm.fontsize.val(value).trigger('change');
}, this));
this.forms.global.fontsize.on('nextendChange', $.proxy(function () {
globalFontSize.data('field').insideChange(this.forms.global.fontsize.val());
}, this));
};
ComponentSettings.prototype.resetStyleMode = function (name, e) {
this.currentLayer.resetStyleMode(name);
};
return ComponentSettings;
});
N2D('BgAnimationEditor', ['NextendFragmentEditorController'], function ($, undefined) {
/**
* @memberOf N2Classes
*
* @constructor
*/
function BgAnimationEditor() {
this.parameters = {
shiftedBackgroundAnimation: 0
};
this.$css = $('').appendTo('head');
this.backgroundAnimations = {
color: 'eeeeeeff'
};
N2Classes.NextendFragmentEditorController.prototype.constructor.call(this, false);
this.bgAnimationElement = $('.n2-bg-animation');
this.slides = $('.n2-bg-animation-slide');
this.bgImages = $('.n2-bg-animation-slide-bg');
NextendTween.set(this.bgImages, {
rotationZ: 0.0001
});
this.directionTab = new N2Classes.FormElementRadio('n2-background-animation-preview-tabs', ['0', '1']);
this.directionTab.element.on('nextendChange.n2-editor', $.proxy(this.directionTabChanged, this));
if (!nModernizr.csstransforms3d || !nModernizr.csstransformspreserve3d) {
N2Classes.Notification.error('Background animations are not available in your browser. It works if the transform-style: preserve-3d feature available. ')
}
this.$colorField = $('#n2-background-animationcolor')
.on('nextendChange', $.proxy(this.changeColor, this));
}
BgAnimationEditor.prototype = Object.create(N2Classes.NextendFragmentEditorController.prototype);
BgAnimationEditor.prototype.constructor = BgAnimationEditor;
BgAnimationEditor.prototype.loadDefaults = function () {
N2Classes.NextendFragmentEditorController.prototype.loadDefaults.call(this);
this.type = 'backgroundanimation';
this.current = 0;
this.animationProperties = false;
this.direction = 0;
};
BgAnimationEditor.prototype.get = function () {
return null;
};
BgAnimationEditor.prototype.load = function (visual, tabs, mode, preview) {
this.lightbox.addClass('n2-editor-loaded');
};
BgAnimationEditor.prototype.setTabs = function (labels) {
};
BgAnimationEditor.prototype.directionTabChanged = function () {
this.direction = parseInt(this.directionTab.element.val());
};
BgAnimationEditor.prototype.start = function (data) {
if (data.color !== undefined) {
this.$colorField.data('field').insideChange(data.color);
this.backgroundAnimations.color = data.color;
} else {
$('#n2-tab-background-animation-form').remove();
this.$css.html('.n2-3d-side,.tile-colored-overlay{background: ' + nextend.currentEditor.frontend.parameters.bgAnimationsColor + ';}');
}
if (this.animationProperties) {
if (!this.timeline) {
this.next();
} else {
this.timeline.play();
}
}
};
BgAnimationEditor.prototype.changeColor = function () {
this.backgroundAnimations.color = this.$colorField.val();
this.$css.html('.n2-3d-side,.tile-colored-overlay{background: ' + N2Color.hex2rgbaCSS(this.backgroundAnimations.color) + ';}');
};
BgAnimationEditor.prototype.pause = function () {
if (this.timeline) {
this.timeline.pause();
}
};
BgAnimationEditor.prototype.next = function () {
this.timeline = new NextendTimeline({
paused: true,
onComplete: $.proxy(this.ended, this)
});
var current = this.bgImages.eq(this.current),
next = this.bgImages.eq(1 - this.current);
if (nModernizr.csstransforms3d && nModernizr.csstransformspreserve3d) {
this.currentAnimation = new N2Classes['SmartSliderBackgroundAnimation' + this.animationProperties.type](this, current, next, this.animationProperties, 1, this.direction);
this.slides.eq(this.current).css('zIndex', 2);
this.slides.eq(1 - this.current).css('zIndex', 3);
this.timeline.to(this.slides.eq(this.current), 0.5, {
opacity: 0
}, this.currentAnimation.getExtraDelay());
this.timeline.to(this.slides.eq(1 - this.current), 0.5, {
opacity: 1
}, this.currentAnimation.getExtraDelay());
this.currentAnimation.postSetup();
} else {
this.timeline.to(this.slides.eq(this.current), 1.5, {
opacity: 0
}, 0);
this.timeline.to(this.slides.eq(1 - this.current), 1.5, {
opacity: 1
}, 0);
}
this.current = 1 - this.current;
this.timeline.play();
};
BgAnimationEditor.prototype.ended = function () {
if (this.currentAnimation) {
this.currentAnimation.ended();
}
this.next();
};
BgAnimationEditor.prototype.setAnimationProperties = function (animationProperties) {
var lastAnimationProperties = this.animationProperties;
this.animationProperties = animationProperties;
if (!lastAnimationProperties) {
this.next();
}
};
return BgAnimationEditor;
});
N2D('BgAnimationManager', ['NextendVisualManagerMultipleSelection'], function ($, undefined) {
/**
* @memberOf N2Classes
*
* @constructor
*/
function BgAnimationManager() {
this.type = 'backgroundanimation';
N2Classes.NextendVisualManagerMultipleSelection.prototype.constructor.apply(this, arguments);
}
BgAnimationManager.prototype = Object.create(N2Classes.NextendVisualManagerMultipleSelection.prototype);
BgAnimationManager.prototype.constructor = BgAnimationManager;
BgAnimationManager.prototype.loadDefaults = function () {
N2Classes.NextendVisualManagerMultipleSelection.prototype.loadDefaults.apply(this, arguments);
this.type = 'backgroundanimation';
this.labels = {
visual: 'Background animation',
visuals: 'Background animations'
};
};
BgAnimationManager.prototype.initController = function () {
return new N2Classes.BgAnimationEditor();
};
BgAnimationManager.prototype.createVisual = function (visual, set) {
return new N2Classes.NextendVisualWithSetRowMultipleSelection(visual, set, this);
};
BgAnimationManager.prototype.show = function (data, saveCallback) {
var controllerParameters = {};
var $colorField = $('#sliderbackground-animation-color');
if ($colorField.length) {
controllerParameters.color = $colorField.val();
}
N2Classes.NextendVisualManagerMultipleSelection.prototype.show.call(this, data, saveCallback, controllerParameters);
};
BgAnimationManager.prototype.getAsString = function () {
var $colorField = $('#sliderbackground-animation-color');
if ($colorField.length) {
$colorField.val($('#n2-background-animationcolor').val());
}
return N2Classes.NextendVisualManagerMultipleSelection.prototype.getAsString.call(this);
};
return BgAnimationManager;
});
N2D('ItemButton', ['Item'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
* @augments Item
*/
function ItemButton() {
this.type = 'button';
N2Classes.Item.prototype.constructor.apply(this, arguments);
}
ItemButton.prototype = Object.create(N2Classes.Item.prototype);
ItemButton.prototype.constructor = ItemButton;
ItemButton.needSize = false;
ItemButton.prototype.added = function () {
this.needFill = ['content', 'class'];
this.addedFont('link', 'font');
this.addedStyle('button', 'style');
this.generator.registerFields(['#item_buttoncontent', '#item_buttonhref', '#item_buttonclass']);
};
ItemButton.prototype.getName = function (data) {
return data.content;
};
ItemButton.prototype.parseAll = function (data) {
data.classes = '';
if (parseInt(data.fullwidth)) {
data.classes += ' n2-ss-fullwidth';
}
if (parseInt(data.nowrap)) {
data.classes += ' n2-ss-nowrap';
}
N2Classes.Item.prototype.parseAll.apply(this, arguments);
};
ItemButton.prototype._render = function (data) {
var $node = $(''),
$link = $('').appendTo($node),
$label = $('' + data.content + '').appendTo($link);
this.$item.append($node);
};
return ItemButton;
});
N2D('ItemHeading', ['Item'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
* @augments Item
*/
function ItemHeading() {
this.type = 'heading';
N2Classes.Item.prototype.constructor.apply(this, arguments);
}
ItemHeading.prototype = Object.create(N2Classes.Item.prototype);
ItemHeading.prototype.constructor = ItemHeading;
ItemHeading.needSize = false;
ItemHeading.prototype.getDefault = function () {
return {
href: '',
font: '',
style: ''
}
};
ItemHeading.prototype.added = function () {
this.needFill = ['heading', 'class'];
this.addedFont('hover', 'font');
this.addedStyle('heading', 'style');
this.generator.registerFields(['#item_headingheading', '#item_headinghref', '#item_headingclass']);
};
ItemHeading.prototype.getName = function (data) {
return data.heading;
};
ItemHeading.prototype.parseAll = function (data) {
data.uid = $.fn.uid();
if (parseInt(data.fullwidth)) {
data.display = 'block';
} else {
data.display = 'inline-block';
}
data.extrastyle = parseInt(data.nowrap) ? 'white-space: nowrap;' : '';
data.heading = $('
');
data.priority = 2;
data.class = '';
N2Classes.Item.prototype.parseAll.apply(this, arguments);
if (data['href'] == '#' || data['href'] == '') {
data['afontclass'] = '';
data['astyleclass'] = '';
} else {
data['afontclass'] = data['fontclass'];
data['fontclass'] = '';
data['astyleclass'] = data['styleclass'];
data['styleclass'] = '';
}
};
ItemHeading.prototype._render = function (data) {
var $node = $(''),
$heading = $('')
.addClass('n2-ow ' + data.fontclass + ' ' + data.styleclass + ' ' + data.class)
.css({
display: data.display
}).appendTo($node);
if (data['href'] == '#' || data['href'] == '') {
$heading.html(data.heading);
} else {
$heading.append($('' + data.heading + ''));
}
this.$item.append($node);
};
return ItemHeading;
});
N2D('ItemImage', ['Item'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
* @augments N2Classes.Item
*/
function ItemImage() {
this.type = 'image';
N2Classes.Item.prototype.constructor.apply(this, arguments);
}
ItemImage.prototype = Object.create(N2Classes.Item.prototype);
ItemImage.prototype.constructor = ItemImage;
ItemImage.needSize = false;
ItemImage.prototype.getDefault = function () {
return {
size: 'auto|*|auto',
href: '',
style: ''
}
};
ItemImage.prototype.added = function () {
this.needFill = ['image', 'cssclass'];
this.generator.registerFields(['#item_imageimage', '#item_imagealt', '#item_imagetitle', '#item_imagehref', '#item_imagecssclass']);
};
ItemImage.prototype.getName = function (data) {
return data.image.split('/').pop();
};
ItemImage.prototype.parseAll = function (data) {
var size = data.size.split('|*|');
data.width = size[0];
data.height = size[1];
delete data.size;
N2Classes.Item.prototype.parseAll.apply(this, arguments);
if (data.image != this.values.image) {
data.image = nextend.imageHelper.fixed(data.image);
if (this.layer.placement.getType() == 'absolute') {
this.resizeLayerToImage(nextend.imageHelper.fixed(data.image));
}
} else {
data.image = nextend.imageHelper.fixed(data.image);
}
};
ItemImage.prototype.fitLayer = function () {
if (this.layer.placement.getType() == 'absolute') {
this.resizeLayerToImage(nextend.imageHelper.fixed(this.values.image));
}
return true;
};
ItemImage.prototype._render = function (data) {
data.styleclass = '';
var $node = $(''),
$a = $node;
if (data['href'] != '#' && data['href'] != '') {
$a = $('').appendTo($node);
}
$('').css({
display: 'inline-block',
maxWidth: '100%',
width: data.width,
height: data.height
}).appendTo($a);
this.$item.append($node);
};
return ItemImage;
});
N2D('ItemText', ['Item'], function ($, undefined) {
"use strict";
/**
* @memberOf N2Classes
*
* @constructor
* @augments Item
*/
function ItemText() {
this.type = 'text';
N2Classes.Item.prototype.constructor.apply(this, arguments);
}
ItemText.prototype = Object.create(N2Classes.Item.prototype);
ItemText.prototype.constructor = ItemText;
ItemText.needSize = false;
ItemText.prototype.getDefault = function () {
return {
contentmobile: '',
contenttablet: '',
font: '',
style: ''
}
};
ItemText.prototype.added = function () {
this.needFill = ['content', 'contenttablet', 'contentmobile'];
this.addedFont('paragraph', 'font');
this.addedStyle('heading', 'style');
this.generator.registerFields(['#item_textcontent', '#item_textcontenttablet', '#item_textcontentmobile']);
};
ItemText.prototype.getName = function (data) {
return data.content;
};
ItemText.prototype.parseAll = function (data) {
N2Classes.Item.prototype.parseAll.apply(this, arguments);
data['p'] = _wp_Autop(data['content']);
data['ptablet'] = _wp_Autop(data['contenttablet']);
data['pmobile'] = _wp_Autop(data['contentmobile']);
};
ItemText.prototype._render = function (data) {
var $content = $('