Better example widget

- syntax highlighting
- tabless design
- rename widget to doc:example
- rename widget files (wiki_widget.* -> doc_widget.*)
- example section is now optional

4 files changed, 35 insertions, 31 deletions

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.
      * 
-     * <WIKI:SOURCE>
+     * <doc:example>
+     *   <doc:source>
      *    Change me: &lt;input type="text" name="number" ng:validate="integer" value="123"&gt;
-     * </WIKI:SOURCE>
+     *   </doc:source>
+     * </doc:example>
      * 
      * # 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
          <script type="text/javascript">
            angular.filter('reverse', function(input, uppercase, color) {
@@ -271,11 +278,6 @@ var _undefined        = undefined,
              return out;
            });
          </script>
-       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).
-
-         <hr/>
          <span ng:non-bindable="true">{{"hello"|reverse}}</span>: {{"hello"|reverse}}<br>
          <span ng:non-bindable="true">{{"hello"|reverse:true}}</span>: {{"hello"|reverse:true}}<br>
          <span ng:non-bindable="true">{{"hello"|reverse:true:"blue"}}</span>:
@@ -340,20 +342,22 @@ var _undefined        = undefined,
      *   }
      * });
      * </script>
+     *
      * Formatted: <input type="text" name="data" value="&lt;angular/&gt;" ng:format="reverse"/><br/>
      * Stored: <input type="text" name="data"/><br/>
      * <pre>{{data}}</pre>
+     *
      * 
      * @scenario
      * it('should store reverse', function(){
-     *  expect(element('.example :input:first').val()).toEqual('<angular/>');
-     *  expect(element('.example :input:last').val()).toEqual('>/RALUGNA<');
+     *  expect(element('.doc-example input:first').val()).toEqual('<angular/>');
+     *  expect(element('.doc-example input:last').val()).toEqual('>/RALUGNA<');
      *  
      *  this.addFutureAction('change to XYZ', function($window, $document, done){
-     *    $document.elements('.example :input:last').val('XYZ').trigger('change');
+     *    $document.elements('.doc-example input:last').val('XYZ').trigger('change');
      *    done();
      *  });
-     *  expect(element('.example :input:first').val()).toEqual('zyx');
+     *  expect(element('input:first').val()).toEqual('zyx');
      * });
      */
     angularFormatter  = extensionMap(angular, 'formatter'),
diff --git a/src/formatters.js b/src/formatters.js
index 5c602cc8..38175d7d 100644
--- a/src/formatters.js
+++ b/src/formatters.js
@@ -103,7 +103,7 @@ angularFormatter.number = formatter(toString, function(obj){
  * it('should format lists', function(){
  *   expect(binding('value')).toEqual('value=["chair","table"]');
  *   this.addFutureAction('change to XYZ', function($window, $document, done){
- *     $document.elements('.example :input:last').val(',,a,b,').trigger('change');
+ *     $document.elements('.doc-example :input:last').val(',,a,b,').trigger('change');
  *     done();
  *   });
  *   expect(binding('value')).toEqual('value=["a","b"]');
@@ -140,7 +140,7 @@ angularFormatter.list = formatter(
  * it('should format trim', function(){
  *   expect(binding('value')).toEqual('value="book"');
  *   this.addFutureAction('change to XYZ', function($window, $document, done){
- *     $document.elements('.example :input:last').val('  text  ').trigger('change');
+ *     $document.elements('.doc-example :input:last').val('  text  ').trigger('change');
  *     done();
  *   });
  *   expect(binding('value')).toEqual('value="text"');
diff --git a/src/validators.js b/src/validators.js
index 9715be59..f4874e68 100644
--- a/src/validators.js
+++ b/src/validators.js
@@ -17,7 +17,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate non ssn', function(){
-   *   var textBox = element('.example :input');
+   *   var textBox = element('.doc-example :input');
    *   expect(textBox.attr('className')).not().toMatch(/ng-validation-error/);
    *   expect(textBox.val()).toEqual('123-45-6789');
    *   
@@ -54,17 +54,17 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate number', function(){
-   *   var n1 = element('.example :input[name=n1]');
+   *   var n1 = element('.doc-example :input[name=n1]');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('n1').enter('1.x');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
    *   
-   *   var n2 = element('.example :input[name=n2]');
+   *   var n2 = element('.doc-example :input[name=n2]');
    *   expect(n2.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('n2').enter('9');
    *   expect(n2.attr('className')).toMatch(/ng-validation-error/);
    *   
-   *   var n3 = element('.example :input[name=n3]');
+   *   var n3 = element('.doc-example :input[name=n3]');
    *   expect(n3.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('n3').enter('201');
    *   expect(n3.attr('className')).toMatch(/ng-validation-error/);
@@ -106,17 +106,17 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate integer', function(){
-   *   var n1 = element('.example :input[name=n1]');
+   *   var n1 = element('.doc-example :input[name=n1]');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('n1').enter('1.1');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
    *   
-   *   var n2 = element('.example :input[name=n2]');
+   *   var n2 = element('.doc-example :input[name=n2]');
    *   expect(n2.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('n2').enter('10.1');
    *   expect(n2.attr('className')).toMatch(/ng-validation-error/);
    *   
-   *   var n3 = element('.example :input[name=n3]');
+   *   var n3 = element('.doc-example :input[name=n3]');
    *   expect(n3.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('n3').enter('100.1');
    *   expect(n3.attr('className')).toMatch(/ng-validation-error/);
@@ -148,7 +148,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate date', function(){
-   *   var n1 = element('.example :input');
+   *   var n1 = element('.doc-example :input');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('text').enter('123/123/123');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
@@ -180,7 +180,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate email', function(){
-   *   var n1 = element('.example :input');
+   *   var n1 = element('.doc-example :input');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('text').enter('a@b.c');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
@@ -209,7 +209,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate phone', function(){
-   *   var n1 = element('.example :input');
+   *   var n1 = element('.doc-example :input');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('text').enter('+12345678');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
@@ -241,7 +241,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate url', function(){
-   *   var n1 = element('.example :input');
+   *   var n1 = element('.doc-example :input');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('text').enter('abc://server/path');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
@@ -271,7 +271,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should invalidate json', function(){
-   *   var n1 = element('.example :input');
+   *   var n1 = element('.doc-example :input');
    *   expect(n1.attr('className')).not().toMatch(/ng-validation-error/);
    *   input('json').enter('{name}');
    *   expect(n1.attr('className')).toMatch(/ng-validation-error/);
@@ -344,7 +344,7 @@ extend(angularValidator, {
    * 
    * @scenario
    * it('should change color in delayed way', function(){
-   *   var textBox = element('.example :input');
+   *   var textBox = element('.doc-example :input');
    *   expect(textBox.attr('className')).not().toMatch(/ng-input-indicator-wait/);
    *   expect(textBox.attr('className')).not().toMatch(/ng-validation-error/);
    *   
diff --git a/src/widgets.js b/src/widgets.js
index 43a16c8c..3666486d 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -398,15 +398,15 @@ angularWidget('option', function(){
  *
  * @scenario
  * it('should load date filter', function(){
- *   expect(element('.example ng\\:include').text()).toMatch(/angular\.filter\.date/);
+ *   expect(element('.doc-example ng\\:include').text()).toMatch(/angular\.filter\.date/);
  * });
  * it('should change to hmtl filter', function(){
  *   select('url').option('angular.filter.html.html');
- *   expect(element('.example ng\\:include').text()).toMatch(/angular\.filter\.html/);
+ *   expect(element('.doc-example ng\\:include').text()).toMatch(/angular\.filter\.html/);
  * });
  * it('should change to blank', function(){
  *   select('url').option('(blank)');
- *   expect(element('.example ng\\:include').text()).toEqual('');
+ *   expect(element('.doc-example ng\\:include').text()).toEqual('');
  * });
  */
 angularWidget('ng:include', function(element){
@@ -489,11 +489,11 @@ angularWidget('ng:include', function(element){
  *
  * @scenario
  * it('should start in settings', function(){
- *   expect(element('.example ng\\:switch').text()).toEqual('Settings Div');
+ *   expect(element('.doc-example ng\\:switch').text()).toEqual('Settings Div');
  * });
  * it('should change to home', function(){
  *   select('switch').option('home');
- *   expect(element('.example ng\\:switch').text()).toEqual('Home Span');
+ *   expect(element('.doc-example ng\\:switch').text()).toEqual('Home Span');
  * });
  */
 var ngSwitch = angularWidget('ng:switch', function (element){