diff --git a/README.md b/README.md index 27eac58..3236f67 100644 --- a/README.md +++ b/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 + -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 \ No newline at end of file diff --git a/android_example.gif b/android_example.gif new file mode 100644 index 0000000..aadb65e Binary files /dev/null and b/android_example.gif differ diff --git a/demo-angular/src/app/app.component.ts b/demo-angular/src/app/app.component.ts index 24b740f..d8e94cb 100644 --- a/demo-angular/src/app/app.component.ts +++ b/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({ diff --git a/demo-angular/src/app/home/home.component.html b/demo-angular/src/app/home/home.component.html index 364bb38..e41685c 100644 --- a/demo-angular/src/app/home/home.component.html +++ b/demo-angular/src/app/home/home.component.html @@ -1,7 +1,12 @@ - + - - + + + + + + + \ No newline at end of file diff --git a/demo-angular/src/app/home/home.component.ts b/demo-angular/src/app/home/home.component.ts index c48ac92..157b3b3 100644 --- a/demo-angular/src/app/home/home.component.ts +++ b/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); } } diff --git a/demo-angular/src/assets/images/nmb.jpg b/demo-angular/src/assets/images/nmb.jpg new file mode 100644 index 0000000..589c4c1 Binary files /dev/null and b/demo-angular/src/assets/images/nmb.jpg differ diff --git a/demo/app/assets/images/nmb.jpg b/demo/app/assets/images/nmb.jpg new file mode 100644 index 0000000..589c4c1 Binary files /dev/null and b/demo/app/assets/images/nmb.jpg differ diff --git a/demo/app/home/home-page.ts b/demo/app/home/home-page.ts index 4e6d08b..7495a18 100644 --- a/demo/app/home/home-page.ts +++ b/demo/app/home/home-page.ts @@ -1,13 +1,7 @@ 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) { @@ -15,3 +9,44 @@ export function onNavigatingTo(args: NavigatedData) { 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); +} \ No newline at end of file diff --git a/demo/app/home/home-page.xml b/demo/app/home/home-page.xml index 2b91ae1..97e0f99 100644 --- a/demo/app/home/home-page.xml +++ b/demo/app/home/home-page.xml @@ -1,12 +1,15 @@ - - + + - + - - + +