Skip to content

Commit

Permalink
docs(sass): add sass processor
Browse files Browse the repository at this point in the history
  • Loading branch information
briandennis committed Aug 4, 2016
1 parent d7ce570 commit d5da8ab
Show file tree
Hide file tree
Showing 5 changed files with 213 additions and 2 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 3 additions & 1 deletion scripts/docs/dgeni-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down Expand Up @@ -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'));
Expand Down
15 changes: 15 additions & 0 deletions scripts/docs/filters/platform.js
Original file line number Diff line number Diff line change
@@ -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'
}
}
};
143 changes: 143 additions & 0 deletions scripts/docs/processors/parse-sass.js
Original file line number Diff line number Diff line change
@@ -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;
}
52 changes: 51 additions & 1 deletion scripts/docs/templates/common.template.html
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,52 @@
<$ 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 @>


Expand Down Expand Up @@ -194,7 +240,6 @@ <h3><code><$ doc.directiveInfo.properties[0].values $></code></h3>
<@ endblock @>



<!-- @usage tag -->
<@ if doc.usage @>
<h2><a class="anchor" name="usage" href="#usage"></a>Usage</h2>
Expand Down Expand Up @@ -339,6 +384,11 @@ <h2><a class="anchor" name="advanced" href="#advanced"></a>Advanced</h2>
<@- 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 @>
Expand Down

0 comments on commit d5da8ab

Please sign in to comment.