Sync designer tool variables when there are server side changes

lib/app/js/controllers/main.js

@@ -18,11 +18,7 @@ angular.module('sgApp')
     $scope.variables = Variables.variables;
 
     // Bind variable to scope to wait for data to be resolved
-    $scope.socket = {};
-
-    Variables.getSocket().then(function(response) {
-      $scope.socket = response;
-    });
+    $scope.socket = Variables.socket;
 
     // Check if section is a main section
     $scope.filterMainSection = function(section) {

lib/app/js/services/Styleguide.js

@@ -21,12 +21,13 @@ angular.module('sgApp')
       }).success(function(response) {
         _this.config.data = response.config;
         _this.sections.data = response.sections;
-        console.log(_this.sections.data);
       });
     }
 
     $rootScope.$on('styles changed', function() {
       _this.get();
     });
 
+    // Get initial data
+    this.get();
   });

lib/app/js/services/Variables.js

@@ -5,12 +5,10 @@
   var Variables = function(Styleguide, $q, $rootScope) {
 
     var socket,
-      values = {},
-      serverData = {},
-      localData = {},
-      loadPromise = $q.defer();
+      serverData = {};
 
     this.variables = {};
+    this.socket = {};
 
     this.setValue = function(valueName, value) {
       var obj = {};
@@ -20,31 +18,36 @@
     };
 
     this.setValues = function(newValues) {
+      var _this = this;
       if (typeof newValues !== 'object' || newValues === null) {
         throw 'Invalid values!';
       }
-
-      var copy = angular.copy(this.variables);
-      angular.extend(copy, newValues);
-      angular.extend(this.variables, serverData, copy);
-
-      return this;
-    };
-
-    this.getSocket = function() {
-      return loadPromise.promise.then(function() {
-        return socket;
+      var localCopy = angular.copy(this.variables);
+      // Add missing keys to variables
+      angular.forEach(serverData, function(value, key) {
+        if (!localCopy[key]) {
+          _this.variables[key] = serverData[key];
+        }
+      });
+      // Update values and remove keys that does not exist on server data
+      angular.forEach(localCopy, function(value, key) {
+        if (!serverData[key]) {
+          delete _this.variables[key];
+        } else if (newValues[key]) {
+          _this.variables[key] = newValues[key];
+        }
       });
+      return this;
     };
 
     this.setSocket = function(newSocket) {
       var _this = this;
-      socket = newSocket;
-      if (socket) {
-        socket.on('styleguide progress start', function() {
+      this.socket = newSocket;
+      if (this.socket) {
+        this.socket.on('styleguide progress start', function() {
           $rootScope.$broadcast('progress start');
         });
-        socket.on('styleguide progress end', function() {
+        this.socket.on('styleguide progress end', function() {
           $rootScope.$broadcast('progress end');
           $rootScope.$broadcast('styles changed');
         });
@@ -62,48 +65,41 @@
 
       // Load variables from server or localStorage
       if (method === 'load') {
-        socket.emit('request variables from server');
+        this.socket.emit('request variables from server');
       }
 
       // Save variables to server or localStorage
       if (method === 'save') {
-        socket.emit('variables to server', this.variables);
+        this.socket.emit('variables to server', this.variables);
       }
     };
 
     this.saveVariables = function() {
       var _this = this;
-      this.getSocket().then(function(socket) {
-        if (socket) {
-          _this.sync('save');
-        } else {
-          throw 'Socket not available.';
-        }
-      });
+      if (this.socket) {
+        _this.sync('save');
+      } else {
+        throw 'Socket not available.';
+      }
     };
 
     // Start constructor
     this.init = function() {
       var _this = this;
-      return Styleguide.get().then(function(response) {
-        // Get initial values from styleguide.json
-        serverData = response.data.config.settings;
-        _this.setValues({});
-
-        // If io is defined, override values from server
-        if (typeof io !== 'undefined') {
-          _this.setSocket(io('/'));
-        } else {
-          _this.setSocket(null);
-        }
-
-        // Resolve data to be called out of init scope
-        loadPromise.resolve();
+      // If io is defined, override values from server
+      if (typeof io !== 'undefined') {
+        _this.setSocket(io('/'));
+      } else {
+        _this.setSocket(null);
+      }
 
-        return loadPromise.promise;
-      },
-      function(response) {
-        console.log('Error response: ', response);
+      $rootScope.$watch(function() {
+        return Styleguide.config.data;
+      }, function(newValue) {
+        if (newValue) {
+          serverData = newValue.settings;
+          _this.setValues({});
+        }
       });
     };
 

test/angular/controllers/mainCtrl.js

@@ -25,12 +25,7 @@ describe('Controller: MainCtrl', function() {
     module(function($provide) {
       $provide.value('Styleguide', json);
       $provide.value('Variables', {
-        init: function() {},
-        getSocket: function() {
-          return {
-            then: function() {}
-          }
-        }
+        init: function() {}
       });
     });
   });
@@ -53,6 +48,7 @@ describe('Controller: MainCtrl', function() {
     httpBackend.expectGET('views/sections.html').respond('');
 
     httpBackend.flush();
+    localStorageService.clearAll();
   }));
 
   it('should be defined', function() {

test/angular/services/variables.js

@@ -2,68 +2,57 @@
 
 describe('Service: Variables', function() {
   var Variables,
-    json = {
-      data: {
-        config: {
+    styleguideMock,
+    rootScope;
+
+  beforeEach(angular.mock.module('sgApp'));
+
+  beforeEach(module(function($provide) {
+    styleguideMock = {
+      config: {
+        data: {
           settings: {
             setting1: 'value1',
             setting2: 'value2'
           }
         }
       }
-    },
-    styleguideMock = {};
-
-  beforeEach(angular.mock.module('sgApp'));
-
-  beforeEach(module(function($provide) {
+    };
     $provide.value('Styleguide', styleguideMock);
   }));
 
-  beforeEach(inject(function($q) {
-    styleguideMock.get = function() {
-      var deferred = $q.defer();
-      deferred.resolve(json);
-      return deferred.promise;
-    }
-  }));
-
   beforeEach(function() {
-    inject(function(_Variables_) {
+    inject(function(_Variables_, $rootScope) {
+      rootScope = $rootScope;
       window.io = sinon.spy();
       Variables = _Variables_;
     });
   });
 
-  it('should get default values from Styleguide service', function(done) {
-    inject(function($rootScope) {
-      Variables.init().then(function() {
-        expect(Variables.variables).to.eql({setting1: 'value1', setting2: 'value2'});
-        done();
-      });
-      $rootScope.$apply();
-    });
+  it('should get default values from Styleguide service', function() {
+    rootScope.$digest();
+    expect(Variables.variables).to.eql({setting1: 'value1', setting2: 'value2'});
   });
 
-  it('should respect locally set values before initialization', function(done) {
-    inject(function($rootScope) {
-      Variables.setValues({setting1: 'changed', setting3: 'newValue'});
-      Variables.init().then(function() {
-        expect(Variables.variables).to.eql({setting1: 'changed', setting2: 'value2', setting3: 'newValue'});
-        done();
-      });
-      $rootScope.$apply();
-    });
+  it('should change values properly', function() {
+    rootScope.$digest();
+    Variables.setValues({setting1: 'changed'});
+    rootScope.$digest();
+    expect(Variables.variables).to.eql({setting1: 'changed', setting2: 'value2'});
   });
 
-  it('should make call to document root', function(done) {
-    inject(function($rootScope) {
-      Variables.getSocket().then(function(response) {
-        expect(window.io.calledWith('/')).to.be.ok;
-        done();
-      });
-      $rootScope.$apply();
-    });
+  it('should remove local values that does not exist on server side', function() {
+    rootScope.$digest();
+    delete styleguideMock.config.data.settings.setting1;
+    Variables.setValues({});
+    expect(Variables.variables).to.eql({setting2: 'value2'});
   });
 
+  it('should allow new server side keys', function() {
+    rootScope.$digest();
+    styleguideMock.config.data.settings.setting3 = 'default';
+    Variables.setValues({});
+    Variables.setValues({setting3: 'new value'});
+    expect(Variables.variables).to.eql({setting1: 'value1', setting2: 'value2', setting3: 'new value'});
+  });
 });