ngx-ionic-image-viewer-workspace

    0.0.0 • Public • Published

    ngx-ionic-image-viewer

    NPM Version Documentation Maintenance Conventional Commits Standard Version License: MIT

    An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.

    Demo

    Live Demo | Stackblitz

    ngx-ionic-image-viewer-showcase

    Overview

    Prerequisites

    • ionic >= 4.0.0
    • angular >= 8.0.0

    Installation

    npm install --save ngx-ionic-image-viewer

    Usage

    Import

    Import the module and add it to your imports section in your main AppModule:

    import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
    
    ...
    
    @NgModule({
      imports: [
        NgxIonicImageViewerModule
      ],
    })
    export class AppModule {}

    Import the module and add it to your imports section of your component where you want to use it (e.g. home.module.ts):

    import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
    
    ...
    
    @NgModule({
      imports: [
        NgxIonicImageViewerModule
      ],
    })
    export class HomePageModule {}

    Component

    Add ion-img-viewer within the HTML of your module (e.g. home.page.html)

    <ion-img-viewer 
      title="Demo" 
      text="Component" 
      scheme="dark" 
      src="./assets/img/demo.jpg">
    </ion-img-viewer>

    Directive

    Add ionImgViewer as a directive within the ion-img HTML element of your module (e.g. home.page.html)

    <ion-img 
      ionImgViewer 
      title="Demo" 
      text="Directive" 
      scheme="light" 
      src="./assets/img/demo.jpg">
    </ion-img>

    Controller

    Import ViewerModalComponent from ngx-ionic-image-viewer and add it to the ModalController. Within the componentProps, all available properties can be passed, whereby src is always required. In addition you must add the css class ion-img-viewer to the property cssClass. Use cssClass: ['ion-img-viewer', 'my-custom-ion-img-viewer']in case you want to add more css classes.

    import { ModalController } from '@ionic/angular';
    import { ViewerModalComponent } from 'ngx-ionic-image-viewer';
    
    export class HomePage {
    
      constructor(public modalController: ModalController) {}
    
      async openViewer() {
        const modal = await this.modalController.create({
          component: ViewerModalComponent,
          componentProps: {
            src: "./assets/img/demo.jpg"
          },
          cssClass: 'ion-img-viewer',
          keyboardClose: true,
          showBackdrop: true
        });
    
        return await modal.present();
      }
    }
    <ion-button (click)="openViewer()">Open Viewer</ion-button>

    Properties

    alt

    Description This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
    Attribute alt
    Type string | undefined

    cssClass

    Description Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
    Attribute cssClass
    Type string | string[] | undefined

    scheme

    Description Sets the color scheme.
    Attribute scheme
    Type "auto" | "dark" | "light" | undefined
    Default "auto"

    slideOptions

    Description Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
    Attribute slideOptions
    Type object | undefined
    Default { centeredSlides: true, passiveListeners: false, zoom: { enabled: true } }

    src

    Description The image url. This attribute is mandatory for the <img> element.
    Attribute src
    Type string | undefined

    srcFallback

    Description The image url to display an alternative image in case the original image could not be loaded. Similiar to (error)="src=./assets/no-image.png"
    Attribute srcFallback
    Type string | undefined

    srcHighRes

    Description The image url to display a high-resolution image instead of the original image when opening the viewer.
    Attribute srcHighRes
    Type string | undefined

    swipeToClose

    Description Swipe down to close the viewer.
    Attribute swipeToClose
    Type boolean | undefined
    Default true

    text

    Description Sets the text in the footer of the viewer.
    Attribute text
    Type string | undefined

    title

    Description Sets the title in the header of the viewer.
    Attribute title
    Type string | undefined

    titleSize

    Description The size of the title.
    Attribute titleSize
    Type "large" | "small" | undefined

    Workspace

    This project was generated with Angular CLI version 8.3.14.

    Local Development

    1. Run the command to start the build every time a file change:

      npm run build:watch
    2. Run the command to create a local symlink and start a local dev server fo app dev/testing.

      npm run ionic:serve
      • npm link: Create a local symlink that can then be used in the project where you want to integrate the package as you don’t want to build, publish and update a library all the time while testing.
      • Run the command npm link ngx-ionic-image-viewer inside the projects folder to link the global installation target into your project’s node_modules folder.
      • ionic serve: Start a local dev server for app dev/testing. Navigate to http://localhost:8100/. The app will automatically reload if you change any of the source files.

    Code scaffolding

    Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

    Build

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    Check package.json for lifecycle events

    Release & Publishing

    Run npm run release to create a new build & release with release-it. This bumps the version of projects/ngx-ionic-image-viewer/package.json, uses conventional-changelog to update CHANGELOG.md, commits package.json and CHANGELOG.md and tags a new release. The new release gets published to GitHub and npm automatically.

    Check package.json and .release-it.json for lifecycle events

    Once the confirmation of npm has been received, the command npm run demo:update can be run to update the demo to the latest version and commit the change.

    Manual Publishing

    After building your library with ng build ngx-ionic-image-viewer, go to the dist folder cd dist/ngx-ionic-image-viewer and run npm publish.

    Running unit tests

    Run ng test to execute the unit tests via Karma.

    Running end-to-end tests

    Run ng e2e to execute the end-to-end tests via Protractor.

    Further help

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

    Committing

    Run npx git-cz to generate a valid commit message. It’s easy to forget about the commit convention so to be consistent use commitizen to generate our commits and husky to manage a Git commit-msg hook to validate the commit message. Further information: How to automate versioning and publication of an npm package

    Author

    Simon Golms

    • Digital Card: npx simongolms
    • Github: @simongolms
    • Website: gol.ms

    Contributing

    Contributions, issues and feature requests are welcome!
    Feel free to check issues page.

    Show your support

    Give a ⭐️ if this project helped you!

    License

    Copyright © 2019 Simon Golms.
    This project is MIT licensed.

    Install

    npm i ngx-ionic-image-viewer-workspace

    DownloadsWeekly Downloads

    8

    Version

    0.0.0

    License

    MIT

    Unpacked Size

    6.82 MB

    Total Files

    73

    Last publish

    Collaborators

    • gailardiagalane