TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
jofrysutanto 2015-08-08 22:52:21 +10:00
parent 218ebfd844
commit 871f824582
5 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/cms/widgets/mediamanager/assets/css/mediamanager.css
View File

@ -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}

6
modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js vendored
View File

@ -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')

11
modules/cms/widgets/mediamanager/assets/js/mediamanager.js
View File

@ -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')
}

2
modules/cms/widgets/mediamanager/assets/less/mediamanager.less
View File

@ -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;
}

9
modules/cms/widgets/mediamanager/partials/_item-sidebar-preview.htm
View File

@ -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>