Added unset functionality to pagemedia (dropzone) (#1366)

* Added unset functionality to pagemedia (dropzone). Unset removes the file from the page without deleting it from the system.

* Update unset.js for formatting

* Update unset.js. Removed console log and modified JSON parsing for native faster one.

* Updated unset.js. Fixed quote style

* Fixed couple issues with the unset of images

* Merged with latest Admin

admin.php

@@ -693,6 +693,7 @@ class AdminPlugin extends Plugin
             'FILE_ERROR_UPLOAD',
             'DROP_FILES_HERE_TO_UPLOAD',
             'DELETE',
+            'UNSET',
             'INSERT',
             'METADATA',
             'VIEW',

languages/en.yaml

@@ -36,6 +36,7 @@ PLUGIN_ADMIN:
   ADD_MODULAR: "Add Modular"
   MOVE: "Move"
   DELETE: "Delete"
+  UNSET: "Unset"
   VIEW: "View"
   SAVE: "Save"
   NORMAL: "Normal"

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

@@ -63,6 +63,7 @@ const DropzoneMediaConfig = {
           <div class="dz-success-mark"><span>✔</span></div>
           <div class="dz-error-mark"><span>✘</span></div>
           <div class="dz-error-message"><span data-dz-errormessage></span></div>
+          <a class="dz-unset" title="${translations.PLUGIN_ADMIN.UNSET}" href="#" data-dz-unset>${translations.PLUGIN_ADMIN.UNSET}</a>
           <a class="dz-remove" title="${translations.PLUGIN_ADMIN.DELETE}" href="javascript:undefined;" data-dz-remove>${translations.PLUGIN_ADMIN.DELETE}</a>
           <a class="dz-metadata" title="${translations.PLUGIN_ADMIN.METADATA}" href="#" target="_blank" data-dz-metadata>${translations.PLUGIN_ADMIN.METADATA}</a>
           <a class="dz-view" title="${translations.PLUGIN_ADMIN.VIEW}" href="#" target="_blank" data-dz-view>${translations.PLUGIN_ADMIN.VIEW}</a>

themes/grav/app/pages/page/index.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import './add';
 import './move';
 import './delete';
+import './unset';
 import './disable-buttons';
 import PageMedia, { Instance as PageMediaInstances } from './media';
 import './multilang';

themes/grav/app/pages/page/media.js

@@ -194,4 +194,3 @@ export default class PageMedia extends FilesField {
 }
 
 export let Instance = new PageMedia();
-

themes/grav/app/pages/page/unset.js

@@ -0,0 +1,15 @@
+import $ from 'jquery';
+
+$(document).on('click', '.dz-unset', function() {
+    $(this).closest('.dz-image-preview').remove();
+    const file_upload = $('.files-upload');
+    const unset_image = $(this).closest('.dz-image-preview').find('[data-dz-name]').text().trim();
+    const images = JSON.parse(file_upload.find('input[data-grav-field="hidden"]').val()) || {};
+    let image_array = {};
+    $.each(images, function(ind, obj) {
+        if (!ind.endsWith(unset_image)) {
+            image_array[ind] = obj;
+        }
+    });
+    file_upload.find('input[data-grav-field="hidden"]').val(JSON.stringify(image_array));
+});

themes/grav/scss/preset.scss

@@ -1328,7 +1328,7 @@ form {
             }
         }
 
-        .dz-remove, .dz-view, .dz-insert, .dz-metadata {
+        .dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
 
             background: darken($content-bg,5%);
 

themes/grav/scss/template/_dropzone.scss

@@ -110,7 +110,7 @@ $preview-height: 150px;
         }
 
         &:hover {
-            .dz-remove, .dz-view, .dz-insert, .dz-metadata {
+            .dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
                 display: block;
             }
 
@@ -120,7 +120,7 @@ $preview-height: 150px;
             display: block;
         }
 
-        //.dz-remove, .dz-insert {
+        //.dz-remove, .dz-unset, .dz-insert {
         //    display: none;
         //}
 
@@ -138,7 +138,7 @@ $preview-height: 150px;
             text-overflow: ellipsis;
         }
 
-        .dz-remove, .dz-view, .dz-insert, .dz-metadata {
+        .dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
             display: none;
             position: absolute;
             width: 25px;
@@ -180,12 +180,19 @@ $preview-height: 150px;
 
         .dz-remove {
             top: 72px;
+            &:after {
+                content: '\f1f8';
+            }
+        }
+
+        .dz-unset {
+            top: 96px;
             border-bottom-right-radius: 4px;
             &:after {
                 content: '\f00d';
             }
         }
-
+        
         .dz-metadata {
             top: 49px;
             &:after {
@@ -201,10 +208,13 @@ $preview-height: 150px;
             .dz-remove {
                 top: 24px;
             }
+            .dz-unset {
+                top: 72px;
+            }
         }
 
 
-        //&:hover .dz-remove:not(.file-thumbnail-remove), &:hover .dz-insert {
+        //&:hover .dz-remove, .dz-unset:not(.file-thumbnail-remove), &:hover .dz-insert {
         //    display: block;
         //    position: absolute;
         //    left: 0;
@@ -216,7 +226,7 @@ $preview-height: 150px;
         //    font-size: 0.8rem;
         //}
 
-        &:hover .dz-remove {
+        &:hover .dz-remove, &:hover .dz-unset {
             &.file-thumbnail-remove {
                 display: block;
             }
@@ -232,7 +242,7 @@ $preview-height: 150px;
         //}
         //
         //&.hide-backface:hover {
-        //    .dz-remove, .dz-insert {
+        //    .dz-remove, .dz-unset, .dz-insert {
         //        display: none;
         //    }
         //}