Skip to content

Getting Started

Jump to bottom
Ronny Mikalsen edited this page Nov 9, 2023 · 47 revisions

Use it as an Angular Component or as a W3C Custom Elements

Angular

For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using Angular Material.

Step 1: Install Mime

npm install --save @nationallibraryofnorway/ngx-mime

Step 2: Install Angular Material

npm install --save @angular/material

Step 3: Install Angular CDK

npm install --save @angular/cdk

Step 4: Install Tailwind CSS

Get started with Tailwind CSS

Add library to your template paths in tailwind.config.js

content: [ './node_modules/@nationallibraryofnorway/ngx-mime/esm2020/**/*.mjs' ],

Step 5: Animations

Mime depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class LibraryAppModule { }

If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class LibraryAppModule { }

Step 6: Import the component modules

Import the NgModule for the component:

import { MimeModule } from '@nationallibraryofnorway/ngx-mime';

@NgModule({
  ...
  imports: [MimeModule],
  ...
})
export class LibraryAppModule { }

Be sure to import the Mime module after Angular's BrowserModule, as the import order matters for NgModules.

Step 7: Theming

Include the library theme in the app theme.scss

@import '~@nationallibraryofnorway/ngx-mime/ngx-mime.theme';
@include ngx-mime-theme($app-theme);

Step 8: Add Material Icons

load the icon font Material Design Icons in your index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Step 9: Add openseadragon

npm install --save openseadragon

Add "../node_modules/openseadragon/build/openseadragon/openseadragon.min.js" to the scripts tag in .angular-cli.json

Step 10: Add d3

npm install --save d3

Step 11: Add Mime Viewer to the component

<mime-viewer [manifestUri]="manifestUri" [canvasIndex]="canvasIndex" [q]="q" [config]="config" (viewerModeChanged)="onViewerModeChanged($event)"></mime-viewer>
Name Description
@Input()
manifestUri: string		 Must be the uri to your manifest file
@Input()
canvasIndex: number		 The initial canvas within the sequence to display
@Input()
q: string		 Content search query string
@Input()
config: MimeViewerConfig		 config
@Output()
viewerModeChanged: MimeViewerMode		 Emits when an page mode event is fired
@Output()
canvasChanged: number		 Emits when an canvas change event is fired
@Output()
qChanged: string		 Emits when an content search query change event is fired
@Output()
manifestChanged: MimeManifest		 Emits when an Manifest change event is fired

MimeViewerConfig

  • attributionDialogEnabled: boolean (true)
  • attributionDialogHideTimeout: number (-1 meaning no timeout)
  • initRecognizedTextContentMode: RecognizedTextMode (RecognizedTextMode.NONE)
  • navigationControlEnabled: boolean (true)
  • preserveZoomOnCanvasGroupChange: boolean (false)
  • startOnTopOnCanvasGroupChange: boolean (false)
  • initViewerMode: ViewerMode (ViewerMode.PAGE)
  • ignorePhysicalScale: boolean (false)
  • ajaxWithCredentials: boolean (false) - Whether to set the withCredentials XHR flag for AJAX requests to a IIIF Image Server
  • loadTilesWithAjax: boolean (false) - Whether to load tile data using AJAX requests to a IIIF Image Server
  • ajaxHeaders: any - A set of headers to include when making AJAX requests to a IIIF Image Server
  • crossOriginPolicy: string|boolean - Valid values are 'Anonymous', 'use-credentials', and false

Add headers

  public config = new MimeViewerConfig({
    loadTilesWithAjax: true,
    ajaxHeaders: {
      'Authentication': 'Bearer MY_AUTH_TOKEN'
    }
  });
<mime-viewer [manifestUri]="manifestUri" [config]="config"></mime-viewer>

Internationalization

The labels can be customized by providing your own instance of MimeViewerIntl. Or use one of the predefined:

  • MimeViewerIntlNoNb (Norwegian bokmål)
  • MimeViewerIntlLt (Lithuanian)

providers: [ { provide: MimeViewerIntl, useClass: MimeViewerIntlNoNb } ],

Appendix: Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add @nationallibraryofnorway/ngx-mime to the SystemJS configuration:

System.config({
  // existing configuration options
  map: {
    // ...
    '@nationallibraryofnorway/ngx-mime': 'npm:@nationallibraryofnorway/ngx-mime/bundles/ngx-mime.umd.js',
    // ...
  }
});

Custom elements (also called Web Components)

Add class ngx-mime-dark-theme to body for dark mode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>NGX-Mime</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link href="https://cdn.jsdelivr.net/gh/NationalLibraryOfNorway/ngx-mime@v15/dist/apps/elements/styles.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NationalLibraryOfNorway/ngx-mime@v15/dist/apps/elements/scripts.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NationalLibraryOfNorway/ngx-mime@v15/dist/apps/elements/polyfills.js"></script>
  </head>
  <body class="mat-app-background">
    <app-mime-viewer
      manifest-uri="https://api.nb.no/catalog/v1/iiif/42d565dec2ab22274992c1d0ad94560c/manifest"
      config='{"initViewerMode": 0}'
    ></app-mime-viewer>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NationalLibraryOfNorway/ngx-mime@v15/dist/apps/elements/main.js"></script>
  </body>
</html>
Clone this wiki locally