110 lines
3.5 KiB
JavaScript
Vendored
110 lines
3.5 KiB
JavaScript
Vendored
import './lib';
|
|
import '../app-common'
|
|
import {block, unblock} from '../utils/blockui'
|
|
import mediaLibrary from "../utils/media-library";
|
|
|
|
/**
|
|
* 開啟媒體庫
|
|
*
|
|
* @param single 是否為單選模式
|
|
* @param inputElement 自動會傳值進input元素
|
|
* @param selectMode 是否出現選擇按鈕
|
|
*/
|
|
app.methods.media = function(single = true, inputElement = '', selectMode = true, callback = null) {
|
|
let media = mediaLibrary({
|
|
url: app.admin.ajax.resource.mediaFile.upload,
|
|
translations: app.admin.translations.mediaLibrary,
|
|
csrfToken: app.csrfToken,
|
|
single: single,
|
|
selectMode: selectMode,
|
|
})
|
|
|
|
let resizeMediaLibraryWindow = () => {
|
|
let windowHeight = $(window).height(),
|
|
$mediaLib = $('#media-library');
|
|
let totalHeight = windowHeight * .98,
|
|
rowHeadHeight = 50,
|
|
rowFooterHeight = 40,
|
|
padding = 15 * 2,
|
|
rowBodyHeight = totalHeight - padding - rowHeadHeight - rowFooterHeight;
|
|
$mediaLib.height(totalHeight);
|
|
$mediaLib.find('.row-head').height(rowHeadHeight);
|
|
$mediaLib.find('.row-footer').height(rowFooterHeight);
|
|
$mediaLib.find('.row-body').height(rowBodyHeight);
|
|
$mediaLib.find('.tab-page, .category-list, .media-info-wrapper').height(rowBodyHeight);
|
|
$mediaLib.find('.col-media-info').css('marginTop', this.matchMediaInPx(768) ? 0 : rowHeadHeight);
|
|
media.$emit('resize', windowHeight, $(window).width())
|
|
}
|
|
|
|
$(window).on('resize', resizeMediaLibraryWindow);
|
|
resizeMediaLibraryWindow();
|
|
|
|
let closeMediaLibrary = () => {
|
|
$('#media-library').remove();
|
|
unblock();
|
|
$(window).off('resize', resizeMediaLibraryWindow);
|
|
}
|
|
|
|
if(callback) {
|
|
media.$on('media_selected', function(data){
|
|
callback(data);
|
|
})
|
|
}
|
|
|
|
if(inputElement) {
|
|
media.$on('media_selected', function(data){
|
|
if(typeof inputElement == 'string') {
|
|
document.querySelectorAll(inputElement).forEach(function(element, index){
|
|
element.value = data.idString;
|
|
});
|
|
} else if(inputElement instanceof HTMLElement) {
|
|
inputElement.value = data.idString;
|
|
}
|
|
});
|
|
}
|
|
|
|
media.$on('close', closeMediaLibrary);
|
|
|
|
block(media.$el, {
|
|
blockMsgClass: 'media-library',
|
|
onUnblock: function(){
|
|
closeMediaLibrary()
|
|
}
|
|
})
|
|
|
|
let $dropzone = $(media.$children[0].$refs.uploadZone).dropzone({
|
|
paramName: 'media_file',
|
|
url: app.admin.ajax.resource.mediaFile.upload,
|
|
headers: {
|
|
'X-CSRF-TOKEN': app.csrfToken
|
|
},
|
|
sending: function(file, xhr, formData){
|
|
formData.append('category', media.d.currentCategory);
|
|
},
|
|
success:function(response){
|
|
let responseBody = JSON.parse(response.xhr.response);
|
|
if(responseBody.category == media.d.currentCategory) {
|
|
media.d.medias.unshift(responseBody.media)
|
|
}
|
|
if(responseBody.category == 'all') {
|
|
media.$children[0].addCategoryCount('uncategorized', 1);
|
|
} else {
|
|
media.$children[0].addCategoryCount(responseBody.category, 1);
|
|
}
|
|
}
|
|
});
|
|
|
|
media.$on('remove_all_uploaded_files', function(){
|
|
$dropzone.get(0).dropzone.removeAllFiles();
|
|
});
|
|
|
|
return media;
|
|
}
|
|
|
|
|
|
$(() => {
|
|
$('#app-header .medialibrary').on('click', function(){
|
|
app.adminMediaLibrary = app.methods.media(false, null, false);
|
|
});
|
|
})
|