fix for selection field jsx
This commit is contained in:
Jonathan Labreuille
4
assets/js/lib/prototype.min.js
vendored
Normal file
4
assets/js/lib/prototype.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
assets/js/lib/scriptaculous.min.js
vendored
Normal file
2
assets/js/lib/scriptaculous.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -18,35 +18,38 @@ function(
|
|||||||
},
|
},
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
this.loadCachedItems();
|
this.loadCachedItems();
|
||||||
|
this.setupSelect2();
|
||||||
},
|
},
|
||||||
componentDidUpdate: function() {
|
componentDidUpdate: function() {
|
||||||
this.setupSelect2();
|
this.setupSelect2();
|
||||||
},
|
},
|
||||||
setupSelect2: function() {
|
setupSelect2: function() {
|
||||||
if(!this.props.field.multiple || this.state.initialized === true) {
|
if(
|
||||||
|
!this.props.field.multiple
|
||||||
|
|| this.state.initialized === true
|
||||||
|
|| this.refs.select === undefined
|
||||||
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(Object.keys(this.props.item).length > 0) {
|
var select2 = jQuery('#'+this.refs.select.id).select2({
|
||||||
var select2 = jQuery('#'+this.refs.select.id).select2({
|
width: (this.props.width || ''),
|
||||||
width: (this.props.width || ''),
|
templateResult: function(item) {
|
||||||
templateResult: function(item) {
|
if(item.element && item.element.selected) {
|
||||||
if (item.element && item.element.selected) {
|
return null;
|
||||||
return null;
|
} else {
|
||||||
} else {
|
return item.text;
|
||||||
return item.text;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
|
||||||
select2.on('change', this.handleChange);
|
select2.on('change', this.handleChange);
|
||||||
select2.select2(
|
select2.select2(
|
||||||
'val',
|
'val',
|
||||||
this.props.item[this.props.field.name]
|
this.props.item[this.props.field.name]
|
||||||
);
|
);
|
||||||
|
|
||||||
this.setState({ initialized: true });
|
this.setState({ initialized: true });
|
||||||
}
|
|
||||||
},
|
},
|
||||||
loadCachedItems: function() {
|
loadCachedItems: function() {
|
||||||
if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
|
if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
|
||||||
|
|||||||
@ -1,993 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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) {}
|
|
||||||
}
|
|
||||||
@ -36,7 +36,6 @@ function(
|
|||||||
let default_value = false;
|
let default_value = false;
|
||||||
if(selected_filters[filter] !== undefined && selected_filters[filter]) {
|
if(selected_filters[filter] !== undefined && selected_filters[filter]) {
|
||||||
default_value = selected_filters[filter]
|
default_value = selected_filters[filter]
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
jQuery(`select[name="${filter}"]`).val('');
|
jQuery(`select[name="${filter}"]`).val('');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -392,7 +392,7 @@ define(
|
|||||||
},
|
},
|
||||||
componentWillReceiveProps: function(nextProps) {
|
componentWillReceiveProps: function(nextProps) {
|
||||||
const params = nextProps.params || {}
|
const params = nextProps.params || {}
|
||||||
//this.initWithParams(params)
|
this.initWithParams(params)
|
||||||
},
|
},
|
||||||
getItems: function() {
|
getItems: function() {
|
||||||
if(this.isMounted()) {
|
if(this.isMounted()) {
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
namespace MailPoet\Config;
|
namespace MailPoet\Config;
|
||||||
use \MailPoet\Models\Segment;
|
use \MailPoet\Models\Segment;
|
||||||
use \MailPoet\Models\Setting;
|
use \MailPoet\Models\Setting;
|
||||||
|
use \MailPoet\Models\Form;
|
||||||
use \MailPoet\Settings\Hosts;
|
use \MailPoet\Settings\Hosts;
|
||||||
use \MailPoet\Settings\Pages;
|
use \MailPoet\Settings\Pages;
|
||||||
use \MailPoet\Settings\Charsets;
|
use \MailPoet\Settings\Charsets;
|
||||||
@ -203,6 +204,18 @@ class Menu {
|
|||||||
|
|
||||||
function formEditor() {
|
function formEditor() {
|
||||||
$data = array();
|
$data = array();
|
||||||
|
|
||||||
|
$form = array(
|
||||||
|
'name' => __('My new form')
|
||||||
|
);
|
||||||
|
|
||||||
|
$id = (isset($_POST['id']) ? (int)$_POST['id'] : 0);
|
||||||
|
$form = Form::findOne($id);
|
||||||
|
if($form !== false) {
|
||||||
|
$form = $form->asArray();
|
||||||
|
}
|
||||||
|
$data['form'] = $form;
|
||||||
|
|
||||||
$data['segments'] = Segment::findArray();
|
$data['segments'] = Segment::findArray();
|
||||||
echo $this->renderer->render('form/editor.html', $data);
|
echo $this->renderer->render('form/editor.html', $data);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
"backbone.supermodel": "1.2.0",
|
"backbone.supermodel": "1.2.0",
|
||||||
"c3": "~0.4.10",
|
"c3": "~0.4.10",
|
||||||
"classnames": "^2.1.3",
|
"classnames": "^2.1.3",
|
||||||
"codemirror": "^5.5.0",
|
"codemirror": "^5.8.0",
|
||||||
"d3": "~3.5.5",
|
"d3": "~3.5.5",
|
||||||
"handlebars": "3.0.3",
|
"handlebars": "3.0.3",
|
||||||
"history": "^1.12.5",
|
"history": "^1.12.5",
|
||||||
|
|||||||
@ -40,12 +40,12 @@
|
|||||||
<strong><%= __('This form adds subscribers to these lists:') %></strong>
|
<strong><%= __('This form adds subscribers to these lists:') %></strong>
|
||||||
</p>
|
</p>
|
||||||
<select name="lists" data-placeholder="<%= __('Choose a list') %>" multiple>
|
<select name="lists" data-placeholder="<%= __('Choose a list') %>" multiple>
|
||||||
<% for list in lists %>
|
<% for segment in segments %>
|
||||||
<option value="<%= list.id %>"
|
<option value="<%= segment.id %>"
|
||||||
<% if list.id in form.data.settings.lists %>
|
<% if segment.id in form.segments %>
|
||||||
selected="selected"
|
selected="selected"
|
||||||
<% endif %>
|
<% endif %>
|
||||||
><%= list.name %></option>
|
><%= segment.name %></option>
|
||||||
<% endfor %>
|
<% endfor %>
|
||||||
</select>
|
</select>
|
||||||
<!-- error if user tries to save and has not selected a list -->
|
<!-- error if user tries to save and has not selected a list -->
|
||||||
@ -310,7 +310,7 @@
|
|||||||
// save change if necessary
|
// save change if necessary
|
||||||
if(new_value !== '' && current_value !== new_value) {
|
if(new_value !== '' && current_value !== new_value) {
|
||||||
console.log('TODO: form->save', {
|
console.log('TODO: form->save', {
|
||||||
form: <%= form.form %>,
|
form: <%= form.id | default(0) %>,
|
||||||
form_name: new_value,
|
form_name: new_value,
|
||||||
});
|
});
|
||||||
MailPoet.Notice.success("<%= __('Form name successfully updated!') %>");
|
MailPoet.Notice.success("<%= __('Form name successfully updated!') %>");
|
||||||
@ -505,11 +505,23 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// toolbar: list selection
|
// toolbar: list selection
|
||||||
var selected_lists = <%= selected_lists | json_encode | raw %>,
|
var selected_lists = <%= form.segments | json_encode | raw %>;
|
||||||
selected_lists_ids = selected_lists.map(function(list) { return parseInt(list.list, 10); });
|
var selected_lists_ids = [];
|
||||||
|
if(selected_lists !== null) {
|
||||||
|
selected_lists_ids = selected_lists.map(function(segment) {
|
||||||
|
return parseInt(segment.id, 10);
|
||||||
|
});
|
||||||
|
}
|
||||||
// enable select2 for list selection
|
// enable select2 for list selection
|
||||||
$('select[name="lists"]').select2({
|
$('select[name="lists"]').select2({
|
||||||
width:'100%'
|
width:'100%',
|
||||||
|
templateResult: function(item) {
|
||||||
|
if(item.element && item.element.selected) {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
return item.text;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// subscriber meta fields
|
// subscriber meta fields
|
||||||
|
|||||||
@ -78,8 +78,9 @@ config.push(_.extend({}, baseConfig, {
|
|||||||
'forms/forms.jsx',
|
'forms/forms.jsx',
|
||||||
'settings/tabs.js'
|
'settings/tabs.js'
|
||||||
],
|
],
|
||||||
form_editor: [
|
form_editor_lib: [
|
||||||
'select2'
|
'select2',
|
||||||
|
'codemirror'
|
||||||
],
|
],
|
||||||
newsletter_editor: [
|
newsletter_editor: [
|
||||||
'underscore',
|
'underscore',
|
||||||
|
|||||||
Reference in New Issue
Block a user