Added options menu to switch themes and other options in future.

marcells · Jan 20, 2015 · 38aeff4 · 38aeff4
1 parent 7c1aae4
commit 38aeff4
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 10 deletions.
diff --git a/app/public/scripts/AppViewModel.js b/app/public/scripts/AppViewModel.js
@@ -1,4 +1,4 @@
-define(['ko', 'BuildViewModel', 'helper'], function (ko, BuildViewModel, helper) {
+define(['ko', 'BuildViewModel', 'OptionsViewModel'], function (ko, BuildViewModel, OptionsViewModel) {
     var AppViewModel = function() {
         var self = this;
 
@@ -7,7 +7,7 @@ define(['ko', 'BuildViewModel', 'helper'], function (ko, BuildViewModel, helper)
         this.isIntercepted = ko.observable();
         this.infoType = ko.observable();
         this.builds = ko.observableArray([]);
-        this.theme = ko.observable(helper.getUrlParameter('theme') || 'default');
+        this.options = new OptionsViewModel(self);
 
         this.setIsConnected = function (value) {
             if(isLoadingInitially) {

diff --git a/app/public/scripts/OptionsViewModel.js b/app/public/scripts/OptionsViewModel.js
@@ -0,0 +1,35 @@
+define(['ko', 'helper', 'cookies'], function (ko, helper, cookies) {
+    var OptionsViewModel = function (app) {
+        var self = this;
+
+        self.isVisible = ko.observable(false);
+        self.isMenuVisible = ko.observable(false);
+        self.theme = ko.observable(helper.getUrlParameter('theme') || cookies.get('theme') || 'default');
+        self.themes = ko.observableArray(['default', 'list', 'lingo']);
+
+        helper.detectInteraction(
+            function() { 
+                self.isMenuVisible(!self.isVisible());
+            },
+            function() {
+                self.isMenuVisible(self.isVisible());
+            });
+
+        self.changeTheme = function (theme) {
+            cookies.set('theme', theme);
+            self.theme(theme);
+        };
+
+        self.show = function () {
+            self.isVisible(true);
+            self.isMenuVisible(false);
+        };
+
+        self.hide = function () {
+            self.isVisible(false);
+            self.isMenuVisible(true);
+        };
+    };
+
+    return OptionsViewModel;
+});
diff --git a/app/public/scripts/helper.js b/app/public/scripts/helper.js
@@ -1,5 +1,5 @@
 define(function () {
-    var getUrlParameter = function(parameter) {
+    var getUrlParameter = function (parameter) {
         var pageUrl = window.location.search.substring(1),
             urlParameters = pageUrl.split('&');
 
@@ -11,7 +11,42 @@ define(function () {
         }
     };
 
+    var detectInteraction = function (show, hide) {
+        var isShown = false;
+        var nextTimeout = new Date();
+
+        setInterval(function() {
+            if (isShown && (new Date() - nextTimeout > 2000)) {
+                isShown = false;
+                hide();
+            }
+
+        }, 1000);
+
+        function interactionDetected () {
+            nextTimeout = new Date();
+
+            if(!isShown) {
+                show();
+                isShown = true;
+            }
+        }
+
+        $(window).keydown(function(event) {
+            interactionDetected();
+        });
+
+        $(window).mousemove(function(event) {
+            interactionDetected();
+        });
+
+        $(window).mousedown(function(event) {
+            interactionDetected();
+        });
+    };
+
     return {
-        getUrlParameter: getUrlParameter
+        getUrlParameter: getUrlParameter,
+        detectInteraction: detectInteraction
     };
 });
diff --git a/app/public/scripts/knockoutExtensions.js b/app/public/scripts/knockoutExtensions.js
@@ -23,7 +23,7 @@ define(['ko'], function (ko) {
             }
         };
 
-        ko.bindingHandlers.fadeOverlay = {
+        ko.bindingHandlers.fade = {
             update: function(element, valueAccessor) {
                 var value = valueAccessor();
                 var unwrap = ko.unwrap(value);

diff --git a/app/public/scripts/libs/cookies.min.js b/app/public/scripts/libs/cookies.min.js
diff --git a/app/public/scripts/main.js b/app/public/scripts/main.js
@@ -3,7 +3,8 @@ require.config({
         io: '/socket.io/socket.io',
         ko: 'libs/knockout-3.2.0',
         moment: 'libs/moment.min',
-        countdown: 'libs/countdown.min'
+        countdown: 'libs/countdown.min',
+        cookies: 'libs/cookies.min'
     }
 });
 

diff --git a/app/public/stylesheets/base/style.css b/app/public/stylesheets/base/style.css
@@ -22,6 +22,14 @@ body {
   background-repeat: repeat;
 }
 
+.clear {
+  clear: both;
+}
+
+/*******************************
+Overlay
+********************************/
+
 .connection > .overlay-background {
   width: 100%;
   height: 100%;
@@ -40,4 +48,103 @@ body {
   left: 0px;
   color: white;
   text-align: center;
+}
+
+/*******************************
+Options
+********************************/
+
+.options-button {
+  font-size: 40pt;
+  top: 0%;
+  left: 0px;
+  width: 80px;
+  height: 80px;
+  position: fixed;
+  background-color: white;
+  text-align: center;
+  vertical-align: middle;
+  opacity: 0.5;
+}
+
+.options-button > a {
+  color: black;
+  text-decoration: none;
+}
+
+.options > .background {
+  background-color: white;
+  opacity: 0.9;
+}
+
+.options > .content {
+  color: black;
+  overflow: auto;
+}
+
+.options > .background,
+.options > .content {
+  padding-left: 30px;
+  padding-right: 30px;
+  width: 200px;
+  height: 100%;
+  position: fixed;
+  top: 0%;
+  left: 0px;
+}
+
+.options > .content > .header {
+  font-size: 40pt;
+}
+
+.options > .content > .header a:link,
+.options > .content > .header a:visited,
+.options > .content > .header a:active,
+.options > .content > .header a:hover {
+  font-size: 40pt;
+  text-decoration: none;
+  color: black;
+}
+
+.options > .content > .header a:active,
+.options > .content > .header a:hover {
+  font-size: 40pt;
+  text-decoration: none;
+  color: #303030;
+}
+
+.options > .content > .header > .back {
+  float: right;
+}
+
+.options > .content .selection-box ul {
+}
+
+.options > .content .selection-box ul > li {
+  float: left;
+  display: table;
+  list-style: none;
+  margin: 5px;
+}
+
+.options > .content .selection-box ul > li > a {
+  display: table-cell;
+  min-width: 80px;
+  height: 50px;
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  border: 2px solid black;
+}
+
+.options > .content .selection-box ul > li > a:hover {
+  background-color: lightgray;
+  color: black;
+}
+
+.options > .content .selection-box ul > li.selected > a {
+  background-color: #303030;
+  color: white;
 }
diff --git a/app/views/index.jade b/app/views/index.jade
@@ -6,12 +6,37 @@ block scripts
     script(data-main="/scripts/main", src='/scripts/libs/require-2.1.15.min.js')
 
 block content
-    div.full-size(data-bind='component: { name: theme, params: { builds: builds } }')
+    div.full-size(data-bind='component: { name: options.theme(), params: { builds: builds } }')
 
-    div.connection(data-bind='fadeOverlay: isIntercepted')
+    div(data-bind='with: options')
+        div.options-button(data-bind='fade: isMenuVisible')
+            a(href='#', data-bind='click: show')
+                span.fa.fa-bars
+
+        div.options(data-bind='visible: isVisible', style='display: none')
+            div.background
+            div.content
+                div.header
+                    span.title Options
+                    span.back
+                        a(href='#', data-bind='click: hide')
+                            span.fa.fa-arrow-left
+                hr
+
+                section
+                    h1 Theme
+                    span Select your preferred default theme, when you open the monitor without the theme url parameter.
+
+                    .selection-box
+                        ul(data-bind='foreach: themes')
+                            li(data-bind='css: { selected: $parent.theme() === $data }')
+                                a(data-bind='click: $parent.changeTheme')
+                                    span(data-bind='text: $data')
+
+    div.connection(data-bind='fade: isIntercepted')
         div.overlay-background
         div.overlay-icon
             span(data-bind='visible: infoType() === "loading"')
                 span.fa.fa-5x.fa-circle-o-notch.fa-spin
-            span(data-bind='visible: infoType() === "connection"', style="display: none")
+            span(data-bind='visible: infoType() === "connection"', style='display: none')
                 span.fa.fa-5x.fa-plug
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "node-build-monitor",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "A Build Monitor written in Node.js, which supports several build services and can be extended easily.",
   "author": "Marcell Spies <[email protected]>",
   "contributors": [