more wip scenarios support, ui tweaks

getlantern · Nov 29, 2012 · 312b11b · 312b11b
1 parent 87c7390
commit 312b11b
Show file tree

Hide file tree

Showing 12 changed files with 302 additions and 202 deletions.
diff --git a/app/_css/app.css b/app/_css/app.css
@@ -5083,34 +5083,31 @@ label.checkbox.inline, label.radio.inline {
 }
 
 .btn-dev {
-  background-color: #f9a732;
-  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
-  background-image: -ms-linear-gradient(top, #fbb450, #f89406);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
-  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
-  background-image: -o-linear-gradient(top, #fbb450, #f89406);
-  background-image: linear-gradient(top, #fbb450, #f89406);
+  background-color: #fff12e;
+  background-image: -moz-linear-gradient(top, #fff343, #fff010);
+  background-image: -ms-linear-gradient(top, #fff343, #fff010);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff343), to(#fff010));
+  background-image: -webkit-linear-gradient(top, #fff343, #fff010);
+  background-image: -o-linear-gradient(top, #fff343, #fff010);
+  background-image: linear-gradient(top, #fff343, #fff010);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
-  border-color: #f89406 #f89406 #ad6704;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff343', endColorstr='#fff010', GradientType=0);
+  border-color: #fff010 #fff010 #c3b600;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) fadein(rgba(0, 0, 0, 0.1), 15%);
-  *background-color: #f89406;
+  *background-color: #fff010;
   /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 .btn-dev:hover, .btn-dev:active, .btn-dev.active, .btn-dev.disabled, .btn-dev[disabled] {
-  background-color: #f89406;
-  *background-color: #df8505;
+  background-color: #fff010;
+  *background-color: #f5e600;
 }
 .btn-dev:active, .btn-dev.active {
-  background-color: #c67605 \9;
+  background-color: #dcce00 \9;
 }
 
-.btn-give-mode,
-.btn-get-mode,
 .btn-dev {
-  color: white;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  color: #b3aa1e;
 }
 
 a.never-underlined {
@@ -5562,13 +5559,18 @@ body.showVis #footer {
 
 #model {
   position: absolute;
-  top: 20px;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 41px;
+  bottom: 41px;
+  left: 20px;
+  width: 500px;
   overflow: scroll;
   background-color: white;
+  opacity: 0.9;
   z-index: 1051;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  border-radius: 5px;
 }
 #model * {
   font-size: 11.9px;

diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -525,25 +525,19 @@ function GiveModeForbiddenCtrl($scope, logFactory, MODAL) {
   });
 }
 
-function ScenarioCtrl($scope, apiSrvc, logFactory, modelSrvc, dev, MODAL) {
-  var log = logFactory('DevCtrl'),
+function ScenariosCtrl($scope, apiSrvc, logFactory, modelSrvc, dev, MODAL) {
+  var log = logFactory('ScenariosCtrl'),
       model = modelSrvc.model;
 
   $scope.show = false;
   $scope.$watch('model.modal', function(val) {
-    $scope.show = val == MODAL.scenario;
+    $scope.show = val == MODAL.scenarios;
   });
 
-  $scope.$watch('model.mock.scenarios.available', function(val) {
-    if (typeof val == 'undefined') return;
-    $scope.scenarios = {};
-    for (var i=0, s=val[i], l=val.length; i<l; s=val[++i]) {
-      $scope.scenarios[s] = modelSrvc.get('mock.scenarios.all.'+s).desc;
-    }
-  });
+  $scope.multiple = true; // XXX without this, ui-select2 with "multiple" attr causes an exception
 
   $scope.submit = function() {
-    log.debug('scenario:', $scope.scenario);
+    log.debug($scope.appliedScenarios);
     log.error('TODO');
   };
 }

diff --git a/app/js/services.js b/app/js/services.js
@@ -64,7 +64,7 @@ angular.module('app.services', [])
     giveModeForbidden: 'giveModeForbidden',
     about: 'about',
     updateAvailable: 'updateAvailable',
-    scenario: 'scenario',
+    scenarios: 'scenarios',
     none: ''
   })
   .constant('INTERACTION', {
@@ -96,7 +96,7 @@ angular.module('app.services', [])
   })
   // more flexible log service
   // https://groups.google.com/d/msg/angular/vgMF3i3Uq2Y/q1fY_iIvkhUJ
-  .value('logWhiteList', /.*Ctrl|.*Srvc/)
+  .value('logWhiteList', /ScenariosCtrl/)// /.*Ctrl|.*Srvc/)
   .factory('logFactory', function($log, dev, logWhiteList) {
     return function(prefix) {
       var match = prefix

diff --git a/app/partials/developer.html b/app/partials/developer.html
@@ -1,14 +1,15 @@
 <div id="dev-buttons" class="btn-group" ng-show="dev.value">
+  <button class="btn btn-mini btn-dev" ng-click="interaction(INTERACTION.scenarios)"
+          ui-jq="tooltip" rel="tooltip" data-original-title="Scenarios"
+          ui-options="{placement: 'bottom'}">
+    <i class="icon-magic"></i>
+  </button>
   <button class="btn btn-mini btn-dev"
           data-toggle="collapse" data-target="#model"
           ui-jq="tooltip" rel="tooltip" data-original-title="Model"
           ui-options="{placement: 'bottom'}">
     <i class="icon-reorder"></i>
-  </button>
-  <button class="btn btn-mini btn-dev" ng-click="interaction(INTERACTION.scenarios)"
-          ui-jq="tooltip" rel="tooltip" data-original-title="Scenarios"
-          ui-options="{placement: 'bottom'}">
-    <i class="icon-magic"></i>
+    <span class="caret"></span>
   </button>
 </div>
 

diff --git a/app/partials/modals.html b/app/partials/modals.html
@@ -122,7 +122,7 @@ <h3>{{ 'WELCOME_TITLE' | i18n }}</h3>
     <div>{{ 'WELCOME_PROMPT' | i18n }}</div>
   </div>
   <div class="modal-footer">
-    <button type="button" ng-click="interaction(MODE.give)"
+    <button type="button" ui-if="!inCensoringCountry" ng-click="interaction(MODE.give)"
       class="btn btn-primary btn-{{inCensoringCountry && 'warning' || 'give-mode' }}">
       <i ng-show="inCensoringCountry" class="icon-warning-sign"></i>
       {{ 'GIVE_ACCESS' | i18n }}</button>
@@ -641,20 +641,23 @@ <h3>{{ 'SETTINGS' | i18n }}</h3>
   </div>
 </div>
 
-<div id="scenario" ng-controller="ScenarioCtrl" ng-model="show"
+<div id="scenarios" ng-controller="ScenariosCtrl" ng-model="show"
      ui-modal class="fade" data-backdrop="static" data-keyboard="false">
   <div class="modal-header">
-    <h3>Choose a scenario</h3>
+    <h3>Applied scenarios</h3>
   </div>
   <div class="modal-body">
-    <select ui-select2 ng-model="scenario" placeholder="scenario" required
-      style="width: 450px">
-      <option value=""></option>
-      <option ng-repeat="(func, desc) in scenarios" value="{{ func }}">{{ desc }}</option>
+    <div>{{ model.mock.scenarios.prompt }}</div>
+    <select ui-select2 multiple ng-multiple="multiple" ng-model="selected"
+            placeholder="Choose applied scenarios" required style="width: 530px">
+      <optgroup ng-repeat="(group, scenarios) in model.mock.scenarios.all" label="{{ group }}">
+        <option ng-repeat="(key, scen) in scenarios" value="{{ key }}">[{{ key }}] {{ scen.desc }}</option>
+      </optgroup>
     </select> 
+    <div><code>selected: {{ selected | json }}</code></div>
   </div>
   <div class="modal-footer">
-    <button type="button" ng-click="interaction(INTERACTION.cancel)" class="btn">Cancel</button>
-    <button type="button" ng-click="submit()" class="btn btn-dev">Continue</button>
+    <button type="button" class="btn btn-primary" ng-click="submit()"
+            ng-disabled="invalid">Continue</button>
   </div>
 </div>
diff --git a/mock/RESETMODEL.json b/mock/RESETMODEL.json
@@ -1,54 +1,11 @@
 {
-  "mock":{
-    "scenarios":{}
-  },
   "system":{
-    "os":"osx",
     "lang":"en"
   },
-  "location":{
-    "lat":39.904041,
-    "lon":116.407528,
-    "country":"cn"
-  },
-  "countries":{
-    "cn":{"censors": true},
-    "cu":{"censors": true},
-    "ir":{"censors": true},
-    "mm":{"censors": true},
-    "sy":{"censors": true},
-    "tm":{"censors": true},
-    "uz":{"censors": true},
-    "vn":{"censors": true},
-    "bh":{"censors": true},
-    "by":{"censors": true},
-    "sa":{"censors": true},
-    "kp":{"censors": true}
-  },
-  "version":{
-    "installed":{
-      "major":0,
-      "minor":22,
-      "patch":0,
-      "tag":"beta",
-      "git":"ac7de5f",
-      "releaseDate":"2012-12-12",
-      "modelSchema":{
-        "major":0,
-        "minor":0,
-        "patch":1
-      },
-      "httpApi":{},
-      "bayeuxProtocol":{}
-    },
-    "updateAvailable":false
-  },
+  "location":{},
   "modal":"welcome",
   "showVis": false,
   "connectivity":{
-    "internet":true,
-    "ip":"123.123.123.123",
-    "gtalkOauthUrl":"/app/fakeOauth.html",
     "gtalkAuthorized":false,
     "gtalk":"notConnected",
     "peers":{
@@ -76,5 +33,40 @@
     "systemProxy":true,
     "proxyAllSites":false,
     "proxiedSites":[]
+  },
+  "version":{
+    "installed":{
+      "major":0,
+      "minor":22,
+      "patch":0,
+      "tag":"beta",
+      "git":"ac7de5f",
+      "releaseDate":"2012-12-12",
+      "modelSchema":{
+        "major":0,
+        "minor":0,
+        "patch":1
+      },
+      "httpApi":{},
+      "bayeuxProtocol":{}
+    },
+    "updateAvailable":false
+  },
+  "countries":{
+    "cn":{"censors": true},
+    "cu":{"censors": true},
+    "ir":{"censors": true},
+    "mm":{"censors": true},
+    "sy":{"censors": true},
+    "tm":{"censors": true},
+    "uz":{"censors": true},
+    "vn":{"censors": true},
+    "bh":{"censors": true},
+    "by":{"censors": true},
+    "sa":{"censors": true},
+    "kp":{"censors": true}
+  },
+  "mock":{
+    "scenarios":{}
   }
 }
diff --git a/mock/bayeux_backend.js b/mock/bayeux_backend.js
@@ -4,6 +4,7 @@ var fs = require('fs')
   , util = require('util')
   , faye = require('./node_modules/faye')
   , ApiServlet = require('./http_api').ApiServlet
+  , getByPath = require('./helpers').getByPath
   ;
 
 
@@ -34,7 +35,7 @@ BayeuxBackend.prototype.resetModel = function() {
   this.model.mock.scenarios.all = ApiServlet.SCENARIOS;
 };
 
-BayeuxBackend.prototype._getModelValue = function(path) {
+BayeuxBackend.prototype.get = function(path) {
   var val = this.model;
   path.split('.').forEach(function(name) {
     if (name && typeof val != 'undefined')
@@ -45,7 +46,7 @@ BayeuxBackend.prototype._getModelValue = function(path) {
 
 BayeuxBackend.prototype.publishSync = function(path) {
   path = path || '';
-  var value = this._getModelValue(path);
+  var value = this.get(path); // XXX use getByPath
   // this._bayeux.getClient().publish({ // XXX why doesn't this work?
   this._bayeux._server._engine.publish({
     channel: '/sync',

diff --git a/mock/helpers.js b/mock/helpers.js
@@ -0,0 +1,39 @@
+function getByPath(obj, path) {
+  var path = path.split('.');
+  for (var i=0, name=path[i];
+       name && typeof obj != 'undefined';
+       obj=name ? obj[name] : obj, name=path[++i]);
+  return obj;
+}
+
+function merge(dst, path, src) {
+  var path = path.split('.'), last = path.slice(-1)[0];
+  for (var i=0, name=path[i], l=path.length; i<l-1; name=path[++i]) {
+    if (typeof dst[name] != 'object' && path[i+1])
+      dst[name] = {};
+    dst = dst[name];
+  }
+  if (Array.isArray(src)) {
+    if (last)
+      dst[last] = src.slice();
+    else
+      dst = src.slice();
+  } else if (typeof src != 'object') {
+    if (last)
+      dst[last] = src;
+    else
+      dst = src;
+  } else {
+    if (last) {
+      if (typeof dst[last] != 'object') 
+        dst[last] = {};
+      dst = dst[last];
+    }
+    for (var key in src) {
+      dst[key] = src[key];
+    }
+  }
+}
+
+exports.getByPath = getByPath;
+exports.merge = merge;