Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Prepare for bundling of generated CSS/docs

  • Loading branch information...
commit 72e15152d54e69a701de49fb750e54a03ee868c0 1 parent f4b52d2
@jacobrask authored
View
10 examples/styledocco.html
@@ -6,12 +6,12 @@
<script>
var styledocco = {
project: {
- name: "StyleDocco",
+ name: 'StyleDocco',
stylesheets: [
- '../web/app.css',
- '../web/bar.css',
- '../web/views/navbar.css',
- '../web/views/preview.css'
+ { name: 'App', path: '../web/app.css' },
+ { name: 'Bar', path: '../web/bar.css' },
+ { name: 'Nav Bar', path: '../web/views/Navbar.css' },
+ { name: 'Preview', path: '../web/views/Preview.css' }
],
includes: [
'styledocco-examples.css'
View
38 web/app.js
@@ -10,8 +10,8 @@ var project = window.styledocco.project;
// =====================
var async = require('async');
var _ = require('underscore');
-var $ = require('jquery');
var Backbone = require('backbone');
+var $ = Backbone.$ = require('jquery-browserify');
// Internal modules
@@ -26,24 +26,30 @@ var DocuView = require('./views/Documentation');
// Initialize models
// =================
-
-// Wrapper around jQuery.ajax to make it compatible with async.
-var ajax = function (path, cb) {
- $.ajax(path, {
- success: function (data, code, req) { cb(null, data, code, req); },
- error: function (req, err, ex) { cb(ex || new Error(err), req); }
- });
-};
-
var docus = new DocuCollection();
-_.forEach(project.stylesheets, function (file) {
- docus.add(new Docu({ path: file }));
+_.forEach(project.stylesheets, function (ss) {
+ if (ss.name == null || (ss.path == null && ss.css == null)) return;
+ var params = { name: ss.name };
+ if (ss.path) {
+ params.path = ss.path;
+ } else {
+ params.css = ss.css;
+ params.docs = ss.docs;
+ params.isLocal = true;
+ }
+ docus.add(new Docu(params));
});
if (project.includes) {
- async.map(project.includes, ajax, function (err, res) {
- docus.forEach(function (docu) {
- docu.set('extraCss', res.join(''));
+ _.forEach(project.includes, function (path) {
+ var ext = path.match(/\.(css|js)$/i);
+ if (ext == null) return;
+ var type = ext[1].toLowerCase();
+ type = type.charAt(0).toUpperCase() + type.slice(1);
+ $.ajax(path).done(function (code) {
+ docus.forEach(function (docu) {
+ docu.set('include' + type, code);
+ });
});
});
}
@@ -70,7 +76,7 @@ var Router = Backbone.Router.extend({
// ================
// The only place where we interact with the pre-existing DOM.
-$(doc).ready(function() {
+$(doc).ready(function () {
var router = new Router();
// Disable `pushState` as there are no server routes
View
3  web/index.jade
@@ -13,7 +13,8 @@ html
// Array of CSS file paths to document.
stylesheets: [
- // 'stylesheet.css',
+ { name: 'Main',
+ path: 'stylesheet.css' }
],
// Paths to optional CSS and/or JavaScript to include in previews.
View
20 web/models/Documentation.js
@@ -9,8 +9,8 @@ Backbone.$ = require('jquery');
var Model = Backbone.Model;
var marked = require('marked');
marked.setOptions({ sanitize: false, gfm: true });
-var path = require('path');
var styledocco = require('../../styledocco');
+var path = require('path');
var Documentation = Model.extend({
@@ -18,15 +18,16 @@ var Documentation = Model.extend({
defaults: {
name: '',
css: '',
- extraCss: '',
+ includeCss: '',
+ includeJs: '',
path: '',
- docs: 'Loading stylesheet documentation&hellip;'
+ docs: 'Loading stylesheet documentation&hellip;',
+ isLocal: false
},
- initialize: function() {
+ initialize: function () {
_.bindAll(this);
- this.fetch();
- this.set('name', this.baseFileName(this.get('path')));
+ if (!this.isLocal) this.fetch();
},
@@ -58,16 +59,11 @@ var Documentation = Model.extend({
);
},
- parse: function(res) {
+ parse: function (res) {
return {
css: this.normalizePaths(res),
docs: styledocco(res)
};
- },
-
- // Get a filename without the extension and leading _
- baseFileName: function(name) {
- return path.basename(name, path.extname(name)).replace(/^_/, '');
}
});
View
4 web/views/Navbar.css
@@ -7,7 +7,7 @@
<a href="#" class="brand :hover">StyleDocco</a> */
.brand {
float: left;
- margin-right: 20px;
+ margin-right: 1.5em;
font-weight: bold;
text-decoration: none;
}
@@ -39,7 +39,7 @@
}
.menu a {
display: block;
- margin-right: 15px;
+ margin-right: 1.5em;
}
.menu a:hover {
color: hsl(200, 0%, 0%);
View
4 web/views/Navbar.js
@@ -11,7 +11,9 @@ var BrandView = View.extend({
tagName: 'a',
className: 'brand',
- attributes: { href: './' },
+ attributes: {
+ href: location.protocol + '//' + location.host + location.pathname
+ },
render: function() {
this.el.innerText = this.model.get('name');
View
15 web/views/Preview.js
@@ -1,9 +1,9 @@
-'use strict'; /*global $:false,Prism:false*/
+'use strict'; /*global Prism:false*/
var _ = require('underscore');
/*var Prism = */require('../vendor/prism');
var Backbone = require('backbone');
-Backbone.$ = require('jquery-browserify');
+var $ = Backbone.$ = require('jquery-browserify');
var View = Backbone.View;
var make = require('../../share/domsugar')(document);
@@ -83,15 +83,17 @@ var PreviewView = View.extend({
return this;
},
- updateHtml: function() {
+ updateHtml: function () {
this.iframe.contentDocument.body.innerHTML = this.$codeEl.text();
this.trigger('iframeChange');
},
- updateCss: function() {
+ updateCss: function () {
var coll = this.model.collection;
- var css = coll.pluck('css').join('') + this.model.get('extraCss');
- this.getIframeDoc(_.bind(function(doc) {
+ var css = coll.pluck('css').join('') + this.model.get('includeCss');
+ var js = this.model.get('includeJs');
+ this.getIframeDoc(_.bind(function (doc) {
doc.head.getElementsByTagName('style')[0].textContent = css;
+ doc.head.getElementsByTagName('script')[0].textContent = js;
this.trigger('iframeChange');
}, this));
return this;
@@ -102,7 +104,6 @@ var PreviewView = View.extend({
}, this));
},
-
highlight: function() {
this.$codeEl.html(
Prism.highlight(this.getText(), Prism.languages.markup)
Please sign in to comment.
Something went wrong with that request. Please try again.