var lfm_route = location.origin + location.pathname; var show_list; var sort_type = 'alphabetic'; var multi_selection_enabled = false; var selected = []; var items = []; $.fn.fab = function (options) { var menu = this; menu.addClass('fab-wrapper'); var toggler = $('') .addClass('fab-button fab-toggle') .append($('').addClass('fas fa-plus')) .click(function () { menu.toggleClass('fab-expand'); }); menu.append(toggler); options.buttons.forEach(function (button) { toggler.before( $('').addClass('fab-button fab-action') .attr('data-label', button.label) .attr('id', button.attrs.id) .append($('').addClass(button.icon)) .click(function () { menu.removeClass('fab-expand'); }) ); }); }; $(document).ready(function () { $('#fab').fab({ buttons: [ { icon: 'fas fa-upload', label: lang['nav-upload'], attrs: {id: 'upload'} }, { icon: 'fas fa-folder', label: lang['nav-new'], attrs: {id: 'add-folder'} } ] }); actions.reverse().forEach(function (action) { $('#nav-buttons > ul').prepend( $('
  • ').addClass('nav-item').append( $('').addClass('nav-link d-none') .attr('data-action', action.name) .attr('data-multiple', action.multiple) .append($('').addClass('fas fa-fw fa-' + action.icon)) .append($('').text(action.label)) ) ); }); sortings.forEach(function (sort) { $('#nav-buttons .dropdown-menu').append( $('').addClass('dropdown-item').attr('data-sortby', sort.by) .append($('').addClass('fas fa-fw fa-' + sort.icon)) .append($('').text(sort.label)) .click(function() { sort_type = sort.by; loadItems(); }) ); }); loadFolders(); performLfmRequest('errors') .done(function (response) { JSON.parse(response).forEach(function (message) { $('#alerts').append( $('
    ').addClass('alert alert-warning') .append($('').addClass('fas fa-exclamation-circle')) .append(' ' + message) ); }); }); $(window).on('dragenter', function(){ $('#uploadModal').modal('show'); }); if (usingWysiwygEditor()) { $('#multi_selection_toggle').hide(); } }); // ====================== // == Navbar actions == // ====================== $('#multi_selection_toggle').click(function () { multi_selection_enabled = !multi_selection_enabled; $('#multi_selection_toggle i') .toggleClass('fa-times', multi_selection_enabled) .toggleClass('fa-check-double', !multi_selection_enabled); if (!multi_selection_enabled) { clearSelected(); } }); $('#to-previous').click(function () { var previous_dir = getPreviousDir(); if (previous_dir == '') return; goTo(previous_dir); }); function toggleMobileTree(should_display) { if (should_display === undefined) { should_display = !$('#tree').hasClass('in'); } $('#tree').toggleClass('in', should_display); } $('#show_tree').click(function (e) { toggleMobileTree(); }); $('#main').click(function (e) { if ($('#tree').hasClass('in')) { toggleMobileTree(false); } }); $(document).on('click', '#add-folder', function () { dialog(lang['message-name'], '', createFolder); }); $(document).on('click', '#upload', function () { $('#uploadModal').modal('show'); }); $(document).on('click', '[data-display]', function() { show_list = $(this).data('display'); loadItems(); }); $(document).on('click', '[data-action]', function() { window[$(this).data('action')]($(this).data('multiple') ? getSelectedItems() : getOneSelectedElement()); }); // ========================== // == Multiple Selection == // ========================== function toggleSelected (e) { if (!multi_selection_enabled) { selected = []; } var sequence = $(e.target).closest('a').data('id'); var element_index = selected.indexOf(sequence); if (element_index === -1) { selected.push(sequence); } else { selected.splice(element_index, 1); } updateSelectedStyle(); } function clearSelected () { selected = []; multi_selection_enabled = false; updateSelectedStyle(); } function updateSelectedStyle() { items.forEach(function (item, index) { $('[data-id=' + index + ']') .find('.square') .toggleClass('selected', selected.indexOf(index) > -1); }); toggleActions(); } function getOneSelectedElement(orderOfItem) { var index = orderOfItem !== undefined ? orderOfItem : selected[0]; return items[index]; } function getSelectedItems() { return selected.reduce(function (arr_objects, id) { arr_objects.push(getOneSelectedElement(id)); return arr_objects }, []); } function toggleActions() { var one_selected = selected.length === 1; var many_selected = selected.length >= 1; var only_image = getSelectedItems() .filter(function (item) { return !item.is_image; }) .length === 0; var only_file = getSelectedItems() .filter(function (item) { return !item.is_file; }) .length === 0; $('[data-action=use]').toggleClass('d-none', !(many_selected && only_file)); $('[data-action=rename]').toggleClass('d-none', !one_selected); $('[data-action=preview]').toggleClass('d-none', !(many_selected && only_file)); $('[data-action=move]').toggleClass('d-none', !many_selected); $('[data-action=download]').toggleClass('d-none', !(many_selected && only_file)); $('[data-action=resize]').toggleClass('d-none', !(one_selected && only_image)); $('[data-action=crop]').toggleClass('d-none', !(one_selected && only_image)); $('[data-action=trash]').toggleClass('d-none', !many_selected); $('[data-action=open]').toggleClass('d-none', !one_selected || only_file); $('#multi_selection_toggle').toggleClass('d-none', usingWysiwygEditor() || !many_selected); $('#actions').toggleClass('d-none', selected.length === 0); $('#fab').toggleClass('d-none', selected.length !== 0); } // ====================== // == Folder actions == // ====================== $(document).on('click', '#tree a', function (e) { goTo($(e.target).closest('a').data('path')); toggleMobileTree(false); }); function goTo(new_dir) { $('#working_dir').val(new_dir); loadItems(); } function getPreviousDir() { var working_dir = $('#working_dir').val(); return working_dir.substring(0, working_dir.lastIndexOf('/')); } function setOpenFolders() { $('#tree [data-path]').each(function (index, folder) { // close folders that are not parent var should_open = ($('#working_dir').val() + '/').startsWith($(folder).data('path') + '/'); $(folder).children('i') .toggleClass('fa-folder-open', should_open) .toggleClass('fa-folder', !should_open); }); $('#tree .nav-item').removeClass('active'); $('#tree [data-path="' + $('#working_dir').val() + '"]').parent('.nav-item').addClass('active'); } // ==================== // == Ajax actions == // ==================== function performLfmRequest(url, parameter, type) { var data = defaultParameters(); if (parameter != null) { $.each(parameter, function (key, value) { data[key] = value; }); } return $.ajax({ type: 'GET', beforeSend: function(request) { var token = getUrlParam('token'); if (token !== null) { request.setRequestHeader("Authorization", 'Bearer ' + token); } }, dataType: type || 'text', url: lfm_route + '/' + url, data: data, cache: false }).fail(function (jqXHR, textStatus, errorThrown) { displayErrorResponse(jqXHR); }); } function displayErrorResponse(jqXHR) { notify('
    ' + jqXHR.responseText + '
    '); } var refreshFoldersAndItems = function (data) { loadFolders(); if (data != 'OK') { data = Array.isArray(data) ? data.join('
    ') : data; notify(data); } }; var hideNavAndShowEditor = function (data) { $('#nav-buttons > ul').addClass('d-none'); $('#content').html(data); $('#pagination').removeClass('preserve_actions_space') clearSelected(); } function loadFolders() { performLfmRequest('folders', {}, 'html') .done(function (data) { $('#tree').html(data); loadItems(); }); } function generatePaginationHTML(el, args) { var template = '
  • <\/li>'; var linkTemplate = '<\/a>'; var currentPage = args.currentPage; var totalPage = args.totalPage; var rangeStart = args.rangeStart; var rangeEnd = args.rangeEnd; var i; // Disable page range, display all the pages if (args.pageRange === null) { for (i = 1; i <= totalPage; i++) { var button = $(template) .attr('data-num', i) .append($(linkTemplate).html(i)); if (i == currentPage) { button.addClass('active'); } el.append(button); } return; } if (rangeStart <= 3) { for (i = 1; i < rangeStart; i++) { var button = $(template) .attr('data-num', i) .append($(linkTemplate).html(i)); if (i == currentPage) { button.addClass('active'); } el.append(button); } } else { var button = $(template) .attr('data-num', 1) .append($(linkTemplate).html(1)); el.append(button); var button = $(template) .addClass('disabled') .append($(linkTemplate).html('...')); el.append(button); } for (i = rangeStart; i <= rangeEnd; i++) { var button = $(template) .attr('data-num', i) .append($(linkTemplate).html(i)); if (i == currentPage) { button.addClass('active'); } el.append(button); } if (rangeEnd >= totalPage - 2) { for (i = rangeEnd + 1; i <= totalPage; i++) { var button = $(template) .attr('data-num', i) .append($(linkTemplate).html(i)); el.append(button); } } else { var button = $(template) .addClass('disabled') .append($(linkTemplate).html('...')); el.append(button); var button = $(template) .attr('data-num', totalPage) .append($(linkTemplate).html(totalPage)); el.append(button); } } function createPagination(paginationSetting) { var el = $(''); var currentPage = paginationSetting.current_page; var pageRange = 5; var totalPage = Math.ceil(paginationSetting.total / paginationSetting.per_page); var rangeStart = currentPage - pageRange; var rangeEnd = currentPage + pageRange; if (rangeEnd > totalPage) { rangeEnd = totalPage; rangeStart = totalPage - pageRange * 2; rangeStart = rangeStart < 1 ? 1 : rangeStart; } if (rangeStart <= 1) { rangeStart = 1; rangeEnd = Math.min(pageRange * 2 + 1, totalPage); } generatePaginationHTML(el, { totalPage: totalPage, currentPage: currentPage, pageRange: pageRange, rangeStart: rangeStart, rangeEnd: rangeEnd }); $('#pagination').append(el); } function loadItems(page) { loading(true); performLfmRequest('jsonitems', {show_list: show_list, sort_type: sort_type, page: page || 1}, 'html') .done(function (data) { selected = []; var response = JSON.parse(data); var working_dir = response.working_dir; items = response.items; var hasItems = items.length !== 0; var hasPaginator = !!response.paginator; $('#empty').toggleClass('d-none', hasItems); $('#content').html('').removeAttr('class'); $('#pagination').html('').removeAttr('class'); if (hasItems) { $('#content').addClass(response.display); $('#pagination').addClass('preserve_actions_space'); items.forEach(function (item, index) { var template = $('#item-template').clone() .removeAttr('id class') .attr('data-id', index) .click(toggleSelected) .dblclick(function (e) { if (item.is_file) { use(getSelectedItems()); } else { goTo(item.url); } }); if (item.thumb_url) { var image = $('
    ').css('background-image', 'url("' + item.thumb_url + '?timestamp=' + item.time + '")'); } else { var icon = $('
    ').addClass('ico'); var image = $('
    ').addClass('mime-icon ico-' + item.icon).append(icon); } template.find('.square').append(image); template.find('.item_name').text(item.name); template.find('time').text((new Date(item.time * 1000)).toLocaleString()); $('#content').append(template); }); } if (hasPaginator) { createPagination(response.paginator); $('#pagination a').on('click', function(event) { event.preventDefault(); loadItems($(this).closest('li')[0].getAttribute('data-num')); return false; }); } $('#nav-buttons > ul').removeClass('d-none'); $('#working_dir').val(working_dir); console.log('Current working_dir : ' + working_dir); var breadcrumbs = []; var validSegments = working_dir.split('/').filter(function (e) { return e; }); validSegments.forEach(function (segment, index) { if (index === 0) { // set root folder name as the first breadcrumb breadcrumbs.push($("[data-path='/" + segment + "']").text()); } else { breadcrumbs.push(segment); } }); $('#current_folder').text(breadcrumbs[breadcrumbs.length - 1]); $('#breadcrumbs > ol').html(''); breadcrumbs.forEach(function (breadcrumb, index) { var li = $('
  • ').addClass('breadcrumb-item').text(breadcrumb); if (index === breadcrumbs.length - 1) { li.addClass('active').attr('aria-current', 'page'); } else { li.click(function () { // go to corresponding path goTo('/' + validSegments.slice(0, 1 + index).join('/')); }); } $('#breadcrumbs > ol').append(li); }); var atRootFolder = getPreviousDir() == ''; $('#to-previous').toggleClass('d-none invisible-lg', atRootFolder); $('#show_tree').toggleClass('d-none', !atRootFolder).toggleClass('d-block', atRootFolder); setOpenFolders(); loading(false); toggleActions(); }); } function loading(show_loading) { $('#loading').toggleClass('d-none', !show_loading); } function createFolder(folder_name) { performLfmRequest('newfolder', {name: folder_name}) .done(refreshFoldersAndItems); } // ================================== // == File Actions == // ================================== function rename(item) { dialog(lang['message-rename'], item.name, function (new_name) { performLfmRequest('rename', { file: item.name, new_name: new_name }).done(refreshFoldersAndItems); }); } function trash(items) { notify(lang['message-delete'], function () { performLfmRequest('delete', { items: items.map(function (item) { return item.name; }) }).done(refreshFoldersAndItems) }); } function crop(item) { performLfmRequest('crop', {img: item.name}) .done(hideNavAndShowEditor); } function resize(item) { performLfmRequest('resize', {img: item.name}) .done(hideNavAndShowEditor); } function download(items) { items.forEach(function (item, index) { var data = defaultParameters(); data['file'] = item.name; var token = getUrlParam('token'); if (token) { data['token'] = token; } setTimeout(function () { location.href = lfm_route + '/download?' + $.param(data); }, index * 100); }); } function open(item) { goTo(item.url); } function preview(items) { var carousel = $('#carouselTemplate').clone().attr('id', 'previewCarousel').removeClass('d-none'); var imageTemplate = carousel.find('.carousel-item').clone().removeClass('active'); var indicatorTemplate = carousel.find('.carousel-indicators > li').clone().removeClass('active'); carousel.children('.carousel-inner').html(''); carousel.children('.carousel-indicators').html(''); carousel.children('.carousel-indicators,.carousel-control-prev,.carousel-control-next').toggle(items.length > 1); items.forEach(function (item, index) { var carouselItem = imageTemplate.clone() .addClass(index === 0 ? 'active' : ''); if (item.thumb_url) { carouselItem.find('.carousel-image').css('background-image', 'url(\'' + item.url + '?timestamp=' + item.time + '\')'); } else { carouselItem.find('.carousel-image').css('width', '50vh').append($('
    ').addClass('mime-icon ico-' + item.icon)); } carouselItem.find('.carousel-label').attr('target', '_blank').attr('href', item.url) .append(item.name) .append($('')); carousel.children('.carousel-inner').append(carouselItem); var carouselIndicator = indicatorTemplate.clone() .addClass(index === 0 ? 'active' : '') .attr('data-slide-to', index); carousel.children('.carousel-indicators').append(carouselIndicator); }); // carousel swipe control var touchStartX = null; carousel.on('touchstart', function (event) { var e = event.originalEvent; if (e.touches.length == 1) { var touch = e.touches[0]; touchStartX = touch.pageX; } }).on('touchmove', function (event) { var e = event.originalEvent; if (touchStartX != null) { var touchCurrentX = e.changedTouches[0].pageX; if ((touchCurrentX - touchStartX) > 60) { touchStartX = null; carousel.carousel('prev'); } else if ((touchStartX - touchCurrentX) > 60) { touchStartX = null; carousel.carousel('next'); } } }).on('touchend', function () { touchStartX = null; }); // end carousel swipe control notify(carousel); } function move(items) { performLfmRequest('move', { items: items.map(function (item) { return item.name; }) }) .done(refreshFoldersAndItems); } function getUrlParam(paramName) { var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i'); var match = window.location.search.match(reParam); return ( match && match.length > 1 ) ? match[1] : null; } function use(items) { function useTinymce3(url) { if (!usingTinymce3()) { return; } var win = tinyMCEPopup.getWindowArg("window"); win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = url; if (typeof(win.ImageDialog) != "undefined") { // Update image dimensions if (win.ImageDialog.getImageData) { win.ImageDialog.getImageData(); } // Preview if necessary if (win.ImageDialog.showPreviewImage) { win.ImageDialog.showPreviewImage(url); } } tinyMCEPopup.close(); } function useTinymce4AndColorbox(url) { if (!usingTinymce4AndColorbox()) { return; } parent.document.getElementById(getUrlParam('field_name')).value = url; if(typeof parent.tinyMCE !== "undefined") { parent.tinyMCE.activeEditor.windowManager.close(); } if(typeof parent.$.fn.colorbox !== "undefined") { parent.$.fn.colorbox.close(); } } function useTinymce5(url){ if (!usingTinymce5()) { return; } parent.postMessage({ mceAction: 'insert', content: url }); parent.postMessage({ mceAction: 'close' }); } function useCkeditor3(url) { if (!usingCkeditor3()) { return; } if (window.opener) { // Popup window.opener.CKEDITOR.tools.callFunction(getUrlParam('CKEditorFuncNum'), url); } else { // Modal (in iframe) parent.CKEDITOR.tools.callFunction(getUrlParam('CKEditorFuncNum'), url); parent.CKEDITOR.tools.callFunction(getUrlParam('CKEditorCleanUpFuncNum')); } } function useFckeditor2(url) { if (!usingFckeditor2()) { return; } var p = url; var w = data['Properties']['Width']; var h = data['Properties']['Height']; window.opener.SetUrl(p,w,h); } var url = items[0].url; var callback = getUrlParam('callback'); var useFileSucceeded = true; if (usingWysiwygEditor()) { useTinymce3(url); useTinymce4AndColorbox(url); useTinymce5(url); useCkeditor3(url); useFckeditor2(url); } else if (callback && window[callback]) { window[callback](getSelectedItems()); } else if (callback && parent[callback]) { parent[callback](getSelecteditems()); } else if (window.opener) { // standalone button or other situations window.opener.SetUrl(getSelectedItems()); } else { useFileSucceeded = false; } if (useFileSucceeded) { if (window.opener) { window.close(); } } else { console.log('window.opener not found'); // No editor found, open/download file using browser's default method window.open(url); } } //end useFile // ================================== // == WYSIWYG Editors Check == // ================================== function usingTinymce3() { return !!window.tinyMCEPopup; } function usingTinymce4AndColorbox() { return !!getUrlParam('field_name'); } function usingTinymce5(){ return !!getUrlParam('editor'); } function usingCkeditor3() { return !!getUrlParam('CKEditor') || !!getUrlParam('CKEditorCleanUpFuncNum'); } function usingFckeditor2() { return window.opener && typeof data != 'undefined' && data['Properties']['Width'] != ''; } function usingWysiwygEditor() { return usingTinymce3() || usingTinymce4AndColorbox() || usingTinymce5() || usingCkeditor3() || usingFckeditor2(); } // ================================== // == Others == // ================================== function defaultParameters() { return { working_dir: $('#working_dir').val(), type: $('#type').val() }; } function notImp() { notify('Not yet implemented!'); } function notify(body, callback) { $('#notify').find('.btn-primary').toggle(callback !== undefined); $('#notify').find('.btn-primary').unbind().click(callback); $('#notify').modal('show').find('.modal-body').html(body); } function dialog(title, value, callback) { $('#dialog').find('input').val(value); $('#dialog').on('shown.bs.modal', function () { $('#dialog').find('input').focus(); }); $('#dialog').find('.btn-primary').unbind().click(function (e) { callback($('#dialog').find('input').val()); }); $('#dialog').modal('show').find('.modal-title').text(title); }