Fix styling and toggle all in element slideout container

neustadt-swiss · Aug 6, 2024 · b48f104 · b48f104
1 parent 50f5842
commit b48f104
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.1.1 - 2024-08-06
+
+### Fixed
+
+-  Fixed the toggle all checkbox and the styling in the element slideout container
+
 ## 2.1.0 - 2024-06-10
 
 ### Added

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "goldinteractive/craft-sitecopy",
   "description": "",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "license": "proprietary",
   "type": "craft-plugin",
   "minimum-stability": "dev",

diff --git a/src/assetbundles/sitecopy/dist/css/sitecopy.css b/src/assetbundles/sitecopy/dist/css/sitecopy.css
@@ -1,15 +1,23 @@
 /* globals */
 
-.content-pane #sitecopy {
+.content-pane .sitecopy {
     margin-top: 50px;
 }
 
 /* elements */
 
-.details #sitecopy-options {
+.details .sitecopy-options {
     padding-bottom: 1px;
 }
 
-.details #sitecopy-options .field {
+.details .sitecopy-options .field {
     margin: 24px 0;
-}
+}
+
+.slideout-container .sitecopy-options {
+    padding-bottom: 1px;
+}
+
+.slideout-container .sitecopy-options .field {
+    margin: 24px 0;
+}
diff --git a/src/assetbundles/sitecopy/dist/js/sitecopy.js b/src/assetbundles/sitecopy/dist/js/sitecopy.js
@@ -1,17 +1,20 @@
 function toggleSitecopyTargets(source) {
-  const checkboxes = document.getElementsByName('sitecopy[targets][]');
+  const sitecopyDiv = source.closest('.sitecopy');
+  const checkboxes = sitecopyDiv.querySelectorAll('.sitecopy-options input[type="checkbox"]');
   const isChecked = source.checked;
 
   for (let i = 1, n = checkboxes.length; i < n; i++) {
     checkboxes[i].checked = isChecked;
   }
 }
 
-function updateSitecopyToggleAll() {
-  const toggleAll = document.getElementById('sitecopy-toggle-all');
+function updateSitecopyToggleAll(source) {
+  const sitecopyDiv = source.closest('.sitecopy');
+  const toggleAll = sitecopyDiv.querySelector('[id$="sitecopy-toggle-all"]');
+
 
   if (toggleAll) {
-    const checkboxes = document.getElementsByName('sitecopy[targets][]');
+    const checkboxes = sitecopyDiv.querySelectorAll('.sitecopy-options input[type="checkbox"]');
     toggleAll.checked = Array.from(checkboxes).every((checkbox) => checkbox.checked);
   }
 }
diff --git a/src/templates/_cp/bulkCopyOverlay.twig b/src/templates/_cp/bulkCopyOverlay.twig
@@ -9,8 +9,8 @@
 
         <div class="main">
             {% if siteCopyTargetOptions is not empty %}
-                <div id="sitecopy" class="pane">
-                    <div class="{{ siteCopyEnabled ? '' : 'hidden' }}" id="sitecopy-options">
+                <div class="pane sitecopy">
+                    <div class="{{ siteCopyEnabled ? '' : 'hidden' }} sitecopy-options" id="sitecopy-options">
                         {{ forms.checkboxGroupField({
                             label: elementCount > 1 ? "To which site should the elements be copied?"|t('site-copy-x') : "To which site should it be copied?"|t('site-copy-x'),
                             id: 'siteCopy-targets',

diff --git a/src/templates/_cp/elementsEdit.twig b/src/templates/_cp/elementsEdit.twig
@@ -5,7 +5,7 @@
 {% set siteCopyTargetOptions = craft.sitecopy.getSiteInputOptions(supportedSites, [siteId]) %}
 
 {% if siteCopyTargetOptions is not empty %}
-    <div id="sitecopy" class="meta pane">
+    <div class="meta pane sitecopy">
         {{ forms.lightswitchField({
             label: 'Copy to site'|t('site-copy-x'),
             id: 'siteCopy-toggle',
@@ -14,7 +14,7 @@
             toggle: '#sitecopy-options',
         }) }}
 
-        <div class="{{ siteCopyEnabled ? '' : 'hidden' }}" id="sitecopy-options">
+        <div class="{{ siteCopyEnabled ? '' : 'hidden' }} sitecopy-options" id="sitecopy-options">
             {{ forms.checkboxGroupField({
                 label: "To which site should it be copied?"|t('site-copy-x'),
                 id: 'siteCopy-targets',