diff --git a/packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php b/packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php new file mode 100644 index 00000000..54bb7d24 --- /dev/null +++ b/packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php @@ -0,0 +1,11 @@ +
+ + + + +
diff --git a/public/service-worker.js b/public/service-worker.js index 19392d54..e8165f4d 100644 --- a/public/service-worker.js +++ b/public/service-worker.js @@ -1 +1,23 @@ -const applicationName="fmd-starter",assets=["/","/index.html","/css/frontend.css","/js/frontend.js"];self.addEventListener("install",(e=>{e.waitUntil(caches.open("fmd-starter").then((e=>{e.addAll(assets)})))})),self.addEventListener("fetch",(e=>{e.respondWith(caches.match(e.request).then((t=>t||fetch(e.request))))})); +const applicationName = "fmd-starter"; +const assets = [ + "/", + "/index.html", + "/css/frontend.css", + "/js/frontend.js", +]; + +self.addEventListener("install", installEvent => { + installEvent.waitUntil( + caches.open(applicationName).then(cache => { + cache.addAll(assets) + }), + ); +}); + +self.addEventListener("fetch", fetchEvent => { + fetchEvent.respondWith( + caches.match(fetchEvent.request).then(res => { + return res || fetch(fetchEvent.request) + }), + ); +}); diff --git a/resources/js/components/splash-screen.js b/resources/js/components/splash-screen.js new file mode 100644 index 00000000..5830b0a8 --- /dev/null +++ b/resources/js/components/splash-screen.js @@ -0,0 +1,39 @@ +function AnimateSplashScreen(hastFirstLoadSplashScreen) { + const splashScreen = document.querySelector('.splash-screen') + const svg = splashScreen.querySelector('svg') + svg.classList.add("d-block") + if (hastFirstLoadSplashScreen === true) { + if (!sessionStorage.isVisited) { + sessionStorage.isVisited = true; + setTimeout(firstLoadSplashScreen(splashScreen), 100) + return + } + } + reloadSplashScreen(splashScreen) +} +function reloadSplashScreen(splashScreen) { + document.addEventListener("readystatechange", function () { + if (document.readyState === "complete") { + splashScreen.addEventListener("transitionend", function () { + splashScreen.classList.add('d-none'); + }) + splashScreen.classList.add('splash-screen-hidden'); + } + }); +} + +function firstLoadSplashScreen(splashScreen) { + splashScreen.classList.add('splash-screen-first-load') + splashScreen.addEventListener("animationend", function () { + splashScreen.classList.add('splash-screen-hidden'); + splashScreen.addEventListener("transitionend", function () { + splashScreen.classList.add('d-none'); + }) + }); +} + +window.addEventListener('DOMContentLoaded', function () { + + AnimateSplashScreen(true) + +}); diff --git a/resources/js/frontend-imports.js b/resources/js/frontend-imports.js index 7ee41503..9d3af244 100644 --- a/resources/js/frontend-imports.js +++ b/resources/js/frontend-imports.js @@ -32,6 +32,7 @@ module.exports = (function () { // 'resources/js/components/lax.js', 'resources/js/components/smooth-scroll.js', 'resources/js/components/light-dark-controller.js', + // 'resources/js/components/splash-screen.js', // Global usages 'resources/js/frontend.js', diff --git a/resources/sass/components/_splash-screen.scss b/resources/sass/components/_splash-screen.scss new file mode 100644 index 00000000..3e83fc98 --- /dev/null +++ b/resources/sass/components/_splash-screen.scss @@ -0,0 +1,47 @@ +.splash-screen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: $zindex-toast + 1; + background: $primary; + display: flex; + opacity: 1; + justify-content: center; + align-items: center; + transition: opacity ease-in-out 0.5s; + + svg { + display: none; + } + + &-hidden { + opacity: 0; + } + + &-first-load { + path { + fill: rgba($black, 0); + stroke-dasharray: 1000; + stroke-dashoffset: 1000; + stroke: rgba($black, 20); + animation: draw-logo 3s linear forwards 0.75s, fill-logo .5s forwards 2s; + } + } + + @keyframes draw-logo { + to { + stroke-dashoffset: 0; + } + } + + @keyframes fill-logo { + to { + fill: rgba($black, 1); + stroke: rgba($black, 0); + } + } +} + + diff --git a/resources/sass/frontend.scss b/resources/sass/frontend.scss index d942f545..efdf101c 100755 --- a/resources/sass/frontend.scss +++ b/resources/sass/frontend.scss @@ -78,6 +78,7 @@ @import "components/navbar"; @import "components/videos"; @import "components/light-dark-toggle"; +//@import "components/splash-screen"; @import "styles"; // 5.3 Partial`s styles