forked from projects/fipamo
ro
1e37580869
dropped in js from the old site to begin the process of wiring up the API, but this time around, scripts will be served directly in browswer rather than being transpiled through NPM/Babel, eliminating the need for NPM. also scripting will new modularized and served specifically for the requirements of the page loading it. no more front loading everything. only script that is needed for that page will be retrieved. if no scripting is needed, none will be loaded. The only casualty so far has been syntax highlighting due to prismjs still being a common js module, but either this will be replaced with another library or a custom syntax enginge will be created at a later date
110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
import anime from '../vendor/anime.es.js';
|
|
const notifcation = document.querySelector('.notify-message');
|
|
const notify = document.getElementById('notify-message');
|
|
const responseText = document.querySelector('.response-text');
|
|
const notifyText = document.querySelector('.notify-text');
|
|
const notifyIcons = document.querySelector('.notify-icons');
|
|
//const notifyProgress = document.getElementById('notify-progress');
|
|
const iconGood = document.querySelector('.notify-good');
|
|
const iconNotGood = document.querySelector('.notify-notgood');
|
|
const iconWorking = document.querySelector('.notify-working');
|
|
|
|
export default class Notfications {
|
|
//--------------------------
|
|
// constructor
|
|
//--------------------------
|
|
constructor() {}
|
|
//--------------------------
|
|
// methods
|
|
//--------------------------
|
|
|
|
alert(text, status) {
|
|
iconWorking.style.display = 'none';
|
|
iconGood.style.display = 'none';
|
|
iconNotGood.style.display = 'none';
|
|
|
|
var color = '';
|
|
responseText.innerHTML = text;
|
|
if (status !== null) {
|
|
if (status) {
|
|
color = '#32cd32';
|
|
iconWorking.style.display = 'none';
|
|
iconGood.style.display = 'block';
|
|
} else {
|
|
color = '#F64747';
|
|
iconWorking.style.display = 'none';
|
|
iconNotGood.style.display = 'block';
|
|
}
|
|
} else {
|
|
color = '#200317';
|
|
iconWorking.style.display = 'block';
|
|
}
|
|
|
|
new anime({
|
|
targets: document.querySelector('.top-nav'),
|
|
rotateX: '180deg',
|
|
easing: 'easeOutQuint'
|
|
});
|
|
|
|
new anime({
|
|
targets: document.querySelector('.notify'),
|
|
rotateX: '10deg',
|
|
easing: 'easeOutQuint',
|
|
complete: () => {
|
|
new anime({
|
|
targets: notifyIcons,
|
|
width: 39,
|
|
opacity: 1,
|
|
easing: 'easeInQuint',
|
|
duration: 300
|
|
});
|
|
|
|
new anime({
|
|
targets: notifyText,
|
|
backgroundColor: color,
|
|
opacity: 1,
|
|
easing: 'easeInOutQuad',
|
|
duration: 400,
|
|
complete: () => {
|
|
setTimeout(() => {
|
|
if (status !== null) {
|
|
anime({
|
|
targets: notifyText,
|
|
backgroundColor: color,
|
|
opacity: 0,
|
|
easing: 'easeInOutQuad',
|
|
duration: 400
|
|
});
|
|
|
|
anime({
|
|
targets: notifyIcons,
|
|
width: 0,
|
|
opacity: 0,
|
|
easing: 'easeOutQuint',
|
|
duration: 350
|
|
});
|
|
|
|
new anime({
|
|
targets: document.querySelector('.top-nav'),
|
|
rotateX: '0deg',
|
|
easing: 'easeOutQuint'
|
|
});
|
|
|
|
new anime({
|
|
targets: document.querySelector('.notify'),
|
|
rotateX: '180deg',
|
|
easing: 'easeOutQuint'
|
|
});
|
|
}
|
|
}, 2500);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
//--------------------------
|
|
// event handlers
|
|
//--------------------------
|
|
}
|