Merge pull request #142 from hannu/initial-progress

Refactor localstorage handling. Persist designer tool visibility

Author: varya

README.md

@@ -174,7 +174,7 @@ When using the build as a subfolder of your application, tune your server to res
 will let Angular application to deal with routing itself. However, the static files should be resolved as they are
 stored.
 
-**sassVariables** (string, optional)
+**styleVariables** (string, optional)
 
 Path to the file containing SASS variables that can be used as modifiers in the KSS notation.
 

lib/app/js/controllers/main.js

@@ -7,22 +7,10 @@ angular.module('sgApp')
     var socket;
 
     $scope.isNavCollapsed = false;
-
-    // Because localStorage only saves String type values, try to convert to boolean
-    $scope.checkIfMarkupVisible = function() {
-      var showAllMarkup = localStorageService.get('showAllMarkup');
-      if (showAllMarkup == null) {
-        $scope.showAllMarkup = true;
-      } else {
-        if (showAllMarkup == 'false' || showAllMarkup === false) {
-          $scope.showAllMarkup = false;
-        } else {
-          $scope.showAllMarkup = true;
-        }
-      }
-    }
-
-    $scope.checkIfMarkupVisible();
+    $scope.markup = {isVisible: true};
+    $scope.designerTool = {isVisible: false};
+    localStorageService.bind($scope, 'markup', {isVisible: true});
+    localStorageService.bind($scope, 'designerTool', {isVisible: false});
 
     // Fetch styleguide data
     Styleguide.get()
@@ -57,11 +45,10 @@ angular.module('sgApp')
 
     // Toggle all markup boxes visible/hidden state
     $scope.toggleMarkup = function() {
-      $scope.showAllMarkup = !$scope.showAllMarkup;
+      $scope.markup.isVisible = !$scope.markup.isVisible;
       for (var i = 0; i < $scope.sections.length; i++) {
-        $scope.sections[i].showMarkup = $scope.showAllMarkup;
+        $scope.sections[i].showMarkup = $scope.markup.isVisible;
       }
-      localStorageService.add('showAllMarkup', $scope.showAllMarkup);
     }
 
     // Change route to /all when searching

lib/app/js/directives/design.js

@@ -5,9 +5,6 @@ angular.module('sgApp')
     return {
       replace: true,
       restrict: 'A',
-      scope: {
-        cfg: '='
-      },
       templateUrl: 'views/partials/design.html',
       link: function(scope) {
         scope.onChange = function(key, value) {

lib/app/js/directives/section.js

@@ -9,7 +9,7 @@ angular.module('sgApp')
       link: function(scope, element, attrs) {
 
         //init setting based on global 'showAllMarkup' value
-        scope.section.showMarkup = scope.$parent.$parent.showAllMarkup;
+        scope.section.showMarkup = scope.markup.isVisible;
 
         scope.showSingleMarkupBox = function(index) {
           if (!scope.section.showMarkup) {

lib/app/sass/app.scss

@@ -332,7 +332,6 @@ $mobile: new-breakpoint(max-width 480px);
   height: $header-height;
   background: rgba($primary-color, 1);
   color: rgba(#fff, 1);
-  padding: 0;
 
   .inner {
     @include outer-container;

lib/app/views/main.html

@@ -50,8 +50,8 @@ <h1 class="sg">{{ $root.config.title }}</h1>
       </li>
     </ul>
     <p class="sg option">
-      <a class="sg" ng-click="toggleMarkup()" ng-show="showAllMarkup">Hide all markup</a>
-      <a class="sg" ng-click="toggleMarkup()" ng-hide="showAllMarkup">Show all markup</a>
+      <a class="sg" ng-click="toggleMarkup()" ng-show="markup.isVisible">Hide all markup</a>
+      <a class="sg" ng-click="toggleMarkup()" ng-hide="markup.isVisible">Show all markup</a>
     </p>
   </nav>
 

lib/app/views/partials/design.html

@@ -1,7 +1,7 @@
 <div class="sg design"
-  ng-class="isDesignVisible ? 'sg-visible' : 'sg-hidden' ">
+  ng-class="designerTool.isVisible ? 'sg-visible' : 'sg-hidden' ">
   <div class="handle"
-    ng-click="isDesignVisible = !isDesignVisible">
+    ng-click="designerTool.isVisible = !designerTool.isVisible">
     Designer Tools
   </div>
   <div class="sg design-content" ng-click="$event.stopPropagation()">

test/angular/controllers/mainCtrl.js

@@ -65,35 +65,28 @@ describe('Controller: MainCtrl', function() {
     expect(scope.sections).to.eql(json.sections);
   });
 
-  describe('getting markup visibility state from localstorage', function() {
-    it('should return true with true values', function() {
-      sinon.stub(localstorage, 'get').returns(true);
-      scope.checkIfMarkupVisible();
-      expect(scope.showAllMarkup).to.eql(true);
-    });
+  it('should have markup shown by default', function() {
+    expect(scope.markup.isVisible).to.eql(true);
+  });
 
-    it('should return true by default', function() {
-      sinon.stub(localstorage, 'get');
-      scope.checkIfMarkupVisible();
-      expect(scope.showAllMarkup).to.eql(true);
-    });
+  it('should change markup visibility when toggling state', function() {
+    scope.toggleMarkup();
+    expect(scope.markup.isVisible).to.eql(false);
+  });
 
-    it('should return false with false string value', function() {
-      sinon.stub(localstorage, 'get').returns('false');
-      scope.checkIfMarkupVisible();
-      expect(scope.showAllMarkup).to.eql(false);
-    });
+  it('should persist new state when toggling state', function() {
+    scope.toggleMarkup();
+    scope.$digest();
+    expect(localstorage.get('markup').isVisible).to.eql(false);
+  });
 
-    it('should return false with false boolean value', function() {
-      sinon.stub(localstorage, 'get').returns(false);
-      scope.checkIfMarkupVisible();
-      expect(scope.showAllMarkup).to.eql(false);
-    });
+  it('should hide designer tool by default', function() {
+    expect(scope.designerTool.isVisible).to.eql(false);
+  });
 
-    it('should return true with unknown values', function() {
-      sinon.stub(localstorage, 'get').returns('foobar');
-      scope.checkIfMarkupVisible();
-      expect(scope.showAllMarkup).to.eql(true);
-    });
+  it('should persist new state when designer tool visibility is changed', function() {
+    scope.designerTool.isVisible = true;
+    scope.$digest();
+    expect(localstorage.get('designerTool').isVisible).to.eql(true);
   });
 });