Swap app code with bundles in assets/js/src
folder
This commit is contained in:
@@ -1,21 +1,13 @@
|
||||
webpackJsonp([0],[
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
define('admin', [
|
||||
'mailpoet',
|
||||
'jquery',
|
||||
'handlebars',
|
||||
], function(MailPoet, jQuery, Handlebars) {
|
||||
console.log('admin.js', MailPoet, jQuery, Handlebars);
|
||||
jQuery(function($) {
|
||||
// dom ready
|
||||
$(function() {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
|
||||
__webpack_require__(1),
|
||||
__webpack_require__(2),
|
||||
__webpack_require__(3),
|
||||
], __WEBPACK_AMD_DEFINE_RESULT__ = function(MailPoet, jQuery, Handlebars) {
|
||||
console.log('OVER HERE', MailPoet, jQuery, Handlebars);
|
||||
jQuery(function($) {
|
||||
// dom ready
|
||||
$(function() {
|
||||
|
||||
});
|
||||
});
|
||||
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
|
||||
/***/ }
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
67
assets/js/src/ajax.js
Normal file
67
assets/js/src/ajax.js
Normal file
@@ -0,0 +1,67 @@
|
||||
define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
|
||||
"use strict";
|
||||
/**
|
||||
* MailPoet Ajax
|
||||
**/
|
||||
|
||||
MailPoet.Ajax = {
|
||||
version: 0.1,
|
||||
options: {},
|
||||
defaults: {
|
||||
url: null,
|
||||
controller: 'dummy',
|
||||
action: 'test',
|
||||
data: {},
|
||||
onSuccess: function(data, textStatus, xhr) {},
|
||||
onError: function(xhr, textStatus, errorThrown) {}
|
||||
},
|
||||
get: function(options) {
|
||||
this.request('get', options);
|
||||
},
|
||||
post: function(options) {
|
||||
this.request('post', options);
|
||||
},
|
||||
delete: function(options) {
|
||||
this.request('delete', options);
|
||||
},
|
||||
init: function(options) {
|
||||
// merge options
|
||||
this.options = jQuery.extend({}, this.defaults, options);
|
||||
|
||||
if(this.options.url === null) {
|
||||
this.options.url = ajaxurl+'?action=mailpoet_ajax';
|
||||
}
|
||||
|
||||
// routing
|
||||
this.options.url += '&mailpoet_controller='+this.options.controller;
|
||||
this.options.url += '&mailpoet_action='+this.options.action;
|
||||
},
|
||||
request: function(method, options) {
|
||||
// set options
|
||||
this.init(options);
|
||||
|
||||
// make ajax request depending on method
|
||||
if(method === 'get') {
|
||||
jQuery.get(
|
||||
this.options.url,
|
||||
this.options.data,
|
||||
this.options.onSuccess,
|
||||
'json'
|
||||
);
|
||||
} else {
|
||||
jQuery.ajax(
|
||||
this.options.url,
|
||||
{
|
||||
data: JSON.stringify(this.options.data),
|
||||
processData: false,
|
||||
contentType: "application/json; charset=utf-8",
|
||||
type : method,
|
||||
dataType: 'json',
|
||||
success : this.options.onSuccess,
|
||||
error : this.options.onError
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
993
assets/js/src/form_editor.js
Normal file
993
assets/js/src/form_editor.js
Normal file
@@ -0,0 +1,993 @@
|
||||
/*
|
||||
* 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) {}
|
||||
}
|
142
assets/js/src/handlebars_helpers.js
Normal file
142
assets/js/src/handlebars_helpers.js
Normal file
@@ -0,0 +1,142 @@
|
||||
define('handlebars_helpers', ['handlebars'], function(Handlebars) {
|
||||
// Handlebars helpers
|
||||
Handlebars.registerHelper('concat', function() {
|
||||
var size = (arguments.length - 1),
|
||||
output = '';
|
||||
for(var i = 0; i < size; i++) {
|
||||
output += arguments[i];
|
||||
};
|
||||
return output;
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('number_format', function(value, block) {
|
||||
return Number(value).toLocaleString();
|
||||
});
|
||||
Handlebars.registerHelper('date_format', function(timestamp, block) {
|
||||
if(window.moment) {
|
||||
if(timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// set date format
|
||||
var f = block.hash.format || "MMM Do, YYYY";
|
||||
// check if we passed a timestamp
|
||||
if(parseInt(timestamp, 10) == timestamp) {
|
||||
return moment.unix(timestamp).format(f);
|
||||
} else {
|
||||
return moment.utc(timestamp).format(f);
|
||||
}
|
||||
} else {
|
||||
return timestamp;
|
||||
};
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('cycle', function(value, block) {
|
||||
var values = value.split(' ');
|
||||
return values[block.data.index % (values.length + 1)];
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
|
||||
switch (operator) {
|
||||
case '==':
|
||||
return (v1 == v2) ? options.fn(this) : options.inverse(this);
|
||||
case '===':
|
||||
return (v1 === v2) ? options.fn(this) : options.inverse(this);
|
||||
case '!=':
|
||||
return (v1 != v2) ? options.fn(this) : options.inverse(this);
|
||||
case '!==':
|
||||
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
|
||||
case '<':
|
||||
return (v1 < v2) ? options.fn(this) : options.inverse(this);
|
||||
case '<=':
|
||||
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
|
||||
case '>':
|
||||
return (v1 > v2) ? options.fn(this) : options.inverse(this);
|
||||
case '>=':
|
||||
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
|
||||
case '&&':
|
||||
return (v1 && v2) ? options.fn(this) : options.inverse(this);
|
||||
case '||':
|
||||
return (v1 || v2) ? options.fn(this) : options.inverse(this);
|
||||
case 'in':
|
||||
var values = v2.split(',');
|
||||
return (v2.indexOf(v1) !== -1) ? options.fn(this) : options.inverse(this);
|
||||
default:
|
||||
return options.inverse(this);
|
||||
}
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('nl2br', function(value, block) {
|
||||
return value.gsub("\n", "<br />");
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('json_encode', function(value, block) {
|
||||
return JSON.stringify(value);
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('json_decode', function(value, block) {
|
||||
return JSON.parse(value);
|
||||
});
|
||||
Handlebars.registerHelper('url', function(value, block) {
|
||||
var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
||||
|
||||
return url + value;
|
||||
});
|
||||
Handlebars.registerHelper('emailFromMailto', function(value) {
|
||||
var mailtoMatchingRegex = /^mailto\:/i;
|
||||
if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
|
||||
return value.replace(mailtoMatchingRegex, '');
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
});
|
||||
Handlebars.registerHelper('lookup', function(obj, field, options) {
|
||||
return obj && obj[field];
|
||||
});
|
||||
|
||||
|
||||
Handlebars.registerHelper('rsa_key', function(value, block) {
|
||||
// extract all lines into an array
|
||||
if(value === undefined) return '';
|
||||
|
||||
var lines = value.trim().split("\n");
|
||||
|
||||
// remove header & footer
|
||||
lines.shift();
|
||||
lines.pop();
|
||||
|
||||
// return concatenated lines
|
||||
return lines.join('');
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('trim', function(value, block) {
|
||||
if(value === null || value === undefined) return '';
|
||||
return value.trim();
|
||||
});
|
||||
|
||||
/**
|
||||
* {{ellipsis}}
|
||||
* From: https://github.com/assemble/handlebars-helpers
|
||||
* @author: Jon Schlinkert <http://github.com/jonschlinkert>
|
||||
* Truncate the input string and removes all HTML tags
|
||||
* @param {String} str The input string.
|
||||
* @param {Number} limit The number of characters to limit the string.
|
||||
* @param {String} append The string to append if charaters are omitted.
|
||||
* @return {String} The truncated string.
|
||||
*/
|
||||
Handlebars.registerHelper('ellipsis', function (str, limit, append) {
|
||||
if (append === undefined) {
|
||||
append = '';
|
||||
}
|
||||
var sanitized = str.replace(/(<([^>]+)>)/g, '');
|
||||
if (sanitized.length > limit) {
|
||||
return sanitized.substr(0, limit - append.length) + append;
|
||||
} else {
|
||||
return sanitized;
|
||||
}
|
||||
});
|
||||
|
||||
Handlebars.registerHelper('getNumber', function (string) {
|
||||
return parseInt(string, 10);
|
||||
});
|
||||
});
|
@@ -1,921 +1,9 @@
|
||||
webpackJsonp([1],[
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
define('mailpoet', [], function() {
|
||||
// A placeholder for MailPoet object
|
||||
var MailPoet = {};
|
||||
|
||||
__webpack_require__(1);
|
||||
__webpack_require__(11);
|
||||
__webpack_require__(12);
|
||||
module.exports = __webpack_require__(13);
|
||||
// Expose MailPoet globally
|
||||
window.MailPoet = MailPoet;
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 1 */,
|
||||
/* 2 */,
|
||||
/* 3 */,
|
||||
/* 4 */,
|
||||
/* 5 */,
|
||||
/* 6 */,
|
||||
/* 7 */,
|
||||
/* 8 */,
|
||||
/* 9 */,
|
||||
/* 10 */,
|
||||
/* 11 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(2)], __WEBPACK_AMD_DEFINE_RESULT__ = function(MailPoet, jQuery) {
|
||||
"use strict";
|
||||
/**
|
||||
* MailPoet Ajax
|
||||
**/
|
||||
|
||||
MailPoet.Ajax = {
|
||||
version: 0.1,
|
||||
options: {},
|
||||
defaults: {
|
||||
url: null,
|
||||
controller: 'dummy',
|
||||
action: 'test',
|
||||
data: {},
|
||||
onSuccess: function(data, textStatus, xhr) {},
|
||||
onError: function(xhr, textStatus, errorThrown) {}
|
||||
},
|
||||
get: function(options) {
|
||||
this.request('get', options);
|
||||
},
|
||||
post: function(options) {
|
||||
this.request('post', options);
|
||||
},
|
||||
delete: function(options) {
|
||||
this.request('delete', options);
|
||||
},
|
||||
init: function(options) {
|
||||
// merge options
|
||||
this.options = jQuery.extend({}, this.defaults, options);
|
||||
|
||||
if(this.options.url === null) {
|
||||
this.options.url = ajaxurl+'?action=mailpoet_ajax';
|
||||
}
|
||||
|
||||
// routing
|
||||
this.options.url += '&mailpoet_controller='+this.options.controller;
|
||||
this.options.url += '&mailpoet_action='+this.options.action;
|
||||
},
|
||||
request: function(method, options) {
|
||||
// set options
|
||||
this.init(options);
|
||||
|
||||
// make ajax request depending on method
|
||||
if(method === 'get') {
|
||||
jQuery.get(
|
||||
this.options.url,
|
||||
this.options.data,
|
||||
this.options.onSuccess,
|
||||
'json'
|
||||
);
|
||||
} else {
|
||||
jQuery.ajax(
|
||||
this.options.url,
|
||||
{
|
||||
data: JSON.stringify(this.options.data),
|
||||
processData: false,
|
||||
contentType: "application/json; charset=utf-8",
|
||||
type : method,
|
||||
dataType: 'json',
|
||||
success : this.options.onSuccess,
|
||||
error : this.options.onError
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 12 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(2)], __WEBPACK_AMD_DEFINE_RESULT__ = function(MailPoet, jQuery) {
|
||||
"use strict";
|
||||
/*==================================================================================================
|
||||
|
||||
MailPoet Modal:
|
||||
|
||||
version: 0.8
|
||||
author: Jonathan Labreuille
|
||||
company: Wysija
|
||||
dependencies: jQuery
|
||||
|
||||
|
||||
Options:
|
||||
|
||||
Mandatory:
|
||||
// Modal window's title
|
||||
(string) title: 'Modal title'
|
||||
|
||||
// template
|
||||
(string) template: jQuery('#handlebars_template').html() or
|
||||
literal html
|
||||
|
||||
Optional:
|
||||
// jQuery cached element object node to be displayed,
|
||||
// instead of creating a new one
|
||||
(object) element: jQuery(selector)
|
||||
|
||||
// - data object that will be passed to the template when rendering
|
||||
(object) data: {},
|
||||
|
||||
// - data will be loaded via this url and passed to the template
|
||||
// when rendering
|
||||
// - if a "data" option was specified, it will be merged with the
|
||||
// ajax's response data
|
||||
(string) url: '/url.json'
|
||||
|
||||
// ajax method
|
||||
(string) method: 'post' (default: 'get')
|
||||
|
||||
// ajax post params
|
||||
(object) params: {}
|
||||
|
||||
// - integers are expressed in pixels
|
||||
(mixed) width: '50%' | 100 | '100px'
|
||||
|
||||
// - integers are expressed in pixels
|
||||
// - will be ignored when in "panel" mode
|
||||
(mixed) height: '50%' | 100 | '100px'
|
||||
|
||||
// - only used for "panel" mode
|
||||
// - will be ignored in "popup" mode
|
||||
(string) position: 'left' | 'right'
|
||||
|
||||
// display overlay or not
|
||||
(boolean) overlay: true | false
|
||||
|
||||
// element(s) to be highlighted when the overlay is "on"
|
||||
(object) highlight: jQuery element
|
||||
|
||||
// callbacks
|
||||
(function) onInit: called when the modal is displayed
|
||||
(function) onSuccess: called by calling MailPoet_Guide.success()
|
||||
(function) onCancel: called when closing the popup
|
||||
or by calling MailPoet_Guide.cancel()
|
||||
|
||||
Usage:
|
||||
|
||||
// popup mode
|
||||
MailPoet.Modal.popup(options);
|
||||
|
||||
// panel mode
|
||||
MailPoet.Modal.panel(options);
|
||||
|
||||
// loading states
|
||||
MailPoet.Modal.loading(true); // displays loading indicator
|
||||
MailPoet.Modal.loading(false); // hides loading indicator
|
||||
|
||||
==================================================================================================*/
|
||||
|
||||
MailPoet.Modal = {
|
||||
version: 0.8,
|
||||
|
||||
// flags
|
||||
initialized: false,
|
||||
opened: false,
|
||||
locked: false,
|
||||
|
||||
// sub panels
|
||||
subpanels: [],
|
||||
|
||||
// default values
|
||||
defaults: {
|
||||
// title
|
||||
title: null,
|
||||
|
||||
// type
|
||||
type: null,
|
||||
|
||||
// positionning
|
||||
position: 'right',
|
||||
|
||||
// data sources
|
||||
data: {},
|
||||
url: null,
|
||||
method: 'get',
|
||||
params: {},
|
||||
|
||||
// template
|
||||
template: null,
|
||||
body_template: null,
|
||||
|
||||
// dimensions
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
|
||||
// display overlay
|
||||
overlay: false,
|
||||
|
||||
// highlighted elements
|
||||
highlight: null,
|
||||
|
||||
// callbacks
|
||||
onInit: null,
|
||||
onSuccess: null,
|
||||
onCancel: null
|
||||
},
|
||||
renderer: 'html',
|
||||
options: {},
|
||||
templates: {
|
||||
overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
|
||||
popup: '<div id="mailpoet_popup">'+
|
||||
'<div class="mailpoet_popup_wrapper">'+
|
||||
'<a href="javascript:;" id="mailpoet_modal_close"></a>'+
|
||||
'<div id="mailpoet_popup_title"><h2></h2></div>'+
|
||||
'<div class="mailpoet_popup_body clearfix"></div>'+
|
||||
'</div>'+
|
||||
'</div>',
|
||||
loading: '<div id="mailpoet_loading" style="display:none;">'+
|
||||
'<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>'+
|
||||
'<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>'+
|
||||
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>'+
|
||||
'</div>',
|
||||
panel: '<div id="mailpoet_panel">'+
|
||||
'<a href="javascript:;" id="mailpoet_modal_close"></a>'+
|
||||
'<div class="mailpoet_panel_wrapper">'+
|
||||
'<div class="mailpoet_panel_body clearfix"></div>'+
|
||||
'</div>'+
|
||||
'</div>',
|
||||
subpanel: '<div class="mailpoet_panel_wrapper">'+
|
||||
'<div class="mailpoet_panel_body clearfix"></div>'+
|
||||
'</div>'
|
||||
},
|
||||
setRenderer: function() {
|
||||
this.renderer = (typeof(Handlebars) === "undefined") ? 'html' : 'handlebars';
|
||||
},
|
||||
compileTemplate: function(template) {
|
||||
if(this.renderer === 'html') {
|
||||
return function() { return template; };
|
||||
} else {
|
||||
return Handlebars.compile(template);
|
||||
}
|
||||
},
|
||||
init: function(options) {
|
||||
if(this.initialized === true) {
|
||||
this.close();
|
||||
}
|
||||
|
||||
// merge options
|
||||
this.options = jQuery.extend({}, this.defaults, options);
|
||||
|
||||
// set renderer
|
||||
this.setRenderer();
|
||||
|
||||
// init overlay
|
||||
this.initOverlay();
|
||||
|
||||
// toggle overlay
|
||||
this.toggleOverlay(this.options.overlay);
|
||||
|
||||
if(this.options.type !== null) {
|
||||
// insert modal depending on its type
|
||||
if(this.options.type === 'popup') {
|
||||
var modal = this.compileTemplate(this.templates[this.options.type]);
|
||||
// create modal
|
||||
jQuery('#mailpoet_modal_overlay').append(modal(this.options));
|
||||
// set title
|
||||
jQuery('#mailpoet_popup_title h2').html(this.options.title);
|
||||
} else if(this.options.type === 'panel') {
|
||||
// create panel
|
||||
jQuery('#mailpoet_modal_overlay').after(this.templates[this.options.type]);
|
||||
}
|
||||
|
||||
// add proper overlay class
|
||||
jQuery('#mailpoet_modal_overlay')
|
||||
.removeClass('mailpoet_popup_overlay mailpoet_panel_overlay')
|
||||
.addClass('mailpoet_'+this.options.type+'_overlay');
|
||||
}
|
||||
|
||||
// render template if specified
|
||||
if(this.options.template !== null) {
|
||||
// set "success" callback if specified
|
||||
if(options.onSuccess !== undefined) {
|
||||
this.options.onSuccess = options.onSuccess;
|
||||
}
|
||||
|
||||
// set "cancel" callback if specified
|
||||
if(options.onCancel !== undefined) {
|
||||
this.options.onCancel = options.onCancel;
|
||||
}
|
||||
|
||||
// compile template
|
||||
this.options.body_template = this.compileTemplate(this.options.template);
|
||||
|
||||
// setup events
|
||||
this.setupEvents();
|
||||
}
|
||||
|
||||
// set popup as initialized
|
||||
this.initialized = true;
|
||||
|
||||
return this;
|
||||
},
|
||||
initOverlay: function(toggle) {
|
||||
if(jQuery('#mailpoet_modal_overlay').length === 0) {
|
||||
// insert overlay into the DOM
|
||||
jQuery('body').append(this.templates.overlay);
|
||||
// insert loading indicator into overlay
|
||||
jQuery('#mailpoet_modal_overlay').append(this.templates.loading);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
toggleOverlay: function(toggle) {
|
||||
if(toggle === true) {
|
||||
jQuery('#mailpoet_modal_overlay').removeClass('mailpoet_overlay_hidden');
|
||||
} else {
|
||||
jQuery('#mailpoet_modal_overlay').addClass('mailpoet_overlay_hidden');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
setupEvents: function() {
|
||||
// close popup when user clicks on close button
|
||||
jQuery('#mailpoet_modal_close').on('click', this.cancel.bind(this));
|
||||
|
||||
// close popup when user clicks on overlay
|
||||
jQuery('#mailpoet_modal_overlay').on('click', function(e) {
|
||||
// we need to make sure that we are actually clicking on the overlay
|
||||
// because when clicking on the popup content, it will trigger the click
|
||||
// event on the overlay
|
||||
if(e.target.id === 'mailpoet_modal_overlay') { this.cancel(); }
|
||||
}.bind(this));
|
||||
|
||||
// close popup when user presses ESC key
|
||||
jQuery(document).on('keyup.mailpoet_modal', function(e) {
|
||||
if(this.opened === false) { return false; }
|
||||
if(e.keyCode === 27) { this.cancel(); }
|
||||
}.bind(this));
|
||||
|
||||
// make sure the popup is repositioned when the window is resized
|
||||
jQuery(window).on('resize.mailpoet_modal', function() {
|
||||
this.setPosition();
|
||||
}.bind(this));
|
||||
|
||||
return this;
|
||||
},
|
||||
removeEvents: function() {
|
||||
jQuery(document).unbind('keyup.mailpoet_modal');
|
||||
jQuery(window).unbind('resize.mailpoet_modal');
|
||||
jQuery('#mailpoet_modal_close').off('click');
|
||||
if(this.options.overlay === true) {
|
||||
jQuery('#mailpoet_modal_overlay').off('click');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
lock: function() {
|
||||
this.locked = true;
|
||||
|
||||
return this;
|
||||
},
|
||||
unlock: function() {
|
||||
this.locked = false;
|
||||
|
||||
return this;
|
||||
},
|
||||
isLocked: function() {
|
||||
return this.locked;
|
||||
},
|
||||
loadTemplate: function() {
|
||||
if(this.subpanels.length > 0) {
|
||||
// hide panel
|
||||
jQuery('.mailpoet_'+this.options.type+'_wrapper').hide();
|
||||
|
||||
// add sub panel wrapper
|
||||
jQuery('#mailpoet_'+this.options.type).append(this.templates['subpanel']);
|
||||
|
||||
// add sub panel content
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').last().html(this.subpanels[(this.subpanels.length - 1)].element);
|
||||
} else if (this.options.element) {
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').empty();
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').append(this.options.element);
|
||||
} else {
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').html(
|
||||
this.options.body_template(
|
||||
this.options.data
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
loadUrl: function() {
|
||||
if(this.options.method === 'get') {
|
||||
// make ajax request
|
||||
jQuery.getJSON(this.options.url, function(data) {
|
||||
// merge returned data with existing data passed when calling the "open" method
|
||||
this.options.data = jQuery.extend({}, this.options.data, data);
|
||||
// load template using fetched data
|
||||
this.loadTemplate();
|
||||
// show modal window
|
||||
this.showModal();
|
||||
}.bind(this));
|
||||
} else if(this.options.method === 'post') {
|
||||
// make ajax request
|
||||
jQuery.post(this.options.url, JSON.stringify(this.options.params), function(data) {
|
||||
// merge returned data with existing data passed when calling the "open" method
|
||||
this.options.data = jQuery.extend({}, this.options.data, data);
|
||||
// load template using fetched data
|
||||
this.loadTemplate();
|
||||
// show modal window
|
||||
this.showModal();
|
||||
}.bind(this), 'json');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
setDimensions: function() {
|
||||
switch(this.options.type) {
|
||||
case 'popup':
|
||||
// set popup dimensions
|
||||
jQuery('#mailpoet_popup').css({
|
||||
width: this.options.width,
|
||||
minHeight: this.options.height
|
||||
});
|
||||
// set popup wrapper height
|
||||
jQuery('#mailpoet_popup_wrapper').css({ height: this.options.height});
|
||||
break;
|
||||
case 'panel':
|
||||
// set dimensions
|
||||
if(this.options.position === 'right') {
|
||||
jQuery('#mailpoet_panel').css({
|
||||
width: this.options.width,
|
||||
right: 0,
|
||||
marginRight: '-' + this.options.width,
|
||||
left: 'auto'
|
||||
});
|
||||
} else if(this.options.position === 'left') {
|
||||
jQuery('#mailpoet_panel').css({
|
||||
width: this.options.width,
|
||||
left: 0,
|
||||
marginLeft: '-' + this.options.width,
|
||||
right: 'auto'
|
||||
});
|
||||
}
|
||||
jQuery('#mailpoet_panel').css({ minHeight: 'auto' });
|
||||
break;
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
setPosition: function() {
|
||||
switch(this.options.type) {
|
||||
case 'popup':
|
||||
var screenWidth = jQuery(window).width(),
|
||||
screenHeight = jQuery(window).height(),
|
||||
modalWidth = jQuery('.mailpoet_'+ this.options.type +'_wrapper').width(),
|
||||
modalHeight = jQuery('.mailpoet_'+ this.options.type +'_wrapper').height();
|
||||
|
||||
var top = Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2))),
|
||||
left = Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2)));
|
||||
|
||||
// set position of popup depending on screen dimensions.
|
||||
jQuery('#mailpoet_popup').css({
|
||||
top: top,
|
||||
left: left
|
||||
});
|
||||
break;
|
||||
case 'panel':
|
||||
setTimeout(function() {
|
||||
// set position of popup depending on screen dimensions.
|
||||
if(this.options.position === 'right') {
|
||||
jQuery('#mailpoet_panel').css(
|
||||
{ marginRight: 0 }
|
||||
);
|
||||
} else if(this.options.position === 'left') {
|
||||
jQuery('#mailpoet_panel').css(
|
||||
{ marginLeft: 0 }
|
||||
);
|
||||
}
|
||||
}.bind(this), 0);
|
||||
break;
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
showModal: function() {
|
||||
// set modal dimensions
|
||||
this.setDimensions();
|
||||
|
||||
// add a flag on the body so that we can prevent scrolling (setting overflow hidden)
|
||||
jQuery('body').addClass('mailpoet_modal_opened');
|
||||
|
||||
// show popup
|
||||
jQuery('#mailpoet_'+this.options.type).show();
|
||||
|
||||
// display overlay
|
||||
this.showOverlay();
|
||||
|
||||
// set modal position
|
||||
this.setPosition();
|
||||
|
||||
// add class on highlighted elements
|
||||
if(this.options.highlight !== null) {
|
||||
if(this.options.highlight.length > 0) {
|
||||
this.highlightOn(this.options.highlight);
|
||||
}
|
||||
}
|
||||
|
||||
// set popup as opened
|
||||
this.opened = true;
|
||||
|
||||
// trigger init event if specified
|
||||
if(this.options.onInit !== null) {
|
||||
this.options.onInit();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
highlightOn: function(element) {
|
||||
jQuery(element).addClass('mailpoet_modal_highlight');
|
||||
return this;
|
||||
},
|
||||
highlightOff: function() {
|
||||
jQuery('.mailpoet_modal_highlight').removeClass('mailpoet_modal_highlight');
|
||||
return this;
|
||||
},
|
||||
hideModal: function(callback) {
|
||||
// set modal as closed
|
||||
this.opened = false;
|
||||
|
||||
// hide modal
|
||||
jQuery('#mailpoet_'+this.options.type).hide();
|
||||
|
||||
// remove class on highlighted elements
|
||||
this.highlightOff();
|
||||
|
||||
// remove class from body to let it be scrollable
|
||||
jQuery('body').removeClass('mailpoet_modal_opened');
|
||||
|
||||
return this;
|
||||
},
|
||||
showOverlay: function(force) {
|
||||
jQuery('#mailpoet_modal_overlay').show();
|
||||
return this;
|
||||
},
|
||||
hideOverlay: function() {
|
||||
jQuery('#mailpoet_modal_overlay').hide();
|
||||
return this;
|
||||
},
|
||||
popup: function(options) {
|
||||
// get options
|
||||
options = options || {};
|
||||
// set modal type
|
||||
options.type = 'popup';
|
||||
// set overlay state
|
||||
options.overlay = options.overlay || true;
|
||||
// initialize modal
|
||||
this.init(options);
|
||||
// open modal
|
||||
this.open();
|
||||
|
||||
return this;
|
||||
},
|
||||
panel: function(options) {
|
||||
// get options
|
||||
options = options || {};
|
||||
// reset subpanels
|
||||
this.subpanels = [];
|
||||
// set modal type
|
||||
options.type = 'panel';
|
||||
// set overlay state
|
||||
options.overlay = options.overlay || false;
|
||||
// set highlighted element
|
||||
options.highlight = options.highlight || null;
|
||||
// set modal dimensions
|
||||
options.width = options.width || '40%';
|
||||
options.height = options.height || 'auto';
|
||||
// initialize modal
|
||||
this.init(options);
|
||||
// open modal
|
||||
this.open();
|
||||
|
||||
return this;
|
||||
},
|
||||
subpanel: function(options) {
|
||||
if(this.opened === false) {
|
||||
// if no panel is already opened, let's create one instead
|
||||
this.panel(options);
|
||||
} else {
|
||||
// if a panel is already opened, add a sub panel to it
|
||||
this.subpanels.push(options);
|
||||
this.loadTemplate();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
loading: function(toggle) {
|
||||
// make sure the overlay is initialized and that it's visible
|
||||
this.initOverlay(true);
|
||||
|
||||
if(toggle === true) {
|
||||
this.showLoading();
|
||||
} else {
|
||||
this.hideLoading();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
showLoading: function() {
|
||||
jQuery('#mailpoet_loading').show();
|
||||
|
||||
// add loading class to overlay
|
||||
jQuery('#mailpoet_modal_overlay').addClass('mailpoet_overlay_loading');
|
||||
|
||||
return this;
|
||||
},
|
||||
hideLoading: function() {
|
||||
jQuery('#mailpoet_loading').hide();
|
||||
|
||||
// remove loading class from overlay
|
||||
jQuery('#mailpoet_modal_overlay').removeClass('mailpoet_overlay_loading');
|
||||
|
||||
return this;
|
||||
},
|
||||
open: function() {
|
||||
// load template if specified
|
||||
if(this.options.template !== null) {
|
||||
// check if a url was specified to get extra data
|
||||
if(this.options.url !== null) {
|
||||
this.loadUrl();
|
||||
} else {
|
||||
// load template
|
||||
this.loadTemplate();
|
||||
|
||||
// show modal window
|
||||
this.showModal();
|
||||
}
|
||||
} else {
|
||||
this.cancel();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
success: function() {
|
||||
if(this.subpanels.length > 0) {
|
||||
if(this.subpanels[(this.subpanels.length - 1)].onSuccess !== undefined) {
|
||||
this.subpanels[(this.subpanels.length - 1)].onSuccess(this.subpanels[(this.subpanels.length - 1)].data);
|
||||
}
|
||||
} else {
|
||||
if(this.options.onSuccess !== null) {
|
||||
this.options.onSuccess(this.options.data);
|
||||
}
|
||||
}
|
||||
this.close();
|
||||
|
||||
return this;
|
||||
},
|
||||
cancel: function() {
|
||||
if(this.subpanels.length > 0) {
|
||||
if(this.subpanels[(this.subpanels.length - 1)].onCancel !== undefined) {
|
||||
this.subpanels[(this.subpanels.length - 1)].onCancel(this.subpanels[(this.subpanels.length - 1)].data);
|
||||
}
|
||||
} else {
|
||||
if(this.options.onCancel !== null) {
|
||||
this.options.onCancel(this.options.data);
|
||||
}
|
||||
}
|
||||
this.close();
|
||||
|
||||
return this;
|
||||
},
|
||||
destroy: function() {
|
||||
this.hideOverlay();
|
||||
|
||||
// remove extra modal
|
||||
if(jQuery('#mailpoet_'+this.options.type).length > 0) {
|
||||
jQuery('#mailpoet_'+this.options.type).remove();
|
||||
}
|
||||
|
||||
this.initialized = false;
|
||||
|
||||
return this;
|
||||
},
|
||||
close: function() {
|
||||
if(this.isLocked() === true) return this;
|
||||
|
||||
if(this.subpanels.length > 0) {
|
||||
|
||||
// close subpanel
|
||||
jQuery('.mailpoet_'+this.options.type+'_wrapper').last().remove();
|
||||
|
||||
// show previous panel
|
||||
jQuery('.mailpoet_'+this.options.type+'_wrapper').last().show();
|
||||
|
||||
// remove last subpanels
|
||||
this.subpanels.pop();
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
// remove event handlers
|
||||
this.removeEvents();
|
||||
|
||||
// hide modal window
|
||||
this.hideModal();
|
||||
|
||||
// destroy modal element
|
||||
this.destroy();
|
||||
|
||||
// reset options
|
||||
this.options = {
|
||||
onSuccess: null,
|
||||
onCancel: null
|
||||
};
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 13 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(2)], __WEBPACK_AMD_DEFINE_RESULT__ = function(MailPoet, jQuery) {
|
||||
"use strict";
|
||||
/*==================================================================================================
|
||||
|
||||
MailPoet Notice:
|
||||
|
||||
description: Handles notices
|
||||
version: 0.2
|
||||
author: Jonathan Labreuille
|
||||
company: Wysija
|
||||
dependencies: jQuery
|
||||
|
||||
Usage:
|
||||
|
||||
// success message (static: false)
|
||||
MailPoet.Notice.success('Yatta!');
|
||||
|
||||
// error message (static: false)
|
||||
MailPoet.Notice.error('Boo!');
|
||||
|
||||
// system message (static: true)
|
||||
MailPoet.Notice.system('You need to updated ASAP!');
|
||||
|
||||
Examples:
|
||||
|
||||
MailPoet.Notice.success('- success #1 -');
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.success('- success #2 -');
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.error('- error -');
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.system('- system -');
|
||||
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.hide();
|
||||
}, 2500);
|
||||
}, 300);
|
||||
}, 400);
|
||||
}, 500);
|
||||
|
||||
==================================================================================================*/
|
||||
|
||||
MailPoet.Notice = {
|
||||
version: 0.2,
|
||||
// default options
|
||||
defaults: {
|
||||
type: 'success',
|
||||
message: '',
|
||||
static: false,
|
||||
scroll: false,
|
||||
timeout: 2000,
|
||||
onOpen: null,
|
||||
onClose: null
|
||||
},
|
||||
options: {},
|
||||
init: function(options) {
|
||||
// set options
|
||||
this.options = jQuery.extend({}, this.defaults, options);
|
||||
|
||||
// clone element
|
||||
this.element = jQuery('#mailpoet_notice_'+this.options.type).clone();
|
||||
|
||||
// remove id from clone
|
||||
this.element.removeAttr('id');
|
||||
|
||||
// insert notice after its parent
|
||||
jQuery('#mailpoet_notice_'+this.options.type).after(this.element);
|
||||
|
||||
// setup onClose callback
|
||||
var onClose = null;
|
||||
if(this.options.onClose !== null) {
|
||||
onClose = this.options.onClose;
|
||||
}
|
||||
|
||||
// listen to remove event
|
||||
var element = this.element;
|
||||
jQuery(this.element).on('close', function() {
|
||||
jQuery(this).fadeOut(200, function() {
|
||||
// on close callback
|
||||
if(onClose !== null) {
|
||||
onClose();
|
||||
}
|
||||
// remove notice
|
||||
jQuery(this).remove();
|
||||
});
|
||||
}.bind(this.element));
|
||||
|
||||
// listen to message event
|
||||
jQuery(this.element).on('message', function(e, message) {
|
||||
MailPoet.Notice.setMessage(message);
|
||||
}.bind(this.element));
|
||||
|
||||
return this;
|
||||
},
|
||||
isHTML: function(str) {
|
||||
var a = document.createElement('div');
|
||||
a.innerHTML = str;
|
||||
for(var c = a.childNodes, i = c.length; i--;) {
|
||||
if(c[i].nodeType == 1) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
setMessage: function(message) {
|
||||
// if it's not an html message, let's sugar coat the message with a fancy <p>
|
||||
if(this.isHTML(message) === false) {
|
||||
message = '<p>'+message+'</p>';
|
||||
}
|
||||
// set message
|
||||
return this.element.html(message);
|
||||
},
|
||||
show: function(options) {
|
||||
// initialize
|
||||
this.init(options);
|
||||
|
||||
// show notice
|
||||
this.showNotice();
|
||||
|
||||
// return this;
|
||||
},
|
||||
showNotice: function() {
|
||||
// set message
|
||||
this.setMessage(this.options.message);
|
||||
|
||||
// make the notice appear
|
||||
this.element.fadeIn(200);
|
||||
|
||||
// if scroll option is enabled, scroll to the notice
|
||||
if(this.options.scroll === true) {
|
||||
this.element.get(0).scrollIntoView(false);
|
||||
}
|
||||
|
||||
// if the notice is not static, it has to disappear after a timeout
|
||||
if(this.options.static === false) {
|
||||
this.element.delay(this.options.timeout).trigger('close');
|
||||
} else {
|
||||
this.element.append('<a href="javascript:;" class="mailpoet_notice_close"><span class="dashicons dashicons-dismiss"></span></a>');
|
||||
this.element.find('.mailpoet_notice_close').on('click', function() {
|
||||
jQuery(this).trigger('close');
|
||||
});
|
||||
}
|
||||
|
||||
// call onOpen callback
|
||||
if(this.options.onOpen !== null) {
|
||||
this.options.onOpen(this.element);
|
||||
}
|
||||
},
|
||||
hide: function(all) {
|
||||
if(all !== undefined && all === true) {
|
||||
jQuery('.mailpoet_notice:not([id])').trigger('close');
|
||||
} else {
|
||||
jQuery('.mailpoet_notice.updated:not([id]), .mailpoet_notice.error:not([id])')
|
||||
.trigger('close');
|
||||
}
|
||||
},
|
||||
error: function(message, options) {
|
||||
this.show(jQuery.extend({}, {
|
||||
type: 'error',
|
||||
message: '<p>'+message+'</p>'
|
||||
}, options));
|
||||
},
|
||||
success: function(message, options) {
|
||||
this.show(jQuery.extend({}, {
|
||||
type: 'success',
|
||||
message: '<p>'+message+'</p>'
|
||||
}, options));
|
||||
},
|
||||
system: function(message, options) {
|
||||
this.show(jQuery.extend({}, {
|
||||
type: 'system',
|
||||
static: true,
|
||||
message: message
|
||||
}, options));
|
||||
}
|
||||
};
|
||||
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
||||
|
||||
|
||||
/***/ }
|
||||
]);
|
||||
return MailPoet;
|
||||
});
|
||||
|
639
assets/js/src/modal.js
Normal file
639
assets/js/src/modal.js
Normal file
@@ -0,0 +1,639 @@
|
||||
define('modal', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
|
||||
"use strict";
|
||||
/*==================================================================================================
|
||||
|
||||
MailPoet Modal:
|
||||
|
||||
version: 0.8
|
||||
author: Jonathan Labreuille
|
||||
company: Wysija
|
||||
dependencies: jQuery
|
||||
|
||||
|
||||
Options:
|
||||
|
||||
Mandatory:
|
||||
// Modal window's title
|
||||
(string) title: 'Modal title'
|
||||
|
||||
// template
|
||||
(string) template: jQuery('#handlebars_template').html() or
|
||||
literal html
|
||||
|
||||
Optional:
|
||||
// jQuery cached element object node to be displayed,
|
||||
// instead of creating a new one
|
||||
(object) element: jQuery(selector)
|
||||
|
||||
// - data object that will be passed to the template when rendering
|
||||
(object) data: {},
|
||||
|
||||
// - data will be loaded via this url and passed to the template
|
||||
// when rendering
|
||||
// - if a "data" option was specified, it will be merged with the
|
||||
// ajax's response data
|
||||
(string) url: '/url.json'
|
||||
|
||||
// ajax method
|
||||
(string) method: 'post' (default: 'get')
|
||||
|
||||
// ajax post params
|
||||
(object) params: {}
|
||||
|
||||
// - integers are expressed in pixels
|
||||
(mixed) width: '50%' | 100 | '100px'
|
||||
|
||||
// - integers are expressed in pixels
|
||||
// - will be ignored when in "panel" mode
|
||||
(mixed) height: '50%' | 100 | '100px'
|
||||
|
||||
// - only used for "panel" mode
|
||||
// - will be ignored in "popup" mode
|
||||
(string) position: 'left' | 'right'
|
||||
|
||||
// display overlay or not
|
||||
(boolean) overlay: true | false
|
||||
|
||||
// element(s) to be highlighted when the overlay is "on"
|
||||
(object) highlight: jQuery element
|
||||
|
||||
// callbacks
|
||||
(function) onInit: called when the modal is displayed
|
||||
(function) onSuccess: called by calling MailPoet_Guide.success()
|
||||
(function) onCancel: called when closing the popup
|
||||
or by calling MailPoet_Guide.cancel()
|
||||
|
||||
Usage:
|
||||
|
||||
// popup mode
|
||||
MailPoet.Modal.popup(options);
|
||||
|
||||
// panel mode
|
||||
MailPoet.Modal.panel(options);
|
||||
|
||||
// loading states
|
||||
MailPoet.Modal.loading(true); // displays loading indicator
|
||||
MailPoet.Modal.loading(false); // hides loading indicator
|
||||
|
||||
==================================================================================================*/
|
||||
|
||||
MailPoet.Modal = {
|
||||
version: 0.8,
|
||||
|
||||
// flags
|
||||
initialized: false,
|
||||
opened: false,
|
||||
locked: false,
|
||||
|
||||
// sub panels
|
||||
subpanels: [],
|
||||
|
||||
// default values
|
||||
defaults: {
|
||||
// title
|
||||
title: null,
|
||||
|
||||
// type
|
||||
type: null,
|
||||
|
||||
// positionning
|
||||
position: 'right',
|
||||
|
||||
// data sources
|
||||
data: {},
|
||||
url: null,
|
||||
method: 'get',
|
||||
params: {},
|
||||
|
||||
// template
|
||||
template: null,
|
||||
body_template: null,
|
||||
|
||||
// dimensions
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
|
||||
// display overlay
|
||||
overlay: false,
|
||||
|
||||
// highlighted elements
|
||||
highlight: null,
|
||||
|
||||
// callbacks
|
||||
onInit: null,
|
||||
onSuccess: null,
|
||||
onCancel: null
|
||||
},
|
||||
renderer: 'html',
|
||||
options: {},
|
||||
templates: {
|
||||
overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
|
||||
popup: '<div id="mailpoet_popup">'+
|
||||
'<div class="mailpoet_popup_wrapper">'+
|
||||
'<a href="javascript:;" id="mailpoet_modal_close"></a>'+
|
||||
'<div id="mailpoet_popup_title"><h2></h2></div>'+
|
||||
'<div class="mailpoet_popup_body clearfix"></div>'+
|
||||
'</div>'+
|
||||
'</div>',
|
||||
loading: '<div id="mailpoet_loading" style="display:none;">'+
|
||||
'<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>'+
|
||||
'<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>'+
|
||||
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>'+
|
||||
'</div>',
|
||||
panel: '<div id="mailpoet_panel">'+
|
||||
'<a href="javascript:;" id="mailpoet_modal_close"></a>'+
|
||||
'<div class="mailpoet_panel_wrapper">'+
|
||||
'<div class="mailpoet_panel_body clearfix"></div>'+
|
||||
'</div>'+
|
||||
'</div>',
|
||||
subpanel: '<div class="mailpoet_panel_wrapper">'+
|
||||
'<div class="mailpoet_panel_body clearfix"></div>'+
|
||||
'</div>'
|
||||
},
|
||||
setRenderer: function() {
|
||||
this.renderer = (typeof(Handlebars) === "undefined") ? 'html' : 'handlebars';
|
||||
},
|
||||
compileTemplate: function(template) {
|
||||
if(this.renderer === 'html') {
|
||||
return function() { return template; };
|
||||
} else {
|
||||
return Handlebars.compile(template);
|
||||
}
|
||||
},
|
||||
init: function(options) {
|
||||
if(this.initialized === true) {
|
||||
this.close();
|
||||
}
|
||||
|
||||
// merge options
|
||||
this.options = jQuery.extend({}, this.defaults, options);
|
||||
|
||||
// set renderer
|
||||
this.setRenderer();
|
||||
|
||||
// init overlay
|
||||
this.initOverlay();
|
||||
|
||||
// toggle overlay
|
||||
this.toggleOverlay(this.options.overlay);
|
||||
|
||||
if(this.options.type !== null) {
|
||||
// insert modal depending on its type
|
||||
if(this.options.type === 'popup') {
|
||||
var modal = this.compileTemplate(this.templates[this.options.type]);
|
||||
// create modal
|
||||
jQuery('#mailpoet_modal_overlay').append(modal(this.options));
|
||||
// set title
|
||||
jQuery('#mailpoet_popup_title h2').html(this.options.title);
|
||||
} else if(this.options.type === 'panel') {
|
||||
// create panel
|
||||
jQuery('#mailpoet_modal_overlay').after(this.templates[this.options.type]);
|
||||
}
|
||||
|
||||
// add proper overlay class
|
||||
jQuery('#mailpoet_modal_overlay')
|
||||
.removeClass('mailpoet_popup_overlay mailpoet_panel_overlay')
|
||||
.addClass('mailpoet_'+this.options.type+'_overlay');
|
||||
}
|
||||
|
||||
// render template if specified
|
||||
if(this.options.template !== null) {
|
||||
// set "success" callback if specified
|
||||
if(options.onSuccess !== undefined) {
|
||||
this.options.onSuccess = options.onSuccess;
|
||||
}
|
||||
|
||||
// set "cancel" callback if specified
|
||||
if(options.onCancel !== undefined) {
|
||||
this.options.onCancel = options.onCancel;
|
||||
}
|
||||
|
||||
// compile template
|
||||
this.options.body_template = this.compileTemplate(this.options.template);
|
||||
|
||||
// setup events
|
||||
this.setupEvents();
|
||||
}
|
||||
|
||||
// set popup as initialized
|
||||
this.initialized = true;
|
||||
|
||||
return this;
|
||||
},
|
||||
initOverlay: function(toggle) {
|
||||
if(jQuery('#mailpoet_modal_overlay').length === 0) {
|
||||
// insert overlay into the DOM
|
||||
jQuery('body').append(this.templates.overlay);
|
||||
// insert loading indicator into overlay
|
||||
jQuery('#mailpoet_modal_overlay').append(this.templates.loading);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
toggleOverlay: function(toggle) {
|
||||
if(toggle === true) {
|
||||
jQuery('#mailpoet_modal_overlay').removeClass('mailpoet_overlay_hidden');
|
||||
} else {
|
||||
jQuery('#mailpoet_modal_overlay').addClass('mailpoet_overlay_hidden');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
setupEvents: function() {
|
||||
// close popup when user clicks on close button
|
||||
jQuery('#mailpoet_modal_close').on('click', this.cancel.bind(this));
|
||||
|
||||
// close popup when user clicks on overlay
|
||||
jQuery('#mailpoet_modal_overlay').on('click', function(e) {
|
||||
// we need to make sure that we are actually clicking on the overlay
|
||||
// because when clicking on the popup content, it will trigger the click
|
||||
// event on the overlay
|
||||
if(e.target.id === 'mailpoet_modal_overlay') { this.cancel(); }
|
||||
}.bind(this));
|
||||
|
||||
// close popup when user presses ESC key
|
||||
jQuery(document).on('keyup.mailpoet_modal', function(e) {
|
||||
if(this.opened === false) { return false; }
|
||||
if(e.keyCode === 27) { this.cancel(); }
|
||||
}.bind(this));
|
||||
|
||||
// make sure the popup is repositioned when the window is resized
|
||||
jQuery(window).on('resize.mailpoet_modal', function() {
|
||||
this.setPosition();
|
||||
}.bind(this));
|
||||
|
||||
return this;
|
||||
},
|
||||
removeEvents: function() {
|
||||
jQuery(document).unbind('keyup.mailpoet_modal');
|
||||
jQuery(window).unbind('resize.mailpoet_modal');
|
||||
jQuery('#mailpoet_modal_close').off('click');
|
||||
if(this.options.overlay === true) {
|
||||
jQuery('#mailpoet_modal_overlay').off('click');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
lock: function() {
|
||||
this.locked = true;
|
||||
|
||||
return this;
|
||||
},
|
||||
unlock: function() {
|
||||
this.locked = false;
|
||||
|
||||
return this;
|
||||
},
|
||||
isLocked: function() {
|
||||
return this.locked;
|
||||
},
|
||||
loadTemplate: function() {
|
||||
if(this.subpanels.length > 0) {
|
||||
// hide panel
|
||||
jQuery('.mailpoet_'+this.options.type+'_wrapper').hide();
|
||||
|
||||
// add sub panel wrapper
|
||||
jQuery('#mailpoet_'+this.options.type).append(this.templates['subpanel']);
|
||||
|
||||
// add sub panel content
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').last().html(this.subpanels[(this.subpanels.length - 1)].element);
|
||||
} else if (this.options.element) {
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').empty();
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').append(this.options.element);
|
||||
} else {
|
||||
jQuery('.mailpoet_'+this.options.type+'_body').html(
|
||||
this.options.body_template(
|
||||
this.options.data
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
loadUrl: function() {
|
||||
if(this.options.method === 'get') {
|
||||
// make ajax request
|
||||
jQuery.getJSON(this.options.url, function(data) {
|
||||
// merge returned data with existing data passed when calling the "open" method
|
||||
this.options.data = jQuery.extend({}, this.options.data, data);
|
||||
// load template using fetched data
|
||||
this.loadTemplate();
|
||||
// show modal window
|
||||
this.showModal();
|
||||
}.bind(this));
|
||||
} else if(this.options.method === 'post') {
|
||||
// make ajax request
|
||||
jQuery.post(this.options.url, JSON.stringify(this.options.params), function(data) {
|
||||
// merge returned data with existing data passed when calling the "open" method
|
||||
this.options.data = jQuery.extend({}, this.options.data, data);
|
||||
// load template using fetched data
|
||||
this.loadTemplate();
|
||||
// show modal window
|
||||
this.showModal();
|
||||
}.bind(this), 'json');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
setDimensions: function() {
|
||||
switch(this.options.type) {
|
||||
case 'popup':
|
||||
// set popup dimensions
|
||||
jQuery('#mailpoet_popup').css({
|
||||
width: this.options.width,
|
||||
minHeight: this.options.height
|
||||
});
|
||||
// set popup wrapper height
|
||||
jQuery('#mailpoet_popup_wrapper').css({ height: this.options.height});
|
||||
break;
|
||||
case 'panel':
|
||||
// set dimensions
|
||||
if(this.options.position === 'right') {
|
||||
jQuery('#mailpoet_panel').css({
|
||||
width: this.options.width,
|
||||
right: 0,
|
||||
marginRight: '-' + this.options.width,
|
||||
left: 'auto'
|
||||
});
|
||||
} else if(this.options.position === 'left') {
|
||||
jQuery('#mailpoet_panel').css({
|
||||
width: this.options.width,
|
||||
left: 0,
|
||||
marginLeft: '-' + this.options.width,
|
||||
right: 'auto'
|
||||
});
|
||||
}
|
||||
jQuery('#mailpoet_panel').css({ minHeight: 'auto' });
|
||||
break;
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
setPosition: function() {
|
||||
switch(this.options.type) {
|
||||
case 'popup':
|
||||
var screenWidth = jQuery(window).width(),
|
||||
screenHeight = jQuery(window).height(),
|
||||
modalWidth = jQuery('.mailpoet_'+ this.options.type +'_wrapper').width(),
|
||||
modalHeight = jQuery('.mailpoet_'+ this.options.type +'_wrapper').height();
|
||||
|
||||
var top = Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2))),
|
||||
left = Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2)));
|
||||
|
||||
// set position of popup depending on screen dimensions.
|
||||
jQuery('#mailpoet_popup').css({
|
||||
top: top,
|
||||
left: left
|
||||
});
|
||||
break;
|
||||
case 'panel':
|
||||
setTimeout(function() {
|
||||
// set position of popup depending on screen dimensions.
|
||||
if(this.options.position === 'right') {
|
||||
jQuery('#mailpoet_panel').css(
|
||||
{ marginRight: 0 }
|
||||
);
|
||||
} else if(this.options.position === 'left') {
|
||||
jQuery('#mailpoet_panel').css(
|
||||
{ marginLeft: 0 }
|
||||
);
|
||||
}
|
||||
}.bind(this), 0);
|
||||
break;
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
showModal: function() {
|
||||
// set modal dimensions
|
||||
this.setDimensions();
|
||||
|
||||
// add a flag on the body so that we can prevent scrolling (setting overflow hidden)
|
||||
jQuery('body').addClass('mailpoet_modal_opened');
|
||||
|
||||
// show popup
|
||||
jQuery('#mailpoet_'+this.options.type).show();
|
||||
|
||||
// display overlay
|
||||
this.showOverlay();
|
||||
|
||||
// set modal position
|
||||
this.setPosition();
|
||||
|
||||
// add class on highlighted elements
|
||||
if(this.options.highlight !== null) {
|
||||
if(this.options.highlight.length > 0) {
|
||||
this.highlightOn(this.options.highlight);
|
||||
}
|
||||
}
|
||||
|
||||
// set popup as opened
|
||||
this.opened = true;
|
||||
|
||||
// trigger init event if specified
|
||||
if(this.options.onInit !== null) {
|
||||
this.options.onInit();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
highlightOn: function(element) {
|
||||
jQuery(element).addClass('mailpoet_modal_highlight');
|
||||
return this;
|
||||
},
|
||||
highlightOff: function() {
|
||||
jQuery('.mailpoet_modal_highlight').removeClass('mailpoet_modal_highlight');
|
||||
return this;
|
||||
},
|
||||
hideModal: function(callback) {
|
||||
// set modal as closed
|
||||
this.opened = false;
|
||||
|
||||
// hide modal
|
||||
jQuery('#mailpoet_'+this.options.type).hide();
|
||||
|
||||
// remove class on highlighted elements
|
||||
this.highlightOff();
|
||||
|
||||
// remove class from body to let it be scrollable
|
||||
jQuery('body').removeClass('mailpoet_modal_opened');
|
||||
|
||||
return this;
|
||||
},
|
||||
showOverlay: function(force) {
|
||||
jQuery('#mailpoet_modal_overlay').show();
|
||||
return this;
|
||||
},
|
||||
hideOverlay: function() {
|
||||
jQuery('#mailpoet_modal_overlay').hide();
|
||||
return this;
|
||||
},
|
||||
popup: function(options) {
|
||||
// get options
|
||||
options = options || {};
|
||||
// set modal type
|
||||
options.type = 'popup';
|
||||
// set overlay state
|
||||
options.overlay = options.overlay || true;
|
||||
// initialize modal
|
||||
this.init(options);
|
||||
// open modal
|
||||
this.open();
|
||||
|
||||
return this;
|
||||
},
|
||||
panel: function(options) {
|
||||
// get options
|
||||
options = options || {};
|
||||
// reset subpanels
|
||||
this.subpanels = [];
|
||||
// set modal type
|
||||
options.type = 'panel';
|
||||
// set overlay state
|
||||
options.overlay = options.overlay || false;
|
||||
// set highlighted element
|
||||
options.highlight = options.highlight || null;
|
||||
// set modal dimensions
|
||||
options.width = options.width || '40%';
|
||||
options.height = options.height || 'auto';
|
||||
// initialize modal
|
||||
this.init(options);
|
||||
// open modal
|
||||
this.open();
|
||||
|
||||
return this;
|
||||
},
|
||||
subpanel: function(options) {
|
||||
if(this.opened === false) {
|
||||
// if no panel is already opened, let's create one instead
|
||||
this.panel(options);
|
||||
} else {
|
||||
// if a panel is already opened, add a sub panel to it
|
||||
this.subpanels.push(options);
|
||||
this.loadTemplate();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
loading: function(toggle) {
|
||||
// make sure the overlay is initialized and that it's visible
|
||||
this.initOverlay(true);
|
||||
|
||||
if(toggle === true) {
|
||||
this.showLoading();
|
||||
} else {
|
||||
this.hideLoading();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
showLoading: function() {
|
||||
jQuery('#mailpoet_loading').show();
|
||||
|
||||
// add loading class to overlay
|
||||
jQuery('#mailpoet_modal_overlay').addClass('mailpoet_overlay_loading');
|
||||
|
||||
return this;
|
||||
},
|
||||
hideLoading: function() {
|
||||
jQuery('#mailpoet_loading').hide();
|
||||
|
||||
// remove loading class from overlay
|
||||
jQuery('#mailpoet_modal_overlay').removeClass('mailpoet_overlay_loading');
|
||||
|
||||
return this;
|
||||
},
|
||||
open: function() {
|
||||
// load template if specified
|
||||
if(this.options.template !== null) {
|
||||
// check if a url was specified to get extra data
|
||||
if(this.options.url !== null) {
|
||||
this.loadUrl();
|
||||
} else {
|
||||
// load template
|
||||
this.loadTemplate();
|
||||
|
||||
// show modal window
|
||||
this.showModal();
|
||||
}
|
||||
} else {
|
||||
this.cancel();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
success: function() {
|
||||
if(this.subpanels.length > 0) {
|
||||
if(this.subpanels[(this.subpanels.length - 1)].onSuccess !== undefined) {
|
||||
this.subpanels[(this.subpanels.length - 1)].onSuccess(this.subpanels[(this.subpanels.length - 1)].data);
|
||||
}
|
||||
} else {
|
||||
if(this.options.onSuccess !== null) {
|
||||
this.options.onSuccess(this.options.data);
|
||||
}
|
||||
}
|
||||
this.close();
|
||||
|
||||
return this;
|
||||
},
|
||||
cancel: function() {
|
||||
if(this.subpanels.length > 0) {
|
||||
if(this.subpanels[(this.subpanels.length - 1)].onCancel !== undefined) {
|
||||
this.subpanels[(this.subpanels.length - 1)].onCancel(this.subpanels[(this.subpanels.length - 1)].data);
|
||||
}
|
||||
} else {
|
||||
if(this.options.onCancel !== null) {
|
||||
this.options.onCancel(this.options.data);
|
||||
}
|
||||
}
|
||||
this.close();
|
||||
|
||||
return this;
|
||||
},
|
||||
destroy: function() {
|
||||
this.hideOverlay();
|
||||
|
||||
// remove extra modal
|
||||
if(jQuery('#mailpoet_'+this.options.type).length > 0) {
|
||||
jQuery('#mailpoet_'+this.options.type).remove();
|
||||
}
|
||||
|
||||
this.initialized = false;
|
||||
|
||||
return this;
|
||||
},
|
||||
close: function() {
|
||||
if(this.isLocked() === true) return this;
|
||||
|
||||
if(this.subpanels.length > 0) {
|
||||
|
||||
// close subpanel
|
||||
jQuery('.mailpoet_'+this.options.type+'_wrapper').last().remove();
|
||||
|
||||
// show previous panel
|
||||
jQuery('.mailpoet_'+this.options.type+'_wrapper').last().show();
|
||||
|
||||
// remove last subpanels
|
||||
this.subpanels.pop();
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
// remove event handlers
|
||||
this.removeEvents();
|
||||
|
||||
// hide modal window
|
||||
this.hideModal();
|
||||
|
||||
// destroy modal element
|
||||
this.destroy();
|
||||
|
||||
// reset options
|
||||
this.options = {
|
||||
onSuccess: null,
|
||||
onCancel: null
|
||||
};
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
});
|
175
assets/js/src/notice.js
Normal file
175
assets/js/src/notice.js
Normal file
@@ -0,0 +1,175 @@
|
||||
define('notice', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
|
||||
"use strict";
|
||||
/*==================================================================================================
|
||||
|
||||
MailPoet Notice:
|
||||
|
||||
description: Handles notices
|
||||
version: 0.2
|
||||
author: Jonathan Labreuille
|
||||
company: Wysija
|
||||
dependencies: jQuery
|
||||
|
||||
Usage:
|
||||
|
||||
// success message (static: false)
|
||||
MailPoet.Notice.success('Yatta!');
|
||||
|
||||
// error message (static: false)
|
||||
MailPoet.Notice.error('Boo!');
|
||||
|
||||
// system message (static: true)
|
||||
MailPoet.Notice.system('You need to updated ASAP!');
|
||||
|
||||
Examples:
|
||||
|
||||
MailPoet.Notice.success('- success #1 -');
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.success('- success #2 -');
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.error('- error -');
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.system('- system -');
|
||||
|
||||
setTimeout(function() {
|
||||
MailPoet.Notice.hide();
|
||||
}, 2500);
|
||||
}, 300);
|
||||
}, 400);
|
||||
}, 500);
|
||||
|
||||
==================================================================================================*/
|
||||
|
||||
MailPoet.Notice = {
|
||||
version: 0.2,
|
||||
// default options
|
||||
defaults: {
|
||||
type: 'success',
|
||||
message: '',
|
||||
static: false,
|
||||
scroll: false,
|
||||
timeout: 2000,
|
||||
onOpen: null,
|
||||
onClose: null
|
||||
},
|
||||
options: {},
|
||||
init: function(options) {
|
||||
// set options
|
||||
this.options = jQuery.extend({}, this.defaults, options);
|
||||
|
||||
// clone element
|
||||
this.element = jQuery('#mailpoet_notice_'+this.options.type).clone();
|
||||
|
||||
// remove id from clone
|
||||
this.element.removeAttr('id');
|
||||
|
||||
// insert notice after its parent
|
||||
jQuery('#mailpoet_notice_'+this.options.type).after(this.element);
|
||||
|
||||
// setup onClose callback
|
||||
var onClose = null;
|
||||
if(this.options.onClose !== null) {
|
||||
onClose = this.options.onClose;
|
||||
}
|
||||
|
||||
// listen to remove event
|
||||
var element = this.element;
|
||||
jQuery(this.element).on('close', function() {
|
||||
jQuery(this).fadeOut(200, function() {
|
||||
// on close callback
|
||||
if(onClose !== null) {
|
||||
onClose();
|
||||
}
|
||||
// remove notice
|
||||
jQuery(this).remove();
|
||||
});
|
||||
}.bind(this.element));
|
||||
|
||||
// listen to message event
|
||||
jQuery(this.element).on('message', function(e, message) {
|
||||
MailPoet.Notice.setMessage(message);
|
||||
}.bind(this.element));
|
||||
|
||||
return this;
|
||||
},
|
||||
isHTML: function(str) {
|
||||
var a = document.createElement('div');
|
||||
a.innerHTML = str;
|
||||
for(var c = a.childNodes, i = c.length; i--;) {
|
||||
if(c[i].nodeType == 1) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
setMessage: function(message) {
|
||||
// if it's not an html message, let's sugar coat the message with a fancy <p>
|
||||
if(this.isHTML(message) === false) {
|
||||
message = '<p>'+message+'</p>';
|
||||
}
|
||||
// set message
|
||||
return this.element.html(message);
|
||||
},
|
||||
show: function(options) {
|
||||
// initialize
|
||||
this.init(options);
|
||||
|
||||
// show notice
|
||||
this.showNotice();
|
||||
|
||||
// return this;
|
||||
},
|
||||
showNotice: function() {
|
||||
// set message
|
||||
this.setMessage(this.options.message);
|
||||
|
||||
// make the notice appear
|
||||
this.element.fadeIn(200);
|
||||
|
||||
// if scroll option is enabled, scroll to the notice
|
||||
if(this.options.scroll === true) {
|
||||
this.element.get(0).scrollIntoView(false);
|
||||
}
|
||||
|
||||
// if the notice is not static, it has to disappear after a timeout
|
||||
if(this.options.static === false) {
|
||||
this.element.delay(this.options.timeout).trigger('close');
|
||||
} else {
|
||||
this.element.append('<a href="javascript:;" class="mailpoet_notice_close"><span class="dashicons dashicons-dismiss"></span></a>');
|
||||
this.element.find('.mailpoet_notice_close').on('click', function() {
|
||||
jQuery(this).trigger('close');
|
||||
});
|
||||
}
|
||||
|
||||
// call onOpen callback
|
||||
if(this.options.onOpen !== null) {
|
||||
this.options.onOpen(this.element);
|
||||
}
|
||||
},
|
||||
hide: function(all) {
|
||||
if(all !== undefined && all === true) {
|
||||
jQuery('.mailpoet_notice:not([id])').trigger('close');
|
||||
} else {
|
||||
jQuery('.mailpoet_notice.updated:not([id]), .mailpoet_notice.error:not([id])')
|
||||
.trigger('close');
|
||||
}
|
||||
},
|
||||
error: function(message, options) {
|
||||
this.show(jQuery.extend({}, {
|
||||
type: 'error',
|
||||
message: '<p>'+message+'</p>'
|
||||
}, options));
|
||||
},
|
||||
success: function(message, options) {
|
||||
this.show(jQuery.extend({}, {
|
||||
type: 'success',
|
||||
message: '<p>'+message+'</p>'
|
||||
}, options));
|
||||
},
|
||||
system: function(message, options) {
|
||||
this.show(jQuery.extend({}, {
|
||||
type: 'system',
|
||||
static: true,
|
||||
message: message
|
||||
}, options));
|
||||
}
|
||||
};
|
||||
});
|
6
assets/js/src/public.js
Normal file
6
assets/js/src/public.js
Normal file
@@ -0,0 +1,6 @@
|
||||
jQuery(function($) {
|
||||
// dom ready
|
||||
$(function() {
|
||||
|
||||
});
|
||||
});
|
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user