Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Extracts editor initialization and bundles with admin vendor

Browse Source 
Allows displaying custom breadcrumbs based on email type
This commit is contained in:
Vlad
2018-03-11 12:51:37 -04:00
parent e7d7674e0e
commit 585f9bcc92
3 changed files with 150 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
assets/js/src/newsletter_editor/initializer.jsx Normal file
View File

@ -0,0 +1,75 @@
import Hooks from 'wp-js-hooks';
import Breadcrumb from 'newsletters/breadcrumb.jsx';
import MailPoet from 'mailpoet';
import React from 'react';
import ReactDOM from 'react-dom';
const editorContainer = document.getElementById('mailpoet_editor');
const getUrlParam = param => (location.search.split(`${param}=`)[1] || '').split('&')[0];
const renderBreadcrumb = (newsletterType) => {
const breadcrumbContainer = document.getElementById('mailpoet_editor_breadcrumb');
let breadcrumb = Hooks.applyFilters('mailpoet_newsletters_editor_breadcrumb', newsletterType, 'editor');
breadcrumb = (breadcrumb !== newsletterType) ? breadcrumb : <Breadcrumb step="editor" />;
if (breadcrumbContainer) {
ReactDOM.render(breadcrumb, breadcrumbContainer);
}
};
const initializeEditor = (config) => {
if (!editorContainer || !window.EditorApplication) return;
MailPoet.Modal.loading(true);
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'newsletters',
action: 'get',
data: {
id: getUrlParam('id'),
},
})
.always(() => MailPoet.Modal.loading(false))
.done((response) => {
const newsletter = response.data;
window.EditorApplication.start({
newsletter: newsletter,
config: config,
});
renderBreadcrumb(newsletter.type);
if (newsletter.status === 'sending' && newsletter.queue && newsletter.queue.status === null) {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'sending_queue',
action: 'pause',
data: {
newsletter_id: newsletter.id,
},
})
.done(() => MailPoet.Notice.success(MailPoet.I18n.t('newsletterIsPaused')))
.fail((pauseFailResponse) => {
if (pauseFailResponse.errors.length > 0) {
MailPoet.Notice.error(
pauseFailResponse.errors.map(error => error.message),
{ scroll: true, static: true }
);
}
});
}
})
.fail((response) => {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(error => error.message),
{ scroll: true, static: true }
);
}
});
};
Hooks.addAction('mailpoet_newsletters_editor_initialize', initializeEditor);

191
views/newsletter/editor.html
View File

@ -226,27 +226,21 @@
<% block content %>
<!-- Hidden heading for notices to appear under -->
<h1 style="display:none"><%= __('Newsletter Editor') %></h1>
<div id="mailpoet_editor">
<div id="mailpoet_editor_heading"></div>
<div class="mailpoet_breadcrumbs">
<%= __('Select type') %> &gt; <%= __('Template') %> &gt; <strong><%= __('Designer') %></strong> &gt; <%= __('Send') %>
</div>
<div class="clearfix"></div>
<div id="mailpoet_editor_main_wrapper">
<div id="mailpoet_editor_styles">
<div id="mailpoet_editor_heading"></div>
<div id="mailpoet_editor_breadcrumb" class="mailpoet_breadcrumbs"></div>
<div class="clearfix"></div>
<div id="mailpoet_editor_main_wrapper">
<div id="mailpoet_editor_styles"></div>
<div id="mailpoet_editor_content_container">
<div class="mailpoet_newsletter_wrapper">
<div id="mailpoet_editor_content"></div>
</div>
<div id="mailpoet_editor_content_container">
<div class="mailpoet_newsletter_wrapper">
<div id="mailpoet_editor_content"></div>
</div>
</div>
<div id="mailpoet_editor_sidebar"></div>
<div class="clear"></div>
</div>
<div id="mailpoet_editor_bottom">
</div>
<div id="mailpoet_editor_sidebar"></div>
<div class="clear"></div>
</div>
<div id="mailpoet_editor_bottom"></div>
<div class="mailpoet_layer_overlay" style="display:none;"></div>
@ -256,68 +250,68 @@
class="wp-core-ui search-panel-visible"
style="display: none"
>
<form id="wp-link" tabindex="-1">
<%= wp_nonce_field('internal-linking', '_ajax_linking_nonce', false) %>
<div id="link-modal-title">
<%= __('Insert/edit link') %>
<div id="wp-link-close" tabindex="0"></div>
<form id="wp-link" tabindex="-1">
<%= wp_nonce_field('internal-linking', '_ajax_linking_nonce', false) %>
<div id="link-modal-title">
<%= __('Insert/edit link') %>
<div id="wp-link-close" tabindex="0"></div>
</div>
<div id="link-selector">
<div id="link-options">
<div>
<label>
<span><%= __('Type') %></span>
<select id="url-type-field" name="urltype">
<option value="http://"><%= __('Link to a web page') %></option>
<option value="[viewInBrowserUrl]"><%= __('Browser version') %></option>
<option value="[unsubscribeUrl]"><%= __('Unsubcribe page') %></option>
<option value="[manageSubscriptionUrl]"><%= __('Manage your subscription page') %></option>
</select>
</label>
</div>
<div id="link-href-field">
<label><span><%= __('Link') %></span><input id="url-field" type="text" name="href" /></label>
</div>
<div class="mailpoet_hidden">
<label><span><%= __('Title') %></span><input id="link-title-field" type="text" name="linktitle" /></label>
</div>
<div class="link-target mailpoet_hidden">
<label><span>&nbsp;</span><input type="checkbox" id="link-target-checkbox" /> <%= __('Open link in a new window/tab') %></label>
</div>
</div>
<div id="link-selector">
<div id="link-options">
<div>
<label>
<span><%= __('Type') %></span>
<select id="url-type-field" name="urltype">
<option value="http://"><%= __('Link to a web page') %></option>
<option value="[viewInBrowserUrl]"><%= __('Browser version') %></option>
<option value="[unsubscribeUrl]"><%= __('Unsubcribe page') %></option>
<option value="[manageSubscriptionUrl]"><%= __('Manage your subscription page') %></option>
</select>
</label>
</div>
<div id="link-href-field">
<label><span><%= __('Link') %></span><input id="url-field" type="text" name="href" /></label>
</div>
<div class="mailpoet_hidden">
<label><span><%= __('Title') %></span><input id="link-title-field" type="text" name="linktitle" /></label>
</div>
<div class="link-target mailpoet_hidden">
<label><span>&nbsp;</span><input type="checkbox" id="link-target-checkbox" /> <%= __('Open link in a new window/tab') %></label>
<div id="search-panel">
<div class="link-search-wrapper">
<label>
<span class="search-label"><%= __('Search your content') %></span>
<input type="search" id="search-field" class="link-search-field" autocomplete="off" />
<span class="spinner"></span>
</label>
</div>
<div id="search-results" class="query-results">
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
<div id="search-panel">
<div class="link-search-wrapper">
<label>
<span class="search-label"><%= __('Search your content') %></span>
<input type="search" id="search-field" class="link-search-field" autocomplete="off" />
<span class="spinner"></span>
</label>
</div>
<div id="search-results" class="query-results">
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
<div id="most-recent-results" class="query-results">
<div class="query-notice"><em><%= __('No search term specified. Showing recent items.') %></em></div>
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
<div id="most-recent-results" class="query-results">
<div class="query-notice"><em><%= __('No search term specified. Showing recent items.') %></em></div>
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
</div>
<div class="submitbox">
<div id="wp-link-update">
<input type="submit" value="<%= __('Add Link') %>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
</div>
<div id="wp-link-cancel">
<a class="submitdelete deletion" href="#"><%= __('Cancel') %></a>
</div>
</div>
<div class="submitbox">
<div id="wp-link-update">
<input type="submit" value="<%= __('Add Link') %>" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
</div>
</form>
</div>
<div id="wp-link-cancel">
<a class="submitdelete deletion" href="#"><%= __('Cancel') %></a>
</div>
</div>
</form>
</div>
<% endblock %>
<% block translations %>
@ -352,6 +346,13 @@
'selectColor': _x('Select', 'select color'),
'cancelColorSelection': _x('Cancel', 'cancel color selection'),
'newsletterIsPaused': __('Email sending has been paused.'),
'selectType': __('Select type'),
'events': __('Events'),
'conditions': _x('Conditions', 'Configuration options for automatic email events'),
'template': __('Template'),
'designer': __('Designer'),
'send': __('Send'),
}) %>
<% endblock %>
@ -371,8 +372,6 @@
) %>
<script type="text/javascript">
MailPoet.Modal.loading(true);
var templates = {
styles: Handlebars.compile(
jQuery('#newsletter_editor_template_styles').html()
@ -1214,48 +1213,6 @@
) %>',
},
};
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'newsletters',
action: 'get',
data: {
id: "<%= params('id') | intval %>",
}
}).always(function() {
MailPoet.Modal.loading(false);
}).done(function(response) {
EditorApplication.start({
newsletter: response.data,
config: config,
});
var queue = response.data.queue;
if (response.data.status == 'sending' && queue && queue.status === null) {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'sending_queue',
action: 'pause',
data: {
newsletter_id: response.data.id
}
}).done(function(respose) {
MailPoet.Notice.success(MailPoet.I18n.t('newsletterIsPaused'))
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true, static: true }
);
}
});
}
}).fail(function(response) {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map(function(error) { return error.message; }),
{ scroll: true, static: true }
);
}
});
wp.hooks.doAction('mailpoet_newsletters_editor_initialize', config);
</script>
<% endblock %>

1
webpack.config.js
View File

@ -196,6 +196,7 @@ var adminConfig = {
'newsletters/types/automatic_emails/events_list.jsx',
'newsletters/types/automatic_emails/breadcrumb.jsx',
'newsletters/types/welcome/scheduling.jsx',
'newsletter_editor/initializer.jsx',
'history',
],
admin: [