Added Transition documentation

edcarroll · edcarroll · commit 34fc1c46cf83 · 2016-09-15T02:45:54.000+01:00
diff --git a/components/select/select.ts b/components/select/select.ts
@@ -100,6 +100,7 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {
     private set query(value:string) {
         this._searchService.updateQuery(value);
         this.isOpen = true;
+        this.focusFirstItem();
     }
 
     @Output()
@@ -220,6 +221,13 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {
         }
     }
 
+    private focusFirstItem() {
+        setTimeout(() => {
+            this._dropdownService.selectedItem = null;
+            this._dropdownService.selectNextItem();
+        });
+    }
+
     public writeValue(value:any) {
         if (value) {
             this.selectedOption = value;
diff --git a/components/transition/transition.ts b/components/transition/transition.ts
@@ -4,6 +4,7 @@ export interface ISuiAnimation {
     name:string;
     classes?:string[];
     duration?:number;
+    static?:boolean;
     display?:string;
     direction?:string;
     callback?:() => any;
@@ -75,6 +76,9 @@ export class SuiTransition {
         if (!animation.display) {
             animation.display = 'block';
         }
+        if (!animation.static) {
+            animation.static = ["jiggle", "flash", "shake", "pulse", "tada", "bounce"].indexOf(animation.name) != -1;
+        }
         if (!animation.direction) {
             animation.direction = this.isVisible ? "out" : "in";
             let queueLast = this.queueFirst();
@@ -117,6 +121,9 @@ export class SuiTransition {
         this.renderer.setElementStyle(this.el.nativeElement, `display`, null);
 
         this.isVisible = animation.direction == "in" ? true : false;
+        if (animation.static) {
+            this.isVisible = !this.isVisible;
+        }
 
         if (animation.callback) {
             animation.callback();
diff --git a/demo/app/app.component.html b/demo/app/app.component.html
@@ -28,6 +28,7 @@
                     <a class="item" routerLink="/components/search" routerLinkActive="active">Search</a>
                     <a class="item" routerLink="/components/select" routerLinkActive="active">Select</a>
                     <a class="item" routerLink="/components/tabs" routerLinkActive="active">Tabs</a>
+                    <a class="item" routerLink="/components/transition" routerLinkActive="active">Transition</a>
                 </div>
             </div>
         </div>
diff --git a/demo/app/app.module.ts b/demo/app/app.module.ts
@@ -23,6 +23,7 @@ import { TabsPageComponents } from "./pages/tabs/tabs.page";
 import { TestPage } from "./pages/test/test.page";
 
 import {CodeblockComponent} from './components/codeblock/codeblock.component';
+import {TransitionPageComponents} from "./pages/transition/transition.page";
 
 @NgModule({
     declarations: [
@@ -46,6 +47,7 @@ import {CodeblockComponent} from './components/codeblock/codeblock.component';
         SearchPageComponents,
         SelectPageComponents,
         TabsPageComponents,
+        TransitionPageComponents,
 
         TestPage
     ],
diff --git a/demo/app/app.routing.ts b/demo/app/app.routing.ts
@@ -14,6 +14,7 @@ import {SearchPage} from "./pages/search/search.page";
 import {TabsPage} from "./pages/tabs/tabs.page";
 import {TestPage} from "./pages/test/test.page";
 import {SelectPage} from "./pages/select/select.page";
+import {TransitionPage} from "./pages/transition/transition.page";
 
 const appRoutes: Routes = [
     {
@@ -64,6 +65,10 @@ const appRoutes: Routes = [
         path: 'components/tabs',
         component: TabsPage
     },
+    {
+        path: 'components/transition',
+        component: TransitionPage
+    },
     {
         path: 'test',
         component: TestPage
diff --git a/demo/app/components/example/example.component.html b/demo/app/components/example/example.component.html
@@ -10,7 +10,7 @@
             <i class="edit icon visible" (click)="detail = !detail"></i>
         </div>
     </div>
-    <div [suiCollapse]="!detail">
+    <div [suiCollapse]="!detail" *ngIf="code">
         <div class="annotation transition visible">
             <div class="ui instructive bottom attached segment">
                 <demo-codeblock language="markup" [src]="code"></demo-codeblock>
diff --git a/demo/app/components/example/example.component.ts b/demo/app/components/example/example.component.ts
@@ -9,5 +9,6 @@ import {Component, Input} from '@angular/core';
 export class ExampleComponent {
     private detail:boolean = false;
 
-    @Input() public code:string;
+    @Input()
+    public code:string;
 }
diff --git a/demo/app/pages/transition/index.ts b/demo/app/pages/transition/index.ts
@@ -0,0 +1 @@
+export * from './transition.page';
diff --git a/demo/app/pages/transition/transition.page.css b/demo/app/pages/transition/transition.page.css
diff --git a/demo/app/pages/transition/transition.page.html b/demo/app/pages/transition/transition.page.html
@@ -0,0 +1,26 @@
+<demo-page-title>
+    <div header>Message</div>
+    <div sub-header>
+        <p>A message displays information that explains nearby content</p>
+    </div>
+</demo-page-title>
+<div class="ui main container">
+    <div class="ui dividing right rail"></div>
+    <h2 id="examples" class="ui dividing header">Examples</h2>
+    <demo-example [code]="exampleStandardTemplate">
+        <div info>
+            <h4 class="ui header">Transition</h4>
+            <p>Transitions can be added to any DOM element</p>
+        </div>
+        <transition-example-standard result></transition-example-standard>
+    </demo-example>
+    <demo-example>
+        <div info>
+            <h4 class="ui header">Advanced</h4>
+            <p>To make use of more advanced functionality, directly use the SuiTransition class.</p>
+        </div>
+        <demo-codeblock result language="typescript" [src]="advancedExampleCode"></demo-codeblock>
+    </demo-example>
+    <h2 id="api" class="ui dividing header">API</h2>
+    <demo-api [api]="api"></demo-api>
+</div>
diff --git a/demo/app/pages/transition/transition.page.ts b/demo/app/pages/transition/transition.page.ts
@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import {SuiTransition} from "../../../../components/transition/transition";
+
+@Component({
+  selector: 'demo-page-transition',
+  templateUrl: 'transition.page.html',
+  styleUrls: ['transition.page.css']
+})
+export class TransitionPage {
+    public api = [
+        {
+            selector: "[suiTransition]"
+        }
+    ];
+
+    public exampleStandardTemplate:string = `
+<div class="ui segment">
+    <img src="https://lerebooks.files.wordpress.com/2012/11/eye.jpg?w=150" class="ui image" suiTransition #transition="transition">
+</div>
+<sui-select [(ngModel)]="selectedTransition" [options]="transitions" [isSearchable]="true" #animSelect>
+    <sui-select-option *ngFor="let a of animSelect.availableOptions" [value]="a"></sui-select-option>
+</sui-select>
+<button class="ui button" (click)="transition.animate({ name: selectedTransition, duration: 500 })">Animate</button>
+`;
+
+    public advancedExampleCode:string = `
+@Component()
+export class MyComponent {
+    private transition:SuiTransition;
+    constructor(el:ElementRef, renderer:Renderer) {
+        //You can use a @ViewChild() to use a different element than the root.
+        this.transition = new SuiTransition(el, renderer);
+    }
+    
+    public animate() {
+        this.transition.animate({
+            name: /* Transition Name */,
+            duration?: /* Duration in ms (default 250)*/,
+            direction?: /* Direction (in or out), leave blank for automatic */,
+            display?: /* Which display styling to use when animating (default 'block') */,
+            callback?: /* Callback called when the animation is finished */
+        });
+    }
+    
+    public otherPropertiesMethods() {
+        // Whether an animation is currently running
+        this.transition.isAnimating;
+        // Stop the currently running transition
+        this.transition.stop();
+        // Stop the currently running transition and all queued transitions
+        this.transition.stopAll();
+        // Stop all animations not including the current one
+        this.transition.clearQueue();
+    }
+}
+`
+}
+
+@Component({
+    selector: 'transition-example-standard',
+    template: new TransitionPage().exampleStandardTemplate
+})
+export class TransitionExampleStandard {
+    public transitions = ["scale", "fade", "fade up", "fade down", "fade left", "fade right", "horizontal flip", "vertical flip",
+        "drop", "fly left", "fly right", "fly up", "fly down", "swing left", "swing right", "swing up", "swing down", "browse", "browse right",
+        "slide left", "slide right", "slide up", "slide down", "jiggle", "flash", "shake", "pulse", "tada", "bounce"];
+    public selectedTransition = "fade";
+}
+
+export const TransitionPageComponents:Array<any> = [TransitionPage, TransitionExampleStandard];

Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {`
`100`	`100`	`private set query(value:string) {`
`101`	`101`	`this._searchService.updateQuery(value);`
`102`	`102`	`this.isOpen = true;`
	`103`	`+ this.focusFirstItem();`
`103`	`104`	`}`
`104`	`105`
`105`	`106`	`@Output()`
`@@ -220,6 +221,13 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {`
`220`	`221`	`}`
`221`	`222`	`}`
`222`	`223`
	`224`	`+ private focusFirstItem() {`
	`225`	`+ setTimeout(() => {`
	`226`	`+ this._dropdownService.selectedItem = null;`
	`227`	`+ this._dropdownService.selectNextItem();`
	`228`	`+ });`
	`229`	`+ }`
	`230`	`+`
`223`	`231`	`public writeValue(value:any) {`
`224`	`232`	`if (value) {`
`225`	`233`	`this.selectedOption = value;`
Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,6 @@ import {Component, Input} from '@angular/core';`
`9`	`9`	`export class ExampleComponent {`
`10`	`10`	`private detail:boolean = false;`
`11`	`11`
`12`		`- @Input() public code:string;`
	`12`	`+ @Input()`
	`13`	`+ public code:string;`
`13`	`14`	`}`