npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@t.simon/ionic-image-viewer

v2.1.8

Published

The angular workspace to develop the ngx-ionic-image-viewer component

Downloads

20

Readme

This repo is a fork of ngx-ionic-image-viewer. This repo uses latest version of angular and is ivy compatible

ngx-ionic-image-viewer

An Ionic Angular module to view & zoom on images and photos works with swiperjs, so it works with Ionic7.

Demo

ngx-ionic-image-viewer-showcase

Overview

Prerequisites

  • ionic >= 4.0.0
  • angular >= 8.0.0

Installation

npm install --save npm i @t.simon/ionic-image-viewer

Usage

Import

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

import {NgxIonicImageViewerModule} from '@t.simon/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 '@t.simon/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 @t.simon/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 '@t.simon/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

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 @t.simon/ionic-image-viewer inside the libs 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 libs/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

Thomas Simon

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 © 2023 Thomas Simon. This project is MIT licensed.