Remove the old form editor

[MAILPOET-2625]
This commit is contained in:
Pavel Dohnal
2020-01-29 13:53:36 +01:00
committed by Jack Kitterhing
parent ec42ef4eeb
commit fe84b9f9fb
23 changed files with 3 additions and 2714 deletions

View File

@ -1,647 +0,0 @@
@import '../../../../node_modules/codemirror/lib/codemirror';
@import '../../../../node_modules/codemirror/theme/neo';
$icons: '../../img/form_editor_icons.png';
$handle_icon: '../../img/handle.png';
#mailpoet_form_name {
font-size: 23px;
}
#mailpoet_form_history {
display: none;
}
#mailpoet_form_editor {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 20px rgba(0, 0, 0, .1);
padding: 20px;
position: relative;
width: 300px;
}
#mailpoet_form_editor:before,
#mailpoet_form_editor:after {
background: transparent;
bottom: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
content: ' ';
height: 10px;
left: 12px;
position: absolute;
transform: skew(-5deg) rotate(-5deg);
width: 40%;
z-index: -1;
}
#mailpoet_form_editor:after {
left: auto;
right: 12px;
transform: skew(5deg) rotate(5deg);
}
/* Warnings in blocks */
.mailpoet_warning {
color: #900;
font-weight: bold;
}
.block_placeholder {
border: 0 none;
font-weight: bold;
height: 0;
line-height: 30px;
margin: 0 auto;
overflow: hidden;
text-align: center;
text-indent: -9999px;
width: 298px;
z-index: 9500;
}
.block_placeholder.active {
/* border:1px dashed #dfdfdf; */
/* background-color:#f5f5f5; */
background-color: #4cb7e1;
display: block;
height: 30px;
overflow: auto;
text-indent: 0;
}
.block_placeholder.hover {
background-color: #0074a2;
border-color: #0074a2;
color: #fff;
}
/* Widget: checkbox, radio */
.mailpoet_radio,
.mailpoet_checkbox {
margin: -2px 5px 0 0;
}
/* MailPoet Form wrapper */
#mailpoet_form_wrapper {
margin: 20px 0 0;
position: relative;
}
/* MailPoet Form container */
#mailpoet_form_container {
margin: 0;
width: 340px;
}
#mailpoet_form_editor.loading,
#mailpoet_form_toolbar.loading {
background: url('loading.gif') no-repeat center center #fcfcfc;
}
#mailpoet_form_toolbar.loading {
border: 1px solid #dfdfdf;
}
#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields {
visibility: hidden;
z-index: 1;
}
/* Tabs : content/images/styles/themes */
#wysija-add-field {
float: none;
}
#mailpoet_form_toolbar {
position: absolute;
width: 400px;
z-index: 999;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs {
border-bottom: 1px solid #dfdfdf;
line-height: 0;
}
#mailpoet_form_toolbar .add_custom_field {
padding: 15px 0 5px;
text-align: center;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li,
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
display: inline-block;
*display: inline;
*float: left;
height: 30px;
line-height: 30px;
margin: 0;
outline: 0 none;
padding: 0;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li {
margin: 0 0 1px;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
background: linear-gradient(center top, #f9f9f9, #f5f5f5);
background-color: #f5f5f5;
border: 1px solid #dfdfdf;
border-radius: 3px 3px 0 0;
box-shadow: 0 1px 0 #fff inset;
color: #a6a6a6;
font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
outline: 0 none;
padding: 0 7px;
text-decoration: none;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover {
background-color: #eee;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected {
background: #fcfcfc;
border-bottom: 0 none;
color: #000;
filter: none;
padding-bottom: 1px;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a,
.wysija_params {
display: none !important;
}
#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs,
#mailpoet_form_toolbar #mailpoet_toolbar_fields {
margin: 0;
position: relative;
z-index: 9998;
}
/* edit form name */
#mailpoet_form_name_input {
vertical-align: bottom;
}
/* wysija widgets */
.mailpoet_form_widget {
height: 25px;
line-height: 25px;
width: 298px;
z-index: 9999 !important;
}
.mailpoet_toolbar_section {
background: none repeat scroll 0 0 #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
cursor: pointer;
margin-bottom: 0;
max-height: 2000px;
min-width: 255px;
overflow: hidden;
position: relative;
transition: max-height .5s ease-in-out;
}
.mailpoet_toolbar_section > div {
height: 100%;
min-width: 255px;
overflow: auto;
padding: 10px 20px 20px;
}
.mailpoet_toolbar_section h3 {
margin: 10px;
position: relative;
}
.mailpoet_toolbar_section.closed {
max-height: 38px;
}
.mailpoet_toolbar_section .mailpoet_toggle {
height: 38px;
position: absolute;
right: 0;
top: 0;
width: 27px;
}
.mailpoet_toolbar_section .mailpoet_toggle:focus {
box-shadow: none !important;
outline: 0 none !important;
}
.mailpoet_toolbar_section .mailpoet_toggle:before {
content: '\f142';
display: inline-block;
font: 400 20px / 1 dashicons;
padding: 8px 10px;
position: relative;
right: 12px;
speak: none;
text-decoration: none !important;
top: 0;
}
.mailpoet_toolbar_section.closed .mailpoet_toggle:before {
content: '\f140';
}
#mailpoet_form_styles {
margin: 10px;
max-width: 318px;
min-height: 300px;
resize: vertical;
width: 318px;
}
#mailpoet_form_toolbar a.mailpoet_form_field,
.mailpoet_form_widget {
background: linear-gradient(center 0, #f9f9f9, #ececec);
background-color: #f5f5f5;
border: 1px solid #dfdfdf;
border-radius: 3px;
box-shadow: 0 1px 0 #fff inset;
color: #222;
cursor: move;
display: block;
font-size: 12px;
font-weight: bold;
height: 25px;
line-height: 25px;
padding: 0 7px;
text-shadow: 0 1px 0 #fff;
}
#mailpoet_form_toolbar a.mailpoet_form_field.disabled {
color: #ccc;
cursor: pointer;
pointer-events: none;
}
.mailpoet_form_field_edit {
bottom: 13px;
position: absolute;
right: 27px;
}
.mailpoet_form_field_delete {
bottom: 13px;
position: absolute;
right: 7px;
}
/* toolbar: fields */
#mailpoet_toolbar_fields li {
padding: 0 0 10px;
position: relative;
}
#mailpoet_toolbar_fields li.notice {
background: none !important;
border: 0 none !important;
font-size: 11px;
font-style: italic;
margin: 0 !important;
}
/* blocks */
.mailpoet_form_block {
background-color: #fff;
border: 0 none;
display: inline-table;
display: block;
height: 1%;
margin: 0;
padding: 10px 18px;
position: relative;
z-index: 98;
}
.mailpoet_form_block.highlighted {
border: 1px solid #5897fb;
padding: 9px 17px;
}
.mailpoet_form_block img {
max-width: 100%;
}
/* Widget styles */
.mailpoet_form_block p {
margin: 5px 0;
word-wrap: break-word;
}
.mailpoet_form_block.dragging {
pointer-events: none;
z-index: 99000;
}
.mailpoet_form_block:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
.mailpoet_form_block.hover {
border: 1px dashed #bbb;
margin: 0;
padding: 9px 17px;
}
.mailpoet_form_block.static {
background-color: #999;
}
/* controls */
.mailpoet_form_block .wysija_controls {
background: linear-gradient(center 0, #eee, #bbb);
background-color: #dfdfdf;
border: 1px solid #ccc;
border-radius: 2px;
height: 20px;
left: -1px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: -22px;
width: 298px;
}
.mailpoet_form_block .wysija_controls li {
float: left;
height: 20px;
width: 20px;
}
.mailpoet_form_block .wysija_controls a {
color: #000;
cursor: pointer;
float: left;
font-size: 120%;
font-weight: bold;
height: 20px;
line-height: 20px;
text-align: center;
width: 20px;
}
.mailpoet_form_block .wysija_controls a.remove {
margin: 0 0 0 1px;
}
.mailpoet_form_block .handle_container,
.mailpoet_form_block .handle_container a {
float: none;
width: 40px !important;
}
.mailpoet_form_block .handle_container {
left: 140px;
position: absolute;
top: 0;
}
/* controls & icons */
.wysija_controls a span,
.wysija_gallery .wysija_tools a span,
.wysija_image .wysija_tools a span,
.wysija_text .wysija_tools a span,
#mailpoet_toolbar_fields a span {
display: block;
height: 20px;
width: 20px;
}
/* toolbar: full width button */
/* color picker in control bars */
.wysija_controls span input {
color: transparent;
margin: 2px 0 0;
padding: 0;
}
/* left alignment button */
.alignment-left span {
background: url($icons) no-repeat 0 0;
}
.alignment-left.active span,
.alignment-left:hover span {
background: url($icons) no-repeat 0 -20px;
}
/* center alignment button */
.alignment-center span {
background: url($icons) no-repeat -20px 0;
}
.alignment-center.active span,
.alignment-center:hover span {
background: url($icons) no-repeat -20px -20px;
}
/* right alignment button */
.alignment-right span {
background: url($icons) no-repeat -40px 0;
}
.alignment-right.active span,
.alignment-right:hover span {
background: url($icons) no-repeat -40px -20px;
}
/* linking */
.add-link span {
background: url($icons) no-repeat -60px 0;
}
.add-link.active span,
.add-link:hover span {
background: url($icons) no-repeat -60px -20px;
}
.remove-link span {
background: url($icons) no-repeat -80px 0;
}
.remove-link.active span,
.remove-link:hover span {
background: url($icons) no-repeat -80px -20px;
}
/* block controls */
.remove span,
.delete span {
background: url($icons) no-repeat -100px 0;
}
.remove.active span,
.remove:hover span,
.delete.active span,
.delete:hover span {
background: url($icons) no-repeat -100px -20px;
}
.handle span {
background: url($handle_icon) no-repeat;
cursor: move;
width: 40px !important;
}
.duplicate span {
background: url($icons) no-repeat -140px 0;
}
.duplicate.active span,
.duplicate:hover span {
background: url($icons) no-repeat -140px -20px;
}
.settings span {
background: url($icons) no-repeat -160px 0;
}
.settings.active span,
.settings:hover span {
background: url($icons) no-repeat -160px -20px;
}
.icon-plus span {
background: url($icons) no-repeat -200px 0;
}
.icon-plus.active span,
.icon-plus:hover span {
background: url($icons) no-repeat -200px -20px;
}
.icon-minus span {
background: url($icons) no-repeat -220px 0;
}
.icon-minus.active span,
.icon-minus:hover span {
background: url($icons) no-repeat -220px -20px;
}
/* wysija options */
.wysija_options {
display: none;
}
/* wysija block settings */
.wysija_settings {
position: absolute;
z-index: 1000;
}
.wysija_settings a {
background: linear-gradient(center 0, #f9f9f9, #ececec);
background-color: #f5f5f5;
border: 1px solid #dfdfdf;
border-radius: 3px;
box-shadow: 0 1px 0 #fff inset;
color: #222;
cursor: pointer;
display: block;
font-size: 12px;
font-weight: normal;
padding: 5px 5px 3px 27px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
.wysija_settings a span {
height: 20px;
left: 5px;
position: absolute;
top: 3px;
width: 20px;
}
/* labels */
.mailpoet_form_block label {
display: block;
margin: 0 5px 0 0;
}
/* form settings: success message */
#mailpoet_on_success textarea,
#mailpoet_on_success select {
width: 100%;
}
#mailpoet_on_success textarea {
height: 50px;
min-height: 50px;
resize: vertical;
}
/* make sure textareas within the form editor are not resizeable */
.mailpoet_form_block textarea {
resize: none;
}
/* remove click events from inputs within form editor */
.mailpoet_form_block input,
.mailpoet_form_block textarea {
pointer-events: none;
}
/* form export */
#mailpoet_form_export textarea {
display: none;
font-size: 85%;
height: 150px;
min-height: 150px;
resize: vertical;
width: 340px;
}
/** Styling for WP 3.8 and higher */
.mailpoet_form_field_edit,
.mailpoet_form_field_delete {
text-decoration: none;
}
.mailpoet_form_field_edit:hover .dashicons-admin-generic:before,
.mailpoet_form_field_delete:hover .dashicons-dismiss:before,
.settings:hover .dashicons-admin-generic:before {
color: #2ea2cc;
}
.mailpoet_form_field_edit span,
.mailpoet_form_field_delete span {
background: none !important;
color: #999;
}
.mailpoet_form_field_delete span:before {
font-size: 21px;
}
/* Code Mirror */
.CodeMirror {
border: 1px solid #eee;
}
/* Settings */
#mailpoet_form_segments.parsley-error + span .select2-selection {
border: 1px solid #b94a48;
}
.mailpoet_form_field_settings_text {
min-height: 100px;
width: 100%;
}

View File

@ -85,9 +85,3 @@ $gutenberg-control-border-color-focus: #007cba;
margin: 8px 0; margin: 8px 0;
} }
} }
// Styles for old editor link
.mailpoet_old_form_editor_link,
#mailpoet_form_edit_old_editor_fallback_link {
padding: 16px;
}

View File

@ -9,7 +9,6 @@
@import 'components/common'; @import 'components/common';
@import 'components/modal'; @import 'components/modal';
@import 'components/notice'; @import 'components/notice';
@import 'components/formEditorLegacy';
@import 'components/listing'; @import 'components/listing';
@import 'components/listing/newsletters'; @import 'components/listing/newsletters';
@import 'components/box'; @import 'components/box';

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -1,9 +0,0 @@
// Initialize Editor dependencies that have side effect (meaning they
// not only define module but also modify/register something on load).
// This is to avoid undefined import order & messy WebPack config.
// Code can be gradually refactored to avoid side effects completely.
import 'form_editor_legacy/form_editor.js'; // side effect - calls document.observe()
import 'codemirror'; // side effect - has to be loaded here, used in 'editor.html'
import 'codemirror/mode/css/css'; // side effect - has to be loaded here, used in 'editor.html'

View File

@ -63,12 +63,6 @@ class FormEditor {
'custom_fields' => $this->customFieldsResponseBuilder->buildBatch($customFields), 'custom_fields' => $this->customFieldsResponseBuilder->buildBatch($customFields),
]; ];
if (isset($_GET['legacy']) && (int)$_GET['legacy']) { $this->pageRenderer->displayPage('form/editor.html', $data);
$data['date_types'] = $dateTypes;
$this->pageRenderer->displayPage('form/editor_legacy.html', $data);
} else {
$this->pageRenderer->displayPage('form/editor.html', $data);
}
} }
} }

View File

@ -1,752 +0,0 @@
<% extends 'layout.html' %>
<% block title %>
<h1 class="title">
<%= __('Form') %>
<a class="page-title-action" href="?page=mailpoet-forms#/" data-automation-id="mailpoet_form_go_back"><%= __('Back') %></a>
</h1>
<h2>
<input
type="text"
placeholder="<%= __('Click here to change the name') %>"
id="mailpoet_form_name"
data-automation-id="mailpoet_form_name_input"
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"
data-automation-id="save_form"
><%= __('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>
&nbsp;
<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>
<p class="help">
<%= __('<strong>Tip:</strong> read our [link]GDPR guide[/link] to make sure your form follows the privacy directive of the European Union.')
|replaceLinkTags('https://kb.mailpoet.com/article/246-guide-to-conform-to-gdpr?utm_source=plugin&utm_medium=formeditor&utm_campaign=helpdocs', {'target': '_blank', id: 'mailpoet_helper_link', 'data-beacon-article': '5a9e8cdd04286374f7089a8c'})
|raw
%>
</p>
<!-- End | Form Editor: Toolbar -->
</div>
<!-- Form Editor: History -->
<div id="mailpoet_form_history"></div>
</div>
<%= javascript(
'lib/prototype.min.js',
'lib/scriptaculous.min.js',
'form_editor_legacy.js'
)%>
<script type="text/javascript">
function encodeHtmlValue(str) {
return str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}
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') %>",
minWidth: "500px",
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(),
minWidth: "500px",
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', '"' + encodeHtmlValue(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/templatesLegacy/toolbar/fields.hbs') %>
<%= partial('form_template_exports', 'form/templatesLegacy/toolbar/exports.hbs') %>
<!-- block templates -->
<%= partial('form_template_block', 'form/templatesLegacy/blocks/container.hbs') %>
<%= partial('form_template_divider', 'form/templatesLegacy/blocks/divider.hbs') %>
<%= partial('form_template_text', 'form/templatesLegacy/blocks/text.hbs') %>
<%= partial('form_template_submit', 'form/templatesLegacy/blocks/submit.hbs') %>
<%= partial('form_template_segment', 'form/templatesLegacy/blocks/segment.hbs') %>
<%= partial('form_template_radio', 'form/templatesLegacy/blocks/radio.hbs') %>
<%= partial('form_template_select', 'form/templatesLegacy/blocks/select.hbs') %>
<%= partial('form_template_checkbox', 'form/templatesLegacy/blocks/checkbox.hbs') %>
<%= partial('form_template_textarea', 'form/templatesLegacy/blocks/textarea.hbs') %>
<%= partial('form_template_html', 'form/templatesLegacy/blocks/html.hbs') %>
<!-- custom field settings and templates -->
<% include 'form/custom_fields_legacy.html' %>
<!-- form preview -->
<%= partial('mailpoet_form_preview_template',
'form/templatesLegacy/preview.hbs'
) %>
<% endblock %>
<% block translations %>
<%= localize({
'editFieldSettings': __('Edit field settings'),
}) %>
<% endblock %>

View File

@ -1,10 +0,0 @@
{{#if params.label}}
<p>
<label>{{ params.label }}{{#if params.required}} *{{/if}}</label>
</p>
{{/if}}
{{#each params.values}}
<p>
<label><input class="mailpoet_checkbox" type="checkbox" value="1" {{#if is_checked}}checked="checked"{{/if}} disabled="disabled" />{{ value }}</label>
</p>
{{/each}}

View File

@ -1,20 +0,0 @@
<div class="mailpoet_form_block"
wysija_type="{{ type }}"
{{#if id}}wysija_id="{{ id }}"{{/if}}
wysija_name="{{ name }}"
wysija_unique="{{ unique }}"
wysija_static="{{#ifCond static '==' 1}}1{{else}}0{{/ifCond}}"
wysija_params="{{#if params}}{{ json_encode params }}{{/if}}">
{{#ifCond type '!==' 'divider'}}
<div class="wysija_settings" style="display:none;">
<a class="settings" href="javascript:;"><span></span><%= __('Edit display') %></a>
</div>
{{/ifCond}}
<ul class="wysija_controls clearfix" style="display: none;">
<li class="handle_container"><a class="handle" href="javascript:;"><span></span></a></li>
{{#ifCond static '==' '0'}}
<li><a class="remove" href="javascript:;"><span></span></a></li>
{{/ifCond}}
</ul>
{{{ template }}}
</div>

View File

@ -1 +0,0 @@
<hr />

View File

@ -1,7 +0,0 @@
{{#if params.text}}
{{#ifCond params.nl2br '==' '1'}}
{{{ nl2br params.text }}}
{{else}}
{{{ params.text }}}
{{/ifCond}}
{{/if}}

View File

@ -1,10 +0,0 @@
{{#if params.label}}
<p>
<label>{{ params.label }}{{#if params.required}} *{{/if}}</label>
</p>
{{/if}}
{{#each params.values}}
<p>
<label><input class="mailpoet_radio" type="radio" value="1" {{#if is_checked}}checked="checked"{{/if}} disabled="disabled" />{{ value }}</label>
</p>
{{/each}}

View File

@ -1,7 +0,0 @@
{{#if params.label}}<p>{{ params.label }}</p>{{/if}}
{{#unless params.values}}<p class="mailpoet_error"><%= __('Please select at least one list') %></p>{{/unless}}
{{#each params.values}}
<p>
<input class="mailpoet_checkbox" type="checkbox" {{#if is_checked}}checked="checked"{{/if}} disabled="disabled" />{{ name }}
</p>
{{/each}}

View File

@ -1,17 +0,0 @@
{{#unless params.label_within}}
{{#if params.label}}
<p>
<label>{{ params.label }}{{#if params.required}} *{{/if}}</label>
</p>
{{/if}}
{{/unless}}
<select>
{{#if params.label_within}}
<option value="">{{ params.label }}{{#if params.required}} *{{/if}}</option>
{{else}}
{{#unless params.required}}<option value="">-</option>{{/unless}}
{{/if}}
{{#each params.values}}
<option {{#if is_checked}}selected="selected"{{/if}}>{{ value }}</option>
{{/each}}
</select>

View File

@ -1 +0,0 @@
<input type="submit" value="{{ params.label }}" class="button" />

View File

@ -1,2 +0,0 @@
{{#unless params.label_within}}<label>{{ params.label }}{{#if params.required}} *{{/if}}</label>{{/unless}}
<input type="text" disabled="disabled" value="" placeholder="{{#if params.label_within}}{{ params.label }}{{#if params.required}} *{{/if}}{{/if}}" />

View File

@ -1,4 +0,0 @@
<p>
{{#unless params.label_within}}<label>{{ params.label }}{{#if params.required}} *{{/if}}</label>{{/unless}}
<textarea placeholder="{{#if params.label_within}}{{ params.label }}{{#if params.required}} *{{/if}}{{/if}}" disabled="disabled" rows="{{#if params.lines}}{{ params.lines }}{{else}}1{{/if}}">{{ params.text }}</textarea>
</p>

View File

@ -1,11 +0,0 @@
<style type="text/css" id="mailpoet_form_preview_styles">
.mailpoet_hp_email_label { display: none; }
{{{ css }}}
</style>
<div class="mailpoet_form">
<div class="mailpoet_message">
<p class="mailpoet_validate_success"><%= __('This is what the success message looks like.') %></p>
<p class="mailpoet_validate_error"><%= __('This is what the error message looks like.') %></p>
</div>
{{{ html }}}
</div>

View File

@ -1,3 +0,0 @@
{{#each exports}}
<textarea class="mailpoet_form_export_output" id="mailpoet_form_export_{{ @key }}" onClick="this.focus();this.select();" readonly="readonly">{{ this }}</textarea>
{{/each}}

View File

@ -1,27 +0,0 @@
{{#each fields}}
<li>
<a class="mailpoet_form_field"
wysija_name="{{ name }}"
{{#if id }}wysija_id="{{ id }}"{{/if}}
wysija_unique="{{#if multiple}}0{{else}}1{{/if}}"
wysija_type="{{ type }}"
{{#if params}}wysija_params="{{ json_encode params }}"{{/if}}>
{{ name }}
</a>
{{#unless readonly}}
<a class="mailpoet_form_field_edit settings"
title="<%= __('Edit field') %>"
href="javascript:;"
data-id="{{ id }}">
<span class="dashicons dashicons-admin-generic"></span>
</a>
<a class="mailpoet_form_field_delete delete"
title="<%= __('Delete field') %>"
href="javascript:;"
data-id="{{ id }}">
<span class="dashicons dashicons-dismiss"></span>
</a>
{{/unless}}
</li>
{{/each}}

View File

@ -209,7 +209,6 @@ const adminConfig = {
'common/check_spf_record.jsx', 'common/check_spf_record.jsx',
], ],
admin: 'webpack_admin_index.jsx', admin: 'webpack_admin_index.jsx',
form_editor_legacy: 'form_editor_legacy/webpack_index.jsx',
newsletter_editor: 'newsletter_editor/webpack_index.jsx', newsletter_editor: 'newsletter_editor/webpack_index.jsx',
}, },
plugins: [ plugins: [
@ -247,12 +246,12 @@ const adminConfig = {
// add admin/form_editor_legacy/newsletter_editor shared modules // add admin/form_editor_legacy/newsletter_editor shared modules
const filteredChunks = chunks.filter((chunk) => { const filteredChunks = chunks.filter((chunk) => {
return ['admin', 'form_editor_legacy', 'newsletter_editor'].includes(chunk.name); return ['admin', 'newsletter_editor'].includes(chunk.name);
}); });
return filteredChunks.length > 1; return filteredChunks.length > 1;
}, },
enforce: true, enforce: true,
chunks: (chunk) => ['admin_vendor', 'admin', 'form_editor_legacy', 'newsletter_editor'].includes(chunk.name), chunks: (chunk) => ['admin_vendor', 'admin', 'newsletter_editor'].includes(chunk.name),
priority: 0, priority: 0,
}, },
} }