diff options
Diffstat (limited to 'src/ng/directive/ngShowHide.js')
| -rw-r--r-- | src/ng/directive/ngShowHide.js | 154 |
1 files changed, 132 insertions, 22 deletions
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 418a43ff..7ccc0aa0 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -24,13 +24,68 @@ * then the element is shown or hidden respectively. * * @example - <doc:example> - <doc:source> - Click me: <input type="checkbox" ng-model="checked"><br/> - Show: <span ng-show="checked">I show up when your checkbox is checked.</span> <br/> - Hide: <span ng-hide="checked">I hide when your checkbox is checked.</span> - </doc:source> - <doc:scenario> + <example animations="true"> + <file name="index.html"> + Click me: <input type="checkbox" ng-model="checked"><br/> + <div> + Show: + <span class="check-element" + ng-show="checked" + ng-animate="{show: 'example-show', hide: 'example-hide'}"> + <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. + </span> + </div> + <div> + Hide: + <span class="check-element" + ng-hide="checked" + ng-animate="{show: 'example-show', hide: 'example-hide'}"> + <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. + </span> + </div> + </file> + <file name="animations.css"> + .example-show-setup, .example-hide-setup { + -webkit-transition:all linear 0.5s; + -moz-transition:all linear 0.5s; + -ms-transition:all linear 0.5s; + -o-transition:all linear 0.5s; + transition:all linear 0.5s; + } + + .example-show-setup { + line-height:0; + opacity:0; + padding:0 10px; + } + .example-show-start.example-show-start { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + + .example-hide-setup { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + .example-hide-start.example-hide-start { + line-height:0; + opacity:0; + padding:0 10px; + } + + .check-element { + padding:10px; + border:1px solid black; + background:white; + } + </file> + <file name="scenario.js"> it('should check ng-show / ng-hide', function() { expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); expect(element('.doc-example-live span:last:visible').count()).toEqual(1); @@ -40,8 +95,8 @@ expect(element('.doc-example-live span:first:visible').count()).toEqual(1); expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); }); - </doc:scenario> - </doc:example> + </file> + </example> */ //TODO(misko): refactor to remove element from the DOM var ngShowDirective = ['$animator', function($animator) { @@ -78,24 +133,79 @@ var ngShowDirective = ['$animator', function($animator) { * the element is shown or hidden respectively. * * @example - <doc:example> - <doc:source> - Click me: <input type="checkbox" ng-model="checked"><br/> - Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/> - Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span> - </doc:source> - <doc:scenario> + <example animations="true"> + <file name="index.html"> + Click me: <input type="checkbox" ng-model="checked"><br/> + <div> + Show: + <span class="check-element" + ng-show="checked" + ng-animate="{show: 'example-show', hide: 'example-hide'}"> + <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. + </span> + </div> + <div> + Hide: + <span class="check-element" + ng-hide="checked" + ng-animate="{show: 'example-show', hide: 'example-hide'}"> + <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. + </span> + </div> + </file> + <file name="animations.css"> + .example-show-setup, .example-hide-setup { + -webkit-transition:all linear 0.5s; + -moz-transition:all linear 0.5s; + -ms-transition:all linear 0.5s; + -o-transition:all linear 0.5s; + transition:all linear 0.5s; + } + + .example-show-setup { + line-height:0; + opacity:0; + padding:0 10px; + } + .example-show-start.example-show-start { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + + .example-hide-setup { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + .example-hide-start.example-hide-start { + line-height:0; + opacity:0; + padding:0 10px; + } + + .check-element { + padding:10px; + border:1px solid black; + background:white; + } + </file> + <file name="scenario.js"> it('should check ng-show / ng-hide', function() { - expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); - expect(element('.doc-example-live span:last:visible').count()).toEqual(1); + expect(element('.doc-example-live .check-element:first:hidden').count()).toEqual(1); + expect(element('.doc-example-live .check-element:last:visible').count()).toEqual(1); input('checked').check(); - expect(element('.doc-example-live span:first:visible').count()).toEqual(1); - expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); + expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1); + expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1); }); - </doc:scenario> - </doc:example> + </file> + </example> */ //TODO(misko): refactor to remove element from the DOM var ngHideDirective = ['$animator', function($animator) { |