docs(sass): add sass processor

package.json

@@ -85,6 +85,7 @@
     "node-libs-browser": "^0.5.2",
     "request": "2.53.0",
     "run-sequence": "^1.1.0",
+    "sassdoc": "^2.1.20",
     "semver": "^5.0.1",
     "serve-static": "^1.9.2",
     "source-map-support": "^0.2.10",

scripts/docs/dgeni-config.js

@@ -25,6 +25,7 @@ module.exports = function(currentVersion, initialVersionBuild) {
 .processor(require('./processors/collect-inputs-outputs'))
 .processor(require('./processors/parse-returns-object'))
 .processor(require('./processors/parse-optional'))
+.processor(require('./processors/parse-sass'))
 
 // for debugging docs
 // .processor(function test(){
@@ -165,7 +166,8 @@ module.exports = function(currentVersion, initialVersionBuild) {
   templateEngine.filters.push(
     require('./filters/capital'),
     require('./filters/code'),
-    require('./filters/dump')
+    require('./filters/dump'),
+    require('./filters/platform')
   );
 
   templateFinder.templateFolders.unshift(path.resolve(__dirname, 'templates'));

scripts/docs/filters/platform.js

@@ -0,0 +1,15 @@
+module.exports = {
+  name: 'platform',
+  process: function (str) {
+    switch (str) {
+      case 'ios':
+        return 'iOS'
+      case 'md':
+        return 'Material Design'
+      case 'wp':
+        return 'Windows Platform'
+      default:
+        return 'All'
+    }
+  }
+};

scripts/docs/processors/parse-sass.js

@@ -0,0 +1,143 @@
+var path = require('path');
+var fs = require('fs');
+var Q = require('q');
+var sassdoc = require('sassdoc');
+
+module.exports = function parseSass () {
+  return {
+    $runBefore: ['rendering-docs'],
+    $process: function (docs) {
+
+      var folders = [];
+      var docsByComponent = [];
+      var promises = [];
+      var returnPromise = Q.defer();
+
+      // for each doc, check if new folder(component)
+      // if yes, get styles promises
+      docs.forEach( function(doc, index) {
+        if (doc.fileInfo) {
+          var folder = doc.fileInfo.filePath
+            .split('/')
+            .filter( function (item, index, self) {
+              return index !== self.length -  1;
+            })
+            .join('/');
+          if(folders.indexOf(folder) === -1) {
+            folders.push(folder);
+            docsByComponent.push([doc]);
+            promises.push( getStyles(folder, docsByComponent.length - 1) );
+          } else {
+            docsByComponent[folders.indexOf(folder)].push(doc);
+          }
+        }
+      });
+
+      // when all promises are completed, add sass info
+      Q.allSettled(promises).spread( function () {
+        var folders = Array.prototype.map.bind(arguments)(function (item) {
+          return item.value;
+        });
+        appendStyles(folders, docsByComponent);
+        returnPromise.resolve(docs);
+      }).catch( function (error) {
+        console.log('Sass Error: ' + error);
+        returnPromise.resolve(docs);
+      });
+
+      return returnPromise.promise;
+    }
+  }
+};
+
+function appendStyles(folders, docsByComponent) {
+  folders.forEach( function (folder) {
+
+    var styles = formatStyles(folder);
+
+    if (styles.length) {
+      docsByComponent[folder.index].forEach( function (doc) {
+        doc.sassVariables = styles;
+      });
+    }
+  });
+}
+
+function formatStyles (folder) {
+
+  return folder.styles.filter( function (style) {
+      return style.data && style.data.length;
+  }).map( function (style) {
+
+    var props = style.data.filter( function (item) {
+      return item.property && item.property.length;
+    }).map( function (item) {
+
+      var property = item.property[0];
+
+      return {
+        name: item.context.name || '',
+        default: item.context.value || '',
+        description: property.description || '',
+      };
+    });
+
+    return { platform: style.platform, props: props };
+  });
+}
+
+function getStyles (folder, docIndex) {
+
+  var returnPromise = Q.defer();
+
+  // get component name
+  var component = folder.split('/').pop();
+
+  // generate file names to check
+  var extension = 'scss';
+  var files = [];
+
+  files.push({
+    platform: 'base',
+    path: path.join(folder, [component, extension].join('.'))
+  });
+
+  ['ios', 'md', 'wp'].forEach( function (platform) {
+    var fileName = [component, platform, extension].join('.');
+    files.push({
+      platform: platform,
+      path: path.join(folder, fileName)
+    });
+  });
+
+  // for each file, fetch styles
+  var promises = files.map( function (file) {
+    return Q.promise( function (resolve, reject) {
+      fs.access(file.path, function (err) {
+        if (!err) {
+          sassdoc.parse(file.path )
+            .then( function (data) {
+              resolve( { platform: file.platform, data: data });
+            }).catch( function (error) {
+              reject(error);
+            });
+        } else {
+          // file doesn't exist
+          resolve({ platform: file.platform, data: null });
+        }
+      });
+    });
+  });
+
+  // when all promises are finished, return the results
+  Q.allSettled(promises).then( function (results) {
+    var styles = results.map( function (style) {
+      return style.value;
+    });
+    returnPromise.resolve({ index: docIndex, styles: styles });
+  }).catch( function (error) {
+    returnPromise.reject(error);
+  });
+
+  return returnPromise.promise;
+}

scripts/docs/templates/common.template.html

@@ -145,6 +145,52 @@ angular_controller: APIDemoCtrl <@ endif @>
   <$ typeList(fn.typeList) $> <$ fn.description | marked  $>
 <@- endmacro -@>
 
+<@- macro sassTable(files) -@>
+<div id="sass-variables" ng-controller="SassToggleCtrl">
+  <div class="sass-platform-toggle">
+    <@ if files.length > 1 @>
+      <@ for file in files @>
+      <@ if loop.first @>
+      <a ng-init="setSassPlatform('<$ file.platform $>')" ng-class="{ active: active === '<$ file.platform $>' }" ng-click="setSassPlatform('<$ file.platform $>')" ><$ file.platform | platform $></a>
+      <@ else @>
+      <a ng-class="{ active: active === '<$ file.platform $>' }" ng-click="setSassPlatform('<$ file.platform $>')"><$ file.platform | platform $></a>
+      <@ endif @>
+      <@ endfor @>
+    <@ else @>
+    <h3 ng-init="setSassPlatform('<$ files[0].platform $>')"><$ files[0].platform | platform $></h3>
+    <@ endif @>
+  </div>
+
+
+  <@ for file in files @>
+  <table ng-show="active === '<$ file.platform $>'" id="sass-<$file.platform $>" class="table param-table" style="margin:0;">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <@ for prop in file.props @>
+      <tr>
+        <td><$ prop.name $></td>
+        <@ if prop.default @>
+          <td><$ prop.default | code $></td>
+        <@ else @>
+          <td>
+
+          </td>
+        <@ endif @>
+        <td><$ prop.description | marked $></td>
+      </tr>
+      <@ endfor @>
+    </tbody>
+  </table>
+  <@  endfor @>
+</div>
+<@- endmacro -@>
+
 <@ block body @>
 
 
@@ -194,7 +240,6 @@ Improve this doc
 <@ endblock @>
 
 
-
 <!-- @usage tag -->
 <@ if doc.usage @>
 <h2><a class="anchor" name="usage" href="#usage"></a>Usage</h2>
@@ -339,6 +384,11 @@ Improve this doc
 <@- endif -@>
 <@ endblock @>
 
+<@ if doc.sassVariables @>
+  <h2 id="sass-variable-header"><a class="anchor" name="sass-variables" href="#sass-variables"></a>Sass Variables</h2>
+  <$ sassTable(doc.sassVariables) $>
+<@ endif @>
+
 
 <!-- related link -->
 <@- if doc.see @>