Merge pull request #409 from SC5/dev

0.2.18
SC5 · Jan 15, 2015 · 8d1c2dc · 8d1c2dc
2 parents b4a0f36 + b73b87e
commit 8d1c2dc
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,17 +1,12 @@
-## 0.2.17 (2015-01-08)
+## 0.2.18 (2015-01-15)
 
 ### Features
-* Example to shows colors with functions (#[379](https://github.com/SC5/sc5-styleguide/pull/379))
-* --port help added to CLI (#[376](https://github.com/SC5/sc5-styleguide/pull/376))
+* Create 404 page. Use ui-sref to generate internal links (#[402](https://github.com/SC5/sc5-styleguide/pull/402))
 
-### Fixes
-* Clean up custom KSS params before processing KSS (#[385](https://github.com/SC5/sc5-styleguide/pull/385))
-* Remove defined in texts in variables. Update KSS example data (#[373](https://github.com/SC5/sc5-styleguide/pull/373))
+### Improvements
+* Parse only the given syntax when parsing variables (#[406](https://github.com/SC5/sc5-styleguide/pull/406))
+* Hide progress bar when socket connection is lost (#[398](https://github.com/SC5/sc5-styleguide/pull/398))
 
 ### Internal
-* Move gulp test tasks to own file (#[383](https://github.com/SC5/sc5-styleguide/pull/383))
-* Move bin/styleguide to lib/cli.js (#[384](https://github.com/SC5/sc5-styleguide/pull/384))
-* Improve npm integration tests (#[382](https://github.com/SC5/sc5-styleguide/pull/382))
-* Add npm package integration test (#[378](https://github.com/SC5/sc5-styleguide/pull/378))
-* Correct markup for code in README (#[367](https://github.com/SC5/sc5-styleguide/pull/367))
+* Fix tests when running with newest KSS (#[394](https://github.com/SC5/sc5-styleguide/pull/394))
 
diff --git a/lib/app/js/app.js b/lib/app/js/app.js
@@ -19,7 +19,7 @@ angular.module('sgApp', [
         controller: 'MainCtrl'
       })
       .state('app.index.overview', {
-        url: '/overview',
+        url: '/',
         templateUrl: 'overview.html',
         controller: function($rootScope, Styleguide) {
           $rootScope.currentSection = 'overview';
@@ -39,7 +39,7 @@ angular.module('sgApp', [
         }
       })
       .state('app.index.section', {
-        url: '/:section',
+        url: '/section/:section',
         templateUrl: 'views/sections.html',
         controller: 'SectionsCtrl',
         resolve: {
@@ -63,7 +63,7 @@ angular.module('sgApp', [
         }
       })
       .state('app.fullscreen', {
-        url: '/:section/fullscreen',
+        url: '/section/:section/fullscreen',
         templateUrl: 'views/element-fullscreen.html',
         controller: 'ElementCtrl',
         resolve: {
@@ -73,6 +73,9 @@ angular.module('sgApp', [
             }
           }
         }
+      }).state('app.index.404', {
+        url: '/:all',
+        templateUrl: 'views/404.html'
       });
 
     $locationProvider.html5Mode(true);

diff --git a/lib/app/js/controllers/appCtrl.js b/lib/app/js/controllers/appCtrl.js
@@ -40,6 +40,7 @@ angular.module('sgApp')
       $scope.$on('socket disconnected', function() {
         console.error('Socket connection dropped');
         //TODO: disable Designer Tool 'save changes' button?
+        ngProgress.reset();
       });
 
       $scope.$on('socket error', function(err) {

diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
@@ -35,7 +35,7 @@ angular.module('sgApp')
     // Change route to /all when searching
     $scope.$watch('search.$', function(newVal) {
       if (newVal && newVal.length > 0) {
-        $location.url('all');
+        $state.go('app.index.section', {section: 'all'});
       }
     });
 

diff --git a/lib/app/views/404.html b/lib/app/views/404.html
@@ -0,0 +1 @@
+<p class="sg">Page not found</p>
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
@@ -35,22 +35,22 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
         <a class="sg"
           ng-class="currentSection === 'overview' ? 'active' : ''"
           ng-click="clearSearch()"
-          href="overview">
+          ui-sref="app.index.overview">
           Overview
         </a>
       </li>
       <li ng-repeat="section in sections.data | filter: filterMainSections">
         <a class="sg"
           ng-class="$root.currentSection === section.reference ? 'active' : ''"
           ng-click="clearSearch()"
-          href="{{ section.reference }}">
+          ui-sref="app.index.section({section: {{section.reference}}})">
           {{ section.reference }} {{ section.header }}
         </a>
       </li>
       <li>
         <a class="sg"
           ng-class="currentSection === 'all' ? 'active' : ''"
-          href="all">
+          ui-sref="app.index.section({section: 'all'})">
           Show all sections
         </a>
       </li>

diff --git a/lib/app/views/partials/section.html b/lib/app/views/partials/section.html
@@ -1,7 +1,7 @@
 <section class="sg section"
   ng-class="{active: isActive(section), main: isEmptyMainSection(section)}">
   <header class="sg section-header">
-    <a ng-href="{{section.reference}}">
+    <a ui-sref="app.index.section({section: '{{section.reference}}'})">
       <i class="fa fa-link"></i>
       <h1 class="sg">
         <span class="reference-number">{{ section.reference }}</span>
@@ -21,7 +21,7 @@ <h1 class="sg">
   <div ng-repeat-start="mod in section.modifiers"></div>
   <div class="sg section-partial">
     <div class="sg label">
-      <a ng-href="{{section.reference}}-{{mod.id}}/fullscreen" target="_blank">
+      <a ui-sref="app.fullscreen({section: '{{section.reference}}-{{mod.id}}'})" target="_blank">
         <span class="sg name" ng-bind-html="mod.name | unsafe"></span><i class="fa fa-arrows-alt"></i>
       </a>
     </div>
@@ -32,7 +32,7 @@ <h1 class="sg">
     class="sg section-partial"
     ng-if="!section.modifiers.length && section.markup">
     <div class="sg label">
-      <a ng-href="{{section.reference}}/fullscreen" target="_blank">
+      <a ui-sref="app.fullscreen({section: '{{section.reference}}'})" target="_blank">
         <i class="fa fa-arrows-alt"></i>
       </a>
     </div>

diff --git a/lib/modules/variable-parser.js b/lib/modules/variable-parser.js
@@ -20,48 +20,56 @@ function parseVariableDeclarations(string, syntax) {
       ast = gonzales.srcToAST({
         src: string,
         syntax: syntax
-      });
-
-  gonzo.traverse(ast, [{
-    // Visitor for SASS and SCSS syntaxes
-    test: function(name, nodes) {
-      return name === 'declaration' && nodes[1][0] === 'variable';
-    },
-    process: function(nodes) {
-      var varName = nodes[1][1][1].filter(function(element) {
-        return element !== 'ident';
-      })[0];
-
-      out.push({name: varName, value: astToSrc(nodes[4], syntax)});
-    }
-  }, {
-    // Visitor for LESS syntax
-    test: function(name) {
-      return name === 'atrules';
-    },
-    process: function(nodes) {
-      var varName = nodes[1][1][1],
-        varVal = '';
-
-      // Skip at-keywords that do not decrade variable (Ex. @imports)
-      if (nodes[2][0] === 'operator' && nodes[2][1] === ':') {
-        /* Grabs all the listed values
-         * Fix then https://github.com/tonyganch/gonzales-pe/issues/17 is fixed */
-        nodes.forEach(function(element) {
-          if (element === 'atrules' || element[0] === 'atkeyword') {
-            return;
+      }),
+      visitors = {
+        sass: {
+          // Visitor for SASS and SCSS syntaxes
+          test: function(name, nodes) {
+            return name === 'declaration' && nodes[1][0] === 'variable';
+          },
+          process: function(nodes) {
+            var varName = nodes[1][1][1].filter(function(element) {
+              return element !== 'ident';
+            })[0];
+
+            out.push({name: varName, value: astToSrc(nodes[4], syntax)});
           }
-          if (element[0] === 'operator' && element[1] === ':'
-          ) {
-            return;
+        },
+        less: {
+          // Visitor for LESS syntax
+          test: function(name) {
+            return name === 'atrules';
+          },
+          process: function(nodes) {
+            var varName = nodes[1][1][1],
+              varVal = '';
+
+            // Skip at-keywords that do not decrade variable (Ex. @imports)
+            if (nodes[2][0] === 'operator' && nodes[2][1] === ':') {
+              /* Grabs all the listed values
+              * Fix then https://github.com/tonyganch/gonzales-pe/issues/17 is fixed */
+              nodes.forEach(function(element) {
+                if (element === 'atrules' || element[0] === 'atkeyword') {
+                  return;
+                }
+                if (element[0] === 'operator' && element[1] === ':'
+                ) {
+                  return;
+                }
+                varVal += astToSrc(element, syntax); // Syntax is always less as this visitor is only for LESS
+              });
+
+              out.push({name: varName, value: varVal.trim()});
+            }
           }
-          varVal += astToSrc(element, syntax); // Syntax is always less as this visitor is only for LESS
-        });
+        }
+      },
+      visitor;
 
-        out.push({name: varName, value: varVal.trim()});
-      }
-    }
-  }]);
+  visitors.scss = visitors.sass;
+  visitor = visitors[syntax];
+
+  gonzo.traverse(ast, [visitor]);
 
   return out;
 }
@@ -74,32 +82,29 @@ function findVariables(string, syntax) {
       ast = gonzales.srcToAST({
         src: string,
         syntax: syntax
-      });
+      }),
+      visitors = {
+        sass: {
+          // Visitor for SASS and SCSS syntaxes
+          test: function(name, nodes) {
+            return (name === 'declaration' && nodes[1][0] === 'variable') || (name === 'variable' && nodes[0] === 'ident');
+          },
+          process: function(nodes) {
+            if (nodes[0] !== 'declaration') {
+              out.push(nodes[1][1]);
+            }
+          }
+        }
+      },
+      visitor;
+
+  // For this task LESS visitor is identical to SASS
+  visitors.less = visitors.sass;
+  visitors.scss = visitors.sass;
+  visitor = visitors[syntax];
 
   // Find variables that are used in the styles
-  gonzo.traverse(ast, [{
-    // Visitor for SASS and SCSS syntaxes
-    test: function(name, nodes) {
-      return (name === 'declaration' && nodes[1][0] === 'variable') || (name === 'variable' && nodes[0] === 'ident');
-    },
-    process: function(nodes) {
-      if (nodes[0] !== 'declaration') {
-        out.push(nodes[1][1]);
-      }
-    }
-  }, {
-    // Visitor for LESS syntax
-    test: function(name) {
-      return name === 'value';
-    },
-    process: function(nodes) {
-      nodes.forEach(function(element) {
-        if (element[0] === 'atkeyword' && element[1][0] === 'ident') {
-          out.push(element[1][1]);
-        }
-      });
-    }
-  }]);
+  gonzo.traverse(ast, [visitor]);
   return out;
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sc5-styleguide",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation.",
   "bin": {
     "styleguide": "./bin/styleguide"

diff --git a/test/angular/unit/controllers/element.test.js b/test/angular/unit/controllers/element.test.js
@@ -56,8 +56,10 @@ describe('ElementCtrl', function() {
       section: '1.1-1'
     };
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     ctrl = $controller('ElementCtrl', {
       $scope: scope,
       $stateParams: stateParams

diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js
@@ -51,8 +51,10 @@ describe('Controller: MainCtrl', function() {
       Variables: variablesService
     });
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     httpBackend.flush();
     localStorageService.clearAll();
   }));

diff --git a/test/angular/unit/controllers/sections.test.js b/test/angular/unit/controllers/sections.test.js
@@ -49,8 +49,10 @@ describe('SectionsCtrl', function() {
       section: '1.1'
     };
 
+    httpBackend.whenGET('overview.html').respond('');
     httpBackend.whenGET('views/main.html').respond('');
     httpBackend.whenGET('views/sections.html').respond('');
+    httpBackend.whenGET('views/404.html').respond('');
     ctrl = $controller('SectionsCtrl', {
       $scope: scope,
       $stateParams: stateParams

diff --git a/test/unit/modules/kss-splitter.test.js b/test/unit/modules/kss-splitter.test.js
@@ -179,7 +179,7 @@ $a: b;
         },
         {
           kss: '// Comment\n// Styleguide 2.0',
-          code: '\n\n\n.a { b: c }'
+          code: '\n\n\n.a { b: c }\n'
         }
       ],
       kssBlocks = kssSplitter.getBlocks(str);
@@ -403,7 +403,7 @@ a:before { content: "/* ..." }
           code: '\n\na:before { content: "/* ..." }\n\n'
         },
         {
-          kss: '// Comment\n// Styleguide 2',
+          kss: '// Comment\n// Styleguide 2\n',
           code: ''
         }
       ],

diff --git a/test/unit/modules/variable-parser.test.js b/test/unit/modules/variable-parser.test.js
@@ -187,13 +187,13 @@ describe('Variable Parser', function() {
         var str = multiline(function() {
           /*
           .testStyle {
-            $sum: @var1 + @var2;
+            @sum: @var1 + @var2;
             padding: @sum;
           }
           */
         }),
         result = ['sum'];
-        expect(parser.findVariables(str)).eql(result);
+        expect(parser.findVariables(str, 'less')).eql(result);
       });
 
     });