Merge pull request kitodo#607 from beatrycze-volk/move-js-to-config

Move JS includes from source code to TS configuration At the moment we have no use-case for the feature of `addJsToBody`. If I'm wrong and/or there is coming a request for it we can add it again.
UB-Mannheim · Apr 8, 2021 · 9113a5e · 9113a5e
2 parents f12eede + 1ba81f9
commit 9113a5e
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 119 deletions.
diff --git a/Classes/Plugin/AudioPlayer.php b/Classes/Plugin/AudioPlayer.php
@@ -43,26 +43,15 @@ class AudioPlayer extends \Kitodo\Dlf\Common\AbstractPlugin
      *
      * @access protected
      *
-     * @return string The output string for the ###JAVASCRIPT### template marker
+     * @return void
      */
     protected function addPlayerJS()
     {
-        $markerArray = '';
-        // CSS files.
-        $cssFiles = [
-            'Resources/Public/Javascript/jPlayer/blue.monday/css/jplayer.blue.monday.min.css'
-        ];
         // Inline CSS.
         $inlineCSS = '#tx-dlf-audio { width: 100px; height: 100px; }';
-        //Javascript files.
-        $jsFiles = [
-            // jPlayer
-            'Resources/Public/Javascript/jPlayer/jquery.jplayer.min.js',
-            // AudioPlayer
-            'Resources/Public/Javascript/AudioPlayer/AudioPlayer.js'
-        ];
+
         // AudioPlayer configuration.
-        $audioplayerConfiguration = '
+        $audioPlayerConfiguration = '
             $(document).ready(function() {
                 AudioPlayer = new dlfAudioPlayer({
                     audio: {
@@ -75,30 +64,10 @@ protected function addPlayerJS()
                 });
             });
         ';
-        // Add Javascript to page footer if not configured otherwise.
-        if (empty($this->conf['addJStoBody'])) {
-            $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
-            foreach ($cssFiles as $cssFile) {
-                $pageRenderer->addCssFile(PathUtility::stripPathSitePrefix(ExtensionManagementUtility::extPath($this->extKey)) . $cssFile);
-            }
-            $pageRenderer->addCssInlineBlock('kitodo-audioplayer-configuration', $inlineCSS);
-            foreach ($jsFiles as $jsFile) {
-                $pageRenderer->addJsFooterFile(PathUtility::stripPathSitePrefix(ExtensionManagementUtility::extPath($this->extKey)) . $jsFile);
-            }
-            $pageRenderer->addJsFooterInlineCode('kitodo-audioplayer-configuration', $audioplayerConfiguration);
-        } else {
-            foreach ($jsFiles as $jsFile) {
-                $markerArray .= '<script type="text/javascript" src="' . PathUtility::stripPathSitePrefix(ExtensionManagementUtility::extPath($this->extKey)) . $jsFile . '"></script>' . "\n";
-            }
-            $markerArray .= '
-                <script type="text/javascript"> 
-                /*<![CDATA[*/
-                /*kitodo-audioplayer-configuration*/
-                ' . $audioplayerConfiguration . '
-                /*]]>*/
-                </script>';
-        }
-        return $markerArray;
+
+        $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
+        $pageRenderer->addCssInlineBlock('kitodo-audioplayer-configuration', $inlineCSS);
+        $pageRenderer->addJsFooterInlineCode('kitodo-audioplayer-configuration', $audioPlayerConfiguration);
     }
 
     /**
@@ -148,14 +117,13 @@ public function main($content, $conf)
         }
         if (!empty($this->audio)) {
             // Add jPlayer javascript.
-            $markerArray['###JAVASCRIPT###'] = $this->addPlayerJS();
+            $this->addPlayerJS();
         } else {
             // Quit without doing anything if required variables are not set.
             return $content;
         }
         // Load template file.
         $this->getTemplate();
-        $content .= $this->templateService->substituteMarkerArray($this->template, $markerArray);
         return $this->pi_wrapInBaseClass($content);
     }
 }
diff --git a/Classes/Plugin/PageView.php b/Classes/Plugin/PageView.php
@@ -15,10 +15,8 @@
 use Kitodo\Dlf\Common\Helper;
 use Kitodo\Dlf\Common\IiifManifest;
 use TYPO3\CMS\Core\Page\PageRenderer;
-use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Utility\MathUtility;
-use TYPO3\CMS\Core\Utility\PathUtility;
 use Ubl\Iiif\Presentation\Common\Model\Resources\ManifestInterface;
 use Ubl\Iiif\Presentation\Common\Vocabulary\Motivation;
 
@@ -71,35 +69,10 @@ class PageView extends \Kitodo\Dlf\Common\AbstractPlugin
      *
      * @access protected
      *
-     * @return string The output string for the ###JAVASCRIPT### template marker
+     * @return void
      */
     protected function addViewerJS()
     {
-        $markerArray = '';
-        // CSS files.
-        $cssFiles = [
-            'Resources/Public/Javascript/OpenLayers/ol3.css'
-        ];
-        // Javascript files.
-        $jsFiles = [
-            // OpenLayers
-            'Resources/Public/Javascript/OpenLayers/glif.min.js',
-            'Resources/Public/Javascript/OpenLayers/ol3-dlf.js',
-            // Viewer
-            'Resources/Public/Javascript/PageView/Utility.js',
-            'Resources/Public/Javascript/PageView/OL3.js',
-            'Resources/Public/Javascript/PageView/OL3Styles.js',
-            'Resources/Public/Javascript/PageView/OL3Sources.js',
-            'Resources/Public/Javascript/PageView/AltoParser.js',
-            'Resources/Public/Javascript/PageView/AnnotationParser.js',
-            'Resources/Public/Javascript/PageView/AnnotationControl.js',
-            'Resources/Public/Javascript/PageView/ImageManipulationControl.js',
-            'Resources/Public/Javascript/PageView/FulltextDownloadControl.js',
-            'Resources/Public/Javascript/PageView/FulltextControl.js',
-            'Resources/Public/Javascript/PageView/FullTextUtility.js',
-            'Resources/Public/Javascript/PageView/SearchInDocument.js',
-            'Resources/Public/Javascript/PageView/PageView.js'
-        ];
         // Viewer configuration.
         $viewerConfiguration = '
             $(document).ready(function() {
@@ -115,29 +88,9 @@ protected function addViewerJS()
                 }
             });
         ';
-        // Add Javascript to page footer if not configured otherwise.
-        if (empty($this->conf['addJStoBody'])) {
-            $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
-            foreach ($cssFiles as $cssFile) {
-                $pageRenderer->addCssFile(PathUtility::stripPathSitePrefix(ExtensionManagementUtility::extPath($this->extKey)) . $cssFile);
-            }
-            foreach ($jsFiles as $jsFile) {
-                $pageRenderer->addJsFooterFile(PathUtility::stripPathSitePrefix(ExtensionManagementUtility::extPath($this->extKey)) . $jsFile);
-            }
-            $pageRenderer->addJsFooterInlineCode('kitodo-pageview-configuration', $viewerConfiguration);
-        } else {
-            foreach ($jsFiles as $jsFile) {
-                $markerArray .= '<script type="text/javascript" src="' . PathUtility::stripPathSitePrefix(ExtensionManagementUtility::extPath($this->extKey)) . $jsFile . '"></script>' . "\n";
-            }
-            $markerArray .= '
-                <script type="text/javascript">
-                /*<![CDATA[*/
-                /*kitodo-pageview-configuration*/
-                ' . $viewerConfiguration . '
-                /*]]>*/
-                </script>';
-        }
-        return $markerArray;
+
+        $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
+        $pageRenderer->addJsFooterInlineCode('kitodo-pageview-configuration', $viewerConfiguration);
     }
 
     /**
@@ -396,7 +349,7 @@ public function main($content, $conf)
         $this->controls = explode(',', $this->conf['features']);
         // Fill in the template markers.
         $markerArray = array_merge($this->addInteraction(), $this->addBasketForm());
-        $markerArray['###JAVASCRIPT###'] = $this->addViewerJS();
+        $this->addViewerJS();
         $content .= $this->templateService->substituteMarkerArray($this->template, $markerArray);
         return $this->pi_wrapInBaseClass($content);
     }

diff --git a/Configuration/Flexforms/AudioPlayer.xml b/Configuration/Flexforms/AudioPlayer.xml
@@ -61,16 +61,6 @@
                             </config>
                         </TCEforms>
                     </elementId>
-                    <addJStoBody>
-                        <TCEforms>
-                            <exclude>1</exclude>
-                            <label>LLL:EXT:dlf/Resources/Private/Language/AudioPlayer.xml:tt_content.pi_flexform.addJStoBody</label>
-                            <config>
-                                <type>check</type>
-                                <default>0</default>
-                            </config>
-                        </TCEforms>
-                    </addJStoBody>
                     <templateFile>
                         <TCEforms>
                             <exclude>1</exclude>

diff --git a/Configuration/Flexforms/PageView.xml b/Configuration/Flexforms/PageView.xml
@@ -84,16 +84,6 @@
                             </config>
                         </TCEforms>
                     </elementId>
-                    <addJStoBody>
-                        <TCEforms>
-                            <exclude>1</exclude>
-                            <label>LLL:EXT:dlf/Resources/Private/Language/PageView.xml:tt_content.pi_flexform.addJStoBody</label>
-                            <config>
-                                <type>check</type>
-                                <default>0</default>
-                            </config>
-                        </TCEforms>
-                    </addJStoBody>
                     <crop>
                         <TCEforms>
                             <exclude>1</exclude>

diff --git a/Configuration/TypoScript/setup.txt b/Configuration/TypoScript/setup.txt
@@ -7,9 +7,42 @@ config {
 
 
 page {
+  includeCSS {
+    jPlayer = EXT:dlf/Resources/Public/Javascript/jPlayer/blue.monday/css/jplayer.blue.monday.min.css
+    ol3 = EXT:dlf/Resources/Public/Javascript/OpenLayers/ol3.css
+  }
+
   includeJSFooterlibs {
     jQuery = EXT:dlf/Resources/Public/Javascript/jQuery/jquery-3.5.1.min.js
     jQuery.forceOnTop = 1
-    jqueryUiMouseSlider = EXT:dlf/Resources/Public/Javascript/jQueryUI/jquery-ui-mouse-slider-resizable-autocomplete.js
+    jQueryJPlayer = EXT:dlf/Resources/Public/Javascript/jPlayer/jquery.jplayer.min.js
+    jQueryUiMouseSlider = EXT:dlf/Resources/Public/Javascript/jQueryUI/jquery-ui-mouse-slider-resizable-autocomplete.js
+  }
+
+  includeJSFooter {
+    kitodo {
+      audioPlayer = EXT:dlf/Resources/Public/Javascript/AudioPlayer/AudioPlayer.js
+
+      ol {
+        glif = EXT:dlf/Resources/Public/Javascript/OpenLayers/glif.min.js
+        dlf = EXT:dlf/Resources/Public/Javascript/OpenLayers/ol3-dlf.js
+      }
+
+      viewer {
+        utility = EXT:dlf/Resources/Public/Javascript/PageView/Utility.js
+        ol3 = EXT:dlf/Resources/Public/Javascript/PageView/OL3.js
+        ol3Styles = EXT:dlf/Resources/Public/Javascript/PageView/OL3Styles.js
+        ol3Sources = EXT:dlf/Resources/Public/Javascript/PageView/OL3Sources.js
+        altoParser = EXT:dlf/Resources/Public/Javascript/PageView/AltoParser.js
+        annotationParser = EXT:dlf/Resources/Public/Javascript/PageView/AnnotationParser.js
+        annotationControl = EXT:dlf/Resources/Public/Javascript/PageView/AnnotationControl.js
+        imageManipulationControl = EXT:dlf/Resources/Public/Javascript/PageView/ImageManipulationControl.js
+        fullTextDownloadControl = EXT:dlf/Resources/Public/Javascript/PageView/FulltextDownloadControl.js
+        fullTextControl = EXT:dlf/Resources/Public/Javascript/PageView/FulltextControl.js
+        fullTextUtility = EXT:dlf/Resources/Public/Javascript/PageView/FullTextUtility.js
+        searchInDocument = EXT:dlf/Resources/Public/Javascript/PageView/SearchInDocument.js
+        pageView = EXT:dlf/Resources/Public/Javascript/PageView/PageView.js
+      }
+    }
   }
 }
diff --git a/Resources/Private/Language/AudioPlayer.xml b/Resources/Private/Language/AudioPlayer.xml
@@ -20,7 +20,6 @@
             <label index="tt_content.pi_flexform.sheet_general">Options</label>
             <label index="tt_content.pi_flexform.excludeOther">Show only documents from the selected page</label>
             <label index="tt_content.pi_flexform.elementId">@ID value of the HTML element for the audio player</label>
-            <label index="tt_content.pi_flexform.addJStoBody">Add Javascript files to ###JAVASCRIPT### template marker instead of page footer?</label>
             <label index="tt_content.pi_flexform.templateFile">Template file</label>
         </languageKey>
         <languageKey index="de" type="array">
@@ -29,7 +28,6 @@
             <label index="tt_content.pi_flexform.sheet_general">Einstellungen</label>
             <label index="tt_content.pi_flexform.excludeOther">Nur Dokumente der ausgewählten Seite anzeigen</label>
             <label index="tt_content.pi_flexform.elementId">@ID-Wert des HTML-Elements für den Audioplayer</label>
-            <label index="tt_content.pi_flexform.addJStoBody">Javascript-Dateien im ###JAVASCRIPT### Template-Marker anstatt im Footer ausgeben?</label>
             <label index="tt_content.pi_flexform.templateFile">HTML-Template</label>
         </languageKey>
     </data>

diff --git a/Resources/Private/Language/PageView.xml b/Resources/Private/Language/PageView.xml
@@ -24,7 +24,6 @@
             <label index="tt_content.pi_flexform.features.overviewmap">Overview Image</label>
             <label index="tt_content.pi_flexform.features.zoompanel">Zoom Panel</label>
             <label index="tt_content.pi_flexform.elementId">@ID value of the HTML element for the page view</label>
-            <label index="tt_content.pi_flexform.addJStoBody">Add Javascript files to ###JAVASCRIPT### template marker instead of page footer?</label>
             <label index="tt_content.pi_flexform.templateFile">Template file</label>
             <label index="tt_content.pi_flexform.useInternalProxy">Use Internal Proxy</label>
             <label index="tt_content.pi_flexform.crop">Enable cropping</label>
@@ -46,7 +45,6 @@
             <label index="tt_content.pi_flexform.features.overviewmap">Übersichtsbild</label>
             <label index="tt_content.pi_flexform.features.zoompanel">Zoom-Knöpfe</label>
             <label index="tt_content.pi_flexform.elementId">@ID-Wert des HTML-Elements für die Seitenansicht</label>
-            <label index="tt_content.pi_flexform.addJStoBody">Javascript-Dateien im ###JAVASCRIPT### Template-Marker anstatt im Footer ausgeben?</label>
             <label index="tt_content.pi_flexform.templateFile">HTML-Template</label>
             <label index="tt_content.pi_flexform.useInternalProxy">Internen Proxy verwenden</label>
             <label index="tt_content.pi_flexform.crop">Funktion zum Erstellen eines Bildausschnitts aktivieren</label>

diff --git a/Resources/Private/Templates/AudioPlayer.tmpl b/Resources/Private/Templates/AudioPlayer.tmpl
@@ -9,5 +9,4 @@
 -->
 <!-- ###TEMPLATE### -->
 <div id="tx-dlf-audio" class="tx-dlf-audio"></div>
-###JAVASCRIPT###
 <!-- ###TEMPLATE### -->
diff --git a/Resources/Private/Templates/PageView.tmpl b/Resources/Private/Templates/PageView.tmpl
@@ -17,5 +17,4 @@
 <div class="tx-dlf-navigation-editRemove">###EDITREMOVE###</div>
 <div class="tx-dlf-navigation-magnifier">###MAGNIFIER###</div>
 <div class="tx-dlf-interaction-addbasket">###BASKETBUTTON###</div>
-###JAVASCRIPT###
 <!-- ###TEMPLATE### -->