Skip to content
Snippets Groups Projects

Issue #3379977: Do not reload the page after the frontend editing form is submitted

Merged Issue #3379977: Do not reload the page after the frontend editing form is submitted
issue/frontend_editing-3379977:3379977-do-not-reload into 1.x
Merged Artem Dmitriiev requested to merge issue/frontend_editing-3379977:3379977-do-not-reload into 1.x
Compare
and
9 files
+ 552
− 174
Compare changes
  • Side-by-side
  • Inline
Files
9
js/frontend_editing.js
+ 154
− 146
@@ -4,6 +4,139 @@
(function (Drupal) {
// Global variables
const editingActionClass = 'frontend-editing__action';
const storageId = 'frontendEditingToggle';
const enabledValue = 'enabled';
const disabledValue = 'disabled';
const disabledClass = 'frontent_editing_toggle--disabled';
const hiddenClass = 'frontend-editing__action--hidden';
const toggleText = Drupal.t('Toggle frontend editing');
const toggleId = 'frontent_editing_toggle';
// Function to check if frontend editing is available.
const frontendEditingAvailable = function () {
return document.getElementsByClassName(editingActionClass).length > 0;
};
// Function to check, that this behavior only modifies the DOM once.
const frontendEditingNeedsSetup = function () {
let body = document.body;
if (body) {
const setupClass = "frontend-editing-processed";
if (body.classList.contains(setupClass)) {
return false;
}
else {
body.classList.add(setupClass);
return true;
}
}
else {
return false
}
}
// Function to check local storage for a toggle setting.
const isToggled = function () {
let toggleValue = localStorage.getItem(storageId);
// If the value is not set, we assume it is enabled
if (!toggleValue) {
localStorage.setItem(storageId, enabledValue);
return true;
}
if (toggleValue == enabledValue) {
return true;
}
else {
return false;
}
}
// Function to check if admin theme Gin or Seven is used.
const isGin = function () {
return !!document.querySelector('[class*="gin--"]');
}
// Function to show or hide all frontend editing icons.
const showEditingIcons = function (enable) {
let elements = document.getElementsByClassName(editingActionClass);
for (let i = 0; i < elements.length; i++) {
element = elements[i];
if (enable) {
element.classList.remove(hiddenClass);
}
else {
element.classList.add(hiddenClass);
}
}
}
// Callback for click function in toolbar.
const toolbarClick = function (e) {
e.preventDefault();
let linkElement = e.currentTarget.firstElementChild;
if (linkElement.classList.contains(disabledClass)) {
// Toggle is disabled, enable it now
localStorage.setItem(storageId, enabledValue);
linkElement.classList.remove(disabledClass);
showEditingIcons(true);
}
else {
// Toggle is enabled, disable it now
localStorage.setItem(storageId, disabledValue);
linkElement.classList.add(disabledClass);
showEditingIcons(false);
}
}
// Function to add button to admin toolbar in Gin theme.
const addButtonGin = function (enabled) {
// Set up surrounding div
let toggleLi = document.createElement('li');
toggleLi.className = 'menu-item menu-item--toggle-frontend-editing';
// Add inner link
let toggleLink = document.createElement('a');
toggleLink.id = toggleId;
toggleLink.setAttribute('aria-label', toggleText);
if (enabled) {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--gin';
showEditingIcons(true);
}
else {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--gin ' + disabledClass;
}
toggleLi.appendChild(toggleLink);
// Add event listener
toggleLi.addEventListener('click', toolbarClick);
// Add to toolbar
const toolbarUl = document.querySelector('[class*="gin--"] #toolbar-item-administration-tray .toolbar-menu');
toolbarUl.appendChild(toggleLi);
}
// Function to add button to admin toolbar in Seven theme.
const addButtonSeven = function (enabled) {
// Set up surrounding div
let toggleDiv = document.createElement('div');
toggleDiv.className = 'toolbar-tab toolbar-tab--toggle-frontend-editing';
// Add inner link
let toggleLink = document.createElement('a');
toggleLink.id = toggleId;
toggleLink.setAttribute('aria-label', toggleText);
if (enabled) {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--seven';
showEditingIcons(true);
}
else {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--seven ' + disabledClass;
}
toggleDiv.appendChild(toggleLink);
// Add event listener.
toggleDiv.addEventListener('click', toolbarClick);
// Add to toolbar.
document.querySelector('.toolbar-horizontal #toolbar-bar').prepend(toggleDiv);
}
/**
* Implements ajax form behaviour.
*/
@@ -72,7 +205,11 @@
else {
containerElement.classList.add(setupClass);
}
const frontendEditingVisible = isToggled();
actionsElement.childNodes.forEach(function (editingElement, i) {
if (frontendEditingVisible) {
editingElement.classList.remove('frontend-editing__action--hidden');
}
// Add hover function to editing link.
editingElement.addEventListener('mouseover', function () {
containerElement.classList.add('frontend-editing--outline');
@@ -85,7 +222,6 @@
}
});
});
}
};
@@ -117,160 +253,32 @@
*/
Drupal.AjaxCommands.prototype.closeSidePanel = function (ajax, response, status) {
if (status === 'success') {
// Reload the page.
window.parent.location.reload();
if (response.reload === 'true') {
// Reload the page.
window.parent.location.reload();
}
// Remove iframe while we wait for the reload.
window.parent.document.getElementById('editing-container').remove();
}
}
/**
* Ajax command frontendEditingInsert.
*
* @param ajax
* @param response
* @param status
*/
Drupal.AjaxCommands.prototype.frontendEditingInsert = function (ajax, response, status) {
if (status === 'success') {
window.parent.postMessage(response, window.location.origin);
}
}
// Client side toggle for frontend editing.
Drupal.behaviors.toggleFrontendEditing = {
attach: function (context, settings) {
// Global variables.
const editingActionClass = 'frontend-editing__action';
const storageId = 'frontendEditingToggle';
const enabledValue = 'enabled';
const disabledValue = 'disabled';
const disabledClass = 'frontent_editing_toggle--disabled';
const hiddenClass = 'frontend-editing__action--hidden';
const toggleText = Drupal.t('Toggle frontend editing');
const toggleId = 'frontent_editing_toggle';
// Function to check if frontend editing is available.
const frontendEditingAvailable = function () {
if (document.getElementsByClassName(editingActionClass).length > 0) {
return true;
}
else {
return false;
}
};
// Function to check, that this behavior only modifies the DOM once.
const frontendEditingNeedsSetup = function () {
let body = document.body;
if (body) {
const setupClass = "frontend-editing-processed";
if (body.classList.contains(setupClass)) {
return false;
}
else {
body.classList.add(setupClass);
return true;
}
}
else {
return false
}
}
// Function to check local storage for a toggle setting.
const isToggled = function () {
let toggleValue = localStorage.getItem(storageId);
// If the value is not set, we assume it is enabled
if (!toggleValue) {
localStorage.setItem(storageId, enabledValue);
return true;
}
if (toggleValue == enabledValue) {
return true;
}
else {
return false;
}
}
// Function to check if admin theme Gin or Seven is used.
const isGin = function () {
if (document.querySelector('[class*="gin--"]')) {
return true;
}
else {
return false;
}
}
// Function to show or hide all frontend editing icons.
const showEditingIcons = function (enable) {
let elements = document.getElementsByClassName(editingActionClass);
for (let i = 0; i < elements.length; i++) {
element = elements[i];
if (enable) {
element.classList.remove(hiddenClass);
}
else {
element.classList.add(hiddenClass);
}
}
}
// Callback for click function in toolbar.
const toolbarClick = function (e) {
e.preventDefault();
let linkElement = e.currentTarget.firstElementChild;
if (linkElement.classList.contains(disabledClass)) {
// Toggle is disabled, enable it now
localStorage.setItem(storageId, enabledValue);
linkElement.classList.remove(disabledClass);
showEditingIcons(true);
}
else {
// Toggle is enabled, disable it now
localStorage.setItem(storageId, disabledValue);
linkElement.classList.add(disabledClass);
showEditingIcons(false);
}
}
// Function to add button to admin toolbar in Gin theme.
const addButtonGin = function (enabled) {
// Set up surrounding div
let toggleLi = document.createElement('li');
toggleLi.className = 'menu-item menu-item--toggle-frontend-editing';
// Add inner link
let toggleLink = document.createElement('a');
toggleLink.id = toggleId;
toggleLink.setAttribute('aria-label', toggleText);
if (enabled) {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--gin';
showEditingIcons(true);
}
else {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--gin ' + disabledClass;
}
toggleLi.appendChild(toggleLink);
// Add event listener
toggleLi.addEventListener('click', toolbarClick);
// Add to toolbar
const toolbarUl = document.querySelector('[class*="gin--"] #toolbar-item-administration-tray .toolbar-menu');
toolbarUl.appendChild(toggleLi);
}
// Function to add button to admin toolbar in Seven theme.
const addButtonSeven = function (enabled) {
// Set up surrounding div
let toggleDiv = document.createElement('div');
toggleDiv.className = 'toolbar-tab toolbar-tab--toggle-frontend-editing';
// Add inner link
let toggleLink = document.createElement('a');
toggleLink.id = toggleId;
toggleLink.setAttribute('aria-label', toggleText);
if (enabled) {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--seven';
showEditingIcons(true);
}
else {
toggleLink.className = 'frontent_editing_toggle frontent_editing_toggle--seven ' + disabledClass;
}
toggleDiv.appendChild(toggleLink);
// Add event listener.
toggleDiv.addEventListener('click', toolbarClick);
// Add to toolbar.
document.querySelector('.toolbar-horizontal #toolbar-bar').prepend(toggleDiv);
}
// Setup frontend editing toggle.
if (frontendEditingNeedsSetup() && frontendEditingAvailable()) {
// Check if frontend editing is toggeled.