From 5b1457835be6c00a7d108537ecc88d3d85d48d51 Mon Sep 17 00:00:00 2001
From: n-peugnet <n.peugnet@free.fr>
Date: Tue, 28 Apr 2020 18:08:35 +0200
Subject: feat: select all for code inputs

This enable the "select all" feature for `input.select-all` element.
input elements are used because these are the only one with the
`select()` method.
To obtain the same rendering as before the readonly attribute and the
class `code` have been added to these elements.

@vincent-peugnet: make sure to use this element for future select-all

Closes #107
---
 app/view/templates/homemenu.php  |  2 +-
 app/view/templates/media.php     |  2 +-
 app/view/templates/mediamenu.php |  2 +-
 assets/css/home.css              | 15 +++++++--------
 src/fn/fn.js                     | 21 +++++++++++++++++++++
 src/home.js                      |  4 +++-
 src/media.js                     |  4 +++-
 7 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/app/view/templates/homemenu.php b/app/view/templates/homemenu.php
index f3564f8..d58e91e 100644
--- a/app/view/templates/homemenu.php
+++ b/app/view/templates/homemenu.php
@@ -235,7 +235,7 @@
             <input type="submit" value="generate">
         </form>
         <?php if(!empty($optlist)) { ?>
-            <code><?= $optlist->getcode() ?></code>
+            <input readonly class="code select-all" value="<?= $optlist->getcode() ?>" />
         <?php } ?>
         </div>
         </details>
diff --git a/app/view/templates/media.php b/app/view/templates/media.php
index 9901b8e..faa1dd3 100644
--- a/app/view/templates/media.php
+++ b/app/view/templates/media.php
@@ -98,7 +98,7 @@ $this->layout('layout', ['title' => 'media', 'stylesheets' => [$css . 'home.css'
             <td><?= $media->uid('name') ?></td>
             <td><code><?= $media->permissions() ?></code></td>
             <td><?= $media->surface() ?></td>
-            <td class="code"><code><?= $media->getcode() ?></code></td>
+            <td><input readonly class="code select-all" value="<?= $media->getcode() ?>" /></td>
             </tr>
             <?php
         }
diff --git a/app/view/templates/mediamenu.php b/app/view/templates/mediamenu.php
index 2a33b65..b64bd25 100644
--- a/app/view/templates/mediamenu.php
+++ b/app/view/templates/mediamenu.php
@@ -73,7 +73,7 @@
 
 
             <p>Use this code to print the content of the actual folder in a page</p>
-            <code><?= $mediaopt->getcode() ?></code>
+            <input readonly class="code select-all" value="<?= $mediaopt->getcode() ?>" />
         </div>
     </details>
 
diff --git a/assets/css/home.css b/assets/css/home.css
index e06165b..2451f9b 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -125,7 +125,7 @@ div#deepsearchbar {
 
 
 
-aside .submenu code, main.user li code {
+aside .submenu input.code, main.user li code {
     overflow: auto;
     display: block;
     white-space: nowrap;
@@ -479,9 +479,10 @@ main.media table#medialist .thumbnail:hover img {
 
 
 
-main.media code {
+main.media code, input.code {
     color: #9cbfe8;
     background-color: darkslategrey;
+    font-family: monospace;
     font-size: small;
     padding: 1px;
 }
@@ -492,11 +493,9 @@ nav.media span#currentdir {
 
 
 
-td.code {
-    background-color: darkslategrey;
-    max-width: 250px;
-    white-space: nowrap;
-    overflow: hidden;
+input.code {
+    width: 100%;
+    border: none;
 }
 
 
@@ -599,7 +598,7 @@ main.timeline li.event {
 main section {
     display: flex;
     flex-direction: column;
-    max-width: calc(100% - 160px);
+    overflow: hidden;
 }
 
 main nav {
diff --git a/src/fn/fn.js b/src/fn/fn.js
index bca4eaf..a5aa538 100644
--- a/src/fn/fn.js
+++ b/src/fn/fn.js
@@ -28,3 +28,24 @@ export function closeSubmenus(e) {
         }
     }
 }
+
+/**
+ * Select the whole content of the clicked item.
+ * @param {MouseEvent} e
+ */
+function selectAll(e) {
+    if (e.target instanceof HTMLInputElement) {
+        e.target.select();
+        e.target.focus();
+    }
+}
+
+/**
+ * Activate "select all" feature for `input.select-all` elements.
+ */
+export function activateSelectAll() {
+    let selectAllInputs = document.querySelectorAll('input.select-all');
+    for (const selectAllInput of selectAllInputs) {
+        selectAllInput.addEventListener('click', selectAll);
+    }
+}
diff --git a/src/home.js b/src/home.js
index 3dc79ef..0778edb 100644
--- a/src/home.js
+++ b/src/home.js
@@ -1,4 +1,4 @@
-import { checkallHandler, closeSubmenus } from './fn/fn';
+import { checkallHandler, closeSubmenus, activateSelectAll } from './fn/fn';
 
 window.addEventListener('load', () => {
     let checkboxes = document.getElementsByName('pagesid[]');
@@ -11,6 +11,8 @@ window.addEventListener('load', () => {
     checkbox.addEventListener('input', checkallHandler.bind({ checkboxes }));
     checkall.innerHTML = '';
     checkall.appendChild(checkbox);
+
+    activateSelectAll();
 });
 
 window.addEventListener('click', closeSubmenus);
diff --git a/src/media.js b/src/media.js
index 3ac7e3f..356c7c9 100644
--- a/src/media.js
+++ b/src/media.js
@@ -1,4 +1,4 @@
-import { checkallHandler, closeSubmenus } from './fn/fn';
+import { checkallHandler, closeSubmenus, activateSelectAll } from './fn/fn';
 
 window.addEventListener('load', () => {
     let checkboxes = document.getElementsByName('id[]');
@@ -8,6 +8,8 @@ window.addEventListener('load', () => {
     checkbox.addEventListener('input', checkallHandler.bind({ checkboxes }));
     checkall.innerHTML = '';
     checkall.appendChild(checkbox);
+
+    activateSelectAll();
 });
 
 window.addEventListener('click', closeSubmenus);
-- 
cgit v1.2.3