436 lines
15 KiB
JavaScript
436 lines
15 KiB
JavaScript
/**
|
|
* @package Conditional Content
|
|
* @version 5.2.2
|
|
*
|
|
* @author Peter van Westen <info@regularlabs.com>
|
|
* @link https://regularlabs.com
|
|
* @copyright Copyright © 2024 Regular Labs All Rights Reserved
|
|
* @license GNU General Public License version 2 or later
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
window.RegularLabs = window.RegularLabs || {};
|
|
|
|
window.RegularLabs.ConditionalContentPopup = window.RegularLabs.ConditionalContentPopup || {
|
|
form : null,
|
|
options : {},
|
|
tag_characters: {},
|
|
group : null,
|
|
tag_type : '',
|
|
|
|
init: function() {
|
|
if ( ! parent.RegularLabs.ConditionalContentButton) {
|
|
document.querySelector('body').innerHTML = '<div class="alert alert-error">This page cannot function on its own.</div>';
|
|
return;
|
|
}
|
|
|
|
this.options = Joomla.getOptions ? Joomla.getOptions('rl_conditionalcontent_button', {}) : Joomla.optionsStorage.rl_conditionalcontent_button || {};
|
|
this.options.editor_name;
|
|
|
|
if ( ! this.options.editor_name) {
|
|
document.querySelector('body').innerHTML = 'No editor name found.';
|
|
return;
|
|
}
|
|
|
|
this.form = document.querySelector('[name="conditionalcontentForm"]');
|
|
|
|
this.tag_characters.start = this.options.tag_characters[0];
|
|
this.tag_characters.end = this.options.tag_characters[1];
|
|
|
|
let previousDOM = this.form.innerHTML;
|
|
|
|
setInterval(() => {
|
|
const currentDOM = this.form.innerHTML;
|
|
|
|
if (currentDOM === previousDOM) {
|
|
return;
|
|
}
|
|
|
|
this.updatePreview();
|
|
}, 250);
|
|
},
|
|
|
|
setInline: function() {
|
|
let use_inline = this.form.use_inline;
|
|
let has_conditions = this.form.has_conditions;
|
|
let rules_summary_content = document.querySelector('#rules_summary_content');
|
|
let rules_summary_message = document.querySelector('#rules_summary_message');
|
|
|
|
use_inline.value = 1;
|
|
has_conditions.value = 0;
|
|
rules_summary_content.innerHTML = '';
|
|
|
|
use_inline.dispatchEvent(new Event('change'));
|
|
has_conditions.dispatchEvent(new Event('change'));
|
|
|
|
rules_summary_message.classList.add('hidden');
|
|
},
|
|
|
|
insertText: function() {
|
|
parent.RegularLabs.ConditionalContentButton.insertText(this.options.editor_name);
|
|
},
|
|
|
|
updatePreview: function() {
|
|
const self = this;
|
|
|
|
const preview_code = document.querySelector('#preview_code');
|
|
const preview_spinner = document.querySelector('#preview_spinner');
|
|
|
|
Regular.addClass(preview_code, 'hidden');
|
|
Regular.removeClass(preview_spinner, 'hidden');
|
|
|
|
const code = this.generateCode(true);
|
|
preview_code.innerHTML = code;
|
|
|
|
parent.RegularLabs.ConditionalContentButton.setCode(this.generateCode());
|
|
|
|
Regular.addClass(preview_spinner, 'hidden');
|
|
|
|
if (code) {
|
|
Regular.removeClass(preview_code, 'hidden');
|
|
}
|
|
},
|
|
|
|
generateCode: function(preview = false) {
|
|
const self = this;
|
|
|
|
const form = document.querySelector('[name="conditionalcontentForm"]');
|
|
const form_data = getFormData();
|
|
const tag = form_data.tag_type === 'hide' ? this.options.tag_hide : this.options.tag_show;
|
|
|
|
const attributes = getAttributes();
|
|
let content = getContent(preview);
|
|
let alternative_content = getAlternativeContent(preview);
|
|
|
|
if (alternative_content.length > 0) {
|
|
content += wrapTag(tag + '-else', preview) + alternative_content;
|
|
}
|
|
|
|
return wrapTag(tag + ' ' + attributes, preview) + content + wrapTag('/' + tag, preview);
|
|
|
|
function wrapTag(string, use_style = false) {
|
|
const wrapped = self.tag_characters.start + string.trim() + self.tag_characters.end;
|
|
|
|
if ( ! use_style) {
|
|
return wrapped;
|
|
}
|
|
|
|
return '<code class="rl-code rl-pre-wrap">' + wrapped + '</code>';
|
|
}
|
|
|
|
function getContent(name = 'content', trim_long = false) {
|
|
return getContentString('content', trim_long);
|
|
}
|
|
|
|
function getAlternativeContent(trim_long = false) {
|
|
return getContentString('content_alternative', trim_long);
|
|
}
|
|
|
|
function getContentString(name = 'content', trim_long = false) {
|
|
let content = form_data[name];
|
|
|
|
if (content === '<p></p>') {
|
|
content = '';
|
|
}
|
|
|
|
if (preview && content.length > 100) {
|
|
content = '...';
|
|
}
|
|
|
|
return content;
|
|
}
|
|
|
|
function getCondition() {
|
|
if (
|
|
! form_data.has_conditions
|
|
|| ! form_data.condition_id
|
|
|| ! parseInt(form_data.has_conditions)
|
|
|| ! parseInt(form_data.condition_id)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
let type = form_data.condition_type;
|
|
|
|
if ( ! type) {
|
|
type = 'id';
|
|
}
|
|
|
|
return form_data['condition_' + type];
|
|
}
|
|
|
|
function getAttributes() {
|
|
let attributes = {};
|
|
const condition = getCondition();
|
|
|
|
if (condition) {
|
|
attributes.condition = condition;
|
|
|
|
return convertToAttributes();
|
|
}
|
|
|
|
let types = {
|
|
'menuitems' : 'selection',
|
|
'homepage' : 'simple',
|
|
'contentpagetypes': 'selection',
|
|
'categories' : 'selection',
|
|
'date' : 'date',
|
|
'seasons' : 'selection',
|
|
'months' : 'selection',
|
|
'days' : 'selection',
|
|
'time' : 'time',
|
|
'articles' : 'selection',
|
|
'featured' : 'simple',
|
|
'article_status' : 'selection',
|
|
'article_date' : 'date',
|
|
'article_authors' : 'selection',
|
|
'accesslevels' : 'selection',
|
|
'usergroups' : 'selection',
|
|
'languages' : 'selection',
|
|
'devices' : 'selection',
|
|
'ips' : 'selection',
|
|
'continents' : 'selection',
|
|
'countries' : 'selection',
|
|
'postalcodes' : 'selection',
|
|
'tags' : 'selection',
|
|
'components' : 'selection',
|
|
'templates' : 'selection',
|
|
'urls' : 'selection',
|
|
'php' : 'selection',
|
|
};
|
|
|
|
Object.entries(types).forEach(([key, type]) => {
|
|
const include = form_data[key];
|
|
|
|
if ( ! include) {
|
|
return;
|
|
}
|
|
|
|
switch (type) {
|
|
case 'selection':
|
|
addAttributeWithSelection(key, include);
|
|
break;
|
|
case 'date':
|
|
addAttributeDate(key, include);
|
|
break;
|
|
case 'time':
|
|
addAttributeTime(key, include);
|
|
break;
|
|
case 'simple':
|
|
addAttributeSimple(key, include);
|
|
break;
|
|
}
|
|
});
|
|
|
|
setHasMultiple();
|
|
|
|
if (Object.entries(attributes).length > 1 && form_data.matching_method === 'any') {
|
|
prependAttributeValue('matching_method', 'ANY');
|
|
}
|
|
|
|
return convertToAttributes();
|
|
|
|
function setHasMultiple() {
|
|
let attribute_count = Object.entries(attributes).length;
|
|
|
|
form.has_multiple_rules.value = attribute_count > 1 ? 1 : 0;
|
|
form.has_multiple_rules.dispatchEvent(new Event('change'));
|
|
}
|
|
|
|
function prependAttributeValue(key, value) {
|
|
key = key.replace('_', '-');
|
|
|
|
attributes = {[key]: value, ...attributes};
|
|
}
|
|
|
|
function addAttributeValue(key, value) {
|
|
key = key.replace('_', '-');
|
|
|
|
attributes[key] = value;
|
|
}
|
|
|
|
function addAttributeSimple(key, include) {
|
|
const value = (include === 'exclude' ? 'false' : 'true');
|
|
|
|
addAttributeValue(key, value);
|
|
}
|
|
|
|
function addAttributeTime(key, include) {
|
|
const comparison = form_data[key + '__comparison'];
|
|
|
|
if (comparison !== 'between') {
|
|
const time = form_data[key + '__time'];
|
|
if ( ! time) {
|
|
return;
|
|
}
|
|
|
|
const operator = (
|
|
(comparison === 'before' && include === 'include')
|
|
|| (comparison === 'after' && include === 'exclude')
|
|
) ? '<' : '>';
|
|
|
|
addAttributeValue(key, operator + time);
|
|
|
|
return;
|
|
}
|
|
|
|
const from = form_data[key + '__from'];
|
|
const to = form_data[key + '__to'];
|
|
|
|
if ( ! from && ! to) {
|
|
return;
|
|
}
|
|
|
|
if ( ! from) {
|
|
const operator = include === 'exclude' ? '>' : '<';
|
|
|
|
addAttributeValue(key, operator + to);
|
|
|
|
return;
|
|
}
|
|
|
|
if ( ! to) {
|
|
const operator = include === 'exclude' ? '<' : '>';
|
|
|
|
addAttributeValue(key, operator + from);
|
|
|
|
return;
|
|
}
|
|
|
|
const value = (include === 'exclude' ? '!' : '') + from + ' to ' + to;
|
|
|
|
addAttributeValue(key, value);
|
|
}
|
|
|
|
function addAttributeDate(key, include) {
|
|
const type = form_data[key + '__type'] ? form_data[key + '__type'] : key;
|
|
const comparison = form_data[key + '__comparison'];
|
|
|
|
if (comparison !== 'between') {
|
|
const date = form_data[key + '__date'];
|
|
if ( ! date) {
|
|
return;
|
|
}
|
|
|
|
const operator = (
|
|
(comparison === 'before' && include === 'include')
|
|
|| (comparison === 'after' && include === 'exclude')
|
|
) ? '<' : '>';
|
|
|
|
addAttributeValue(type, operator + date);
|
|
|
|
return;
|
|
}
|
|
|
|
const from = form_data[key + '__from'];
|
|
const to = form_data[key + '__to'];
|
|
|
|
if ( ! from && ! to) {
|
|
return;
|
|
}
|
|
|
|
if ( ! from) {
|
|
const operator = include === 'exclude' ? '>' : '<';
|
|
|
|
addAttributeValue(type, operator + to);
|
|
|
|
return;
|
|
}
|
|
|
|
if ( ! to) {
|
|
const operator = include === 'exclude' ? '<' : '>';
|
|
|
|
addAttributeValue(type, operator + from);
|
|
|
|
return;
|
|
}
|
|
|
|
const value = (include === 'exclude' ? '!' : '') + from + ' to ' + to;
|
|
|
|
addAttributeValue(type, value);
|
|
}
|
|
|
|
function addAttributeWithSelection(key, include) {
|
|
let selection = form_data[key + '__selection'];
|
|
|
|
if (selection === undefined) {
|
|
selection = form_data[key + '__selection[]'];
|
|
}
|
|
|
|
if (selection === undefined) {
|
|
selection = '';
|
|
}
|
|
|
|
if (Array.isArray(selection)) {
|
|
selection = selection.join(',');
|
|
}
|
|
|
|
const value = (include === 'exclude' ? '!' : '') + selection;
|
|
|
|
addAttributeValue(key, value);
|
|
}
|
|
|
|
function convertToAttributes() {
|
|
const parts = [];
|
|
|
|
for (let key in attributes) {
|
|
const value = attributes[key];
|
|
|
|
if (typeof value !== 'object') {
|
|
parts.push(key + '="' + value + '"');
|
|
continue;
|
|
}
|
|
|
|
parts.push(Object.entries(value).map((key_value) => key_value[0] + '="' + key_value[1] + '"').join(' '));
|
|
}
|
|
|
|
return parts.join(' ');
|
|
}
|
|
}
|
|
|
|
function getFormData() {
|
|
const form_data = new FormData(form);
|
|
|
|
const object = {};
|
|
|
|
form_data.forEach((value, key) => {
|
|
// Reflect.has in favor of: object.hasOwnProperty(key)
|
|
if (Reflect.has(object, key)) {
|
|
if ( ! Array.isArray(object[key])) {
|
|
object[key] = [object[key]];
|
|
}
|
|
|
|
object[key].push(value);
|
|
return;
|
|
}
|
|
|
|
const field = document.querySelector('[name="' + key + '"]');
|
|
|
|
if (field.parentNode.nodeName === 'JOOMLA-EDITOR-CODEMIRROR') {
|
|
let editor = Joomla.editors.instances[key];
|
|
|
|
if (editor) {
|
|
object[key] = editor.getValue();
|
|
return;
|
|
}
|
|
|
|
editor = field.parentNode.querySelector('.CodeMirror');
|
|
|
|
if (editor) {
|
|
object[key] = editor.CodeMirror.getValue();
|
|
return;
|
|
}
|
|
}
|
|
|
|
object[key] = value;
|
|
|
|
});
|
|
|
|
return object;
|
|
}
|
|
},
|
|
};
|
|
})();
|