Commit 57b573ed authored by Thomas Löffler's avatar Thomas Löffler
Browse files

Finish spinner, add separate JS for re-usage and use spinning TYPO3 logo

parent 88a2a243
This diff is collapsed.
const spinner = {};
const loadingDiv = $('#loadingDiv');
spinner.show = function () {
loadingDiv.show();
}
spinner.hide = function () {
loadingDiv.hide();
}
module.exports = spinner;
const gravatar = require('gravatar');
const spinner = require('../Helper/Spinner');
const NotifyMessage = require('./NotifyMessage');
const FlyOutAjaxLogin = function (props) {
FlyOutAjaxLogin.settings = props;
......@@ -80,19 +81,17 @@ FlyOutAjaxLogin.prototype.initLoginLogoutTemplate = function () {
const wrapper = document.createElement('div');
wrapper.classList = 'd-flex flex-row m-auto';
wrapper.innerHTML = response;
aim.innerHTML = '<div id="loadingDiv"><i class="fas fa-circle-notch fa-spin fa-4x fa-fw"></i></div>';
aim.innerHTML = '';
aim.appendChild(wrapper);
const loginForm = $('#login-form');
const logoutForm = $('#logout-form');
const loginObject = new FlyOutAjaxLogin();
const loadingDiv = $('#loadingDiv');
loadingDiv.hide();
$(document).ajaxStart(
function () {
loadingDiv.show();
spinner.show();
}).ajaxStop(function () {
loadingDiv.hide();
spinner.hide();
});
const email = $('#gravatar-image').data('email');
......
#loadingDiv {
position: fixed;
width: 100%;
height: 100%;
opacity: 50%;
z-index: 5000;
background: rgba(255, 255, 255, 1);
.loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -2em;
margin-top: -2em;
background: rgba(255, 255, 255, 1);
img {
width: 4em;
height: 4em;
animation: rotation 2s infinite linear;
}
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
......@@ -845,14 +845,3 @@
}
}
}
#loadingDiv {
position: absolute;
width: 100%;
height: 100%;
opacity: 50%;
z-index: 2000;
background-color: white;
padding-top: 25%;
padding-left: 47%;
}
......@@ -94,3 +94,4 @@
@import "components/featuresHeader";
@import "components/jumbotron";
@import "components/membership-popup";
@import "components/spinner";
......@@ -7,6 +7,11 @@
<!-- Fallback to consume the defined space on loading and no component support -->
<div style="display: block; height: 44px; background-color: #fff;"></div>
</typo3-universe>
<div id="loadingDiv" style="display: none;">
<div class="loader">
<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
</div>
</div>
<div class="page-container mx-auto">
<f:render section="Header" partial="Page/Header" arguments="{_all}" />
<main>
......
......@@ -7,7 +7,12 @@
<!-- Fallback to consume the defined space on loading and no component support -->
<div style="display: block; height: 44px; background-color: #fff;"></div>
</typo3-universe>
<div class="page-container page-template-404 mx-auto">
<div id="loadingDiv" style="display: none;">
<div class="loader">
<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
</div>
</div>
<div class="page-container page-template-404 mx-auto">
<f:render section="Header" partial="Page/Header" arguments="{_all}" />
<main>
<div class="container page-content">
......
......@@ -7,7 +7,12 @@
<!-- Fallback to consume the defined space on loading and no component support -->
<div style="display: block; height: 44px; background-color: #fff;"></div>
</typo3-universe>
<f:render section="Header" partial="Page/Header" arguments="{_all}"/>
<div id="loadingDiv" style="display: none;">
<div class="loader">
<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
</div>
</div>
<f:render section="Header" partial="Page/Header" arguments="{_all}"/>
<main>
<f:render section="Slider" partial="Page/Slider" arguments="{_all}"/>
</main>
......
......@@ -7,7 +7,12 @@
<!-- Fallback to consume the defined space on loading and no component support -->
<div style="display: block; height: 44px; background-color: #fff;"></div>
</typo3-universe>
<div class="page-container mx-auto">
<div id="loadingDiv" style="display: none;">
<div class="loader">
<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
</div>
</div>
<div class="page-container mx-auto">
<f:render section="Header" partial="Page/Header" arguments="{_all}" />
<main>
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}"/>
......
......@@ -7,7 +7,12 @@
<!-- Fallback to consume the defined space on loading and no component support -->
<div style="display: block; height: 44px; background-color: #fff;"></div>
</typo3-universe>
<div class="page-container mx-auto">
<div id="loadingDiv" style="display: none;">
<div class="loader">
<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
</div>
</div>
<div class="page-container mx-auto">
<f:render section="Header" partial="Page/Header" arguments="{_all}" />
<main>
<div class="container">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment