moving splashscreen into a seperate class

diff --git a/index.html b/index.html
index ebb010b..308d26d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -136,6 +136,7 @@
 </head>
 <script src="js/jquery-3.4.1.min.js"></script>
 <script src="js/moment-with-locales.js"></script>
+<script src="js/theme.js"></script>
 <script>
 
 class LoginManager {

diff --git a/js/theme.js b/js/theme.js
new file mode 100644 (file)
index 0000000..7ee489c
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+const  DEF_OPT = 
+{
+       "fit": true,
+       "filter": true,
+       "vignette": true,
+       "clock": [{
+               "format": ["h:MM", "A"],
+               "css": [{
+                               "font-size": "60pt",
+                       },{
+                               "font-size": "30pt"
+                       }
+       ],                      
+       "parent-css": {
+               "color": "white",
+               "font-family": "Noto Sans",
+               "text-align": "center",
+               "margin-top": "calc(50vh - 90pt)",
+               "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
+       }
+       }]
+};
+
+
+class SplashScreen {
+       constructor() {
+               this.$el = $("#splash-screen");
+               this.$content = $("#splash-screen-content");
+               this.options = this.getUserOptions();
+               if (!this.$el.length)
+                       console.error("Missing splash-screen element.");
+
+               // fit background image to sreen size and center
+               let $imgs = $(".splash-screen-img");
+               $imgs.each((i, v) => this.adjustbackground($(v)));
+
+               this.is_open = false;   
+
+       }
+
+       getUserOptions() {
+               let options = {};
+               $.extend(true, options, DEF_OPT);
+               $.extend(true, options, {});
+               return options;
+       }
+
+
+}
+$(document).ready(() => {
+       var ss = new SplashScreen();
+
+});