From 4f22d6866c052fb5b770ce4f377cecacacd9e6d8 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Thu, 23 Dec 2010 00:44:27 +0100 Subject: complete rewrite of documentation generation - romeved mustache.js - unified templates - improved testability of the code --- docs/src/templates/doc_widgets.css | 35 +++++ docs/src/templates/doc_widgets.js | 71 +++++++++ docs/src/templates/docs-scenario.html | 10 ++ docs/src/templates/docs-scenario.js | 9 ++ docs/src/templates/docs.css | 262 ++++++++++++++++++++++++++++++++++ docs/src/templates/docs.js | 47 ++++++ docs/src/templates/index.html | 45 ++++++ 7 files changed, 479 insertions(+) create mode 100644 docs/src/templates/doc_widgets.css create mode 100644 docs/src/templates/doc_widgets.js create mode 100644 docs/src/templates/docs-scenario.html create mode 100644 docs/src/templates/docs-scenario.js create mode 100644 docs/src/templates/docs.css create mode 100644 docs/src/templates/docs.js create mode 100644 docs/src/templates/index.html (limited to 'docs/src/templates') diff --git a/docs/src/templates/doc_widgets.css b/docs/src/templates/doc_widgets.css new file mode 100644 index 00000000..8361f105 --- /dev/null +++ b/docs/src/templates/doc_widgets.css @@ -0,0 +1,35 @@ +@namespace doc url("http://docs.angularjs.org/"); + +doc\:example { + display: none; +} + +ul.doc-example { + list-style-type: none; + position: relative; + font-size: 14px; +} + +ul.doc-example > li { + border: 2px solid gray; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + background-color: white; + margin-bottom: 20px; +} + +ul.doc-example > li.doc-example-heading { + border: none; + border-radius: none; + margin-bottom: -10px; +} + +li.doc-example-live { + padding: 10px; + font-size: 1.2em; +} + +div.syntaxhighlighter { + padding-bottom: 1px !important; /* fix to remove unnecessary scrollbars http://is.gd/gSMgC */ +} \ No newline at end of file diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js new file mode 100644 index 00000000..b119e326 --- /dev/null +++ b/docs/src/templates/doc_widgets.js @@ -0,0 +1,71 @@ +(function(){ + + var angularJsUrl; + var scripts = document.getElementsByTagName("script"); + var filename = /(.*\/)angular([^\/]*)/; + for(var j = 0; j < scripts.length; j++) { + var src = scripts[j].src; + if (src && src.match(filename)) { + angularJsUrl = src; + } + } + + + var HTML_TEMPLATE = + '\n' + + '\n' + + ' \n' + + ' \n' + + '_HTML_SOURCE_\n' + + ' \n' + + ''; + + angular.widget('doc:example', function(element){ + this.descend(true); //compile the example code + element.hide(); + + var example = element.find('doc\\:source').eq(0), + exampleSrc = example.text(), + scenario = element.find('doc\\:scenario').eq(0); + + var code = indent(exampleSrc); + var tabs = angular.element( + ''); + + tabs.find('li.doc-example-source > pre').text(HTML_TEMPLATE.replace('_HTML_SOURCE_', code.html)); + + element.html(''); + element.append(tabs); + element.show(); + + var script = (exampleSrc.match(/]*>([\s\S]*)<\/script>/) || [])[1] || ''; + try { + eval(script); + } catch (e) { + alert(e); + } + }); + + function indent(text) { + var lines = text.split(/\n/); + var lineNo = []; + while (lines[0].match(/^\s*$/)) lines.shift(); + while (lines[lines.length - 1].match(/^\s*$/)) lines.pop(); + for ( var i = 0; i < lines.length; i++) { + lines[i] = ' ' + lines[i]; + lineNo.push(6 + i); + } + return {html: lines.join('\n'), hilite: lineNo.join(',') }; + }; + +})(); \ No newline at end of file diff --git a/docs/src/templates/docs-scenario.html b/docs/src/templates/docs-scenario.html new file mode 100644 index 00000000..c75155c5 --- /dev/null +++ b/docs/src/templates/docs-scenario.html @@ -0,0 +1,10 @@ + + + + <angular/> Docs Scenario Runner + + + + + + \ No newline at end of file diff --git a/docs/src/templates/docs-scenario.js b/docs/src/templates/docs-scenario.js new file mode 100644 index 00000000..2ee8387b --- /dev/null +++ b/docs/src/templates/docs-scenario.js @@ -0,0 +1,9 @@ +{{#pages}} +describe('{{name}}', function(){ + beforeEach(function(){ + browser().navigateTo('index.html#!{{name}}'); + }); + // {{raw.file}}:{{raw.line}} +{{{scenario}}} +}); +{{/pages}} diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css new file mode 100644 index 00000000..aaef7e58 --- /dev/null +++ b/docs/src/templates/docs.css @@ -0,0 +1,262 @@ +/* Common Style */ + +body { + font-family: Arial, sans-serif; + font-size: 14px; + margin: 0; + padding: 0; +} + +a { + color: blue; +} + + +/* Main Layout */ + +#header { + height: 3.5em; +} + +#sidebar, +#main { + position: absolute; + top: 3.5em; + bottom: 0; + margin-top: 1px; + overflow-x: hidden; +} + +#sidebar { + width: 13.8em; + padding: 0.8em 0em 1.5em 0.8em; +} + +#main { + left: 14.6em; + right: 0; + padding: 1em; + overflow-y: scroll; +} + +#api-list { + position: absolute; + top: 3em; + bottom: 1em; + overflow-y: scroll; + padding-right: 0.8em; +} + + +/* App Header */ + +#header { + background-color: #F2C200; + border-bottom: 1px solid #957800; +} + +#header h1 { + font-weight: normal; + font-size: 30px; + line-height: 30px; + margin: 0; + padding: 10px 10px; + height: 30px; +} + +#header .angular { + font-family: "Courier New", monospace; + font-weight: bold; +} + +#header h1 a { + color: black; + text-decoration: none; +} + +#header h1 a:hover { + text-decoration: underline; +} + + +/* Main main Style */ + +#main h1 { + font-family: monospace; + margin-top: 0; + padding-bottom: 5px; + border-bottom: 1px solid #CCC; +} + +#main h2 { + margin-top: 1.8em; +} + +#main h1 + h2 { + margin-top: 1.3em; +} + +#main h3 { + margin-top: 1.5em; +} + +#main ul.methods h3, +#main ul.properties h3 { + margin-top: 1.5em; + font-family: "Courier New", monospace; +} + +.main-title { + float: right; +} + + +/* Searchbox & Sidebar Style */ + +#search-box, #sidebar { + border-right: 1px solid #DDD; +} + +#sidebar { + background-color: #EEE; +} + +#search-box { + width: 16em; + margin-bottom: 1em; +} + +#sidebar a { + text-decoration: none; +} + +#sidebar a:hover { + text-decoration: underline; +} + +#sidebar ul { + list-style-type: none; + /*TODO(esprehn): Can we just reset globally and not break examples?*/ + margin: 0; + padding: 0 0.8em 0 0; + width: 13em; +} + +#sidebar ul li { +} + +#sidebar ul li a { + display: block; + padding: 2px 2px 2px 4px; +} + +#sidebar ul li.selected a { + background-color: #DDD; + border-radius: 5px; + -moz-border-radius: 5px; + border: 1px solid #CCC; + padding: 1px 1px 1px 3px; +} + +#sidebar ul li.level-0 { + margin-left: 0em; + font-weight: bold; + font-size: 1.2em; +} + +#sidebar ul li.level-1.level-angular { + font-family: monospace; + font-weight: normal; + font-size: 1em; + margin-top: 0; + margin-bottom: 0; +} + +#sidebar ul li.level-1 { + margin-left: 1em; + margin-top: 5px; + font-size: 1.1em; + font-weight: bold; +} + +#sidebar ul li.level-2 { + margin-left: 2em; + font-family: monospace; +} + +#sidebar ul li.level-3 { + margin-left: 3em; + font-family: monospace; +} + + +/* Warning and Info Banners */ + +.deprecated { + border: 2px solid red; +} + +.deprecated legend { + font-weight: bold; + color: red; +} + +.workInProgress { + border: 2px solid orange; +} + +.workInProgress legend { + font-weight: bold; + color: orange; +} + + +/* Feedback Link */ + +#feedback { + float: right; + width: 10em; + text-align: right; +} + + +/* Live Example Style */ + +.doc-example-live table td { + padding: 0 1.5em; +} + + +/* Scrollbars */ + +::-webkit-scrollbar{ + width:0.8em; + margin: 0.2em 0em; +} + +::-webkit-scrollbar:hover{ + background-color:#eee; +} + +::-webkit-scrollbar-thumb{ + min-height:0.8em; + min-width:0.8em; + -webkit-border-radius:0.5em; + background-color: #ddd; +} + +::-webkit-scrollbar-thumb:hover{ + background-color: #bbb; +} + +::-webkit-scrollbar-thumb:active{ + background-color:#888; +} + +#sidebar::-webkit-scrollbar { + background-color:#eee; +} + +#main::-webkit-scrollbar { + background-color:#fff; +} diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js new file mode 100644 index 00000000..6bf86ed3 --- /dev/null +++ b/docs/src/templates/docs.js @@ -0,0 +1,47 @@ +DocsController.$inject = ['$location', '$browser', '$window']; +function DocsController($location, $browser, $window) { + this.pages = NG_PAGES; + window.$root = this.$root; + + this.getUrl = function(page){ + return '#!' + page.name; + }; + + this.getCurrentPartial = function(){ + return './' + this.getTitle() + '.html'; + }; + + this.getTitle = function(){ + var hashPath = $location.hashPath || '!angular'; + if (hashPath.match(/^!angular/)) { + this.partialTitle = hashPath.substring(1); + } + return this.partialTitle; + }; + + this.getClass = function(page) { + var depth = page.name.split(/\./).length - 1, + cssClass = 'level-' + depth + (page.name == this.getTitle() ? ' selected' : ''); + + if (depth == 1 && page.type !== 'overview') cssClass += ' level-angular'; + + return cssClass; + }; + + this.afterPartialLoaded = function() { + SyntaxHighlighter.highlight(); + }; + + this.getFeedbackUrl = function() { + return "mailto:angular@googlegroups.com?" + + "subject=" + escape("Feedback on " + $location.href) + "&" + + "body=" + escape("Hi there,\n\nI read " + $location.href + " and wanted to ask ...."); + }; + +} + +angular.filter('short', function(name){ + return (name||'').split(/\./).pop(); +}); + +SyntaxHighlighter['defaults'].toolbar = false; diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html new file mode 100644 index 00000000..64b73bfc --- /dev/null +++ b/docs/src/templates/index.html @@ -0,0 +1,45 @@ + + + + <angular/> + + + + + + + + + + + + + + + + + + + + + +
+ Report an Issue or Ask a Question + +
+ + -- cgit v1.2.3