Skip to content
Snippets Groups Projects
Commit 858aadf2 authored by William Ranvaud's avatar William Ranvaud
Browse files

Refactoring js to remove jquery dependency

parent 24f04553
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
conditional_message.libraries.yml
+ 4
− 3
View file @ 858aadf2
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: {}
conditional_message.module
+ 8
− 4
View file @ 858aadf2
......@@ -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) {
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.
$form['#attached']['library'][] = 'conditional_message/conditional-message-edit-form';
$page['#attached']['library'][] = 'conditional_message/conditional-message-settings';
}
}
js/conditional_message.js
+ 106
− 101
View file @ 858aadf2
......@@ -2,39 +2,38 @@
* @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);
}
}
};
})(jQuery, Drupal, drupalSettings);
function queryEndpoint($, config, key, htmls) {
$.ajax({
url: Drupal.url("conditional_message_data_output"), success: function (result) {
(function (config, key, htmls) {
this.queryEndpoint(config, key, htmls);
}).call(this, config, key, htmls);
}
},
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;
}
......@@ -46,9 +45,10 @@ function queryEndpoint($, config, key, htmls) {
let cmrs = 'conditionalMessageReadStatus' + key;
let readStatus = localStorage.getItem(cmrs);
if (readStatus !== config[key].hash) {
check['session'] = false;
} else {
check['session'] = true;
localStorage.setItem(cmrs, config[key].hash);
} else {
check['session'] = false;
}
}
// Check close button with localStorage.
......@@ -73,7 +73,7 @@ function queryEndpoint($, config, key, htmls) {
check['type'] = false;
result[key].types.forEach(function (type) {
let typeClass = 'page-node-type-' + type;
if ($('body').hasClass(typeClass)) {
if (document.querySelector('body').classList.contains(typeClass)) {
check['type'] = true;
}
});
......@@ -86,12 +86,6 @@ function queryEndpoint($, config, key, htmls) {
&& check['type']
&& check['close']) {
// Display the close button only if option to close enabled.
let closeButton = '';
if (result[key].close) {
closeButton = '<span>&times;</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;
......@@ -100,26 +94,31 @@ function queryEndpoint($, config, key, htmls) {
config[key].color = '#' + config[key].color;
}
// 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;
// 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>&times;</span>';
}
htmls[key].innerHTML = config[key].message;
// 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'));
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'));
htmls[key].classList.add('conditional-message-top');
document.querySelector(config[key].target).prepend(htmls[key]);
}
// Close button.
$('.conditional-message span').on('click', function () {
let cmKey = $(this).parent().data('cm-key');
$(this).parent().remove();
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);
......@@ -127,5 +126,11 @@ function queryEndpoint($, config, key, htmls) {
});
}
}
});
};
request.onerror = function () {
console.log('Conditional Message might not be working as expected: connection error.');
}
request.send();
},
};
})(Drupal, drupalSettings);
js/conditional_message_edit_form.js
+ 27
− 27
View file @ 858aadf2
......@@ -2,7 +2,7 @@
* @file
*/
(function ($, Drupal) {
(function (Drupal) {
"use strict";
......@@ -10,28 +10,28 @@
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();
if (document.querySelector('#edit-conditions-role').checked) {
document.querySelector('#edit-role-options-wrapper').style.display = 'block';
}
else {
$('#edit-role-options-wrapper', context).hide();
document.querySelector('#edit-role-options-wrapper').style.display = 'none';
}
if ($('#edit-conditions-path', context).prop('checked')) {
$('#edit-path-options-wrapper', context).show();
if (document.querySelector('#edit-conditions-path').checked) {
document.querySelector('#edit-path-options-wrapper').style.display = 'block';
}
else {
$('#edit-path-options-wrapper', context).hide();
document.querySelector('#edit-path-options-wrapper').style.display = 'none';
}
if ($('#edit-conditions-content-type', context).prop('checked')) {
$('#edit-content-type-options-wrapper', context).show();
if (document.querySelector('#edit-conditions-content-type').checked) {
document.querySelector('#edit-content-type-options-wrapper').style.display = 'block';
}
else {
$('#edit-content-type-options-wrapper', context).hide();
document.querySelector('#edit-content-type-options-wrapper').style.display = 'none';
}
}
toggleVisibility();
$(document, context).on('click', toggleVisibility);
document.addEventListener('click', toggleVisibility);
}
}
})(jQuery, Drupal);
})(Drupal);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment