feat: allow multiple stylesheets, fix: #1

eaCe · Jun 21, 2023 · ebcec44 · ebcec44
1 parent cb78adf
commit ebcec44
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/assets/module-styles.js b/assets/module-styles.js
diff --git a/boot.php b/boot.php
@@ -1,14 +1,15 @@
 <?php
 
 $addon = rex_addon::get('module_styles');
+$styles = explode("\r\n", $addon->getConfig('module_stylesheet'));
 
 if (rex::isBackend() && rex::getUser() && rex_url::currentBackendPage() === 'index.php?page=content/edit' && $addon->getConfig('module_stylesheet')) {
-    rex_view::setJsProperty('moduleStylesheet', $addon->getConfig('module_stylesheet'));
+    rex_view::setJsProperty('moduleStylesheet', $styles);
     rex_view::addJsFile($addon->getAssetsUrl('module-styles.js'));
 }
 
 if (rex::isBackend() && rex::getUser() && rex_url::currentBackendPage() === 'index.php?page=module_styles/settings' && $addon->getConfig('module_stylesheet')) {
-    rex_view::setJsProperty('moduleStylesheet', $addon->getConfig('module_stylesheet'));
+    rex_view::setJsProperty('moduleStylesheet', $styles);
     rex_view::addJsFile($addon->getAssetsUrl('module-styles-settings.js'));
 }
 
diff --git a/lang/de_de.lang b/lang/de_de.lang
@@ -1,2 +1,4 @@
 module_styles_title = Module-Styles
 module_styles_settings = Einstellungen
+module_styles_settings_desc = Hier können Sie die Einstellungen für das Modul ändern.
+module_styles_multiline = Gib die URL zum Stylesheet ein. Du kannst auch mehrere URLs eingeben, jede in einer neuen Zeile.
diff --git a/lang/en_gb.lang b/lang/en_gb.lang
@@ -1,2 +1,3 @@
 module_styles_title = Module-Styles
 module_styles_settings = Settings
+module_styles_multiline = Enter the URL to the stylesheet. You can also enter multiple URLs, each on a new line.
diff --git a/pages/settings.php b/pages/settings.php
@@ -3,8 +3,9 @@
 $addon = rex_addon::get('module_styles');
 
 $form = rex_config_form::factory('module_styles');
-$field = $form->addInputField('text', 'module_stylesheet', null, ['class' => 'form-control', 'placeholder' => '/css/styles.css']);
+$field = $form->addTextAreaField('module_stylesheet', null, ['class' => 'form-control', 'placeholder' => '/css/styles.css']);
 $field->setLabel('Stylesheet URL');
+$field->setNotice($addon->i18n('multiline'));
 
 $fragment = new rex_fragment();
 $fragment->setVar('class', 'edit module-styles-settings', false);

diff --git a/resources/js/module-styles.js b/resources/js/module-styles.js
@@ -6,9 +6,9 @@ $(document).on('rex:ready', function () {
 class ModuleStyles {
   constructor () {
     this.$slicePanels = document.querySelectorAll('ul.rex-slices .panel-default .panel-body');
-    this.stylesheet = rex.moduleStylesheet;
+    this.stylesheets = rex.moduleStylesheet;
 
-    if (!this.stylesheet) {
+    if (!this.stylesheets) {
       return
     }
 
@@ -32,12 +32,14 @@ class ModuleStyles {
     $panel.shadowRoot.innerHTML = content;
 
     // add stylesheet
-    let link = document.createElement('link');
-    link.setAttribute('rel', 'stylesheet');
-    link.onload = () => {
-      $panel.classList.add('module-styles-loaded');
-    };
-    link.setAttribute('href', this.stylesheet);
-    $panel.shadowRoot.appendChild(link);
+    this.stylesheets.forEach((stylesheet) => {
+      let link = document.createElement('link');
+      link.setAttribute('rel', 'stylesheet');
+      link.onload = () => {
+        $panel.classList.add('module-styles-loaded');
+      };
+      link.setAttribute('href', stylesheet);
+      $panel.shadowRoot.appendChild(link);
+    });
   }
 }