Change preview pane JS to preview letters as well as emails

This commit is contained in:
Katie Smith
2019-02-19 10:44:51 +00:00
parent 83c10149bd
commit 44781e3b69
3 changed files with 6 additions and 7 deletions
@@ -13,9 +13,8 @@
const $paneWrapper = $('<div class="column-full"></div>'); const $paneWrapper = $('<div class="column-full"></div>');
const $form = $('form'); const $form = $('form');
const $previewPane = $('<iframe src="/_email?' + const previewType = $form.data('previewType');
buildQueryString(['branding_style', branding_style]) + const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview"></iframe>`);
'" class="branding-preview"></iframe>');
function buildQueryString () { function buildQueryString () {
return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&'); return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&');
@@ -26,12 +25,12 @@
if ($target.attr('name') == 'branding_style') { if ($target.attr('name') == 'branding_style') {
branding_style = $target.val(); branding_style = $target.val();
} }
$previewPane.attr('src', '/_email?' + buildQueryString(['branding_style', branding_style])); $previewPane.attr('src', `/_${previewType}?${buildQueryString(['branding_style', branding_style])}`);
} }
$paneWrapper.append($previewPane); $paneWrapper.append($previewPane);
$form.find('.grid-row').eq(0).prepend($paneWrapper); $form.find('.grid-row').eq(0).prepend($paneWrapper);
$form.attr('action', location.pathname.replace(/set-email-branding$/, 'preview-email-branding')); $form.attr('action', location.pathname.replace(new RegExp(`set-${previewType}-branding$`), `preview-${previewType}-branding`));
$form.find('button[type="submit"]').text('Save'); $form.find('button[type="submit"]').text('Save');
$('fieldset').on('change', 'input[name="branding_style"]', setPreviewPane); $('fieldset').on('change', 'input[name="branding_style"]', setPreviewPane);
@@ -11,7 +11,7 @@
{% block maincolumn_content %} {% block maincolumn_content %}
<h1 class="heading-large">Set email branding</h1> <h1 class="heading-large">Set email branding</h1>
{% call form_wrapper() %} {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
<div class="grid-row"> <div class="grid-row">
<div class="column-full preview-pane"> <div class="column-full preview-pane">
</div> </div>
+1 -1
View File
@@ -74,7 +74,7 @@ gulp.task('javascripts', () => gulp
paths.src + 'javascripts/errorTracking.js', paths.src + 'javascripts/errorTracking.js',
paths.src + 'javascripts/preventDuplicateFormSubmissions.js', paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
paths.src + 'javascripts/fullscreenTable.js', paths.src + 'javascripts/fullscreenTable.js',
paths.src + 'javascripts/emailPreviewPane.js', paths.src + 'javascripts/previewPane.js',
paths.src + 'javascripts/colourPreview.js', paths.src + 'javascripts/colourPreview.js',
paths.src + 'javascripts/templateFolderForm.js', paths.src + 'javascripts/templateFolderForm.js',
paths.src + 'javascripts/main.js' paths.src + 'javascripts/main.js'