js/_utils.js

   1 /**
   2  * Logger for LoginManager (and general development).
   3  *      show: - creates the on screen terminal if true
   4  *
   5  * Provides on screen terminal for testing without a developer console.
   6  *
   7  * Example Usage:
   8  *  let log = new Logger(true); // pass true to show output
   9  *  log.error("write errors like this"); // console.error()
  10  *      log.normal("write normal logs here"); // console.log()
  11 *       log.warn("write warning logs here"); // console.warn()
  12  *      log.debug("write debug logs here"); // console.debug()
  13  */
  14 class Logger {
  15         constructor(show=false) {
  16                 if (show) $("body").prepend(`   <!-- Debug Console -->
  17                         <div id="console" class="row">
  18                         <div class="col s3">
  19                         <div class="row">
  20                         <div class="switch">
  21                         <label>
  22                         <input type="checkbox" checked="true">
  23                         <span class="lever"></span>
  24                         Auto
  25                         </label>
  26                         </div>
  27                         </div>
  28
  29                         <div class="row">
  30                         <div class="input-field col ">
  31                         <input id="inputEvent" >
  32                         <label for="inputEvent">Event</label>
  33                         </div>
  34                         <a id="buttonTrigger" class="waves-effect waves-light btn">Trigger</a>
  35                         </div>
  36
  37                         </div>
  38                         <div class="col s9">
  39                         <div contentEditable="true" class="terminal"></div>
  40                         </div>
  41                         </div>
  42                         <!-- End Debug Console -->`);
  43       this.$log= $("#console .terminal");
  44       this.$autoscroll = $("#console input");
  45       this.$buttonTrigger = $("#buttonTrigger");
  46
  47                         window.onerror = (e) => {
  48                                 this.error(e);
  49                         };
  50
  51                         $(document).ready(() => {
  52
  53
  54                                 this.$log.keypress(function(e) {
  55                                         e.preventDefault();
  56                                 });
  57                                 this.$buttonTrigger.click(() => {
  58                                         let e = $("#inputEvent").val();
  59                                         log.debug("triggering: " + e);
  60                                         $(greeter).trigger(e);
  61
  62                                 });
  63                         });
  64                 }
  65                 _parse(str, color) {
  66                         if (typeof str == "object") str = JSON.stringify(str,null, 2);
  67
  68                         str =  "[" + moment().format("hh:mm:ss") + "] " + str;
  69                         str = "<text style='color: " + color + "'>" + str + "</text>";
  70                         return this.$log.html() + str;
  71                 }
  72                 normal (str) {
  73                         console.log(str);
  74                         this.$log.html(this._parse(str,"white"));
  75                         if (this.$autoscroll.prop('checked'))
  76                         this.$log[0].scrollTop = this.$log[0].scrollHeight;
  77                 }
  78                 error (str) {
  79                         console.error(str);
  80                         this.$log.html(this._parse(str,"red"));
  81                         if (this.$autoscroll.prop('checked'))
  82                         this.$log[0].scrollTop = this.$log[0].scrollHeight;
  83                 }
  84                 warn (str) {
  85                         console.warn(str);
  86                         this.$log.html(this._parse(str,"yellow"));
  87                         if (this.$autoscroll.prop('checked'))
  88                         this.$log[0].scrollTop = this.$log[0].scrollHeight;
  89                 }
  90                 debug (str) {
  91                         console.debug(str);
  92                         this.$log.html(this._parse(str,"lightblue"));
  93                         if (this.$autoscroll.prop('checked'))
  94                         this.$log[0].scrollTop = this.$log[0].scrollHeight;
  95                 }
  96 }
  97
  98 /************************ Basic Utility Functions *************************/
  99
 100 /**
 101 * Scale an image up or down until it's larger than or equal to the viewport
 102 * and then center it.
 103 */
 104 var adjustBackground = function ($img) {
 105   var viewportWidth = screen.width;
 106   var viewportHeight = screen.height;
 107   var viewportAspect = viewportWidth/viewportHeight;
 108   var imgWidth = $img.width();
 109   var imgHeight = $img.height();
 110   var imgAspect = imgWidth/imgHeight;
 111
 112   /* First determine what is
 113   the limiting factor (ie. if the image is wider, then the height is
 114   is the limiting factor and needs to be adjustested */
 115   if (imgAspect < viewportAspect) {
 116     /* The view port is wider compared to its height than
 117     the image is compared to the image height  meaning
 118     the width is the limiting dimension. Therefore we
 119     set image width = view ports width use the aspect
 120     ratio to set the correct height */
 121     $img.width(viewportWidth);
 122     $img.height(viewportWidth/imgAspect);
 123   } else {
 124     /* The image is wider than it is tall compared to the
 125     viewport so we adjust the to fit */
 126     $img.height(viewportHeight);
 127     $img.width(viewportHeight*imgAspect);
 128   }
 129   this.centerImage($img);
 130 }
 131 /**
 132  * Center an image in the viewport
 133  */
 134 var centerImage =  function($img) {
 135   var overlapWidth = $img.width() - screen.width;
 136   var overlapHeight = $img.height() - screen.height;
 137
 138
 139   // image overlaps viewport, move the image back
 140   // half the length of the overlap
 141   $img.css({
 142     position: "relative",
 143     right: overlapWidth/2,
 144     bottom: overlapHeight/2
 145   });
 146 }