%PDF-
%PDF-
Mini Shell
Mini Shell
<% extends 'layout.html' %>
<% block title %>
<h1 class="title">
<%= __('Form') %>
<a class="page-title-action" href="?page=mailpoet-forms#/"><%= __('Back') %></a>
</h1>
<h2>
<input
type="text"
placeholder="<%= __('Click here to change the name') %>"
id="mailpoet_form_name"
value="<%= form.name %>"
/>
</h2>
<% endblock %>
<% block content %>
<div id="mailpoet_form_wrapper" class="clearfix">
<!-- Form Editor Container -->
<div id="mailpoet_form_container">
<!-- Form Editor -->
<div id="mailpoet_form_editor">
<div id="mailpoet_form_body"></div>
<p id="block_placeholder" class="block_placeholder"></p>
</div>
<p class="submit">
<a id="mailpoet_form_save" href="javascript:;" class="button button-primary" ><%= __('Save') %></a>
</p>
</div>
<!-- Form Editor: Toolbar -->
<div id="mailpoet_form_toolbar" style="visibility:hidden;">
<div class="mailpoet_toolbar_section closed" data-section="settings">
<a href="javascript:;" class="mailpoet_toggle"><br /></a>
<h3><%= __('Settings') %></h3>
<div>
<!-- Form settings -->
<form id="mailpoet_form_settings" action="" method="POST">
<input
type="hidden"
id="mailpoet_form_id"
value="<%= form.id | default(0) %>"
/>
<div id="mailpoet_settings_segment_selection">
<!-- Form settings: list selection -->
<p>
<strong><%= __('This form adds the subscribers to these lists:') %></strong>
</p>
<select
id="mailpoet_form_segments"
name="segments"
data-placeholder="<%= __('Please select a list') %>"
multiple
data-parsley-required-message="<%= __('Please select a list.') %>"
required
>
<% for segment in segments %>
<option value="<%= segment.id %>"><%= segment.name %> (<%= segment.subscribers %>)</option>
<% endfor %>
</select>
</div>
<div id="mailpoet_on_success">
<!-- Form settings: after submit -->
<p>
<label><strong><%= __('After submit...') %></strong></label>
<label>
<input class="mailpoet_radio"
type="radio"
name="on_success"
value="message"
<% if(form.settings.on_success is empty or form.settings.on_success == 'message') %>
checked="checked"
<% endif %>
/><%= __('Show message') %>
</label>
<label>
<input class="mailpoet_radio"
type="radio"
name="on_success"
value="page"
<% if(form.settings.on_success == 'page') %>
checked="checked"
<% endif %>
/><%= __('Go to Page') %>
</label>
</p>
<!-- default success message -->
<% if form.settings.success_message %>
<% set success_message = form.settings.success_message %>
<% else %>
<% set success_message = __('Check your inbox to confirm your subscription.') %>
<% endif %>
<p
id="mailpoet_on_success_message"
class="mailpoet_on_success_option"
>
<textarea name="success_message"><%= success_message %></textarea>
</p>
<p
id="mailpoet_on_success_page"
class="mailpoet_on_success_option"
>
<select name="success_page">
<% for page in pages %>
<option value="<%= page.id %>"
<%- if form.settings.success_page == page.id %>
<%=- ' selected="selected"' %>
<%- endif %>><%= page.title %></option>
<% endfor %>
</select>
</p>
</div>
</form>
</div>
</div>
<!-- Toolbar: Shortcodes / Export -->
<div class="mailpoet_toolbar_section closed" data-section="shortcodes">
<a href="javascript:;" class="mailpoet_toggle"><br /></a>
<h3><%= __('Form Placement') %></h3>
<div>
<!-- Form export links -->
<p>
<%= __('Add this form to your sidebar or footer on the [link]Widgets page[/link].')
|replaceLinkTags('widgets.php', {'target' : '_blank'})
|raw
%>
</p>
<p>
<%= __('Copy and paste this [link]shortcode[/link] on to a post or page.')
|replaceLinkTags('javascript:;', {'class' : 'mailpoet_form_export_toggle', 'data-type' : 'shortcode'})
|raw
%>
</p>
<p>
<%= __('%sPHP%s and %siFrame%s versions are also available.')
|format(
'<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="php">',
'</a>',
'<a href="javascript:;" class="mailpoet_form_export_toggle" data-type="iframe">',
'</a>'
)
|raw
%>
</p>
<!-- Form export -->
<div id="mailpoet_form_export"></div>
</div>
</div>
<!-- Toolbar: Fields -->
<div class="mailpoet_toolbar_section closed" data-section="fields">
<a href="javascript:;" class="mailpoet_toggle"><br /></a>
<h3><%= __('Fields') %></h3>
<div>
<ul id="mailpoet_toolbar_fields">
</ul>
<p class="mailpoet_align_center">
<a id="mailpoet_form_add_field" class="button button-primary" href="javascript:;" style="width:100%;"><%= __('Add New Field') %></a>
</p>
</div>
</div>
<!-- Toolbar: Styles -->
<div class="mailpoet_toolbar_section closed" data-section="styles">
<a href="javascript:;" class="mailpoet_toggle"><br /></a>
<h3><%= __('Styles') %></h3>
<div>
<textarea id="mailpoet_form_styles"><%= styles %></textarea>
<br />
<p class="mailpoet_align_center">
<a
id="mailpoet_form_preview"
href="javascript:;"
class="button button-primary"
style="width:100%;"
><%= __('Preview') %></a>
</p>
</div>
</div>
<!-- End | Form Editor: Toolbar -->
</div>
<!-- Form Editor: History -->
<div id="mailpoet_form_history"></div>
</div>
<%= javascript(
'vendor.js',
'lib/prototype.min.js',
'lib/scriptaculous.min.js',
'form_editor.js'
)%>
<script type="text/javascript">
var mailpoet_segments = <%= json_encode(segments) %>;
var mailpoet_default_fields = [
{
id: 'divider',
name: "<%= __('Divider') %>",
type: 'divider',
multiple: true,
readonly: true
},
{
id: "first_name",
name: "<%= __('First name') %>",
type: 'text',
params: {
label: "<%= __('First name') %>"
},
readonly: true
},
{
id: "last_name",
name: "<%= __('Last name') %>",
type: 'text',
params: {
label: "<%= __('Last name') %>"
},
readonly: true
},
{
id: "segments",
name: "<%= __('List selection') %>",
type: 'segment',
params: {
label: "<%= __('Select list(s):') %>"
},
readonly: true
},
{
id: 'html',
name: "<%= __('Custom text or HTML') %>",
type: 'html',
params: {
text: "<%= __('Subscribe to our newsletter and join [mailpoet_subscribers_count] other subscribers.') %>"
},
multiple: true,
readonly: true
}
];
jQuery(function($) {
function mailpoet_form_toggle_segments() {
// hide list selection if a list widget has been dragged into the editor
$('mailpoet_settings_segment_selection')[
(WysijaForm.hasSegmentSelection())
? 'hide' : 'show'
]();
}
function mailpoet_form_fields() {
// form editor: default fields
var template = Handlebars.compile($('#form_template_fields').html());
return MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'customFields',
action: 'getAll',
}).done(function(response) {
// render toolbar
jQuery('#mailpoet_toolbar_fields').html(template({
fields: $.merge(
$.merge([], mailpoet_default_fields),
response.data
)
}));
setTimeout(function() {
WysijaForm.init();
}, 1);
});
}
window.mailpoet_form_fields = mailpoet_form_fields;
// enable code mirror editor on styles textarea
MailPoet.CodeEditor = CodeMirror.fromTextArea(
document.getElementById('mailpoet_form_styles'),
{
lineNumbers: true,
tabMode: "indent",
matchBrackets: true,
theme: 'neo',
mode: 'css'
}
);
// toolbar sections
$(document).on(
'click',
'.mailpoet_toolbar_section.closed',
mailpoet_toolbar_tab
);
function mailpoet_toolbar_tab(tab, callback) {
var section = null;
if($.type(tab) === 'string') {
section = $('.mailpoet_toolbar_section[data-section="'+tab+'"]');
} else {
section = $(this);
}
var current_section = $('.mailpoet_toolbar_section:not(.closed)');
if(current_section.data('section') === section.data('section')) {
if(callback !== undefined && $.type(callback) === 'function') {
callback();
}
} else {
// close currently opened section
$('.mailpoet_toolbar_section:not(.closed)').addClass('closed');
// open selected section after a mini delay
setTimeout(function() {
$(section).removeClass('closed');
if(callback !== undefined && $.type(callback) === 'function') {
setTimeout(function() {
callback();
}, 151);
}
}.bind(this), 150);
}
return false;
}
// toolbar: open default section
mailpoet_toolbar_tab('settings');
// form: edit name (in place editor)
$('#mailpoet_form_edit_name').on('click', function() {
mailpoet_edit_form_name();
return false;
});
$('#mailpoet_form_name_input').on('keypress', function(e) {
if(e.which === 13) {
mailpoet_edit_form_name();
return false;
}
});
function mailpoet_edit_form_name() {
var is_editing = $('#mailpoet_form_name')
.data('mailpoet_editing') || false;
if(!is_editing) {
// set input value and show
$('#mailpoet_form_name_input')
.val($('#mailpoet_form_name').text())
.show();
// set editing mode
$('#mailpoet_form_name').data('mailpoet_editing', true);
// hide form name
$('#mailpoet_form_name').hide();
// focus on text input
$('#mailpoet_form_name_input').focus();
// set edit name label
$('#mailpoet_form_edit_name').html("<%= __('Save') %>");
} else {
var current_value = $('#mailpoet_form_name').html(),
new_value = $('#mailpoet_form_name_input').val();
// hide text input
$('#mailpoet_form_name_input').hide();
// set value
$('#mailpoet_form_name').text(new_value);
// set editing mode
$('#mailpoet_form_name').data('mailpoet_editing', false);
// show form name
$('#mailpoet_form_name').show();
// set edit name label
$('#mailpoet_form_edit_name').text("<%= __('Edit name') %>");
// save change if necessary
if(new_value !== '' && current_value !== new_value) {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'forms',
action: 'save',
data: {
id: $('#mailpoet_form_id').val(),
name: new_value
}
}).done(function(response) {
MailPoet.Notice.success(
"<%= __('The form name was successfully updated!') | escape('js') %>"
);
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true }
);
}
});
}
}
}
// on dom loaded
$(function() {
// load form
WysijaForm.load(<%= json_encode(form) | raw %>);
// save form
$('#mailpoet_form_save').on('click', function() {
mailpoet_form_save();
mailpoet_form_export();
return false;
});
// edit name
$('#mailpoet_form_name').on('keyup', function(e) {
if(e.which === 13) {
$('#mailpoet_form_save').trigger('click');
this.blur();
}
});
// preview form
$(document).on('click', '#mailpoet_form_preview', function() {
mailpoet_form_preview();
return false;
});
function mailpoet_form_preview() {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'forms',
action: 'previewEditor',
data: WysijaForm.save()
}).done(function(response) {
MailPoet.Modal.popup({
title: "<%= __('Form preview') %>",
template: $('#mailpoet_form_preview_template').html(),
data: response.data
});
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true }
);
}
});
}
function mailpoet_form_save(callback) {
var form = WysijaForm.save();
form.id = $('#mailpoet_form_id').val();
// reset error messages
$('#mailpoet_form_settings').parsley().reset();
// validate segments to subscribe to
if(WysijaForm.hasSegmentSelection()) {
// validate segment selection in form
if(WysijaForm.isSegmentSelectionValid() === false) {
return false;
}
}
// check if the form is valid
if($('#mailpoet_form_settings').parsley().isValid() === false) {
// refresh settings and trigger validation
mailpoet_toolbar_tab('settings', function() {
$('#mailpoet_form_settings').parsley().validate();
});
} else {
// save form
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'forms',
action: 'saveEditor',
data: form
}).done(function(response) {
if(callback !== false) {
var message = null;
if(response.meta.is_widget === true) {
message = "<%= __('Saved! The changes are now active in your widget.') | escape('js') %>";
} else {
message = "<%= __('Saved! Add this form to %1$sa widget%2$s.') | format("<a href='widgets.php' target='_blank'>", '</a>') | raw | escape('js') %>";
}
if(message !== null) {
MailPoet.Notice.hide();
MailPoet.Notice.success(message, {
scroll: true,
static: (response.meta.is_widget === false)
});
}
MailPoet.trackEvent('Forms > Add New', {
'MailPoet Free version': window.mailpoet_version
});
// if there is a callback, call it!
if(callback !== undefined) {
callback();
}
}
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true }
);
}
});
}
}
window.mailpoet_form_save = mailpoet_form_save;
// toolbar: on success toggle
$(document).on('change', 'input[name="on_success"]', toggleOnSuccessOptions);
toggleOnSuccessOptions();
function toggleOnSuccessOptions() {
// hide all options
$('.mailpoet_on_success_option').hide();
// display selected option
var value = $('input[name="on_success"]:checked').val();
$('#mailpoet_on_success_'+value).show();
}
function mailpoet_form_export() {
var template = Handlebars.compile($('#form_template_exports').html());
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'forms',
action: 'exportsEditor',
data: {
id: $('#mailpoet_form_id').val()
}
}).done(function(response) {
$('#mailpoet_form_export').html(template({ exports: response.data }));
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true }
);
}
});
}
mailpoet_form_export();
$(document).on('click', '.mailpoet_form_export_toggle', function() {
var type = $(this).data('type');
$('.mailpoet_form_export_output').hide();
$('#mailpoet_form_export_' + type).show();
MailPoet.trackEvent('Forms > Embed', {
'Embed type': type,
'MailPoet Free version': window.mailpoet_version
});
return false;
});
// add new field
$(document).on('click', '#mailpoet_form_add_field', function() {
// open popup
MailPoet.Modal.popup({
title: "<%= __('Add new field') %>",
template: $('#form_template_field_form').html()
});
return false;
});
// edit field
$(document).on('click', '.mailpoet_form_field_edit', function() {
var id = $(this).data('id');
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'customFields',
action: 'get',
data: {
id: id
}
}).done(function(response) {
MailPoet.Modal.popup({
title: "<%= __('Edit field') %>",
template: $('#form_template_field_form').html(),
data: response.data
});
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true }
);
}
});
});
// delete field
$(document).on('click', '.mailpoet_form_field_delete', function() {
var id = $(this).data('id');
var item = $(this).parent();
var name = $(this).siblings('.mailpoet_form_field').attr('wysija_name');
var type = $(this).siblings('.mailpoet_form_field').attr('wysija_type');
if(window.confirm(
"<%= __('This field will be deleted for all your subscribers. Are you sure?') %>"
)) {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'customFields',
action: 'delete',
data: {
id: id
}
}).done(function(response) {
item.remove();
WysijaForm.removeBlock(id, function() {
mailpoet_form_save(false);
});
mailpoet_form_fields();
MailPoet.Notice.success(
"<%= __('Removed custom field %$1s') | escape('js') %>".replace('%$1s', '"' + name + '"')
);
MailPoet.trackEvent('Forms > Delete custom field', {
'Field type': type,
'MailPoet Free version': window.mailpoet_version
});
});
}
});
// undo button
$(document).on('click', '#mailpoet_form_undo', function() {
// pop last element off the history
WysijaHistory.dequeue();
return false;
});
// get form fields
mailpoet_form_fields();
// toolbar: segment selection
var selected_segments = <%= form.settings.segments | json_encode | raw %>;
// enable select2 for segment selection
var select2 = $('#mailpoet_form_segments').select2({
width:'100%',
templateResult: function(item) {
if(item.element && item.element.selected) {
return null;
} else {
return item.text;
}
}
});
var hasRemoved = false;
select2.on('select2:unselecting', function(e) {
hasRemoved = true;
});
select2.on('select2:opening', function(e) {
if(hasRemoved === true) {
hasRemoved = false;
e.preventDefault();
}
});
// set selected values
$('#mailpoet_form_segments')
.val(<%= form.settings.segments | json_encode | raw %>)
.trigger('change');
});
});
</script>
<% endblock %>
<% block templates %>
<!-- toolbar templates -->
<%= partial('form_template_fields', 'form/templates/toolbar/fields.hbs') %>
<%= partial('form_template_exports', 'form/templates/toolbar/exports.hbs') %>
<!-- block templates -->
<%= partial('form_template_block', 'form/templates/blocks/container.hbs') %>
<%= partial('form_template_divider', 'form/templates/blocks/divider.hbs') %>
<%= partial('form_template_text', 'form/templates/blocks/text.hbs') %>
<%= partial('form_template_submit', 'form/templates/blocks/submit.hbs') %>
<%= partial('form_template_segment', 'form/templates/blocks/segment.hbs') %>
<%= partial('form_template_radio', 'form/templates/blocks/radio.hbs') %>
<%= partial('form_template_select', 'form/templates/blocks/select.hbs') %>
<%= partial('form_template_checkbox', 'form/templates/blocks/checkbox.hbs') %>
<%= partial('form_template_textarea', 'form/templates/blocks/textarea.hbs') %>
<%= partial('form_template_html', 'form/templates/blocks/html.hbs') %>
<!-- custom field settings and templates -->
<% include 'form/custom_fields.html' %>
<!-- form preview -->
<%= partial('mailpoet_form_preview_template',
'form/templates/preview.hbs'
) %>
<% endblock %>
<% block translations %>
<%= localize({
'editFieldSettings': __('Edit field settings'),
}) %>
<% endblock %>
Zerion Mini Shell 1.0