Skip to content

Email templates. Show/hide tags section. Do not allow to add tag in to disabled input #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 27, 2019
Merged

Email templates. Show/hide tags section. Do not allow to add tag in to disabled input #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
786421a
EmailTemplateEdit js
Fedik Jan 27, 2019
140b08d
Show/hide tags section. Do not allow to add tag in to disabled input
Fedik Jan 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions administrator/components/com_mails/Helper/MailsHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ public static function mailtags($mail, $fieldname)
foreach ($mail->params['tags'] as $tag)
{
$html .= '<li class="list-group-item">'
. '<a href="#" onclick="Joomla.editors.instances[\'jform_' . $fieldname . '\'].replaceSelection(\'{' . strtoupper($tag) . '}\');'
. 'return false;" title="' . $tag . '">' . $tag . '</a>'
. '<a href="#" class="edit-action-add-tag" data-tag="{' . strtoupper($tag) . '}" data-target="' . $fieldname . '"'
. ' title="' . $tag . '">' . $tag . '</a>'
. '</li>';
}

Expand Down
40 changes: 16 additions & 24 deletions administrator/components/com_mails/tmpl/template/edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,32 +17,20 @@
use Joomla\CMS\Router\Route;
use Joomla\Component\Mails\Administrator\Helper\MailsHelper;

$app = Factory::getApplication();
$doc = Factory::getDocument();

HTMLHelper::_('behavior.formvalidator');
HTMLHelper::_('behavior.keepalive');
HTMLHelper::_('script', 'com_mails/admin-email-template-edit.min.js', ['version' => 'auto', 'relative' => true]);

$this->useCoreUI = true;

$app = Factory::getApplication();
$input = $app->input;
list($component, $sub_id) = explode('.', $this->master->template_id, 2);

$doc = Factory::getDocument();
$doc->addScriptDeclaration('
document.addEventListener(\'DOMContentLoaded\', () => {
var templateData = ' . json_encode($this->templateData) . ';
document.querySelectorAll(\'#item-form joomla-field-switcher\').forEach(function (el) {
el.addEventListener(\'joomla.switcher.on\', function() {
var el2 = document.getElementById(this.id.substring(0, this.id.length - 9));
el2.disabled = false;
el2.value = templateData[this.id.slice(6, -9)].translated;
});
el.addEventListener(\'joomla.switcher.off\', function() {
var el2 = document.getElementById(this.id.substring(0, this.id.length - 9));
el2.disabled = true;
el2.value = templateData[this.id.slice(6, -9)].master;
});
});
});');
$doc->addScriptOptions('com_mails', ['templateData' => $this->templateData]);

?>

<form action="<?php echo Route::_('index.php?option=com_mails&layout=edit&template_id=' . $this->item->template_id . '&language=' . $this->item->language); ?>" method="post" name="adminForm" id="item-form" class="form-validate">
Expand All @@ -68,28 +56,32 @@
</div>
</div>

<?php if ($this->form->getField('body')) : ?>
<?php if ($fieldBody = $this->form->getField('body')) : ?>
<div class="row">
<div class="col-md-9">
<?php echo $this->form->renderField('body'); ?>
</div>
<div class="col-md-3">
<?php echo $this->form->getField('body_switcher')->input; ?>
<h2><?php echo Text::_('COM_MAILS_FIELDSET_TAGS_LABEL'); ?></h2>
<?php echo MailsHelper::mailtags($this->master, 'body'); ?>
<div class="tags-container-body <?php echo $fieldBody->disabled ? 'hidden' : ''; ?>">
<h2><?php echo Text::_('COM_MAILS_FIELDSET_TAGS_LABEL'); ?></h2>
<?php echo MailsHelper::mailtags($this->master, 'body'); ?>
</div>
</div>
</div>
<?php endif; ?>

<?php if ($this->form->getField('htmlbody')) : ?>
<?php if ($fieldHtmlBody = $this->form->getField('htmlbody')) : ?>
<div class="row">
<div class="col-md-9">
<?php echo $this->form->renderField('htmlbody'); ?>
</div>
<div class="col-md-3">
<?php echo $this->form->getField('htmlbody_switcher')->input; ?>
<h2><?php echo Text::_('COM_MAILS_FIELDSET_TAGS_LABEL'); ?></h2>
<?php echo MailsHelper::mailtags($this->master, 'htmlbody'); ?>
<div class="tags-container-htmlbody <?php echo $fieldHtmlBody->disabled ? 'hidden' : ''; ?>">
<h2><?php echo Text::_('COM_MAILS_FIELDSET_TAGS_LABEL'); ?></h2>
<?php echo MailsHelper::mailtags($this->master, 'htmlbody'); ?>
</div>
</div>
</div>
<?php endif; ?>
Expand Down
156 changes: 156 additions & 0 deletions build/media_src/com_mails/js/admin-email-template-edit.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
/**
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

((document, Joomla) => {
'use strict';

class EmailTemplateEdit {

constructor(form, options) {
// Set elements
this.form = form;
this.inputSubject = this.form.querySelector('#jform_subject');
this.inputBody = this.form.querySelector('#jform_body');
this.inputHtmlBody = this.form.querySelector('#jform_htmlbody');

// Set options
this.templateData = options && options.templateData ? options.templateData : {};

// Add back reference
this.form.EmailTemplateEdit = this;
}

setBodyValue(value) {
if (this.inputBody.disabled) {
return;
}

if (Joomla.editors.instances[this.inputBody.id]) {
Joomla.editors.instances[this.inputBody.id].setValue(value);
} else {
this.inputBody.value = value;
}
}

setHtmlBodyValue(value) {
if (this.inputHtmlBody.disabled) {
return;
}

if (Joomla.editors.instances[this.inputHtmlBody.id]) {
Joomla.editors.instances[this.inputHtmlBody.id].setValue(value);
} else {
this.inputHtmlBody.value = value;
}
}

insertTag(tag, targetField) {
if (!tag) return false;

let input;
switch (targetField) {
case 'body':
input = this.inputBody;
break;
case 'htmlbody':
input = this.inputHtmlBody;
break;
default:
return false;
}

if (input.disabled) return false;

if (Joomla.editors.instances[input.id]) {
Joomla.editors.instances[input.id].replaceSelection(tag);
} else {
input.value += ' ' + tag;
}

return true;
}

bindListeners() {

// To enable editing of specific input
this.form.addEventListener('joomla.switcher.on', (event) => {
const type = event.target.id.slice(6, -9);
const inputValue = this.templateData[type] ? this.templateData[type].translated : '';
let tagsContainer;

switch (type) {
case 'subject':
this.inputSubject.disabled = false;
this.inputSubject.value = inputValue;
break;
case 'body':
this.inputBody.disabled = false;
this.setBodyValue(inputValue);

tagsContainer = this.form.querySelector('.tags-container-body');
break;
case 'htmlbody':
this.inputHtmlBody.disabled = false;
this.setHtmlBodyValue(inputValue);

tagsContainer = this.form.querySelector('.tags-container-htmlbody');
break;
}

// Show Tags section
if (tagsContainer) {
tagsContainer.classList.remove('hidden');
}
});

// To disable editing of specific input
this.form.addEventListener('joomla.switcher.off', (event) => {
const type = event.target.id.slice(6, -9);
const inputValue = this.templateData[type] ? this.templateData[type].master : '';
let tagsContainer;

switch (type) {
case 'subject':
this.inputSubject.disabled = true;
this.inputSubject.value = inputValue;
break;
case 'body':
this.setBodyValue(inputValue);
this.inputBody.disabled = true;

tagsContainer = this.form.querySelector('.tags-container-body');
break;
case 'htmlbody':
this.setHtmlBodyValue(inputValue);
this.inputHtmlBody.disabled = true;

tagsContainer = this.form.querySelector('.tags-container-htmlbody');
break;
}

// Hide Tags section
if (tagsContainer) {
tagsContainer.classList.add('hidden');
}
});

// Buttons for inserting a tag
this.form.querySelectorAll('.edit-action-add-tag').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
const el = event.target;
this.insertTag(el.dataset.tag, el.dataset.target)
});
})
}

}

document.addEventListener('DOMContentLoaded', () => {
const editor = new EmailTemplateEdit(document.getElementById('item-form'), Joomla.getOptions('com_mails'));
editor.bindListeners();
});

})(document, Joomla);