js/splashscreen.js

   1 const MOVE_DUR = 300;
   2 const  DEF_OPT =
   3 {
   4         "fit": true,
   5         "filter": false,
   6         "vignette": true,
   7         "active-timeout": 15,
   8         "content": {
   9                 "clock": [{
  10                         "format": "dddd, MMMM Do",
  11                         "css": {
  12                                 "color": "white"
  13                         },
  14                         "parent-css": {
  15                                 "margin-top": "calc(20vh - 70pt)",
  16                                 "text-align": "center",
  17                                 "font-size": "70pt",
  18                                 "font-family": "Noto Sans",
  19                                 "font-weight": "lighter",
  20                                 "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
  21                         }
  22                 },{
  23                         "format": ["h:mm", "A"],
  24                         "css": [
  25                                 {"font-size": "65pt", "font-weight": 200 },
  26                                 {"font-size": "30pt", "font-weight": "lighter", "margin-left": "10pt"}
  27                         ],
  28                         "parent-css": {
  29                                 "margin-top": "20vh",
  30                                 "color": "white",
  31                                 "font-family": "Noto Sans",
  32                                 "text-align": "center",
  33                                 "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
  34                         }
  35                 }],
  36
  37                 "html": [{
  38                         "html":"<text style='display: none' class='active-appear'>Press any key to login</text>",
  39                         "css": {
  40
  41                                 "margin-top": "5vh",
  42                                 "font-weight": "200",
  43                                 "font-size": "23pt",
  44                                 "text-align": "center",
  45                                 "color": "rgba(255, 255, 255, 0.8)"
  46                         }
  47                 }]
  48         }
  49 };
  50
  51 class SplashScreen {
  52         constructor() {
  53                 this.options = this.getUserOptions();
  54                 $(this).on("init", () => this._init());
  55         }
  56         _init() {
  57                 this.$el = $("#splash-screen");
  58                 this.$content = $("#splash-screen-content");
  59                 this.state = "closed";
  60                 this.last_active = 0;
  61                 this.active_timeout = 15;
  62
  63                 if (!this.$el.length)
  64                         log.error("Missing-screen element.");
  65
  66                 // fit background image to sreen size and center
  67                 this.$img = $(".splash-screen-img");
  68                 if (!this.$img.length)
  69                         log.warn("No background images supplied for splash screen.");
  70                 this.$img.each((i, v) => adjustBackground($(v)));
  71
  72                 let options = this.options; // shorthand
  73                 if (typeof options == "object") {
  74                         // initilize global values if specfied in the config
  75                         this.is_open = false;
  76
  77
  78                         if (typeof options["active-timeout"] == "number")
  79                                 this.active_timeout = options["active-timeout"];
  80                         if (options.filter == true)
  81                                 this.$img.addClass("filter");
  82                         if (options.vignette == true) {
  83                                 this.$vignette = $("#vignette");
  84                                 this.$vignette.show();
  85                         }
  86                         if (typeof options.content == "object")
  87                                 this.initContent(options.content);
  88                         console.log("triggering ready for splash");
  89                         $(this).trigger("ready");
  90                 }
  91
  92                 /******************** Event Listeners ********************/
  93                 this.clock = setInterval(() => {
  94                         $(this).trigger("tick");
  95
  96                         if (!this.isActive())
  97                                 $(this).trigger("inactive");
  98                 }, 500);
  99
 100                 // update last active time
 101                 $(this).on("active", () => this.last_active = moment());
 102
 103                 $(document).keyup((e) => {
 104                         // handle events in seperate method
 105                         this.keyHandler.call(this, e);
 106                 }).keypress((e) => this.keyHandler.call(this, e));
 107
 108                 this.$el.click(() => {
 109                         this.open();
 110                 }).mousemove((e) => {
 111                         if (!this.isActive())
 112                                 $(this).trigger("active", e)
 113                 });
 114                 setTimeout(() => $(this).trigger("active"), 1);
 115         }
 116         /**
 117          * Loops through the user specified content and adds them to the DOM in order
 118          */
 119         initContent(content) {
 120                 for (let content_type in content) {
 121                         if (content_type == "clock")
 122                                 this.initClock(content[content_type]);
 123                         else if (content_type == "html")
 124                                 this.initHTML(content[content_type]);
 125                         else
 126                                 log.warn("Specified content " + content_type + " is not valid.");
 127                 }
 128         }
 129
 130         getUserOptions() {
 131                 let options = {};
 132                 $.extend(true, options, DEF_OPT);
 133                 $.extend(true, options, {});
 134                 return options;
 135         }
 136
 137         /**
 138          * open and close will toggle the screen and animate it opening and closing
 139          * adds a resetTimeout function to automatically close after a period of user
 140          * inactivity */
 141         close(time=500)  {
 142                 if (this.state == "closed" || this.state == "moving") {
 143                         log.warn("Cannot close splash screen when state is: " + this.state);
 144                         return;
 145                 }
 146
 147                 this.state = "moving";
 148 <<<<<<< HEAD
 149                 // this.$el.css("top", "0");
 150                 // this.$el.css("opacity", "1");
 151
 152                 this.$el.fadeIn(MOVE_DUR, () => {
 153                         // this.$el.remove("filter");
 154 =======
 155                 this.$el.animate({
 156                         top: "0",
 157                         filter: "blur(20px)"
 158                 }, time, "easeOutQuint", () => {
 159 >>>>>>> c1d727d6c4753e967cdd3e9df93db3bf993eb389
 160                         this.state = "closed";
 161                         this.$content.fadeIn("slow")
 162                         // this.$el.show();
 163                 });
 164
 165         }
 166         open(time=300) {
 167                 if (this.state == "open" || this.state == "moving") {
 168                         log.warn("Cannot open splash screen when state is: " + this.state);
 169                         return;
 170                 }
 171                 clearTimeout(this.resetTimeout);
 172                 let reset_duration = 60*1000;
 173
 174                 if (this.state == "open" || this.state == "moving") {
 175                         this.resetTimeout = setTimeout(this.reset, reset_duration);
 176                         return;
 177                 }
 178                 this.state = "moving";
 179 <<<<<<< HEAD
 180
 181                                 this.$content.fadeOut("fast", () => {
 182                                         // this.$el.remove("filter");
 183                                         this.$el.fadeOut(MOVE_DUR, () => {
 184                                                 this.state = "open";
 185                                         });
 186
 187                                         // this.$el.show();
 188                                 });
 189                 // this.$el.css("top", "-100%");
 190                 // this.$el.css("opacity", "0");
 191                 //
 192                 //
 193                 // setTimeout(() => {
 194                 //      this.state = "open";
 195                 //      this.$el.hide();
 196                 // }, CSS_MOVE_DUR);
 197
 198
 199         }
 200
 201  _moveUp($el, cb) {
 202               $el.addClass("move-up");
 203               setTimeout(() => {
 204                 $el.css("top", "-100%").removeClass("move-up");
 205                                         if (typeof cb == "function") cb($el);
 206               }, CSS_MOVE_DUR);
 207 =======
 208                 this.$el.animate({
 209                         top: "-100%"
 210                 }, time, "easeInCirc", () => {
 211                         this.state = "open";
 212                         // close the screen after 1 minute of inactivty
 213                         this.resetTimeout = setTimeout(() => this.reset, reset_duration);
 214                 });
 215 >>>>>>> c1d727d6c4753e967cdd3e9df93db3bf993eb389
 216         }
 217         _moveDown($el, cb) {
 218                 $el.addClass("move-down");
 219                 setTimeout(() => {
 220                         $el.css("top", "0").removeClass("move-down");
 221                         if (typeof cb == "function") cb($el);
 222                 }, CSS_MOVE_DUR);
 223         }
 224         /**
 225          * Closes the splash screen if there has been no user activity
 226          */
 227         reset() {
 228                 if (this.state == "open") {
 229                         this.close();
 230                         $(this).trigger("timeout");
 231                 }
 232         }
 233
 234         /**
 235          * handles the key events for the splash
 236          */
 237         keyHandler(e) {
 238                 switch (e.keyCode) {
 239                         case 32:
 240                         case 13: // Enter key
 241                                 if (this.state == "closed") this.open();
 242                                 break;
 243                         case 27: // ESC key
 244                                 if (this.state == "open") this.close();
 245                                 else if (this.state == "closed") this.open();
 246                                 break;
 247                         default:
 248                                 if (e.keyCode != 82 && e.keyCode != 17 && this.state == "closed") // for testing
 249                                         this.open();
 250                                 break;
 251                 }
 252
 253                 // stop reset timeout since there has been user activity
 254                 if (this.state == "open")
 255                         clearTimeout(this.resetTimeout);
 256
 257                 if (!this.isActive())
 258                         $(this).trigger("active", e);
 259         }
 260
 261         isActive() {
 262                 if (moment().diff(this.last_active, "seconds", true) > 30) {
 263                         return 0;
 264                 }
 265                 return 1;
 266         }
 267
 268         /**
 269          *  Creates clock elements based on the usr config
 270          */
 271         initClock(opts) {
 272                 if (typeof opts != "object") {
 273                         log.error("Unable to initialize clock thats not an object");
 274                         return -1;
 275                 }
 276                 // handle arrays and a single clock object
 277                 if (!Array.isArray(opts))
 278                         opts = [opts];
 279
 280                 for (let i in opts) {
 281                         this.$clock = $("<div id='clock-" + i + "' class='clock'></div>");
 282                         this.$content.append(this.$clock);
 283                         this.startClock(this.$clock, opts[i]);
 284                 }
 285         }
 286
 287         /**
 288          * Applys the css specfied in the argument opts to the jQuery oboject $clock.
 289          * Subscribes the clock to a tick event
 290          */
 291         startClock($clock, opts) {
 292                 if (typeof opts != "object") {
 293                         log.error("Clock opts is not a valid object");
 294                         return -1;
 295                 }
 296                 // handle multiple formats for multiple clocks on the same line
 297                 if(typeof opts.format == "string")
 298                         opts.format = [opts.format];
 299
 300                 // ensure the format is now an array
 301                 if(!Array.isArray(opts.format)) {
 302                         log.error(`Specfied clock format is not a valid type.
 303                                 Type can be a single string or Array.`);
 304                         return -1;
 305                 }
 306
 307                 if(!Array.isArray(opts.css))
 308                         opts.css = [opts.css];
 309
 310                 for (let i in opts.format) {
 311
 312                         let $format = $("<sub></sub>");
 313                         // create text field in clock
 314                         $clock.append($format);
 315                         // apply css styles
 316                         if (i < opts.css.length && typeof opts.css[i] == "object")
 317                                 $format.css(opts.css[i]);
 318
 319                         // start clock
 320                         $format.text(moment().format(opts.format[i]));
 321                         $(this).on("tick", () => {
 322                                 $format.text(moment().format(opts.format[i]));
 323                         });
 324                 }
 325
 326                 if (typeof opts["parent-css"] == "object")
 327                         $clock.css(opts["parent-css"]);
 328
 329                 $clock.show();
 330         }
 331
 332         /**
 333          * Inserts HTML specified in the user config into the splash screen
 334          * accepts plain strings and objects. String literals are interpreted as
 335          * normal text element. Objects are set using the jQuery API
 336          */
 337         initHTML(opts) {
 338                 // handle single objects and strings
 339                 if (!Array.isArray(opts)) {
 340                         opts = [opts];
 341                 }
 342
 343                 for (let el of opts) {
 344                         if (typeof el == "string") {
 345                                 let $el = $("<text>");
 346                                 $el.text(el);
 347                                 // create simple text element
 348                                 this.$content.append($el);
 349                         } else if (typeof el == "object") {
 350                                 // let user specify element properites in object el.
 351                                 let $el = $("<div>");
 352                                 for (let prop in el) {
 353                                         $el[prop](el[prop]);
 354                                 }
 355                                 this.$content.append($el);
 356
 357                         } else {
 358                                 log.warn("Splash screen html element is invalid type");
 359                         }
 360                 }
 361
 362         }
 363 }