Skip to content
Snippets Groups Projects
Commit f6750822 authored by baldwinlouie's avatar baldwinlouie Committed by Yas Naoi
Browse files

Issue #3215720 by baldwinlouie, yas: Add ability to override JS/CSS from page_load_progress module

parent 758ebc96
No related branches found
No related tags found
No related merge requests found
......@@ -243,6 +243,13 @@ function cloud_library_info_alter(&$libraries, $extension) {
$libraries['select2']['css']['theme'][trim($config->get('cloud_custom_select2_css_url'))] = [];
}
}
// Reroute the page_load_progress JS/CSS if the module exists.
if ($extension === 'page_load_progress' && \Drupal::moduleHandler()->moduleExists('page_load_progress')) {
$new_path = '/' . drupal_get_path('module', 'cloud');
unset($libraries['page_load_progress']['js'], $libraries['page_load_progress']['css']);
$libraries['page_load_progress']['js'][$new_path . '/js/page_load_progress.js'] = [];
$libraries['page_load_progress']['css']['theme'][$new_path . '/css/page_load_progress.theme.css'] = [];
}
}
/**
......
.page-load-progress-lock-screen {
background-color: #000;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9998;
opacity: 0.7;
}
.page-load-progress-lock-screen.page-load-progress-hidden {
display: none;
}
.page-load-progress-throbber {
background-image: url('../images/Blocks-1s-200px.svg');
background-repeat: no-repeat;
height: 200px;
left: 50%;
position: fixed;
top: 50%;
width: 200px;
margin-left: -100px;
margin-top: -100px;
z-index: 9999;
}
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<rect x="18" y="18" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0s" calcMode="discrete"></animate>
</rect><rect x="40" y="18" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.125s" calcMode="discrete"></animate>
</rect><rect x="62" y="18" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.25s" calcMode="discrete"></animate>
</rect><rect x="18" y="40" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.875s" calcMode="discrete"></animate>
</rect><rect x="62" y="40" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.375s" calcMode="discrete"></animate>
</rect><rect x="18" y="62" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.75s" calcMode="discrete"></animate>
</rect><rect x="40" y="62" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.625s" calcMode="discrete"></animate>
</rect><rect x="62" y="62" width="20" height="20" fill="#3d9ad3">
<animate attributeName="fill" values="#39444e;#3d9ad3;#3d9ad3" keyTimes="0;0.125;1" dur="1s" repeatCount="indefinite" begin="0.5s" calcMode="discrete"></animate>
</rect>
<!-- [ldio] generated by https://loading.io/ --></svg>
/**
* @file
* Defines the behavior of the Page Load Progress module.
*
* Page Load Progress sets a screen lock showing a spinner when the user clicks
* on an element that triggers a time consuming task.
*/
(function ($, Drupal) {
'use strict';
Drupal.behaviors.page_load_progress = {
attach: function (context, settings) {
let delay = Number(settings.page_load_progress.delay);
let elements = String(settings.page_load_progress.elements).split(',');
let internal_links = Boolean(settings.page_load_progress.internal_links);
let esc_key = Boolean(settings.page_load_progress.esc_key);
let screen_lock = '<div class="page-load-progress-lock-screen page-load-progress-hidden">\n\
<div class="page-load-progress-throbber">\
</div>\n\
</div>';
let body = $('body', context, settings);
// Add the screen lock behavior for each configured element.
for (let i in elements) {
// Prevents from getting in the way of HTML 5 form validation.
$(elements[i]).parents('form').submit(function () {
setTimeout(lockScreen, delay);
});
}
// Add the throbber for internal links only if requested in the UI.
// Also if the link has a btn-wait class.
if (internal_links) {
$('a[href]').on('click', function (evnt) {
// Lock the screen only if the link is Refresh.
if ($(this).attr('href').indexOf('/update') == -1) {
return;
}
// Do not lock the screen if the link is being opened in a new tab.
// Source: https://stackoverflow.com/a/20087506/9637665.
if (evnt.ctrlKey || evnt.shiftKey || evnt.metaKey || (evnt.button && evnt.button == 1)) {
return;
}
// Do not lock the screen if the link is within a modal.
if ($(this).parents('.modal').length > 0) {
return;
}
setTimeout(lockScreen, delay);
});
}
// Allows ESC key to kill the throbber.
if (esc_key) {
document.onkeydown = function (evt) {
evt = evt || window.event;
let isEscape = ('key' in evt)
// "Escape" is standard in modern browsers. 'Esc' is primarily for
// Internet Explorer 9 and Firefox 36 and earlier.
? (evt.key === 'Escape' || evt.key === 'Esc')
// keyCode is getting deprecated. Keeping it for legacy reasons.
: evt.keyCode === 27;
if (isEscape) {
$('.page-load-progress-lock-screen').remove();
}
};
}
/**
* Lock screen method.
*
* This method locks the screen by displaying the screen_lock HTML DOM
* part as a full page overlay.
*/
let lockScreen = function () {
body.append(screen_lock);
body.css({
'overflow' : 'hidden'
});
$('.page-load-progress-lock-screen').fadeIn('slow');
}
}
};
})(jQuery, Drupal);
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment