From 871f82458212dc40514d90bffd50d5dae89ab694 Mon Sep 17 00:00:00 2001
From: jofrysutanto <jofrysutanto@gmail.com>
Date: Sat, 8 Aug 2015 22:52:21 +1000
Subject: [PATCH] Show mediamanager sidebar preview when "Go up" is selected.

Show more informative sidebar information when "Go up' is selected, instead of blank file information with 'null' public url.
---
 .../widgets/mediamanager/assets/css/mediamanager.css  |  2 +-
 .../assets/js/mediamanager-browser-min.js             |  6 ++++--
 .../widgets/mediamanager/assets/js/mediamanager.js    | 11 ++++++++---
 .../mediamanager/assets/less/mediamanager.less        |  2 +-
 .../mediamanager/partials/_item-sidebar-preview.htm   |  9 +++++++++
 5 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/modules/cms/widgets/mediamanager/assets/css/mediamanager.css b/modules/cms/widgets/mediamanager/assets/css/mediamanager.css
index 1786fc0d5..b5192d8ae 100644
--- a/modules/cms/widgets/mediamanager/assets/css/mediamanager.css
+++ b/modules/cms/widgets/mediamanager/assets/css/mediamanager.css
@@ -54,7 +54,7 @@ div[data-control="media-manager"] .sidebar-image-placeholder-container{display:t
 div[data-control="media-manager"] .sidebar-image-placeholder{display:table-cell;height:225px;position:relative;vertical-align:middle;text-align:center;border-bottom:1px solid #ecf0f1}
 div[data-control="media-manager"] .sidebar-image-placeholder[data-loading]{background:#ecf0f1}
 div[data-control="media-manager"] .sidebar-image-placeholder[data-loading]:after{background-image:url('../../../../../../modules/system/assets/ui/images/loader-transparent.svg');background-position:50% 50%;content:' ';-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;background-size:62px 62px;position:absolute;width:62px;height:62px;top:50%;left:50%;margin-top:-31px;margin-left:-31px}
-div[data-control="media-manager"] .sidebar-image-placeholder i.icon-chain-broken,div[data-control="media-manager"] .sidebar-image-placeholder i.icon-crop,div[data-control="media-manager"] .sidebar-image-placeholder i.icon-asterisk{color:#bdc3c7;font-size:55px}
+div[data-control="media-manager"] .sidebar-image-placeholder i.icon-chain-broken,div[data-control="media-manager"] .sidebar-image-placeholder i.icon-crop,div[data-control="media-manager"] .sidebar-image-placeholder i.icon-asterisk,div[data-control="media-manager"] .sidebar-image-placeholder i.icon-level-up{color:#bdc3c7;font-size:55px}
 div[data-control="media-manager"] .sidebar-image-placeholder.no-border{border-bottom:none}
 div[data-control="media-manager"] .sidebar-image-placeholder p{font-size:12px;margin:10px;line-height:160%;color:#bdc3c7;margin-top:25px}
 div[data-control="media-manager"] .list-container{position:relative;z-index:100}
diff --git a/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js b/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js
index b560c485b..49be8ccc6 100644
--- a/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js
+++ b/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js
@@ -185,7 +185,7 @@ this.$form.request(this.options.alias+'::onSetSidebarVisible',{data:{visible:(is
 MediaManager.prototype.updateSidebarMediaPreview=function(items){var previewPanel=this.sidebarPreviewElement,previewContainer=previewPanel.querySelector('[data-control="media-preview-container"]'),template=''
 for(var i=0,len=previewContainer.children.length;i<len;i++)
 previewContainer.removeChild(previewContainer.children[i])
-if(items.length==1){var item=items[0],documentType=item.getAttribute('data-document-type')
+if(items.length==1&&!items[0].hasAttribute('data-root')){var item=items[0],documentType=item.getAttribute('data-document-type')
 switch(documentType){case'audio':template=previewPanel.querySelector('[data-control="audio-template"]').innerHTML
 break;case'video':template=previewPanel.querySelector('[data-control="video-template"]').innerHTML
 break;case'image':template=previewPanel.querySelector('[data-control="image-template"]').innerHTML
@@ -193,6 +193,8 @@ break;}
 previewContainer.innerHTML=template.replace('{src}',item.getAttribute('data-public-url')).replace('{path}',item.getAttribute('data-path')).replace('{last-modified}',item.getAttribute('data-last-modified-ts'))
 if(documentType=='image')
 this.loadSidebarThumbnail()}
+else if(items.length==1&&items[0].hasAttribute('data-root')){template=previewPanel.querySelector('[data-control="go-up"]').innerHTML
+previewContainer.innerHTML=template}
 else if(items.length==0){template=previewPanel.querySelector('[data-control="no-selection-template"]').innerHTML
 previewContainer.innerHTML=template}
 else{template=previewPanel.querySelector('[data-control="multi-selection-template"]').innerHTML
@@ -201,7 +203,7 @@ MediaManager.prototype.updateSidebarPreview=function(resetSidebar){if(!this.side
 this.sidebarPreviewElement=this.$el.get(0).querySelector('[data-control="preview-sidebar"]')
 var items=resetSidebar===undefined?this.$el.get(0).querySelectorAll('[data-type="media-item"].selected'):[],previewPanel=this.sidebarPreviewElement
 if(items.length==0){this.sidebarPreviewElement.querySelector('[data-control="sidebar-labels"]').setAttribute('class','hide')}
-else if(items.length==1){this.sidebarPreviewElement.querySelector('[data-control="sidebar-labels"]').setAttribute('class','panel')
+else if(items.length==1&&!items[0].hasAttribute('data-root')){this.sidebarPreviewElement.querySelector('[data-control="sidebar-labels"]').setAttribute('class','panel')
 var item=items[0],lastModified=item.getAttribute('data-last-modified')
 previewPanel.querySelector('[data-label="size"]').textContent=item.getAttribute('data-size')
 previewPanel.querySelector('[data-label="title"]').textContent=item.getAttribute('data-title')
diff --git a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js
index 994a2a927..ee24325f8 100644
--- a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js
+++ b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js
@@ -440,7 +440,7 @@
         for (var i = 0, len = previewContainer.children.length; i < len; i++)
             previewContainer.removeChild(previewContainer.children[i])
 
-        if (items.length == 1) {
+        if (items.length == 1 && !items[0].hasAttribute('data-root')) {
             var item = items[0],
                 documentType = item.getAttribute('data-document-type')
 
@@ -464,6 +464,11 @@
             if (documentType == 'image')
                 this.loadSidebarThumbnail()
         }
+        else if (items.length == 1 && items[0].hasAttribute('data-root')) {
+            // "Go up" is selected
+            template = previewPanel.querySelector('[data-control="go-up"]').innerHTML
+            previewContainer.innerHTML = template
+        }
         else if (items.length == 0) {
             template = previewPanel.querySelector('[data-control="no-selection-template"]').innerHTML
             previewContainer.innerHTML = template
@@ -485,7 +490,7 @@
             // No items are selected
             this.sidebarPreviewElement.querySelector('[data-control="sidebar-labels"]').setAttribute('class', 'hide')
         } 
-        else if (items.length == 1) {
+        else if (items.length == 1 && !items[0].hasAttribute('data-root')) {
             this.sidebarPreviewElement.querySelector('[data-control="sidebar-labels"]').setAttribute('class', 'panel')
 
             // One item is selected - display the details
@@ -511,7 +516,7 @@
                 previewPanel.querySelector('[data-control="item-folder"]').setAttribute('class', 'hide')
         }
         else {
-            // Multiple items are selected
+            // Multiple items are selected or "Go up" is selected
             this.sidebarPreviewElement.querySelector('[data-control="sidebar-labels"]').setAttribute('class', 'hide')
         }
 
diff --git a/modules/cms/widgets/mediamanager/assets/less/mediamanager.less b/modules/cms/widgets/mediamanager/assets/less/mediamanager.less
index 306325bad..ffb948af2 100644
--- a/modules/cms/widgets/mediamanager/assets/less/mediamanager.less
+++ b/modules/cms/widgets/mediamanager/assets/less/mediamanager.less
@@ -323,7 +323,7 @@ div[data-control="media-manager"] {
             }
         }
 
-        i.icon-chain-broken, i.icon-crop, i.icon-asterisk {
+        i.icon-chain-broken, i.icon-crop, i.icon-asterisk, i.icon-level-up {
             color: #bdc3c7;
             font-size: 55px;
         }
diff --git a/modules/cms/widgets/mediamanager/partials/_item-sidebar-preview.htm b/modules/cms/widgets/mediamanager/partials/_item-sidebar-preview.htm
index 38007f55e..91e0e0c12 100644
--- a/modules/cms/widgets/mediamanager/partials/_item-sidebar-preview.htm
+++ b/modules/cms/widgets/mediamanager/partials/_item-sidebar-preview.htm
@@ -35,3 +35,12 @@
         </div>
     </div>
 </script>
+
+<script type="text/template" data-control="go-up">
+    <div class="sidebar-image-placeholder-container">
+        <div class="sidebar-image-placeholder no-border">
+            <i class="icon-level-up"></i>
+            <p><?= e(trans('cms::lang.media.return_to_parent')) ?></p>
+        </div>
+    </div>
+</script>
\ No newline at end of file