diff --git a/conditional_message.libraries.yml b/conditional_message.libraries.yml
index aa3cb63feea2407139b76897a430e9f608bf741e..0d0942708c8e7bfa436bb1d9fd5f5ad44b6e8bd4 100644
--- a/conditional_message.libraries.yml
+++ b/conditional_message.libraries.yml
@@ -1,12 +1,13 @@
conditional-message:
- version: 1.x
css:
theme:
css/conditional_message.css: {}
js:
js/conditional_message.js: {}
- js/conditional_message_edit_form.js: {}
dependencies:
- - core/jquery
- core/drupal
- core/drupalSettings
+
+conditional-message-settings:
+ js:
+ js/conditional_message_edit_form.js: {}
diff --git a/conditional_message.module b/conditional_message.module
index bbac6051d353aede87e2317239e8785a1a54ce54..e2fb2c892b83f7f6653e99be36a611eb7b5b2210 100644
--- a/conditional_message.module
+++ b/conditional_message.module
@@ -79,9 +79,13 @@ function conditional_message_page_attachments(array &$page) {
}
/**
- * Implements hook_form_FORM_ID_alter().
+ * Implements hook_page_attachments_alter().
*/
-function conditional_message_form_conditional_message_edit_form_alter(&$form, FormStateInterface $form_state, $form_id) {
- // Add JS to show or hide fields according to selected conditions.
- $form['#attached']['library'][] = 'conditional_message/conditional-message-edit-form';
+function conditional_message_page_attachments_alter(array &$page) {
+ // Get the current path and compare.
+ $path = $current_path = \Drupal::service('path.current')->getPath();
+ if (substr($path, 0, 34) == '/admin/content/conditional-message') {
+ // Add JS to show or hide fields according to selected conditions.
+ $page['#attached']['library'][] = 'conditional_message/conditional-message-settings';
+ }
}
diff --git a/js/conditional_message.js b/js/conditional_message.js
index 000716c8d38f9fdcf1905c550b1bae405f5343e9..ee64b0ba73ad7379f46769afee8ff1e5756c546d 100644
--- a/js/conditional_message.js
+++ b/js/conditional_message.js
@@ -2,130 +2,135 @@
* @file
*/
-(function ($, Drupal, drupalSettings) {
+(function (Drupal, drupalSettings) {
"use strict";
Drupal.behaviors.conditional_message = {
attach: function (context, settings) {
// Run only once (not on ajax calls).
- if (context != document) {
+ if (context != document || drupalSettings.conditional_message === undefined) {
return;
}
// Shorthand for the configurations.
let config = drupalSettings.conditional_message;
let htmls = [];
- // TODO rewrite this in pure JS to avoid jQuery dependency.
for (let key in config) {
// Bail if user already closed the message before.
let cmuc = 'conditionalMessageUserClosed' + key;
if (localStorage.getItem(cmuc) == config[key].hash) {
continue;
}
- (function ($, config, key, htmls) {
- queryEndpoint($, config, key, htmls);
- }).call(this, $, config, key, htmls);
+ (function (config, key, htmls) {
+ this.queryEndpoint(config, key, htmls);
+ }).call(this, config, key, htmls);
}
- }
- };
-})(jQuery, Drupal, drupalSettings);
-
-
-function queryEndpoint($, config, key, htmls) {
- $.ajax({
- url: Drupal.url("conditional_message_data_output"), success: function (result) {
- // Do not proceed if key not defined. Node deleted?
- if (result[key] == undefined) {
- return;
- }
- // Checks to see if the message should be displayed. Config = backend logic, Result = frontend logic.
- let check = [];
- // Check and set sessions with localStorage.
- check['session'] = true;
- if (config[key].conditions.includes('session')) {
- let cmrs = 'conditionalMessageReadStatus' + key;
- let readStatus = localStorage.getItem(cmrs);
- if (readStatus !== config[key].hash) {
- check['session'] = false;
- } else {
- localStorage.setItem(cmrs, config[key].hash);
- }
- }
- // Check close button with localStorage.
- check['close'] = true;
- if (config[key].conditions.includes('close') && result[key].close) {
- let cmuc = 'conditionalMessageUserClosed' + key;
- let closeHash = localStorage.getItem(cmuc);
- if (closeHash == config[key].hash) {
- check['close'] = false;
- }
- }
- // Paths conditions.
- check['path'] = true;
- if (config[key].conditions.includes('path')
- && result[key].paths.indexOf(window.location.pathname.substr(config[key].base_path.length - 1)) < 0) {
+ },
+ queryEndpoint: function (config, key, htmls) {
+ const request = new XMLHttpRequest();
+ request.open('GET', Drupal.url("conditional_message_data_output"), true);
+ request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+ request.onload = function () {
+ if (this.status>= 200 && this.status < 400) {
+ // Do not proceed if key not defined. Node deleted?
+ const result = JSON.parse(this.responseText);
+ if (result[key] == undefined) {
+ return;
+ }
+ // Checks to see if the message should be displayed. Config = backend logic, Result = frontend logic.
+ let check = [];
+ // Check and set sessions with localStorage.
+ check['session'] = true;
+ if (config[key].conditions.includes('session')) {
+ let cmrs = 'conditionalMessageReadStatus' + key;
+ let readStatus = localStorage.getItem(cmrs);
+ if (readStatus !== config[key].hash) {
+ check['session'] = true;
+ localStorage.setItem(cmrs, config[key].hash);
+ } else {
+ check['session'] = false;
+ }
+ }
+ // Check close button with localStorage.
+ check['close'] = true;
+ if (config[key].conditions.includes('close') && result[key].close) {
+ let cmuc = 'conditionalMessageUserClosed' + key;
+ let closeHash = localStorage.getItem(cmuc);
+ if (closeHash == config[key].hash) {
+ check['close'] = false;
+ }
+ }
+ // Paths conditions.
+ check['path'] = true;
+ if (config[key].conditions.includes('path')
+ && result[key].paths.indexOf(window.location.pathname.substr(config[key].base_path.length - 1)) < 0) {
- check['path'] = false;
- }
- // Content type conditions.
- check['type'] = true;
- if (config[key].conditions.includes('content_type') && result[key].hasOwnProperty('types')) {
- check['type'] = false;
- result[key].types.forEach(function (type) {
- let typeClass = 'page-node-type-' + type;
- if ($('body').hasClass(typeClass)) {
- check['type'] = true;
+ check['path'] = false;
}
- });
- }
- // Show message if all checks pass.
- if (config[key].status
- && result[key].display
- && check['session']
- && check['path']
- && check['type']
- && check['close']) {
+ // Content type conditions.
+ check['type'] = true;
+ if (config[key].conditions.includes('content_type') && result[key].hasOwnProperty('types')) {
+ check['type'] = false;
+ result[key].types.forEach(function (type) {
+ let typeClass = 'page-node-type-' + type;
+ if (document.querySelector('body').classList.contains(typeClass)) {
+ check['type'] = true;
+ }
+ });
+ }
+ // Show message if all checks pass.
+ if (config[key].status
+ && result[key].display
+ && check['session']
+ && check['path']
+ && check['type']
+ && check['close']) {
- // Display the close button only if option to close enabled.
- let closeButton = '';
- if (result[key].close) {
- closeButton = '<span>×</span>';
- }
+ // Prepare color, either color name or HEX. If HEX color, add hash.
+ if (/^([0-9A-F]{3}){1,2}$/i.test(config[key].bg_color)) {
+ config[key].bg_color = '#' + config[key].bg_color;
+ }
+ if (/^([0-9A-F]{3}){1,2}$/i.test(config[key].color)) {
+ config[key].color = '#' + config[key].color;
+ }
- // Prepare color, either color name or HEX. If HEX color, add hash.
- if (/^([0-9A-F]{3}){1,2}$/i.test(config[key].bg_color)) {
- config[key].bg_color = '#' + config[key].bg_color;
- }
- if (/^([0-9A-F]{3}){1,2}$/i.test(config[key].color)) {
- config[key].color = '#' + config[key].color;
- }
+ // Build the message div element.
+ htmls[key] = document.createElement('div');
+ htmls[key].setAttribute('class', 'conditional-message');
+ htmls[key].setAttribute('data-cm-key', key);
+ htmls[key].setAttribute('style', 'background-color:' + config[key].bg_color + '; color:' + config[key].color);
+ if (result[key].close) {
+ config[key].message += '<span>×</span>';
+ }
+ htmls[key].innerHTML = config[key].message;
- // Build the message HTML.
- let html = '<div class="conditional-message" data-cm-key="'
- + key +'" style="background-color:'
- + config[key].bg_color + '; color:'
- + config[key].color + ';">' + closeButton
- + config[key].message + '</div>';
- htmls[key] = html;
- // Place the message in the page top or bottom.
- switch (config[key].position) {
- case 'bottom':
- $(config[key].target).append($(htmls[key]).addClass('conditional-message-bottom'));
- break;
+ // Place the message in the page top or bottom.
+ switch (config[key].position) {
+ case 'bottom':
+ htmls[key].classList.add('conditional-message-bottom');
+ document.querySelector(config[key].target).append(htmls[key]);
+ break;
- default:
- $(config[key].target).prepend($(htmls[key]).addClass('conditional-message-top'));
- }
- // Close button.
- $('.conditional-message span').on('click', function () {
- let cmKey = $(this).parent().data('cm-key');
- $(this).parent().remove();
- let cmuc = 'conditionalMessageUserClosed' + cmKey;
- if (result[key].close) {
- localStorage.setItem(cmuc, config[key].hash);
+ default:
+ htmls[key].classList.add('conditional-message-top');
+ document.querySelector(config[key].target).prepend(htmls[key]);
+ }
+ // Close button.
+ document.querySelector('.conditional-message span').addEventListener('click', function () {
+ let cmKey = this.parentElement.getAttribute('data-cm-key');
+ this.parentElement.remove();
+ let cmuc = 'conditionalMessageUserClosed' + cmKey;
+ if (result[key].close) {
+ localStorage.setItem(cmuc, config[key].hash);
+ }
+ });
}
- });
+ }
+ };
+ request.onerror = function () {
+ console.log('Conditional Message might not be working as expected: connection error.');
}
- }
- });
-}
+ request.send();
+ },
+ };
+})(Drupal, drupalSettings);
diff --git a/js/conditional_message_edit_form.js b/js/conditional_message_edit_form.js
index d9cb71c666253b8580f65141c37dcc87d450c82c..b722ba1828b155a9600076a23cab5a09344bb4f3 100644
--- a/js/conditional_message_edit_form.js
+++ b/js/conditional_message_edit_form.js
@@ -2,36 +2,36 @@
* @file
*/
-(function ($, Drupal) {
+(function (Drupal) {
"use strict";
Drupal.behaviors.conditional_message_edit_form = {
- attach: function (context, settings) {
- // Show or hide options according to selected conditions.
- function toggleVisibility() {
- if ($('#edit-conditions-role', context).prop('checked')) {
- $('#edit-role-options-wrapper', context).show();
- }
- else {
- $('#edit-role-options-wrapper', context).hide();
- }
- if ($('#edit-conditions-path', context).prop('checked')) {
- $('#edit-path-options-wrapper', context).show();
- }
- else {
- $('#edit-path-options-wrapper', context).hide();
- }
- if ($('#edit-conditions-content-type', context).prop('checked')) {
- $('#edit-content-type-options-wrapper', context).show();
- }
- else {
- $('#edit-content-type-options-wrapper', context).hide();
- }
- }
- toggleVisibility();
-
- $(document, context).on('click', toggleVisibility);
+ attach: function (context, settings) {
+ // Show or hide options according to selected conditions.
+ function toggleVisibility() {
+ if (document.querySelector('#edit-conditions-role').checked) {
+ document.querySelector('#edit-role-options-wrapper').style.display = 'block';
+ }
+ else {
+ document.querySelector('#edit-role-options-wrapper').style.display = 'none';
+ }
+ if (document.querySelector('#edit-conditions-path').checked) {
+ document.querySelector('#edit-path-options-wrapper').style.display = 'block';
+ }
+ else {
+ document.querySelector('#edit-path-options-wrapper').style.display = 'none';
+ }
+ if (document.querySelector('#edit-conditions-content-type').checked) {
+ document.querySelector('#edit-content-type-options-wrapper').style.display = 'block';
+ }
+ else {
+ document.querySelector('#edit-content-type-options-wrapper').style.display = 'none';
+ }
}
+ toggleVisibility();
+
+ document.addEventListener('click', toggleVisibility);
+ }
}
-})(jQuery, Drupal);
+})(Drupal);