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

Merge pull request #1732 from mailpoet/new-modal

Browse Source 
New modal [MAILPOET-1510]
This commit is contained in:
M. Shull
2019-01-25 08:51:35 -05:00
committed by GitHub
parent d2bfd75605 7ee2a7cd88
commit 29ef3da9f7
10 changed files with 141 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
assets/js/src/modal.js
View File

@@ -4,6 +4,11 @@ define('modal', ['mailpoet', 'jquery'],
'use strict';
var MailPoet = mp;
var closeModalImage =
'<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg">' +
'<path d="M21.454 1.546L1.546 21.454M1.546 1.546L21.454 21.454" stroke-width="3" stroke-linecap="round" />' +
'</svg>';
/** *************************************************************************
MailPoet Modal:
@@ -82,7 +87,7 @@ define('modal', ['mailpoet', 'jquery'],
overlay: '<div id="mailpoet_modal_overlay" class="mailpoet_modal_overlay" style="display:none;"></div>',
popup: '<div id="mailpoet_popup" class="mailpoet_popup" tabindex="-1">' +
'<div class="mailpoet_popup_wrapper">' +
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close">' + closeModalImage + '</a>' +
'<div id="mailpoet_popup_title" class="mailpoet_popup_title"><h2></h2></div>' +
'<div class="mailpoet_popup_body clearfix"></div>' +
'</div>' +
@@ -93,7 +98,7 @@ define('modal', ['mailpoet', 'jquery'],
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading mailpoet_modal_loading_3"></div>' +
'</div>',
panel: '<div id="mailpoet_panel" class="mailpoet_panel">' +
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close">' + closeModalImage + '</a>' +
'<div class="mailpoet_panel_wrapper" tabindex="-1">' +
'<div class="mailpoet_panel_body clearfix"></div>' +
'</div>' +
@@ -142,6 +147,8 @@ define('modal', ['mailpoet', 'jquery'],
jQuery('#mailpoet_modal_overlay')
.append(modal(this.options));
// set title
jQuery('#mailpoet_popup')
.toggleClass('mailpoet_popup_has_title', Boolean(this.options.title));
jQuery('#mailpoet_popup_title h2')
.html(this.options.title);
} else if (this.options.type === 'panel') {
@@ -312,14 +319,21 @@ define('modal', ['mailpoet', 'jquery'],
switch (this.options.type) {
case 'popup':
// set popup dimensions
jQuery('#mailpoet_popup').css({
width: this.options.width,
height: this.options.height
});
// set popup wrapper height
jQuery('#mailpoet_popup_wrapper').css({
height: this.options.height
});
if (this.options.width && this.options.width !== 'auto') {
jQuery('#mailpoet_popup').css({
width: this.options.width
});
}
if (this.options.height && this.options.height !== 'auto') {
jQuery('#mailpoet_popup_wrapper').css({
height: this.options.height
});
jQuery('#mailpoet_popup').css({
height: this.options.height
});
}
if (this.options.minWidth) {
jQuery('#mailpoet_popup').css({ minWidth: this.options.minWidth });
}
@@ -398,6 +412,9 @@ define('modal', ['mailpoet', 'jquery'],
this.focus();
}
// reset any possible scroll from previous modal
jQuery('#mailpoet_modal_overlay').scrollTop(0);
// set popup as opened
this.opened = true;
@@ -441,10 +458,12 @@ define('modal', ['mailpoet', 'jquery'],
},
showOverlay: function () {
jQuery('#mailpoet_modal_overlay').show();
jQuery('body').addClass('mailpoet_modal_opened');
return this;
},
hideOverlay: function () {
jQuery('#mailpoet_modal_overlay').hide();
jQuery('body').removeClass('mailpoet_modal_opened');
return this;
},
popup: function (opts) {

6
assets/js/src/newsletter_editor/components/sidebar.js
View File

@@ -270,13 +270,12 @@ define([
});
this.previewView.render();
this.previewView.$el.css('height', '100%');
MailPoet.Modal.popup({
template: '',
element: this.previewView.$el,
width: '95%',
height: '94%',
minWidth: '95%',
height: '100%',
title: MailPoet.I18n.t('newsletterPreview'),
onCancel: function () {
this.previewView.destroy();
@@ -351,6 +350,7 @@ define([
});
Module.NewsletterPreviewView = Marionette.View.extend({
className: 'mailpoet_browser_preview_wrapper',
getTemplate: function () { return window.templates.newsletterPreview; },
events: function () {
return {

3
assets/js/src/newsletter_editor/tutorial.jsx
View File

@@ -10,7 +10,8 @@ const displayTutorial = () => {
return;
}
MailPoet.Modal.popup({
template: `<div class="mailpoet_drag_and_drop_tutorial"><h2>${MailPoet.I18n.t('tutorialVideoTitle')}</h2><video style="height:640px;" src="${window.config.dragDemoUrl}" controls autoplay></video></div>`,
title: MailPoet.I18n.t('tutorialVideoTitle'),
template: `<div class="mailpoet_drag_and_drop_tutorial"><video style="height:640px;" src="${window.config.dragDemoUrl}" controls autoplay></video></div>`,
onCancel: () => {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,