DokumentationenGoobi viewer Digests

6.6.2.1 Tests

Allgemein

Um bei Updates von CSS und Javascript Abhängigkeiten zu prüfen, ob weiterhin alles funktioniert sind diese mit entsprechenden Hinweisen auf dieser Seite aufgelistet.

CSS

Bootstrap

Die folgende Datei wird in allen template*.html Dateien eingebunden:

  • bootstrap.custom.css

Der Goobi viewer nutzt eine angepasste Variante vom Bootstrap 4 CSS. Daher kann die Abhängigkeit nicht über npm aktualisiert werden.

Bootstrap ist für das grundsätzliche Styling und Layout zuständig und kann getestet werden, indem sichergestellt wird, dass die Datei geladen wird und das Styling im Backend stimmt.

Font Awesome

Die folgende Datei wird in allen template*.html eingebunden:

  • font-awesome.min.css

Der Goobi viewer benutzt die Version 4.7.0 da bei neueren Versionen die Icons vom Stil zu dick sind.

Font Awesome wird zur Darstellung von Icons im Frontend benutzt und kann geprüft werden, indem sichergestellt ist, dass zum Beispiel die Lupe im Facettierungswidget angezeigt wird

jQuery UI

jQuery UI ist in allen template*.html Dateien, bis auf templateMirador.html, eingebunden und wird für bestimmte UI Elemente eingesetzt wie zum Beispiel den Timematrix Slider. Sie kann mit einer visuellen Sicht- und Funktionalitätsprüfung des Timematix-Slider getestet werden.

Die Lib wird ebenfalls im Crowdsourcing Modul eingebunden.

Leaflet

Die folgenden Dateien werden von dem Goobi viewer verwendet. Alle vier aufgelisteten CSS Dateien sind in allen template*.html Dateien eingebunden.

draw
├── draw
│   ├── images
│   │   ├── layers-2x.png
│   │   ├── layers.png
│   │   ├── marker-icon-2x.png
│   │   ├── marker-icon.png
│   │   ├── marker-shadow.png
│   │   ├── spritesheet-2x.png
│   │   ├── spritesheet.png
│   │   └── spritesheet.svg
│   └── leaflet.draw.css
├── extra-markers
│   └── leaflet.extra-markers.min.css
├── images
│   ├── layers-2x.png
│   ├── layers.png
│   ├── marker-icon-2x.png
│   ├── marker-icon.png
│   └── marker-shadow.png
├── img
│   ├── markers_default.png
│   ├── markers_default@2x.png
│   ├── markers_shadow.png
│   └── markers_shadow@2x.png
├── leaflet.css
└── markercluster
    └── MarkerCluster.css

Leaflet dient dem Styling von Kartenmaterial und kann geprüft werden in dem getestet wird, ob Karten prinzipiell gerendert werden.

Mapbox

Die folgende Datei wird in der template.html, templateAdmin.html und in der templateCrowdsourcing.html eingebunden.

  • geocoder/mapbox-gl-geocoder.css

  • mapbox-gl.css

Mapbox wird für die Darstellung und Interaktivität von Kartenmaterial verwendet. Für eine Prüfung ist ein valider Mapbox Token in der Konfigurationsdatei erforderlich. Anschließend kann zum Beispiel das Styling der Kartensuche geprüft werden. Sofern die Adresssuche in der Konfigurationsdatei aktiviert wurde, muss auch diese funktionieren.

Swagger

Die folgenden beiden Dateien sind direkt in der Core-Seite restApi.xhtml eingebunden:

  • swagger-ui.css

Swagger wird für das Styling der Dokumentation von der REST API verwendet. Für eine Prüfung reicht eine visuelle Sichtprüfung der REST API Dokumentation

Sweetalert 2

Die folgende Datei wird in der template.html, templateAdmin.html und in der templateCrowdsourcing.html eingebunden.

  • sweetalert2.min.css

Sweetalert dient der Anzeige von Benachrichtigungen. Zum Testen kann in den Benutzereinstellungen die E-Mailadresse geändert und dann der Fokus aus dem Feld entfernt werden.

Swiper

Die folgende Datei wird in der template.html und der templateAdmin.html eingebunden.

  • swiper-bundle.min.css

Swiper wird für das Styling von Slidern, die mit der Swiper API entwickelt wurden, verwendet. Zur Prüfung kann zum Beispiel das Styling des Sliders auf der Startseite angeschaut werden.

Javascript

Bootstrap

Die folgende Datei wird in allen template*.html Dateien eingebunden:

  • bootstrap.bundle.min.js

Bootstrap wird unter anderem für die Anzeige von Tooltips verwenden. Das kann zum Beispiel geprüft werden, in dem über die Badges im Widget "Zitieren und Nachnutzen" gehovert wird.

Clipboard

Die folgende Datei wird in allen template*.html Dateien eingebunden:

  • clipboard.min.js

Clipboard wird verwendet, um Inhalte per Klick in die Zwischenablage zu kopieren. Zum Prüfen kann zum Beispiel im Widget "Zitieren und Nachnutzen" auf , das Badge "IIIF Manifest" geklickt und der Inhalt der Zwischenablage danach betrachtet werden.

hc-sticky

Die folgende Datei wird in der templateAdmin.html und der templateArchives.html eingebunden:

  • hc-sticky.js

hc-sticky wird verwendet, um DOM-Elemente fixieren und zum Beispiel nur in der Sidebar zu scrollen. Getestet werden kann die Funktionalität zum Beispiel mit einem kleineren Bildschirmfenster im Admin-Bereich. Das blaue Menü rechts sollte fixiert sein, während der Content Bereich weiterhin scrollbar ist.

jqPlot

Die folgende Datei ist direkt in der Core Seite statistics.xhtml eingebunden:

  • jquery.jqplot.min.js

Es wird hier eine Vielzahl von Plugins genutzt. Die Plugins werden nicht über npm aktualisiert. Ein manueller Download ist an dieser Stelle möglich.

jqPlot wird für die Darstellung von Diagrammen eingesetzt. Zum Testen kann die Statistikseite aufgerufen werden. Dort sollten die Graphen korrekt gerendert werden.

jQuery UI

jQuery UI wird unter anderem für das Autocomplete in der Suche, den DatePicker in den Crowdsourcing Kampagnen, den Zeitleisten Slider in der Timematrix und Rechts-nach-links Image Slider verwendet.

Es existieren drei Plugins, die im Verzeichnis jqueryUi/plugins liegen. Diese werden nicht aktualisiert. Zwei davon sind für die Funktion des recht-nach-links (rtl) Sliders. Dieser sollte nach einem Update getestet werde

Zur Prüfung können die oben verwendeten Funktionen genutzt werden. Der rtl-Slider zum Beispiel in dem die Sprache auf hebräisch oder arabisch gestellt und der Slider dann visuell geprüft wird.

Die Lib wird ebenfalls im Crowdsourcing Modul eingebunden.

Leaflet

Die folgenden Dateien werden von dem Goobi viewer verwendet. Alle vier aufgelisteten Javascript Dateien sind in allen template*.html Dateien eingebunden.

leaflet
├── LICENSE
├── draw
│   └── leaflet.draw.js
├── extra-markers
│   ├── LICENSE
│   ├── leaflet.extra-markers.js
│   ├── leaflet.extra-markers.js.map
│   └── leaflet.extra-markers.min.js
├── leaflet.js
├── leaflet.js.map
└── markercluster
    ├── MIT-LICENCE.txt
    ├── leaflet.markercluster.js
    └── leaflet.markercluster.js.map

Leaflet dient dem Styling von Kartenmaterial und kann geprüft werden, indem getestet wird, ob Karten prinzipiell gerendert werden.

Mapbox

Die folgende Datei wird in der template.html, templateAdmin.html und in der templateCrowdsourcing.html eingebunden.

  • geocoder/mapbox-gl-geocoder.min.js

  • mapbox-gl.js

Mapbox wird für die Darstellung und Interaktivität von Kartenmaterial verwendet. Für eine Prüfung ist ein valider Mapbox Token in der Konfigurationsdatei erforderlich. Anschließend kann zum Beispiel das Styling der Kartensuche geprüft werden. Sofern die Adresssuche in der Konfigurationsdatei aktiviert wurde, muss auch diese funktionieren.

Masonry

Die folgenden Dateien sind direkt in der Seite cms_template_11_masonry.xhtl eingebunden:

  • masonry.min.js

  • imagesloaded.min.js

Masonry wird für die Darstellung von Bildern im dazugehörigen CMS-Template benutzt. Die Funktionalität kann getestet werden, indem eine entsprechende CMS-Seite angelegt und anschließend Bilder und Captions visuell geprüft werden.

Mirador

  • mirador.min.js

  • mirador.min.js.LICENSE.txt

  • mirador.min.js.map

Der Mirador wird für die Vergleichsansichten von Werken benutzt. Er kann getestet werden, indem zum Beispiel in den Suchtreffern zwei Werke zur Merkliste hinzugefügt und danach die Vergleichsansicht über die Session-Merkliste aufgerufen wird.

Q-Promises

Die folgende Datei wird in allen template*.html Dateien eingebunden:

  • q.min.js

Q-Promises stammt aus der Zeit als native Promises noch nicht "production ready" waren. Genutzt wird die Abhängigkeit unter anderem in der Bildanzeige. Zum Testen eine Suche durchführen und ein Werk öffnen.

OpenSeadragon

Der Goobi viewer benutzt eine OpenSeadragon Version, die nicht mit den offiziellen Releases kompatibel ist. Daher wird die Abhängigkeit nicht mit npm verwaltet.

OpenSeadragon wird für die Bildanzeige verwendet. Zum initialen Testen reicht es, ein Werk auszuwählen und zu prüfen ob Bilder angezeigt werden. Weiter sollten Dinge wie das Hervorheben von Suchtreffern im Bild und die Anzeige von Kästen um Annotationen oder Strukturelementen in Zusammenhang mit Zoom und Rotation geprüft werden.

PDF.js

  • pdf.js

  • pdf.js.map

  • pdf.min.js

  • pdf.worker.js

  • pdf.worker.min.js

PDF.js wird für die Darstellung von PDF-Dokumenten auf CMS-Seiten verwendet.

Die installierte Version ist nicht bekannt. Es existiert individueller Code um die PDF-Seiten im Frontend untereinander darzustellen. Dieser funktioniert nicht mit einer aktuellen Version. Deswegen wird die Abhängigkeit nicht mit npm verwaltet.

Zum Testen muss eine CMS-Seite angelegt und ein PDF eingebettet werden:

  • Im Admin-Bereich anmelden

  • Ein Werk in der Werksansicht öffnen

  • Im Widget "Aktionen" den Punkt Verknüpfte CMS-Seite hinzufügen anklicken

  • Den Button Datei auswählen anklicken

  • Ein PDF Dokument hinzufügen

  • Prüfen, ob Haken bei Erlaubte URL-Parametergesetzt ist

  • Prüfen, ob im Feld Verknüpftes Werk etwas eingetragen ist

  • In der Werksansicht selbst sollte sich nun im Ansichten-Widget jetzt folgender Punkt befinden: Wissenschaftliche Bearbeitung

jquery.aRSSFeed.js + jquery.jfeed.js

Die Abhängigkeit wird für die Darstellung von RSS-Feeds verwendet. Zum Prüfen kann zum Beispiel die Startseite geöffnet und geprüft werden, ob in dem RSS-Widget Inhalte angezeigt werden.

Die Abhängigkeit wird nicht via npm verwaltet.

rxjs (reactiveX)

Die folgenden Dateien werden in allen template*.html Dateien eingebunden:

  • rxjs.umd.min.js

  • rxjs.umd.min.js.map

reactiveX wird zum Beispiel in der Bildanzeige verwedet. Zum Prüfen reicht es, ein Werk in der Bildanzeige zu öffnen.

RiotJS

Die folgenden Dateien sind in allen template*.html Dateien, bis auf templateMirador.html, eingebunden:

  • riot.min.js

  • riot+compiler.min.js

RiotJS wird verwendet um HTML dynamisch zu rendern. Eingesetzt wird es zum Beispiel für die Werkzeuge zur Bildmanipulation in der Werksansicht. Zum Testen kann das Werkzeug-Symbol oberhalb der Bildanzeige angeklickt und die Schieberegler bewegt werden.

Swagger

Die folgenden beiden Dateien sind direkt in der Core-Seite restApi.xhtml eingebunden.

  • swagger-ui-bundle.js

  • swagger-ui-bundle.js.map

Swagger wird für das Styling der Dokumentation von der REST API verwendet. Für eine Prüfung reicht eine visuelle Sichtprüfung der REST API Dokumentation.

Sweetalert 2

Die folgende Datei wird in der template.html, templateAdmin.html und in der templateCrowdsourcing.html eingebunden.

  • sweetalert2.min.js

Sweetalert dient der Anzeige von Benachrichtigungen. In der viewerJS.notifications.js wird geprüft welche Notification Library vorhanden ist. Zum Testen kann in den Benutzereinstellungen die E-Mailadresse geändert und dann den Fokus aus dem Feld entfernt werden.

Swiper

Die folgende Datei wird in der template.html und der templateAdmin.html eingebunden.

  • swiper-bundle.min.jscss

Swiper wird für das Styling von Slidern, die mit der Swiper API entwickelt wurden, verwendet. Zur Prüfung kann zum Beispiel das Styling des Sliders auf der Startseite angeschaut werden.

Three.js

three
|-- controls
    |-- OrbitControls.js
|-- dependencies
    |-- draco
        |-- gltf
          |-- draco_decoder.js
          |-- draco_decoder.wasm
          |-- draco_encoder.js
          |-- draco_wasm_wrapper.js
        |-- draco_decoder.js
        |-- draco_decoder.wasm
        |-- draco_encoder.js
        |-- draco_wasm_wrapper.js
        |-- README.md
    |-- inflate_LICENCE
    |-- inflate.min.js
|-- loaders
    |-- DRACOLoader.js
    |-- FBXLoader.js
    |-- GLTFLoader.js
    |-- MTLLoader.js
    |-- OBJLoader.js
    |-- PLYLoader.js
    |-- STLLoader.js
    |-- TDSLoader.js
|-- LICENSE
|-- three.min.js

Three.js wird zum Rendern von 3D-Objekten eingesetzt. Zum Prüfen kann zum Beispiel das folgende Werk geöffnet, auf die Seite 5 gewechselt und dort das 3D-Modell bewegt werden:

Für den FBXLoader wird die externe Abhängigkeit Inflate.min.js benötigt. Diese muss manuell aus dieser Quelle hinzugefügt werden: https://github.com/imaya/zlib.js

TinyMCE

├── icons
├── jquery.tinymce.min.js
├── langs
├── license.txt
├── plugins
├── skins
├── themes
└── tinymce.min.js

Es müssen Spracheinstellungen zur Verfügung gestellt werden. Diese befinden sich im Verzeichnis langs.

TinyMCE ist der Editor für RichText im Admin-Backend. Zum Prüfen der Funktionalität kann eine neue CMS-Seite angelegt und dann darin mit dem Text gearbeitet werden.

Previous6.6.2 CSS und Javascript

Last updated