2. Theme Changelog

Search…
2. Theme Changelog
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.10-SNAPSHOT
XML Namespaces in Templates hinzufügen
Folgende xml Namespaces müssen in das <html> Element aller template....html Dateien eingefügt werden:
1
xmlns:c="http://java.sun.com/jsp/jstl/core"
2
xmlns:jsf="http://xmlns.jcp.org/jsf"
3
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
Copied!
Seitentitel für Archiv-Template
In die Datei boilerplate/templateArchives.html muss das <title> Element ersetzt werden durch
1
<c:choose>
2
    <c:when test="#{archiveBean.databaseLoaded}">
3
        <title>#{archiveBean.archiveId} - #{configurationBean.name}</title>
4
    </c:when>
5
    <c:otherwise>
6
        <title>#{msg.archives__archiveViewHeading} - #{configurationBean.name}</title>
7
    </c:otherwise>
8
</c:choose>
Copied!
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
boilerplate/templateAdmin.html
boilerplate/templateArchives.html
boilerplate/templateBlank.html
boilerplate/templateCrowdsourcing.html
boilerplate/templateFullscreen.html
boilerplate/templateMirador.html
1
<!-- JQUERY ALT -->
2
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery.min.js?${navigationHelper.buildVersion}"></script>
3
<!-- JQUERY NEU -->
4
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery/jquery.min.js?${navigationHelper.buildVersion}"></script>
5
​
6
​
7
<!-- JQUERY UI TOUCH PUNCH ALT-->
8
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jqueryUi/1.11.0/jquery.ui.touch-punch.min.js?${navigationHelper.buildVersion}"></script>
9
<!-- JQUERY UI TOUCH PUNCH NEU -->
10
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jqueryUi/plugins/jquery.ui.touch-punch.min.js?${navigationHelper.buildVersion}"></script>
11
​
12
​
13
<!-- FONTAWESOME ALT -->
14
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/font-awesome.min.css?${navigationHelper.buildVersion}" />
15
<!-- FONTAWESOME NEU -->
16
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/font-awesome/css/font-awesome.min.css?${navigationHelper.buildVersion}" />
Copied!
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
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
1
<!-- NEU CSS -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/leaflet.css?${navigationHelper.buildVersion}" />
3
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/extra-markers/leaflet.extra-markers.min.css?${navigationHelper.buildVersion}" />
4
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/markercluster/MarkerCluster.css?${navigationHelper.buildVersion}" />
5
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/draw/leaflet.draw.css?${navigationHelper.buildVersion}" />
6
<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}" />
7
​
8
<!-- NEU JS -->
9
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/leaflet.js?${navigationHelper.buildVersion}"></script>
10
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/extra-markers/leaflet.extra-markers.min.js?${navigationHelper.buildVersion}"></script>
11
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/markercluster/leaflet.markercluster.js?${navigationHelper.buildVersion}"></script>
12
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/draw/leaflet.draw.js?${navigationHelper.buildVersion}"></script>	
13
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/geocoder/mapbox-gl-geocoder.min.js?${navigationHelper.buildVersion}"></script>
14
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/mapbox-gl.js?${navigationHelper.buildVersion}"></script>
Copied!
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
1
/*** ALT ***/
2
.search-list__drilldown-heading
3
​
4
/*** NEU ***/
5
.search-list__facets-heading
Copied!
Auch müssen eventuell vorhandene Referenzen zum Widget in Theme-Templates angepasst werden:
1
<!-- ALT -->
2
<widgetComponent:widget_searchDrilldown />
3
​
4
<!-- NEU -->
5
<widgetComponent:widget_searchFacets />
Copied!
Angepasste IDs im Kontakt-Modal
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
1
<!-- ADD THIS BELOW OTHER MODALS -->
2
<viewerComponent:modalFeedbackForm id="feedbackModal" />
Copied!
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
1
<!-- ALT -->
2
<a href="#{request.contextPath}/feedback/">#{msg.feedbackLeaveFeedback}</a>
3
​
4
<!-- NEU -->
5
<button data-toggle="modal" data-target="#feedbackModal">#{msg.contact}</button>
Copied!
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
1
/*** ALT ***/
2
uglify: {
3
    my_target: {
4
        files: {
5
            '<%=src.jsDistFolder %>custom.min.js': ['<%=src.jsDevFolder %>custom.js']
6
        }
7
    }
8
},
9
​
10
/*** NEU ***/
11
concat : {
12
    options : {
13
        separator : ';',
14
    },
15
    dist : {
16
        src : [ '<%=src.jsDevFolder %>custom.js' ],
17
        dest : '<%=src.jsDistFolder %>custom.min.js',
18
    },
19
},
20
​
21
​
22
​
23
/*** ALT ***/
24
tasks: [ 'uglify', 'sync' ],
25
​
26
/*** NEU ***/
27
tasks: [ 'concat', 'sync' ],
28
​
29
​
30
​
31
/*** ALT ***/
32
grunt.loadNpmTasks('grunt-contrib-uglify');
33
​
34
/*** NEU ***/
35
grunt.loadNpmTasks('grunt-contrib-concat');
Copied!
Anpassungen in package.json
1
/*   DELETE THIS LINE   */
2
"grunt-contrib-uglify": "^3.3.0",
3
​
4
/* ADD DEV DEPENDENCY IF MISSING */
5
"grunt-contrib-concat": "^1.0.1",
Copied!
Einbindung Overlay
Es wurde ein Ladebildschirm ergänzt, der bei der Weiterleitung auf andere Seiten erscheint.
boilerplate/includes/layout.xhtml
1
<ui:include src="/resources/includes/overlay.xhtml" />
2
​
3
<!-- ADD THIS LINE -->
4
<ui:include src="/resources/includes/loadingOverlay.xhtml" />
Copied!
Neues Modal Zitierlinks
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
1
<!-- ALT -->
2
<h:outputScript library="primefaces" name="/jquery/jquery.js" target="head" />
3
<h:outputScript library="primefaces" name="/jquery/jquery-plugins.js" target="head" />
4
​
5
<!-- NEU -->
6
<!-- ADD THIS ABOVE ALL OTHER JS LIBS -->
7
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jquery.min.js?${navigationHelper.buildVersion}"></script>
Copied!
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
1
<!-- CSS: Add this line -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
3
​
4
<!-- JS: Add this line -->
5
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>
Copied!
Update CMS-Templates für die Methode currentPage
Bei allen CMS-Template xhtml Dateien muss folgender String ersetzt werden:
1
<!-- ALT -->
2
#{navigationHelper.setCurrentPage(cmsBean.currentPage.title, false, true, true)}
3
​
4
<!-- ODER ALT -->
5
#{navigationHelper.setCurrentPage(cmsBean.currentPage.menuTitle, false, true, true)}
6
​
7
<!-- NEU-->
8
#{navigationHelper.setCurrentPage(cmsBean.currentPage)}
Copied!
Ä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:
1
#{navigationHelper.currentPage
Copied!
1
<!-- BEISPIELE -->
2
<ui:fragment rendered="#{navigationHelper.currentPage == 'cms_0005'}">
3
   <div class="page-header__element">content</div>
4
</ui:fragment>
5
​
6
<ui:fragment rendered="#{navigationHelper.currentPage == 'index'}">
7
   <div class="page-header__element">content</div>
8
</ui:fragment>
Copied!
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:
1
<!-- ALT -->
2
<excludes>MANIFEST.MF,**/pom.*,install/</excludes>
3
<!-- NEU -->
4
<excludes>MANIFEST.MF,**/pom.*,install/,docker/</excludes>
Copied!
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:
1
<!-- NEW LINE -->
2
<action onPostback="false">#{activeDocumentBean.setImageToShow('1')}</action>
3
​
4
<!-- FULL EXAMPLE -->
5
<url-mapping id="image1">
6
    <pattern value="/image/#{pi:activeDocumentBean.persistentIdentifier}/" />
7
    <view-id value="/viewObject.xhtml" />
8
    <!-- LINE ADDED HERE -->
9
    <action onPostback="false">#{activeDocumentBean.setImageToShow('1')}</action>
10
    <action onPostback="false">#{activeDocumentBean.open}</action>
11
</url-mapping>
Copied!
Änderung an der Navigation
​Die Navigation kann nun mehrfach eingebunden werden. Deswegen wird ihre ID in der Core-Komponente nun dynamisch vergeben: ​
1
<!-- ALT -->
2
<nav id="navigation" class="navigation" aria-label="#{msg.aria_label__nav_main}">
3
​
4
<!-- NEU -->
5
<nav id="#{cc.clientId}" class="navigation" aria-label="#{msg.aria_label__nav_main}">
Copied!
​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:
1
<viewerComponent:changeLocal toggleLanguage="true" showFlags="true" showLabels="false" />
Copied!
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
1
<!-- delete this line -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}" />
Copied!
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
1
<!-- CSS -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/geocoder/mapbox-gl-geocoder.css?${navigationHelper.buildVersion}"/>
3
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/mapbox-gl.css?${navigationHelper.buildVersion}" />
4
​
5
<!-- JAVASCRIPT -->
6
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/geocoder/mapbox-gl-geocoder.min.js?${navigationHelper.buildVersion}"></script>
7
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/mapbox-gl.js?${navigationHelper.buildVersion}"></script>
Copied!
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
1
<!-- CSS -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/leaflet/draw/leaflet.draw.css?${navigationHelper.buildVersion}" />
3
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
4
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/geocoder/mapbox-gl-geocoder.css?${navigationHelper.buildVersion}" />
5
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/mapbox/mapbox-gl.css?${navigationHelper.buildVersion}" />
6
​
7
<!-- JAVASCRIPT -->
8
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/leaflet/draw/leaflet.draw.js?${navigationHelper.buildVersion}"></script>	
9
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>
10
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/geocoder/mapbox-gl-geocoder.min.js?${navigationHelper.buildVersion}"></script>
11
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mapbox/mapbox-gl.js?${navigationHelper.buildVersion}"></script>
Copied!
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
1
<!-- ADMIN TOPBAR FRONTEND -->
2
<viewerComponent:frontEndAdminTopBar />
Copied!
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:
1
<div id="pageHeaderTop" class="page-header__top-wrapper #{userBean.admin ? '-adminActive':''}">
2
<div id="pageNavigation" class="page-navigation #{userBean.admin ? '-adminActive':''}">
Copied!
Benachrichtigungen in den Kampagnen
Für Benachrichtigungen in den Kampagnen muss in dem Crowdsourcing Template die folgende Ergänzung vorgenommen werden:
boilerplate/templateCrowdsourcing.html
1
<!-- CSS -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/sweetalert/sweetalert2.min.css?${navigationHelper.buildVersion}" />
3
​
4
<!-- Javascript -->
5
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/sweetalert/sweetalert2.min.js?${navigationHelper.buildVersion}"></script>
Copied!
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
1
manifestEndpoint: "#{configurationBean.restApiUrlForIIIFPresention}/"
Copied!
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
1
<!-- CSS -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/jquery.ui.slider-rtl.css?${navigationHelper.buildVersion}" />
3
​
4
<!-- Javascript -->
5
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/jqueryUi/plugins/jquery.ui.slider-1.12.1-rtl.js?${navigationHelper.buildVersion}"></script>
Copied!
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
1
<!-- CSS -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/libs/swiper/swiper-bundle.min.css?${navigationHelper.buildVersion}" />
3
​
4
<!-- Javascript -->
5
<script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/swiper/swiper-bundle.min.js?${navigationHelper.buildVersion}"></script>
Copied!
Weiter muss der folgende Block in der custom.js ergänzt werden:
boilerplate/javascript/dev/custom.js
1
/*
2
 initSliders may be used to add new cms slider styles (swiper configuration objects) to the 
3
 list of availabe slider styles, or alter existing ones. See the commented out examples below for each use case
4
 This method MUST be called before document.ready for them to show up in the styles dropdown in the cms backend
5
*/
6
function initSliders() {
7
​
8
// EXAMPLE SLIDER
9
//  var sliderExampleConfig = {
10
//      maxSlides: 8,
11
//      timeout: 10000,
12
//      imageWidth: 1100,
13
//      imageHeight: 500,
14
//       swiperConfig: {
15
//            slidesPerView: 3,
16
//            spaceBetween: 30,
17
//            loop: true,
18
//            speed: 400,
19
//            pagination: {
20
//                el: '.slider-example__dots',
21
//                clickable: true
22
//            },
23
//            breakpoints: {
24
//                300: { 
25
//                   slidesPerView: 1.2,
26
//                },
27
//                600: {  
28
//                   slidesPerView: 2.3,
29
//                },
30
//                900: {
31
//                   slidesPerView: 3.5,   
32
//                } 
33
//            }
34
//      }
35
//  }
36
//  viewerJS.slider.set('example-slider', sliderExampleConfig);
37
}
38
initSliders();
Copied!
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
1
<!-- delete this line -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}
Copied!
​In der templateMirador.html muss die themespezifische CSS Datei und die Einbindung der Goobi viewer Core JavaScript Datei entfernt werden:
boilerplate/templateMirador.html
1
<!-- delete these lines -->
2
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/dist/viewer.min.css?${navigationHelper.buildVersion}" />
3
​
4
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/themes/#{navigationHelper.theme}/css/dist/#{navigationHelper.theme}.min.css?${navigationHelper.buildVersion}" />
Copied!
​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: ​
1
<locale-config>
2
    <default-locale>de</default-locale>
3
    <supported-locale>de</supported-locale>
4
    <supported-locale>fr</supported-locale>
5
</locale-config>
Copied!
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
1
    <!-- FORCES PRIMEFACES TO INCLUDE JQUERY & JQUERY-UI -->
2
    <h:outputScript library="primefaces" name="/jquery/jquery.js" target="head" />
3
    <h:outputScript library="primefaces" name="/jquery/jquery-plugins.js" target="head" />
4
    
5
    <!-- JAVASCRIPT LIBS -->   
6
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/bs/bootstrap.bundle.min.js?${navigationHelper.buildVersion}"></script>
7
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/reactiveX/rxjs.umd.min.js?${navigationHelper.buildVersion}"></script>
8
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/q-promises/q.min.js?${navigationHelper.buildVersion}"></script>
9
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/libs/mirador/mirador.min.js?${navigationHelper.buildVersion}"></script>
10
	
11
	  <!-- JAVASCRIPT DIST FILES -->
12
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/dist/browsersupport.min.js?${navigationHelper.buildVersion}"></script>
13
    <script type="text/javascript" src="#{request.contextPath}/resources/javascript/dist/viewer.min.js?${navigationHelper.buildVersion}"></script>
14
​
Copied!
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
1
dir="#{navigationHelper.localeString eq 'ar' or navigationHelper.localeString eq 'iw' ? 'rtl' : 'ltr'}"
Copied!
​ ​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:
1
var miradorConfig = {
2
            	root: "#{request.contextPath}",
3
            	userLoggedIn: #{userBean.loggedIn},
4
            };
Copied!
Neu:
1
var miradorConfig = {
2
            	root: "#{request.contextPath}",
3
            	restEndpoint: "#{configurationBean.restApiUrl}",
4
            	userLoggedIn: #{userBean.loggedIn},
5
            };
Copied!
CMS-Templates anpassen
Alle xhtml-Dateien für Theme-CMS-Templates müssen angepasst werden, also alle Dateien in
1
boilerplate/cms/templates/views/
Copied!
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.:
1
<ui:include src="#{cmsPage.getContent('text')}"/>
2
==>
3
<h:outputText escape="false" value="#{cmsPage.getContent('text')}"></h:outputText>
Copied!
Zum einfachen Ersetzen kann man folgenden Regulären Ausdruck verwenden:
1
<ui:include src="#\{(\w+)\.getContent\('([\w\d-]+)'\)\}"\s*/>
Copied!
Dieser muss ersetzt werden durch:
1
<h:outputText escape="false" value="#{$1.getContent('$2')}"></h:outputText>
Copied!
Javascript in CMS-Templates hinzufügen
In allen Theme-CMS-Templates muss direkt hinter <ui:define name="content"> folgende Zeile eingefügt werden:
1
<ui:include src="/resources/cms/includes/cms_script.xhtml" />
Copied!
OpenSearch Url anpassen
In den Dateien template.html, templateBlank.html und templateFullscreen.html gibt es folgende Header-Zeile:
1
<link rel="search" type="application/opensearchdescription+xml" title="#{configurationBean.name}" href="#{request.contextPath}/rest/opensearch/getxml/" />
Copied!
Hier muss jeweils das Attribut href geändert werden zu
1
#{request.contextPath}/api/v1/opensearch/
Copied!
​