From 5cf9dcf8363b536eacd8f2307bc3752e83d1279a Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Tue, 22 Jun 2021 15:18:28 +0200
Subject: [PATCH] backports murph-skeleton

---
 assets/js/admin/admin.js                      |  1 +
 assets/js/admin/modules/editor.js             | 18 +++--
 assets/js/admin/modules/file-picker.js        | 71 +++++++++++++++++++
 core/Form/FileManager/FilePickerType.php      | 37 ++++++++++
 core/Resources/translations/messages.fr.yaml  |  1 +
 .../form/bootstrap_4_form_theme.html.twig     | 55 ++++++++++++++
 6 files changed, 176 insertions(+), 7 deletions(-)
 create mode 100644 assets/js/admin/modules/file-picker.js
 create mode 100644 core/Form/FileManager/FilePickerType.php

diff --git a/assets/js/admin/admin.js b/assets/js/admin/admin.js
index af36683..0bf8794 100644
--- a/assets/js/admin/admin.js
+++ b/assets/js/admin/admin.js
@@ -22,3 +22,4 @@ require('./modules/datepicker.js')()
 require('./modules/sortable.js')()
 require('./modules/batch.js')()
 require('./modules/file-manager.js')()
+require('./modules/file-picker.js')()
diff --git a/assets/js/admin/modules/editor.js b/assets/js/admin/modules/editor.js
index d9e0652..a9c54c6 100644
--- a/assets/js/admin/modules/editor.js
+++ b/assets/js/admin/modules/editor.js
@@ -2,12 +2,12 @@ const $ = require('jquery')
 const Vue = require('vue').default
 const FileManager = require('../components/file-manager/FileManager').default
 
-const createModal = function (url) {
-  let container = $('#file-manager-modal-container')
+const createModal = function () {
+  let container = $('#fm-modal')
   const body = $('body')
 
   if (!container.length) {
-    container = $('<div id="file-manager-modal-container" class="modal">')
+    container = $('<div id="fm-modal" class="modal">')
 
     body.append(container)
   }
@@ -16,7 +16,7 @@ const createModal = function (url) {
 <div class="modal-dialog modal-dialog-large">
     <div class="modal-content">
         <div class="modal-body">
-            <div id="file-manager-modal-content">
+            <div id="fm-modal-content">
             </div>
         </div>
         <div class="modal-footer">
@@ -34,14 +34,18 @@ const createModal = function (url) {
 const fileManagerBrowser = function (callback) {
   const container = createModal()
 
-  $('body').on('click', '#file-manager-insert', (e) => {
+  const clickCallback = (e) => {
     callback($(e.target).attr('data-value'), {})
     $('#modal-container').modal('hide')
     container.modal('hide')
-  })
+
+    $('body').off('click', '#file-manager-insert', clickCallback)
+  }
+
+  $('body').on('click', '#file-manager-insert', clickCallback)
 
   new Vue({
-    el: '#file-manager-modal-content',
+    el: '#fm-modal-content',
     template: '<FileManager context="tinymce" />',
     components: {
       FileManager
diff --git a/assets/js/admin/modules/file-picker.js b/assets/js/admin/modules/file-picker.js
new file mode 100644
index 0000000..5484ead
--- /dev/null
+++ b/assets/js/admin/modules/file-picker.js
@@ -0,0 +1,71 @@
+const $ = require('jquery')
+const Vue = require('vue').default
+const FileManager = require('../components/file-manager/FileManager').default
+
+const createModal = function () {
+  let container = $('#fm-modal')
+  const body = $('body')
+
+  if (!container.length) {
+    container = $('<div id="fm-modal" class="modal">')
+
+    body.append(container)
+  }
+
+  container.html(`
+<div class="modal-dialog modal-dialog-large">
+    <div class="modal-content">
+        <div class="modal-body">
+            <div id="fm-modal-content">
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+    </div>
+</div>
+`)
+
+  $(container).modal('show')
+
+  return $(container)
+}
+
+const fileManagerBrowser = function (callback) {
+  const container = createModal()
+
+  const clickCallback = (e) => {
+    callback($(e.target).attr('data-value'), {})
+    $('#modal-container').modal('hide')
+    container.modal('hide')
+
+    $('body').off('click', '#file-manager-insert', clickCallback)
+  }
+
+  $('body').on('click', '#file-manager-insert', clickCallback)
+
+  new Vue({
+    el: '#fm-modal-content',
+    template: '<FileManager context="tinymce" />',
+    components: {
+      FileManager
+    }
+  })
+}
+
+module.exports = function () {
+  $('body').on('click', '.form-filepicker-picker', (e) => {
+    e.preventDefault()
+
+    const picker = $(e.target)
+    const id = '#' + picker.attr('data-target')
+    const input = $(id)
+
+    fileManagerBrowser((value) => {
+      value = value.replace(/^\//, '')
+
+      picker.parent('.form-filepicker-container').find('input.form-filepicker-picker').val(value)
+      input.val(value)
+    })
+  })
+}
diff --git a/core/Form/FileManager/FilePickerType.php b/core/Form/FileManager/FilePickerType.php
new file mode 100644
index 0000000..666c789
--- /dev/null
+++ b/core/Form/FileManager/FilePickerType.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Core\Form\FileManager;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+
+class FilePickerType extends AbstractType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['pattern'] = null;
+        unset($view->vars['attr']['pattern']);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getParent()
+    {
+        return TextType::class;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getBlockPrefix()
+    {
+        return 'file_picker';
+    }
+}
diff --git a/core/Resources/translations/messages.fr.yaml b/core/Resources/translations/messages.fr.yaml
index 36e0d9b..f060a1e 100644
--- a/core/Resources/translations/messages.fr.yaml
+++ b/core/Resources/translations/messages.fr.yaml
@@ -189,3 +189,4 @@
 "Preview": "Aperçu"
 "Insert": "Insérer"
 "Attributes": "Attributs"
+"Choose": "Choisir"
diff --git a/core/Resources/views/form/bootstrap_4_form_theme.html.twig b/core/Resources/views/form/bootstrap_4_form_theme.html.twig
index ef80b40..07341bf 100644
--- a/core/Resources/views/form/bootstrap_4_form_theme.html.twig
+++ b/core/Resources/views/form/bootstrap_4_form_theme.html.twig
@@ -113,6 +113,61 @@
     </template>
 {% endblock %}
 
+{% block file_picker_widget %}
+    <div class="form-filepicker">
+        {% set value = form.vars.data %}
+
+        <div class="card">
+            {% if value %}
+                {% if value.extension is defined and value.extension in ['jpeg', 'jpg', 'gif', 'png', 'svg'] %}
+                    <div class="card-img-top bg-tiles text-center">
+                        <a href="{{ asset(value.pathname) }}" target="_blank">
+                            <img src="{{ asset(value.pathname) }}" class="img-fluid">
+                        </a>
+                    </div>
+                {% else %}
+                    {% for extension in ['.jpeg', '.jpg', '.gif', '.png', '.svg'] %}
+                        {% if value ends with extension %}
+                            <div class="card-img-top bg-tiles text-center">
+                                <a href="{{ asset(value) }}" target="_blank">
+                                    <img src="{{ asset(value) }}" class="img-fluid">
+                                </a>
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                {% endif %}
+            {% endif %}
+
+            <div class="card-body">
+                <div class="d-none">
+                    {{- form_widget(form) -}}
+                </div>
+
+                <div class="p-2 text-center">
+                    <span class="form-filepicker-container">
+                        <input class="form-control form-filepicker-picker mb-3" data-target="{{ id }}" readonly type="text" value="{{ value }}">
+                        <span class="btn btn-primary form-filepicker-picker" data-target="{{ id }}">
+                            {{ 'Choose'|trans }}
+                        </span>
+                    </span>
+
+                    {% if value %}
+                        {% if value.pathname is defined %}
+                            <a class="btn btn-success ml-1" href="{{ asset(value.pathname) }}" target="_blank">
+                                {{ 'Download'|trans }}
+                            </a>
+                        {% else %}
+                            <a class="btn btn-success ml-1" href="{{ asset(value) }}" target="_blank">
+                                {{ 'Download'|trans }}
+                            </a>
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
 {% block form_row -%}
     {%- set widget_attr = {} -%}