Merge media picker changes

classes/admin.php

@@ -1539,6 +1539,7 @@ class Admin
                 $page_files[] = [
                     'title' => $title,
                     'type' => $type,
+                    'page_route' => $page->route(),
                     'file' => $file->higherQualityAlternative()
                 ];
             }

themes/grav/app/forms/fields/index.js

@@ -6,6 +6,7 @@ import DateTimeField, { Instance as DateTimeFieldInstance } from './datetime';
 import EditorField, { Instance as EditorFieldInstance } from './editor';
 import ColorpickerField, { Instance as ColorpickerFieldInstance } from './colorpicker';
 import FilesField, { Instance as FilesFieldInstance } from './files';
+import MediapickerField, { Instance as MediapickerInstance } from './mediapicker';
 import SelectUniqueField, { Instance as SelectUniqueInstance } from './selectunique';
 
 export default {
@@ -44,6 +45,10 @@ export default {
     SelectUniqueField: {
         SelectUniqueField,
         Instance: SelectUniqueInstance
+    },
+    MediapickerField: {
+        MediapickerField,
+        Instance: MediapickerInstance
     }
 };
 

themes/grav/app/forms/fields/mediapicker.js

@@ -0,0 +1,36 @@
+import $ from 'jquery';
+import Scrollbar from '../../utils/scrollbar';
+
+$(function() {
+    var modal = '';
+
+    var treescroll = new Scrollbar('.pages-list-container .mediapicker-scroll');
+    var thumbscroll = new Scrollbar('.thumbs-list-container .mediapicker-scroll');
+
+    $(document).on('opened', '.remodal', function() {
+        setTimeout(function() {
+            treescroll.update();
+            thumbscroll.update();
+        }, 350);
+    });
+
+    $('body').on('click', '[data-mediapicker-modal-trigger]', function() {
+        var modal_identifier = $(this).data('grav-mediapicker-unique-identifier');
+        modal = $.remodal.lookup[$('body').find('[data-remodal-unique-identifier="' + modal_identifier + '"]').data('remodal')];
+        modal.open();
+    });
+
+    /* handle media modal click actions */
+    $('body').on('click', '[data-remodal-mediapicker] .media-container.in-modal .admin-media-details a', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        var val = $(event.target).parents('.js__media-element').data('file-url');
+        var string = val.replace(/ /g, '%20');
+
+        var modal_identifier = $(event.target).parents('[data-remodal-mediapicker]').data('remodal-unique-identifier');
+        $('body').find('[data-grav-mediapicker-unique-identifier="' + modal_identifier + '"] input').val(string);
+
+        modal.close();
+    });
+});

themes/grav/scss/template/_forms.scss

@@ -638,3 +638,4 @@ textarea.frontmatter {
     }
 }
 
+

themes/grav/scss/template/_media.scss

@@ -144,4 +144,130 @@ $dark-text: #333;
     a {
         color: #333;
     }
-}
+
+    .pages-list li {
+        list-style-type: none;
+        margin-left: 0;
+    }
+}
+
+//Mediapicker field
+.remodal.remodal-mediapicker {
+  max-width: 70vw;
+  padding: 0;
+}
+
+.media-container {
+  height: 70vh;
+
+
+  .grid {
+    justify-content: flex-start;
+  }
+
+  .gm-scrollbar {
+    background: rgba(255,255,255,0.2);
+
+    .thumb {
+      background-color: rgba(0,0,0,0.2);
+    }
+  }
+
+  h5 {
+    border-bottom: 1px solid #ddd;
+    padding: 0.5rem 15px;
+    margin: 0;
+    height: 55px;
+  }
+
+  .filter-wrapper {
+    float: right;
+    margin-right: 5px;
+    margin-top: 10px;
+  }
+
+  .filter-date {
+    width: 150px;
+
+  }
+
+  .filter-type {
+    width: 100px;
+    margin-right: 15px;
+  }
+
+  .pages-list-container {
+    position: relative;
+
+    .pages-list {
+      border-top: 0;
+      padding-right: 10px;
+      font-size: 90%;
+
+      .row {
+        transition: none !important;
+        line-height: 2rem;
+      }
+
+      @for $i from 1 to 10 {
+        .depth-#{$i} .row {
+          padding-left: 1rem * ($i + 1);
+        }
+
+      }
+
+    }
+
+    .mediapicker-scroll {
+      position: absolute;
+      top: 55px;
+      bottom: 3px;
+      height: inherit;
+    }
+  }
+
+  .thumbs-list-container {
+    position: relative;
+
+    .mediapicker-scroll {
+      position: absolute;
+      top: 55px;
+      bottom: 0px;
+      height: inherit;
+    }
+
+  }
+
+
+  #admin-media {
+
+    padding: 15px;
+
+    .card-item {
+      width: 100px;
+      padding: 2px;
+      margin: 0 5px 5px 0;
+      border: 0;
+
+      img {
+        display: block;
+      }
+    }
+
+    .admin-media-details {
+      position: relative;
+
+      .admin-media-title {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        background: rgba(0,0,0,0.3);
+        color: #fff;
+        font-size: 10px;
+        overflow: hidden;
+        line-height: 2;
+        text-indent: 2px;
+      }
+    }
+  }
+}

themes/grav/templates/forms/fields/mediapicker/mediapicker.html.twig

@@ -0,0 +1,20 @@
+{% extends "forms/fields/text/text.html.twig" %}
+
+{% set originalValue = value %}
+{% set value = (value is null ? field.default : value) %}
+
+{% set unique_identifier = random_string() %}
+
+{% block global_attributes %}
+{{ parent() }}
+data-mediapicker-modal-trigger
+data-grav-mediapicker-unique-identifier="{{ unique_identifier }}"
+{% endblock %}
+
+
+{% block contents %}
+{{ parent() }}
+<div class="remodal remodal-mediapicker" data-remodal-mediapicker data-remodal-unique-identifier="{{ unique_identifier }}" data-remodal-options="hashTracking: false">
+    {% include 'partials/media-list-wrapper.html.twig' with { is_modal: true } %}
+</div>
+{% endblock %}

themes/grav/templates/partials/media-list-wrapper__list.html.twig

@@ -1,7 +1,9 @@
 <div id="admin-media" class="files js__files card-row grid fixed-blocks pure-g">
-    {% include 'partials/media-list-wrapper__list__dropzone.html.twig' %}
+    {% if not is_modal %}
+        {% include 'partials/media-list-wrapper__list__dropzone.html.twig' ignore missing %}
+    {% endif %}
 
-    {% if grav.mediapicker.files is empty %}
+    {% if admin.files is empty %}
         <div class="empty-state">
             {% if (uri.param('type') or uri.param('date')) %}
                 <h2>Filtering by {{ uri.param('type') }} {{ uri.param('date') }}</h2>