From ce1169b6f4ab43b72c75b1c4ec6edf123f6de032 Mon Sep 17 00:00:00 2001 From: gustavo Date: Mon, 13 Nov 2023 07:52:22 -0300 Subject: [PATCH 1/2] =?UTF-8?q?feat(SplashScreen):=20Cria=20uma=20splash?= =?UTF-8?q?=20screen=20padr=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/components/splash-screen.blade.php | 11 +++++ .../src/resources/views/html/master.blade.php | 2 + resources/js/components/splash-screen.js | 37 +++++++++++++++ resources/js/frontend-imports.js | 1 + resources/sass/components/_splash-screen.scss | 47 +++++++++++++++++++ resources/sass/frontend.scss | 1 + 6 files changed, 99 insertions(+) create mode 100644 packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php create mode 100644 resources/js/components/splash-screen.js create mode 100644 resources/sass/components/_splash-screen.scss 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..50a19460 --- /dev/null +++ b/packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php @@ -0,0 +1,11 @@ +
+ + + + +
diff --git a/packages/agenciafmd/frontend/src/resources/views/html/master.blade.php b/packages/agenciafmd/frontend/src/resources/views/html/master.blade.php index b8129c90..2d095c65 100755 --- a/packages/agenciafmd/frontend/src/resources/views/html/master.blade.php +++ b/packages/agenciafmd/frontend/src/resources/views/html/master.blade.php @@ -87,6 +87,8 @@ function a() { @stack('footer') +{{-- --}} + diff --git a/resources/js/components/splash-screen.js b/resources/js/components/splash-screen.js new file mode 100644 index 00000000..5faba802 --- /dev/null +++ b/resources/js/components/splash-screen.js @@ -0,0 +1,37 @@ +function AnimateSplashScreen() { + const splashScreen = document.querySelector('.splash-screen') + const svg = splashScreen.querySelector('svg') + svg.classList.add("d-block") + 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() + +}); 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..c26c29b8 --- /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 { + #logoPath { + 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 From 34f7886f3ca2f86142f9688e78bb7d3169c697d1 Mon Sep 17 00:00:00 2001 From: gustavo Date: Tue, 14 Nov 2023 09:01:04 -0300 Subject: [PATCH 2/2] chore(SplashScreen): Faz ajuste no js do splash screen --- .../views/components/splash-screen.blade.php | 2 +- .../src/resources/views/html/master.blade.php | 2 -- public/service-worker.js | 24 ++++++++++++++++++- resources/js/components/splash-screen.js | 14 ++++++----- resources/sass/components/_splash-screen.scss | 2 +- 5 files changed, 33 insertions(+), 11 deletions(-) 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 index 50a19460..54bb7d24 100644 --- a/packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php +++ b/packages/agenciafmd/frontend/src/resources/views/components/splash-screen.blade.php @@ -1,7 +1,7 @@
+ - --}} - 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 index 5faba802..5830b0a8 100644 --- a/resources/js/components/splash-screen.js +++ b/resources/js/components/splash-screen.js @@ -1,11 +1,13 @@ -function AnimateSplashScreen() { +function AnimateSplashScreen(hastFirstLoadSplashScreen) { const splashScreen = document.querySelector('.splash-screen') const svg = splashScreen.querySelector('svg') svg.classList.add("d-block") - if (!sessionStorage.isVisited) { - sessionStorage.isVisited = true; - setTimeout(firstLoadSplashScreen(splashScreen), 100) - return + if (hastFirstLoadSplashScreen === true) { + if (!sessionStorage.isVisited) { + sessionStorage.isVisited = true; + setTimeout(firstLoadSplashScreen(splashScreen), 100) + return + } } reloadSplashScreen(splashScreen) } @@ -32,6 +34,6 @@ function firstLoadSplashScreen(splashScreen) { window.addEventListener('DOMContentLoaded', function () { - AnimateSplashScreen() + AnimateSplashScreen(true) }); diff --git a/resources/sass/components/_splash-screen.scss b/resources/sass/components/_splash-screen.scss index c26c29b8..3e83fc98 100644 --- a/resources/sass/components/_splash-screen.scss +++ b/resources/sass/components/_splash-screen.scss @@ -21,7 +21,7 @@ } &-first-load { - #logoPath { + path { fill: rgba($black, 0); stroke-dasharray: 1000; stroke-dashoffset: 1000;