Non angular events (#51)

Implements #20

Author: PeterStaev

README.md

@@ -21,7 +21,20 @@ You need to add `xmlns:dd="nativescript-drop-down"` to your page tag, and then s
 
 ## API
 
+### Events
+* **opened**  
+Triggered when the DropDown is opened. 
+
+* **selectedIndexChanged**  
+Triggered when the user changes the selection in the DropDown 
+
 ### Static Properties
+* **openedEvent** - *String*  
+String value used when hooking to opened event.
+
+* **selectedIndexChangedEvent** - *String*  
+String value used when hooking to selectedIndexChanged event.
+
 * **itemsProperty** - *[Property](http://docs.nativescript.org/api-reference/classes/_ui_core_dependency_observable_.property.html)*  
 Represents the observable property backing the items property of each DropDown instance.
 
@@ -59,7 +72,9 @@ Opens the drop down.
 <!-- test-page.xml -->
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:dd="nativescript-drop-down">
   <GridLayout rows="auto, auto, *" columns="auto, *">
-    <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" row="0" colSpan="2" />
+    <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" 
+                 opened="dropDownOpened" selectedIndexChanged="dropDownSelectedIndexChanged"
+                 row="0" colSpan="2" />
     <Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"/>
     <TextField text="{{ selectedIndex }}" row="1" col="1" />
   </GridLayout>
@@ -71,6 +86,7 @@ Opens the drop down.
 import observable = require("data/observable");
 import observableArray = require("data/observable-array");
 import pages = require("ui/page");
+import { SelectedIndexChangedEventData } from "nativescript-drop-down";
 
 var viewModel: observable.Observable;
 
@@ -89,24 +105,45 @@ export function pageLoaded(args: observable.EventData) {
 
     page.bindingContext = viewModel;
 }
+
+export function dropDownOpened(args: EventData) {
+    console.log("Drop Down opened");
+}
+
+export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
+    console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
+}
 ```
 
 ## Angular 2 Example
 
 ```TypeScript
 // main.ts
-import {nativeScriptBootstrap} from "nativescript-angular/application";
-import {AppComponent} from "./app.component";
-import {registerElement} from "nativescript-angular/element-registry";
+import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
+import { NgModule } from "@angular/core";
+import { AppComponent } from "./app.component";
+import { registerElement } from "nativescript-angular/element-registry";
+
 registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown);
-nativeScriptBootstrap(AppComponent);
+
+@NgModule({
+    declarations: [AppComponent],
+    bootstrap: [AppComponent],
+    imports: [NativeScriptModule],
+})
+class AppComponentModule {}
+
+platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
 ```
 
 ```HTML
 <!-- app.component.html -->
 <StackLayout>
     <GridLayout rows="auto, auto, *" columns="auto, *">
-        <DropDown #dd backroundColor="red" [items]="items" [selectedIndex]="selectedIndex" (selectedIndexChange)="onchange(dd.selectedIndex)" row="0" colSpan="2"></DropDown>
+        <DropDown #dd backroundColor="red" [items]="items" [selectedIndex]="selectedIndex" 
+                  (selectedIndexChanged)="onchange($event)" (opened)="onopen()"
+                  row="0" colSpan="2">
+        </DropDown>
         <Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"></Label>
         <TextField [text]="selected" row="1" col="1" ></TextField>
     </GridLayout>
@@ -115,8 +152,8 @@ nativeScriptBootstrap(AppComponent);
 
 ```TypeScript
 // app.component.ts
-import {Component, OnInit, OnChanges} from "@angular/core";
-import {ObservableArray} from "data/observable-array";
+import { Component } from "@angular/core";
+import { SelectedIndexChangedEventData } from "nativescript-drop-down";
 
 @Component({
     selector: "my-app",
@@ -133,8 +170,12 @@ export class AppComponent {
         }
     }
 
-    public onchange(selectedi){
-        console.log("selected index " + selectedi);
+    public onchange(args: SelectedIndexChangedEventData) {
+        console.log(`Drop Down selected index changed from ${args.oldIndex} to ${args.newIndex}`);
+    }
+
+    public onopen() {
+        console.log("Drop Down opened.");
     }
 }
 ```

drop-down-common.ts

@@ -37,8 +37,10 @@ function onHintPropertyChanged(data: PropertyChangeData) {
     picker._onHintPropertyChanged(data);
 }
 
-
 export abstract class DropDown extends View implements definition.DropDown {
+    public static openedEvent = "opened";
+    public static selectedIndexChangedEvent = "selectedIndexChanged";
+    
     public static itemsProperty = new Property(
         "items",
         DROPDOWN,

drop-down.android.ts

@@ -21,6 +21,7 @@ import { Label } from "ui/label";
 import { StackLayout } from "ui/layouts/stack-layout";
 import { Color } from "color";
 import * as types from "utils/types";
+import { SelectedIndexChangedEventData } from "nativescript-drop-down";
 
 global.moduleMerge(common, exports);
 
@@ -50,11 +51,37 @@ export class DropDown extends common.DropDown {
         let that = new WeakRef(this);
         this.android.setOnItemSelectedListener(new android.widget.AdapterView.OnItemSelectedListener({
             onItemSelected(parent: any, convertView: android.view.View, index: number, id: number) {
-                let owner = that.get();
+                let owner = that.get(),
+                    oldIndex = owner.selectedIndex,
+                    newIndex = (index === 0 ? undefined : index - 1);
+                
                 owner._selectedIndexInternal = index;
+
+                if (newIndex !== oldIndex) {
+                    owner.notify(<SelectedIndexChangedEventData>{
+                        eventName: common.DropDown.selectedIndexChangedEvent,
+                        object: owner,
+                        oldIndex: oldIndex,
+                        newIndex: newIndex
+                    });
+                }                
             },
             onNothingSelected() { /* Currently Not Needed */ }
         }));
+        
+        this.android.setOnTouchListener(new android.view.View.OnTouchListener({
+            onTouch(v: android.view.View, event: android.view.MotionEvent) {
+                if (event.getAction() === android.view.MotionEvent.ACTION_DOWN) {
+                    let owner = that.get();
+
+                    owner.notify({
+                        eventName: common.DropDown.openedEvent,
+                        object: owner
+                    });
+                }
+                return false;                
+            }
+        }));
 
         // When used in templates the selectedIndex changed event is fired before the native widget is init.
         // So here we must set the inital value (if any)

drop-down.d.ts

@@ -17,8 +17,17 @@ limitations under the License.
 declare module "nativescript-drop-down" {
     import { View } from "ui/core/view";
     import { Property } from "ui/core/dependency-observable";
+    import { EventData } from "data/observable";
+
+    export interface SelectedIndexChangedEventData extends EventData {
+        oldIndex: number;
+        newIndex: number;
+    }
 
     export class DropDown extends View {
+        public static openedEvent: string;
+        public static selectedIndexChangedEvent: string;
+
         public static itemsProperty: Property;
         public static selectedIndexProperty: Property;
         public static hintProperty: Property;
@@ -31,6 +40,10 @@ declare module "nativescript-drop-down" {
         ios: UITextField;
         android: android.widget.Spinner;
 
+        public on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);       
+        public on(event: "opened", callback: (args: EventData) => void, thisArg?: any); 
+        public on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
+
         public open();
     }
 }

drop-down.ios.ts

@@ -25,6 +25,7 @@ import { Font } from "ui/styling/font";
 import { Span } from "text/span";
 import { FormattedString } from "text/formatted-string";
 import * as enums from "ui/enums";
+import { SelectedIndexChangedEventData } from "nativescript-drop-down";
 
 global.moduleMerge(common, exports);
 
@@ -36,7 +37,7 @@ export class DropDown extends common.DropDown {
     private _doneButton: UIBarButtonItem;
     private _doneTapDelegate: TapHandler;
     private _accessoryViewVisible: boolean;
-    
+
     public _textField: TextField;
     public _listPicker: ListPicker;
 
@@ -49,6 +50,7 @@ export class DropDown extends common.DropDown {
         this._listPicker = new ListPicker();
 
         (this._listPicker as any)._delegate = DropDownListPickerDelegateImpl.initWithOwner(this);        
+        (this._textField as any)._delegate = DropDownTextFieldDelegateImpl.initWithOwner(this);        
         this._flexToolbarSpace = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(UIBarButtonSystemItem.FlexibleSpace, null, null);
         this._doneTapDelegate = TapHandler.initWithOwner(new WeakRef(this));
         this._doneButton = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(UIBarButtonSystemItem.Done, this._doneTapDelegate, "tap");
@@ -92,6 +94,7 @@ export class DropDown extends common.DropDown {
             });
         this.ios.inputView = this._listPicker.ios;
         this._showHideAccessoryView();
+        
     }
 
     public onUnloaded() {
@@ -144,6 +147,27 @@ class TapHandler extends NSObject {
     }
 }
 
+class DropDownTextFieldDelegateImpl extends NSObject implements UITextFieldDelegate {
+   public static ObjCProtocols = [UITextFieldDelegate];
+
+    private _owner: WeakRef<DropDown>;
+    
+    public static initWithOwner(owner: DropDown): DropDownTextFieldDelegateImpl {
+        let delegate = <DropDownTextFieldDelegateImpl>DropDownTextFieldDelegateImpl.new();
+        delegate._owner = new WeakRef(owner);
+        return delegate;
+    }
+
+    public textFieldDidBeginEditing(textField: UITextField) {
+        let owner = this._owner.get();
+
+        owner.notify({
+            eventName: common.DropDown.openedEvent,
+            object: owner
+        });
+    } 
+}
+
 class DropDownListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
     public static ObjCProtocols = [UIPickerViewDelegate];
 
@@ -181,7 +205,18 @@ class DropDownListPickerDelegateImpl extends NSObject implements UIPickerViewDel
     public pickerViewDidSelectRowInComponent(pickerView: UIPickerView, row: number, component: number): void {
         let owner = this._owner.get();
         if (owner) {
+            let oldIndex = owner.selectedIndex;
+
             owner._listPicker._onPropertyChangedFromNative(ListPicker.selectedIndexProperty, row);
+
+            if (row !== oldIndex) {
+                owner.notify(<SelectedIndexChangedEventData>{
+                    eventName: common.DropDown.selectedIndexChangedEvent,
+                    object: owner,
+                    oldIndex: oldIndex,
+                    newIndex: row
+                });
+            }
         }
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-drop-down",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A NativeScript DropDown widget.",
   "main": "drop-down.js",
   "nativescript": {