Kezdőlap Felfedezés Súgó
Bejelentkezés
les-amis-reunis
/
la-visitor
2
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Latest version.

Cixo Develop 8 hónapja
szülő
007de88168
commit
83f3c7e699
8 módosított fájl, 150 hozzáadás és 3 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 8 0
      index.html
  2. 42 0
      scripts/interface/loading-screen.js
  3. 17 0
      scripts/loader.js
  4. 27 2
      scripts/selector/mode-selector.js
  5. 9 0
      scripts/shelf/shelf-view.js
  6. 2 1
      theme/style/loader.css
  7. 43 0
      theme/style/loading-screen.css
  8. 2 0
      theme/style/mode-selector.css

+ 8 - 0
index.html
Fájl Megtekintése 

@@ -28,5 +28,13 @@
 
 
     <body>
 
         <div class="app"></div>
 
+        
+        <div class="loading">
 
+            <div class="animation">
 
+              <span class="material-symbols-outlined">
 
+                cached
 
+              </span>
 
+            </div>
 
+        </div>
 
     </body>
 
 </html>

+ 42 - 0
scripts/interface/loading-screen.js
Fájl Megtekintése 

@@ -0,0 +1,42 @@
 
+import { types } from "assets/types.js";
 
+
 
+class loading_screen {
 
+    #cover;
 
+    static #self;
 
+
 
+    constructor(cover = undefined) {
 
+        if (loading_screen.#self instanceof loading_screen) {
 
+            return loading_screen.#self;
 
+        }
 
+        
+        loading_screen.#self = this;
 
+
 
+        types.check_html_element(cover);
 
+
 
+        this.#cover = cover;
 
+        this.#prepare();
 
+    }
 
+
 
+    get cover() {
 
+        return this.#cover;
 
+    }
 
+
 
+    #prepare() {
 
+        this.cover.style.transition = "opacity 0.5s ease-in-out";
 
+    }
 
+
 
+    show() {
 
+        this.cover.style.display = "";
 
+        this.cover.style.opacity = "1";
 
+    }
 
+
 
+    hide() {
 
+        this.cover.style.opacity = "0";
 
+
 
+        setTimeout(() => { 
+            this.cover.style.display = "none";
 
+        }, 500);
 
+    }
 
+}
 
+
 
+export { loading_screen };

+ 17 - 0
scripts/loader.js
Fájl Megtekintése 

@@ -1,5 +1,6 @@
 
 import { mode_selector } from "selector/mode-selector.js";
 
 import { color_mode } from "settings/color-mode.js";
 
+import { loading_screen } from "interface/loading-screen.js";
 
 
 document.addEventListener("DOMContentLoaded", () => {
 
     const app = document.querySelector(".app");
 
@@ -8,5 +9,21 @@ document.addEventListener("DOMContentLoaded", () => {
 
     color_setting.update();
 
 
     const selector = new mode_selector(app);
 
+
 
+    selector.on_space = () => {
 
+        alert("Opening space");
 
+    };
 
+
 
+    selector.on_shelf = () => {
 
+        alert("Shelf opened.");
 
+    };
 
+
 
     selector.show();
 
+
 
+    const loading_cover = document.querySelector(".loading");
 
+    const loading = new loading_screen(loading_cover);
 
+    
+    setTimeout(() => {
 
+        loading.hide();
 
+    }, 200);
 
 });

+ 27 - 2
scripts/selector/mode-selector.js
Fájl Megtekintése 

@@ -1,23 +1,48 @@
 
 import { full_screen_selector } from "./full-screen-selector.js";
 
 import { selector } from "./selector.js";
 
 import { selector_item } from "./selector-item.js";
 
+import { types } from "assets/types.js";
 
 
 class mode_selector extends full_screen_selector {
 
+    #on_shelf;
 
+    #on_space;
 
+
 
     constructor(app) {
 
         super(app, "mode-selector");
 
 
+        this.#on_shelf = () => {};
 
+        this.#on_space = () => {};
 
+
 
         this.add(new selector_item(
 
             "Shelf",
 
             "./theme/icons/shelf.svg",
 
-            () => {}
 
+            () => { this.#on_shelf(app); }
 
         ));
 
 
         this.add(new selector_item(
 
             "Space",
 
             "./theme/icons/space.svg",
 
-            () => {}
 
+            () => { this.#on_space(app); }
 
         ));
 
     }
 
+
 
+    set on_space(target) {
 
+        types.check_callback(target);
 
+        this.#on_space = target;
 
+    }
 
+
 
+    get on_space() {
 
+        return this.#on_space;
 
+    }
 
+
 
+    set on_shelf(target) {
 
+        types.check_callback(target);
 
+        this.#on_shelf = target;
 
+    }
 
+
 
+    get on_shelf() {
 
+        return this.#on_shelf;
 
+    }
 
 }
 
 
 export { mode_selector };

+ 9 - 0
scripts/shelf/shelf-view.js
Fájl Megtekintése 

@@ -0,0 +1,9 @@
 
+import { view } from "assets/view.js";
 
+
 
+class shelf_view extends view {
 
+    constructor(app) {
 
+        suprt(app, "shelf-view");
 
+    }
 
+}
 
+
 
+export { shelf_view };

+ 2 - 1
theme/style/loader.css
Fájl Megtekintése 

@@ -4,4 +4,5 @@
 
 @import url("./push.css");
 
 @import url("./scene.css");
 
 @import url("./icon.css");
 
-@import url("./mode-selector.css");
 
+@import url("./mode-selector.css");
 
+@import url("./loading-screen.css");

+ 43 - 0
theme/style/loading-screen.css
Fájl Megtekintése 

@@ -0,0 +1,43 @@
 
+.loading {
 
+    position: fixed;
 
+    top: 0px;
 
+    left: 0px;
 
+    width: 100%;
 
+    height: 100%;
 
+    z-index: 100;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    background-color: white;
 
+    color: black;
 
+}
 
+
 
+@keyframes loading-rotate {
 
+    0% {
 
+        transform: rotate(0deg);
 
+    }
 
+
 
+    25% {
 
+        transform: rotate(90deg);
 
+    }
 
+
 
+    50% {
 
+        transform: rotate(180deg);
 
+    }
 
+
 
+    75% {
 
+        transform: rotate(270deg);
 
+    }
 
+
 
+    100% {
 
+        transform: rotate(360deg);
 
+    }
 
+}
 
+
 
+.loading .animation span {
 
+    font-size: 1000%;
 
+    animation-name: loading-rotate;
 
+    animation-duration: 4s;
 
+    animation-iteration-count: infinite;
 
+    animation-timing-function: backward;
 
+}

+ 2 - 0
theme/style/mode-selector.css
Fájl Megtekintése 

@@ -25,6 +25,8 @@
 
     border-radius: 40px;
 
     padding: 40px;
 
     border: 3px solid transparent;
 
+    cursor: pointer;
 
+
 
     transition:
 
         border-color 0.5s,
 
         transform 0.5s;