2021

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.11

Themekonfiguration via viewer Backend

Es ist nun möglich grundsätzliche Einstellungen (Logo, Vollbildlogo, Favicon, Titel/Anzeigename) sowie Social Media Links und Footer Links über das Administratorenbackend des Viewers zu konfigurieren.

Logo & Name via Backend konfigurierbar machen

Um Logo und Namen des viewers über das viewer Backend einstellen und dynamisch zu laden können, ist folgender Block in der layout.xhtml zu ergänzen. Die Angaben nach dem Pfad bestimmten die Ausgabegröße des Bildes (Breite, Höhe).

boilerplate/includes/layout.xhtml

<!-- METHOD TO DYNAMICALLY LOAD THE LOGO AND LABEL/NAME -->
<a href="#{request.contextPath}/"> 
    <img src="#{adminThemesBean.getLogo(&quot;/images/template/customer-header-logo.png&quot;, 80, 53)}" alt="#{adminThemesBean.getThemeLabel(configurationBean.name)} Logo" />
    <span class="page-header__span">#{adminThemesBean.getThemeLabel(configurationBean.name)}</span>
</a>

Es ist nun möglich, Verlinkungen zu Social Media Profilen im viewer Backend einzutragen. Dafür können folgende Methoden verwendet werden.

boilerplate/includes/layout.xhtml

<!-- METHOD TO DYNAMICALLY INSERT SOCIAL MEDIA LINKS -->
<c:if test="#{adminThemesBean.hasSocialMediaUrl('facebook')}">
	<a href="https://facebook.com/#{adminThemesBean.currentTheme.getSocialMediaLink('facebook').linkUrl}"
		title="#{msg.social__follow_on_facebook}" data-toggle="tooltip"
		target="_blank" rel="noopener"
		aria-label="#{msg.social__follow_on_facebook}"> <span
		class="sr-only">#{msg.social__follow_on_slideshare}</span> <i
		class="fa fa-facebook" aria-hidden="true"></i>
	</a>
</c:if>

<c:if test="#{adminThemesBean.hasSocialMediaUrl('github')}">
	<a href="https://github.com/#{adminThemesBean.currentTheme.getSocialMediaLink('github').linkUrl}"
		title="#{msg.social__follow_on_github}" data-toggle="tooltip"
		target="_blank" rel="noopener"
		aria-label="#{msg.social__follow_on_github}"> <span
		class="sr-only">#{msg.social__follow_on_github}</span> <i
		class="fa fa-github" aria-hidden="true"></i>
	</a> 
</c:if>
	
<c:if test="#{adminThemesBean.hasSocialMediaUrl('twitter')}">
	<a href="https://twitter.com/#{adminThemesBean.currentTheme.getSocialMediaLink('twitter').linkUrl}"
		title="#{msg.social__follow_on_twitter}" data-toggle="tooltip"
		target="_blank" rel="noopener"
		aria-label="#{msg.social__follow_on_twitter}"> <span
		class="sr-only">#{msg.social__follow_on_twitter}</span> <i
		class="fa fa-twitter" aria-hidden="true"></i>
	</a>
	
</c:if>	

<c:if test="#{adminThemesBean.hasSocialMediaUrl('youtube')}">
	<a href="https://youtube.com/#{adminThemesBean.currentTheme.getSocialMediaLink('youtube').linkUrl}"
		title="#{msg.social__follow_on_youtube}" data-toggle="tooltip"
		target="_blank" rel="noopener"
		aria-label="#{msg.social__follow_on_youtube}"> <span
		class="sr-only">#{msg.social__follow_on_youtube}</span> <i
		class="fa fa-youtube" aria-hidden="true"></i>
	</a> 
	
</c:if>

<c:if test="#{adminThemesBean.hasSocialMediaUrl('slideshare')}">
	<a href="https://slideshare.net/#{adminThemesBean.currentTheme.getSocialMediaLink('slideshare').linkUrl}"
		title="#{msg.social__follow_on_slideshare}" data-toggle="tooltip"
		target="_blank" rel="noopener"
		aria-label="#{msg.social__follow_on_slideshare}"> <span
		class="sr-only">#{msg.social__follow_on_slideshare}</span> <i
		class="fa fa-slideshare" aria-hidden="true"></i>
	</a>
</c:if>

<c:if test="#{adminThemesBean.hasSocialMediaUrl('instagram')}">
	<a href="https://instagram.com/#{adminThemesBean.currentTheme.getSocialMediaLink('instagram').linkUrl}"
		title="#{msg.social__follow_on_instagram}" data-toggle="tooltip"
		target="_blank" rel="noopener"
		aria-label="#{msg.social__follow_on_slideshare}"> <span
		class="sr-only">#{msg.social__follow_on_slideshare}</span> <i
		class="fa fa-instagram" aria-hidden="true"></i>
	</a>
</c:if>

Footerlinks

Die Links Kontakt, Datenschutz und Impressum können ebenso über das Backend konfiguriert werden. Dafür sind folgende Methoden vorgesehen.

boilerplate/includes/layout.xhtml

<!-- METHODS TO INSERT FOOTER LINKS VIA VIEWER BACKEND -->
<!-- CHECK IF CONTACT HAS ENTRY -->
<c:if test="#{not empty adminThemesBean.currentTheme.getFooterLink('contact').linkUrl}">
	<a href="#{adminThemesBean.getFooterUrl('contact', 'default_contact_link')}">#{msg.contact}</a>
</c:if>

<!-- IF CONTACT IS EMPTY USE MODAL ON PAGE -->
<c:if test="#{empty adminThemesBean.currentTheme.getFooterLink('contact').linkUrl}">
	<button class="btn btn--icon" data-toggle="modal" data-target="#feedbackModal">#{msg.contact}</button>
</c:if>

<a href="#{adminThemesBean.getFooterUrl('privacy', request.contextPath.concat(&quot;/privacy&quot;))}">#{msg.privacy}</a>

<a href="#{adminThemesBean.getFooterUrl('legal', request.contextPath.concat(&quot;/imprint&quot;))}">#{msg.imprint}</a> <span>powered by</span>

Seitentitel und Favicon

Um das Favicon und Seitentitel zu laden, sind folgende Elemente in allen template*.html Dateien zu ersetzen.

boilerplate/template*.html

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

<!-- NEW TITLE LINE -->
<title><h:outputText value="#{activeDocumentBean.titleBarLabel} - " rendered="#{activeDocumentBean.titleBarLabel != null}" />#{adminThemesBean.getThemeLabel(configurationBean.name)}</title>

<!-- OLD FAVICON LINE -->
<link rel="shortcut icon" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/images/template/favicon.ico" />

<!-- NEW FAVICON LINE -->
<link rel="shortcut icon" href="#{adminThemesBean.getIcon(&quot;images/template/favicon.ico&quot;, 32, 32)}" />

Quick CSS

Es wurde ein Quick CSS Feld im Backend eingefügt. Um die dort eingetragenen CSS Eigenschaften in die Templates zu integrieren, ist folgender Block nach allen anderen CSS Dateien einzubauen.

boilerplate/template.html
boilerplate/templateArchives.html
boilerplate/templateBlank.html
boilerplate/templateCrowdsourcing.html
boilerplate/templateFullscreen.html

<!-- THIS HAS TO BE ADDED AS LAST CSS ENTRY (AFTER OTHER CSS FILES) -->
<!-- QUICK CSS IN VIEWER BACKEND - ADDS <style> NODE -->
<h:outputText escape="false" value="#{adminThemesBean.styleSheet}"/>

Breadcrumbs

Die Breadcrumbs wurden als Komponente integriert und es ist möglich, den vorangestellten Starttext mittels Attribut an- bzw. auszuschalten sowie den Startpunkt als Icon darzustellen. Dafür ist in allen betroffenen Dateien (zum Beispiel der layout.xhtml oder Custom CMS Seiten) nach folgendem Eintrag zu suchen und dieser zu ersetzen:

<!-- OLD BREADCRUMBS -->
<ui:insert name="breadcrumbs" />

<!-- NEW BREADCRUMBS -->
<!-- BREADCRUMBS -->
<viewerComponent:breadcrumbs showIcon="false" showStartText="true" />

Sweetalert2

Sweetalerts2 wird nun auch für das Frontend benutzt und ist in die template*.html Dateien einzubinden.

boilerplate/template.html
boilerplate/templateArchives.html
boilerplate/templateBlank.html
boilerplate/templateCrowdsourcing.html
boilerplate/templateFullscreen.html

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

Piwik

Eine Methode für das Piwik-Tracking wurde umbenannt und muss in folgenden Template Dateien verändert oder ergänzt werden:

boilerplate/template.html
boilerplate/templateArchives.html
boilerplate/templateBlank.html
boilerplate/templateCrowdsourcing.html
boilerplate/templateFullscreen.html

<!-- OLD -->
<!-- PIWIK -->
<ui:fragment rendered="#{configurationBean.piwikTracking}">
    <viewerComponent:piwikTracking piwikBaseURL="#{configurationBean.piwikBaseURL}" piwikSiteID="#{configurationBean.piwikSiteID}" />
</ui:fragment>

<!-- NEW -->
<!-- PIWIK -->
<ui:fragment rendered="#{configurationBean.piwikTrackingEnabled}">
    <viewerComponent:piwikTracking piwikBaseURL="#{configurationBean.piwikBaseURL}" piwikSiteID="#{configurationBean.piwikSiteID}" />
</ui:fragment>

21.10

Fokusring

Nutzer, die mit dem Keyboard navigieren, können nun fokussierte Elemente deutlicher sehen: Sie werden nun von einem Fokusring umrandet. Ausgelöst wird das Verhalten sobald die Tab-Taste gedrückt wird. Das Styling hierzu wird in dem Mixin .mx-focus-visible definiert und kann entsprechend überschrieben werden.

boilerplate/css/less/misc/mixins.less

Änderungen Archivansicht

Die Ansicht, die nur den alleinstehenden Archivbaum anzeigt, wurde zurückgebaut. Im Zuge der wachsenden Funktionalität wird nur noch die vollwertige Archivansicht abgebildet. Die Datei eadTree.less wird zu archivesTree.less umbenannt.

~~boilerplate/css/less/archives/eadTree.less~~
boilerplate/css/less/archives/archivesTree.less
boilerplate/css/less/constructor.less

XML Namespaces in Templates hinzufügen

Folgende xml Namespaces müssen in das <html> Element aller template*.html Dateien eingefügt werden:

xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"

Seitentitel für Archiv-Template

In der templateArchives.html wird das <title> Element ersetzt ersetzt, um die aktuelle Überschrift dem ausgewählten Archiv anzupassen:

boilerplate/templateArchives.html

<c:choose>
    <c:when test="#{archiveBean.databaseLoaded}">
        <title>#{archiveBean.archiveId} - #{configurationBean.name}</title>
    </c:when>
    <c:otherwise>
        <title>#{msg.archives__archiveViewHeading} - #{configurationBean.name}</title>
    </c:otherwise>
</c:choose>

JS + CSS Abhängigkeiten via NPM verwalten

Der Goobi viewer nutzt eine Vielzahl von externen Javascript und CSS Bibliotheken. Bis auf wenige Ausnamen können nun alle Abhängigkeiten mit npm geprüft und aktualisiert werden. Daraus ergibt sich, dass die Pfade zur jquery.min.js, jquery.ui.touch.punch.min.js und zu der font-awesome.min.css in allen Templates angepasst werden müssen:

boilerplate/template*.html

<!-- JQUERY ALT -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery.min.js?${navigationHelper.buildVersion}"></script>
<!-- JQUERY NEU -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery/jquery.min.js?${navigationHelper.buildVersion}"></script>


<!-- JQUERY UI TOUCH PUNCH ALT-->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jqueryUi/1.11.0/jquery.ui.touch-punch.min.js?${navigationHelper.buildVersion}"></script>
<!-- JQUERY UI TOUCH PUNCH NEU -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jqueryUi/plugins/jquery.ui.touch-punch.min.js?${navigationHelper.buildVersion}"></script>


<!-- FONTAWESOME ALT -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/font-awesome.min.css?${navigationHelper.buildVersion}" />
<!-- FONTAWESOME NEU -->
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/font-awesome/css/font-awesome.min.css?${navigationHelper.buildVersion}" />

Folgende libs sind ersatzlos entfallen. Uns ist nicht bekannt, dass diese in Themes genutzt werden:

overhang
oplTheme
socialshareprivacy.css
rxjs.all.min.js
rxjs.lite.min.js

Änderungen 3D Darstellung

Entfernung des x3dom Javascripts. Uns ist ein Einsatz dieser lib zur Darstellung von X3D Daten in Themes nicht bekannt.

21.09

Anpassung Metadatenansicht

Die Metadatenansicht der Werke wurde neu strukturiert und optisch verbessert. Die Ansicht sollte auf ihre Optik überprüft werden und es sollten hinzugekommene CSS Klassen ergänzt werden. Insbesondere ist auch der Punkt "Bibliografischen Daten" innerhalb der Vollbildansicht zu prüfen. Zu beachten ist, dass Metadaten auf unterschiedlichen Leveln liegen können und entsprechend eingerückt dargestellt werden.

boilerplate/css/less/views/viewMetadata.less
boilerplate/css/less/views/fullscreen/fsMetadata.less

Neuerungen Nutzerprofil

Die Einstellungen für Nutzer am eigenen Profil wurden grundlegend überarbeitet. Die Seite /user/ ist daher auf ihre Optik zu überprüfen. Die Klassen in der user.less sind entsprechend anzupassen.

boilerplate/css/less/views/user/user.less

Javascript + CSS im templateFullscreen

In der templateFullscreen.html sind folgende Javascript Dateien einzubinden.

boilerplate/templateFullscreen.html

<!-- NEU CSS -->
<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}" />
<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/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}" />

<!-- NEU JS -->
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/leaflet.js?${navigationHelper.buildVersion}"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/extra-markers/leaflet.extra-markers.min.js?${navigationHelper.buildVersion}"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/markercluster/leaflet.markercluster.js?${navigationHelper.buildVersion}"></script>
<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/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>

21.08

Umbenennung des Drilldown Widgets

Die Facettierung der Suche ist umbenannt worden und das Widget Custom Drilldown entfällt::

~~boilerplate/css/less/widgets/widgetSearchDrillDown.less~~
~~boilerplate/css/less/widgets/widgetCustomDrillDown.less~~
boilerplate/css/less/widgets/widgetSearchFacets.less
boilerplate/css/less/constructor.less

Außerdem sollte noch folgender Klassenname geändert werden:

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

/*** ALT ***/
.search-list__drilldown-heading

/*** NEU ***/
.search-list__facets-heading

Auch müssen eventuell vorhandene Referenzen zum Widget in Theme-Templates angepasst werden:

<!-- ALT -->
<widgetComponent:widget_searchDrilldown />

<!-- NEU -->
<widgetComponent:widget_searchFacets />

Die IDs der Feedbackform, die im Kontakt-Modal verwendet wird, sind geändert worden. Hintergrund ist, doppelte IDs in auf Seiten mit einer weiteren eingebetteten Kontaktform zu vermeiden. Das Styling der Form sollte daher überprüft werden:

boilerplate/less/componentes/modals.less

21.07

Anpassung Feedback-/Kontaktformular

Das neue Kontaktformular wird nun in einem gesonderten Modal geöffnet. Links die mit href="#feedback" deklariert sind, öffnen automatisch bei Klick das neue Modal. Dafür muss zunächst unter den userTerms folgender Eintrag hinzugefügt werden:

boilerplate/includes/layout.xhtml

<!-- ADD THIS BELOW OTHER MODALS -->
<viewerComponent:modalFeedbackForm id="feedbackModal" />

Zudem sollte geprüft werden, ob in der mobilen Ansicht andere Elemente das Formular überlappen.

Im Footer sollte der Link zum Kontaktformular angepasst werden und der Button auf sein Styling überprüft werden

<!-- ALT -->
<a href="#{request.contextPath}/feedback/">#{msg.feedbackLeaveFeedback}</a>

<!-- NEU -->
<button data-toggle="modal" data-target="#feedbackModal">#{msg.contact}</button>

Entfernung vom uglify task (grunt/npm)

Die Verkleinerung von Javascript Dateien per uglify ist obsolet und verursacht Probleme bei neueren Befehlen. Es ist daher Gruntfile.js entsprechend anzupassen. Der task uglify wird dabei durch concat ersetzt:

Gruntfile.js

/*** ALT ***/
uglify: {
    my_target: {
        files: {
            '<%=src.jsDistFolder %>custom.min.js': ['<%=src.jsDevFolder %>custom.js']
        }
    }
},

/*** NEU ***/
concat : {
    options : {
        separator : ';',
    },
    dist : {
        src : [ '<%=src.jsDevFolder %>custom.js' ],
        dest : '<%=src.jsDistFolder %>custom.min.js',
    },
},



/*** ALT ***/
tasks: [ 'uglify', 'sync' ],

/*** NEU ***/
tasks: [ 'concat', 'sync' ],



/*** ALT ***/
grunt.loadNpmTasks('grunt-contrib-uglify');

/*** NEU ***/
grunt.loadNpmTasks('grunt-contrib-concat');

Anpassungen in package.json

/*   DELETE THIS LINE   */
"grunt-contrib-uglify": "^3.3.0",

/* ADD DEV DEPENDENCY IF MISSING */
"grunt-contrib-concat": "^1.0.1",

Einbindung Overlay

Es wurde ein Ladebildschirm ergänzt, der bei der Weiterleitung auf andere Seiten erscheint.

boilerplate/includes/layout.xhtml

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

<!-- ADD THIS LINE -->
<ui:include src="/resources/includes/loadingOverlay.xhtml" />

Die Zitierlinks sind nun in einem gesonderten Modal zu finden. Dieses ist auf sein Styling und vor allem auf korrekte Darstellung auf der z-Ebene zu prüfen. Bei einigen Themes kann es vorkommen, dass das Modal von Elementen überlappt wird. Dies ist insbesondere in der Mobilansicht zu prüfen (Sidebar-Buttons).

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>

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>

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

Die oberste Ebene der Themeprojekte ist in Eclipse nicht im Standard sichtbar!

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>

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

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/

Previous2022 Next2020

Last updated 2 years ago

Allgemein

21.11

Themekonfiguration via viewer Backend

Logo & Name via Backend konfigurierbar machen

Social Media Profile

Footerlinks

Seitentitel und Favicon

Quick CSS

Breadcrumbs

Sweetalert2

Piwik

21.10

Fokusring

Änderungen Archivansicht

XML Namespaces in Templates hinzufügen

Seitentitel für Archiv-Template

JS + CSS Abhängigkeiten via NPM verwalten

Änderungen 3D Darstellung

21.09

Anpassung Metadatenansicht

Neuerungen Nutzerprofil

Javascript + CSS im templateFullscreen

21.08

Umbenennung des Drilldown Widgets

Angepasste IDs im Kontakt-Modal

21.07

Anpassung Feedback-/Kontaktformular

Entfernung vom uglify task (grunt/npm)

Einbindung Overlay

Neues Modal Zitierlinks

21.06

Veränderte Einbindung jQuery

Benachrichtigungen im Backend

Update CMS-Templates für die Methode currentPage

Änderung der Methode currentPage

Verändertes Styling Widget Geofacetting & Kartenoverlay

Änderungen an der pom.xml

Anpassung der theme-url-mappings.xml

Änderung an der Navigation

Anpassung Sprachumschalter

21.05

Entfernung themespezifischer CSS Dateien

Styling Loginnavigation

Karten in Kampagnen

Veränderter Methodenname in Suche

README.md

Suche auf Karte

Facettierung auf Karte

21.04

Admin-Topbar im Frontend

Benachrichtigungen in den Kampagnen

Mirador Konfiguration

21.03

Chronology-Slider

Ergänzungen für Bild-Slider

CSS Dateien aus Templates entfernen

Sprach-Toggle

Widget User-Interactions

Grunt

21.02

Update auf Mirador 3

Anpassungen zur Leserichtung (right-to-left)

​ ​Styling neuer Widgets und Funktionen

21.01

Refaktorisierung Bookmarks, Imagecontrols und Widget Suchtreffernavigation

Mirador-Config erweitern

Alt:

Neu:

CMS-Templates anpassen

Javascript in CMS-Templates hinzufügen

OpenSearch Url anpassen

Styling neuer Widgets und Funktionen