mat-image-overlay-demo v15.1.4

Mat-Image-Overlay

An Angular Material based component that shows images in an overlay. The component is based on Rafasantos angular-material-image-overlay.

Demo

Try out the demo page.

Quick Start

Install the package:

npm install mat-image-overlay

Configure your angular application module (e.g: app.module.ts):

...
import { MatImageOverlayModule } from 'mat-image-overlay';

@NgModule({
  ...
  imports: [
    ...
    MatImageOverlayModule
  ]
})
export class AppModule { }

Define a function to open the images in your application component (e.g. app.component.ts)

images = [
    'https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA23618-1024x768.jpg',
    'https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA23761-800x600.jpg',
    'https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA23794-800x600.jpg',
    'https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA23214-1440x900.jpg'
];

constructor(private imageOverlay: MatImageOverlay) {
}

openImageOverlay(imageIndex?: number): void {
  const config = {
    images: this.images,
    startImageIndex: imageIndex,
    backdropClass: 'demo-backdrop-class'
  } as MatImageOverlayConfig;
  const imageOverlayRef = this.imageOverlay.open(config);
}

Open the overlay via a clickable element in your html template (e.g. app.component.html)

  <p>
    Click <a href="#" (click)="openImageOverlay()">here to open the overlay</a>
  </p>

Mat-Image-Overlay Demo

Demo project to show case how mat-image-overlay works.

git clone git@github.com:BePo65/mat-image-overlay.git
cd mat-image-overlay
npm start

Navigate to http://localhost:4200

API reference for Mat-Image-Overlay

Services

MatImageOverlay

Service to open Mat-Image-Overlay as modal overlay.

Properties | Name | Description | |---|---| | imageOverlayRef: MatImageOverlayRef | undefined | Reference of the opened image overlay. | | afterOpened: Subject<MatImaeOverlayRef> | Stream that gets notified when the image overlay has been opened. | | afterClosed: Subject<number> | Stream that gets notified when the image overlay has been closed. |

Methods | open | | |---|--| | Opens the image overlay. | | | Parameters | | | configMatImageOverlayConfig | Extra configuration options. | | Returns | | | MatImageOverlayRef | Reference to opened image overlay.

Interfaces

MatImageOverlayConfig

Configuration for opening a modal image overlay with the MatImageOverlay service.

Methods | urlForImage | | |---|--| | Gets the url for an image for one entry of images array. | This function is optional. The default implementation expects 'images' to be an array of strings. | | Parameters | | | imageData | Data for the image. | | baseUrl | Url fragment to be used for building the image url. Optional parameter. | | Returns | | | string | Url for the image to be displayed. |

Properties | Name | Description | |---|---| | images | Array of the images to display. | | baseUrl | Base url to be used by method 'urlForImage'.Optional parameter. | | startImageIndex | Index of the image to be displayed when initializing the image overlay.Optional parameter. | | backdropClass | CSS class to add to the backdrop, replacing the default backdrop css.Optional parameter. | | overlayButtonsStyle | Style of the buttons in the image overlay (using enum ElementDisplayStyle: never, onHover, always). Default value: onHover.Optional parameter. | | descriptionDisplayStyle | Style of the display of the image description in the image overlay (using enum ElementDisplayStyle: never, onHover, always). Default value: never. Requires a property named 'description' in data source.Optional parameter. | | descriptionDisplayPosition | Position of the display of the image description in the image overlay (using enum ElementDisplayPosition: left, right) when 'descriptionDisplayStyle' is set to 'onHover'. Default value: right. Requires a propert named 'description' in data source.Optional parameter. | | imageClickHandlerConfiguration | Object with arbitrary data as parameter of the 'imageClickHandler' method.Optional parameter. | | descriptionForImageConfiguration | Object with arbitrary data as parameter of the 'descriptionForImage' method.Optional parameter. |

Classes

MatImageOverlayRef

Reference to an image overlay opened via the MatImageOverlay service.

Methods | close | | |---|--| | Closes the image overlay. | | | Parameters | | | lastImageIndex | Index of the last image displayed in the overlay. |

MatImageOverlayComponent

Component used by MatImageOverlay to display the images in the modal overlay.

Methods | gotoNextImage | | |---|--| | Display the next image in the datasource. | |

API reference for Mat-Image-Overlay testing

import { MatImageOverlayHarness } from 'mat-image-overlay/testing';

Classes

MatImageOverlayHarness extends ContentContainerComponentHarness

Harness for interacting with a standard MatImageOverlay in tests.

Properties | Name | Description | |---|---| | static hostSelector: '.mat-image-overlay-container' | The selector for the host element of a MatImageOverlay instance. |

Methods | async overlayIsLoaded | | |---|--| | Gets a flag that is true, when the image overlay is visible. | | | Returns | | | Promise<boolean> | Flag that shows, if the image overlay is visible.

Development

Build the library and the demo project:

npm run build

Lint the library, the demo project with eslint and the scss files with stylelint:

npm run lint
npm run lint:scss

Test the library and the demo project:

npm run test

Run end to end tests for the demo project with cypress once (e.g. for CI scenarios):

npm run e2e

The script 'build:ghpages' is used by the github automation to publish the demo to github pages, when the master branch is updated.

Used assets

The component is based on Angular Material and uses Google Fonts and Google Material Icons. Both fonts are part of the project and not fetched via https.

Some special icons are stored in the code as strings representing the icons as svg graphics.

Version hint

• currently no hints (we are on Angular 15)

Contributing

Changelog

The project uses 'standard-version' to create the changelog. To enable this system, commit messages are linted before commits are executed by git.

The structure of commit messages is:

  <header>
  <BLANK LINE>
  <body>
  <BLANK LINE>
  <footer>

header

  <type>(<scope>): <short summary>

type and scope

• build: Changes that affect the build system or external dependencies (example scope: npm)
• docs: Documentation only changes
• feat: A new feature
• fix: A bug fix
• perf: A code change that improves performance
• refactor: A code change that neither fixes a bug nor adds a feature
• test: Adding missing tests or correcting existing tests (example scopes: demo, lib, e2e)

footer

  BREAKING CHANGE: ... (requires MAJOR in Semantic Versioning)

For details of the commit messages format see Contributing to Angular.

License

The code is released under the MIT license