From 324694a58b6d0ed33e05b511be4767573d9187dd Mon Sep 17 00:00:00 2001
From: Igor Minar
Date: Fri, 5 Nov 2010 21:12:37 -0700
Subject: Better example widget
- syntax highlighting
- tabless design
- rename widget to doc:example
- rename widget files (wiki_widget.* -> doc_widget.*)
- example section is now optional
---
docs/collect.js | 4 ++--
docs/doc_widgets.css | 36 ++++++++++++++++++++++++++++++
docs/doc_widgets.js | 49 +++++++++++++++++++++++++++++++++++++++++
docs/filter.template | 15 ++++++++++---
docs/formatter.template | 15 ++++++++++---
docs/index.html | 12 +++++++---
docs/overview.template | 15 ++++++++++---
docs/validator.template | 14 ++++++++----
docs/widget.template | 15 ++++++++++---
docs/wiki_widgets.css | 58 -------------------------------------------------
docs/wiki_widgets.js | 51 -------------------------------------------
11 files changed, 154 insertions(+), 130 deletions(-)
create mode 100644 docs/doc_widgets.css
create mode 100644 docs/doc_widgets.js
delete mode 100644 docs/wiki_widgets.css
delete mode 100644 docs/wiki_widgets.js
(limited to 'docs')
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 =
+ '\n' +
+ '\n' +
+ ' \n' +
+ ' Angular Example\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 tabs = angular.element(
+ '' +
+ 'Source
Live Preview
- ' + exampleSrc +'
' +
+ 'Scenario Test
' + scenario.text() + '
');
+ tabs.find('li.doc-example-source > pre').text(exampleSrc);
+
+ element.html('');
+ element.append(tabs);
+ element.show();
+
+ var script = (exampleSrc.match(/]*>([\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
CSS
{{{css}}}
-
-{{{example}}}
-
\ No newline at end of file
+{{#example}}
+Example
+{{{exampleDescription}}}
+
+
+{{/example}}
+ {{{example}}}
+{{#example}}
+
+ {{{scenario}}}
+
+{{/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);
CSS
{{{css}}}
-
-{{{example}}}
-
\ No newline at end of file
+{{#example}}
+Example
+{{{exampleDescription}}}
+
+
+{{/example}}
+ {{{example}}}
+{{#example}}
+
+ {{{scenario}}}
+
+{{/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 @@
-
+
-
-
+
+
+
+
+
+
\n' +
- ' \n' +
- ' \n' +
- '_HTML_SOURCE_\n' +
- ' \n' +
- '';
-
- angular.widget('WIKI:SOURCE', function(element){
- this.descend(true);
- var html = element.text();
- element.show();
- var tabs = angular.element(
- '' +
- '- <angular/>
' +
- '- plain
' +
- '- source
' +
- '- ' + html + '
' +
- '- ' + html + '
' +
- '
');
- 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(/]*>([\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
--
cgit v1.2.3