Merge pull request #84 from JaroslawZielinski/bugfix/83-fix-the-css-p…

…roblems-in-admin-panel task 83: Fix the css problems in admin panel
JaroslawZielinski · Mar 21, 2024 · c188da5 · c188da5
2 parents dad847b + 7b96a34
commit c188da5
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 48 deletions.
diff --git a/Block/Adminhtml/Widget/Slider.php b/Block/Adminhtml/Widget/Slider.php
@@ -104,7 +104,8 @@ public function getConfig(): array
             'verses_ordered' => $this->config->isModuleVersesOrdered(),
             'text_colour' => $this->config->getModuleTextColour(),
             'mode' => $this->config->getModuleMode(),
-            'content_shown_rows' => $this->config->getModuleContentShownRows()
+            'content_shown_rows' => $this->config->getModuleContentShownRows(),
+            'superHtmlId' => '#verseSliders '
         ];
     }
 

diff --git a/view/adminhtml/layout/default.xml b/view/adminhtml/layout/default.xml
@@ -7,8 +7,10 @@
 
     <body>
         <referenceContainer name="notifications">
-            <block class="JaroslawZielinski\TorahVerse\Block\Adminhtml\Widget\Slider\Backend"
-                name="torah-verse-admin-panel-slider" as="torah-verse-admin-panel-slider"/>
+            <container name="verseSliders" as="verseSliders" htmlId="verseSliders" htmlTag="div">
+                <block class="JaroslawZielinski\TorahVerse\Block\Adminhtml\Widget\Slider\Backend"
+                    name="torah-verse-admin-panel-slider" as="torah-verse-admin-panel-slider"/>
+            </container>
         </referenceContainer>
     </body>
 </page>
diff --git a/view/adminhtml/requirejs-config.js b/view/adminhtml/requirejs-config.js
@@ -1,23 +1,7 @@
 var config = {
     map: {
         '*': {
-            chosen: 'JaroslawZielinski_TorahVerse/js/chosen/chosen.jquery',
-            verseSlider: 'JaroslawZielinski_TorahVerse/js/slider',
-            verticalScroll: 'JaroslawZielinski_TorahVerse/js/verticalScroll'
-        }
-    },
-    paths: {
-        verseUtils: 'JaroslawZielinski_TorahVerse/js/verses/utils'
-    },
-    shim: {
-        verticalScroll: {
-            deps: ['jquery']
-        },
-        verseSlider: {
-            deps: ['jquery']
-        },
-        verseUtils: {
-            deps: ['jquery']
+            chosen: 'JaroslawZielinski_TorahVerse/js/chosen/chosen.jquery'
         }
     }
 };
diff --git a/view/frontend/requirejs-config.js → view/base/requirejs-config.js b/view/frontend/requirejs-config.js → view/base/requirejs-config.js
@@ -14,9 +14,6 @@ var config = {
         },
         verseSlider: {
             deps: ['jquery']
-        },
-        verseUtils: {
-            deps: ['jquery']
         }
     }
 };
diff --git a/view/base/web/js/slider.js b/view/base/web/js/slider.js
@@ -8,7 +8,7 @@ define([
     // Value related to Arial 14pt
     const wWidth = 6.89;
 
-    $.widget('verses.slider', {
+    $.widget('verses.bibleSlider', {
         defaults: {
             'sweep_time': 100,
             'is_vertical_sweep_possible': true,
@@ -17,7 +17,9 @@ define([
             'verses_ordered': true,
             'text_colour': '#ff0000',
             'mode': 'autoplayinf',
-            'content_shown_rows': 3
+            'content_shown_rows': 3,
+            'superHtmlId': '',
+            controlType: 'bibleSlider'
         },
         htmlID: null,
         max: null,
@@ -38,14 +40,17 @@ define([
             this._initSlider(this.element);
             this._addResizeWindowEvent(this.element);
         },
+        value: function () {
+            return '';
+        },
         /**
          * Init Element
          * @protected
          * @param {Object} element
          */
         _initElement: function (element) {
             //add html ID
-            let htmlId = 'vs_';
+            let htmlId = 'bibleslider_';
             htmlId += Date.now();
             htmlId += '_' + Math.floor(Math.random() * 1000);
             $(element).attr('id', htmlId);
@@ -87,7 +92,7 @@ define([
         _determineWMax: function (element) {
             const htmlId = $(element).attr('id');
             const slider = document.getElementById(htmlId);
-            const width = slider.clientWidth;
+            const width = null !== slider ? slider.clientWidth : 1757;
             this.wMax = Math.round(width/wWidth);
         },
         /**
@@ -112,17 +117,20 @@ define([
          * @param {Object} element
          */
         _dispatchSliders: function (element) {
-            switch (this.options.mode) {
-                default:
-                case 'randomautoplayinf':
-                    this._moveRandomInfiniteAutoPlayMode(element);
-                    break;
-                case 'autoplayinf':
-                    this._moveInfiniteAutoPlayMode(element);
-                    break;
-                case 'random':
-                    this._moveRandomMode(element);
-                    break;
+            try {
+                switch (this.options.mode) {
+                    default:
+                    case 'randomautoplayinf':
+                        this._moveRandomInfiniteAutoPlayMode(element);
+                        break;
+                    case 'autoplayinf':
+                        this._moveInfiniteAutoPlayMode(element);
+                        break;
+                    case 'random':
+                        this._moveRandomMode(element);
+                        break;
+                }
+            } catch (e) {
             }
         },
         /**
@@ -206,13 +214,13 @@ define([
             $(element).hide();
             $(element).html(hydratedHtml);
             const htmlSliderContent = verseUtils.stringToSliderStructure(data.content, self.wMax);
-            const htmlContentSelector = '#' + self.htmlID + ' a .item .content';
-            $(htmlContentSelector).html(htmlSliderContent);
+            const htmlContentSelector = self.options.superHtmlId + '#' + self.htmlID + ' a .item .content';
+            document.querySelector(htmlContentSelector).innerHTML = htmlSliderContent;
             if (self.options.is_vertical_sweep_possible && self.options.content_shown_rows * self.wMax <= data.content.length) {
                 //event that content is too big (requires vertical scroll - more than 2 rows)
                 self.suppress[self.htmlID] = true;
                 $(htmlContentSelector).verticalScroll({
-                    'parent_html_id': self.htmlID,
+                    'parent_html_id': self.options.superHtmlId + self.htmlID,
                     'sweep_time': self.options.vertical_sweep_time,
                     'content_shown_rows': self.options.content_shown_rows,
                     'onFinish': function (verticalScroll, vParentHtmlId, vHtmlId) {
@@ -225,5 +233,5 @@ define([
         }
     });
 
-    return $.verses.slider;
+    return $.verses.bibleSlider;
 });
diff --git a/view/base/web/js/verses/utils.js b/view/base/web/js/verses/utils.js
@@ -1,6 +1,6 @@
 define([
-    'jquery'
-], function($) {
+    'prototype'
+], function() {
     'use strict';
 
     const softBreakWords = ['a', 'i', 'o', 'u', 'w', 'z'];
@@ -37,18 +37,25 @@ define([
                     lastLine += ' ' + end;
                     lines.push(lastLine);
                 } else {
-                    lines.push(end)
+                    lines.push(end);
                 }
             }
             return lines;
         },
         stringToSliderStructure: function (string, characterTrigger) {
             const lines = this.stringToLinesByChunkSize(string, characterTrigger);
-            let preparedHtml = $('<div>', {class: 'list'});
+            let preparedHtml = document.createElement('div');
+            preparedHtml.classList.add('list');
             for (let i = 0; i < lines.length; i++) {
-                $(preparedHtml).append($('<div>', {class: i}).html(lines[i]));
+                let div = document.createElement('div');
+                div.classList.add(i);
+                div.innerHTML = lines[i];
+                preparedHtml.appendChild(div);
             }
-            return $('<div>', {class: 'transformed'}).html($(preparedHtml))
+            let transformed = document.createElement('div');
+            transformed.classList.add('transformed');
+            transformed.appendChild(preparedHtml);
+            return transformed.outerHTML;
         },
         /**
          * Hydrate template with key vars by given values (f.e. {variable} to 'test')