From 6b7246771c876e5859fdb06ce91b5328e0b7b352 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 23 Jun 2021 10:19:49 +0200
Subject: [PATCH] backports murph-skeleton

---
 .../admin/components/file-manager/Files.vue   | 57 +++++++++++--------
 assets/js/admin/modules/batch.js              |  2 +-
 assets/js/admin/modules/choices.js            |  2 +-
 assets/js/admin/modules/datepicker.js         | 12 ++--
 assets/js/admin/modules/document-selector.js  |  1 -
 assets/js/admin/modules/editor.js             | 30 +++++-----
 assets/js/admin/modules/file-manager.js       |  2 +-
 assets/js/admin/modules/file-picker.js        |  2 +-
 assets/js/admin/modules/form-ajax.js          |  5 +-
 assets/js/admin/modules/sortable.js           |  4 +-
 10 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/assets/js/admin/components/file-manager/Files.vue b/assets/js/admin/components/file-manager/Files.vue
index c4c1266..0935199 100644
--- a/assets/js/admin/components/file-manager/Files.vue
+++ b/assets/js/admin/components/file-manager/Files.vue
@@ -1,27 +1,31 @@
 <template>
     <div>
-        <nav aria-label="breadcrumb bg-light">
-            <ol class="breadcrumb mb-0 float-right file-manager-views">
-                <li class="breadcrumb-item">
-                    <span class="fa fa-grip-horizontal" v-on:click="setView('grid')"></span>
-                </li>
-                <li class="breadcrumb-item">
-                    <span class="fa fa-list" v-on:click="setView('list')"></span>
-                </li>
-            </ol>
-
-            <ol class="breadcrumb mb-0 float-right file-manager-actions">
-                <li class="breadcrumb-item">
-                    <span class="fa fa-upload text-primary" v-bind:data-modal="generateUploadLink(directory)"></span>
-                    <span class="fa fa-folder-plus text-primary" v-bind:data-modal="generateNewDirectoryLink(directory)"></span>
-                </li>
-            </ol>
-
+        <nav aria-label="breadcrumb" class="d-flex justify-content-between">
             <ol class="breadcrumb mb-0">
-                <li class="breadcrumb-item" v-for="item in breadcrumb">
-                    <a href="#" v-on:click="setDirectory(item.path)" v-html="item.label"></a>
+                <li class="breadcrumb-item" v-for="item in breadcrumb" :key="item.label">
+                    <a class="btn btn-sm" href="#" v-on:click="setDirectory(item.path)" v-html="item.label"></a>
                 </li>
             </ol>
+
+            <div class="d-flex">
+                <div class="breadcrumb mb-0 file-manager-actions">
+                    <span class="btn btn-sm btn-primary ml-1">
+                        <span class="fa fa-upload" v-bind:data-modal="generateUploadLink(directory)"></span>
+                    </span>
+                    <span class="btn btn-sm btn-primary ml-1">
+                        <span class="fa fa-folder-plus" v-bind:data-modal="generateNewDirectoryLink(directory)"></span>
+                    </span>
+                </div>
+
+                <div class="breadcrumb mb-0 file-manager-views">
+                    <span class="btn btn-sm btn-dark ml-1">
+                        <span class="fa fa-grip-horizontal" v-on:click="setView('grid')"></span>
+                    </span>
+                    <span class="btn btn-sm btn-dark ml-1">
+                        <span class="fa fa-list" v-on:click="setView('list')"></span>
+                    </span>
+                </div>
+            </div>
         </nav>
 
         <div class="card-deck" v-if="view == 'grid'">
@@ -39,7 +43,7 @@
                 </div>
             </div>
 
-            <div v-for="item in directories" class="card mt-3 ml-3 mb-3 border-0">
+            <div v-for="item in directories" class="card mt-3 ml-3 mb-3 border-0" :key="item.path">
                 <div class="card-body p-2">
                     <div class="card-text" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)">
                         <div class="text-center">
@@ -60,7 +64,7 @@
                     </div>
                 </div>
             </div>
-            <div v-for="item in files" class="card mt-3 ml-3 mb-3 border-0" v-on:click="modalUrl = generateInfoLink(item, null, context)" v-bind:data-modal="generateInfoLink(item, null, context)">
+            <div v-for="item in files" class="card mt-3 ml-3 mb-3 border-0" v-on:click="modalUrl = generateInfoLink(item, null, context)" v-bind:data-modal="generateInfoLink(item, null, context)" :key="item.path">
                 <div class="card-body p-2">
                     <div class="card-text">
                         <div class="text-center">
@@ -94,7 +98,7 @@
                     </td>
                 </tr>
 
-                <tr v-for="item in directories" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)">
+                <tr v-for="item in directories" v-on:dblclick="setDirectory(item.path)" v-bind:data-modal="generateInfoLink(item, true, context)" :key="item.path">
                     <td width="10">
                         <span class="fa fa-folder text-warning"></span>
                     </td>
@@ -108,7 +112,7 @@
                         <span v-html="item.basename"></span>
                     </td>
                 </tr>
-                <tr v-for="item in files">
+                <tr v-for="item in files" :key="item.path">
                     <td width="10">
                         <FileIcon v-bind:mime="item.mime" v-bind:path="item.webPath" v-bind:thumb="false" />
                     </td>
@@ -151,14 +155,19 @@ tr {
     padding-left: 40px;
 }
 
-.breadcrumb {
+.breadcrumb, nav {
     border-radius: 0;
+    background: #e9ecef;
 }
 
 .file-manager-actions .fa {
     padding: 3px;
     cursor: pointer;
 }
+
+.breadcrumb-item + .breadcrumb-item::before {
+    margin-top: 4px;
+}
 </style>
 
 <script>
diff --git a/assets/js/admin/modules/batch.js b/assets/js/admin/modules/batch.js
index e9a3bd9..2d5c1f2 100644
--- a/assets/js/admin/modules/batch.js
+++ b/assets/js/admin/modules/batch.js
@@ -17,7 +17,7 @@ module.exports = () => {
 
     $.post(route, datas)
       .always(() => {
-        document.location.href = document.location.href
+        document.location.reload()
       })
   })
 }
diff --git a/assets/js/admin/modules/choices.js b/assets/js/admin/modules/choices.js
index 4d1f844..d2da709 100644
--- a/assets/js/admin/modules/choices.js
+++ b/assets/js/admin/modules/choices.js
@@ -3,6 +3,6 @@ const $ = require('jquery')
 
 module.exports = function () {
   $('*[data-jschoice]').each(function (key, item) {
-    new Choices(item)
+    return new Choices(item)
   })
 }
diff --git a/assets/js/admin/modules/datepicker.js b/assets/js/admin/modules/datepicker.js
index 53c3f90..673ae32 100644
--- a/assets/js/admin/modules/datepicker.js
+++ b/assets/js/admin/modules/datepicker.js
@@ -10,6 +10,12 @@ const isDateSupported = () => {
   return input.value !== value
 }
 
+const createDatePicker = (input) => {
+  return new Datepicker.Datepicker(input, {
+    format: 'yyyy-mm-dd'
+  })
+}
+
 module.exports = () => {
   if (isDateSupported()) {
     return
@@ -18,9 +24,7 @@ module.exports = () => {
   const inputs = document.querySelectorAll('input[type="date"]')
   const size = inputs.length
 
-  for (let i = 0, c = inputs.length; i < c; i++) {
-    new Datepicker.Datepicker(inputs[i], {
-      format: 'yyyy-mm-dd'
-    })
+  for (let i = 0, c = size; i < c; i++) {
+    createDatePicker(inputs[i])
   }
 }
diff --git a/assets/js/admin/modules/document-selector.js b/assets/js/admin/modules/document-selector.js
index 8912104..604f77f 100644
--- a/assets/js/admin/modules/document-selector.js
+++ b/assets/js/admin/modules/document-selector.js
@@ -2,7 +2,6 @@ const $ = require('jquery')
 
 const DocumentSelector = () => {
   const forms = $('.document-selector-form')
-  const btnSubmit = $('#download-archive-form button')
 
   const handler = function () {
     forms.each((fi, f) => {
diff --git a/assets/js/admin/modules/editor.js b/assets/js/admin/modules/editor.js
index a9c54c6..ba8cdcd 100644
--- a/assets/js/admin/modules/editor.js
+++ b/assets/js/admin/modules/editor.js
@@ -44,7 +44,7 @@ const fileManagerBrowser = function (callback) {
 
   $('body').on('click', '#file-manager-insert', clickCallback)
 
-  new Vue({
+  return new Vue({
     el: '#fm-modal-content',
     template: '<FileManager context="tinymce" />',
     components: {
@@ -53,10 +53,10 @@ const fileManagerBrowser = function (callback) {
   })
 }
 
-if (typeof tinymce !== 'undefined') {
-  tinymce.murph = tinymce.murph || {}
-  tinymce.murph.selector = tinymce.murph.selector || '*[data-tinymce]'
-  tinymce.murph.configurationBase = tinymce.murph.configurationBase || {
+if (typeof window.tinymce !== 'undefined') {
+  window.tinymce.murph = window.tinymce.murph || {}
+  window.tinymce.murph.selector = window.tinymce.murph.selector || '*[data-tinymce]'
+  window.tinymce.murph.configurationBase = window.tinymce.murph.configurationBase || {
     base_url: '/vendor/tinymce/',
     cache_suffix: '?v=4.1.6',
     importcss_append: true,
@@ -70,18 +70,18 @@ if (typeof tinymce !== 'undefined') {
     file_picker_types: 'image',
     init_instance_callback: function (editor) {
       editor.on('SetContent', () => {
-        tinymce.triggerSave(false, true)
+        window.tinymce.triggerSave(false, true)
       })
 
       editor.on('Change', () => {
-        tinymce.triggerSave(false, true)
+        window.tinymce.triggerSave(false, true)
       })
     }
   }
 
-  tinymce.murph.modes = tinymce.murph.modes || {}
+  window.tinymce.murph.modes = window.tinymce.murph.modes || {}
 
-  tinymce.murph.modes.default = tinymce.murph.modes.default || {
+  window.tinymce.murph.modes.default = window.tinymce.murph.modes.default || {
     plugins: 'print preview importcss searchreplace visualblocks visualchars fullscreen template table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars link image code autoresize',
     menubar: 'file edit view insert format tools table tc help',
     toolbar: 'undo redo | bold italic underline strikethrough | link image | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap | fullscreen preview',
@@ -89,7 +89,7 @@ if (typeof tinymce !== 'undefined') {
     contextmenu: 'link image imagetools table configurepermanentpen'
   }
 
-  tinymce.murph.modes.light = tinymce.murph.modes.light || {
+  window.tinymce.murph.modes.light = window.tinymce.murph.modes.light || {
     contextmenu: 'link image imagetools table configurepermanentpen',
     quickbars_selection_toolbar: 'bold italic',
     toolbar: 'undo redo | bold italic underline'
@@ -97,7 +97,7 @@ if (typeof tinymce !== 'undefined') {
 }
 
 const buildConfiguration = (conf) => {
-  return Object.assign({}, tinymce.murph.configurationBase, conf)
+  return Object.assign({}, window.tinymce.murph.configurationBase, conf)
 }
 
 const makeId = () => {
@@ -113,7 +113,7 @@ const makeId = () => {
 }
 
 const doInitEditor = () => {
-  $(tinymce.murph.selector).each((i, v) => {
+  $(window.tinymce.murph.selector).each((i, v) => {
     const element = $(v)
     let id = null
 
@@ -130,15 +130,15 @@ const doInitEditor = () => {
       mode = 'default'
     }
 
-    if (!tinymce.murph.modes.hasOwnProperty(mode)) {
+    if (!Object.prototype.hasOwnProperty.call(window.tinymce.murph.modes, mode)) {
       return
     }
 
-    const conf = buildConfiguration(tinymce.murph.modes[mode])
+    const conf = buildConfiguration(window.tinymce.murph.modes[mode])
     conf.mode = 'exact'
     conf.elements = id
 
-    tinymce.init(conf)
+    window.tinymce.init(conf)
   })
 }
 
diff --git a/assets/js/admin/modules/file-manager.js b/assets/js/admin/modules/file-manager.js
index f0f0bed..344a2b4 100644
--- a/assets/js/admin/modules/file-manager.js
+++ b/assets/js/admin/modules/file-manager.js
@@ -7,7 +7,7 @@ module.exports = () => {
     return
   }
 
-  new Vue({
+  return new Vue({
     el: '#file-manager',
     template: '<FileManager context="crud" />',
     components: {
diff --git a/assets/js/admin/modules/file-picker.js b/assets/js/admin/modules/file-picker.js
index 5484ead..5bf5b41 100644
--- a/assets/js/admin/modules/file-picker.js
+++ b/assets/js/admin/modules/file-picker.js
@@ -44,7 +44,7 @@ const fileManagerBrowser = function (callback) {
 
   $('body').on('click', '#file-manager-insert', clickCallback)
 
-  new Vue({
+  return new Vue({
     el: '#fm-modal-content',
     template: '<FileManager context="tinymce" />',
     components: {
diff --git a/assets/js/admin/modules/form-ajax.js b/assets/js/admin/modules/form-ajax.js
index 5b355d7..1d43f38 100644
--- a/assets/js/admin/modules/form-ajax.js
+++ b/assets/js/admin/modules/form-ajax.js
@@ -7,7 +7,6 @@ module.exports = function () {
     const target = e.target
     const form = $(target)
     const data = new FormData(target)
-    const type = form.attr('enctype')
     const method = form.attr('method')
     const files = form.find('input[type=file]')
 
@@ -22,11 +21,11 @@ module.exports = function () {
       contentType: false,
       type: method || 'GET',
       success: function (data) {
-        if (data.hasOwnProperty('_dispatch')) {
+        if (Object.prototype.hasOwnProperty.call(data, '_dispatch')) {
           $('body').trigger(data._dispatch)
         }
 
-        if (data.hasOwnProperty('_message') && data.hasOwnProperty('_level')) {
+        if (Object.prototype.hasOwnProperty.call(data, '_message') && Object.prototype.hasOwnProperty.call(data, '_level')) {
           const message = data._message
           const level = data._level
           const titles = {
diff --git a/assets/js/admin/modules/sortable.js b/assets/js/admin/modules/sortable.js
index c395e4d..7f2b7bf 100644
--- a/assets/js/admin/modules/sortable.js
+++ b/assets/js/admin/modules/sortable.js
@@ -6,7 +6,7 @@ module.exports = () => {
     const element = $(list)
     const route = element.attr('data-sortable-route')
 
-    new Sortable(list, {
+    return new Sortable(list, {
       handle: '*[data-sortable-item]',
       sort: true,
       animation: 150,
@@ -25,7 +25,7 @@ module.exports = () => {
 
         $.post(route, datas)
           .always((data) => {
-            document.location.href = document.location.href
+            document.location.reload()
           })
       }
     })