Support for custom themes.

themes/jdb/img/hidpi/night.gif

@@ -0,0 +1 @@
+../night.gif

themes/jdb/index.js

@@ -0,0 +1,52 @@
+(function() {
+
+  var U = window.uestibulum;
+
+  function currentTimePeriod() {
+    var now = new Date();
+    if (now.getHours() >= 21 || now.getHours() < 4) return 'night';
+    else if (now.getHours() < 12) return 'morning';
+    else if (now.getHours() < 18) return 'afternoon';
+    else return 'evening';
+  }
+
+  var curTimePeriod;
+  var hidpi = U.config.hidpi;
+
+  var imagesByName = {
+    morning: 'morning.png',
+    afternoon: 'afternoon.png',
+    evening: 'evening.png',
+    night: 'night.gif' };
+
+  var T = {
+  
+    name: 'jdb',
+
+    init: function(uiView) {
+      uiView.$el.addClass('theme-' + uiView.theme.name);
+    },
+
+    render: function(uiView, manualTimePeriod) {
+      var prevTimePeriod = curTimePeriod;
+      curTimePeriod = manualTimePeriod || currentTimePeriod();
+
+      if (curTimePeriod != prevTimePeriod) {
+        uiView.$el.removeClass(prevTimePeriod);
+        uiView.$el.addClass(curTimePeriod);
+        uiView.loginView.render();
+        uiView.bgImgModel.set('url', 'themes/jdb/img/' +
+          (hidpi ? 'hidpi/' : '') + imagesByName[curTimePeriod])
+      }
+    },
+
+    unload: function(uiView) {
+      uiView.$el.removeClass('theme-' + uiView.theme.name);
+      uiView.$el.removeClass(curTimePeriod);
+    },
+
+    getGreeting: function() { return 'Good ' + curTimePeriod; }
+
+  };
+  U.themes['jdb'] = T;
+})();

themes/jdb/style.css

@@ -0,0 +1,69 @@
+.theme-jdb {
+  /*&.night {
+    #clock-panel {
+
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 2vw;
+    }
+  }*/ }
+  .theme-jdb.evening #clock-panel {
+    border-bottom: 2px solid white;
+    text-align: right;
+    position: absolute;
+    right: 0;
+    top: 0; }
+  .theme-jdb.evening #login-panel {
+    position: absolute;
+    bottom: 2vw;
+    left: 1vw; }
+  .theme-jdb.evening #session-panel {
+    position: absolute;
+    bottom: 0.5vw;
+    left: 1vw; }
+  .theme-jdb.morning #clock-panel, .theme-jdb.night #clock-panel, .theme-jdb.afternoon #clock-panel {
+    border-top: 2px solid white;
+    position: absolute;
+    left: 0;
+    bottom: 0; }
+  .theme-jdb.morning #login-panel, .theme-jdb.night #login-panel, .theme-jdb.afternoon #login-panel {
+    position: absolute;
+    bottom: 2vw;
+    left: 20vw; }
+  .theme-jdb.morning #session-panel, .theme-jdb.night #session-panel, .theme-jdb.afternoon #session-panel {
+    position: absolute;
+    bottom: 0.5vw;
+    left: 20vw; }
+  .theme-jdb.morning #clock-panel {
+    text-shadow: 0 0 0.2vw #446688; }
+  .theme-jdb.morning #users:hover #user-display, .theme-jdb.morning #sessions:hover #session-display,
+  .theme-jdb.morning #users-list li:hover, .theme-jdb.morning #sessions-list li.session:hover {
+    color: #0088aa;
+    text-shadow: 0 0 0.5vw black; }
+  .theme-jdb.morning #power-panel {
+    opacity: 0.7; }
+  .theme-jdb.afternoon #clock-panel {
+    text-shadow: 0 0 2vw #448844; }
+  .theme-jdb.afternoon #users:hover #user-display, .theme-jdb.afternoon #sessions:hover #session-display,
+  .theme-jdb.afternoon #users-list li:hover, .theme-jdb.afternoon #sessions-list li.session:hover {
+    color: #00aa00;
+    text-shadow: 0 0 0.5vw black; }
+  .theme-jdb.evening #clock-panel {
+    text-shadow: 0 0 2vw #faaa3b; }
+  .theme-jdb.evening #users:hover #user-display, .theme-jdb.evening #sessions:hover #session-display,
+  .theme-jdb.evening #users-list li:hover, .theme-jdb.evening #sessions-list li.session:hover {
+    color: orange;
+    text-shadow: 0 0 0.5vw black; }
+  .theme-jdb.evening #power-panel {
+    opacity: 0.7; }
+  .theme-jdb.night #clock-panel {
+    text-shadow: 0 0 2vw #884488; }
+  .theme-jdb.night #users:hover #user-display, .theme-jdb.night #sessions:hover #session-display,
+  .theme-jdb.night #users-list li:hover, .theme-jdb.night #sessions-list li.session:hover {
+    color: #8822bb;
+    text-shadow: 0 0 0.2vw black; }
+
+/*# sourceMappingURL=style.css.map */

themes/jdb/style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAKA,UAAW;AAqFT;;;;;;;;;;KAUG;EA5FD,+BAAa;IACX,aAAa,EAAE,eAAkB;IACjC,UAAU,EAAE,KAAK;IAEjB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;EAGR,+BAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;EAGX,iCAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;EAKX,iGAAa;IACX,UAAU,EAAE,eAAkB;IAE9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;EAGX,iGAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;EAGZ,uGAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,IAAI;EAKZ,+BAAa;IAAE,WAAW,EAAE,iBAAiB;EAC7C;6FACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,iCAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;iGACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAK9B,+BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;6FACsD;IACpD,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,6BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;yFACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe",
+"sources": ["style.scss"],
+"names": [],
+"file": "style.css"
+}

themes/jdb/style.scss

@@ -0,0 +1,102 @@
+$colorFG: white;
+$colorBG: black;
+$colorAccent: orange;
+
+
+.theme-jdb {
+
+  &.evening {
+    #clock-panel {
+      border-bottom: 2px solid $colorFG;
+      text-align: right;
+
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 1vw;
+    }
+
+    #session-panel {
+      position: absolute;
+      bottom: 0.5vw;
+      left: 1vw;
+    }
+  }
+
+  &.morning, &.night, &.afternoon {
+    #clock-panel {
+      border-top: 2px solid $colorFG;
+
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 20vw;
+    }
+
+    #session-panel {
+      position: absolute;
+      bottom: 0.5vw;
+      left: 20vw;
+    }
+  }
+
+  &.morning {
+    #clock-panel { text-shadow: 0 0 0.2vw #446688; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: #0088aa;
+      text-shadow: 0 0 0.5vw black;
+    }
+    #power-panel { opacity: 0.7; }
+  }
+
+  &.afternoon {
+    #clock-panel { text-shadow: 0 0 2vw #448844; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: #00aa00;
+      text-shadow: 0 0 0.5vw black;
+    }
+  }
+
+  &.evening {
+    #clock-panel { text-shadow: 0 0 2vw #faaa3b; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: orange;
+      text-shadow: 0 0 0.5vw black;
+    }
+    #power-panel { opacity: 0.7; }
+  }
+
+  &.night {
+    #clock-panel { text-shadow: 0 0 2vw #884488; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: #8822bb;
+      text-shadow: 0 0 0.2vw black;
+    }
+  }
+
+  /*&.night {
+    #clock-panel {
+
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 2vw;
+    }
+  }*/
+}

themes/music/index.js

@@ -0,0 +1,78 @@
+(function() {
+
+  var U = window.uestibulum;
+
+  function guessEvent() {
+    var now = new Date();
+
+    var day = now.getDay();
+    var hour = now.getHours();
+
+    switch (day) {
+      // Sunday
+      case 0:
+             if (hour >=  8 && hour < 10) return 'rehearsal';
+        else if (hour >= 10 && hour < 13) return 'service';
+        else if (hour >= 13 && hour < 15) return 'mixing';
+        else if (hour >= 15 && hour < 18) return 'rehearsal';
+        else if (hour >= 18 && hour < 21) return 'service';
+        break;
+
+      // Wednesday
+      case 3:
+             if (hour == 18) return 'rehearsal';
+        else if (hour >= 19 && hour < 21) return 'service';
+        break;
+ 
+      // Tuesday, Thursday
+      case 2: case 4:
+        if (hour >= 19 && hour < 21) return 'rehearsal';
+        break;
+
+      // Monday, Friday, Saturday
+      default:
+    }
+
+    return 'other';
+  }
+
+  var curEvent;
+  var hidpi = U.config.hidpi;
+
+  var imagesByName = {
+    mixing: [],
+    rehearsal: [],
+    service: [],
+    other: [] }
+
+  var T = {
+  
+    name: 'music',
+
+    init: function(uiView) {
+      uiView.$el.addClass('theme-' + uiView.theme.name);
+    },
+
+    render: function(uiView, manualEvent) {
+      var prevEvent = curEvent;
+      curEvent = manualEvent || guessEvent();
+
+      if (curEvent != prevEvent) {
+        uiView.$el.removeClass(prevEvent);
+        uiView.$el.addClass(curEvent);
+        uiView.loginView.render();
+        uiView.bgImgModel.set('url', 'themes/music/img/' +
+          (hidpi ? 'hidpi/' : '') + imagesByName[curEvent])
+      }
+    },
+
+    unload: function(uiView) {
+      uiView.$el.removeClass('theme-' + uiView.theme.name);
+      uiView.$el.removeClass(curEvent);
+    },
+
+    getGreeting: function() { return 'Good ' + curEvent; }
+
+  };
+  U.themes['jdb'] = T;
+})();

themes/music/style.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=style.css.map */

themes/music/style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "",
+"sources": [],
+"names": [],
+"file": "style.css"
+}

themes/music/style.scss

@@ -0,0 +1,8 @@
+$colorFG: white;
+$colorBG: black;
+$colorAccent: orange;
+
+
+.theme-music {
+
+}