Implement possibility to reset local variable changes

lib/app/js/directives/design.js

@@ -17,6 +17,10 @@ angular.module('sgApp')
           Variables.saveVariables();
         }
 
+        scope.resetLocal = function() {
+          Variables.resetLocal();
+        }
+
         scope.isColor = function(value) {
           if (/^(#|rgb)/.test(value)) return true;
           return false;

lib/app/js/services/Variables.js

@@ -38,6 +38,16 @@
       return this;
     };
 
+    this.resetLocal = function() {
+      var _this = this;
+      // We need to remove each key individually to keep the object reference the same
+      angular.forEach(this.variables, function(value, key) {
+        delete _this.variables[key];
+      });
+      // Call setValues so that the server data is used
+      this.setValues({});
+    };
+
     this.setSocket = function(newSocket) {
       var _this = this;
       this.socket = newSocket;

lib/app/views/partials/design.html

@@ -14,6 +14,7 @@
     </ul>
     <div class="sg action-footer">
       <button class="sg button primary" ng-click="saveVariables()">Save changes</button>
+      <button class="sg button" ng-click="resetLocal()">Reset local changes</button>
     </div>
   </div>
 </div>

test/angular/services/variables.js

@@ -52,6 +52,15 @@ describe('Service: Variables', function() {
     expect(Variables.variables).to.eql({setting2: 'value2'});
   });
 
+  it('should properly reset local changes', function() {
+    rootScope.$digest();
+    Variables.setValues({setting1: 'changed', setting2: 'changed'});
+    rootScope.$digest();
+    Variables.resetLocal();
+    rootScope.$digest();
+    expect(Variables.variables).to.eql({setting1: 'value1', setting2: 'value2'});
+  });
+
   it('should allow new server side keys with new values', function() {
     rootScope.$digest();
     styleguideMock.config.data = {