├── .editorconfig
├── .env
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── documentation.md
    │   ├── feature_request.md
    │   └── support_question.md
    └── social-preview.png
├── .gitignore
├── .release-it.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── angular.json
├── commitlint.config.js
├── demo
    ├── .gitignore
    ├── angular.json
    ├── browserslist
    ├── e2e
    │   ├── protractor.conf.js
    │   ├── src
    │   │   ├── app.e2e-spec.ts
    │   │   └── app.po.ts
    │   └── tsconfig.json
    ├── ionic.config.json
    ├── karma.conf.js
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.html
    │   │   ├── app.component.scss
    │   │   ├── app.component.spec.ts
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   └── home
    │   │   │   ├── home.module.ts
    │   │   │   ├── home.page.html
    │   │   │   ├── home.page.scss
    │   │   │   ├── home.page.spec.ts
    │   │   │   └── home.page.ts
    │   ├── assets
    │   │   └── icon
    │   │   │   └── favicon.png
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── global.scss
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── test.ts
    │   ├── theme
    │   │   └── variables.scss
    │   └── zone-flags.ts
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.spec.json
    └── tslint.json
├── docs
    └── showcase.gif
├── package-lock.json
├── package.json
├── projects
    └── ngx-ionic-image-viewer
    │   ├── CHANGELOG.md
    │   ├── README.md
    │   ├── karma.conf.js
    │   ├── ng-package.json
    │   ├── package.json
    │   ├── src
    │       ├── lib
    │       │   ├── ngx-ionic-image-viewer.component.html
    │       │   ├── ngx-ionic-image-viewer.component.spec.ts
    │       │   ├── ngx-ionic-image-viewer.component.ts
    │       │   ├── ngx-ionic-image-viewer.directive.spec.ts
    │       │   ├── ngx-ionic-image-viewer.directive.ts
    │       │   ├── ngx-ionic-image-viewer.module.ts
    │       │   ├── ngx-ionic-image-viewer.service.spec.ts
    │       │   ├── ngx-ionic-image-viewer.service.ts
    │       │   └── viewer-modal
    │       │   │   ├── viewer-modal.component.html
    │       │   │   ├── viewer-modal.component.scss
    │       │   │   ├── viewer-modal.component.spec.ts
    │       │   │   └── viewer-modal.component.ts
    │       ├── public-api.ts
    │       └── test.ts
    │   ├── tsconfig.lib.json
    │   ├── tsconfig.spec.json
    │   └── tslint.json
├── tsconfig.json
└── tslint.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | # GITHUB_TOKEN=<your github token>
2 | # NPM_AUTH_TOKEN=<your npm auth token>
3 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug Report
 3 | about: Create a report to help us improve
 4 | title: '[bug]: '
 5 | labels: ''
 6 | assignees: ''
 7 | ---
 8 | 
 9 | <!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
10 | 
11 | # Bug Report
12 | 
13 | **Ionic version:**
14 | <!-- (Only Ionic 4.x is supported.) -->
15 | [x] **4.x**
16 | 
17 | **Current behavior:**
18 | <!-- Describe how the bug manifests. -->
19 | 
20 | **Expected behavior:**
21 | <!-- Describe what the behavior would be without the bug. -->
22 | 
23 | **Steps to reproduce:**
24 | <!--  Please explain the steps required to duplicate the issue, especially if you are able to provide a sample application. -->
25 | 
26 | **Related code:**
27 | 
28 | <!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:
29 | 
30 | A sample application via GitHub
31 | 
32 | StackBlitz (https://stackblitz.com)
33 | Ionic Angular StackBlitz: https://stackblitz.com/edit/ionic-v4-angular-tabs
34 | 
35 | Plunker (http://plnkr.co/edit/cpeRJs?p=preview)
36 | 
37 | -->
38 | 
39 | ```
40 | insert short code snippets here
41 | ```
42 | 
43 | **Other information:**
44 | <!-- List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc. -->
45 | 
46 | **Ionic info:**
47 | <!-- (run `ionic info` from a terminal/cmd prompt and paste output below): -->
48 | 
49 | ```
50 | insert the output from ionic info here
51 | ```
52 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Documentation
 3 | about: Suggest an improvement for the documentation of this project
 4 | title: '[docs]: '
 5 | labels: ''
 6 | assignees: ''
 7 | ---
 8 | 
 9 | # Documentation
10 | <!-- Please describe how to improve or fix the documentation. -->
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature Request
 3 | about: Suggest an idea for this project
 4 | title: '[feat]: '
 5 | labels: ''
 6 | assignees: ''
 7 | ---
 8 | 
 9 | <!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
10 | 
11 | # Feature Request
12 | 
13 | **Ionic version:**
14 | <!-- (Only Ionic 4.x is supported.) -->
15 | [x] **4.x**
16 | 
17 | **Describe the Feature Request**
18 | <!-- A clear and concise description of what the feature request is. Please include if your feature request is related to a problem. -->
19 | 
20 | **Describe Preferred Solution**
21 | <!-- A clear and concise description of what you want to happen. -->
22 | 
23 | **Describe Alternatives**
24 | <!-- A clear and concise description of any alternative solutions or features you've considered. -->
25 | 
26 | **Related Code**
27 | <!-- If you are able to illustrate the feature request with an example, please provide a sample application via an online code collaborator such as [StackBlitz](https://stackblitz.com), or [GitHub](https://github.com). -->
28 | 
29 | **Additional Context**
30 | <!-- List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to add, use case, Stack Overflow links, forum links, screenshots, OS if applicable, etc. -->
31 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/support_question.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Support Question
 3 | about: Question on how to use this project
 4 | title: '[support]: '
 5 | labels: ''
 6 | assignees: ''
 7 | ---
 8 | 
 9 | # Support Question
10 | <!-- Please describe your support questions or "How to" questions here. -->
11 | 


--------------------------------------------------------------------------------
/.github/social-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGolms/ngx-ionic-image-viewer/3c7d66680892ef7589ba2d04f9af9918b5069d47/.github/social-preview.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | /demo/node_modules
13 | 
14 | # profiling files
15 | chrome-profiler-events*.json
16 | speed-measure-plugin*.json
17 | 
18 | # IDEs and editors
19 | /.idea
20 | .project
21 | .classpath
22 | .c9/
23 | *.launch
24 | .settings/
25 | *.sublime-workspace
26 | 
27 | # IDE - VSCode
28 | .vscode/*
29 | !.vscode/settings.json
30 | !.vscode/tasks.json
31 | !.vscode/launch.json
32 | !.vscode/extensions.json
33 | .history/*
34 | 
35 | # misc
36 | /.sass-cache
37 | /connect.lock
38 | /coverage
39 | /libpeerconnection.log
40 | npm-debug.log
41 | yarn-error.log
42 | testem.log
43 | /typings
44 | 
45 | # System Files
46 | .DS_Store
47 | Thumbs.db
48 | 
49 | .env
50 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "git": {
 3 |     "requireUpstream": false,
 4 |     "requireCleanWorkingDir": false,
 5 |     "commitMessage": "chore: release %s",
 6 |     "tagName": "v%s"
 7 |   },
 8 |   "github": {
 9 |     "release": true
10 |   },
11 |   "npm": {
12 |     "release": true,
13 |     "publishPath": "./../../dist/ngx-ionic-image-viewer/"
14 |   },
15 |   "plugins": {
16 |     "@release-it/conventional-changelog": {
17 |       "preset": "angular",
18 |       "infile": "CHANGELOG.md"
19 |     }
20 |   },
21 |   "hooks": {
22 |     "after:bump": "cd ./../../ && npm run build",
23 |     "before:git:beforeRelease": "cd ./../../ && cp projects/ngx-ionic-image-viewer/CHANGELOG.md . && git add CHANGELOG.md --update ",
24 |     "after:release": "echo 🎉 Successfully released ${name} v${version} to ${repo.repository}."
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | <a name="0.7.5"></a>
  2 | ## [0.7.5](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.4...v0.7.5) (2022-01-29)
  3 | 
  4 | 
  5 | ### Bug Fixes
  6 | 
  7 | * add deprecation information ([b20b7be](https://github.com/simongolms/ngx-ionic-image-viewer/commit/b20b7be))
  8 | 
  9 | <a name="0.7.4"></a>
 10 | ## [0.7.4](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.4-0...v0.7.4) (2020-10-05)
 11 | 
 12 | <a name="0.7.4-0"></a>
 13 | ## [0.7.4-0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.3-0...v0.7.4-0) (2020-10-05)
 14 | 
 15 | <a name="0.7.3-0"></a>
 16 | ## [0.7.3-0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.1...v0.7.3-0) (2020-10-05)
 17 | 
 18 | 
 19 | ### Bug Fixes
 20 | 
 21 | * omit peer dependencies warning ([ac64084](https://github.com/simongolms/ngx-ionic-image-viewer/commit/ac64084)), closes [#43](https://github.com/simongolms/ngx-ionic-image-viewer/issues/43) [#46](https://github.com/simongolms/ngx-ionic-image-viewer/issues/46)
 22 | 
 23 | <a name="0.7.1"></a>
 24 | ## [0.7.1](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.0...v0.7.1) (2020-05-31)
 25 | 
 26 | 
 27 | ### Bug Fixes
 28 | 
 29 | * srcFallback not working on controller ([a0b0bfc](https://github.com/simongolms/ngx-ionic-image-viewer/commit/a0b0bfc)), closes [#28](https://github.com/simongolms/ngx-ionic-image-viewer/issues/28)
 30 | 
 31 | <a name="0.7.0"></a>
 32 | # [0.7.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.6.0...v0.7.0) (2020-02-23)
 33 | 
 34 | 
 35 | ### Bug Fixes
 36 | 
 37 | * remove console log output ([65cb629](https://github.com/simongolms/ngx-ionic-image-viewer/commit/65cb629))
 38 | * when specified `alt` the image was not showen in some cases ([d7af54c](https://github.com/simongolms/ngx-ionic-image-viewer/commit/d7af54c))
 39 | 
 40 | 
 41 | ### Features
 42 | 
 43 | * the viewer-modal can be used as a controller component ([6d8fb45](https://github.com/simongolms/ngx-ionic-image-viewer/commit/6d8fb45))
 44 | 
 45 | <a name="0.6.0"></a>
 46 | # [0.6.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.5.2...v0.6.0) (2020-02-17)
 47 | 
 48 | 
 49 | ### Features
 50 | 
 51 | * apply additional class for custom CSS ([fa941a2](https://github.com/simongolms/ngx-ionic-image-viewer/commit/fa941a2))
 52 | * set the size of the title ([8bdac98](https://github.com/simongolms/ngx-ionic-image-viewer/commit/8bdac98))
 53 | 
 54 | <a name="0.5.2"></a>
 55 | ## [0.5.2](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.5.1...v0.5.2) (2020-02-11)
 56 | 
 57 | 
 58 | ### Bug Fixes
 59 | 
 60 | * images behave correctly after being viewed several times ([445ad78](https://github.com/simongolms/ngx-ionic-image-viewer/commit/445ad78)), closes [#14](https://github.com/simongolms/ngx-ionic-image-viewer/issues/14) [#16](https://github.com/simongolms/ngx-ionic-image-viewer/issues/16)
 61 | 
 62 | <a name="0.5.1"></a>
 63 | ## [0.5.1](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.5.0...v0.5.1) (2020-02-06)
 64 | 
 65 | 
 66 | ### Bug Fixes
 67 | 
 68 | * **directive:** failing production build ([d56b420](https://github.com/simongolms/ngx-ionic-image-viewer/commit/d56b420))
 69 | 
 70 | <a name="0.5.0"></a>
 71 | # [0.5.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.4.0...v0.5.0) (2020-02-06)
 72 | 
 73 | 
 74 | ### Bug Fixes
 75 | 
 76 | * ignore close button when swipeToClose is active ([969d7e8](https://github.com/simongolms/ngx-ionic-image-viewer/commit/969d7e8))
 77 | * styling of the component via css ([a8919d6](https://github.com/simongolms/ngx-ionic-image-viewer/commit/a8919d6))
 78 | 
 79 | 
 80 | ### Features
 81 | 
 82 | * show alternative image on error ([8bb29a4](https://github.com/simongolms/ngx-ionic-image-viewer/commit/8bb29a4)), closes [#13](https://github.com/simongolms/ngx-ionic-image-viewer/issues/13)
 83 | * swipe down to close the viewer ([ebc756c](https://github.com/simongolms/ngx-ionic-image-viewer/commit/ebc756c))
 84 | 
 85 | <a name="0.4.0"></a>
 86 | # [0.4.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.3.0...v0.4.0) (2020-01-15)
 87 | 
 88 | 
 89 | ### Bug Fixes
 90 | 
 91 | * **directive:** open viewer in fullscreen on desktop ([6e078b9](https://github.com/simongolms/ngx-ionic-image-viewer/commit/6e078b9))
 92 | 
 93 | 
 94 | ### Features
 95 | 
 96 | * **directive:** use directive on img element ([b162aad](https://github.com/simongolms/ngx-ionic-image-viewer/commit/b162aad)), closes [#10](https://github.com/simongolms/ngx-ionic-image-viewer/issues/10)
 97 | 
 98 | <a name="0.3.0"></a>
 99 | # [0.3.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.2.0...v0.3.0) (2019-12-29)
100 | 
101 | 
102 | ### Features
103 | 
104 | * add props srcHighRes to display high-resolution image ([efe182c](https://github.com/simongolms/ngx-ionic-image-viewer/commit/efe182c))
105 | 
106 | <a name="0.2.0"></a>
107 | # [0.2.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.1.0...v0.2.0) (2019-12-23)
108 | 
109 | 
110 | ### Bug Fixes
111 | 
112 | * console error when moving in a zoomed image ([b292e63](https://github.com/simongolms/ngx-ionic-image-viewer/commit/b292e63)), closes [#7](https://github.com/simongolms/ngx-ionic-image-viewer/issues/7)
113 | 
114 | 
115 | ### Features
116 | 
117 | * use the module as ionImgViewer directive ([63decaf](https://github.com/simongolms/ngx-ionic-image-viewer/commit/63decaf))
118 | 
119 | <a name="0.1.0"></a>
120 | # [0.1.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.0.2...v0.1.0) (2019-12-16)
121 | 
122 | 
123 | ### Features
124 | 
125 | * add props scheme to set color scheme ([15d35e9](https://github.com/simongolms/ngx-ionic-image-viewer/commit/15d35e9))
126 | * add props slideOptions to pass to the swiper instance ([9429408](https://github.com/simongolms/ngx-ionic-image-viewer/commit/9429408))
127 | 
128 | # Changelog
129 | 
130 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
131 | 
132 | ### [0.0.2](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.0.1...v0.0.2) (2019-11-28)
133 | 
134 | 
135 | ### Bug Fixes
136 | 
137 | * throwing error for preventDefault in swiper.bundle ([68bdadb](https://github.com/simongolms/ngx-ionic-image-viewer/commit/68bdadb21582923f604fc30b6903757484af5356)), closes [#2](https://github.com/simongolms/ngx-ionic-image-viewer/issues/2)
138 | 
139 | ### [0.0.1](https://github.com/SimonGolms/ngx-ionic-image-viewer/releases/tag/v0.0.1) (2019-11-12)
140 | 
141 | init version
142 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Simon Golms
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | **ℹ️ Please note that this package has reached its end. After getting into the React world 2018, I lost the contact into the Angular Ecosystem. With Ionic 6, Slider.js will also be split off, which will probably make this package incompatible for now. Unfortunately I don't have the time to develop this package further according to the demands - thank you for your trust and responses, I appreciated it very much. Feel free to fork this package and work on a successor. You will find here a good tutorial how to create your own image viewer, which is based on the same approach: https://www.youtube.com/watch?v=VCUpRkRi00w**
  2 | 
  3 | # ngx-ionic-image-viewer <!-- omit in toc -->
  4 | 
  5 | <p>
  6 |   <a href="https://www.npmjs.com/package/ngx-ionic-image-viewer" target="_blank">
  7 |     <img alt="NPM Version" src="https://img.shields.io/npm/v/ngx-ionic-image-viewer.svg" />
  8 |   </a>
  9 |   <a href="https://github.com/simongolms/ngx-ionic-image-viewer#readme" target="_blank">
 10 |     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
 11 |   </a>
 12 |   <a href="https://github.com/simongolms/ngx-ionic-image-viewer/graphs/commit-activity" target="_blank">
 13 |     <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-no-red.svg" />
 14 |   </a>
 15 |   <a href="https://conventionalcommits.org" target="_blank">
 16 |     <img alt="Conventional Commits" src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" />
 17 |   </a>
 18 |   <a href="https://github.com/conventional-changelog/standard-version" target="_blank">
 19 |     <img alt="Standard Version" src="https://img.shields.io/badge/release-standard%20version-brightgreen.svg" />
 20 |   </a>
 21 |   <a href="https://github.com/simongolms/ngx-ionic-image-viewer/blob/master/LICENSE" target="_blank">
 22 |     <img alt="License: MIT" src="https://img.shields.io/github/license/simongolms/ngx-ionic-image-viewer" />
 23 |   </a>
 24 | </p>
 25 | 
 26 | > An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
 27 | 
 28 | ## Demo <!-- omit in toc -->
 29 | 
 30 | [Live Demo](https://ionic4-image-viewer-example.netlify.com) | [Stackblitz](https://stackblitz.com/github/SimonGolms/ngx-ionic-image-viewer/tree/master/demo)
 31 | 
 32 | ![ngx-ionic-image-viewer-showcase](https://github.com/SimonGolms/ngx-ionic-image-viewer/raw/master/docs/showcase.gif)
 33 | 
 34 | ## Overview <!-- omit in toc -->
 35 | 
 36 | - [Prerequisites](#prerequisites)
 37 | - [Installation](#installation)
 38 | - [Usage](#usage)
 39 |   - [Import](#import)
 40 |   - [Component](#component)
 41 |   - [Directive](#directive)
 42 |   - [Controller](#controller)
 43 | - [Properties](#properties)
 44 | - [Workspace](#workspace)
 45 |   - [Local Development](#local-development)
 46 |   - [Code scaffolding](#code-scaffolding)
 47 |   - [Build](#build)
 48 |   - [Release & Publishing](#release--publishing)
 49 |   - [Manual Publishing](#manual-publishing)
 50 |   - [Running unit tests](#running-unit-tests)
 51 |   - [Running end-to-end tests](#running-end-to-end-tests)
 52 |   - [Further help](#further-help)
 53 |     - [Committing](#committing)
 54 | - [Author](#author)
 55 | - [Contributing](#contributing)
 56 | - [Show your support](#show-your-support)
 57 | - [License](#license)
 58 | 
 59 | ## Prerequisites
 60 | 
 61 | - ionic >= 4.0.0
 62 | - angular >= 8.0.0
 63 | 
 64 | ## Installation
 65 | 
 66 | ```bash
 67 | npm install --save ngx-ionic-image-viewer
 68 | ```
 69 | 
 70 | ## Usage
 71 | 
 72 | ### Import
 73 | 
 74 | Import the module and add it to your imports section in your main AppModule:
 75 | 
 76 | ```js
 77 | import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
 78 | 
 79 | ...
 80 | 
 81 | @NgModule({
 82 |   imports: [
 83 |     NgxIonicImageViewerModule
 84 |   ],
 85 | })
 86 | export class AppModule {}
 87 | ```
 88 | 
 89 | Import the module and add it to your imports section of your component where you want to use it (e.g. `home.module.ts`):
 90 | 
 91 | ```js
 92 | import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
 93 | 
 94 | ...
 95 | 
 96 | @NgModule({
 97 |   imports: [
 98 |     NgxIonicImageViewerModule
 99 |   ],
100 | })
101 | export class HomePageModule {}
102 | 
103 | ```
104 | 
105 | ### Component
106 | 
107 | Add `ion-img-viewer` within the HTML of your module (e.g. `home.page.html`)
108 | 
109 | ```html
110 | <ion-img-viewer
111 |   title="Demo"
112 |   text="Component"
113 |   scheme="dark"
114 |   src="./assets/img/demo.jpg"
115 | >
116 | </ion-img-viewer>
117 | ```
118 | 
119 | ### Directive
120 | 
121 | Add `ionImgViewer` as a directive within the `ion-img` HTML element of your module (e.g. `home.page.html`)
122 | 
123 | ```html
124 | <ion-img
125 |   ionImgViewer
126 |   title="Demo"
127 |   text="Directive"
128 |   scheme="light"
129 |   src="./assets/img/demo.jpg"
130 | >
131 | </ion-img>
132 | ```
133 | 
134 | ### Controller
135 | 
136 | 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`.
137 | Use `cssClass: ['ion-img-viewer', 'my-custom-ion-img-viewer']`in case you want to add more css classes.
138 | 
139 | ```js
140 | import { ModalController } from '@ionic/angular';
141 | import { ViewerModalComponent } from 'ngx-ionic-image-viewer';
142 | 
143 | export class HomePage {
144 | 
145 |   constructor(public modalController: ModalController) {}
146 | 
147 |   async openViewer() {
148 |     const modal = await this.modalController.create({
149 |       component: ViewerModalComponent,
150 |       componentProps: {
151 |         src: "./assets/img/demo.jpg"
152 |       },
153 |       cssClass: 'ion-img-viewer',
154 |       keyboardClose: true,
155 |       showBackdrop: true
156 |     });
157 | 
158 |     return await modal.present();
159 |   }
160 | }
161 | ```
162 | 
163 | ```html
164 | <ion-button (click)="openViewer()">Open Viewer</ion-button>
165 | ```
166 | 
167 | ## Properties
168 | 
169 | <table>
170 |     <!-- alt -->
171 |     <thead>
172 |         <tr>
173 |             <th colspan="2" align="left"><h3>alt</h3></th>
174 |         </tr>
175 |     </thead>
176 |     <tbody>
177 |         <tr>
178 |             <td>Description</td>
179 |             <td>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.</td>
180 |         </tr>
181 |         <tr>
182 |             <td>Attribute</td>
183 |             <td><code>alt</code></td>
184 |         </tr>
185 |         <tr>
186 |             <td>Type</td>
187 |             <td><code>string</code> | <code>undefined</code></td>
188 |         </tr>
189 |     </tbody>
190 |     <!-- cssClass -->
191 |     <thead>
192 |         <tr>
193 |             <th colspan="2" align="left"><h3>cssClass</h3></th>
194 |         </tr>
195 |     </thead>
196 |     <tbody>
197 |         <tr>
198 |             <td>Description</td>
199 |             <td>Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.</td>
200 |         </tr>
201 |         <tr>
202 |             <td>Attribute</td>
203 |             <td><code>cssClass</code></td>
204 |         </tr>
205 |         <tr>
206 |             <td>Type</td>
207 |             <td><code>string</code> | <code>string[]</code> | <code>undefined</code></td>
208 |         </tr>
209 |     </tbody>
210 |     <!-- slideOptions -->
211 |     <thead>
212 |         <tr>
213 |             <th colspan="2" align="left"><h3>scheme</h3></th>
214 |         </tr>
215 |     </thead>
216 |     <tbody>
217 |         <tr>
218 |             <td>Description</td>
219 |             <td>Sets the color scheme.</td>
220 |         </tr>
221 |         <tr>
222 |             <td>Attribute</td>
223 |             <td><code>scheme</code></td>
224 |         </tr>
225 |         <tr>
226 |             <td>Type</td>
227 |             <td><code>"auto"</code> | <code>"dark"</code> | <code>"light"</code> | <code>undefined</code></td>
228 |         </tr>
229 |         <tr>
230 |             <td>Default</td>
231 |             <td><code>"auto"</code></td>
232 |         </tr>
233 |     </tbody>
234 |     <!-- slideOptions -->
235 |     <thead>
236 |         <tr>
237 |             <th colspan="2" align="left"><h3>slideOptions</h3></th>
238 |         </tr>
239 |     </thead>
240 |     <tbody>
241 |         <tr>
242 |             <td>Description</td>
243 |             <td>Options to pass to the swiper instance. See <a>http://idangero.us/swiper/api/</a> for valid options.</td>
244 |         </tr>
245 |         <tr>
246 |             <td>Attribute</td>
247 |             <td><code>slideOptions</code></td>
248 |         </tr>
249 |         <tr>
250 |             <td>Type</td>
251 |             <td><code>object</code> | <code>undefined</code></td>
252 |         </tr>
253 |         <tr>
254 |             <td>Default</td>
255 |             <td><code>{ centeredSlides: true, passiveListeners: false, zoom: { enabled: true } }</code></td>
256 |         </tr>
257 |     </tbody>
258 |     <!-- src -->
259 |     <thead>
260 |         <tr>
261 |             <th colspan="2" align="left"><h3>src</h3></th>
262 |         </tr>
263 |     </thead>
264 |     <tbody>
265 |         <tr>
266 |             <td>Description</td>
267 |             <td>The image url. This attribute is mandatory for the <code>&lt;img&gt;</code> element.</td>
268 |         </tr>
269 |         <tr>
270 |             <td>Attribute</td>
271 |             <td><code>src</code></td>
272 |         </tr>
273 |         <tr>
274 |             <td>Type</td>
275 |             <td><code>string</code> | <code>undefined</code></td>
276 |         </tr>
277 |     </tbody>
278 |     <!-- srcFallback -->
279 |     <thead>
280 |         <tr>
281 |             <th colspan="2" align="left"><h3>srcFallback</h3></th>
282 |         </tr>
283 |     </thead>
284 |     <tbody>
285 |         <tr>
286 |             <td>Description</td>
287 |             <td>The image url to display an alternative image in case the original image could not be loaded. Similiar to <code>(error)="src=./assets/no-image.png"</code></td>
288 |         </tr>
289 |         <tr>
290 |             <td>Attribute</td>
291 |             <td><code>srcFallback</code></td>
292 |         </tr>
293 |         <tr>
294 |             <td>Type</td>
295 |             <td><code>string</code> | <code>undefined</code></td>
296 |         </tr>
297 |     </tbody>
298 |     <!-- srcHighRes -->
299 |     <thead>
300 |         <tr>
301 |             <th colspan="2" align="left"><h3>srcHighRes</h3></th>
302 |         </tr>
303 |     </thead>
304 |     <tbody>
305 |         <tr>
306 |             <td>Description</td>
307 |             <td>The image url to display a high-resolution image instead of the original image when opening the viewer.</td>
308 |         </tr>
309 |         <tr>
310 |             <td>Attribute</td>
311 |             <td><code>srcHighRes</code></td>
312 |         </tr>
313 |         <tr>
314 |             <td>Type</td>
315 |             <td><code>string</code> | <code>undefined</code></td>
316 |         </tr>
317 |     </tbody>
318 |     <!-- swipeToClose -->
319 |     <thead>
320 |         <tr>
321 |             <th colspan="2" align="left"><h3>swipeToClose</h3></th>
322 |         </tr>
323 |     </thead>
324 |     <tbody>
325 |         <tr>
326 |             <td>Description</td>
327 |             <td>Swipe down to close the viewer.</td>
328 |         </tr>
329 |         <tr>
330 |             <td>Attribute</td>
331 |             <td><code>swipeToClose</code></td>
332 |         </tr>
333 |         <tr>
334 |             <td>Type</td>
335 |             <td><code>boolean</code> | <code>undefined</code></td>
336 |         </tr>
337 |         <tr>
338 |             <td>Default</td>
339 |             <td><code>true</code></td>
340 |         </tr>
341 |     </tbody>
342 |     <!-- text -->
343 |     <thead>
344 |         <tr>
345 |             <th colspan="2" align="left"><h3>text</h3></th>
346 |         </tr>
347 |     </thead>
348 |     <tbody>
349 |         <tr>
350 |             <td>Description</td>
351 |             <td>Sets the text in the footer of the viewer.</td>
352 |         </tr>
353 |         <tr>
354 |             <td>Attribute</td>
355 |             <td><code>text</code></td>
356 |         </tr>
357 |         <tr>
358 |             <td>Type</td>
359 |             <td><code>string</code> | <code>undefined</code></td>
360 |         </tr>
361 |     </tbody>
362 |     <!-- title -->
363 |     <thead>
364 |         <tr>
365 |             <th colspan="2" align="left"><h3>title</h3></th>
366 |         </tr>
367 |     </thead>
368 |     <tbody>
369 |         <tr>
370 |             <td>Description</td>
371 |             <td>Sets the title in the header of the viewer.</td>
372 |         </tr>
373 |         <tr>
374 |             <td>Attribute</td>
375 |             <td><code>title</code></td>
376 |         </tr>
377 |         <tr>
378 |             <td>Type</td>
379 |             <td><code>string</code> | <code>undefined</code></td>
380 |         </tr>
381 |     </tbody>
382 |     <!-- titleSize -->
383 |     <thead>
384 |         <tr>
385 |             <th colspan="2" align="left"><h3>titleSize</h3></th>
386 |         </tr>
387 |     </thead>
388 |     <tbody>
389 |         <tr>
390 |             <td>Description</td>
391 |             <td>The size of the title.</td>
392 |         </tr>
393 |         <tr>
394 |             <td>Attribute</td>
395 |             <td><code>titleSize</code></td>
396 |         </tr>
397 |         <tr>
398 |             <td>Type</td>
399 |             <td><code>"large"</code> | <code>"small"</code> | <code>undefined</code></td>
400 |         </tr>
401 |     </tbody>
402 | </table>
403 | 
404 | ## Workspace
405 | 
406 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.14.
407 | 
408 | ### Local Development
409 | 
410 | 1. Run the command to start the build every time a file change:
411 | 
412 |    ```bash
413 |    npm run build:watch
414 |    ```
415 | 
416 | 2. Run the command to create a local symlink and start a local dev server fo app dev/testing.
417 | 
418 |    ```bash
419 |    npm run ionic:serve
420 |    ```
421 | 
422 |    - [`npm link`](https://docs.npmjs.com/cli/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.
423 |    - 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.
424 |    - [`ionic serve`](https://ionicframework.com/docs/cli/commands/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.
425 | 
426 | ### Code scaffolding
427 | 
428 | 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`.
429 | 
430 | ### Build
431 | 
432 | 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.
433 | 
434 | > Check `package.json` for lifecycle events
435 | 
436 | ### Release & Publishing
437 | 
438 | 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](https://github.com/conventional-changelog/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.
439 | 
440 | > Check `package.json` and `.release-it.json` for lifecycle events
441 | 
442 | 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.
443 | 
444 | ### Manual Publishing
445 | 
446 | 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`.
447 | 
448 | ### Running unit tests
449 | 
450 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
451 | 
452 | ### Running end-to-end tests
453 | 
454 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
455 | 
456 | ### Further help
457 | 
458 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
459 | 
460 | #### Committing
461 | 
462 | 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](https://github.com/commitizen/cz-cli) to generate our commits and husky to manage a Git commit-msg hook to validate the commit message.
463 | Further information: [How to automate versioning and publication of an npm package](https://itnext.io/how-to-automate-versioning-and-publication-of-an-npm-package-233e8757a526)
464 | 
465 | ## Author
466 | 
467 | **Simon Golms**
468 | 
469 | - Digital Card: `npx simongolms`
470 | - Github: [@simongolms](https://github.com/simongolms)
471 | - Website: gol.ms
472 | 
473 | ## Contributing
474 | 
475 | Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/simongolms/ngx-ionic-image-viewer/issues).
476 | 
477 | ## Show your support
478 | 
479 | Give a ⭐️ if this project helped you!
480 | 
481 | ## License
482 | 
483 | Copyright © 2019 [Simon Golms](https://github.com/simongolms).<br />
484 | This project is [MIT](https://github.com/simongolms/ngx-ionic-image-viewer/blob/master/LICENSE) licensed.
485 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "version": 1,
 4 |   "newProjectRoot": "projects",
 5 |   "projects": {
 6 |     "ngx-ionic-image-viewer": {
 7 |       "projectType": "library",
 8 |       "root": "projects/ngx-ionic-image-viewer",
 9 |       "sourceRoot": "projects/ngx-ionic-image-viewer/src",
10 |       "prefix": "ion",
11 |       "architect": {
12 |         "build": {
13 |           "builder": "@angular-devkit/build-ng-packagr:build",
14 |           "options": {
15 |             "tsConfig": "projects/ngx-ionic-image-viewer/tsconfig.lib.json",
16 |             "project": "projects/ngx-ionic-image-viewer/ng-package.json"
17 |           }
18 |         },
19 |         "test": {
20 |           "builder": "@angular-devkit/build-angular:karma",
21 |           "options": {
22 |             "main": "projects/ngx-ionic-image-viewer/src/test.ts",
23 |             "tsConfig": "projects/ngx-ionic-image-viewer/tsconfig.spec.json",
24 |             "karmaConfig": "projects/ngx-ionic-image-viewer/karma.conf.js"
25 |           }
26 |         },
27 |         "lint": {
28 |           "builder": "@angular-devkit/build-angular:tslint",
29 |           "options": {
30 |             "tsConfig": ["projects/ngx-ionic-image-viewer/tsconfig.lib.json", "projects/ngx-ionic-image-viewer/tsconfig.spec.json"],
31 |             "exclude": ["**/node_modules/**"]
32 |           }
33 |         }
34 |       }
35 |     }
36 |   },
37 |   "defaultProject": "ngx-ionic-image-viewer"
38 | }
39 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {extends: ['@commitlint/config-conventional']}
2 | 


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | .tmp
 7 | *.tmp
 8 | *.tmp.*
 9 | *.sublime-project
10 | *.sublime-workspace
11 | .DS_Store
12 | Thumbs.db
13 | UserInterfaceState.xcuserstate
14 | $RECYCLE.BIN/
15 | 
16 | *.log
17 | log.txt
18 | npm-debug.log*
19 | 
20 | /.idea
21 | /.ionic
22 | /.sass-cache
23 | /.sourcemaps
24 | /.versions
25 | /.vscode
26 | /coverage
27 | /dist
28 | /node_modules
29 | /platforms
30 | /plugins
31 | /www
32 | 


--------------------------------------------------------------------------------
/demo/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "defaultProject": "app",
  5 |   "newProjectRoot": "projects",
  6 |   "projects": {
  7 |     "app": {
  8 |       "root": "",
  9 |       "sourceRoot": "src",
 10 |       "projectType": "application",
 11 |       "prefix": "app",
 12 |       "schematics": {},
 13 |       "architect": {
 14 |         "build": {
 15 |           "preserveSymlinks": true,
 16 |           "builder": "@angular-devkit/build-angular:browser",
 17 |           "options": {
 18 |             "outputPath": "www",
 19 |             "index": "src/index.html",
 20 |             "main": "src/main.ts",
 21 |             "polyfills": "src/polyfills.ts",
 22 |             "tsConfig": "tsconfig.app.json",
 23 |             "assets": [
 24 |               {
 25 |                 "glob": "**/*",
 26 |                 "input": "src/assets",
 27 |                 "output": "assets"
 28 |               },
 29 |               {
 30 |                 "glob": "**/*.svg",
 31 |                 "input": "node_modules/ionicons/dist/ionicons/svg",
 32 |                 "output": "./svg"
 33 |               }
 34 |             ],
 35 |             "styles": [
 36 |               {
 37 |                 "input": "src/theme/variables.scss"
 38 |               },
 39 |               {
 40 |                 "input": "src/global.scss"
 41 |               }
 42 |             ],
 43 |             "scripts": []
 44 |           },
 45 |           "configurations": {
 46 |             "production": {
 47 |               "fileReplacements": [
 48 |                 {
 49 |                   "replace": "src/environments/environment.ts",
 50 |                   "with": "src/environments/environment.prod.ts"
 51 |                 }
 52 |               ],
 53 |               "optimization": true,
 54 |               "outputHashing": "all",
 55 |               "sourceMap": false,
 56 |               "extractCss": true,
 57 |               "namedChunks": false,
 58 |               "aot": true,
 59 |               "extractLicenses": true,
 60 |               "vendorChunk": false,
 61 |               "buildOptimizer": true,
 62 |               "budgets": [
 63 |                 {
 64 |                   "type": "initial",
 65 |                   "maximumWarning": "2mb",
 66 |                   "maximumError": "5mb"
 67 |                 }
 68 |               ]
 69 |             },
 70 |             "ci": {
 71 |               "progress": false
 72 |             }
 73 |           }
 74 |         },
 75 |         "serve": {
 76 |           "builder": "@angular-devkit/build-angular:dev-server",
 77 |           "options": {
 78 |             "browserTarget": "app:build"
 79 |           },
 80 |           "configurations": {
 81 |             "production": {
 82 |               "browserTarget": "app:build:production"
 83 |             },
 84 |             "ci": {
 85 |               "progress": false
 86 |             }
 87 |           }
 88 |         },
 89 |         "extract-i18n": {
 90 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 91 |           "options": {
 92 |             "browserTarget": "app:build"
 93 |           }
 94 |         },
 95 |         "test": {
 96 |           "builder": "@angular-devkit/build-angular:karma",
 97 |           "options": {
 98 |             "main": "src/test.ts",
 99 |             "polyfills": "src/polyfills.ts",
100 |             "tsConfig": "tsconfig.spec.json",
101 |             "karmaConfig": "karma.conf.js",
102 |             "styles": [],
103 |             "scripts": [],
104 |             "assets": [
105 |               {
106 |                 "glob": "favicon.ico",
107 |                 "input": "src/",
108 |                 "output": "/"
109 |               },
110 |               {
111 |                 "glob": "**/*",
112 |                 "input": "src/assets",
113 |                 "output": "/assets"
114 |               }
115 |             ]
116 |           },
117 |           "configurations": {
118 |             "ci": {
119 |               "progress": false,
120 |               "watch": false
121 |             }
122 |           }
123 |         },
124 |         "lint": {
125 |           "builder": "@angular-devkit/build-angular:tslint",
126 |           "options": {
127 |             "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
128 |             "exclude": ["**/node_modules/**"]
129 |           }
130 |         },
131 |         "e2e": {
132 |           "builder": "@angular-devkit/build-angular:protractor",
133 |           "options": {
134 |             "protractorConfig": "e2e/protractor.conf.js",
135 |             "devServerTarget": "app:serve"
136 |           },
137 |           "configurations": {
138 |             "production": {
139 |               "devServerTarget": "app:serve:production"
140 |             },
141 |             "ci": {
142 |               "devServerTarget": "app:serve:ci"
143 |             }
144 |           }
145 |         },
146 |         "ionic-cordova-build": {
147 |           "builder": "@ionic/angular-toolkit:cordova-build",
148 |           "options": {
149 |             "browserTarget": "app:build"
150 |           },
151 |           "configurations": {
152 |             "production": {
153 |               "browserTarget": "app:build:production"
154 |             }
155 |           }
156 |         },
157 |         "ionic-cordova-serve": {
158 |           "builder": "@ionic/angular-toolkit:cordova-serve",
159 |           "options": {
160 |             "cordovaBuildTarget": "app:ionic-cordova-build",
161 |             "devServerTarget": "app:serve"
162 |           },
163 |           "configurations": {
164 |             "production": {
165 |               "cordovaBuildTarget": "app:ionic-cordova-build:production",
166 |               "devServerTarget": "app:serve:production"
167 |             }
168 |           }
169 |         }
170 |       }
171 |     }
172 |   },
173 |   "cli": {
174 |     "defaultCollection": "@ionic/angular-toolkit"
175 |   },
176 |   "schematics": {
177 |     "@ionic/angular-toolkit:component": {
178 |       "styleext": "scss"
179 |     },
180 |     "@ionic/angular-toolkit:page": {
181 |       "styleext": "scss"
182 |     }
183 |   }
184 | }
185 | 


--------------------------------------------------------------------------------
/demo/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.
13 | 


--------------------------------------------------------------------------------
/demo/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/demo/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('new App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should be blank', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toContain('The world is your oyster.');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/demo/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.deepCss('app-root ion-content')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/demo/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/demo/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ngxIonicImageViewer",
3 |   "integrations": {},
4 |   "type": "angular"
5 | }
6 | 


--------------------------------------------------------------------------------
/demo/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-ionic-image-viewer-demo",
 3 |   "version": "0.0.2",
 4 |   "author": "Ionic Framework",
 5 |   "homepage": "https://ionicframework.com/",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular-devkit/core": "~8.3.21",
17 |     "@angular-devkit/schematics": "~8.3.21",
18 |     "@angular/common": "~8.2.14",
19 |     "@angular/compiler": "~8.2.14",
20 |     "@angular/compiler-cli": "8.2.14",
21 |     "@angular/core": "~8.2.14",
22 |     "@angular/forms": "~8.2.14",
23 |     "@angular/platform-browser": "~8.2.14",
24 |     "@angular/platform-browser-dynamic": "~8.2.14",
25 |     "@angular/router": "~8.2.14",
26 |     "@ionic-native/core": "^5.19.1",
27 |     "@ionic-native/splash-screen": "^5.19.1",
28 |     "@ionic-native/status-bar": "^5.19.1",
29 |     "@ionic/angular": "^4.11.8",
30 |     "@types/jasmine": "~3.5.1",
31 |     "@types/jasminewd2": "~2.0.8",
32 |     "@types/node": "~13.1.7",
33 |     "core-js": "^2.5.4",
34 |     "ngx-ionic-image-viewer": "^0.7.1",
35 |     "rxjs": "~6.5.4",
36 |     "tslib": "^1.10.0",
37 |     "typescript": "~3.5.3",
38 |     "zone.js": "~0.10.2"
39 |   },
40 |   "devDependencies": {
41 |     "@angular-devkit/architect": "~0.803.23",
42 |     "@angular-devkit/build-angular": "~0.803.23",
43 |     "@angular/cli": "~8.3.23",
44 |     "@angular/language-service": "~8.2.14",
45 |     "@ionic/angular-toolkit": "~2.1.2",
46 |     "codelyzer": "^5.2.1",
47 |     "jasmine-core": "~3.5.0",
48 |     "jasmine-spec-reporter": "~4.2.1",
49 |     "karma": "~4.4.1",
50 |     "karma-chrome-launcher": "~2.2.0",
51 |     "karma-coverage-istanbul-reporter": "~2.1.1",
52 |     "karma-jasmine": "~2.0.1",
53 |     "karma-jasmine-html-reporter": "^1.5.1",
54 |     "protractor": "~5.4.2",
55 |     "ts-node": "~8.6.2",
56 |     "tslint": "~5.20.1"
57 |   },
58 |   "description": "An Ionic project"
59 | }
60 | 


--------------------------------------------------------------------------------
/demo/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 3 | 
 4 | const routes: Routes = [
 5 |   { path: '', redirectTo: 'home', pathMatch: 'full' },
 6 |   { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
 7 | ];
 8 | 
 9 | @NgModule({
10 |   imports: [
11 |     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
12 |   ],
13 |   exports: [RouterModule]
14 | })
15 | export class AppRoutingModule { }
16 | 


--------------------------------------------------------------------------------
/demo/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <ion-app>
2 |   <ion-router-outlet></ion-router-outlet>
3 | </ion-app>
4 | 


--------------------------------------------------------------------------------
/demo/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGolms/ngx-ionic-image-viewer/3c7d66680892ef7589ba2d04f9af9918b5069d47/demo/src/app/app.component.scss


--------------------------------------------------------------------------------
/demo/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { TestBed, async } from '@angular/core/testing';
 3 | 
 4 | import { Platform } from '@ionic/angular';
 5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 7 | 
 8 | import { AppComponent } from './app.component';
 9 | 
10 | describe('AppComponent', () => {
11 | 
12 |   let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 | 
14 |   beforeEach(async(() => {
15 |     statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 |     splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 |     platformReadySpy = Promise.resolve();
18 |     platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 | 
20 |     TestBed.configureTestingModule({
21 |       declarations: [AppComponent],
22 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 |       providers: [
24 |         { provide: StatusBar, useValue: statusBarSpy },
25 |         { provide: SplashScreen, useValue: splashScreenSpy },
26 |         { provide: Platform, useValue: platformSpy },
27 |       ],
28 |     }).compileComponents();
29 |   }));
30 | 
31 |   it('should create the app', () => {
32 |     const fixture = TestBed.createComponent(AppComponent);
33 |     const app = fixture.debugElement.componentInstance;
34 |     expect(app).toBeTruthy();
35 |   });
36 | 
37 |   it('should initialize the app', async () => {
38 |     TestBed.createComponent(AppComponent);
39 |     expect(platformSpy.ready).toHaveBeenCalled();
40 |     await platformReadySpy;
41 |     expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 |     expect(splashScreenSpy.hide).toHaveBeenCalled();
43 |   });
44 | 
45 |   // TODO: add more tests!
46 | 
47 | });
48 | 


--------------------------------------------------------------------------------
/demo/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | import { Platform } from '@ionic/angular';
 4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 6 | 
 7 | @Component({
 8 |   selector: 'app-root',
 9 |   templateUrl: 'app.component.html',
10 |   styleUrls: ['app.component.scss']
11 | })
12 | export class AppComponent {
13 |   constructor(
14 |     private platform: Platform,
15 |     private splashScreen: SplashScreen,
16 |     private statusBar: StatusBar
17 |   ) {
18 |     this.initializeApp();
19 |   }
20 | 
21 |   initializeApp() {
22 |     this.platform.ready().then(() => {
23 |       this.statusBar.styleDefault();
24 |       this.splashScreen.hide();
25 |     });
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/demo/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { RouteReuseStrategy } from '@angular/router';
 4 | 
 5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 8 | 
 9 | import { AppComponent } from './app.component';
10 | import { AppRoutingModule } from './app-routing.module';
11 | import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
12 | 
13 | @NgModule({
14 |   declarations: [AppComponent],
15 |   entryComponents: [],
16 |   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgxIonicImageViewerModule],
17 |   providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
18 |   bootstrap: [AppComponent]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/demo/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { IonicModule } from '@ionic/angular';
 4 | import { FormsModule } from '@angular/forms';
 5 | import { RouterModule } from '@angular/router';
 6 | 
 7 | import { HomePage } from './home.page';
 8 | 
 9 | import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
10 | 
11 | @NgModule({
12 |   imports: [
13 |     CommonModule,
14 |     FormsModule,
15 |     IonicModule,
16 |     RouterModule.forChild([
17 |       {
18 |         path: '',
19 |         component: HomePage
20 |       }
21 |     ]),
22 |     NgxIonicImageViewerModule
23 |   ],
24 |   declarations: [HomePage]
25 | })
26 | export class HomePageModule {}
27 | 


--------------------------------------------------------------------------------
/demo/src/app/home/home.page.html:
--------------------------------------------------------------------------------
  1 | <ion-header>
  2 |   <ion-toolbar color="primary">
  3 |     <ion-title>
  4 |       Ionic Image Viewer Demo
  5 |     </ion-title>
  6 |   </ion-toolbar>
  7 | </ion-header>
  8 | 
  9 | <ion-content>
 10 |   <div class="ion-padding">
 11 |     <ion-text>
 12 |       Click on the image to open viewer & zoom
 13 |     </ion-text>
 14 |   </div>
 15 |   <div class="ion-padding-horizontal">
 16 |     <!-- DEFAULT -->
 17 |     <ion-text>
 18 |       <h2>Default</h2>
 19 |     </ion-text>
 20 |     <ion-img-viewer [src]="imgUrl"></ion-img-viewer>
 21 |     <br />
 22 |     <br />
 23 |     <!-- SCHEME -->
 24 |     <ion-text>
 25 |       <h2>Scheme</h2>
 26 |     </ion-text>
 27 |     <ion-text>
 28 |       <h3>Auto (default)</h3>
 29 |     </ion-text>
 30 |     <ion-img-viewer title="Silhoutte (Scheme / Auto)" text="Photo by Mayur Gala on Unsplash" [src]="imgUrl" scheme="auto"></ion-img-viewer>
 31 |     <br />
 32 |     <ion-list>
 33 |       <ion-item lines="full">
 34 |         <ion-icon slot="start" name="moon"></ion-icon>
 35 |         <ion-label>
 36 |           Toggle Dark Theme
 37 |         </ion-label>
 38 |         <ion-toggle checked="prefersDark" (ionChange)="toggleTheme()" slot="end"></ion-toggle>
 39 |       </ion-item>
 40 |     </ion-list>
 41 |     <br />
 42 |     <ion-text>
 43 |       <h3>Dark</h3>
 44 |     </ion-text>
 45 |     <ion-img-viewer title="Silhoutte (Scheme / Dark)" text="Photo by Mayur Gala on Unsplash" [src]="imgUrl" scheme="dark"></ion-img-viewer>
 46 |     <br />
 47 |     <ion-text>
 48 |       <h3>Light</h3>
 49 |     </ion-text>
 50 |     <ion-img-viewer
 51 |       title="Silhoutte (Scheme / Light)"
 52 |       text="Photo by Mayur Gala on Unsplash"
 53 |       [src]="imgUrl"
 54 |       scheme="light"
 55 |     ></ion-img-viewer>
 56 |     <br />
 57 |     <br />
 58 |     <ion-text>
 59 |       <h2>SlideOptions</h2>
 60 |     </ion-text>
 61 |     <ion-text>
 62 |       <h3>zoom 7x</h3>
 63 |     </ion-text>
 64 |     <ion-img-viewer
 65 |       title="Silhoutte (slideOptions / zoom 7x)"
 66 |       text="Photo by Mayur Gala on Unsplash"
 67 |       [src]="imgUrl"
 68 |       [slideOptions]="{ zoom: { maxRatio: 7}}"
 69 |     ></ion-img-viewer>
 70 |     <br />
 71 |     <br />
 72 |     <!-- DIRECTIVE -->
 73 |     <ion-text>
 74 |       <h2>Directive</h2>
 75 |     </ion-text>
 76 |     <ion-text>
 77 |       <h3>ion-img</h3>
 78 |     </ion-text>
 79 |     <ion-img ionImgViewer scheme="light" [src]="imgUrl" title="Directive ionImgViewer" text="Photo by Mayur Gala on Unsplash"></ion-img>
 80 |     <br />
 81 |     <br />
 82 |     <ion-text>
 83 |       <h3>ion-avatar</h3>
 84 |     </ion-text>
 85 |     <ion-item>
 86 |       <ion-avatar slot="start">
 87 |         <img
 88 |           ionImgViewer
 89 |           [src]="imgAvatar.src"
 90 |           [srcHighRes]="imgAvatar.srcHighRes"
 91 |           title="Directive ion-avatar"
 92 |           [text]="imgAvatar.author"
 93 |         />
 94 |       </ion-avatar>
 95 |       <ion-label>Awesome Dog</ion-label>
 96 |     </ion-item>
 97 |     <br />
 98 |     <br />
 99 |     <ion-text>
100 |       <h3>ion-thumbnail</h3>
101 |     </ion-text>
102 |     <ion-item>
103 |       <ion-thumbnail slot="start">
104 |         <img ionImgViewer [src]="imgThumbnail.src" [srcHighRes]="imgThumbnail.srcHighRes" [text]="imgThumbnail.author" />
105 |       </ion-thumbnail>
106 |       <ion-label>Photo by {{imgThumbnail.author}}</ion-label>
107 |     </ion-item>
108 |     <ion-text>
109 |       <h3>img</h3>
110 |     </ion-text>
111 |     <div class="ion-text-center">
112 |       <img ionImgViewer [src]="imgUrl" title="Directive img" text="Photo by Mayur Gala on Unsplash" width="50%" />
113 |     </div>
114 |     <br />
115 |     <ion-item-divider> </ion-item-divider>
116 |     <br />
117 |     <!-- DIRECTIVE -->
118 |     <ion-text>
119 |       <h2>Programmatic</h2>
120 |     </ion-text>
121 |     <ion-text>
122 |       <h3>ion-button</h3>
123 |     </ion-text>
124 |     <ion-button (click)="openViewer()">Open Viewer</ion-button>
125 |   </div>
126 |   <br />
127 |   <br />
128 | </ion-content>
129 | 


--------------------------------------------------------------------------------
/demo/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGolms/ngx-ionic-image-viewer/3c7d66680892ef7589ba2d04f9af9918b5069d47/demo/src/app/home/home.page.scss


--------------------------------------------------------------------------------
/demo/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | import { IonicModule } from '@ionic/angular';
 3 | 
 4 | import { HomePage } from './home.page';
 5 | 
 6 | describe('HomePage', () => {
 7 |   let component: HomePage;
 8 |   let fixture: ComponentFixture<HomePage>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ HomePage ],
13 |       imports: [IonicModule.forRoot()]
14 |     }).compileComponents();
15 | 
16 |     fixture = TestBed.createComponent(HomePage);
17 |     component = fixture.componentInstance;
18 |     fixture.detectChanges();
19 |   }));
20 | 
21 |   it('should create', () => {
22 |     expect(component).toBeTruthy();
23 |   });
24 | });
25 | 


--------------------------------------------------------------------------------
/demo/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { IonToggle, ModalController } from '@ionic/angular';
 3 | import { ViewerModalComponent } from 'ngx-ionic-image-viewer';
 4 | 
 5 | @Component({
 6 |   selector: 'app-home',
 7 |   templateUrl: 'home.page.html',
 8 |   styleUrls: ['home.page.scss'],
 9 | })
10 | export class HomePage implements OnInit {
11 |   prefersDark = false;
12 | 
13 |   imgUrl = `https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?&q=80`;
14 | 
15 |   imgAvatar = {
16 |     id: 237,
17 |     src: 'https://picsum.photos/id/237/200/200.jpg',
18 |     srcHighRes: 'https://picsum.photos/id/237/3500/2095.jpg',
19 |     author: 'André Spieker',
20 |   };
21 |   imgThumbnail = {
22 |     id: 1040,
23 |     src: 'https://picsum.photos/id/1040/200/200.jpg',
24 |     srcHighRes: 'https://picsum.photos/id/1040/4496/3000.jpg',
25 |     author: 'Rachel Davis',
26 |   };
27 | 
28 |   constructor(public modalController: ModalController) {}
29 | 
30 |   ngOnInit() {
31 |     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
32 |       this.toggleTheme();
33 |     }
34 |   }
35 | 
36 |   toggleTheme() {
37 |     this.prefersDark = !this.prefersDark;
38 |     document.body.classList.toggle('dark', this.prefersDark);
39 |   }
40 | 
41 |   async openViewer() {
42 |     const modal = await this.modalController.create({
43 |       component: ViewerModalComponent,
44 |       componentProps: {
45 |         src: this.imgUrl, // required
46 |         title: 'Silhoutte (Programmatic)', // optional
47 |         text: 'Photo by Mayur Gala on Unsplash', // optional
48 |       },
49 |       cssClass: 'ion-img-viewer', // required
50 |       keyboardClose: true,
51 |       showBackdrop: true,
52 |     });
53 | 
54 |     return await modal.present();
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/demo/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGolms/ngx-ionic-image-viewer/3c7d66680892ef7589ba2d04f9af9918b5069d47/demo/src/assets/icon/favicon.png


--------------------------------------------------------------------------------
/demo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/demo/src/global.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * App Global CSS
 3 |  * ----------------------------------------------------------------------------
 4 |  * Put style rules here that you want to apply globally. These styles are for
 5 |  * the entire app and not just one component. Additionally, this file can be
 6 |  * used as an entry point to import other CSS/Sass files to be included in the
 7 |  * output CSS.
 8 |  * For more information on global stylesheets, visit the documentation:
 9 |  * https://ionicframework.com/docs/layout/global-stylesheets
10 |  */
11 | 
12 | /* Core CSS required for Ionic components to work properly */
13 | @import "~@ionic/angular/css/core.css";
14 | 
15 | /* Basic CSS for apps built with Ionic */
16 | @import "~@ionic/angular/css/normalize.css";
17 | @import "~@ionic/angular/css/structure.css";
18 | @import "~@ionic/angular/css/typography.css";
19 | @import '~@ionic/angular/css/display.css';
20 | 
21 | /* Optional CSS utils that can be commented out */
22 | @import "~@ionic/angular/css/padding.css";
23 | @import "~@ionic/angular/css/float-elements.css";
24 | @import "~@ionic/angular/css/text-alignment.css";
25 | @import "~@ionic/angular/css/text-transformation.css";
26 | @import "~@ionic/angular/css/flex-utils.css";
27 | 


--------------------------------------------------------------------------------
/demo/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <title>Ionic App</title>
 7 | 
 8 |   <base href="/" />
 9 | 
10 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
11 |   <meta name="format-detection" content="telephone=no" />
12 |   <meta name="msapplication-tap-highlight" content="no" />
13 | 
14 |   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
15 | 
16 |   <!-- add to homescreen for ios -->
17 |   <meta name="apple-mobile-web-app-capable" content="yes" />
18 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
19 | </head>
20 | 
21 | <body>
22 |   <app-root></app-root>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/demo/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/demo/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | import './zone-flags.ts';
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | 
61 | import 'zone.js/dist/zone';  // Included with Angular CLI.
62 | 
63 | 
64 | /***************************************************************************************************
65 |  * APPLICATION IMPORTS
66 |  */
67 | 


--------------------------------------------------------------------------------
/demo/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/demo/src/theme/variables.scss:
--------------------------------------------------------------------------------
  1 | // Ionic Variables and Theming. For more info, please see:
  2 | // http://ionicframework.com/docs/theming/
  3 | 
  4 | /** Ionic CSS Variables **/
  5 | :root {
  6 |   /** primary **/
  7 |   --ion-color-primary: #3880ff;
  8 |   --ion-color-primary-rgb: 56, 128, 255;
  9 |   --ion-color-primary-contrast: #ffffff;
 10 |   --ion-color-primary-contrast-rgb: 255, 255, 255;
 11 |   --ion-color-primary-shade: #3171e0;
 12 |   --ion-color-primary-tint: #4c8dff;
 13 | 
 14 |   /** secondary **/
 15 |   --ion-color-secondary: #0cd1e8;
 16 |   --ion-color-secondary-rgb: 12, 209, 232;
 17 |   --ion-color-secondary-contrast: #ffffff;
 18 |   --ion-color-secondary-contrast-rgb: 255, 255, 255;
 19 |   --ion-color-secondary-shade: #0bb8cc;
 20 |   --ion-color-secondary-tint: #24d6ea;
 21 | 
 22 |   /** tertiary **/
 23 |   --ion-color-tertiary: #7044ff;
 24 |   --ion-color-tertiary-rgb: 112, 68, 255;
 25 |   --ion-color-tertiary-contrast: #ffffff;
 26 |   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
 27 |   --ion-color-tertiary-shade: #633ce0;
 28 |   --ion-color-tertiary-tint: #7e57ff;
 29 | 
 30 |   /** success **/
 31 |   --ion-color-success: #10dc60;
 32 |   --ion-color-success-rgb: 16, 220, 96;
 33 |   --ion-color-success-contrast: #ffffff;
 34 |   --ion-color-success-contrast-rgb: 255, 255, 255;
 35 |   --ion-color-success-shade: #0ec254;
 36 |   --ion-color-success-tint: #28e070;
 37 | 
 38 |   /** warning **/
 39 |   --ion-color-warning: #ffce00;
 40 |   --ion-color-warning-rgb: 255, 206, 0;
 41 |   --ion-color-warning-contrast: #ffffff;
 42 |   --ion-color-warning-contrast-rgb: 255, 255, 255;
 43 |   --ion-color-warning-shade: #e0b500;
 44 |   --ion-color-warning-tint: #ffd31a;
 45 | 
 46 |   /** danger **/
 47 |   --ion-color-danger: #f04141;
 48 |   --ion-color-danger-rgb: 245, 61, 61;
 49 |   --ion-color-danger-contrast: #ffffff;
 50 |   --ion-color-danger-contrast-rgb: 255, 255, 255;
 51 |   --ion-color-danger-shade: #d33939;
 52 |   --ion-color-danger-tint: #f25454;
 53 | 
 54 |   /** dark **/
 55 |   --ion-color-dark: #222428;
 56 |   --ion-color-dark-rgb: 34, 34, 34;
 57 |   --ion-color-dark-contrast: #ffffff;
 58 |   --ion-color-dark-contrast-rgb: 255, 255, 255;
 59 |   --ion-color-dark-shade: #1e2023;
 60 |   --ion-color-dark-tint: #383a3e;
 61 | 
 62 |   /** medium **/
 63 |   --ion-color-medium: #989aa2;
 64 |   --ion-color-medium-rgb: 152, 154, 162;
 65 |   --ion-color-medium-contrast: #ffffff;
 66 |   --ion-color-medium-contrast-rgb: 255, 255, 255;
 67 |   --ion-color-medium-shade: #86888f;
 68 |   --ion-color-medium-tint: #a2a4ab;
 69 | 
 70 |   /** light **/
 71 |   --ion-color-light: #f4f5f8;
 72 |   --ion-color-light-rgb: 244, 244, 244;
 73 |   --ion-color-light-contrast: #000000;
 74 |   --ion-color-light-contrast-rgb: 0, 0, 0;
 75 |   --ion-color-light-shade: #d7d8da;
 76 |   --ion-color-light-tint: #f5f6f9;
 77 | }
 78 | 
 79 | /*
 80 |  * Dark Colors
 81 |  * -------------------------------------------
 82 |  */
 83 | 
 84 | body.dark {
 85 |   --ion-color-primary: #428cff;
 86 |   --ion-color-primary-rgb: 66, 140, 255;
 87 |   --ion-color-primary-contrast: #ffffff;
 88 |   --ion-color-primary-contrast-rgb: 255, 255, 255;
 89 |   --ion-color-primary-shade: #3a7be0;
 90 |   --ion-color-primary-tint: #5598ff;
 91 | 
 92 |   --ion-color-secondary: #50c8ff;
 93 |   --ion-color-secondary-rgb: 80, 200, 255;
 94 |   --ion-color-secondary-contrast: #ffffff;
 95 |   --ion-color-secondary-contrast-rgb: 255, 255, 255;
 96 |   --ion-color-secondary-shade: #46b0e0;
 97 |   --ion-color-secondary-tint: #62ceff;
 98 | 
 99 |   --ion-color-tertiary: #6a64ff;
100 |   --ion-color-tertiary-rgb: 106, 100, 255;
101 |   --ion-color-tertiary-contrast: #ffffff;
102 |   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
103 |   --ion-color-tertiary-shade: #5d58e0;
104 |   --ion-color-tertiary-tint: #7974ff;
105 | 
106 |   --ion-color-success: #2fdf75;
107 |   --ion-color-success-rgb: 47, 223, 117;
108 |   --ion-color-success-contrast: #000000;
109 |   --ion-color-success-contrast-rgb: 0, 0, 0;
110 |   --ion-color-success-shade: #29c467;
111 |   --ion-color-success-tint: #44e283;
112 | 
113 |   --ion-color-warning: #ffd534;
114 |   --ion-color-warning-rgb: 255, 213, 52;
115 |   --ion-color-warning-contrast: #000000;
116 |   --ion-color-warning-contrast-rgb: 0, 0, 0;
117 |   --ion-color-warning-shade: #e0bb2e;
118 |   --ion-color-warning-tint: #ffd948;
119 | 
120 |   --ion-color-danger: #ff4961;
121 |   --ion-color-danger-rgb: 255, 73, 97;
122 |   --ion-color-danger-contrast: #ffffff;
123 |   --ion-color-danger-contrast-rgb: 255, 255, 255;
124 |   --ion-color-danger-shade: #e04055;
125 |   --ion-color-danger-tint: #ff5b71;
126 | 
127 |   --ion-color-dark: #f4f5f8;
128 |   --ion-color-dark-rgb: 244, 245, 248;
129 |   --ion-color-dark-contrast: #000000;
130 |   --ion-color-dark-contrast-rgb: 0, 0, 0;
131 |   --ion-color-dark-shade: #d7d8da;
132 |   --ion-color-dark-tint: #f5f6f9;
133 | 
134 |   --ion-color-medium: #989aa2;
135 |   --ion-color-medium-rgb: 152, 154, 162;
136 |   --ion-color-medium-contrast: #000000;
137 |   --ion-color-medium-contrast-rgb: 0, 0, 0;
138 |   --ion-color-medium-shade: #86888f;
139 |   --ion-color-medium-tint: #a2a4ab;
140 | 
141 |   --ion-color-light: #222428;
142 |   --ion-color-light-rgb: 34, 36, 40;
143 |   --ion-color-light-contrast: #ffffff;
144 |   --ion-color-light-contrast-rgb: 255, 255, 255;
145 |   --ion-color-light-shade: #1e2023;
146 |   --ion-color-light-tint: #383a3e;
147 | }
148 | 
149 | /*
150 |  * iOS Dark Theme
151 |  * -------------------------------------------
152 |  */
153 | 
154 | .ios body.dark {
155 |   --ion-background-color: #000000;
156 |   --ion-background-color-rgb: 0, 0, 0;
157 | 
158 |   --ion-text-color: #ffffff;
159 |   --ion-text-color-rgb: 255, 255, 255;
160 | 
161 |   --ion-color-step-50: #0d0d0d;
162 |   --ion-color-step-100: #1a1a1a;
163 |   --ion-color-step-150: #262626;
164 |   --ion-color-step-200: #333333;
165 |   --ion-color-step-250: #404040;
166 |   --ion-color-step-300: #4d4d4d;
167 |   --ion-color-step-350: #595959;
168 |   --ion-color-step-400: #666666;
169 |   --ion-color-step-450: #737373;
170 |   --ion-color-step-500: #808080;
171 |   --ion-color-step-550: #8c8c8c;
172 |   --ion-color-step-600: #999999;
173 |   --ion-color-step-650: #a6a6a6;
174 |   --ion-color-step-700: #b3b3b3;
175 |   --ion-color-step-750: #bfbfbf;
176 |   --ion-color-step-800: #cccccc;
177 |   --ion-color-step-850: #d9d9d9;
178 |   --ion-color-step-900: #e6e6e6;
179 |   --ion-color-step-950: #f2f2f2;
180 | 
181 |   --ion-toolbar-background: #0d0d0d;
182 | 
183 |   --ion-item-background: #1c1c1c;
184 |   --ion-item-background-activated: #313131;
185 | }
186 | 
187 | /*
188 |  * Material Design Dark Theme
189 |  * -------------------------------------------
190 |  */
191 | 
192 | .md body.dark {
193 |   --ion-background-color: #121212;
194 |   --ion-background-color-rgb: 18, 18, 18;
195 | 
196 |   --ion-text-color: #ffffff;
197 |   --ion-text-color-rgb: 255, 255, 255;
198 | 
199 |   --ion-border-color: #222222;
200 | 
201 |   --ion-color-step-50: #1e1e1e;
202 |   --ion-color-step-100: #2a2a2a;
203 |   --ion-color-step-150: #363636;
204 |   --ion-color-step-200: #414141;
205 |   --ion-color-step-250: #4d4d4d;
206 |   --ion-color-step-300: #595959;
207 |   --ion-color-step-350: #656565;
208 |   --ion-color-step-400: #717171;
209 |   --ion-color-step-450: #7d7d7d;
210 |   --ion-color-step-500: #898989;
211 |   --ion-color-step-550: #949494;
212 |   --ion-color-step-600: #a0a0a0;
213 |   --ion-color-step-650: #acacac;
214 |   --ion-color-step-700: #b8b8b8;
215 |   --ion-color-step-750: #c4c4c4;
216 |   --ion-color-step-800: #d0d0d0;
217 |   --ion-color-step-850: #dbdbdb;
218 |   --ion-color-step-900: #e7e7e7;
219 |   --ion-color-step-950: #f3f3f3;
220 | 
221 |   --ion-item-background: #1a1b1e;
222 | }
223 | 


--------------------------------------------------------------------------------
/demo/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Prevents Angular change detection from
3 |  * running with certain Web Component callbacks
4 |  */
5 | (window as any).__Zone_disable_customElements = true;
6 | 


--------------------------------------------------------------------------------
/demo/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "include": [
 8 |     "src/**/*.ts"
 9 |   ],
10 |   "exclude": [
11 |     "src/test.ts",
12 |     "src/**/*.spec.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "esnext",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": ["node_modules/@types"],
15 |     "lib": ["es2018", "dom"],
16 |     "paths": {
17 |       "@angular/*": ["../node_modules/@angular/*"]
18 |     }
19 |   },
20 |   "angularCompilerOptions": {
21 |     "fullTemplateTypeCheck": true,
22 |     "strictInjectionParameters": true
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/demo/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/zone-flags.ts",
13 |     "src/polyfills.ts"
14 |   ],
15 |   "include": [
16 |     "src/**/*.spec.ts",
17 |     "src/**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/demo/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rulesDirectory": [
 4 |     "codelyzer"
 5 |   ],
 6 |   "rules": {
 7 |     "array-type": false,
 8 |     "arrow-parens": false,
 9 |     "deprecation": {
10 |       "severity": "warn"
11 |     },
12 |     "import-blacklist": [
13 |       true,
14 |       "rxjs/Rx"
15 |     ],
16 |     "interface-name": false,
17 |     "max-classes-per-file": false,
18 |     "max-line-length": [
19 |       true,
20 |       140
21 |     ],
22 |     "member-access": false,
23 |     "member-ordering": [
24 |       true,
25 |       {
26 |         "order": [
27 |           "static-field",
28 |           "instance-field",
29 |           "static-method",
30 |           "instance-method"
31 |         ]
32 |       }
33 |     ],
34 |     "no-consecutive-blank-lines": false,
35 |     "no-console": [
36 |       true,
37 |       "debug",
38 |       "info",
39 |       "time",
40 |       "timeEnd",
41 |       "trace"
42 |     ],
43 |     "no-empty": false,
44 |     "no-inferrable-types": [
45 |       true,
46 |       "ignore-params"
47 |     ],
48 |     "no-non-null-assertion": true,
49 |     "no-redundant-jsdoc": true,
50 |     "no-switch-case-fall-through": true,
51 |     "no-use-before-declare": true,
52 |     "no-var-requires": false,
53 |     "object-literal-key-quotes": [
54 |       true,
55 |       "as-needed"
56 |     ],
57 |     "object-literal-sort-keys": false,
58 |     "ordered-imports": false,
59 |     "quotemark": [
60 |       true,
61 |       "single"
62 |     ],
63 |     "trailing-comma": false,
64 |     "no-output-on-prefix": true,
65 |     "no-inputs-metadata-property": true,
66 |     "no-host-metadata-property": true,
67 |     "no-input-rename": true,
68 |     "no-output-rename": true,
69 |     "use-lifecycle-interface": true,
70 |     "use-pipe-transform-interface": true,
71 |     "one-variable-per-declaration": false,
72 |     "component-class-suffix": [true, "Page", "Component"],
73 |     "directive-class-suffix": true,
74 |     "directive-selector": [
75 |       true,
76 |       "attribute",
77 |       "app",
78 |       "camelCase"
79 |     ],
80 |     "component-selector": [
81 |       true,
82 |       "element",
83 |       "app",
84 |       "page",
85 |       "kebab-case"
86 |     ]
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/docs/showcase.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SimonGolms/ngx-ionic-image-viewer/3c7d66680892ef7589ba2d04f9af9918b5069d47/docs/showcase.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "ngx-ionic-image-viewer-workspace",
  3 |   "version": "0.0.0",
  4 |   "description": "The angular workspace to develop the ngx-ionic-image-viewer component",
  5 |   "keywords": [
  6 |     "ionic",
  7 |     "ionic4",
  8 |     "angular",
  9 |     "angular8",
 10 |     "ngx",
 11 |     "module",
 12 |     "component",
 13 |     "directive",
 14 |     "ion",
 15 |     "image",
 16 |     "img",
 17 |     "photo",
 18 |     "thumbnail",
 19 |     "view",
 20 |     "viewer",
 21 |     "show",
 22 |     "gallery",
 23 |     "zoom",
 24 |     "modal",
 25 |     "slider"
 26 |   ],
 27 |   "homepage": "https://github.com/simongolms/ngx-ionic-image-viewer.git",
 28 |   "license": "MIT",
 29 |   "author": {
 30 |     "name": "Simon Golms",
 31 |     "email": "development@gol.ms",
 32 |     "url": "https://gol.ms"
 33 |   },
 34 |   "scripts": {
 35 |     "ng": "ng",
 36 |     "start": "ng serve",
 37 |     "ionic:serve": "npm link dist/ngx-ionic-image-viewer/ && cd demo && npm link ngx-ionic-image-viewer && ionic serve",
 38 |     "prebuild": "cp README.md projects/ngx-ionic-image-viewer/ ",
 39 |     "build": "ng build",
 40 |     "build:watch": "ng build --watch",
 41 |     "demo:update": "cd demo && npm install ngx-ionic-image-viewer@latest --save && git commit -m \"chore(demo): update dependency\n\n- ngx-ionic-image-viewer@latest\" package*.json",
 42 |     "release": "dotenv -- bash -c \"cd projects/ngx-ionic-image-viewer && release-it --ci\"",
 43 |     "release:dry-run": "dotenv -- bash -c \"cd projects/ngx-ionic-image-viewer && release-it --ci --dry-run\"",
 44 |     "test": "ng test",
 45 |     "lint": "ng lint",
 46 |     "e2e": "ng e2e"
 47 |   },
 48 |   "repository": {
 49 |     "type": "git",
 50 |     "url": "https://github.com/simongolms/ngx-ionic-image-viewer.git"
 51 |   },
 52 |   "private": true,
 53 |   "dependencies": {
 54 |     "@angular/animations": "~8.2.14",
 55 |     "@angular/common": "~8.2.14",
 56 |     "@angular/compiler": "~8.2.14",
 57 |     "@angular/core": "~8.2.14",
 58 |     "@angular/forms": "~8.2.14",
 59 |     "@angular/platform-browser": "~8.2.14",
 60 |     "@angular/platform-browser-dynamic": "~8.2.14",
 61 |     "@angular/router": "~8.2.14",
 62 |     "@ionic/angular": "^4.11.10",
 63 |     "rxjs": "~6.5.3",
 64 |     "tslib": "^1.10.0",
 65 |     "zone.js": "~0.9.1"
 66 |   },
 67 |   "devDependencies": {
 68 |     "@angular-devkit/build-angular": "~0.803.21",
 69 |     "@angular-devkit/build-ng-packagr": "~0.803.21",
 70 |     "@angular/cli": "~8.3.21",
 71 |     "@angular/compiler-cli": "~8.2.14",
 72 |     "@angular/language-service": "~8.2.14",
 73 |     "@commitlint/cli": "^8.2.0",
 74 |     "@commitlint/config-conventional": "^8.2.0",
 75 |     "@release-it/conventional-changelog": "^1.1.0",
 76 |     "@types/jasmine": "~3.5.0",
 77 |     "@types/jasminewd2": "~2.0.8",
 78 |     "@types/node": "~13.1.0",
 79 |     "codelyzer": "^5.2.1",
 80 |     "dotenv-cli": "^3.1.0",
 81 |     "husky": "^3.1.0",
 82 |     "jasmine-core": "~3.5.0",
 83 |     "jasmine-spec-reporter": "~4.2.1",
 84 |     "karma": "~4.4.1",
 85 |     "karma-chrome-launcher": "~2.2.0",
 86 |     "karma-coverage-istanbul-reporter": "~2.1.1",
 87 |     "karma-jasmine": "~2.0.1",
 88 |     "karma-jasmine-html-reporter": "^1.4.2",
 89 |     "ng-packagr": "^5.7.1",
 90 |     "protractor": "~5.4.2",
 91 |     "release-it": "^12.4.3",
 92 |     "ts-node": "~8.5.4",
 93 |     "tsickle": "^0.37.1",
 94 |     "tslint": "~5.20.1",
 95 |     "typescript": "~3.5.3"
 96 |   },
 97 |   "config": {
 98 |     "commitizen": {
 99 |       "path": "cz-conventional-changelog"
100 |     }
101 |   },
102 |   "husky": {
103 |     "hooks": {
104 |       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
105 |     }
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | <a name="0.7.5"></a>
  2 | ## [0.7.5](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.4...v0.7.5) (2022-01-29)
  3 | 
  4 | 
  5 | ### Bug Fixes
  6 | 
  7 | * add deprecation information ([b20b7be](https://github.com/simongolms/ngx-ionic-image-viewer/commit/b20b7be))
  8 | 
  9 | <a name="0.7.4"></a>
 10 | ## [0.7.4](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.4-0...v0.7.4) (2020-10-05)
 11 | 
 12 | <a name="0.7.4-0"></a>
 13 | ## [0.7.4-0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.3-0...v0.7.4-0) (2020-10-05)
 14 | 
 15 | <a name="0.7.3-0"></a>
 16 | ## [0.7.3-0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.1...v0.7.3-0) (2020-10-05)
 17 | 
 18 | 
 19 | ### Bug Fixes
 20 | 
 21 | * omit peer dependencies warning ([ac64084](https://github.com/simongolms/ngx-ionic-image-viewer/commit/ac64084)), closes [#43](https://github.com/simongolms/ngx-ionic-image-viewer/issues/43) [#46](https://github.com/simongolms/ngx-ionic-image-viewer/issues/46)
 22 | 
 23 | <a name="0.7.1"></a>
 24 | ## [0.7.1](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.7.0...v0.7.1) (2020-05-31)
 25 | 
 26 | 
 27 | ### Bug Fixes
 28 | 
 29 | * srcFallback not working on controller ([a0b0bfc](https://github.com/simongolms/ngx-ionic-image-viewer/commit/a0b0bfc)), closes [#28](https://github.com/simongolms/ngx-ionic-image-viewer/issues/28)
 30 | 
 31 | <a name="0.7.0"></a>
 32 | # [0.7.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.6.0...v0.7.0) (2020-02-23)
 33 | 
 34 | 
 35 | ### Bug Fixes
 36 | 
 37 | * remove console log output ([65cb629](https://github.com/simongolms/ngx-ionic-image-viewer/commit/65cb629))
 38 | * when specified `alt` the image was not showen in some cases ([d7af54c](https://github.com/simongolms/ngx-ionic-image-viewer/commit/d7af54c))
 39 | 
 40 | 
 41 | ### Features
 42 | 
 43 | * the viewer-modal can be used as a controller component ([6d8fb45](https://github.com/simongolms/ngx-ionic-image-viewer/commit/6d8fb45))
 44 | 
 45 | <a name="0.6.0"></a>
 46 | # [0.6.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.5.2...v0.6.0) (2020-02-17)
 47 | 
 48 | 
 49 | ### Features
 50 | 
 51 | * apply additional class for custom CSS ([fa941a2](https://github.com/simongolms/ngx-ionic-image-viewer/commit/fa941a2))
 52 | * set the size of the title ([8bdac98](https://github.com/simongolms/ngx-ionic-image-viewer/commit/8bdac98))
 53 | 
 54 | <a name="0.5.2"></a>
 55 | ## [0.5.2](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.5.1...v0.5.2) (2020-02-11)
 56 | 
 57 | 
 58 | ### Bug Fixes
 59 | 
 60 | * images behave correctly after being viewed several times ([445ad78](https://github.com/simongolms/ngx-ionic-image-viewer/commit/445ad78)), closes [#14](https://github.com/simongolms/ngx-ionic-image-viewer/issues/14) [#16](https://github.com/simongolms/ngx-ionic-image-viewer/issues/16)
 61 | 
 62 | <a name="0.5.1"></a>
 63 | ## [0.5.1](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.5.0...v0.5.1) (2020-02-06)
 64 | 
 65 | 
 66 | ### Bug Fixes
 67 | 
 68 | * **directive:** failing production build ([d56b420](https://github.com/simongolms/ngx-ionic-image-viewer/commit/d56b420))
 69 | 
 70 | <a name="0.5.0"></a>
 71 | # [0.5.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.4.0...v0.5.0) (2020-02-06)
 72 | 
 73 | 
 74 | ### Bug Fixes
 75 | 
 76 | * ignore close button when swipeToClose is active ([969d7e8](https://github.com/simongolms/ngx-ionic-image-viewer/commit/969d7e8))
 77 | * styling of the component via css ([a8919d6](https://github.com/simongolms/ngx-ionic-image-viewer/commit/a8919d6))
 78 | 
 79 | 
 80 | ### Features
 81 | 
 82 | * show alternative image on error ([8bb29a4](https://github.com/simongolms/ngx-ionic-image-viewer/commit/8bb29a4)), closes [#13](https://github.com/simongolms/ngx-ionic-image-viewer/issues/13)
 83 | * swipe down to close the viewer ([ebc756c](https://github.com/simongolms/ngx-ionic-image-viewer/commit/ebc756c))
 84 | 
 85 | <a name="0.4.0"></a>
 86 | # [0.4.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.3.0...v0.4.0) (2020-01-15)
 87 | 
 88 | 
 89 | ### Bug Fixes
 90 | 
 91 | * **directive:** open viewer in fullscreen on desktop ([6e078b9](https://github.com/simongolms/ngx-ionic-image-viewer/commit/6e078b9))
 92 | 
 93 | 
 94 | ### Features
 95 | 
 96 | * **directive:** use directive on img element ([b162aad](https://github.com/simongolms/ngx-ionic-image-viewer/commit/b162aad)), closes [#10](https://github.com/simongolms/ngx-ionic-image-viewer/issues/10)
 97 | 
 98 | <a name="0.3.0"></a>
 99 | # [0.3.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.2.0...v0.3.0) (2019-12-29)
100 | 
101 | 
102 | ### Features
103 | 
104 | * add props srcHighRes to display high-resolution image ([efe182c](https://github.com/simongolms/ngx-ionic-image-viewer/commit/efe182c))
105 | 
106 | <a name="0.2.0"></a>
107 | # [0.2.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.1.0...v0.2.0) (2019-12-23)
108 | 
109 | 
110 | ### Bug Fixes
111 | 
112 | * console error when moving in a zoomed image ([b292e63](https://github.com/simongolms/ngx-ionic-image-viewer/commit/b292e63)), closes [#7](https://github.com/simongolms/ngx-ionic-image-viewer/issues/7)
113 | 
114 | 
115 | ### Features
116 | 
117 | * use the module as ionImgViewer directive ([63decaf](https://github.com/simongolms/ngx-ionic-image-viewer/commit/63decaf))
118 | 
119 | <a name="0.1.0"></a>
120 | # [0.1.0](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.0.2...v0.1.0) (2019-12-16)
121 | 
122 | 
123 | ### Features
124 | 
125 | * add props scheme to set color scheme ([15d35e9](https://github.com/simongolms/ngx-ionic-image-viewer/commit/15d35e9))
126 | * add props slideOptions to pass to the swiper instance ([9429408](https://github.com/simongolms/ngx-ionic-image-viewer/commit/9429408))
127 | 
128 | # Changelog
129 | 
130 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
131 | 
132 | ### [0.0.2](https://github.com/simongolms/ngx-ionic-image-viewer/compare/v0.0.1...v0.0.2) (2019-11-28)
133 | 
134 | 
135 | ### Bug Fixes
136 | 
137 | * throwing error for preventDefault in swiper.bundle ([68bdadb](https://github.com/simongolms/ngx-ionic-image-viewer/commit/68bdadb21582923f604fc30b6903757484af5356)), closes [#2](https://github.com/simongolms/ngx-ionic-image-viewer/issues/2)
138 | 
139 | ### [0.0.1](https://github.com/SimonGolms/ngx-ionic-image-viewer/releases/tag/v0.0.1) (2019-11-12)
140 | 
141 | init version
142 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/README.md:
--------------------------------------------------------------------------------
  1 | **ℹ️ Please note that this package has reached its end. After getting into the React world 2018, I lost the contact into the Angular Ecosystem. With Ionic 6, Slider.js will also be split off, which will probably make this package incompatible for now. Unfortunately I don't have the time to develop this package further according to the demands - thank you for your trust and responses, I appreciated it very much. Feel free to fork this package and work on a successor. You will find here a good tutorial how to create your own image viewer, which is based on the same approach: https://www.youtube.com/watch?v=VCUpRkRi00w**
  2 | 
  3 | # ngx-ionic-image-viewer <!-- omit in toc -->
  4 | 
  5 | <p>
  6 |   <a href="https://www.npmjs.com/package/ngx-ionic-image-viewer" target="_blank">
  7 |     <img alt="NPM Version" src="https://img.shields.io/npm/v/ngx-ionic-image-viewer.svg" />
  8 |   </a>
  9 |   <a href="https://github.com/simongolms/ngx-ionic-image-viewer#readme" target="_blank">
 10 |     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
 11 |   </a>
 12 |   <a href="https://github.com/simongolms/ngx-ionic-image-viewer/graphs/commit-activity" target="_blank">
 13 |     <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-no-red.svg" />
 14 |   </a>
 15 |   <a href="https://conventionalcommits.org" target="_blank">
 16 |     <img alt="Conventional Commits" src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" />
 17 |   </a>
 18 |   <a href="https://github.com/conventional-changelog/standard-version" target="_blank">
 19 |     <img alt="Standard Version" src="https://img.shields.io/badge/release-standard%20version-brightgreen.svg" />
 20 |   </a>
 21 |   <a href="https://github.com/simongolms/ngx-ionic-image-viewer/blob/master/LICENSE" target="_blank">
 22 |     <img alt="License: MIT" src="https://img.shields.io/github/license/simongolms/ngx-ionic-image-viewer" />
 23 |   </a>
 24 | </p>
 25 | 
 26 | > An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
 27 | 
 28 | ## Demo <!-- omit in toc -->
 29 | 
 30 | [Live Demo](https://ionic4-image-viewer-example.netlify.com) | [Stackblitz](https://stackblitz.com/github/SimonGolms/ngx-ionic-image-viewer/tree/master/demo)
 31 | 
 32 | ![ngx-ionic-image-viewer-showcase](https://github.com/SimonGolms/ngx-ionic-image-viewer/raw/master/docs/showcase.gif)
 33 | 
 34 | ## Overview <!-- omit in toc -->
 35 | 
 36 | - [Prerequisites](#prerequisites)
 37 | - [Installation](#installation)
 38 | - [Usage](#usage)
 39 |   - [Import](#import)
 40 |   - [Component](#component)
 41 |   - [Directive](#directive)
 42 |   - [Controller](#controller)
 43 | - [Properties](#properties)
 44 | - [Workspace](#workspace)
 45 |   - [Local Development](#local-development)
 46 |   - [Code scaffolding](#code-scaffolding)
 47 |   - [Build](#build)
 48 |   - [Release & Publishing](#release--publishing)
 49 |   - [Manual Publishing](#manual-publishing)
 50 |   - [Running unit tests](#running-unit-tests)
 51 |   - [Running end-to-end tests](#running-end-to-end-tests)
 52 |   - [Further help](#further-help)
 53 |     - [Committing](#committing)
 54 | - [Author](#author)
 55 | - [Contributing](#contributing)
 56 | - [Show your support](#show-your-support)
 57 | - [License](#license)
 58 | 
 59 | ## Prerequisites
 60 | 
 61 | - ionic >= 4.0.0
 62 | - angular >= 8.0.0
 63 | 
 64 | ## Installation
 65 | 
 66 | ```bash
 67 | npm install --save ngx-ionic-image-viewer
 68 | ```
 69 | 
 70 | ## Usage
 71 | 
 72 | ### Import
 73 | 
 74 | Import the module and add it to your imports section in your main AppModule:
 75 | 
 76 | ```js
 77 | import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
 78 | 
 79 | ...
 80 | 
 81 | @NgModule({
 82 |   imports: [
 83 |     NgxIonicImageViewerModule
 84 |   ],
 85 | })
 86 | export class AppModule {}
 87 | ```
 88 | 
 89 | Import the module and add it to your imports section of your component where you want to use it (e.g. `home.module.ts`):
 90 | 
 91 | ```js
 92 | import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
 93 | 
 94 | ...
 95 | 
 96 | @NgModule({
 97 |   imports: [
 98 |     NgxIonicImageViewerModule
 99 |   ],
100 | })
101 | export class HomePageModule {}
102 | 
103 | ```
104 | 
105 | ### Component
106 | 
107 | Add `ion-img-viewer` within the HTML of your module (e.g. `home.page.html`)
108 | 
109 | ```html
110 | <ion-img-viewer
111 |   title="Demo"
112 |   text="Component"
113 |   scheme="dark"
114 |   src="./assets/img/demo.jpg"
115 | >
116 | </ion-img-viewer>
117 | ```
118 | 
119 | ### Directive
120 | 
121 | Add `ionImgViewer` as a directive within the `ion-img` HTML element of your module (e.g. `home.page.html`)
122 | 
123 | ```html
124 | <ion-img
125 |   ionImgViewer
126 |   title="Demo"
127 |   text="Directive"
128 |   scheme="light"
129 |   src="./assets/img/demo.jpg"
130 | >
131 | </ion-img>
132 | ```
133 | 
134 | ### Controller
135 | 
136 | 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`.
137 | Use `cssClass: ['ion-img-viewer', 'my-custom-ion-img-viewer']`in case you want to add more css classes.
138 | 
139 | ```js
140 | import { ModalController } from '@ionic/angular';
141 | import { ViewerModalComponent } from 'ngx-ionic-image-viewer';
142 | 
143 | export class HomePage {
144 | 
145 |   constructor(public modalController: ModalController) {}
146 | 
147 |   async openViewer() {
148 |     const modal = await this.modalController.create({
149 |       component: ViewerModalComponent,
150 |       componentProps: {
151 |         src: "./assets/img/demo.jpg"
152 |       },
153 |       cssClass: 'ion-img-viewer',
154 |       keyboardClose: true,
155 |       showBackdrop: true
156 |     });
157 | 
158 |     return await modal.present();
159 |   }
160 | }
161 | ```
162 | 
163 | ```html
164 | <ion-button (click)="openViewer()">Open Viewer</ion-button>
165 | ```
166 | 
167 | ## Properties
168 | 
169 | <table>
170 |     <!-- alt -->
171 |     <thead>
172 |         <tr>
173 |             <th colspan="2" align="left"><h3>alt</h3></th>
174 |         </tr>
175 |     </thead>
176 |     <tbody>
177 |         <tr>
178 |             <td>Description</td>
179 |             <td>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.</td>
180 |         </tr>
181 |         <tr>
182 |             <td>Attribute</td>
183 |             <td><code>alt</code></td>
184 |         </tr>
185 |         <tr>
186 |             <td>Type</td>
187 |             <td><code>string</code> | <code>undefined</code></td>
188 |         </tr>
189 |     </tbody>
190 |     <!-- cssClass -->
191 |     <thead>
192 |         <tr>
193 |             <th colspan="2" align="left"><h3>cssClass</h3></th>
194 |         </tr>
195 |     </thead>
196 |     <tbody>
197 |         <tr>
198 |             <td>Description</td>
199 |             <td>Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.</td>
200 |         </tr>
201 |         <tr>
202 |             <td>Attribute</td>
203 |             <td><code>cssClass</code></td>
204 |         </tr>
205 |         <tr>
206 |             <td>Type</td>
207 |             <td><code>string</code> | <code>string[]</code> | <code>undefined</code></td>
208 |         </tr>
209 |     </tbody>
210 |     <!-- slideOptions -->
211 |     <thead>
212 |         <tr>
213 |             <th colspan="2" align="left"><h3>scheme</h3></th>
214 |         </tr>
215 |     </thead>
216 |     <tbody>
217 |         <tr>
218 |             <td>Description</td>
219 |             <td>Sets the color scheme.</td>
220 |         </tr>
221 |         <tr>
222 |             <td>Attribute</td>
223 |             <td><code>scheme</code></td>
224 |         </tr>
225 |         <tr>
226 |             <td>Type</td>
227 |             <td><code>"auto"</code> | <code>"dark"</code> | <code>"light"</code> | <code>undefined</code></td>
228 |         </tr>
229 |         <tr>
230 |             <td>Default</td>
231 |             <td><code>"auto"</code></td>
232 |         </tr>
233 |     </tbody>
234 |     <!-- slideOptions -->
235 |     <thead>
236 |         <tr>
237 |             <th colspan="2" align="left"><h3>slideOptions</h3></th>
238 |         </tr>
239 |     </thead>
240 |     <tbody>
241 |         <tr>
242 |             <td>Description</td>
243 |             <td>Options to pass to the swiper instance. See <a>http://idangero.us/swiper/api/</a> for valid options.</td>
244 |         </tr>
245 |         <tr>
246 |             <td>Attribute</td>
247 |             <td><code>slideOptions</code></td>
248 |         </tr>
249 |         <tr>
250 |             <td>Type</td>
251 |             <td><code>object</code> | <code>undefined</code></td>
252 |         </tr>
253 |         <tr>
254 |             <td>Default</td>
255 |             <td><code>{ centeredSlides: true, passiveListeners: false, zoom: { enabled: true } }</code></td>
256 |         </tr>
257 |     </tbody>
258 |     <!-- src -->
259 |     <thead>
260 |         <tr>
261 |             <th colspan="2" align="left"><h3>src</h3></th>
262 |         </tr>
263 |     </thead>
264 |     <tbody>
265 |         <tr>
266 |             <td>Description</td>
267 |             <td>The image url. This attribute is mandatory for the <code>&lt;img&gt;</code> element.</td>
268 |         </tr>
269 |         <tr>
270 |             <td>Attribute</td>
271 |             <td><code>src</code></td>
272 |         </tr>
273 |         <tr>
274 |             <td>Type</td>
275 |             <td><code>string</code> | <code>undefined</code></td>
276 |         </tr>
277 |     </tbody>
278 |     <!-- srcFallback -->
279 |     <thead>
280 |         <tr>
281 |             <th colspan="2" align="left"><h3>srcFallback</h3></th>
282 |         </tr>
283 |     </thead>
284 |     <tbody>
285 |         <tr>
286 |             <td>Description</td>
287 |             <td>The image url to display an alternative image in case the original image could not be loaded. Similiar to <code>(error)="src=./assets/no-image.png"</code></td>
288 |         </tr>
289 |         <tr>
290 |             <td>Attribute</td>
291 |             <td><code>srcFallback</code></td>
292 |         </tr>
293 |         <tr>
294 |             <td>Type</td>
295 |             <td><code>string</code> | <code>undefined</code></td>
296 |         </tr>
297 |     </tbody>
298 |     <!-- srcHighRes -->
299 |     <thead>
300 |         <tr>
301 |             <th colspan="2" align="left"><h3>srcHighRes</h3></th>
302 |         </tr>
303 |     </thead>
304 |     <tbody>
305 |         <tr>
306 |             <td>Description</td>
307 |             <td>The image url to display a high-resolution image instead of the original image when opening the viewer.</td>
308 |         </tr>
309 |         <tr>
310 |             <td>Attribute</td>
311 |             <td><code>srcHighRes</code></td>
312 |         </tr>
313 |         <tr>
314 |             <td>Type</td>
315 |             <td><code>string</code> | <code>undefined</code></td>
316 |         </tr>
317 |     </tbody>
318 |     <!-- swipeToClose -->
319 |     <thead>
320 |         <tr>
321 |             <th colspan="2" align="left"><h3>swipeToClose</h3></th>
322 |         </tr>
323 |     </thead>
324 |     <tbody>
325 |         <tr>
326 |             <td>Description</td>
327 |             <td>Swipe down to close the viewer.</td>
328 |         </tr>
329 |         <tr>
330 |             <td>Attribute</td>
331 |             <td><code>swipeToClose</code></td>
332 |         </tr>
333 |         <tr>
334 |             <td>Type</td>
335 |             <td><code>boolean</code> | <code>undefined</code></td>
336 |         </tr>
337 |         <tr>
338 |             <td>Default</td>
339 |             <td><code>true</code></td>
340 |         </tr>
341 |     </tbody>
342 |     <!-- text -->
343 |     <thead>
344 |         <tr>
345 |             <th colspan="2" align="left"><h3>text</h3></th>
346 |         </tr>
347 |     </thead>
348 |     <tbody>
349 |         <tr>
350 |             <td>Description</td>
351 |             <td>Sets the text in the footer of the viewer.</td>
352 |         </tr>
353 |         <tr>
354 |             <td>Attribute</td>
355 |             <td><code>text</code></td>
356 |         </tr>
357 |         <tr>
358 |             <td>Type</td>
359 |             <td><code>string</code> | <code>undefined</code></td>
360 |         </tr>
361 |     </tbody>
362 |     <!-- title -->
363 |     <thead>
364 |         <tr>
365 |             <th colspan="2" align="left"><h3>title</h3></th>
366 |         </tr>
367 |     </thead>
368 |     <tbody>
369 |         <tr>
370 |             <td>Description</td>
371 |             <td>Sets the title in the header of the viewer.</td>
372 |         </tr>
373 |         <tr>
374 |             <td>Attribute</td>
375 |             <td><code>title</code></td>
376 |         </tr>
377 |         <tr>
378 |             <td>Type</td>
379 |             <td><code>string</code> | <code>undefined</code></td>
380 |         </tr>
381 |     </tbody>
382 |     <!-- titleSize -->
383 |     <thead>
384 |         <tr>
385 |             <th colspan="2" align="left"><h3>titleSize</h3></th>
386 |         </tr>
387 |     </thead>
388 |     <tbody>
389 |         <tr>
390 |             <td>Description</td>
391 |             <td>The size of the title.</td>
392 |         </tr>
393 |         <tr>
394 |             <td>Attribute</td>
395 |             <td><code>titleSize</code></td>
396 |         </tr>
397 |         <tr>
398 |             <td>Type</td>
399 |             <td><code>"large"</code> | <code>"small"</code> | <code>undefined</code></td>
400 |         </tr>
401 |     </tbody>
402 | </table>
403 | 
404 | ## Workspace
405 | 
406 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.14.
407 | 
408 | ### Local Development
409 | 
410 | 1. Run the command to start the build every time a file change:
411 | 
412 |    ```bash
413 |    npm run build:watch
414 |    ```
415 | 
416 | 2. Run the command to create a local symlink and start a local dev server fo app dev/testing.
417 | 
418 |    ```bash
419 |    npm run ionic:serve
420 |    ```
421 | 
422 |    - [`npm link`](https://docs.npmjs.com/cli/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.
423 |    - 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.
424 |    - [`ionic serve`](https://ionicframework.com/docs/cli/commands/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.
425 | 
426 | ### Code scaffolding
427 | 
428 | 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`.
429 | 
430 | ### Build
431 | 
432 | 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.
433 | 
434 | > Check `package.json` for lifecycle events
435 | 
436 | ### Release & Publishing
437 | 
438 | 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](https://github.com/conventional-changelog/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.
439 | 
440 | > Check `package.json` and `.release-it.json` for lifecycle events
441 | 
442 | 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.
443 | 
444 | ### Manual Publishing
445 | 
446 | 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`.
447 | 
448 | ### Running unit tests
449 | 
450 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
451 | 
452 | ### Running end-to-end tests
453 | 
454 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
455 | 
456 | ### Further help
457 | 
458 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
459 | 
460 | #### Committing
461 | 
462 | 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](https://github.com/commitizen/cz-cli) to generate our commits and husky to manage a Git commit-msg hook to validate the commit message.
463 | Further information: [How to automate versioning and publication of an npm package](https://itnext.io/how-to-automate-versioning-and-publication-of-an-npm-package-233e8757a526)
464 | 
465 | ## Author
466 | 
467 | **Simon Golms**
468 | 
469 | - Digital Card: `npx simongolms`
470 | - Github: [@simongolms](https://github.com/simongolms)
471 | - Website: gol.ms
472 | 
473 | ## Contributing
474 | 
475 | Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/simongolms/ngx-ionic-image-viewer/issues).
476 | 
477 | ## Show your support
478 | 
479 | Give a ⭐️ if this project helped you!
480 | 
481 | ## License
482 | 
483 | Copyright © 2019 [Simon Golms](https://github.com/simongolms).<br />
484 | This project is [MIT](https://github.com/simongolms/ngx-ionic-image-viewer/blob/master/LICENSE) licensed.
485 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage/ngx-ionic-image-viewer'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/ng-package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
 3 |   "dest": "../../dist/ngx-ionic-image-viewer",
 4 |   "lib": {
 5 |     "entryFile": "src/public-api.ts",
 6 |     "umdModuleIds": {
 7 |       "@ionic/angular": "@ionic/angular"
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-ionic-image-viewer",
 3 |   "version": "0.7.5",
 4 |   "description": "An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.",
 5 |   "keywords": [
 6 |     "ionic",
 7 |     "ionic4",
 8 |     "angular",
 9 |     "angular8",
10 |     "ngx",
11 |     "module",
12 |     "component",
13 |     "directive",
14 |     "ion",
15 |     "image",
16 |     "img",
17 |     "photo",
18 |     "thumbnail",
19 |     "view",
20 |     "viewer",
21 |     "show",
22 |     "gallery",
23 |     "zoom",
24 |     "modal",
25 |     "slider"
26 |   ],
27 |   "homepage": "https://github.com/simongolms/ngx-ionic-image-viewer.git",
28 |   "license": "MIT",
29 |   "author": {
30 |     "name": "Simon Golms",
31 |     "email": "development@gol.ms",
32 |     "url": "https://gol.ms"
33 |   },
34 |   "repository": {
35 |     "type": "git",
36 |     "url": "https://github.com/simongolms/ngx-ionic-image-viewer.git"
37 |   },
38 |   "bugs": {
39 |     "url": "https://github.com/simongolms/ngx-ionic-image-viewer/issues"
40 |   },
41 |   "peerDependencies": {
42 |     "@angular/common": ">=8.2.13",
43 |     "@angular/core": ">=8.2.13",
44 |     "@ionic/angular": ">=4.0.0"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.component.html:
--------------------------------------------------------------------------------
1 | <img
2 |   [alt]="alt"
3 |   [src]="src"
4 |   (click)="viewImage(src, srcFallback, srcHighRes, title, titleSize, text, scheme, slideOptions, swipeToClose)"
5 |   (error)="src = srcFallback"
6 | />
7 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NgxIonicImageViewerComponent } from './ngx-ionic-image-viewer.component';
 4 | 
 5 | describe('NgxIonicImageViewerComponent', () => {
 6 |   let component: NgxIonicImageViewerComponent;
 7 |   let fixture: ComponentFixture<NgxIonicImageViewerComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ NgxIonicImageViewerComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(NgxIonicImageViewerComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.component.ts:
--------------------------------------------------------------------------------
 1 | // tslint:disable-next-line
 2 | 
 3 | import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 4 | import { ModalController } from '@ionic/angular';
 5 | import { ViewerModalComponent } from './viewer-modal/viewer-modal.component';
 6 | 
 7 | @Component({
 8 |   selector: 'ion-img-viewer',
 9 |   templateUrl: './ngx-ionic-image-viewer.component.html',
10 |   styles: [
11 |     `
12 |       :host {
13 |         display: block;
14 |       }
15 |     `
16 |   ],
17 |   encapsulation: ViewEncapsulation.Emulated
18 | })
19 | export class NgxIonicImageViewerComponent implements OnInit {
20 |   @Input() alt?: string;
21 |   @Input() cssClass?: string | string[];
22 |   @Input() scheme?: string;
23 |   @Input() slideOptions?: object;
24 |   @Input() src: string;
25 |   @Input() srcFallback?: string;
26 |   @Input() srcHighRes?: string;
27 |   @Input() swipeToClose?: boolean;
28 |   @Input() text?: string;
29 |   @Input() title?: string;
30 |   @Input() titleSize?: string;
31 | 
32 |   constructor(public modalController: ModalController) {}
33 | 
34 |   async viewImage(
35 |     src: string,
36 |     srcFallback: string = '',
37 |     srcHighRes: string = '',
38 |     title: string = '',
39 |     titleSize: string = '',
40 |     text: string = '',
41 |     scheme: string = 'auto',
42 |     slideOptions: object = {},
43 |     swipeToClose: boolean = true
44 |   ) {
45 |     const modal = await this.modalController.create({
46 |       component: ViewerModalComponent,
47 |       componentProps: {
48 |         src,
49 |         srcFallback,
50 |         srcHighRes,
51 |         title,
52 |         titleSize,
53 |         text,
54 |         scheme,
55 |         slideOptions,
56 |         swipeToClose
57 |       },
58 |       cssClass: this.cssClass instanceof Array ? ['ion-img-viewer', ...this.cssClass] : ['ion-img-viewer', this.cssClass],
59 |       keyboardClose: true,
60 |       showBackdrop: true
61 |     });
62 | 
63 |     return await modal.present();
64 |   }
65 | 
66 |   ngOnInit() {}
67 | }
68 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.directive.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ElementRef, Renderer2 } from '@angular/core';
 2 | import { ModalController } from '@ionic/angular';
 3 | import { NgxIonicImageViewerDirective } from './ngx-ionic-image-viewer.directive';
 4 | 
 5 | describe('NgxIonicImageViewerDirective', () => {
 6 |   const el: ElementRef = null;
 7 |   const renderer: Renderer2 = null;
 8 |   const modalController: ModalController = null;
 9 | 
10 |   it('should create an instance', () => {
11 |     const directive = new NgxIonicImageViewerDirective(el, renderer, modalController);
12 |     expect(directive).toBeTruthy();
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef, HostListener, Input, Renderer2, OnInit } from '@angular/core';
 2 | import { ModalController } from '@ionic/angular';
 3 | import { ViewerModalComponent } from './viewer-modal/viewer-modal.component';
 4 | 
 5 | @Directive({
 6 |   selector: '[ionImgViewer]'
 7 | })
 8 | export class NgxIonicImageViewerDirective implements OnInit {
 9 |   constructor(private el: ElementRef, private renderer: Renderer2, public modalController: ModalController) {}
10 | 
11 |   @Input() cssClass?: string | string[];
12 |   @Input() scheme?: string;
13 |   @Input() slideOptions?: object;
14 |   @Input() src: string;
15 |   @Input() srcFallback?: string;
16 |   @Input() srcHighRes?: string;
17 |   @Input() swipeToClose?: boolean;
18 |   @Input() text?: string;
19 |   @Input() title?: string;
20 |   @Input() titleSize?: string;
21 | 
22 |   @HostListener('click') onClick() {
23 |     this.viewImage(
24 |       this.src,
25 |       this.srcFallback,
26 |       this.srcHighRes,
27 |       this.title,
28 |       this.titleSize,
29 |       this.text,
30 |       this.scheme,
31 |       this.slideOptions,
32 |       this.swipeToClose
33 |     );
34 |   }
35 | 
36 |   @HostListener('error', ['$event']) onError(error) {
37 |     if (this.src !== this.el.nativeElement.src) {
38 |       this.src = this.el.nativeElement.src;
39 |     }
40 |     if (this.srcFallback) {
41 |       this.renderer.setAttribute(this.el.nativeElement, 'src', this.srcFallback);
42 |     }
43 |   }
44 | 
45 |   ngOnInit() {
46 |     if (!this.el.nativeElement.hasAttribute('src')) {
47 |       this.renderer.setAttribute(this.el.nativeElement, 'src', this.src);
48 |     }
49 |   }
50 | 
51 |   async viewImage(
52 |     src: string,
53 |     srcFallback: string = '',
54 |     srcHighRes: string = '',
55 |     title: string = '',
56 |     titleSize: string = '',
57 |     text: string = '',
58 |     scheme: string = 'auto',
59 |     slideOptions: object = {},
60 |     swipeToClose: boolean = true
61 |   ) {
62 |     const modal = await this.modalController.create({
63 |       component: ViewerModalComponent,
64 |       componentProps: {
65 |         src,
66 |         srcFallback,
67 |         srcHighRes,
68 |         title,
69 |         titleSize,
70 |         text,
71 |         scheme,
72 |         slideOptions,
73 |         swipeToClose
74 |       },
75 |       cssClass: this.cssClass instanceof Array ? ['ion-img-viewer', ...this.cssClass] : ['ion-img-viewer', this.cssClass],
76 |       keyboardClose: true,
77 |       showBackdrop: true
78 |     });
79 | 
80 |     return await modal.present();
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.module.ts:
--------------------------------------------------------------------------------
 1 | import { CommonModule } from '@angular/common';
 2 | import { IonicModule } from '@ionic/angular';
 3 | import { NgModule } from '@angular/core';
 4 | import { NgxIonicImageViewerComponent } from './ngx-ionic-image-viewer.component';
 5 | import { NgxIonicImageViewerDirective } from './ngx-ionic-image-viewer.directive';
 6 | import { ViewerModalComponent } from './viewer-modal/viewer-modal.component';
 7 | 
 8 | @NgModule({
 9 |   declarations: [NgxIonicImageViewerComponent, NgxIonicImageViewerDirective, ViewerModalComponent],
10 |   imports: [CommonModule, IonicModule],
11 |   entryComponents: [ViewerModalComponent],
12 |   exports: [NgxIonicImageViewerComponent, NgxIonicImageViewerDirective, ViewerModalComponent]
13 | })
14 | export class NgxIonicImageViewerModule {}
15 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { NgxIonicImageViewerService } from './ngx-ionic-image-viewer.service';
 4 | 
 5 | describe('NgxIonicImageViewerService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: NgxIonicImageViewerService = TestBed.get(NgxIonicImageViewerService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/ngx-ionic-image-viewer.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | @Injectable({
 4 |   providedIn: 'root'
 5 | })
 6 | export class NgxIonicImageViewerService {
 7 | 
 8 |   constructor() { }
 9 | }
10 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.html:
--------------------------------------------------------------------------------
 1 | <ion-header [ngClass]="{ 'no-title': title.length <= 0 }">
 2 |   <ion-toolbar>
 3 |     <ion-buttons slot="primary">
 4 |       <ion-button (click)="closeModal()">
 5 |         <ion-icon slot="icon-only" name="close"></ion-icon>
 6 |       </ion-button>
 7 |     </ion-buttons>
 8 |     <ion-title [size]="titleSize">{{ title }}</ion-title>
 9 |   </ion-toolbar>
10 | </ion-header>
11 | 
12 | <ion-content [forceOverscroll]="false">
13 |   <ion-slides [options]="options" #sliderRef>
14 |     <!-- <ion-slide>
15 |       <div class="swiper-zoom-container">
16 |         <img [alt]="this.alt" [src]="this.src" (error)="onError($event)" />
17 |       </div>
18 |     </ion-slide> -->
19 |   </ion-slides>
20 | </ion-content>
21 | 
22 | <ion-footer [ngClass]="{ 'no-text': text.length <= 0 }">
23 |   <ion-toolbar class="ion-text-center">
24 |     <ion-text>{{ text }}</ion-text>
25 |   </ion-toolbar>
26 | </ion-footer>
27 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.scss:
--------------------------------------------------------------------------------
 1 | ion-slides {
 2 |   --height: 100%;
 3 |   height: 100%;
 4 | }
 5 | 
 6 | ion-toolbar {
 7 |   --border-style: none;
 8 |   --background: rgba(var(--ion-background-color-rgb, (255, 255, 255)), 0.6);
 9 |   background: rgba(var(--ion-background-color-rgb, (255, 255, 255)), 0.6);
10 | }
11 | 
12 | ion-header {
13 |   opacity: 1;
14 |   position: absolute;
15 |   &.no-title {
16 |     &:after {
17 |       content: none;
18 |     }
19 |     ion-toolbar {
20 |       --background: rgba(0, 0, 0, 0);
21 |       background: rgba(0, 0, 0, 0);
22 |     }
23 |   }
24 | }
25 | 
26 | ion-footer {
27 |   position: absolute;
28 |   bottom: 0;
29 |   &.no-text {
30 |     &:before {
31 |       content: none;
32 |     }
33 |     ion-toolbar {
34 |       --background: rgba(0, 0, 0, 0);
35 |       background: rgba(0, 0, 0, 0);
36 |     }
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ViewerModalComponent } from './viewer-modal.component';
 4 | 
 5 | describe('ViewerModalComponent', () => {
 6 |   let component: ViewerModalComponent;
 7 |   let fixture: ComponentFixture<ViewerModalComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ ViewerModalComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ViewerModalComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/lib/viewer-modal/viewer-modal.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit, Input, ViewChild } from '@angular/core';
  2 | import { ModalController, IonSlides } from '@ionic/angular';
  3 | 
  4 | @Component({
  5 |   selector: 'ion-viewer-modal',
  6 |   templateUrl: './viewer-modal.component.html',
  7 |   styleUrls: ['./viewer-modal.component.scss'],
  8 | })
  9 | export class ViewerModalComponent implements OnInit {
 10 |   // tslint:disable: no-inferrable-types
 11 |   @Input() alt?: string = '';
 12 |   @Input() scheme?: string = 'auto';
 13 |   @Input() slideOptions?: object = {};
 14 |   @Input() src: string;
 15 |   @Input() srcFallback?: string = '';
 16 |   @Input() srcHighRes?: string = '';
 17 |   @Input() swipeToClose?: boolean = true;
 18 |   @Input() text?: string = '';
 19 |   @Input() title?: string = '';
 20 |   @Input() titleSize?: string = '';
 21 |   // tslint:enable: no-inferrable-types
 22 | 
 23 |   defaultSlideOptions = {
 24 |     centeredSlides: true,
 25 |     passiveListeners: false,
 26 |     zoom: {
 27 |       enabled: true,
 28 |     },
 29 |   };
 30 | 
 31 |   options = {};
 32 | 
 33 |   swipeState = {
 34 |     phase: 'init',
 35 |     direction: 'none',
 36 |     swipeType: 'none',
 37 |     startX: 0,
 38 |     startY: 0,
 39 |     distance: 0,
 40 |     distanceX: 0,
 41 |     distanceY: 0,
 42 |     threshold: 150, // required min distance traveled to be considered swipe
 43 |     restraint: 100, // maximum distance allowed at the same time in perpendicular direction
 44 |     allowedTime: 500, // maximum time allowed to travel that distance
 45 |     elapsedTime: 0,
 46 |     startTime: 0,
 47 |   };
 48 | 
 49 |   @ViewChild('sliderRef', { static: true }) slides: IonSlides;
 50 | 
 51 |   constructor(private modalController: ModalController) {}
 52 | 
 53 |   async ngOnInit() {
 54 |     this.options = { ...this.defaultSlideOptions, ...this.slideOptions };
 55 |     this.src = this.srcHighRes || this.src;
 56 |     this.setStyle();
 57 |     this.setScheme(this.scheme);
 58 |     this.initSwipeToClose(this.swipeToClose);
 59 | 
 60 |     /**
 61 |      * Current Workaround
 62 |      * See reported bug: https://github.com/ionic-team/ionic/issues/19638#issuecomment-584828315
 63 |      * Hint: Comment in '<ion-slide>' in component
 64 |      */
 65 |     const swiper = await this.slides.getSwiper();
 66 |     swiper.appendSlide(`<ion-slide><img alt="${this.alt}" src="${this.src}" onerror="this.src='${this.srcFallback}'"/></ion-slide>`);
 67 |   }
 68 | 
 69 |   setStyle() {
 70 |     const el: HTMLElement = document.querySelector('.ion-img-viewer');
 71 |     el.style.setProperty('--height', '100%');
 72 |     el.style.setProperty('--width', '100%');
 73 |     el.style.setProperty('--border-radius', '0');
 74 |   }
 75 | 
 76 |   setScheme(scheme: string) {
 77 |     if (scheme === 'auto') {
 78 |       return;
 79 |     }
 80 | 
 81 |     const el: HTMLElement = document.querySelector('.ion-img-viewer');
 82 | 
 83 |     if (this.scheme === 'light') {
 84 |       el.style.setProperty('--ion-background-color', '#ffffff');
 85 |       el.style.setProperty('--ion-background-color-rgb', '255, 255, 255');
 86 |       el.style.setProperty('--ion-text-color', '#000');
 87 |       el.style.setProperty('--ion-text-color-rgb', '0,0,0');
 88 |     }
 89 | 
 90 |     if (this.scheme === 'dark') {
 91 |       if (el.classList.contains('ios')) {
 92 |         el.style.setProperty('--ion-background-color', '#000000');
 93 |         el.style.setProperty('--ion-background-color-rgb', '0, 0, 0');
 94 |       } else {
 95 |         el.style.setProperty('--ion-background-color', '#121212');
 96 |         el.style.setProperty('--ion-background-color-rgb', '18,18,18');
 97 |       }
 98 |       el.style.setProperty('--ion-text-color', '#ffffff');
 99 |       el.style.setProperty('--ion-text-color-rgb', '255,255,255');
100 |     }
101 |   }
102 | 
103 |   /**
104 |    * @see http://www.javascriptkit.com/javatutors/touchevents3.shtml
105 |    */
106 |   initSwipeToClose(isActive: boolean = true) {
107 |     if (!isActive) {
108 |       return;
109 |     }
110 | 
111 |     const el = document.querySelector('ion-modal');
112 |     el.addEventListener('mousedown', (event) => this.swipeStart(event), true);
113 |     el.addEventListener('mousemove', (event) => this.swipeMove(event), true);
114 |     el.addEventListener('mouseup', (event) => this.swipeEnd(event), true);
115 |     el.addEventListener('touchstart', (event) => this.swipeStart(event), true);
116 |     el.addEventListener('touchmove', (event) => this.swipeMove(event), true);
117 |     el.addEventListener('touchend', (event) => this.swipeEnd(event), true);
118 | 
119 |     this.modalController.getTop().then((modal) => {
120 |       modal.onWillDismiss().then(() => {
121 |         document.removeEventListener('mousedown', this.swipeStart, true);
122 |         document.removeEventListener('mousemove', this.swipeMove, true);
123 |         document.removeEventListener('mouseup', this.swipeMove, true);
124 |         document.removeEventListener('touchstart', this.swipeStart, true);
125 |         document.removeEventListener('touchmove', this.swipeMove, true);
126 |         document.removeEventListener('touchend', this.swipeMove, true);
127 |       });
128 |     });
129 |   }
130 | 
131 |   swipeStart(event) {
132 |     const { pageX, pageY } = event.type === 'touchstart' ? event.changedTouches[0] : event;
133 | 
134 |     this.swipeState = {
135 |       ...this.swipeState,
136 |       phase: 'start',
137 |       direction: 'none',
138 |       distance: 0,
139 |       startX: pageX,
140 |       startY: pageY,
141 |       startTime: new Date().getTime(),
142 |     };
143 |   }
144 | 
145 |   swipeMove(event) {
146 |     if (this.swipeState.phase === 'none') {
147 |       return;
148 |     }
149 |     const { pageX, pageY } = event.type === 'touchmove' ? event.changedTouches[0] : event;
150 |     // get horizontal dist traveled by finger while in contact with surface
151 |     const distanceX = pageX - this.swipeState.startX;
152 |     // get vertical dist traveled by finger while in contact with surface
153 |     const distanceY = pageY - this.swipeState.startY;
154 |     let direction;
155 |     let distance;
156 | 
157 |     if (Math.abs(distanceX) > Math.abs(distanceY)) {
158 |       // if distance traveled horizontally is greater than vertically, consider this a horizontal swipe
159 |       direction = distanceX < 0 ? 'left' : 'right';
160 |       distance = distanceX;
161 |     } else {
162 |       // else consider this a vertical swipe
163 |       direction = distanceY < 0 ? 'up' : 'down';
164 |       distance = distanceY;
165 |     }
166 |     this.swipeState = {
167 |       ...this.swipeState,
168 |       phase: 'move',
169 |       direction,
170 |       distance,
171 |       distanceX,
172 |       distanceY,
173 |     };
174 |     event.preventDefault();
175 |   }
176 | 
177 |   swipeEnd(event) {
178 |     if (this.swipeState.phase === 'none') {
179 |       return;
180 |     }
181 |     const { allowedTime, direction, restraint, startTime, threshold, distanceX, distanceY } = this.swipeState;
182 |     let swipeType;
183 | 
184 |     const elapsedTime = new Date().getTime() - startTime; // get time elapsed
185 |     if (elapsedTime <= allowedTime) {
186 |       // first condition for a swipe met
187 |       if (Math.abs(distanceX) >= threshold && Math.abs(distanceY) <= restraint) {
188 |         // 2nd condition for horizontal swipe met
189 |         swipeType = direction; // set swipeType to either "left" or "right"
190 |       } else if (Math.abs(distanceY) >= threshold && Math.abs(distanceX) <= restraint) {
191 |         // 2nd condition for vertical swipe met
192 |         swipeType = direction; // set swipeType to either "top" or "down"
193 |       }
194 |     }
195 | 
196 |     this.swipeState = {
197 |       ...this.swipeState,
198 |       phase: 'end',
199 |       swipeType,
200 |     };
201 | 
202 |     if (swipeType === 'down') {
203 |       return this.closeModal();
204 |     }
205 |   }
206 | 
207 |   closeModal() {
208 |     this.modalController.dismiss();
209 |   }
210 | }
211 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/public-api.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Public API Surface of ngx-ionic-image-viewer
 3 |  */
 4 | 
 5 | export * from './lib/ngx-ionic-image-viewer.service';
 6 | export * from './lib/ngx-ionic-image-viewer.component';
 7 | export * from './lib/ngx-ionic-image-viewer.directive';
 8 | export * from './lib/ngx-ionic-image-viewer.module';
 9 | export * from './lib/viewer-modal/viewer-modal.component';
10 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone';
 4 | import 'zone.js/dist/zone-testing';
 5 | import { getTestBed } from '@angular/core/testing';
 6 | import {
 7 |   BrowserDynamicTestingModule,
 8 |   platformBrowserDynamicTesting
 9 | } from '@angular/platform-browser-dynamic/testing';
10 | 
11 | declare const require: any;
12 | 
13 | // First, initialize the Angular testing environment.
14 | getTestBed().initTestEnvironment(
15 |   BrowserDynamicTestingModule,
16 |   platformBrowserDynamicTesting()
17 | );
18 | // Then we find all the tests.
19 | const context = require.context('./', true, /\.spec\.ts$/);
20 | // And load the modules.
21 | context.keys().map(context);
22 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "target": "es2015",
 6 |     "declaration": true,
 7 |     "inlineSources": true,
 8 |     "types": [],
 9 |     "lib": [
10 |       "dom",
11 |       "es2018"
12 |     ]
13 |   },
14 |   "angularCompilerOptions": {
15 |     "annotateForClosureCompiler": true,
16 |     "skipTemplateCodegen": true,
17 |     "strictMetadataEmit": true,
18 |     "fullTemplateTypeCheck": true,
19 |     "strictInjectionParameters": true,
20 |     "enableResourceInlining": true
21 |   },
22 |   "exclude": [
23 |     "src/test.ts",
24 |     "**/*.spec.ts"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/ngx-ionic-image-viewer/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "ion",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "ion",
14 |       "kebab-case"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ],
21 |     "paths": {
22 |       "ngx-ionic-image-viewer": [
23 |         "dist/ngx-ionic-image-viewer"
24 |       ],
25 |       "ngx-ionic-image-viewer/*": [
26 |         "dist/ngx-ionic-image-viewer/*"
27 |       ]
28 |     }
29 |   },
30 |   "angularCompilerOptions": {
31 |     "fullTemplateTypeCheck": true,
32 |     "strictInjectionParameters": true
33 |   }
34 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rulesDirectory": [
 4 |     "codelyzer"
 5 |   ],
 6 |   "rules": {
 7 |     "array-type": false,
 8 |     "arrow-parens": false,
 9 |     "deprecation": {
10 |       "severity": "warning"
11 |     },
12 |     "import-blacklist": [
13 |       true,
14 |       "rxjs/Rx"
15 |     ],
16 |     "interface-name": false,
17 |     "max-classes-per-file": false,
18 |     "max-line-length": [
19 |       true,
20 |       140
21 |     ],
22 |     "member-access": false,
23 |     "member-ordering": [
24 |       true,
25 |       {
26 |         "order": [
27 |           "static-field",
28 |           "instance-field",
29 |           "static-method",
30 |           "instance-method"
31 |         ]
32 |       }
33 |     ],
34 |     "no-consecutive-blank-lines": false,
35 |     "no-console": [
36 |       true,
37 |       "debug",
38 |       "info",
39 |       "time",
40 |       "timeEnd",
41 |       "trace"
42 |     ],
43 |     "no-empty": false,
44 |     "no-inferrable-types": [
45 |       true,
46 |       "ignore-params"
47 |     ],
48 |     "no-non-null-assertion": true,
49 |     "no-redundant-jsdoc": true,
50 |     "no-switch-case-fall-through": true,
51 |     "no-var-requires": false,
52 |     "object-literal-key-quotes": [
53 |       true,
54 |       "as-needed"
55 |     ],
56 |     "object-literal-sort-keys": false,
57 |     "ordered-imports": false,
58 |     "quotemark": [
59 |       true,
60 |       "single"
61 |     ],
62 |     "trailing-comma": false,
63 |     "component-class-suffix": true,
64 |     "contextual-lifecycle": true,
65 |     "directive-class-suffix": true,
66 |     "no-conflicting-lifecycle": true,
67 |     "no-host-metadata-property": true,
68 |     "no-input-rename": true,
69 |     "no-inputs-metadata-property": true,
70 |     "no-output-native": true,
71 |     "no-output-on-prefix": true,
72 |     "no-output-rename": true,
73 |     "no-outputs-metadata-property": true,
74 |     "template-banana-in-box": true,
75 |     "template-no-negated-async": true,
76 |     "use-lifecycle-interface": true,
77 |     "use-pipe-transform-interface": true
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------