Merge pull request #16 from edcarroll/develop

v0.4.0 into master

Author: edcarroll

README.md

@@ -44,7 +44,7 @@ Now you're good to go!
 
 ## Dependencies
 
-* [Angular 2](https://angular.io) (2.0.0-rc.5 **or higher**)
+* [Angular 2](https://angular.io) (2.0.0-rc.7)
 * [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
 
 ## Components
@@ -62,6 +62,7 @@ The current list of available components with links to their docs is below:
 * [Search](http://edcarroll.github.io/ng2-semantic-ui/#/components/search)
 * [Select](http://edcarroll.github.io/ng2-semantic-ui/#/components/select)
 * [Tabs](http://edcarroll.github.io/ng2-semantic-ui/#/components/tabs)
+* [Transition](http://edcarroll.github.io/ng2-semantic-ui/#/components/transition)
 
 ## Development
 

components/accordion/accordion.module.ts

@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
 import {SUI_ACCORDION_DIRECTIVES, SUI_ACCORDION_PROVIDERS} from "./accordion";
 import {SuiCollapseModule} from "../collapse/collapse.module";
+import {CommonModule} from "@angular/common";
 
 @NgModule({
-    imports: [SuiCollapseModule],
+    imports: [CommonModule, SuiCollapseModule],
     declarations: SUI_ACCORDION_DIRECTIVES,
     exports: SUI_ACCORDION_DIRECTIVES,
     providers: SUI_ACCORDION_PROVIDERS

components/checkbox/checkbox.module.ts

@@ -2,9 +2,10 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {SUI_CHECKBOX_DIRECTIVES} from "./checkbox";
 import {SUI_RADIOBUTTON_DIRECTIVES} from "./radiobutton";
+import {CommonModule} from "@angular/common";
 
 @NgModule({
-    imports: [FormsModule],
+    imports: [CommonModule, FormsModule],
     declarations: [SUI_CHECKBOX_DIRECTIVES, SUI_RADIOBUTTON_DIRECTIVES],
     exports: [SUI_CHECKBOX_DIRECTIVES, SUI_RADIOBUTTON_DIRECTIVES]
 })

components/collapse/collapse.module.ts

@@ -1,7 +1,9 @@
 import {NgModule} from '@angular/core';
 import {SUI_COLLAPSE_DIRECTIVES} from './collapse';
+import {CommonModule} from "@angular/common";
 
 @NgModule({
+    imports: [CommonModule],
     declarations: SUI_COLLAPSE_DIRECTIVES,
     exports: SUI_COLLAPSE_DIRECTIVES
 })

components/dimmer/dimmer.module.ts

@@ -1,7 +1,9 @@
 import {NgModule} from '@angular/core';
 import {SUI_DIMMER_DIRECTIVES} from "./dimmer";
+import {CommonModule} from "@angular/common";
 
 @NgModule({
+    imports: [CommonModule],
     declarations: SUI_DIMMER_DIRECTIVES,
     exports: SUI_DIMMER_DIRECTIVES
 })

components/dropdown/dropdown-menu.ts

@@ -1,27 +1,25 @@
-import {Directive, ElementRef, HostBinding} from '@angular/core';
+import {Directive, ElementRef, HostBinding, Renderer} from '@angular/core';
 import {SuiDropdownService} from './dropdown.service';
+import {SuiTransition} from "../transition/transition";
 
 @Directive({
     selector: '[suiDropdownMenu]'
 })
 export class SuiDropdownMenu {
     private _service:SuiDropdownService;
+    private _transition:SuiTransition;
+
     public set service(service:SuiDropdownService) {
         this._service = service;
         this._service.menuElement = this.el;
+        this._service.transition = this._transition;
+        if (service.isOpen) {
+            this._transition.isVisible = true;
+        }
     }
 
-    public el:ElementRef;
-    public constructor(el:ElementRef) {
-        this.el = el;
-    }
-
-    @HostBinding('class.visible')
-    @HostBinding('class.transition')
-    public get isOpen():boolean {
-        if (this._service) {
-            return this._service.isOpen;
-        }
-        return;
+    public constructor(public el:ElementRef, public renderer:Renderer) {
+        this._transition = new SuiTransition(el, renderer);
+        this._transition.isVisible = false;
     }
 }

components/dropdown/dropdown.module.ts

@@ -1,9 +1,11 @@
 import {NgModule} from '@angular/core';
-import {SUI_DROPDOWN_DIRECTIVES, SUI_DROPDOWN_PROVIDERS} from "./dropdown";
+import {SUI_DROPDOWN_DIRECTIVES} from "./dropdown";
+import {CommonModule} from "@angular/common";
+import {SuiTransitionModule} from "../transition/transition.module";
 
 @NgModule({
+    imports: [CommonModule, SuiTransitionModule],
     declarations: SUI_DROPDOWN_DIRECTIVES,
-    exports: SUI_DROPDOWN_DIRECTIVES,
-    providers: SUI_DROPDOWN_PROVIDERS
+    exports: SUI_DROPDOWN_DIRECTIVES
 })
 export class SuiDropdownModule {}

components/dropdown/dropdown.service.ts

@@ -1,18 +1,20 @@
 import {EventEmitter, ElementRef} from '@angular/core';
+import {SuiTransition} from "../transition/transition";
 
-const DISABLED = 'disabled';
-const OUTSIDECLICK = 'outsideClick';
+const Disabled = 'disabled';
+const OutsideClick = 'outsideClick';
 
-export const KEYCODE = {
-    LEFT: 37,
-    UP: 38,
-    RIGHT: 39,
-    DOWN: 40,
+export const KeyCode = {
+    Left: 37,
+    Up: 38,
+    Right: 39,
+    Down: 40,
 
-    ESCAPE: 27,
-    ENTER: 13,
+    Escape: 27,
+    Enter: 13,
 
-    BACKSPACE: 	8
+    Space: 32,
+    Backspace: 8
 };
 
 export class SuiDropdownService {
@@ -41,14 +43,28 @@ export class SuiDropdownService {
     public itemSelectedClass = "selected";
     public itemDisabledClass = "disabled";
 
+    // Transitions
+    public transition:SuiTransition;
+    public isVisible:boolean;
+
     public get isOpen():boolean {
         return this._isOpen;
     }
 
     public set isOpen(value:boolean) {
+        if (value == this._isOpen) { return; }
         if (this.isDisabled) { value = false; }
 
         this._isOpen = value;
+        if (this.transition) {
+            this.isVisible = true;
+            this.transition.stopAll();
+            this.transition.animate({
+                name: "slide down",
+                duration: 200,
+                callback: () => this.isVisible = this.isOpen
+            });
+        }
 
         if (this.isOpen) {
             this.bindDocumentEvents();
@@ -84,7 +100,7 @@ export class SuiDropdownService {
 
     private closeDropdown(event:MouseEvent):void {
         //Never close the dropdown if autoClose is disabled
-        if (event && this.autoClose === DISABLED) {
+        if (event && this.autoClose === Disabled) {
             return;
         }
 
@@ -108,7 +124,7 @@ export class SuiDropdownService {
         }
 
         //Don't close the dropdown when clicking inside if autoClose is outsideClick
-        if (event && this.autoClose === OUTSIDECLICK &&
+        if (event && this.autoClose === OutsideClick &&
             this.menuElement &&
             this.menuElement.nativeElement.contains(event.target)) {
             return;
@@ -119,14 +135,14 @@ export class SuiDropdownService {
     }
 
     private keybindFilter(event:KeyboardEvent):void {
-        if (event.which === KEYCODE.ESCAPE) {
+        if (event.which === KeyCode.Escape) {
             this.isOpen = false;
             return;
         }
 
         //noinspection TypeScriptUnresolvedFunction
         if (this.isOpen &&
-            ([KEYCODE.ENTER, KEYCODE.UP, KEYCODE.RIGHT, KEYCODE.DOWN, KEYCODE.LEFT]
+            ([KeyCode.Enter, KeyCode.Up, KeyCode.Right, KeyCode.Down, KeyCode.Left]
                 .find(keyCode => event.which == keyCode))) {
             event.preventDefault();
             event.stopPropagation();
@@ -150,26 +166,26 @@ export class SuiDropdownService {
     public keyPress(keyCode:number):void {
         //noinspection FallThroughInSwitchStatementJS
         switch (keyCode) {
-            case KEYCODE.DOWN:
+            case KeyCode.Down:
                 this.selectNextItem();
                 break;
-            case KEYCODE.UP:
+            case KeyCode.Up:
                 this.selectPreviousItem();
                 break;
-            case KEYCODE.ENTER:
+            case KeyCode.Enter:
                 if (this.selectedItem && !this.selectedItem.hasAttribute("suiDropdown")) {
                     (<HTMLElement> this.selectedItem).click();
                     this.selectedItem = null;
                     break;
                 }
                 //Fall through on purpose! (So enter on a nested dropdown acts as right arrow)
-            case KEYCODE.RIGHT:
+            case KeyCode.Right:
                 if (this.selectedItem && this.selectedItem.hasAttribute("suiDropdown")) {
                     (<HTMLElement> this.selectedItem).click();
                     this.selectedItem = this.selectedItem.querySelector(`.${this.itemClass}:not(.${this.itemDisabledClass})`);
                 }
                 break;
-            case KEYCODE.LEFT:
+            case KeyCode.Left:
                 if (this.selectedItem.parentElement != this.menuElement.nativeElement) {
                     (<HTMLElement> this.selectedItem.parentElement.parentElement).click();
                     this.selectedItem = this.selectedItem.parentElement.parentElement;
@@ -193,12 +209,16 @@ export class SuiDropdownService {
     }
 
     public selectPreviousItem():void {
-        var previousItem = this.selectedItem.previousElementSibling;
-        if (previousItem) {
-            this.selectedItem = previousItem;
-            if (this.selectedItem.classList.contains(this.itemDisabledClass)) {
-                this.selectPreviousItem();
+        if (this.selectedItem) {
+            var previousItem = this.selectedItem.previousElementSibling;
+            if (previousItem) {
+                this.selectedItem = previousItem;
+                if (this.selectedItem.classList.contains(this.itemDisabledClass)) {
+                    this.selectPreviousItem();
+                }
             }
+            return;
         }
+        this.selectNextItem();
     }
 }

components/dropdown/dropdown.ts

@@ -9,7 +9,7 @@ export class SuiDropdown implements AfterContentInit {
     protected _service:SuiDropdownService;
     @ContentChild(SuiDropdownMenu) protected _menu:SuiDropdownMenu;
 
-    @HostBinding('class.visible')
+    @HostBinding('class.active')
     @Input()
     public get isOpen():boolean {
         return this._service.isOpen;
@@ -38,6 +38,11 @@ export class SuiDropdown implements AfterContentInit {
         return this._service.isOpenChange;
     }
 
+    @HostBinding('class.visible')
+    public get isVisible() {
+        return this._service.isVisible;
+    }
+
     @HostBinding('class.disabled')
     @Input()
     public get isDisabled():boolean {
@@ -69,4 +74,3 @@ export class SuiDropdown implements AfterContentInit {
 }
 
 export const SUI_DROPDOWN_DIRECTIVES = [SuiDropdown, SuiDropdownMenu];
-export const SUI_DROPDOWN_PROVIDERS = [SuiDropdownService];

components/index.ts

@@ -11,6 +11,7 @@ import {SuiRatingModule} from "./rating/rating.module";
 import {SuiSearchModule} from "./search/search.module";
 import {SuiTabsModule} from "./tabs/tab.module";
 import {SuiSelectModule} from "./select/select.module";
+import {SuiTransitionModule} from "./transition/transition.module";
 
 @NgModule({
     exports: [
@@ -24,7 +25,8 @@ import {SuiSelectModule} from "./select/select.module";
         SuiRatingModule,
         SuiSearchModule,
         SuiSelectModule,
-        SuiTabsModule
+        SuiTabsModule,
+        SuiTransitionModule
     ]
 })
 export class SuiModule {}
@@ -38,5 +40,7 @@ export {SuiMessageModule};
 export {SuiProgressModule};
 export {SuiRatingModule};
 export {SuiSearchModule};
-export {SuiTabsModule};
 export {SuiSelectModule};
+export {SuiTabsModule};
+export {SuiTransitionModule};
+