994 lines
35 KiB
JavaScript
994 lines
35 KiB
JavaScript
/*
|
||
* name: MailPoet Form Editor
|
||
* author: Jonathan Labreuille
|
||
* company: Wysija
|
||
* framework: prototype 1.7.2
|
||
*/
|
||
|
||
'use strict';
|
||
|
||
Event.cacheDelegated = {};
|
||
Object.extend(document, (function () {
|
||
var cache = Event.cacheDelegated;
|
||
|
||
function getCacheForSelector(selector) {
|
||
return cache[selector] = cache[selector] || {};
|
||
}
|
||
|
||
function getWrappersForSelector(selector, eventName) {
|
||
var c = getCacheForSelector(selector);
|
||
return c[eventName] = c[eventName] || [];
|
||
}
|
||
|
||
function findWrapper(selector, eventName, handler) {
|
||
var c = getWrappersForSelector(selector, eventName);
|
||
return c.find(function (wrapper) {
|
||
return wrapper.handler === handler
|
||
});
|
||
}
|
||
|
||
function destroyWrapper(selector, eventName, handler) {
|
||
var c = getCacheForSelector(selector);
|
||
if (!c[eventName]) return false;
|
||
var wrapper = findWrapper(selector, eventName, handler)
|
||
c[eventName] = c[eventName].without(wrapper);
|
||
return wrapper;
|
||
}
|
||
|
||
function createWrapper(selector, eventName, handler, context) {
|
||
var wrapper, c = getWrappersForSelector(selector, eventName);
|
||
if (c.pluck('handler').include(handler)) return false;
|
||
wrapper = function (event) {
|
||
var element = event.findElement(selector);
|
||
if (element) handler.call(context || element, event, element);
|
||
};
|
||
wrapper.handler = handler;
|
||
c.push(wrapper);
|
||
return wrapper;
|
||
}
|
||
return {
|
||
delegate: function (selector, eventName, handler, context) {
|
||
var wrapper = createWrapper.apply(null, arguments);
|
||
if (wrapper) document.observe(eventName, wrapper);
|
||
return document;
|
||
},
|
||
stopDelegating: function (selector, eventName, handler) {
|
||
var length = arguments.length;
|
||
switch (length) {
|
||
case 2:
|
||
getWrappersForSelector(selector, eventName).each(function (wrapper) {
|
||
document.stopDelegating(selector, eventName, wrapper.handler);
|
||
});
|
||
break;
|
||
case 1:
|
||
Object.keys(getCacheForSelector(selector)).each(function (eventName) {
|
||
document.stopDelegating(selector, eventName);
|
||
});
|
||
break;
|
||
case 0:
|
||
Object.keys(cache).each(function (selector) {
|
||
document.stopDelegating(selector);
|
||
});
|
||
break;
|
||
default:
|
||
var wrapper = destroyWrapper.apply(null, arguments);
|
||
if (wrapper) document.stopObserving(eventName, wrapper);
|
||
}
|
||
return document;
|
||
}
|
||
}
|
||
})());
|
||
|
||
var Observable = (function () {
|
||
function getEventName(name, namespace) {
|
||
name = name.substring(2);
|
||
if (namespace) name = namespace + ':' + name;
|
||
return name.underscore().split('_').join(':');
|
||
}
|
||
|
||
function getHandlers(klass) {
|
||
var proto = klass.prototype,
|
||
namespace = proto.namespace;
|
||
return Object.keys(proto).grep(/^on/).inject($H(), function (handlers, name) {
|
||
if (name === 'onDomLoaded') return handlers;
|
||
handlers.set(getEventName(name, namespace), getWrapper(proto[name], klass));
|
||
return handlers;
|
||
});
|
||
}
|
||
|
||
function getWrapper(handler, klass) {
|
||
return function (event) {
|
||
return handler.call(new klass(this), event, event.memo);
|
||
}
|
||
}
|
||
|
||
function onDomLoad(selector, klass) {
|
||
$$(selector).each(function (element) {
|
||
new klass(element).onDomLoaded();
|
||
});
|
||
}
|
||
return {
|
||
observe: function (selector) {
|
||
if (!this.handlers) this.handlers = {};
|
||
if (this.handlers[selector]) return;
|
||
var klass = this;
|
||
if (this.prototype.onDomLoaded) document.loaded ? onDomLoad(selector, klass) : document.observe('dom:loaded', onDomLoad.curry(selector, klass));
|
||
this.handlers[selector] = getHandlers(klass).each(function (handler) {
|
||
document.delegate(selector, handler.key, handler.value);
|
||
});
|
||
},
|
||
stopObserving: function (selector) {
|
||
if (!this.handlers || !this.handlers[selector]) return;
|
||
this.handlers[selector].each(function (handler) {
|
||
document.stopDelegating(selector, handler.key, handler.value);
|
||
});
|
||
delete this.handlers[selector];
|
||
}
|
||
}
|
||
})();
|
||
|
||
// override droppables
|
||
Object.extend(Droppables, {
|
||
deactivate: Droppables.deactivate.wrap(function (proceed, drop, draggable) {
|
||
if (drop.onLeave) drop.onLeave(draggable, drop.element);
|
||
return proceed(drop);
|
||
}),
|
||
activate: Droppables.activate.wrap(function (proceed, drop, draggable) {
|
||
if (drop.onEnter) drop.onEnter(draggable, drop.element);
|
||
return proceed(drop);
|
||
}),
|
||
show: function (point, element) {
|
||
if (!this.drops.length) return;
|
||
var drop, affected = [];
|
||
this.drops.each(function (drop) {
|
||
if (Droppables.isAffected(point, element, drop)) affected.push(drop);
|
||
});
|
||
if (affected.length > 0) drop = Droppables.findDeepestChild(affected);
|
||
if (this.last_active && this.last_active !== drop) this.deactivate(this.last_active, element);
|
||
if (drop) {
|
||
Position.within(drop.element, point[0], point[1]);
|
||
if (drop.onHover) drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
|
||
if (drop !== this.last_active) Droppables.activate(drop, element);
|
||
}
|
||
},
|
||
displayArea: function(draggable) {
|
||
if(!this.drops.length) return;
|
||
|
||
// hide controls when displaying drop areas.
|
||
WysijaForm.hideBlockControls();
|
||
|
||
this.drops.each(function (drop, iterator) {
|
||
if(drop.element.hasClassName('block_placeholder')) {
|
||
drop.element.addClassName('active');
|
||
}
|
||
});
|
||
},
|
||
hideArea: function() {
|
||
if (!this.drops.length) return;
|
||
this.drops.each(function (drop, iterator) {
|
||
if(drop.element.hasClassName('block_placeholder')) {
|
||
drop.element.removeClassName('active');
|
||
} else if(drop.element.hasClassName('image_placeholder')) {
|
||
drop.element.removeClassName('active');
|
||
drop.element.up().removeClassName('active');
|
||
} else if(drop.element.hasClassName('text_placeholder')) {
|
||
drop.element.removeClassName('active');
|
||
}
|
||
});
|
||
},
|
||
reset: function (draggable) {
|
||
if (this.last_active) this.deactivate(this.last_active, draggable);
|
||
}
|
||
});
|
||
|
||
/*
|
||
Wysija History handling
|
||
POTENTIAL FEATURES:
|
||
- set a maximum number of items to be stored
|
||
|
||
*/
|
||
var WysijaHistory = {
|
||
container: 'mailpoet_form_history',
|
||
size: 30,
|
||
enqueue: function(element) {
|
||
// create deep clone (includes child elements) of passed element
|
||
var clone = element.clone(true);
|
||
|
||
// check if the field is unique
|
||
if(parseInt(clone.readAttribute('wysija_unique'), 10) === 1) {
|
||
// check if the field is already in the queue
|
||
$(WysijaHistory.container).select('[wysija_field="'+clone.readAttribute('wysija_field')+'"]').invoke('remove');
|
||
}
|
||
|
||
// check history size
|
||
if($(WysijaHistory.container).select('> div').length >= WysijaHistory.size) {
|
||
// remove oldest element (last in the list)
|
||
$(WysijaHistory.container).select('> div').last().remove();
|
||
}
|
||
|
||
// store block in history
|
||
$(WysijaHistory.container).insert({ top: clone });
|
||
},
|
||
dequeue: function() {
|
||
// pop last block off the history
|
||
var block = $(WysijaHistory.container).select('div').first();
|
||
|
||
if(block !== undefined) {
|
||
// insert block back into the editor
|
||
$(WysijaForm.options.body).insert({top: block});
|
||
}
|
||
},
|
||
clear: function() {
|
||
$(WysijaHistory.container).innerHTML = '';
|
||
},
|
||
remove: function(field) {
|
||
$(WysijaHistory.container).select('[wysija_field="'+field+'"]').invoke('remove');
|
||
}
|
||
};
|
||
|
||
/* MailPoet Form */
|
||
var WysijaForm = {
|
||
version: '0.6',
|
||
options: {
|
||
container: 'mailpoet_form_container',
|
||
editor: 'mailpoet_form_editor',
|
||
body: 'mailpoet_form_body',
|
||
toolbar: 'mailpoet_form_toolbar',
|
||
templates: 'wysija_widget_templates',
|
||
debug: false
|
||
},
|
||
toolbar: {
|
||
effect: null,
|
||
x: null,
|
||
y: null,
|
||
top: null,
|
||
left: null
|
||
},
|
||
scroll: {
|
||
top: 0,
|
||
left: 0
|
||
},
|
||
flags: {
|
||
doSave: false
|
||
},
|
||
locks: {
|
||
dragging: false,
|
||
selectingColor: false,
|
||
showingTools: false
|
||
},
|
||
encodeHtmlValue: function(str) {
|
||
return str.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');
|
||
// ": fix for FileMerge because the previous line fucks up its syntax coloring
|
||
},
|
||
decodeHtmlValue: function(str) {
|
||
return str.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');
|
||
// ": fix for FileMerge because the previous line fucks up its syntax coloring
|
||
},
|
||
loading: function(is_loading) {
|
||
if(is_loading) {
|
||
$(WysijaForm.options.editor).addClassName('loading');
|
||
$(WysijaForm.options.toolbar).addClassName('loading');
|
||
} else {
|
||
$(WysijaForm.options.editor).removeClassName('loading');
|
||
$(WysijaForm.options.toolbar).removeClassName('loading');
|
||
}
|
||
},
|
||
loadStatic: function(blocks) {
|
||
$A(blocks).each(function(block) {
|
||
// create block
|
||
WysijaForm.Block.create(block, $('block_placeholder'));
|
||
});
|
||
},
|
||
load: function(form) {
|
||
if(form.data === undefined) return;
|
||
|
||
// load body
|
||
if(form.data.body !== undefined) {
|
||
$A(form.data.body).each(function(block) {
|
||
// create block
|
||
WysijaForm.Block.create(block, $('block_placeholder'));
|
||
});
|
||
|
||
// load settings
|
||
var settings_elements = $('mailpoet_form_settings').getElements();
|
||
settings_elements.each(function(setting) {
|
||
// skip lists
|
||
if(setting.name === 'lists') {
|
||
return true;
|
||
} else if(setting.name === 'on_success') {
|
||
// if the input value is equal to the one stored in the settings
|
||
if(setting.value === form.data.settings[setting.name]) {
|
||
// check selected value
|
||
$(setting).checked = true;
|
||
}
|
||
} else if(form.data.settings[setting.name] !== undefined) {
|
||
if(typeof form.data.settings[setting.name] === 'string') {
|
||
setting.setValue(WysijaForm.decodeHtmlValue(form.data.settings[setting.name]));
|
||
} else {
|
||
setting.setValue(form.data.settings[setting.name]);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
save: function() {
|
||
var position = 1,
|
||
data = {
|
||
'version': WysijaForm.version,
|
||
'settings': $('mailpoet_form_settings').serialize(true),
|
||
'body': [],
|
||
'styles': (MailPoet.CodeEditor !== undefined) ? MailPoet.CodeEditor.getValue() : null
|
||
};
|
||
// body
|
||
WysijaForm.getBlocks().each(function(b) {
|
||
var block_data = (typeof(b.block['save']) === 'function') ? b.block.save() : null;
|
||
|
||
if(block_data !== null) {
|
||
// set block position
|
||
block_data['position'] = position;
|
||
|
||
// increment position
|
||
position++;
|
||
|
||
// add block data to body
|
||
data['body'].push(block_data);
|
||
}
|
||
});
|
||
|
||
return data;
|
||
},
|
||
init: function() {
|
||
// set document scroll
|
||
info('init -> set scroll offsets');
|
||
WysijaForm.setScrollOffsets();
|
||
|
||
// position toolbar
|
||
info('init -> set toolbar position');
|
||
WysijaForm.setToolbarPosition();
|
||
|
||
// enable droppable targets
|
||
info('init -> make droppable');
|
||
WysijaForm.makeDroppable();
|
||
|
||
// enable sortable
|
||
info('init -> make sortable');
|
||
WysijaForm.makeSortable();
|
||
|
||
// hide controls
|
||
info('init -> hide controls');
|
||
WysijaForm.hideControls();
|
||
|
||
// hide settings
|
||
info('init -> hide settings');
|
||
WysijaForm.hideSettings();
|
||
|
||
// set settings buttons position
|
||
info('init -> init settings');
|
||
WysijaForm.setSettingsPosition();
|
||
|
||
// toggle widgets
|
||
info('init -> toggle widgets');
|
||
WysijaForm.toggleWidgets();
|
||
},
|
||
getFieldData: function(element) {
|
||
// get basic field data
|
||
var data = {
|
||
type: element.readAttribute('wysija_type'),
|
||
field: element.readAttribute('wysija_field'),
|
||
name: element.readAttribute('wysija_name'),
|
||
unique: parseInt(element.readAttribute('wysija_unique') || 0, 10),
|
||
static: parseInt(element.readAttribute('wysija_static') || 0, 10),
|
||
element: element,
|
||
params: ''
|
||
};
|
||
|
||
// get params (may be empty)
|
||
if(element.readAttribute('wysija_params') !== null && element.readAttribute('wysija_params').length > 0) {
|
||
data.params = JSON.parse(element.readAttribute('wysija_params'));
|
||
}
|
||
return data;
|
||
},
|
||
toggleWidgets: function() {
|
||
$$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled');
|
||
|
||
// loop through each unique field already inserted in the editor and disable its toolbar equivalent
|
||
$$('#'+WysijaForm.options.editor+' [wysija_unique="1"]').each(function(element) {
|
||
var field = $$('#'+WysijaForm.options.toolbar+' [wysija_field="'+element.readAttribute('wysija_field')+'"]').first();
|
||
if(field !== undefined) {
|
||
field.addClassName('disabled');
|
||
}
|
||
});
|
||
|
||
// hide list selection if a list widget has been dragged into the editor
|
||
$('mailpoet_settings_list_selection')[(($$('#'+WysijaForm.options.editor+' [wysija_field="list"]').length > 0) === true) ? 'hide': 'show']();
|
||
},
|
||
setBlockPositions: function(event, target) {
|
||
// release dragging lock
|
||
WysijaForm.locks.dragging = false;
|
||
|
||
var index = 1;
|
||
WysijaForm.getBlocks().each(function (container) {
|
||
container.setPosition(index++);
|
||
// remove z-index value to avoid issues when resizing images
|
||
if(container['block'] !== undefined) {
|
||
container.block.element.setStyle({zIndex: ''});
|
||
}
|
||
});
|
||
|
||
if(target !== undefined) {
|
||
// get placeholders (previous placeholder matches the placeholder linked to the next block)
|
||
var block_placeholder = $(target.element.readAttribute('wysija_placeholder')),
|
||
previous_placeholder = target.element.previous('.block_placeholder');
|
||
|
||
if(block_placeholder !== null) {
|
||
// put block placeholder before the current block
|
||
target.element.insert({before: block_placeholder});
|
||
|
||
// if the next block is a wysija_block, insert previous placeholder
|
||
if(target.element.next() !== undefined && target.element.next().hasClassName('mailpoet_form_block') && previous_placeholder !== undefined) {
|
||
target.element.insert({after: previous_placeholder});
|
||
}
|
||
}
|
||
}
|
||
},
|
||
setScrollOffsets: function() {
|
||
WysijaForm.scroll = document.viewport.getScrollOffsets();
|
||
},
|
||
hideSettings: function() {
|
||
$(WysijaForm.options.container).select('.wysija_settings').invoke('hide');
|
||
},
|
||
setSettingsPosition: function() {
|
||
// get viewport offsets and dimensions
|
||
var viewportHeight = document.viewport.getHeight(),
|
||
blockPadding = 5;
|
||
|
||
$(WysijaForm.options.container).select('.wysija_settings').each(function(element) {
|
||
// get parent dimensions and position
|
||
var parentDim = element.up('.mailpoet_form_block').getDimensions(),
|
||
parentPos = element.up('.mailpoet_form_block').cumulativeOffset(),
|
||
is_visible = (parentPos.top <= (WysijaForm.scroll.top + viewportHeight)) ? true : false,
|
||
buttonMargin = 5,
|
||
relativeTop = buttonMargin;
|
||
|
||
if(is_visible) {
|
||
// desired position is set to center of viewport
|
||
var absoluteTop = parseInt(WysijaForm.scroll.top + ((viewportHeight / 2) - (element.getHeight() / 2)), 10),
|
||
parentTop = parseInt(parentPos.top - blockPadding, 10),
|
||
parentBottom = parseInt(parentPos.top + parentDim.height - blockPadding, 10);
|
||
|
||
// always center
|
||
relativeTop = parseInt((parentDim.height / 2) - (element.getHeight() / 2), 10);
|
||
}
|
||
// set position for button
|
||
$(element).setStyle({
|
||
left: parseInt((parentDim.width / 2) - (element.getWidth() / 2)) + 'px',
|
||
top: relativeTop + 'px'
|
||
});
|
||
});
|
||
},
|
||
initToolbarPosition: function() {
|
||
if(WysijaForm.toolbar.top === null) WysijaForm.toolbar.top = parseInt($(WysijaForm.options.container).positionedOffset().top);
|
||
if(WysijaForm.toolbar.y === null) WysijaForm.toolbar.y = parseInt(WysijaForm.toolbar.top);
|
||
|
||
if(isRtl) {
|
||
if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = 0;
|
||
} else {
|
||
if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = parseInt($(WysijaForm.options.container).positionedOffset().left);
|
||
}
|
||
if(WysijaForm.toolbar.x === null) WysijaForm.toolbar.x = parseInt(WysijaForm.toolbar.left + $(WysijaForm.options.container).getDimensions().width + 15);
|
||
|
||
},
|
||
setToolbarPosition: function() {
|
||
WysijaForm.initToolbarPosition();
|
||
|
||
var position = { top: WysijaForm.toolbar.y + 'px', visibility: 'visible' };
|
||
|
||
if(isRtl) {
|
||
position.right = WysijaForm.toolbar.x + 'px';
|
||
} else {
|
||
position.left = WysijaForm.toolbar.x + 'px';
|
||
}
|
||
|
||
$(WysijaForm.options.toolbar).setStyle(position);
|
||
},
|
||
updateToolbarPosition: function() {
|
||
// init toolbar position (updates scroll and toolbar y)
|
||
WysijaForm.initToolbarPosition();
|
||
|
||
// cancel previous effect
|
||
if(WysijaForm.toolbar.effect !== null) WysijaForm.toolbar.effect.cancel();
|
||
|
||
if(WysijaForm.scroll.top >= (WysijaForm.toolbar.top - 20)) {
|
||
WysijaForm.toolbar.y = parseInt(20 + WysijaForm.scroll.top);
|
||
// start effect
|
||
WysijaForm.toolbar.effect = new Effect.Move(WysijaForm.options.toolbar, {
|
||
x: WysijaForm.toolbar.x,
|
||
y: WysijaForm.toolbar.y,
|
||
mode: 'absolute',
|
||
duration: 0.2
|
||
});
|
||
} else {
|
||
$(WysijaForm.options.toolbar).setStyle({
|
||
left: WysijaForm.toolbar.x + 'px',
|
||
top: WysijaForm.toolbar.top + 'px'
|
||
});
|
||
}
|
||
},
|
||
blockDropOptions: {
|
||
accept: $w('mailpoet_form_field'), // acceptable items (classes array)
|
||
onEnter: function (draggable, droppable) {
|
||
$(droppable).addClassName('hover');
|
||
},
|
||
onLeave: function (draggable, droppable) {
|
||
$(droppable).removeClassName('hover');
|
||
},
|
||
onDrop: function (draggable, droppable) {
|
||
// custom data for images
|
||
droppable.fire('wjfe:item:drop', WysijaForm.getFieldData(draggable));
|
||
$(droppable).removeClassName('hover');
|
||
}
|
||
},
|
||
hideControls: function() {
|
||
try {
|
||
return WysijaForm.getBlocks().invoke('hideControls');
|
||
} catch(e) { return; }
|
||
},
|
||
hideTools: function() {
|
||
$$('.wysija_tools').invoke('hide');
|
||
WysijaForm.locks.showingTools = false;
|
||
},
|
||
instances: {},
|
||
get: function (element, type) {
|
||
if(type === undefined) type = 'block';
|
||
// identify element
|
||
var id = element.identify();
|
||
var instance = WysijaForm.instances[id] || new WysijaForm[type.capitalize().camelize()](id);
|
||
|
||
WysijaForm.instances[id] = instance;
|
||
return instance;
|
||
},
|
||
makeDroppable: function() {
|
||
Droppables.add('block_placeholder', WysijaForm.blockDropOptions);
|
||
},
|
||
makeSortable: function () {
|
||
var body = $(WysijaForm.options.body);
|
||
Sortable.create(body, {
|
||
tag: 'div',
|
||
only: 'mailpoet_form_block',
|
||
scroll: window,
|
||
handle: 'handle',
|
||
constraint: 'vertical'
|
||
|
||
});
|
||
Draggables.removeObserver(body);
|
||
Draggables.addObserver({
|
||
element: body,
|
||
onStart: WysijaForm.startBlockPositions,
|
||
onEnd: WysijaForm.setBlockPositions
|
||
});
|
||
},
|
||
hideBlockControls: function() {
|
||
$$('.wysija_controls').invoke('hide');
|
||
this.getBlockElements().invoke('removeClassName', 'hover');
|
||
},
|
||
getBlocks: function () {
|
||
return WysijaForm.getBlockElements().map(function (element) {
|
||
return WysijaForm.get(element);
|
||
});
|
||
},
|
||
getBlockElements: function () {
|
||
return $(WysijaForm.options.container).select('.mailpoet_form_block');
|
||
},
|
||
startBlockPositions: function(event, target) {
|
||
if(target.element.hasClassName('mailpoet_form_block')) {
|
||
// store block placeholder id for the block that is being repositionned
|
||
if(target.element.previous('.block_placeholder') !== undefined) {
|
||
target.element.writeAttribute('wysija_placeholder', target.element.previous('.block_placeholder').identify());
|
||
}
|
||
}
|
||
WysijaForm.locks.dragging = true;
|
||
},
|
||
encodeURIComponent: function(str) {
|
||
// check if it's a url and if so, prevent encoding of protocol
|
||
var regexp = new RegExp(/^http[s]?:\/\//),
|
||
protocol = regexp.exec(str);
|
||
|
||
if(protocol === null) {
|
||
// this is not a url so encode the whole thing
|
||
return encodeURIComponent(str).replace(/[!'()*]/g, escape);
|
||
} else if(protocol.length === 1) {
|
||
// this is a url, so do not encode the protocol
|
||
return encodeURI(str).replace(/[!'()*]/g, escape);
|
||
}
|
||
}
|
||
};
|
||
|
||
WysijaForm.DraggableItem = Class.create({
|
||
initialize: function (element) {
|
||
this.elementType = $(element).readAttribute('wysija_type');
|
||
this.element = $(element).down() || $(element);
|
||
this.clone = this.cloneElement();
|
||
this.insert();
|
||
},
|
||
STYLES: new Template('position: absolute; top: #{top}px; left: #{left}px;'),
|
||
cloneElement: function () {
|
||
var clone = this.element.clone(),
|
||
offset = this.element.cumulativeOffset(),
|
||
list = this.getList(),
|
||
styles = this.STYLES.evaluate({
|
||
top: offset.top - list.scrollTop,
|
||
left: offset.left - list.scrollLeft
|
||
});
|
||
clone.setStyle(styles);
|
||
|
||
clone.addClassName('mailpoet_form_widget');
|
||
clone.addClassName(this.elementType);
|
||
clone.innerHTML = this.element.innerHTML;
|
||
return clone;
|
||
},
|
||
getOffset: function () {
|
||
return this.element.offsetTop - this.getList().scrollTop;
|
||
},
|
||
getList: function () {
|
||
return this.element.up('ul');
|
||
},
|
||
insert: function () {
|
||
$$("body")[0].insert(this.clone);
|
||
},
|
||
onMousedown: function (event) {
|
||
var draggable = new Draggable(this.clone, {
|
||
scroll: window,
|
||
onStart: function () {
|
||
Droppables.displayArea(draggable);
|
||
},
|
||
onEnd: function (drag) {
|
||
drag.destroy();
|
||
drag.element.remove();
|
||
Droppables.hideArea();
|
||
},
|
||
starteffect: function (element) {
|
||
new Effect.Opacity(element, {
|
||
duration: 0.2,
|
||
from: element.getOpacity(),
|
||
to: 0.7
|
||
});
|
||
},
|
||
endeffect: Prototype.emptyFunction
|
||
});
|
||
draggable.initDrag(event);
|
||
draggable.startDrag(event);
|
||
return draggable;
|
||
}
|
||
});
|
||
Object.extend(WysijaForm.DraggableItem, Observable).observe('a[class="mailpoet_form_field"]');
|
||
|
||
|
||
WysijaForm.Block = Class.create({
|
||
/* Invoked on load */
|
||
initialize: function(element) {
|
||
info('block -> init');
|
||
|
||
this.element = $(element);
|
||
this.block = new WysijaForm.Widget(this.element);
|
||
|
||
// enable block placeholder
|
||
this.block.makeBlockDroppable();
|
||
|
||
// setup events
|
||
if(this.block['setup'] !== undefined) {
|
||
this.block.setup();
|
||
}
|
||
return this;
|
||
},
|
||
setPosition: function(position) {
|
||
this.element.writeAttribute('wysija_position', position);
|
||
},
|
||
hideControls: function() {
|
||
if(this['getControls']) {
|
||
this.element.removeClassName('hover');
|
||
this.getControls().hide();
|
||
}
|
||
},
|
||
showControls: function() {
|
||
if(this['getControls']) {
|
||
this.element.addClassName('hover');
|
||
try {
|
||
this.getControls().show();
|
||
} catch(e) {
|
||
;
|
||
}
|
||
}
|
||
},
|
||
makeBlockDroppable: function() {
|
||
if(this.isBlockDroppableEnabled() === false) {
|
||
var block_placeholder = this.getBlockDroppable();
|
||
Droppables.add(block_placeholder.identify(), WysijaForm.blockDropOptions);
|
||
block_placeholder.addClassName('enabled');
|
||
}
|
||
},
|
||
removeBlockDroppable: function() {
|
||
if(this.isBlockDroppableEnabled()) {
|
||
var block_placeholder = this.getBlockDroppable();
|
||
Droppables.remove(block_placeholder.identify());
|
||
block_placeholder.removeClassName('enabled');
|
||
}
|
||
},
|
||
isBlockDroppableEnabled: function() {
|
||
// if the block_placeholder does not exist, create it
|
||
var block_placeholder = this.getBlockDroppable();
|
||
if(block_placeholder === null) {
|
||
return this.createBlockDroppable().hasClassName('enabled');
|
||
} else {
|
||
return block_placeholder.hasClassName('enabled');
|
||
}
|
||
},
|
||
createBlockDroppable: function() {
|
||
info('block -> createBlockDroppable');
|
||
this.element.insert({before: '<div class=\"block_placeholder\">'+$('block_placeholder').innerHTML+'</div>'});
|
||
return this.element.previous('.block_placeholder');
|
||
},
|
||
getBlockDroppable: function() {
|
||
if(this.element.previous() === undefined || this.element.previous().hasClassName('block_placeholder') === false) {
|
||
return null;
|
||
} else {
|
||
return this.element.previous();
|
||
}
|
||
},
|
||
getControls: function() {
|
||
return this.element.down('.wysija_controls');
|
||
},
|
||
setupControls: function() {
|
||
// enable controls
|
||
this.controls = this.getControls();
|
||
|
||
if(this.controls) {
|
||
// setup events for block controls
|
||
this.element.observe('mouseover', function() {
|
||
// special cases where controls shouldn't be displayed
|
||
if(WysijaForm.locks.dragging === true || WysijaForm.locks.selectingColor === true || WysijaForm.locks.showingTools === true) return;
|
||
|
||
// set block flag
|
||
this.element.addClassName('hover');
|
||
|
||
// show controls
|
||
this.showControls();
|
||
|
||
// show settings if present
|
||
if(this.element.down('.wysija_settings') !== undefined) {
|
||
this.element.down('.wysija_settings').show();
|
||
}
|
||
}.bind(this));
|
||
|
||
this.element.observe('mouseout', function() {
|
||
// special cases where controls shouldn't hide
|
||
if(WysijaForm.locks.dragging === true || WysijaForm.locks.selectingColor === true) return;
|
||
|
||
// hide controls
|
||
this.hideControls();
|
||
|
||
// hide settings if present
|
||
if(this.element.down('.wysija_settings') !== undefined) {
|
||
this.element.down('.wysija_settings').hide();
|
||
}
|
||
}.bind(this));
|
||
|
||
|
||
// setup click event for remove button
|
||
this.removeButton = this.controls.down('.remove') || null;
|
||
if(this.removeButton !== null) {
|
||
this.removeButton.observe('click', function() {
|
||
this.removeBlock();
|
||
this.removeButton.stopObserving('click');
|
||
}.bind(this));
|
||
}
|
||
|
||
// setup click event for settings button
|
||
this.settingsButton = this.element.down('.settings') || null;
|
||
|
||
if(this.settingsButton !== null) {
|
||
this.settingsButton.observe('click', function(event) {
|
||
// TODO: refactor
|
||
var block = $(event.target).up('.mailpoet_form_block') || null;
|
||
if(block !== null) {
|
||
var field = WysijaForm.getFieldData(block);
|
||
this.editSettings();
|
||
}
|
||
}.bind(this));
|
||
}
|
||
}
|
||
return this;
|
||
},
|
||
removeBlock: function(callback) {
|
||
info('block -> removeBlock');
|
||
|
||
// save block in history
|
||
WysijaHistory.enqueue(this.element);
|
||
|
||
Effect.Fade(this.element.identify(), {
|
||
duration: 0.2,
|
||
afterFinish: function(effect) {
|
||
if(effect.element.next('.mailpoet_form_block') !== undefined && callback !== false) {
|
||
// show controls of next block to allow mass delete
|
||
WysijaForm.get(effect.element.next('.mailpoet_form_block')).block.showControls();
|
||
}
|
||
// remove placeholder
|
||
if(effect.element.previous('.block_placeholder') !== undefined) {
|
||
effect.element.previous('.block_placeholder').remove();
|
||
}
|
||
|
||
// remove element from the DOM
|
||
this.element.remove();
|
||
|
||
// reset block positions
|
||
WysijaForm.setBlockPositions();
|
||
|
||
// toggle widgets
|
||
WysijaForm.toggleWidgets();
|
||
|
||
// optional callback execution after completely removing block
|
||
if(callback !== undefined && typeof(callback) === 'function') {
|
||
callback();
|
||
}
|
||
|
||
// remove block instance
|
||
delete WysijaForm.instances[this.element.identify()];
|
||
}.bind(this)
|
||
});
|
||
}
|
||
});
|
||
|
||
/* Invoked on item dropped */
|
||
WysijaForm.Block.create = function(block, target) {
|
||
if($('form_template_'+block.type) === null) {
|
||
return false;
|
||
}
|
||
|
||
var body = $(WysijaForm.options.body),
|
||
block_template = Handlebars.compile($('form_template_block').innerHTML),
|
||
template = Handlebars.compile($('form_template_'+block.type).innerHTML),
|
||
output = '';
|
||
|
||
// set block template (depending on the block type)
|
||
block.template = template(block);
|
||
output = block_template(block);
|
||
|
||
// check if the new block is unique and if there's already an instance
|
||
// of it in the history. If so, remove its former instance from the history
|
||
if(block.unique === 1) {
|
||
WysijaHistory.remove(block.field);
|
||
}
|
||
|
||
// if the drop target was the bottom placeholder
|
||
if(target.identify() === 'block_placeholder') {
|
||
// insert block at the bottom
|
||
body.insert(output);
|
||
//block = body.childElements().last();
|
||
} else {
|
||
// insert block before the drop target
|
||
target.insert({before: output });
|
||
//block = target.previous('.mailpoet_form_block');
|
||
}
|
||
// refresh sortable items
|
||
WysijaForm.makeSortable();
|
||
|
||
// refresh block positions
|
||
WysijaForm.setBlockPositions();
|
||
|
||
// position settings
|
||
WysijaForm.setSettingsPosition();
|
||
};
|
||
|
||
document.observe('wjfe:item:drop', function(event) {
|
||
info('create block');
|
||
WysijaForm.Block.create(event.memo, event.target);
|
||
|
||
// hide block controls
|
||
info('hide controls');
|
||
WysijaForm.hideBlockControls();
|
||
|
||
// toggle widgets
|
||
setTimeout(function() {
|
||
WysijaForm.toggleWidgets();
|
||
}, 1);
|
||
});
|
||
|
||
/* Form Widget */
|
||
WysijaForm.Widget = Class.create(WysijaForm.Block, {
|
||
initialize: function(element) {
|
||
info('widget -> init');
|
||
this.element = $(element);
|
||
return this;
|
||
},
|
||
setup: function() {
|
||
info('widget -> setup');
|
||
this.setupControls();
|
||
},
|
||
save: function() {
|
||
info('widget -> save');
|
||
var data = this.getData();
|
||
|
||
if(data.element !== undefined) {
|
||
delete data.element;
|
||
}
|
||
|
||
return data;
|
||
},
|
||
setData: function(data) {
|
||
var current_data = this.getData(),
|
||
params = $H(current_data.params).merge(data.params).toObject();
|
||
|
||
// update type if it changed
|
||
if(data.type !== undefined && data.type !== current_data.type) {
|
||
this.element.writeAttribute('wysija_type', data.type);
|
||
}
|
||
|
||
// update params
|
||
this.element.writeAttribute('wysija_params', JSON.stringify(params));
|
||
},
|
||
getData: function() {
|
||
var data = WysijaForm.getFieldData(this.element);
|
||
|
||
// decode params
|
||
if(data.params.length > 0) {
|
||
data.params = JSON.parse(data.params);
|
||
}
|
||
|
||
return data;
|
||
},
|
||
getControls: function() {
|
||
return this.element.down('.wysija_controls');
|
||
},
|
||
remove: function() {
|
||
this.removeBlock();
|
||
},
|
||
redraw: function(data) {
|
||
// set parameters
|
||
this.setData(data);
|
||
var options = this.getData();
|
||
// redraw block
|
||
var block_template = Handlebars.compile($('form_template_block').innerHTML),
|
||
template = Handlebars.compile($('form_template_'+options.type).innerHTML),
|
||
data = $H(options).merge({ template: template(options) }).toObject();
|
||
this.element.replace(block_template(data));
|
||
|
||
WysijaForm.init();
|
||
},
|
||
editSettings: function() {
|
||
MailPoet.Modal.popup({
|
||
title: 'Edit field settings', // TODO: translate!
|
||
template: jQuery('#form_template_field_settings').html(),
|
||
data: this.getData(),
|
||
onSuccess: function() {
|
||
var data = jQuery('#form_field_settings').serializeObject();
|
||
this.redraw(data);
|
||
}.bind(this)
|
||
});
|
||
},
|
||
getSettings: function() {
|
||
return this.element.down('.wysija_settings');
|
||
}
|
||
});
|
||
|
||
/* When dom is loaded, initialize WysijaForm */
|
||
document.observe('dom:loaded', WysijaForm.init);
|
||
|
||
/* LOGGING */
|
||
function info(value) {
|
||
if(WysijaForm.options.debug === false) return;
|
||
|
||
if(!(window.console && console.log)) {
|
||
(function() {
|
||
var noop = function() {};
|
||
var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
|
||
var length = methods.length;
|
||
var console = window.console = {};
|
||
while(length--) {
|
||
console[methods[length]] = noop;
|
||
}
|
||
}());
|
||
}
|
||
try {
|
||
console.log('[DEBUG] '+value);
|
||
} catch(e) {}
|
||
}
|