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 -------------------------------------------
src/Angular.js | 26 ++++++++++++----------
src/formatters.js | 4 ++--
src/validators.js | 26 +++++++++++-----------
src/widgets.js | 10 ++++-----
15 files changed, 189 insertions(+), 161 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
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 @@
-
+
-
- ' +
- '<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
diff --git a/src/Angular.js b/src/Angular.js
index 9934b401..985d7bc4 100644
--- a/src/Angular.js
+++ b/src/Angular.js
@@ -165,9 +165,11 @@ var _undefined = undefined,
* # Syntax
* Attach a validator on user input widgets using the `ng:validate` attribute.
*
- *
+ *
+ *
* Change me: <input type="text" name="number" ng:validate="integer" value="123">
- *
+ *
+ *
*
* # Writing your own Validators
* Writing your own validator is easy. To make a function available as a
@@ -255,6 +257,11 @@ var _undefined = undefined,
* the DOM in addition to transforming the input.
*
*
+ * @exampleDescription
+ * The following example filter reverses a text string. In addition, it conditionally makes the
+ * text upper-case (to demonstrate optional arguments) and assigns color (to demonstrate DOM
+ * modification).
+ *
* @example
- The following example filter reverses a text string. In addition, it conditionally makes the
- text upper-case (to demonstrate optional arguments) and assigns color (to demonstrate DOM
- modification).
-
- {{"hello"|reverse}} : {{"hello"|reverse}}{{"hello"|reverse:true}} : {{"hello"|reverse:true}}{{"hello"|reverse:true:"blue"}} :
@@ -340,20 +342,22 @@ var _undefined = undefined,
* }
* });
*
+ *
* Formatted: {{data}}
+ *
*
* @scenario
* it('should store reverse', function(){
- * expect(element('.example :input:first').val()).toEqual('