first version.

README.md

@@ -1,40 +1,78 @@
-# nativescript-image-popup
+Image Popup plugin for NativeScript.
 
-Add your plugin badges here. See [nativescript-urlhandler](https://github.com/hypery2k/nativescript-urlhandler) for example.
+Based on:
 
-Then describe what's the purpose of your plugin. 
+- Android [chathuralakmal/AndroidImagePopup](https://github.com/chathuralakmal/AndroidImagePopup)
+- iOS - Coming Soon.
 
-In case you develop UI plugin, this is where you can add some screenshots.
+# Install
 
-## (Optional) Prerequisites / Requirements
+### NativeScript 6x
 
-Describe the prerequisites that the user need to have installed before using your plugin. See [nativescript-firebase plugin](https://github.com/eddyverbruggen/nativescript-plugin-firebase) for example.
+```bash
+tns plugin add nativescript-image-popup
+```
 
-## Installation
+<img src="android_example.gif" width="400">
 
-Describe your plugin installation steps. Ideally it would be something like:
 
-```javascript
-tns plugin add nativescript-image-popup
+
+
+
+# Android Specifications
+
+#### Usage Examples
+
+
+```js
+import { ImagePopup } from 'nativescript-image-popup';
+import { ImagePopupOptions } from 'nativescript-image-popup/classes';
+
+// basic use
+ImagePopup.localImagePopup("~/assets/images/nmb.jpg");
+
+// or
+
+ImagePopup.networkImagePopup("https://i.hizliresim.com/kx47Db.png");
+
+
+// with options
+const options: ImagePopupOptions = {
+    path: "https://i.hizliresim.com/kx47Db.png",
+    width: 500,
+    height: 500,
+    fullScreen: true,
+    backgroundColor:ImagePopupBackgroundColors.TRANSPARENT, // or manuel color ( red, blue #ffd200)
+    hideCloseIcon: false;
+    imageOnClickClose: true
+};
+
 ```
 
-## Usage 
+#### NativeScript Image Popup - Methods
+
+- `localImagePopup(options: ImagePopupOptions | string)`
+- `networkImagePopup(options: ImagePopupOptions | string)`
+
+
+
+## Why the TNS prefixed name?
+
+`TNS` stands for **T**elerik **N**ative**S**cript
+
+iOS uses classes prefixed with `NS` (stemming from the [NeXTSTEP](https://en.wikipedia.org/wiki/NeXTSTEP) days of old):
+https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/
+
+To avoid confusion with iOS native classes, `TNS` is used instead.
+
+## Demo
+
+Need extra help getting these Image Popup working in your application? Check out these tutorials that make use of the plugin:
 
-Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See [nativescript-drop-down](https://www.npmjs.com/package/nativescript-drop-down) for example.
-
-	```javascript
-    Usage code snippets here
-    ```)
+[Image Popup in a NativeScript Core Demo](https://github.com/NazimMertBilgi/nativescript-image-popup/blob/master/demo/app/home/home-page.ts)
 
-## API
+[Image Popup in a NativeScript Angular Demo](https://github.com/NazimMertBilgi/nativescript-image-popup/blob/master/demo-angular/src/app/home/home.component.ts)
 
-Describe your plugin methods and properties here. See [nativescript-feedback](https://github.com/EddyVerbruggen/nativescript-feedback) for example.
-
-| Property | Default | Description |
-| --- | --- | --- |
-| some property | property default value | property description, default values, etc.. |
-| another property | property default value | property description, default values, etc.. |
-
 ## License
 
-Apache License Version 2.0, January 2004
+MIT

demo-angular/src/app/app.component.ts

@@ -1,5 +1,3 @@
-import { ImagePopup } from 'nativescript-image-popup';
-console.log(new ImagePopup().message);
 import { Component } from "@angular/core";
 
 @Component({

demo-angular/src/app/home/home.component.html

@@ -1,7 +1,12 @@
 <ActionBar>
-    <Label text="Home"></Label>
+    <Label text="NativeScript Image Popup"></Label>
 </ActionBar>
 
-<GridLayout>
-    <!-- Add your page content here -->
+<GridLayout rows="*,*,*,*,*,*">
+    <Button row="0" text="Show Default Local Image" (tap)="showDefaultImage()"></Button>
+    <Button row="1" text="Show Default Network Image" (tap)="showDefaultNetworkImage()"></Button>
+    <Button row="2" text="Show Width Height Image" (tap)="showWidthHeightImage()"></Button>
+    <Button row="3" text="Show Full Screen Image" (tap)="showFullScreenImage()"></Button>
+    <Button row="4" text="Show Background Transparent Image" (tap)="showBackgroundTransparentImage()"></Button>
+    <Button row="5" text="Show Background Color Image" (tap)="showBackgroundColorImage()"></Button>
 </GridLayout>

demo-angular/src/app/home/home.component.ts

@@ -1,16 +1,51 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
+import { ImagePopup } from 'nativescript-image-popup';
+import { ImagePopupOptions, ImagePopupBackgroundColors } from "nativescript-image-popup/classes";
 
 @Component({
     selector: "Home",
     templateUrl: "./home.component.html"
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent {
 
-    constructor() {
-        // Use the component constructor to inject providers.
+    showDefaultImage() {
+        ImagePopup.localImagePopup("~/assets/images/nmb.jpg");
     }
 
-    ngOnInit(): void {
-        // Init your component properties here.
+    showDefaultNetworkImage() {
+        ImagePopup.networkImagePopup("https://i.hizliresim.com/kx47Db.png");
+    }
+
+    showWidthHeightImage() {
+        const options: ImagePopupOptions = {
+            path: "https://i.hizliresim.com/kx47Db.png",
+            width: 300,
+            height: 300
+        };
+        ImagePopup.networkImagePopup(options);
+    }
+
+    showFullScreenImage() {
+        const options: ImagePopupOptions = {
+            path: "https://i.hizliresim.com/kx47Db.png",
+            fullScreen: true
+        };
+        ImagePopup.networkImagePopup(options);
+    }
+
+    showBackgroundTransparentImage() {
+        const options: ImagePopupOptions = {
+            path: "https://i.hizliresim.com/kx47Db.png",
+            backgroundColor: ImagePopupBackgroundColors.TRANSPARENT
+        };
+        ImagePopup.networkImagePopup(options);
+    }
+
+    showBackgroundColorImage() {
+        const options: ImagePopupOptions = {
+            path: "https://i.hizliresim.com/kx47Db.png",
+            backgroundColor: "#2980b9" // red, blue #ffd200 and others..
+        };
+        ImagePopup.networkImagePopup(options);
     }
 }

demo/app/home/home-page.ts

@@ -1,17 +1,52 @@
 import { ImagePopup } from 'nativescript-image-popup';
-console.log(new ImagePopup().message);
-/*
-In NativeScript, a file with the same name as an XML file is known as
-a code-behind file. The code-behind is a great place to place your view
-logic, and to set up your page’s data binding.
-*/
+import { ImagePopupOptions, ImagePopupBackgroundColors } from 'nativescript-image-popup/classes';
 
 import { NavigatedData, Page } from "tns-core-modules/ui/page";
-
 import { HomeViewModel } from "./home-view-model";
 
 export function onNavigatingTo(args: NavigatedData) {
     const page = <Page>args.object;
 
     page.bindingContext = new HomeViewModel();
 }
+
+export function showDefaultImage() {
+    ImagePopup.localImagePopup("~/assets/images/nmb.jpg");
+}
+
+export function showDefaultNetworkImage() {
+    ImagePopup.networkImagePopup("https://i.hizliresim.com/kx47Db.png");
+}
+
+export function showWidthHeightImage() {
+    const options: ImagePopupOptions = {
+        path: "https://i.hizliresim.com/kx47Db.png",
+        width: 300,
+        height: 300
+    };
+    ImagePopup.networkImagePopup(options);
+}
+
+export function showFullScreenImage() {
+    const options: ImagePopupOptions = {
+        path: "https://i.hizliresim.com/kx47Db.png",
+        fullScreen: true
+    };
+    ImagePopup.networkImagePopup(options);
+}
+
+export function showBackgroundTransparentImage() {
+    const options: ImagePopupOptions = {
+        path: "https://i.hizliresim.com/kx47Db.png",
+        backgroundColor: ImagePopupBackgroundColors.TRANSPARENT
+    };
+    ImagePopup.networkImagePopup(options);
+}
+
+export function showBackgroundColorImage() {
+    const options: ImagePopupOptions = {
+        path: "https://i.hizliresim.com/kx47Db.png",
+        backgroundColor: "#2980b9" // red, blue #ffd200 and others..
+    };
+    ImagePopup.networkImagePopup(options);
+}

demo/app/home/home-page.xml

@@ -1,12 +1,15 @@
-<Page
-    navigatingTo="onNavigatingTo" 
-    xmlns="http://schemas.nativescript.org/tns.xsd">
-
+<Page navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd">
+
     <ActionBar>
-        <Label text="Home"></Label>
+        <Label text="NativeScript Image Popup"></Label>
     </ActionBar>
 
-    <GridLayout>
-        <!-- Add your page content here -->
+    <GridLayout rows="*,*,*,*,*,*">
+        <Button row="0" text="Show Default Local Image" tap="showDefaultImage" />
+        <Button row="1" text="Show Default Network Image" tap="showDefaultNetworkImage" />
+        <Button row="2" text="Show Width Height Image" tap="showWidthHeightImage" />
+        <Button row="3" text="Show Full Screen Image" tap="showFullScreenImage" />
+        <Button row="4" text="Show Background Transparent Image" tap="showBackgroundTransparentImage" />
+        <Button row="5" text="Show Background Color Image" tap="showBackgroundColorImage" />
     </GridLayout>
 </Page>

src/classes/index.ts

@@ -0,0 +1,13 @@
+export class ImagePopupOptions {
+    path: string;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    fullScreen?: boolean;
+    hideCloseIcon?: boolean;
+    imageOnClickClose?: boolean
+}
+
+export enum ImagePopupBackgroundColors {
+    TRANSPARENT = "#00ffffff"
+}