aboutsummaryrefslogtreecommitdiffstats
path: root/docs
diff options
context:
space:
mode:
authorIgor Minar2010-11-05 21:12:37 -0700
committerIgor Minar2010-11-09 22:27:31 -0800
commit324694a58b6d0ed33e05b511be4767573d9187dd (patch)
tree0b7243e721da17e9b5c5a1111ed9c0d28829b309 /docs
parenteffcd340e9d41a2ab8368e4de06a1a83a206ac32 (diff)
downloadangular.js-324694a58b6d0ed33e05b511be4767573d9187dd.tar.bz2
Better example widget
- syntax highlighting - tabless design - rename widget to doc:example - rename widget files (wiki_widget.* -> doc_widget.*) - example section is now optional
Diffstat (limited to 'docs')
-rw-r--r--docs/collect.js4
-rw-r--r--docs/doc_widgets.css36
-rw-r--r--docs/doc_widgets.js49
-rw-r--r--docs/filter.template15
-rw-r--r--docs/formatter.template15
-rw-r--r--docs/index.html12
-rw-r--r--docs/overview.template15
-rw-r--r--docs/validator.template14
-rw-r--r--docs/widget.template15
-rw-r--r--docs/wiki_widgets.css58
-rw-r--r--docs/wiki_widgets.js51
11 files changed, 154 insertions, 130 deletions
diff --git a/docs/collect.js b/docs/collect.js
index 04735985..acfdf008 100644
--- a/docs/collect.js
+++ b/docs/collect.js
@@ -42,8 +42,8 @@ var work = callback.chain(function () {
copy('docs-scenario.html', callback.chain());
copy('index.html', callback.chain());
mergeTemplate('docs.js', 'docs.js', documentation, callback.chain());
- mergeTemplate('wiki_widgets.css', 'wiki_widgets.css', documentation, callback.chain());
- mergeTemplate('wiki_widgets.js', 'wiki_widgets.js', documentation, callback.chain());
+ mergeTemplate('doc_widgets.css', 'doc_widgets.css', documentation, callback.chain());
+ mergeTemplate('doc_widgets.js', 'doc_widgets.js', documentation, callback.chain());
console.log('DONE');
});
if (!this.testmode) work();
diff --git a/docs/doc_widgets.css b/docs/doc_widgets.css
new file mode 100644
index 00000000..f4ef70bd
--- /dev/null
+++ b/docs/doc_widgets.css
@@ -0,0 +1,36 @@
+@namespace doc url("http://docs.angularjs.org/");
+
+doc\:example {
+ display: none;
+}
+
+ul.doc-example {
+ list-style-type: none;
+ position: relative;
+ width: 700px;
+ 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/doc_widgets.js b/docs/doc_widgets.js
new file mode 100644
index 00000000..7d723bb3
--- /dev/null
+++ b/docs/doc_widgets.js
@@ -0,0 +1,49 @@
+(function(){
+ var HTML_TEMPLATE =
+ '<!DOCTYPE HTML>\n' +
+ '<html xmlns:ng="http://angularjs.org">\n' +
+ ' <head>\n' +
+ ' <title>Angular Example</title>\n' +
+ ' <script type="text/javascript"\n' +
+ ' src="../angular.js" ng:autobind></script>\n' +
+ ' </head>\n' +
+ ' <body>\n' +
+ '_HTML_SOURCE_\n' +
+ ' </body>\n' +
+ '</html>';
+
+ 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 tabs = angular.element(
+ '<ul class="doc-example">' +
+ '<li class="doc-example-heading"><h3>Source</h3></li>' +
+ '<li class="doc-example-source" ng:non-bindable><pre class="brush: js"></pre></li>' +
+ '<li class="doc-example-heading"><h3>Live Preview</h3></li>' +
+ '<li class="doc-example-live">' + exampleSrc +'</li>' +
+ '<li class="doc-example-heading"><h3>Scenario Test</h3></li>' +
+ '<li class="doc-example-scenario"><pre class="brush: js">' + scenario.text() + '</pre></li>' +
+ '</ul>');
+ tabs.find('li.doc-example-source > pre').text(exampleSrc);
+
+ element.html('');
+ element.append(tabs);
+ element.show();
+
+ var script = (exampleSrc.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
+ try {
+ eval(script);
+ } catch (e) {
+ alert(e);
+ }
+
+ return function() {
+ SyntaxHighlighter.highlight();
+ }
+ });
+})(); \ No newline at end of file
diff --git a/docs/filter.template b/docs/filter.template
index 9375f422..4875798e 100644
--- a/docs/filter.template
+++ b/docs/filter.template
@@ -28,6 +28,15 @@ angular.filter.{{shortName}}({{paramFirst.name}}{{#paramRest}}, {{name}}{{/param
<h3>CSS</h3>
{{{css}}}
-<WIKI:SOURCE style="display:block;">
-{{{example}}}
-</WIKI:SOURCE> \ No newline at end of file
+{{#example}}
+<h2>Example</h2>
+{{{exampleDescription}}}
+<doc:example>
+ <doc:source>
+{{/example}}
+ {{{example}}}
+{{#example}}
+ </doc:source>
+ <doc:scenario>{{{scenario}}}</doc:scenario>
+</doc:example>
+{{/example}}
diff --git a/docs/formatter.template b/docs/formatter.template
index 19611ca1..dd8fcb99 100644
--- a/docs/formatter.template
+++ b/docs/formatter.template
@@ -19,6 +19,15 @@ var modelValue = angular.formatter.{{shortName}}.parse(userInputString);
<h3>CSS</h3>
{{{css}}}
-<WIKI:SOURCE style="display:block;">
-{{{example}}}
-</WIKI:SOURCE> \ No newline at end of file
+{{#example}}
+<h2>Example</h2>
+{{{exampleDescription}}}
+<doc:example>
+ <doc:source>
+{{/example}}
+ {{{example}}}
+{{#example}}
+ </doc:source>
+ <doc:scenario>{{{scenario}}}</doc:scenario>
+</doc:example>
+{{/example}}
diff --git a/docs/index.html b/docs/index.html
index 2f5a8234..07eac809 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,12 +1,18 @@
<!DOCTYPE HTML>
-<html xmlns:ng="http://angularjs.org" wiki:ng="http://angularjs.org">
+<html xmlns:ng="http://angularjs.org/" xmlns:doc="http://docs.angularjs.org/">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="docs-data.js"></script>
<script type="text/javascript" src="../angular.min.js" ng:autobind></script>
- <script type="text/javascript" src="wiki_widgets.js"></script>
- <link rel="stylesheet" href="wiki_widgets.css" type="text/css" media="screen" />
+ <script type="text/javascript" src="doc_widgets.js"></script>
+ <link rel="stylesheet" href="doc_widgets.css" type="text/css" media="screen" />
+ <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
+ <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
+ <link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" type="text/css" media="screen" />
+ <link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" type="text/css" media="screen" />
<script type="text/javascript">
+ SyntaxHighlighter['defaults'].toolbar = false;
+
function DocsController() {
this.docs = NG_DOC;
window.$root = this.$root;
diff --git a/docs/overview.template b/docs/overview.template
index f7540999..6207d41b 100644
--- a/docs/overview.template
+++ b/docs/overview.template
@@ -1,6 +1,15 @@
<h1><tt>{{name}}</tt></h1>
{{{description}}}
-{{#example}}<WIKI:SOURCE style="display:block;">{{/example}}
-{{{example}}}
-{{#example}}</WIKI:SOURCE>{{/example}}
+{{#example}}
+<h2>Example</h2>
+{{{exampleDescription}}}
+<doc:example>
+ <doc:source>
+{{/example}}
+ {{{example}}}
+{{#example}}
+ </doc:source>
+ <doc:scenario>{{{scenario}}}</doc:scenario>
+</doc:example>
+{{/example}}
diff --git a/docs/validator.template b/docs/validator.template
index 2d5d4bc9..124f35b9 100644
--- a/docs/validator.template
+++ b/docs/validator.template
@@ -25,9 +25,15 @@ angular.validator.{{shortName}}({{paramFirst.name}}{{#paramRest}}{{^default}}, {
<h3>CSS</h3>
{{{css}}}
+{{#example}}
<h2>Example</h2>
{{{exampleDescription}}}
-
-<WIKI:SOURCE style="display:block;">
-{{{example}}}
-</WIKI:SOURCE> \ No newline at end of file
+<doc:example>
+ <doc:source>
+{{/example}}
+ {{{example}}}
+{{#example}}
+ </doc:source>
+ <doc:scenario>{{{scenario}}}</doc:scenario>
+</doc:example>
+{{/example}}
diff --git a/docs/widget.template b/docs/widget.template
index f07bd9b2..9b280775 100644
--- a/docs/widget.template
+++ b/docs/widget.template
@@ -25,6 +25,15 @@
<h3>CSS</h3>
{{{css}}}
-<WIKI:SOURCE style="display:block;">
-{{{example}}}
-</WIKI:SOURCE> \ No newline at end of file
+{{#example}}
+<h2>Example</h2>
+{{{exampleDescription}}}
+<doc:example>
+ <doc:source>
+{{/example}}
+ {{{example}}}
+{{#example}}
+ </doc:source>
+ <doc:scenario>{{{scenario}}}</doc:scenario>
+</doc:example>
+{{/example}}
diff --git a/docs/wiki_widgets.css b/docs/wiki_widgets.css
deleted file mode 100644
index a1f6e939..00000000
--- a/docs/wiki_widgets.css
+++ /dev/null
@@ -1,58 +0,0 @@
-WIKI\:SOURCE,
-WIKI\:SOURCE>ul.tabs,
-WIKI\:SOURCE>ul.tabs>li {
- display: block;
- margin: 0;
- padding: 0;
-}
-WIKI\:SOURCE>ul.tabs {
- margin: 0 !important;
- padding: 0 !important;
-}
-
-WIKI\:SOURCE > ul.tabs > li.tab {
- margin: 0 0 0 .8em !important;
- display: inline-block;
- border: 1px solid gray;
- padding: .1em .8em .4em .8em !important;
- -moz-border-radius-topleft: 5px;
- -moz-border-radius-topright: 5px;
- -webkit-border-top-left-radius: 5px;
- -webkit-border-top-right-radius: 5px;
- border-bottom: none;
- cursor: pointer;
- background-color: lightgray;
- margin-bottom: -2px;
- position: relative;
- z-index: 0;
-}
-
-WIKI\:SOURCE > ul.tabs > li.tab.selected {
- z-index: 2;
- background-color: white;
- font-weight: bold;
- border-width: 2px;
-}
-
-WIKI\:SOURCE > ul.tabs > li.pane {
- border: 2px solid gray;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- background-color: white;
- padding: 5px !important;
-}
-
-WIKI\:SOURCE > ul.tabs > li.pane {
- display:none;
-}
-
-WIKI\:SOURCE > ul.tabs > li.pane.selected {
- position: relative;
- z-index: 1;
- display:block;
-}
-WIKI\:SOURCE > ul.tabs > li.pane.source {
- font-size: .8em !important;
-}
-////////////////// \ No newline at end of file
diff --git a/docs/wiki_widgets.js b/docs/wiki_widgets.js
deleted file mode 100644
index 771d3f8c..00000000
--- a/docs/wiki_widgets.js
+++ /dev/null
@@ -1,51 +0,0 @@
-(function(){
- var HTML_TEMPLATE =
- '<!DOCTYPE HTML>\n' +
- '<html xmlns:ng="http://angularjs.org">\n' +
- ' <head>\n' +
- ' <script type="text/javascript"\n' +
- ' src="http://angularjs.org/ng/js/angular-debug.js" ng:autobind></script>\n' +
- ' </head>\n' +
- ' <body>\n' +
- '_HTML_SOURCE_\n' +
- ' </body>\n' +
- '</html>';
-
- angular.widget('WIKI:SOURCE', function(element){
- this.descend(true);
- var html = element.text();
- element.show();
- var tabs = angular.element(
- '<ul class="tabs">' +
- '<li class="tab selected" to="angular">&lt;angular/&gt;</li>' +
- '<li class="tab" to="plain">plain</li>' +
- '<li class="tab" to="source">source</li>' +
- '<li class="pane selected angular example">' + html + '</li>' +
- '<li class="pane plain" ng:non-bindable>' + html + '</li>' +
- '<li class="pane source" ng:non-bindable><pre class="brush: js; html-script: true"></pre></li>' +
- '</ul>');
- var pre = tabs.
- find('>li.source>pre').
- text(HTML_TEMPLATE.replace('_HTML_SOURCE_', html));
- var color = element.attr('color') || 'white';
- element.html('');
- element.append(tabs);
- element.find('>ul.tabs>li.pane').css('background-color', color);
- var script = (html.match(/<script[^\>]*>([\s\S]*)<\/script>/) || [])[1] || '';
- try {
- eval(script);
- } catch (e) {
- alert(e);
- }
- return function(element){
- element.find('>ul.tabs>li.tab').click(function(){
- if ($(this).is(".selected")) return;
- element.
- find('>ul.tabs>li.selected').
- add(this).
- add(element.find('>ul>li.pane.' + angular.element(this).attr('to'))).
- toggleClass('selected');
- });
- };
- });
-})(); \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-02 02:55:32 +0000