Allgemein

Die Dateien auf die sich Änderungen beziehen sind in der Regel als Task-Liste visualisiert und beginnen mit dem Themenamen. In dieser Anleitung wurde dafür boilerplate/ gewählt und muss an das entsprechende Theme angepasst werden.

21.06

Veränderte Einbindung jQuery

Das vorher über Primfaces eingebundene jQuery muss in allen template*.html Dateien manuell an erster Stelle der Javascript libraries eingebunden werden, da Primfaces in dem Goobi viewer nicht mehr verwendet wird.

• boilerplate/template.html

• boilerplate/templateAdmin.html

• boilerplate/templateArchives.html

• boilerplate/templateBlank.html

• boilerplate/templateCrowdsourcing.html

• boilerplate/templateFullscreen.html

• boilerplate/templateMirador.html

<!-- ALT -->
<h:outputScript library="primefaces" name="/jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="/jquery/jquery-plugins.js" target="head" />
​
<!-- NEU -->
<!-- ADD THIS ABOVE ALL OTHER JS LIBS -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery.min.js?${navigationHelper.buildVersion}"></script>

Benachrichtigungen im Backend

In der Datei templateAdmin.html sind für die Einbindung von sweetalert2 zusätzliche CSS und Javascript Dateien zu ergänzen.

• /boilerplate/templateAdmin.html

<!-- CSS: Add this line -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
​
<!-- JS: Add this line -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>

Update CMS-Templates für die Methode currentPage

Bei allen CMS-Template xhtml Dateien muss folgender String ersetzt werden:

<!-- ALT -->
#{navigationHelper.setCurrentPage(cmsBean.currentPage.title, false, true, true)}
​
<!-- ODER ALT -->
#{navigationHelper.setCurrentPage(cmsBean.currentPage.menuTitle, false, true, true)}
​
<!-- NEU-->
#{navigationHelper.setCurrentPage(cmsBean.currentPage)}

Änderung der Methode currentPage

Die Methode zur Kennzeichnung der aktuellen Seite wurde angepasst. Es werden nun nicht mehr veränderliche Texteinträge zur Identifikation der CMS Seiten herangezogen, sondern festbleibende IDs. Ist eine CMS Seite als Statischen Seite zugeordnet, wird dieser stattdessen ein fester String zugeordnet (zum Beispiel "index" für die Startseite - Meldung in der Browserkonsole beachten). Themes sollten daher nach folgendem Eintrag durchsucht werden:

#{navigationHelper.currentPage

<!-- BEISPIELE -->
<ui:fragment rendered="#{navigationHelper.currentPage == 'cms_0005'}">
   <div class="page-header__element">content</div>
</ui:fragment>
​
<ui:fragment rendered="#{navigationHelper.currentPage == 'index'}">
   <div class="page-header__element">content</div>
</ui:fragment>

Verändertes Styling Widget Geofacetting & Kartenoverlay

Aufbau und Funktionalität des Widgets wurden verändert und erweitert. Zudem sollte der Vollbildmodus (Karte) für die Facettierung über das Widget auf sein Styling geprüft werden.

• /boilerplate/css/less/widget/widgetGeoFacetting.less

• /boilerplate/css/less/constructor.less

Änderungen an der pom.xml

Damit keine unnötigen Dateien mit in die kompilierte viewer.war Datei übernommen werden, muss der Ordner docker excluded werden:

<!-- ALT -->
<excludes>MANIFEST.MF,**/pom.*,install/</excludes>
<!-- NEU -->
<excludes>MANIFEST.MF,**/pom.*,install/,docker/</excludes>

Anpassung der theme-url-mappings.xml

Wenn ein Werk ohne Angabe der Seitenzahl aufgerufen wird, dann soll immer das erste Bild geladen werden. Dafür sind Anpassungen in der theme-url-mappings.xml zu prüfen.

• boilerplate/theme-url-mappings.xml

Sofern in dieser Datei ein Mapping für eines der folgenden ids existiert, dann ist die unten stehende Zeile zu ergänzen:

• <url-mapping id="image1">

• <url-mapping id="object1">

• <url-mapping id="fulltext1">

• <url-mapping id="fullscreen1">

Zu ergänzende Zeile:

<!-- NEW LINE -->
<action onPostback="false">#{activeDocumentBean.setImageToShow('1')}</action>
​
<!-- FULL EXAMPLE -->
<url-mapping id="image1">
    <pattern value="/image/#{pi:activeDocumentBean.persistentIdentifier}/" />
    <view-id value="/viewObject.xhtml" />
    <!-- LINE ADDED HERE -->
    <action onPostback="false">#{activeDocumentBean.setImageToShow('1')}</action>
    <action onPostback="false">#{activeDocumentBean.open}</action>
</url-mapping>

Änderung an der Navigation

​Die Navigation kann nun mehrfach eingebunden werden. Deswegen wird ihre ID in der Core-Komponente nun dynamisch vergeben: ​

<!-- ALT -->
<nav id="navigation" class="navigation" aria-label="#{msg.aria_label__nav_main}">
​
<!-- NEU -->
<nav id="#{cc.clientId}" class="navigation" aria-label="#{msg.aria_label__nav_main}">

​Entsprechend sollte das Styling der Navigation überprüft werden. Außerdem muss eventuell theme-spezifisches Javascript angepasst werden, wenn die ID als Selektor benutzt wird: ​

• /boilerplate/css/less/components/navigation.less

• /boilerplate/javascript/dev/custom.js

Anpassung Sprachumschalter

Die Standardparameter der changeLocal Komponente wurden abgeändert. Im Standard wird nun keine Flagge mehr angezeigt (neuer Default: showFlags="false"), weswegen Themes auf die korrekte Funktionalität des Sprachumschalters zu prüfen sind. Um beispielsweise einen Sprachtoggle nur mit Flaggen und ohne Text anzuzeigen, ist folgender Code einzufügen:

<viewerComponent:changeLocal toggleLanguage="true" showFlags="true" showLabels="false" />

21.05

Entfernung themespezifischer CSS Dateien

In templateCrowdsourcing.html sowie templateArchives.html ist das themespezifische CSS zu entfernen. Sollen an diesen Templates individuelle Anpassungen stattfinden, ist es ratsam eine zusätzliche CSS Datei einzubinden und einen entsprechenden Vermerk in der README.md einzufügen.

• /boilerplate/templateCrowdsourcing.html

• /boilerplate/templateArchives.html

<!-- delete this line -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}" />

Styling Loginnavigation

Änderungen an der Loginnavigation (Dropdown für eingeloggte Nutzer) erfordern die Überprüfung des Stylings dieses Elements im Theme. Die Änderungen betreffen vor allem folgende Datei:

• /boilerplate/css/less/components/loginNavigation.less

Karten in Kampagnen

Für die erweiterte Kartenfunktionalität sind folgende Dateien in templateCrowdsourcing.html zu ergänzen.

• boilerplate/templateCrowdsourcing.html

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/geocoder/mapbox-gl-geocoder.css?${navigationHelper.buildVersion}"/>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/mapbox-gl.css?${navigationHelper.buildVersion}" />
​
<!-- JAVASCRIPT -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/geocoder/mapbox-gl-geocoder.min.js?${navigationHelper.buildVersion}"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/mapbox-gl.js?${navigationHelper.buildVersion}"></script>

Veränderter Methodenname in Suche

Der Methodenname #{searchBean.facets.currentCollection} wurde umbenannt und ist durch #{searchBean.facets.currentHierarchicalFacetString} zu ersetzen. Für die Prüfung im Theme am besten nach currentCollection Suchen.

README.md

Die README.md Datei wird zukünftig umstrukturiert und ist auf die oberste Ebene des Projektes zu verschieben. In der Datei sind allgemeine Informationen und Besonderheiten zu Seiten/Werkstypen, Einstellungen sowie themespezifischen Eigenschaften zu finden.

• goobi-viewer-theme-boilerplate/README.md

Suche auf Karte

In der Datei template.html sind zusätzliche CSS und Javascript Dateien zu ergänzen.

• /boilerplate/template.html

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/draw/leaflet.draw.css?${navigationHelper.buildVersion}" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/geocoder/mapbox-gl-geocoder.css?${navigationHelper.buildVersion}" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/mapbox-gl.css?${navigationHelper.buildVersion}" />
​
<!-- JAVASCRIPT -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/draw/leaflet.draw.js?${navigationHelper.buildVersion}"></script>	
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/geocoder/mapbox-gl-geocoder.min.js?${navigationHelper.buildVersion}"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/mapbox-gl.js?${navigationHelper.buildVersion}"></script>

Facettierung auf Karte

Das neue Widget für die Koordinatensuche muss dem Theme entsprechend angepasst werden. Folgende Dateien sind zu bearbeiten:

• /boilerplate/css/less/widget/widgetGeoFacetting.less

• /boilerplate/css/less/constructor.less

21.04

Admin-Topbar im Frontend

Um für Administratoren im Frontend die aus dem Backend bekannte blaue Topbar anzuzeigen kann in die Layout Datei die folgende Komponente eingebunden werden:

• boilerplate/includes/layout.xhtml

<!-- ADMIN TOPBAR FRONTEND -->
<viewerComponent:frontEndAdminTopBar />

Sofern das Theme beim Scrollen Sticky-Inhalte enthält, ist das Verhalten entsprechend zu prüfen.

Um die Topbar besser in das bestehende Design einzufügen, kann es notwendig sein bedingte CSS Klassen hinzuzufügen. Im folgenden Beispiel wird die CSS Klasse -adminActive nur für eingeloggte Administratoren ergänzt:

<div id="pageHeaderTop" class="page-header__top-wrapper #{userBean.admin ? '-adminActive':''}">
<div id="pageNavigation" class="page-navigation #{userBean.admin ? '-adminActive':''}">

Benachrichtigungen in den Kampagnen

Für Benachrichtigungen in den Kampagnen muss in dem Crowdsourcing Template die folgende Ergänzung vorgenommen werden:

• boilerplate/templateCrowdsourcing.html

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
​
<!-- Javascript -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>

Mirador Konfiguration

Im Zuge der Implementierung einer IIIF Presentation API 3.0.0 Unterstützung ist es notwendig in dem Javascript Objekt miradorConfigdie API Version festzulegen. Dafür muss die folgende Zeile hinzugefügt werden:

• /boilerplate/templateMirador.html

manifestEndpoint: "#{configurationBean.restApiUrlForIIIFPresention}/"

21.03

Chronology-Slider

Die Slider für Zeiträume unterstützen nun mit dem Attribut dir="rtl" die rechts-nach-links Leserichtung. Es sollte das Styling des Widgets Chronology sowie der Timematrix Seite geprüft werden. In dem Haupttemplate sind die folgenden Ergänzungen vorzunehmen:

• /boilerplate/template.html

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/jquery.ui.slider-rtl.css?${navigationHelper.buildVersion}" />
​
<!-- Javascript -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jqueryUi/plugins/jquery.ui.slider-1.12.1-rtl.js?${navigationHelper.buildVersion}"></script>

Ergänzungen für Bild-Slider

Für die neuen Bild-Slider sind die folgenden Ergänzungen in den Templates notwendig:

• boilerplate/template.html

• boilerplate/templateAdmin.html

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/swiper/swiper-bundle.min.css?${navigationHelper.buildVersion}" />
​
<!-- Javascript -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/swiper/swiper-bundle.min.js?${navigationHelper.buildVersion}"></script>

Weiter muss der folgende Block in der custom.js ergänzt werden:

• boilerplate/javascript/dev/custom.js

/*
 initSliders may be used to add new cms slider styles (swiper configuration objects) to the 
 list of availabe slider styles, or alter existing ones. See the commented out examples below for each use case
 This method MUST be called before document.ready for them to show up in the styles dropdown in the cms backend
*/
function initSliders() {
​
// EXAMPLE SLIDER
//  var sliderExampleConfig = {
//      maxSlides: 8,
//      timeout: 10000,
//      imageWidth: 1100,
//      imageHeight: 500,
//       swiperConfig: {
//            slidesPerView: 3,
//            spaceBetween: 30,
//            loop: true,
//            speed: 400,
//            pagination: {
//                el: '.slider-example__dots',
//                clickable: true
//            },
//            breakpoints: {
//                300: { 
//                   slidesPerView: 1.2,
//                },
//                600: {  
//                   slidesPerView: 2.3,
//                },
//                900: {
//                   slidesPerView: 3.5,   
//                } 
//            }
//      }
//  }
//  viewerJS.slider.set('example-slider', sliderExampleConfig);
}
initSliders();

Der Slider sollte über die Vorschau-Funktionalität im Backend geprüft werden.

Es wurde ein neues CMS Template für Slider ergänzt. Die zugehörige LESS Datei lautet:

• boilerplate/css/less/cms/templates/33_templateSlider.less

CSS Dateien aus Templates entfernen

Aufgrund von Überschneidungen mit der API Swagger Seite muss die Einbindung der themespezifische CSS Datei im templateBlank.htmlgelöscht werden. ​

• boilerplate/templateBlank.html

<!-- delete this line -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}

​In der templateMirador.html muss die themespezifische CSS Datei und die Einbindung der Goobi viewer Core JavaScript Datei entfernt werden:

• boilerplate/templateMirador.html

<!-- delete these lines -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/dist/viewer.min.css?${navigationHelper.buildVersion}" />
​
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}" />

​Optimalerweise einen Kommentar hinterlassen, dass die Dateien aufgrund von Überlappungen mit dem Styling der eigenständigen Seiten (Swagger API, Mirador) entfernt wurden.

Sprach-Toggle

Der Sprach-Toggle basiert auf einer neuen Logik und stellt jetzt die ersten beiden in der faces-config.xml als supported-locale konfigurierten Sprachen zur Verfügung. Falls ein Sprachtoggle im Theme genutzt wird, ist zu prüfen ob dieser korrekt eingestellt ist und funktioniert. Beispielhaft für Sprach-Toggle mit de und fr: ​

<locale-config>
    <default-locale>de</default-locale>
    <supported-locale>de</supported-locale>
    <supported-locale>fr</supported-locale>
</locale-config>

Widget User-Interactions

Das Widget User Interactions wurde erweitert und umgestaltet. Das Widget ist daher auf sein Styling zu prüfen und die LESS Datei entsprechend zu ergänzen/anzupassen. ​

• boilerplate/css/less/widgets/widgetUserInteractions.less

Grunt

Die Datei Gruntfile.js sollte auf die korrekte Einbindung von riot geprüft werden. Dafür am besten die Datei mithilfe des aktuellen boilerplate Themes abgleichen:

• riot task konfigurieren

• riot im watch task ergänzen

• riot task laden

21.02

Update auf Mirador 3

Die importieren Javascript Ressourcen müssen im Template angepasst werden. Dabei sind sämtliche Einträge vom Typ <script type="text/javascript".../> im <head/> des Dokumentes durch die folgenden Zeilen zu ersetzen:

• boilerplate/templateMirador.html

    <!-- FORCES PRIMEFACES TO INCLUDE JQUERY & JQUERY-UI -->
    <h:outputScript library="primefaces" name="/jquery/jquery.js" target="head" />
    <h:outputScript library="primefaces" name="/jquery/jquery-plugins.js" target="head" />
    
    <!-- JAVASCRIPT LIBS -->   
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/bs/bootstrap.bundle.min.js?${navigationHelper.buildVersion}"></script>
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/reactiveX/rxjs.umd.min.js?${navigationHelper.buildVersion}"></script>
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/q-promises/q.min.js?${navigationHelper.buildVersion}"></script>
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mirador/mirador.min.js?${navigationHelper.buildVersion}"></script>
	
	  <!-- JAVASCRIPT DIST FILES -->
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/dist/browsersupport.min.js?${navigationHelper.buildVersion}"></script>
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/dist/viewer.min.js?${navigationHelper.buildVersion}"></script>
​

In der selben Datei müssen alle <link type="text/css".../>Elemente entfernt werden, da dass Goobi viewer CSS für diese Seite nicht benötigt wird und das Styling des Mirador stört.

Anpassungen zur Leserichtung (right-to-left)

Der Goobi viewer ist nun in der Lage sein Layout für von rechts nach links ausgerichtete Sprachen anzupassen. Aktuell werden Hebräisch und Arabisch unterstützt. Das Layout wird gewechselt, sobald eine der beiden Sprachen über die Sprachauswahl gesetzt wird. Stark angepasste und individuelle Themes sowie CMS Templates unterstützen diese Funktion meist nicht vollständig ohne manuelle Korrekturen.

Es muss in allen template*.html Dateien im <html> Tag das Attribut dir="" in folgender Form gesetzt werden:

• boilerplate/template*.html

dir="#{navigationHelper.localeString eq 'ar' or navigationHelper.localeString eq 'iw' ? 'rtl' : 'ltr'}"

​ ​Styling neuer Widgets und Funktionen

Einige Widgets wurden erweitert und dessen Styling ist bei einem Update zu prüfen. Das Widget Usage wurde um eine kopierbare Zitierempfehlung und ein Popover für den Download von Bilddateien ergänzt. Das Widget Download hat einen einleitenden Infotext bekommen und im Widget User Interactions sind Funktionen zum Leeren des Caches hinzugekommen. Die Anpassungen betreffen die folgenden Dateien:

• boilerplate/css/less/widgets/widgetUsage.less

• boilerplate/css/less/widgets/widgetDownload.less

• boilerplate/css/less/widgets/widgetUserInteractions.less

21.01

Refaktorisierung Bookmarks, Imagecontrols und Widget Suchtreffernavigation

Es wurden Refaktorisierungsarbeiten an den Bookmarksdropdowns im eingeloggten sowie ausgeloggten Zustand durchgeführt. Das Styling der Menüs ist daher auf etwaige Änderungen zu überprüfen:

• boilerplate/css/less/widgets/widgetSearchResultNavigation.less

• boilerplate/css/less/components/loginNavigation.less

Es wurden geringfügige Änderungen am Styling des Widgets für die Suchtreffernavigation durchgeführt:

• boilerplate/css/less/widgets/widgetSearchResultNavigation.less

Mirador-Config erweitern

In templateMirador.html muss der folgende Abschnitt ersetzt werden:

• boilerplate/templateMirador.html

Alt:

var miradorConfig = {
            	root: "#{request.contextPath}",
            	userLoggedIn: #{userBean.loggedIn},
            };

Neu:

var miradorConfig = {
            	root: "#{request.contextPath}",
            	restEndpoint: "#{configurationBean.restApiUrl}",
            	userLoggedIn: #{userBean.loggedIn},
            };

CMS-Templates anpassen

Alle xhtml-Dateien für Theme-CMS-Templates müssen angepasst werden, also alle Dateien in

boilerplate/cms/templates/views/

In diesen Dateien müssen alle <ui:include> Elemente mit src="#{[...].getContent([...])}" ersetzt werden durch ein <h:outputText> Element mit escape="false" und einem value dessen Wert dem src-Attribut des zu ersetzenden <ui:include> entspricht. z.B.:

<ui:include src="#{cmsPage.getContent('text')}"/>
==>
<h:outputText escape="false" value="#{cmsPage.getContent('text')}"></h:outputText>

Zum einfachen Ersetzen kann man folgenden Regulären Ausdruck verwenden:

<ui:include src="#\{(\w+)\.getContent\('([\w\d-]+)'\)\}"\s*/>

Dieser muss ersetzt werden durch:

<h:outputText escape="false" value="#{$1.getContent('$2')}"></h:outputText>

Javascript in CMS-Templates hinzufügen

In allen Theme-CMS-Templates muss direkt hinter <ui:define name="content"> folgende Zeile eingefügt werden:

<ui:include src="/resources/cms/includes/cms_script.xhtml" />

OpenSearch Url anpassen

In den Dateien template.html, templateBlank.html und templateFullscreen.html gibt es folgende Header-Zeile:

<link rel="search" type="application/opensearchdescription+xml" title="#{configurationBean.name}" href="#{request.contextPath}/rest/opensearch/getxml/" />

Hier muss jeweils das Attribut href geändert werden zu

#{request.contextPath}/api/v1/opensearch/

4.13.1

In der customJS.xhtml muss die folgende Zeile ersetzt werden.

• boilerplate/includes/customJS.xhtml

Alt:

    var mapBoxToken = "#{configurationBean.mapBoxToken}";

Neu:

    viewerJS.mapBoxConfig = {
	        token : "#{configurationBean.mapBoxToken}",
	        user : "#{configurationBean.mapBoxUser}",
	        styleId : "#{configurationBean.mapBoxStyleId}",
	};

4.13.0

Anpassungen an Template Dateien

Es ist folgende Templatedatei für die Archivansicht neu hinzugekommen:

• boilerplate/templateArchives.html

Folgende Zeile ist aus allen template*.html Dateien zu entfernen:

• boilerplate/template.html

• boilerplate/templateAdmin.html

• boilerplate/templateArchives.html

• boilerplate/templateBlank.html

• boilerplate/templateCrowdsourcing.html

• boilerplate/templateFullscreen.html

• boilerplate/templateMirador.html

<meta name="public version" content="#{navigationHelper.publicVersion}" />

In der templateFullscreen.html ist eventuell folgende Zeile anzupassen:

Alt:

<h:panelGroup rendered="#{navigationHelper.subthemeSelected}">

Neu:

<h:panelGroup rendered="#{navigationHelper.subthemeSelected and navigationHelper.subThemeDiscriminatorValue!='-'}">

Anpassungen Optik Privacy Template

Das Template Privacy (/privacy) wurde um ein zusätzliches Feld ergänzt. Es ist möglicherweise die Optik anzupassen:

• boilerplate/css/less/cms/templates/18_templatePrivacy.less

Widget Annotationen

Das neue Widget muss ein dem bisherigen Design entsprechendes Styling bekommen:

• boilerplate/css/less/widgets/widgetAnnotations.less

• boilerplate/css/less/constructor.less

Searchbutton Icons (Lupe)

Der Searchbutton wurde angepasst und ist daher auf sein Styling zu überprüfen. Teilweise müssen Hintergrundgrafiken deaktiviert werden und das Icon in der Farbe angepasst werden. Das Icon taucht im Header, in der Sidebar sowie im Fullscreen Modus auf.

• boilerplate/css/less/widgets/widgetSearchField.less

• boilerplate/css/less/widgets/widgetSearchInCurrentItem.less

Initialisierung Javascript Admin Backend

Prüfung, ob das Javascript Modul für das Adminbackend korrekt initialisiert wird:

• boilerplate/includes/customJS.xhtml

// init admin module
if ( currentPage.indexOf( 'admin' ) > -1 ) {
    adminJS.init();        
}

Ordnung der Überschriften im Frontend

An mehreren Stellen wurden die Überschriften WCAG konform angepasst. Dadurch kann es nötig sein, das Styling anzupassen beziehungsweise CSS-Selektoren zu tauschen, zum Beispiel eine h4 gegen eine h3. Die folgenden Dateien sind entsprechend zu prüfen:

• boilerplate/css/less/components/title.less

• boilerplate/css/less/cms/templates/14_templateRSSFeed.less

• boilerplate/css/less/cms/templates/11_templateMasonry.less

• boilerplate/css/less/views/viewObjectFullscreen.less

• boilerplate/css/less/views/user/userBookmarks.less

• boilerplate/css/less/views/user/userBookmarkSingle.less

Nav-Element gegen div getauscht ​

In der browseElement.xhtml wurde das nav-Element mit der Klasse search-list__hit-docstruct gegen ein div-Element mit identischer Klasse getauscht. Das Styling sollte in der folgenden Datei geprüft werden:

• boilerplate/css/less/views/search/searchList.less

4.12.0

​Ergänzung Admin Template

Folgende Javascript Datei muss im Admin Template eingebunden werden:

• /boilerplate/templateAdmin.html

<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/hcsticky/hc-sticky.js?${navigationHelper.buildVersion}"></script>

Refaktorisierung Merklistenfunktion im Header

Der Merklistenbutton wird für ausgeloggte Nutzer jetzt nur eingeblendet, wenn mindestens ein Werk auf der Merkliste ist. Für eingeloggte Nutzer wurde dieser Bereich in das Nutzerdropdown verschoben. Es ist daher das Styling des Merklistendropdowns sowie der Nutzernavigation für eingeloggte Nutzer insgesamt zu prüfen.

• boilerplate/css/less/components/loginNavigation.less ​

Annotationen

Im Rahmen der umfassenden Änderungen der Annotationserstellung- und ansicht, sind die Annotationen in der Werkansicht nun in einem eigenen Widget in der Sidebar verfügbar. Dieses Widget muss auf sein Styling überprüft werden sowie eine entsprechende LESS Datei ergänzt werden:

• boilerplate/css/less/widgets/widgetAnnotations.less

4.11.0

Kartenfunktionalität in den Crowdsourcing Kampagnen

Folgende Javascript und CSS Dateien müssen im Crowdsourcing Template eingebunden werden:

• boilerplate/templateCrowdsourcing.html

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/leaflet.css?${navigationHelper.buildVersion}" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/extra-markers/leaflet.extra-markers.min.css?${navigationHelper.buildVersion}" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/markercluster/MarkerCluster.css?${navigationHelper.buildVersion}" />
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/leaflet.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/extra-markers/leaflet.extra-markers.min.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/markercluster/leaflet.markercluster.js"></script>

Seitentitel aus Konfigurationsdatei

Um einen einheitlichen Seitentitel auch bei neuen Seiten und zu gewährleisten wird der Seitentitel jetzt aus der config_viewer.xml gelesen. Dafür sind die <title></title> Einträge in den template*.html Dateien wie folgt anzupassen:

• /boilerplate/template.html

• /boilerplate/templateFullscreen.html

• /boilerplate/templateBlank.html

<title><h:outputText value="#{activeDocumentBean.titleBarLabel} - " rendered="#{activeDocumentBean.titleBarLabel != null}" />#{configurationBean.name}</title>

• /boilerplate/templateMirador.html

<title>#{msg.viewMirador} - #{configurationBean.name}</title>

• boilerplate/templateCrowdsourcing.html

<title>Crowdsourcing - #{configurationBean.name}</title>

Namespace, Login, Nutzungsbedingungen

Verschiedene Funktionen implizieren Anpassungen an der layout.xhtml die an dieser Stelle zusammengefasst wurden.

• boilerplate/includes/layout.xhtml

Für die Unterstützung von Datensätzen ohne Bilder auf den Merklisten ist bei ui:composition der folgende Namespace zu ergänzen:

xmlns:fn="http://java.sun.com/jsp/jstl/functions"

Der Login wurde grundlegend umgestaltet und um optionale Nutzungsbedingungen ergänzt. Dafür sind die folgenden Anpassungen notwendig:

Alt:

<ui:include src="/resources/includes/user/userLogin.xhtml" />

Neu:

<viewerComponent:modalUserLogin id="userLoginModal"/>
<viewerComponent:modalUserTerms id="userTermsModal"/>

Login

• boilerplate/css/less/components/loginNavigation.less

In der genannten Datei muss button[data-toggle="login"] zu button[data-toggle="modal"] geändert werden. Der Login Button muss auf korrektes Styling überprüft werden.

Optional: Impressum

Das Impressum kann jetzt im Backend bearbeitet werden. Dafür bei Bedarf in der layout.xhtml einen Link zum Impressum ergänzen, typischerweise im Footer:

<a href="#{request.contextPath}/imprint/">#{msg.imprint}</a>

4.10.0

Bookmarks für Objekte ohne Bild/Thumbnail

Der Button für Bookmarks für Werke ohne Bild/Thumbnail in der Suchtrefferliste sowie in der Metadatenansicht muss gestylt werden. Zu ergänzende Dateien:

• boilerplate/css/less/views/search/searchList.less

• boilerplate/css/less/views/viewMetadata.less

4.9.0

Caching von CSS und Javascript Dateien

Um das Neuladen von veränderten CSS und Javscript Dateien zu forcieren muss in den template*.html Dateien und in der customJS.xhtml bei den CSS und JS Ressourcen die aus dem /dist/ Ordner eingebunden sind der folgende Suffix angehängt werden:

?${navigationHelper.buildVersion}

Sofern ein ?${buildNumber} Eintrag bereits existiert ist dieser zu ersetzen. Die folgenden Dateien sind betroffen:

• css/dist/viewer.min.css

• themes/THEMENAME/dist/css/THEMENAME.css

• themes/THEMENAME/dist/css/SUBTHEMENAME.css

• javascript/dist/browsersupport.min.js

• javascript/dist/viewer.min.js

• javascript/dist/riot-tags.js

• javascript/dist/custom.min.js - customJS.xhtml

• javascript/dist/THEMENAME_tags.js - customJS.xhtml

Javascript für Geomap-Marker Clustering

Für das Clustering der Geomap Marker wird ein weiteres Leaflet Plugin eingesetzt. Dafür müssen die folgenden beiden Zeilen mit dem CSS und JS in die betroffenen template Dateien eingebunden werden:

• boilerplate/template.html

• boilerplate/templateAdmin.html

• boilerplate/templateBlank.html

	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/markercluster/MarkerCluster.css?${navigationHelper.buildVersion}" />
	<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/markercluster/leaflet.markercluster.js"></script>

4.8.0

Migration auf Bootstrap 4

In den template*.html Dateien müssen die CSS und Javascript Ressourcen angepasst werden. Dazu die alten Einträge löschen und die neuen hinzufügen:

Alt:

<link rel="stylesheet" href="#{request.contextPath}/resources/css/libs/bs/bootstrap.min.css" />
<script src="#{request.contextPath}/resources/javascript/libs/bs/bootstrap.min.js"></script>

Neu:

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/bs/bootstrap.custom.css" />
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/bs/bootstrap.bundle.min.js"></script>

Durch die neue Bootstrap Version können an verschiedenen Stellen Struktur- oder Stylingänderung notwendig werden. Insbesondere sind Struktur und Darstellung der Dateien inlucdes/layout.xhtml sowie die sonstigen überschriebenen Seiten unter urlMappings zu überprüfen.

Die Klasse .col-xs- existiert in Bootstrap 4 nicht mehr und sollte über Suchen & Ersetzen zu .col- geändert werden. Entsprechend müssen eventuell LESS und gegebenenfalls XHTML Dateien angepasst werden:

• boilerplate/css/less/views/search/searchListGrid.less

• boilerplate/css/less/views/search/searchListList.less

• boilerplate/css/less/widgets/widgetGeoLocations.less

• boilerplate/css/less/widgets/widgetSearchDrillDown.less

Die CSS Klasse .input-group-addon wird im Standard ebenso nicht mehr von Bootstrap verwendet. Inputfelder mit Aktionsbuttons sind daher auf ihre Optik zu überprüfen. Die neue Klasse für Inputfelder mit nachgelagerten Aktionsbuttons ist .input-group-append. Dateien, die möglicherweise angepasst werden müssen:

• boilerplate/css/less/views/fullscreen/fsSearchInCurrentItem.less

• boilerplate/css/less/search/search/searchAdvanced.less

• boilerplate/css/less/search/search/searchList.less

• boilerplate/css/less/widgets/widgetSearchfield.less

• boilerplate/css/less/widgets/widgetSearchInCurrentItem.less

Aus der CSS Klasse .label-default wird .badge:

• boilerplate/css/less/views/fullscreen/fsUsage.less

• boilerplate/css/less/widgets/widgetUsage.less

Aus der CSS Klasse .panel wird .card wobei die Darstellung der Elemente sich erheblich unterscheiden kann:

• boilerplate/css/less/cms/templates/15_templateStackedCollections.less

• boilerplate/css/less/cms/templates/21_templateFaq.less

• boilerplate/css/less/components/searchHelpText.less

• boilerplate/css/less/views/search/searchStandard.less

• boilerplate/css/less/views/viewDownload.less

Weiter kann es insbesondere bei folgenden Elementen zu Veränderungen kommen, abhängig vom Design des Themes:

• Bookmarks

• CMS Templates

• Image Controls

• Buttons

• Input Felder

4.7.0

Karten

Für die individuellen Marker auf Karten sowie der oEmbed Anzeige sind die folgenden Anpassungen notwendig.

Hinzufügen der neuen Template Datei templateBlank.html

• boilerplate/templateBlank.html

Hinzufügen des Overlay includes in die layout.xhtml nach dem userLogin:

• boilerplate/includes/layout.xhtml

layout.xhtml
<ui:include src="/resources/includes/overlay.xhtml" />

Hinzufügen der CSS und JS Resourcen für das Leaflet Extra Markers Plugin in die template Dateien:

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/extra-markers/leaflet.extra-markers.min.css?${buildNumber}" />
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/extra-markers/leaflet.extra-markers.min.js"></script>

• boilerplate/template.html

• boilerplate/templateAdmin.html

Widget für Serien

Das Widget für die Anzeige von Verlinkungen zu Serien / Konvoluten und mehrbändigen Werken wurde umbenannt und die LESS Struktur überarbeitet:

• boilerplate/css/less/widgets/widgetConvolutes.less

• boilerplate/css/less/widgets/widgetRelatedGroups.less

• boilerplate/css/less/constructor.less

4.6.0

HTML language attribute

Für eine bessere Sprachunterstützung sollte in den template*.html Dateien im <html>-Tag der folgende Eintrag ergänzt werden:

lang="#{navigationHelper.localeString}"

• /boilerplate/template.html

• /boilerplate/templateAdmin.html

• /boilerplate/templateCrowdsourcing.html

• /boilerplate/templateFullscreen.html

• /boilerplate/templateMirador.html

e-pub vs. born-digital

Um besser zwischen dem EPUB-Format für E-Bookreader und E-Publikationen unterscheiden zu können wurde das LESS Template sowie die darin enthaltene CSS-Klasse e-pub zu born-digital umbenannt:

• /boilerplate/css/less/components/ePub.less

• /boilerplate/css/less/components/bornDigital.less

• /boilerplate/css/less/constructor.less

Timematrix

Die Timematrix wurde refaktorisiert, nutzt nun einen riotJS Tag und folgt den Goobi viewer CSS Konventionen:

• /boilerplate/css/less/views/viewTimematrix.less

Subthemes

Der Standardwert für Subthemes hat sich verändert, war er früher leer, so ist es nun "-". Aus diesem Grund muss in der template.html und der templateFullscreen.html die rendered Bedingung angepasst werden:

rendered="#{navigationHelper.subthemeSelected and navigationHelper.subThemeDiscriminatorValue!='-'}"

• /boilerplate/template.html

• /boilerplate/templateFullscreen.html

Karten

Damit die Kartenunterstützung funktioniert, muss das CSS und JavaScript von Leaflet geladen werden. Dafür sind die folgenden beiden Zeilen in der template.html und der templateAdmin.html Dateien einzufügen:

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/leaflet.css?${buildNumber}" />
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/leaflet.js"></script>

• /boilerplate/template.html

• /boilerplate/templateAdmin.html

Eventuell vorhandene Referenzen zu dem alten Geokoordinaten-Widget in individuellen Seiten oder Templates müssen gelöscht werden. Der Code lautet:

<widgetComponent:widget_geoLocations widget="#{element}" />

​

CSS für 3D-Objekte

• /boilerplate/css/less/views/viewObject.less

4.5.0

MapBox Token

In der Datei customJS.xhtml folgende Zeile bei der Deklaration der Javascript-Variablen ergänzen:

var mapBoxToken = "#{configurationBean.mapBoxToken}";

4.4.0

Javascript Library Update in template-Dateien

In den template*.html Dateien die folgende Zeile ersetzen:

Alt:

<script src="#{request.contextPath}/resources/javascript/libs/reactiveX/rx.lite.min.js"></script>

Neu:

<script src="#{request.contextPath}/resources/javascript/libs/reactiveX/rxjs.umd.min.js"></script>

Aufgrund von Änderungen im Core ist es außerdem gut das Styling der folgenden Elemente zu prüfen:

• widget-chronology-slider (Facettierung nach Zeitraum in der Suche)

• currentSearchForm (Sucheingabefeld auf Suchtrefferliste bei öffnen von Sammlung)

Änderungen an der custom.js und customJS.xhtml:

Löschen des folgenden Blocks aus der custom.js:

custom.js
// init bookmarks if enabled
if ( bookshelvesEnabled ) {
    viewerJS.bookmarks.init( watchlistConfig );
}

Suchen und Ersetzen des folgenden Blocks in der customJS.xhtml.

Suchen:

customJS.xhtml
var bookshelvesEnabled = #{configurationBean.bookshelvesEnabled};
var watchlistConfig = {
    root: "#{request.contextPath}",
    msg: {
        resetBookmarkLists: "#{msg.bookmarkList_reset}",
        deleteBookmarkList: "#{msg.bookmarkList_delete}",
        sendBookmarkList: "#{msg.bookmarkList_session_mail_sendList}",
        searchInBookmarkList: "#{msg.action__search_in_bookmarks}",
        resetBookmarkListsConfirm: "#{msg.bookmarkList_resetConfirm}",
        noItemsAvailable: "#{msg.bookmarkList_noItemsAvailable}",
        selectBookmarkList: "#{msg.bookmarkList_selectBookmarkList}",
        addNewBookmarkList: "#{msg.bookmarkList_addNewBookmarkList}",
        openInMirador: "#{msg.bookmarkList_openMirador}",
        type_label: "#{msg.bookmarkList_type_label}",
        typeRecord: "#{msg.bookmarkList_typeRecord}",
        typePage: "#{msg.bookmarkList_typePage}"
    },
    userLoggedIn: userLoggedIn
};

Ersetzen:

customJS.xhtml
var bookmarksEnabled = #{configurationBean.bookmarksEnabled};
var rootURL = "#{request.contextPath}";
var restURL = "#{configurationBean.restApiUrl}";

Änderungen an LESS Templates:

• /boilerplate/css/less/constructor.less

  • -> build.less umbenennen zu constructor.less (falls Dateiname = build.less)

• /boilerplate/Gruntfile.js

  • Sofern die build.less umbenannt wurde, in der Gruntfile nach build.less suchen und durch constructor.less ersetzen

• -> Dateinamen aus der folgenden Auflistung umbenennen