Styled settings panel

evadi · May 1, 2014 · 876b526 · 876b526
1 parent 8808efa
commit 876b526
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 65 deletions.
diff --git a/css/images/console.png b/css/images/console.png
diff --git a/css/images/page.png b/css/images/page.png
diff --git a/css/settings.css b/css/settings.css
@@ -4,11 +4,130 @@ body{
    font-family: Arial;
 }
 
+.clear {
+   clear: both;
+}
+
 h1 {
    font-size: 16px;
    color: #333;
+   margin:0;
+}
+
+h2 {
+   font-size: 14px;
+   color: #666;
+   margin:10px 0 5px 0;
+}
+
+p {
+   margin:5px 0 10px 0;
+   padding:0;
+   color:#333;
+   font-size:11px;
 }
 
 .container {
-   min-width: 300px;
-}
+   min-width: 350px;
+}
+
+.row {
+   margin:0 0 10px 0;
+}
+
+.command .label {
+   font-weight:bold;
+   float:left;
+   margin: 0 20px 0 0;
+}
+
+.options {
+   margin: 0 auto;
+}
+
+.options ul {
+   list-type: none;
+   list-style-type: none;
+   margin:0;
+   padding:0;
+}
+
+.options ul li {
+   float: left;
+}
+
+.options ul li a {
+   cursor: pointer;
+   background: #DAE8F7;
+   border:1px solid #C5D9F0;
+   text-align: center;
+   display: inline-block;
+   height:20px;
+   width:150px;
+   margin:10px;
+   border-radius:5px 5px;
+   padding:60px 0 0 0;
+   background-size: 40px 40px;
+   background-repeat: no-repeat;
+   background-position: center 10px;
+}
+
+.options ul li a.selected {
+   outline: 0;
+   border-color: #66afe9;
+   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+}
+
+.options ul li a#console {
+   background-image: url(images/console.png);
+}
+.options ul li a#page {
+   background-image: url(images/page.png);
+}
+
+button#save {
+   width:100%;
+   color: #fff;
+   background-color: #428bca;
+   border-color: #357ebd;
+   display: inline-block;
+   margin: 10px 0 0 0;
+   font-weight: 400;
+   text-align: center;
+   vertical-align: middle;
+   cursor: pointer;
+   background-image: none;
+   border: 1px solid transparent;
+   white-space: nowrap;
+   padding: 6px 12px;
+   font-size: 14px;
+   line-height: 1.42857143;
+   border-radius: 4px;
+   -webkit-user-select: none;
+}
+
+.information {
+   padding: 5px;
+   border: 1px solid transparent;
+   border-radius: 4px;
+   position:absolute;
+   top:0px;
+   left:0;
+   right:0;
+   text-align: center;
+   transition: opacity .40s ease-in-out;
+   -moz-transition: opacity .40s ease-in-out;
+   -webkit-transition: opacity .40s ease-in-out;
+   opacity: 0;
+}
+
+.information.active {
+   opacity: 1;
+}
+
+.information.success {
+   background-color: #dff0d8;
+   border-color: #d6e9c6;
+   color: #3c763d;
+}
diff --git a/js/background.js b/js/background.js
@@ -22,38 +22,66 @@ var displayTypes = Object.freeze({
 });
 
 //controls the operation of the extension
-var controller = {
+var Controller = (function () {
 
-   //Tab we are currently controlling
-   activeTargetId: 0,
-
-   //Where is the data being displayed
-   displayTarget: displayTypes.CONSOLE,
+   //constructor
+   function Controller () {
+
+      //Tab we are currently controlling
+      this.activeTargetId = 0;
+
+      //Where is the data being displayed
+      this.displayTarget = displayTypes.CONSOLE;
+
+      //load the users settings
+      this.loadSettings();
+   }
 
    //send request to regenerate field data
-   update: function () {
+   Controller.prototype.update = function () {
       if (this.activeTargetId !== 0) {
          chrome.tabs.sendMessage(this.activeTargetId, { action: actions.RELOAD, target: this.displayTarget });
       }
-   },
+   };
 
    //checks that a given url is in the approved list managed by the user
-   isApprovedUrl: function (urlToApprove) {
+   Controller.prototype.isApprovedUrl = function (urlToApprove) {
       return (urlToApprove.startsWith("http://") || urlToApprove.startsWith("https://"));
-   },
+   };
 
    //clears the active tab
-   clearActiveTab: function () {
+   Controller.prototype.clearActiveTab = function () {
       this.activeTargetId = 0;
-   }
-};
+   };
+
+   //reads the latest settings
+   Controller.prototype.updateSettings = function (newSettings) {
+      if (newSettings) {
+         this.displayTarget = newSettings["display"];
+         console.log(this.displayTarget);
+      }
+   };
+
+   //load user settings and apply them
+   Controller.prototype.loadSettings = function () {
+      var _this = this;
+      evadi.blabr.data.getSettings(function (settings) {
+         _this.updateSettings(settings);
+      });
+   };
+
+   return Controller;
+
+})();
 
+//create the main controller instance
+var controller = new Controller();
 
 
 /* Chrome API's */
 
 //Capture requests from other areas of the extension
-chrome.extension.onRequest.addListener(function (request, sender, sendRequest) {
+chrome.extension.onMessage.addListener(function (request, sender, sendRequest) {
 
    if (request.action == actions.FORCERELOAD) {
       controller.activeTargetId = sender.tab.id;
@@ -94,9 +122,6 @@ chrome.tabs.onActivated.addListener(function (activeInfo) {
             //make this the currently active tab
             controller.activeTargetId = tab.id;
             console.log("target tab changed ", controller.activeTargetId);
-         } else {
-            //remove the currently active tab
-            controller.clearActiveTab();
          }
 
       });

diff --git a/js/content_script.js b/js/content_script.js
@@ -11,7 +11,7 @@ var display = Object.freeze({
       console.log(data, "Blabr output");
    },
    PAGE: function (data) {
-
+      console.log("page output");
    }
 });
 
@@ -25,11 +25,6 @@ var pageManager = (function() {
       this.pageReader = new pageReader();
    }
 
-   //builds any UI elements that are necessary based on user settings
-   pageManager.prototype.buildPage = function () {
-      this.uiBuilder.showReloadOption();
-   };
-
    //main function used to display data to correct display target
    pageManager.prototype.displayData = function (displayType) {
       if (displayType !== undefined) {
@@ -115,26 +110,9 @@ var UIBuilder = (function() {
 
    //constructor
    function UIBuilder () {
-      this.reloadOptionCreated = false; //ensures no duplicate reload buttons
+
    }
 
-   //display the reload button used to regenerate data
-   UIBuilder.prototype.showReloadOption = function () {
-      if (this.reloadOptionCreated === false) {
-         var btn = document.createElement("BUTTON");
-         var t = document.createTextNode("R");
-         btn.appendChild(t);
-         btn.style.position = "fixed";
-         btn.style.bottom = 0;
-         btn.style.right = 0;
-         //Appending to DOM
-         document.body.appendChild(btn);
-
-         btn.onclick = manager.forceReload;
-      }
-      this.reloadOptionCreated = true;
-   };
-
    //build the overlay used to display field data
    UIBuilder.prototype.showDataOverlay = function () {
 
@@ -146,7 +124,6 @@ var UIBuilder = (function() {
 
 
 var manager = new pageManager(); //main cache of the page manager
-manager.buildPage(); //add any necessary UI elements to page
 
 
 /* Chrome API's */

diff --git a/js/knockout-mapping.js b/js/knockout-mapping.js
diff --git a/js/settings.js b/js/settings.js
@@ -1,10 +1,19 @@
+var controller;
+
 window.onload = function () {
 
    var page = new settingsPage(false);
    page.initialise();
 
+   controller = chrome.extension.getBackgroundPage().controller;
 };
 
+//Allows different display targets to be used via constants
+var displayTypes = Object.freeze({
+   CONSOLE: "CONSOLE",
+   PAGE: "PAGE"
+});
+
 //manages the settings page
 var settingsPage = (function () {
 
@@ -17,9 +26,16 @@ var settingsPage = (function () {
       }
 
       //user setting for display target
-      this.display = ko.observable("CONSOLE");
+      this.display = ko.observable(displayTypes.CONSOLE);
       this.shortcuts = ko.observableArray();
-
+      this.settingsSaved = ko.observable(false);
+      this.selectConsole = function () {
+         this.display(displayTypes.CONSOLE);
+      };
+      this.selectPage = function () {
+         this.display(displayTypes.PAGE);
+      };
+
       //handles the read and write of display binding
       this.display.forEdit = ko.computed({
          read: function () {
@@ -46,7 +62,6 @@ var settingsPage = (function () {
       evadi.blabr.shortcuts.getAll(function (commands) {
          if (commands && commands.length > 1) {
             commands.shift();
-            console.log(commands);
             _this.shortcuts(commands);
          }
       });
@@ -58,16 +73,19 @@ var settingsPage = (function () {
       if (settings) {
          this.display(settings["display"]);
       }
-      else {
-         console.log("no settings file found");
-      }
    };
 
    //handles the UI element for saving settings - passes on the data provider
    settingsPage.prototype.saveSettings = function () {
       //read state of the page and save the settings
-      evadi.blabr.data.saveSettings(ko.toJSON(this), function() {
-         console.log("settings saved");
+      var _this = this;
+      var settings = ko.toJSON(this);
+      evadi.blabr.data.saveSettings(settings, function() {
+         _this.settingsSaved(true);
+         controller.updateSettings(ko.mapping.toJS(_this));
+         window.setTimeout(function () {
+            _this.settingsSaved(false);
+         }, 2000);
       });
    };