First preview version

README.md

@@ -1,96 +1,108 @@
-# Develop a NativeScript plugin now (w/ TypeScript)
+# NativeScript Plugin - FilePhotoView
+A simple library for viewing an image file on Android from local storage.
 
-## Getting started
+> This plugin supports Android only. For iOS, recommend to use nativescript-photoview plugin.
 
-1. `git clone https://github.com/NathanWalker/nativescript-plugin-seed.git myplugin`
-2. `npm install -g typescript`
-3. `cd myplugin`
-4. `npm run postclone`
-5. `npm run setup`
-6. Get to work.
+| Android
+| ------- 
+[FilePhotoView](https://github.com/skywidesoft/FilePhotoView)
 
-This seed expands on several things [presented here](http://developer.telerik.com/featured/creating-nativescript-plugins-in-typescript/).
+## Background
+I have an app that reads images from a protected REST API endpoints, and download into NativeScript as ImageSource. I need a photo viewer so when the thumbnail was tapped, the viewer for the photo will display with zoom functionality.
 
-## Usage
+So I need a photo popup viewer that supports NS's ImageSource. I found the nativescript-photoviewer that works well in supporting this, but for Android, it only supports external URL strings that I can't provide.
 
-The seed is prepared to allow you to test and try out your plugin via the `demo` folder.
-Additionally it provides a proper `.gitignore` to keep GitHub tidy as well as `.npmignore` to ensure everyone is happy when you publish your plugin via npm.
+Also, I found that passing an ImageSource directly to an Android library is not that strict forward (it easily cause out of memory error).
 
-### Linking to CocoaPod or Android Arsenal plugins
+As a result, I come up a simple approach as follows:
+* The image was download as NS's ImageSource instances
+* When user click on the thumbnail, the ImageSource will be saved to the application cache
+* The image file path will be passed to the above FilePhotoView Android library for pop up and display
+  * The FilePhotoView use Glide and PhotoView behind the scene
 
-You will want to create these folders and files in the root:
+## Installation
+Run  ```tns plugin add nativescript-file-photoview``` in your ROOT directory of your project.
 
-```
-platforms --
-  ios --
-    Podfile
-  android --
-    include.gradle
-```
+## Limitations
+Captions only available on iOS. Android only supports array of string urls as datasource. 
 
-Doing so will open up those native apis to your plugin :)
+## Usage
+The usage is very simple. Import "nativescript-file-photoview" module and create a instance of it. Call the ```show(string)``` (string is the local storage image file path) function to present the photo. 
+The ```show()``` function accept a singe parameter, a string.
 
-Take a look at these existing plugins for how that can be done very simply:
+```js
+import { Component, OnInit } from "@angular/core";
+import { Observable } from 'rxjs/Rx';
+import * as nshttp from 'http';
+import * as fs from 'file-system';
+import * as enums from 'ui/enums';
 
-* [nativescript-cardview](https://github.com/bradmartin/nativescript-cardview/tree/master/platforms)
-* [nativescript-floatingactionbutton](https://github.com/bradmartin/nativescript-floatingactionbutton/tree/master/platforms)
+// Import the plugin
+import { FilePhotoview } from 'nativescript-file-photoview';
 
-### Typical development workflow:
+@Component({
+    selector: "ns-app",
+    templateUrl: "app.component.html",
+})
+export class AppComponent implements OnInit { 
 
-1. Make changes to plugin files
-2. Make changes in `demo` that would test those changes out
-3. `npm run demo.ios` or `npm run demo.android`  **(must be run from the root directory)**
+    imageUrl: string;
 
-Those `demo` tasks are just general helpers. You may want to have more granular control on the device and/or emulator you want to run. For that, you can just run things the manual way:
+    filePhotoView = new FilePhotoview();
 
-```
-cd demo
+    ngOnInit() {
 
-// when developing, to ensure the latest code is built into the demo, it's a guarantee to remove the plugin and add it back
-tns plugin remove nativescript-file-photoview
-tns plugin add ..
+        this.imageUrl = 'https://controller1.skywidesoft.com/images/sample1.jpg';
 
-// manual platform adds
-tns platform add ios
-// and/or
-tns platform add android
-```
+    }
 
-Then use any of the available options from the `tns` command line:
+    viewPhoto() {
+        console.log('View Photo');
+        console.log(`imageUrl: ${this.imageUrl}`);
 
-* [Emulate your project](https://github.com/NativeScript/nativescript-cli#emulate-your-project)
-* [Run your project](https://github.com/NativeScript/nativescript-cli#run-your-project)
-* [Full list of commands](https://github.com/NativeScript/nativescript-cli#the-commands)
+        // Download image and save file to application cache
+        Observable.from(nshttp.getImage(this.imageUrl)).subscribe(
+            image => {
 
-## Unittesting
-This plugin automatically adds Jasmine-based unittest support to your plugin.
-Open `demo/app/tests/tests.js` and adjust its contents.
+                // This is the application's cache folder
+                let folder = fs.knownFolders.temp();
 
-You can read more about this topic [here](https://docs.nativescript.org/tooling/testing).
+                // Construct a unique file name for saving the image file
+                let fileName = new Date().getTime() + '.jpg';
+                let path = fs.path.join(folder.path, fileName);
 
-Once you're ready to test your plugin's API execute one of these commands in the plugin root:
+                // Save the file
+                image.saveToFile(path, enums.ImageFormat.jpg);
+                console.log(`File: ${path} saved successfully`);
 
-```
-npm run test.ios
-npm run test.android
-```
+                // Display the photo
+                this.filePhotoView.show(path);
+
+            }
+        );
+    }
 
-## Publish
+}
+```
 
-When you have everything ready to publish:
+## Screenshots
+![Demo PNG](screenshot.png)
 
-* Bump the version number in `package.json`
-* `npm run build` - **very important** - ensure the latest is built **before** you publish
-* `npm publish`
+## Help
+I will accept pull requests that improve this and assign credit. 
+All code is Apache 2.0 licensed.
 
-## Contributing - Want to make the seed better?
+## License
+Copyright 2017 SkywideSoft
 
-Or at least help keep it up to date with NativeScript releases, which would be excellent.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-```
-npm install -g typescript  // if you don't already have it
-git clone https://github.com/NathanWalker/nativescript-plugin-seed
-cd nativescript-plugin-seed
+   http://www.apache.org/licenses/LICENSE-2.0
 
-// Improve!
-```
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

demo/app/App_Resources/Android/app.gradle

@@ -8,7 +8,7 @@
 android {  
   defaultConfig {  
     generatedDensities = []
-    applicationId = "org.nativescript.starter"  
+    applicationId = "org.nativescript.demo"  
   }  
   aaptOptions {  
     additionalParameters "--no-version-vectors"  

demo/app/App_Resources/iOS/build.xcconfig

@@ -1,5 +1,7 @@
 // You can add custom settings here
 // for example you can uncomment the following line to force distribution code signing
 // CODE_SIGN_IDENTITY = iPhone Distribution 
+// To build for device with XCode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
+// DEVELOPMENT_TEAM = YOUR_TEAM_ID;
 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;

demo/app/app.component.html

@@ -0,0 +1,10 @@
+<StackLayout>
+    <Label text="Demo for nativescript-file-photoview plugin"></Label>
+
+    <StackLayout>
+        <Label text="Enter image URL into the following text field"></Label>
+        <TextField [(ngModel)]="imageUrl"></TextField>
+    </StackLayout>
+
+    <Button text="View Photo" (tap)="viewPhoto()"></Button>
+</StackLayout>

demo/app/app.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from "@angular/core";
+import { Observable } from 'rxjs/Rx';
+import * as nshttp from 'http';
+import * as fs from 'file-system';
+import * as enums from 'ui/enums';
+
+import { FilePhotoview } from 'nativescript-file-photoview';
+
+@Component({
+    selector: "ns-app",
+    templateUrl: "app.component.html",
+})
+export class AppComponent implements OnInit { 
+
+    imageUrl: string;
+
+    filePhotoView = new FilePhotoview();
+
+    ngOnInit() {
+
+        this.imageUrl = 'https://controller1.skywidesoft.com/images/sample1.jpg';
+
+    }
+
+    viewPhoto() {
+        console.log('View Photo');
+        console.log(`imageUrl: ${this.imageUrl}`);
+
+        // Download image and save file to application cache
+        Observable.from(nshttp.getImage(this.imageUrl)).subscribe(
+            image => {
+
+                let folder = fs.knownFolders.temp();
+
+                let fileName = new Date().getTime() + '.jpg';
+
+                let path = fs.path.join(folder.path, fileName);
+
+                image.saveToFile(path, enums.ImageFormat.jpg);
+                console.log(`File: ${path} saved successfully`);
+
+                this.filePhotoView.show(path);
+
+            }
+        );
+    }
+
+}

demo/app/app.css

@@ -1 +1,12 @@
-@import 'nativescript-theme-core/css/core.light.css';
+/*
+In NativeScript, the app.css file is where you place CSS rules that
+you would like to apply to your entire application. Check out
+http://docs.nativescript.org/ui/styling for a full list of the CSS
+selectors and properties you can use to style UI components.
+
+/*
+In many cases you may want to use the NativeScript core theme instead
+of writing your own CSS rules. For a full list of class names in the theme
+refer to http://docs.nativescript.org/ui/theme.
+*/
+@import 'nativescript-theme-core/css/core.light.css';

demo/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptFormsModule } from "nativescript-angular/forms";
+import { AppComponent } from "./app.component";
+
+@NgModule({
+    bootstrap: [
+        AppComponent
+    ],
+    imports: [
+        NativeScriptModule,
+        NativeScriptFormsModule
+    ],
+    declarations: [
+        AppComponent
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+export class AppModule { }

demo/app/main.aot.ts

@@ -0,0 +1,6 @@
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
+import { platformNativeScript } from "nativescript-angular/platform-static";
+
+import { AppModuleNgFactory } from "./app.module.ngfactory";
+
+platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

demo/app/main.ts

@@ -0,0 +1,6 @@
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
+import { platformNativeScriptDynamic } from "nativescript-angular/platform";
+
+import { AppModule } from "./app.module";
+
+platformNativeScriptDynamic().bootstrapModule(AppModule);