Merge pull request #140 from hannu/initial-progress

Emit progress information from gulp task to client. Implement progress bar

Author: varya

README.md

@@ -153,6 +153,18 @@ Options passed to gulp-less
 
 This class is added to all preview blocks in the generated styleguide. If your styles have some namespace class that needs to be added to every block and you do not want to add it to every example you can use commonClass option.
 
+**server** (boolean, optional)
+
+Enable built-in web-server. To enable Desiger tools styleguide must be server with built-in web-server. Server has also ability to refresh changed styles or KSS markup without doing the full page reload.
+
+**port** (number, optional)
+
+Port of the server. Default is 3000.
+
+**rootPath** (string, optional)
+
+Server root path. This must be defined if you run built-in server via gulp or grunt task. Point to the same path as styleguide output folder.
+
 **appRoot** (string, optional)
 
 Define `appRoot` parameter if you host styleguide in other than root folder of the HTTP serve. If
@@ -184,40 +196,6 @@ Configuration array containing paths to the dependencies of the hosted applicati
 
 Note: When using templateUrl in directives, the template path is relative to styleguide index.html, not the hosted application root.
 
-## Built-in server
-
-Styleguide contains built-in web-server to host the styleguide. To enable [Desiger tools](#designer-tools) styleguide must be server with built-in web-server.
-
-### Using CLI
-
-Built-in server is started when styleguide is started with `--server` or with `--watch` parameters.
-
-### Using Gulp
-
-    var server = require("sc5-styleguide").server;
-
-    gulp.task("server", function() {
-      styleguide.server({
-        rootPath: <styleguide root path>,
-        sassVariables: <path to sass variables file>
-      });
-    });
-
-### Automatically apply changed styles to styleguide
-
-Styleguide has ability to use changed styles without reloading the whole page. To enable this feature you must call `server.io.emitChanges()` when the styleguide is generated.
-
-    return gulp.src(sourcePaths)
-      .pipe(styleguide(options))
-      .pipe(gulp.dest(outputPath))
-      .on('end', function() {
-        // Styleguide is updated
-        // Send message to active clients to refresh the new CSS
-        if (server && server.io) {
-          server.io.emitChanges();
-        }
-      });
-
 ## Documenting syntax
 
 Document your CSS components with [KSS](http://warpspire.com/kss/)

bin/styleguide

@@ -50,46 +50,25 @@ if (config.sassVariables) {
   config.sassVariables = path.resolve(path.dirname(argv.config), config.sassVariables);
 }
 options = extend({
-  socketIo: !!argv.server,
   sass: {
     includePaths: neat.includePaths
-  }
+  },
+  server: !!argv.server,
+  port: argv.port,
+  rootPath: outputPath
 }, config);
 
 gulp.task('styleguide', function() {
   gulp.src(sourceFiles)
     .pipe(styleguide(options))
-    .pipe(gulp.dest(outputPath))
-    .on('end', function() {
-      // Styleguide is updated. Send message to active clients to refresh the new CSS
-      if (server && server.io) {
-        server.io.emitChanges();
-      }
-    });
-});
-
-gulp.task('serve', function() {
-  server = require('../lib/server')({
-    rootPath: outputPath,
-    sassVariables: options.sassVariables
-  }),
-    app = serverModule.app,
-    server = serverModule.server;
-
-  app.set('port', util.env.port || 3000);
-  server = server.listen(app.get('port'), function() {
-    console.log('Express server listening on port ' + server.address().port);
-  });
+    .pipe(gulp.dest(outputPath));
 });
 
 gulp.task('watch', function() {
   gulp.watch(sourceFiles, ['styleguide']);
 });
 
 var tasks = ['styleguide'];
-if (argv.server) {
-  tasks.push('serve');
-}
 if (argv.watch) {
   tasks.push('watch');
 }

bower.json

@@ -9,7 +9,8 @@
     "angular-bootstrap-colorpicker": "3.0.8",
     "angular-local-storage": "0.1.0",
     "ui-router": "0.2.11",
-    "oclazyload": "0.3.8"
+    "oclazyload": "0.3.8",
+    "ngprogress": "~1.0.7"
   },
   "devDependencies": {},
   "resolutions": {

gulpfile.js

@@ -20,10 +20,14 @@ var gulp = require('gulp'),
     configPath = util.env.config ? util.env.config.replace(/\/$/, '') : null,
     outputPath = util.env.output ? util.env.output.replace(/\/$/, '') : '',
     sourcePath = util.env.source ? util.env.source.replace(/\/$/, '') : '',
-    options = {},
+    options = {
+      sass: {
+        includePaths: neat.includePaths
+      }
+    },
     server;
 
-function parseOptions() {
+function getBuildOptions() {
   var config = configPath ? require(configPath) : {};
   // Resolve overviewPath in relation to config file location
   if (config.overviewPath) {
@@ -35,26 +39,11 @@ function parseOptions() {
     config.styleVariables = path.resolve(path.dirname(configPath), config.sassVariables);
   }
 
-  options = extend({
-    sass: {
-      includePaths: neat.includePaths
-    },
-    socketIo: false
-  }, config);
+  return extend({
+    rootPath: outputPath
+  }, options, config);
 }
 
-parseOptions();
-
-/* Tasks for development */
-gulp.task('serve', function() {
-  // Since we are running our own server we can enable socketIO
-  options.socketIo = true;
-  server = styleguide.server({
-    rootPath: outputPath,
-    styleVariables: options.styleVariables
-  });
-});
-
 gulp.task('jscs', function() {
   return gulp.src([
     'lib/**/*.js',
@@ -79,14 +68,8 @@ gulp.task('styleguide', function() {
     return 1;
   }
   return gulp.src([sourcePath + '/**/*.scss'])
-    .pipe(styleguide(options))
-    .pipe(gulp.dest(outputPath))
-    .on('end', function() {
-      // Styleguide is updated. Send message to active clients to refresh the new CSS
-      if (server && server.io) {
-        server.io.emitChanges();
-      }
-    });
+    .pipe(styleguide(getBuildOptions()))
+    .pipe(gulp.dest(outputPath));
 });
 
 gulp.task('js:app', function() {
@@ -127,18 +110,17 @@ gulp.task('sass', function() {
 });
 
 gulp.task('demo', function() {
+  options.server = true;
   configPath = __dirname + '/lib/app/styleguide_config.json';
   sourcePath = __dirname + '/lib/app';
   outputPath = __dirname + '/demo-output';
 
-  // We need to re-parse options since configPath has changed
-  parseOptions();
   // Watch changed styles in demo mode
   gulp.watch(sourcePath + '/**/*.scss', function() {
     runSequence('sass', 'styleguide');
   });
   // Run serve first so socketIO options is enabled when building styleguide
-  return runSequence('serve', 'styleguide');
+  return runSequence('styleguide');
 });
 
 gulp.task('html', function() {
@@ -152,8 +134,12 @@ gulp.task('assets', function() {
 });
 
 gulp.task('watch', [], function() {
+  // Enable server by default when watching
+  // Config have possibility to still override this
+  options.server = true;
+
   // Do intial full build and create styleguide
-  runSequence(['serve', 'build'], 'styleguide');
+  runSequence('build', 'styleguide');
 
   gulp.watch('lib/app/sass/**/*.scss', function() {
     runSequence('sass', 'styleguide');

lib/app/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <link rel="icon" href="assets/img/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/css/app.css">
   <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/styleguide.css">
   <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/styleguide_pseudo_styles.css">

lib/app/js/app.js

@@ -4,7 +4,8 @@ angular.module('sgApp', [
   'colorpicker.module',
   'hljs',
   'LocalStorageModule',
-  'oc.lazyLoad'
+  'oc.lazyLoad',
+  'ngProgress'
 ])
   .config(function($stateProvider, $urlRouterProvider, $locationProvider, localStorageServiceProvider, $ocLazyLoadProvider) {
     $stateProvider

lib/app/js/controllers/appCtrl.js

@@ -1,11 +1,33 @@
 'use strict';
 
 angular.module('sgApp')
-  .controller('AppCtrl', function($scope) {
+  .controller('AppCtrl', function($scope, ngProgress) {
+
+    // ngProgress do not respect styles assigned via CSS if we do not pass empty parameters
+    // See: https://github.com/VictorBjelkholm/ngProgress/issues/33
+    ngProgress.height('');
+    ngProgress.color('');
 
     $scope.$on('$viewContentLoaded', function() {
       window.scrollTo(0, 0);
     });
 
+    $scope.$on('progress start', function() {
+      ngProgress.start();
+    });
+
+    $scope.$on('progress end', function() {
+      ngProgress.complete();
+    });
+
+    $scope.$on('styles changed', function() {
+      var links = document.getElementsByTagName('link');
+      for (var l in links) {
+        var link = links[l];
+        if (typeof link === 'object' && link.getAttribute('type') === 'text/css') {
+          link.href = link.href.split('?')[0] + '?id=' + new Date().getTime();
+        }
+      }
+    });
   }
 );

lib/app/js/controllers/main.js

@@ -2,7 +2,7 @@
 
 angular.module('sgApp')
   .controller('MainCtrl', function($scope, $location, $state, $rootScope,
-    Styleguide, Variables, localStorageService) {
+    Styleguide, Variables, localStorageService, ngProgress) {
 
     var socket;
 
@@ -71,16 +71,6 @@ angular.module('sgApp')
       };
     });
 
-    $scope.$on('styles changed', function() {
-      var links = document.getElementsByTagName('link');
-      for (var l in links) {
-        var link = links[l];
-        if (typeof link === 'object' && link.getAttribute('type') === 'text/css') {
-          link.href = link.href.split('?')[0] + '?id=' + new Date().getTime();
-        }
-      }
-    });
-
     // Clear search
     $scope.clearSearch = function() {
       if ($scope.search) {

lib/app/js/services/Variables.js

@@ -41,7 +41,11 @@
       var _this = this;
       socket = newSocket;
       if (socket) {
-        socket.on('styles changed', function() {
+        socket.on('styleguide progress start', function() {
+          $rootScope.$broadcast('progress start');
+        });
+        socket.on('styleguide progress end', function() {
+          $rootScope.$broadcast('progress end');
           $rootScope.$broadcast('styles changed');
         });
       }

lib/app/sass/_styleguide_variables.scss

@@ -1,10 +1,17 @@
-$default-action-color: #1695A3;
-$designer-tool-width: 30%;
-$header-height: 50px;
-$primary-action-color: #EB7F00;
+// Main color definitions
 $primary-color: #1c3849;
-$primary-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $secondary-color: #E4E4E4;
-$secondary-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$tertiary-color: #F7FCF1;
+
+// Button and link colors
+$primary-action-color: #EB7F00;
+$default-action-color: #1695A3;
 $action-color-change: 5%;
-$tertiary-color: #F7FCF1;
+
+// Fonts
+$primary-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$secondary-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+// Misc
+$designer-tool-width: 30%;
+$header-height: 60px;

lib/app/sass/app.scss

@@ -801,7 +801,7 @@ $mobile: new-breakpoint(max-width 480px);
   z-index: 9000;
 
   background: rgba(#fff, 1);
-  @include transition(all 0.3s ease-out);
+  @include transition(left 0.3s ease-out);
 
   .handle {
     position: absolute;
@@ -832,7 +832,6 @@ $mobile: new-breakpoint(max-width 480px);
 }
 
 .sg.design-content {
-  @include transition(all 0.4s ease-out);
   position: relative;
   overflow-y: auto;
   overflow-x: auto;
@@ -882,6 +881,40 @@ $mobile: new-breakpoint(max-width 480px);
   border-top: 1px solid $secondary-color;
 }
 
+// Progress bar
+//
+// markup:
+// <div id="ngProgress" style="width: 70%; opacity: 1;""></div>
+//
+// Styleguide 4.2
+
+#ngProgress {
+  margin: 0;
+  padding: 0;
+  z-index: 99998;
+  background-color: $primary-action-color;
+  color: $primary-action-color;
+  box-shadow: 0 0 3px 0; /* Inherits the font color */
+  height: 4px;
+  opacity: 0;
+  /* Add CSS3 styles for transition smoothing */
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+}
+
+#ngProgress-container {
+  position: fixed;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+}
+
+
 // Helper elements
 //
 // Helper elements are meant to be used for displaying various attributes that