feat: media js bundle with checkall and closesubmenus

5 files changed, 51 insertions, 35 deletions

diff --git a/app/view/templates/media.php b/app/view/templates/media.php
index ba385cb..f3d87fc 100644
--- a/app/view/templates/media.php
+++ b/app/view/templates/media.php
@@ -76,7 +76,7 @@ $this->layout('layout', ['title' => 'media', 'css' => $css . 'home.css']) ?>
 
         <table id="medialist">
         <tr>
-            <th>x</th>
+            <th id="checkall">x</th>
             <th><a href="<?= $mediaopt->getsortbyadress('id') ?>">id</a></th>
             <th>ext</th>
             <th><a href="<?= $mediaopt->getsortbyadress('type') ?>">type</a></th>
@@ -113,6 +113,9 @@ $this->layout('layout', ['title' => 'media', 'css' => $css . 'home.css']) ?>
 </section>
 
 </main>
+
+<script src="<?= Wcms\Model::jspath() ?>media.bundle.js"></script>
+
 </body>
 
 <?php $this->stop('page') ?>
\ No newline at end of file
diff --git a/src/fn/fn.js b/src/fn/fn.js
new file mode 100644
index 0000000..bca4eaf
--- /dev/null
+++ b/src/fn/fn.js
@@ -0,0 +1,30 @@
+/**
+ * Manage input event on the checkall checkbox.
+ * Call with .bind({checkboxes: HTMLElement[]})
+ * @param {InputEvent} e the input event
+ */
+export function checkallHandler(e) {
+    if (e.target.checked) {
+        for (const checkbox of this.checkboxes) {
+            checkbox.checked = true;
+        }
+    } else {
+        for (const checkbox of this.checkboxes) {
+            checkbox.checked = false;
+        }
+    }
+}
+
+/**
+ * Close all submenus of the menubar.
+ * @param {MouseEvent} e
+ */
+export function closeSubmenus(e) {
+    let details = document.querySelectorAll('aside details');
+    let currentDetail = e.target.closest('details');
+    for (const detail of details) {
+        if (!detail.isSameNode(currentDetail)) {
+            detail.removeAttribute('open');
+        }
+    }
+}
diff --git a/src/home.js b/src/home.js
index 7562389..8906079 100644
--- a/src/home.js
+++ b/src/home.js
@@ -1,44 +1,13 @@
-/** @type {HTMLInputElement[]} */
-let checkboxes = [];
+import { checkallHandler, closeSubmenus } from './fn/fn';
 
 window.addEventListener('load', () => {
-    checkboxes = document.getElementsByName('pagesid[]');
+    let checkboxes = document.getElementsByName('pagesid[]');
     let checkall = document.getElementById('checkall');
     let checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
-    checkbox.addEventListener('input', checkallHandler);
+    checkbox.addEventListener('input', checkallHandler.bind({ checkboxes }));
     checkall.innerHTML = '';
     checkall.appendChild(checkbox);
 });
 
 window.addEventListener('click', closeSubmenus);
-
-/**
- * Manage input event on the checkall checkbox.
- * @param {InputEvent} e the input event
- */
-function checkallHandler(e) {
-    if (e.target.checked) {
-        for (const checkbox of checkboxes) {
-            checkbox.checked = true;
-        }
-    } else {
-        for (const checkbox of checkboxes) {
-            checkbox.checked = false;
-        }
-    }
-}
-
-/**
- * Close all submenus of the menubar.
- * @param {MouseEvent} e
- */
-function closeSubmenus(e) {
-    let details = document.querySelectorAll('aside details');
-    let currentDetail = e.target.closest('details');
-    for (const detail of details) {
-        if (!detail.isSameNode(currentDetail)) {
-            detail.removeAttribute('open');
-        }
-    }
-}
diff --git a/src/media.js b/src/media.js
new file mode 100644
index 0000000..3ac7e3f
--- /dev/null
+++ b/src/media.js
@@ -0,0 +1,13 @@
+import { checkallHandler, closeSubmenus } from './fn/fn';
+
+window.addEventListener('load', () => {
+    let checkboxes = document.getElementsByName('id[]');
+    let checkall = document.getElementById('checkall');
+    let checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.addEventListener('input', checkallHandler.bind({ checkboxes }));
+    checkall.innerHTML = '';
+    checkall.appendChild(checkbox);
+});
+
+window.addEventListener('click', closeSubmenus);
diff --git a/webpack.config.js b/webpack.config.js
index c256ad2..1c38b9b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,6 +16,7 @@ module.exports = (env) => {
 		entry: {
 			edit: './src/edit.js',
 			home: './src/home.js',
+			media: './src/media.js',
 			sentry: './src/sentry.js',
 		},
 		output: {