From: Philipp Date: Sun, 27 Nov 2022 00:33:13 +0000 (+0100) Subject: Adhere feedback X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=012f486eb6cc11cd2b3871e5c70f40e812ecf647;p=friendica.git Adhere feedback --- diff --git a/src/Module/Media/Attachment/Browser.php b/src/Module/Media/Attachment/Browser.php index 50e0b7f803..de9f7f4fc9 100644 --- a/src/Module/Media/Attachment/Browser.php +++ b/src/Module/Media/Attachment/Browser.php @@ -69,7 +69,7 @@ class Browser extends BaseModule $fileArray = array_map([$this, 'map_files'], $files); - $tpl = Renderer::getMarkupTemplate('media/filebrowser.tpl'); + $tpl = Renderer::getMarkupTemplate('media/browser.tpl'); $output = Renderer::replaceMacros($tpl, [ '$type' => 'attachment', '$path' => ['' => $this->t('Files')], diff --git a/src/Module/Media/Photo/Browser.php b/src/Module/Media/Photo/Browser.php index 76b9db3a51..0df19d0098 100644 --- a/src/Module/Media/Photo/Browser.php +++ b/src/Module/Media/Photo/Browser.php @@ -79,7 +79,7 @@ class Browser extends BaseModule $photosArray = array_map([$this, 'map_files'], $photos); - $tpl = Renderer::getMarkupTemplate('media/filebrowser.tpl'); + $tpl = Renderer::getMarkupTemplate('media/browser.tpl'); $output = Renderer::replaceMacros($tpl, [ '$type' => 'photo', '$path' => $path, diff --git a/view/js/media/filebrowser.js b/view/js/media/filebrowser.js deleted file mode 100644 index 5055b1d8e6..0000000000 --- a/view/js/media/filebrowser.js +++ /dev/null @@ -1,159 +0,0 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later -/** - * Filebrowser - Friendica Communications Server - * - * Copyright (c) 2010-2021, the Friendica project - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This code handle user interaction for image/file upload/browser dialog. - * Is loaded from filebrowser_plain.tpl - * - * To load filebrowser in colorbox, call - * - * Dialog.doImageBrowser(eventname, id); - * - * or - * - * Dialog.doFileBrowser(eventname, id); - * - * where: - * - * eventname: event name to catch return value - * id: id returned to event handler - * - * When user select an item, an event in fired in parent page, on body element - * The event is named - * - * fbrowser..[] - * - * will be one of "image" or "file", and the event handler will - * get the following params: - * - * filename: filename of item chosen by user - * embed: bbcode to embed element into posts - * id: id from caller code - * - * example: - * - * // open dialog for select an image for a textarea with id "myeditor" - * var id="myeditor"; - * Dialog.doImageBrowser("example", id); - * - * // setup event handler to get user selection - * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { - * // close colorbox - * $.colorbox.close(); - * // replace textarea text with bbcode - * $(id).value = bbcode; - * }); - **/ -const FileBrowser = { - nickname: '', - type: '', - event: '', - id: null, - - init: function (nickname, type) { - FileBrowser.nickname = nickname; - FileBrowser.type = type; - FileBrowser.event = 'fbrowser.' + type; - if (location['hash'] !== '') { - const h = location['hash'].replace('#', ''); - FileBrowser.event = FileBrowser.event + '.' + h.split('-')[0]; - FileBrowser.id = h.split('-')[1]; - } - - console.log('FileBrowser:', nickname, type, FileBrowser.event, FileBrowser.id); - - $('.error a.close').on('click', function (e) { - e.preventDefault(); - $('.error').addClass('hidden'); - }); - - $('.folders a, .path a').on('click', function (e) { - e.preventDefault(); - location.href = FileBrowser._getUrl("minimal", location['hash'], this.dataset.folder); - location.reload(); - }); - - $(".photo-album-photo-link").on('click', function (e) { - e.preventDefault(); - - let embed = ''; - if (FileBrowser.type === "photo") { - embed = '[url=' + this.dataset.link + '][img=' + this.dataset.img + ']' + this.dataset.alt + '[/img][/url]'; - } - if (FileBrowser.type === "attachment") { - embed = '[attachment]' + this.dataset.link + '[/attachment]'; - } - console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id); - parent.$('body').trigger(FileBrowser.event, [ - this.dataset.filename, - embed, - FileBrowser.id - ]); - - }); - - if ($('#upload-photo').length) { - new window.AjaxUpload( - 'upload-photo', - { - action: 'media/photo/upload?response=json', - name: 'userfile', - responseType: 'json', - onSubmit: function (file, ext) { - $('#profile-rotator').show(); - $('.error').addClass('hidden'); - }, - onComplete: function (file, response) { - if (response['error'] !== undefined) { - $('.error span').html(response['error']); - $('.error').removeClass('hidden'); - $('#profile-rotator').hide(); - return; - } - location.href = FileBrowser._getUrl("minimal", location['hash']); - location.reload(); - } - } - ); - } - - if ($('#upload-attachment').length) { - new window.AjaxUpload( - 'upload-attachment', - { - action: 'media/attachment/upload?response=json', - name: 'userfile', - responseType: 'json', - onSubmit: function (file, ext) { - $('#profile-rotator').show(); - $('.error').addClass('hidden'); - }, - onComplete: function (file, response) { - if (response['error'] !== undefined) { - $('.error span').html(response['error']); - $('.error').removeClass('hidden'); - $('#profile-rotator').hide(); - return; - } - location.href = FileBrowser._getUrl("minimal", location['hash']); - location.reload(); - } - } - ); - } - }, - - _getUrl: function (mode, hash, folder) { - let folderValue = folder !== undefined ? folder : FileBrowser.folder; - let folderUrl = folderValue !== undefined ? '/' + encodeURIComponent(folderValue) : ''; - return 'media/' + FileBrowser.type + '/browser' + folderUrl + '?mode=' + mode + hash; - } -}; -// @license-end diff --git a/view/js/module/media/browser.js b/view/js/module/media/browser.js new file mode 100644 index 0000000000..7790e2588b --- /dev/null +++ b/view/js/module/media/browser.js @@ -0,0 +1,159 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later +/** + * Filebrowser - Friendica Communications Server + * + * Copyright (c) 2010-2021, the Friendica project + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This code handle user interaction for image/file upload/browser dialog. + * Is loaded from filebrowser_plain.tpl + * + * To load filebrowser in colorbox, call + * + * Dialog.doImageBrowser(eventname, id); + * + * or + * + * Dialog.doFileBrowser(eventname, id); + * + * where: + * + * eventname: event name to catch return value + * id: id returned to event handler + * + * When user select an item, an event in fired in parent page, on body element + * The event is named + * + * fbrowser..[] + * + * will be one of "image" or "file", and the event handler will + * get the following params: + * + * filename: filename of item chosen by user + * embed: bbcode to embed element into posts + * id: id from caller code + * + * example: + * + * // open dialog for select an image for a textarea with id "myeditor" + * var id="myeditor"; + * Dialog.doImageBrowser("example", id); + * + * // setup event handler to get user selection + * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { + * // close colorbox + * $.colorbox.close(); + * // replace textarea text with bbcode + * $(id).value = bbcode; + * }); + **/ +const Browser = { + nickname: '', + type: '', + event: '', + id: null, + + init: function (nickname, type) { + Browser.nickname = nickname; + Browser.type = type; + Browser.event = 'fbrowser.' + type; + if (location['hash'] !== '') { + const h = location['hash'].replace('#', ''); + Browser.event = Browser.event + '.' + h.split('-')[0]; + Browser.id = h.split('-')[1]; + } + + console.log('FileBrowser:', nickname, type, Browser.event, Browser.id); + + $('.error a.close').on('click', function (e) { + e.preventDefault(); + $('.error').addClass('hidden'); + }); + + $('.folders a, .path a').on('click', function (e) { + e.preventDefault(); + location.href = Browser._getUrl("minimal", location['hash'], this.dataset.folder); + location.reload(); + }); + + $(".photo-album-photo-link").on('click', function (e) { + e.preventDefault(); + + let embed = ''; + if (Browser.type === "photo") { + embed = '[url=' + this.dataset.link + '][img=' + this.dataset.img + ']' + this.dataset.alt + '[/img][/url]'; + } + if (Browser.type === "attachment") { + embed = '[attachment]' + this.dataset.link + '[/attachment]'; + } + console.log(Browser.event, this.dataset.filename, embed, Browser.id); + parent.$('body').trigger(Browser.event, [ + this.dataset.filename, + embed, + Browser.id + ]); + + }); + + if ($('#upload-photo').length) { + new window.AjaxUpload( + 'upload-photo', + { + action: 'media/photo/upload?response=json', + name: 'userfile', + responseType: 'json', + onSubmit: function (file, ext) { + $('#profile-rotator').show(); + $('.error').addClass('hidden'); + }, + onComplete: function (file, response) { + if (response['error'] !== undefined) { + $('.error span').html(response['error']); + $('.error').removeClass('hidden'); + $('#profile-rotator').hide(); + return; + } + location.href = Browser._getUrl("minimal", location['hash']); + location.reload(); + } + } + ); + } + + if ($('#upload-attachment').length) { + new window.AjaxUpload( + 'upload-attachment', + { + action: 'media/attachment/upload?response=json', + name: 'userfile', + responseType: 'json', + onSubmit: function (file, ext) { + $('#profile-rotator').show(); + $('.error').addClass('hidden'); + }, + onComplete: function (file, response) { + if (response['error'] !== undefined) { + $('.error span').html(response['error']); + $('.error').removeClass('hidden'); + $('#profile-rotator').hide(); + return; + } + location.href = Browser._getUrl("minimal", location['hash']); + location.reload(); + } + } + ); + } + }, + + _getUrl: function (mode, hash, folder) { + let folderValue = folder !== undefined ? folder : Browser.folder; + let folderUrl = folderValue !== undefined ? '/' + encodeURIComponent(folderValue) : ''; + return 'media/' + Browser.type + '/browser' + folderUrl + '?mode=' + mode + hash; + } +}; +// @license-end diff --git a/view/templates/media/browser.tpl b/view/templates/media/browser.tpl new file mode 100644 index 0000000000..749c2bea7e --- /dev/null +++ b/view/templates/media/browser.tpl @@ -0,0 +1,51 @@ + + + + +
+ + +
+ {{foreach $path as $folder => $name}} + {{$name}} + {{/foreach}} +
+ + {{if $folders }} +
+
    + {{foreach $folders as $folder}} +
  • {{$folder}}
    • + {{/foreach}} +
+
+ {{/if}} + +
+ {{foreach $files as $f}} +
+ + {{$f.3}} +

{{$f.1}}

+ +
+ {{/foreach}} +
+ +
+ +
+
+ + + + + diff --git a/view/templates/media/filebrowser.tpl b/view/templates/media/filebrowser.tpl deleted file mode 100644 index 6c087a62be..0000000000 --- a/view/templates/media/filebrowser.tpl +++ /dev/null @@ -1,51 +0,0 @@ - - - - -
- - -
- {{foreach $path as $folder => $name}} - {{$name}} - {{/foreach}} -
- - {{if $folders }} -
-
    - {{foreach $folders as $folder}} -
  • {{$folder}}
    • - {{/foreach}} -
-
- {{/if}} - -
- {{foreach $files as $f}} -
- - {{$f.3}} -

{{$f.1}}

- -
- {{/foreach}} -
- -
- -
-
- - - - - diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js index ed256450cc..c3c4009b05 100644 --- a/view/theme/frio/js/modal.js +++ b/view/theme/frio/js/modal.js @@ -166,8 +166,8 @@ Dialog._load = function (url) { // Initialize the filebrowser. loadScript("view/js/ajaxupload.js"); - loadScript("view/theme/frio/js/module/media/filebrowser.js", function () { - FileBrowser.init(filebrowser.dataset.nickname, filebrowser.dataset.type, match[1]); + loadScript("view/theme/frio/js/module/media/browser.js", function () { + Browser.init(filebrowser.dataset.nickname, filebrowser.dataset.type, match[1]); }); }; diff --git a/view/theme/frio/js/module/media/browser.js b/view/theme/frio/js/module/media/browser.js new file mode 100644 index 0000000000..c89f426ebd --- /dev/null +++ b/view/theme/frio/js/module/media/browser.js @@ -0,0 +1,252 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later +/** + * Filebrowser - Friendica Communications Server + * + * Copyright (c) 2010-2021, the Friendica project + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This code handle user interaction for photo/file upload/browser dialog. + * Is loaded from filebrowser_plain.tpl + * + * To load filebrowser in colorbox, call + * + * Dialog.doImageBrowser(eventname, id); + * + * or + * + * Dialog.doFileBrowser(eventname, id); + * + * where: + * + * eventname: event name to catch return value + * id: id returned to event handler + * + * When user select an item, an event in fired in parent page, on body element + * The event is named + * + * fbrowser..[] + * + * will be one of "image" or "file", and the event handler will + * get the following params: + * + * filename: filename of item chosen by user + * embed: bbcode to embed element into posts + * id: id from caller code + * + * example: + * + * // open dialog for select an image for a textarea with id "myeditor" + * var id="myeditor"; + * Dialog.doImageBrowser("example", id); + * + * // setup event handler to get user selection + * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { + * // close colorbox + * $.colorbox.close(); + * // replace textarea text with bbcode + * $(id).value = bbcode; + * }); + **/ + +/* + * IMPORTANT + * + * This is a modified version to work with + * the frio theme.and bootstrap modals + * + * The original file is under: + * js/module/media/browser.js + * + */ + +var Browser = { + nickname: '', + type: '', + event: '', + folder: '', + id: null, + + init: function (nickname, type, hash) { + Browser.nickname = nickname; + Browser.type = type; + Browser.event = 'fbrowser.' + type; + + if (hash !== '') { + const h = hash.replace('#', ''); + const destination = h.split('-')[0]; + Browser.id = h.split('-')[1]; + Browser.event = Browser.event + '.' + destination; + if (destination === 'comment') { + // Get the comment textinput field + var commentElm = document.getElementById('comment-edit-text-' + Browser.id); + } + } + + console.log('FileBrowser: ' + nickname, type, Browser.event, Browser.id); + + Browser.postLoad(); + + $('.error .close').on('click', function (e) { + e.preventDefault(); + $('.error').addClass('hidden'); + }); + + // Click on album link + $('.fbrowser').on('click', '.folders button, .path button', function (e) { + e.preventDefault(); + let url = Browser._getUrl("none", this.dataset.folder); + Browser.folder = this.dataset.folder; + + Browser.loadContent(url); + }); + + //Embed on click + $('.fbrowser').on('click', '.photo-album-photo-link', function (e) { + e.preventDefault(); + + let embed = ''; + if (Browser.type === 'photo') { + embed = '[url=' + this.dataset.link + '][img=' + this.dataset.img + ']' + this.dataset.alt + '[/img][/url]'; + } + if (Browser.type === 'attachment') { + embed = '[attachment]' + this.dataset.link + '[/attachment]'; + } + + // Delete prefilled Text of the comment input + // Note: not the best solution but function commentOpenUI don't + // work as expected (we need a way to wait until commentOpenUI would be finished). + // As for now we insert pieces of this function here + if (commentElm !== null && typeof commentElm !== 'undefined') { + if (commentElm.value === '') { + $('#comment-edit-text-' + Browser.id) + .addClass('comment-edit-text-full') + .removeClass('comment-edit-text-empty'); + $('#comment-edit-submit-wrapper-' + Browser.id).show(); + $('#comment-edit-text-' + Browser.id).attr('tabindex', '9'); + $('#comment-edit-submit-' + Browser.id).attr('tabindex', '10'); + } + } + + console.log(Browser.event, this.dataset.filename, embed, Browser.id); + + $('body').trigger(Browser.event, [this.dataset.filename, embed, Browser.id, this.dataset.img]); + + // Close model + $('#modal').modal('hide'); + // Update autosize for this textarea + autosize.update($('.text-autosize')); + }); + + // EventListener for switching between photo and file mode + $('.fbrowser').on('click', '.fbswitcher .btn', function (e) { + e.preventDefault(); + Browser.type = this.getAttribute('data-mode'); + $('.fbrowser') + .removeClass() + .addClass('fbrowser ' + Browser.type); + + Browser.loadContent(Browser._getUrl("none")); + }); + }, + + // Initialize the AjaxUpload for the upload buttons + uploadButtons: function () { + if ($('#upload-photo').length) { + //AjaxUpload for photos + new window.AjaxUpload( + 'upload-photo', + { + action: 'media/photo/upload?response=json&album=' + encodeURIComponent(Browser.folder), + name: 'userfile', + responseType: 'json', + onSubmit: function (file, ext) { + $('.fbrowser-content').hide(); + $('.fbrowser .profile-rotator-wrapper').show(); + $('.error').addClass('hidden'); + }, + onComplete: function (file, response) { + if (response['error'] !== undefined) { + $('.error span').html(response['error']); + $('.error').removeClass('hidden'); + $('.fbrowser .profile-rotator-wrapper').hide(); + $('.fbrowser-content').show(); + return; + } + // load new content to fbrowser window + Browser.loadContent(Browser._getUrl("none")); + }, + }); + } + + if ($('#upload-attachment').length) { + //AjaxUpload for files + new window.AjaxUpload( + 'upload-attachment', + { + action: 'media/attachment/upload?response=json', + name: 'userfile', + responseType: 'json', + onSubmit: function (file, ext) { + $('.fbrowser-content').hide(); + $('.fbrowser .profile-rotator-wrapper').show(); + $('.error').addClass('hidden'); + }, + onComplete: function (file, response) { + if (response["error"] !== undefined) { + $('.error span').html(response['error']); + $('.error').removeClass('hidden'); + $('.fbrowser .profile-rotator-wrapper').hide(); + $('.fbrowser-content').show(); + return; + } + // Load new content to fbrowser window + Browser.loadContent(Browser._getUrl("none")); + }, + }); + } + }, + + // Stuff which should be executed if no content was loaded + postLoad: function () { + Browser.initGallery(); + $('.fbrowser .fbswitcher .btn').removeClass('active'); + $('.fbrowser .fbswitcher [data-mode=' + Browser.type + ']').addClass('active'); + // We need to add the AjaxUpload to the button + Browser.uploadButtons(); + }, + + // Load new content (e.g. change photo album) + loadContent: function (url) { + $('.fbrowser-content').hide(); + $('.fbrowser .profile-rotator-wrapper').show(); + + // load new content to fbrowser window + $('.fbrowser').load(url, function (responseText, textStatus) { + $('.profile-rotator-wrapper').hide(); + if (textStatus === 'success') { + $(".fbrowser_content").show(); + Browser.postLoad(); + } + }); + }, + + // Initialize justified Gallery + initGallery: function () { + $('.fbrowser.photo .fbrowser-content-container').justifiedGallery({ + rowHeight: 80, + margins: 4, + border: 0, + }); + }, + + _getUrl: function (mode, folder) { + let folderValue = folder !== undefined ? folder : Browser.folder; + let folderUrl = folderValue !== undefined ? '/' + encodeURIComponent(folderValue) : ''; + return 'media/' + Browser.type + '/browser' + folderUrl + '?mode=' + mode + "&theme=frio"; + } +}; +// @license-end diff --git a/view/theme/frio/js/module/media/filebrowser.js b/view/theme/frio/js/module/media/filebrowser.js deleted file mode 100644 index 802c440989..0000000000 --- a/view/theme/frio/js/module/media/filebrowser.js +++ /dev/null @@ -1,252 +0,0 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later -/** - * Filebrowser - Friendica Communications Server - * - * Copyright (c) 2010-2021, the Friendica project - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This code handle user interaction for photo/file upload/browser dialog. - * Is loaded from filebrowser_plain.tpl - * - * To load filebrowser in colorbox, call - * - * Dialog.doImageBrowser(eventname, id); - * - * or - * - * Dialog.doFileBrowser(eventname, id); - * - * where: - * - * eventname: event name to catch return value - * id: id returned to event handler - * - * When user select an item, an event in fired in parent page, on body element - * The event is named - * - * fbrowser..[] - * - * will be one of "image" or "file", and the event handler will - * get the following params: - * - * filename: filename of item chosen by user - * embed: bbcode to embed element into posts - * id: id from caller code - * - * example: - * - * // open dialog for select an image for a textarea with id "myeditor" - * var id="myeditor"; - * Dialog.doImageBrowser("example", id); - * - * // setup event handler to get user selection - * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { - * // close colorbox - * $.colorbox.close(); - * // replace textarea text with bbcode - * $(id).value = bbcode; - * }); - **/ - -/* - * IMPORTANT - * - * This is a modified version to work with - * the frio theme.and bootstrap modals - * - * The original file is under: - * js/filebrowser.js - * - */ - -var FileBrowser = { - nickname: '', - type: '', - event: '', - folder: '', - id: null, - - init: function (nickname, type, hash) { - FileBrowser.nickname = nickname; - FileBrowser.type = type; - FileBrowser.event = 'fbrowser.' + type; - - if (hash !== '') { - const h = hash.replace('#', ''); - const destination = h.split('-')[0]; - FileBrowser.id = h.split('-')[1]; - FileBrowser.event = FileBrowser.event + '.' + destination; - if (destination === 'comment') { - // Get the comment textinput field - var commentElm = document.getElementById('comment-edit-text-' + FileBrowser.id); - } - } - - console.log('FileBrowser: ' + nickname, type, FileBrowser.event, FileBrowser.id); - - FileBrowser.postLoad(); - - $('.error .close').on('click', function (e) { - e.preventDefault(); - $('.error').addClass('hidden'); - }); - - // Click on album link - $('.fbrowser').on('click', '.folders button, .path button', function (e) { - e.preventDefault(); - let url = FileBrowser._getUrl("none", this.dataset.folder); - FileBrowser.folder = this.dataset.folder; - - FileBrowser.loadContent(url); - }); - - //Embed on click - $('.fbrowser').on('click', '.photo-album-photo-link', function (e) { - e.preventDefault(); - - let embed = ''; - if (FileBrowser.type === 'photo') { - embed = '[url=' + this.dataset.link + '][img=' + this.dataset.img + ']' + this.dataset.alt + '[/img][/url]'; - } - if (FileBrowser.type === 'attachment') { - embed = '[attachment]' + this.dataset.link + '[/attachment]'; - } - - // Delete prefilled Text of the comment input - // Note: not the best solution but function commentOpenUI don't - // work as expected (we need a way to wait until commentOpenUI would be finished). - // As for now we insert pieces of this function here - if (commentElm !== null && typeof commentElm !== 'undefined') { - if (commentElm.value === '') { - $('#comment-edit-text-' + FileBrowser.id) - .addClass('comment-edit-text-full') - .removeClass('comment-edit-text-empty'); - $('#comment-edit-submit-wrapper-' + FileBrowser.id).show(); - $('#comment-edit-text-' + FileBrowser.id).attr('tabindex', '9'); - $('#comment-edit-submit-' + FileBrowser.id).attr('tabindex', '10'); - } - } - - console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id); - - $('body').trigger(FileBrowser.event, [this.dataset.filename, embed, FileBrowser.id, this.dataset.img]); - - // Close model - $('#modal').modal('hide'); - // Update autosize for this textarea - autosize.update($('.text-autosize')); - }); - - // EventListener for switching between photo and file mode - $('.fbrowser').on('click', '.fbswitcher .btn', function (e) { - e.preventDefault(); - FileBrowser.type = this.getAttribute('data-mode'); - $('.fbrowser') - .removeClass() - .addClass('fbrowser ' + FileBrowser.type); - - FileBrowser.loadContent(FileBrowser._getUrl("none")); - }); - }, - - // Initialize the AjaxUpload for the upload buttons - uploadButtons: function () { - if ($('#upload-photo').length) { - //AjaxUpload for photos - new window.AjaxUpload( - 'upload-photo', - { - action: 'media/photo/upload?response=json&album=' + encodeURIComponent(FileBrowser.folder), - name: 'userfile', - responseType: 'json', - onSubmit: function (file, ext) { - $('.fbrowser-content').hide(); - $('.fbrowser .profile-rotator-wrapper').show(); - $('.error').addClass('hidden'); - }, - onComplete: function (file, response) { - if (response['error'] !== undefined) { - $('.error span').html(response['error']); - $('.error').removeClass('hidden'); - $('.fbrowser .profile-rotator-wrapper').hide(); - $('.fbrowser-content').show(); - return; - } - // load new content to fbrowser window - FileBrowser.loadContent(FileBrowser._getUrl("none")); - }, - }); - } - - if ($('#upload-attachment').length) { - //AjaxUpload for files - new window.AjaxUpload( - 'upload-attachment', - { - action: 'media/attachment/upload?response=json', - name: 'userfile', - responseType: 'json', - onSubmit: function (file, ext) { - $('.fbrowser-content').hide(); - $('.fbrowser .profile-rotator-wrapper').show(); - $('.error').addClass('hidden'); - }, - onComplete: function (file, response) { - if (response["error"] !== undefined) { - $('.error span').html(response['error']); - $('.error').removeClass('hidden'); - $('.fbrowser .profile-rotator-wrapper').hide(); - $('.fbrowser-content').show(); - return; - } - // Load new content to fbrowser window - FileBrowser.loadContent(FileBrowser._getUrl("none")); - }, - }); - } - }, - - // Stuff which should be executed if no content was loaded - postLoad: function () { - FileBrowser.initGallery(); - $('.fbrowser .fbswitcher .btn').removeClass('active'); - $('.fbrowser .fbswitcher [data-mode=' + FileBrowser.type + ']').addClass('active'); - // We need to add the AjaxUpload to the button - FileBrowser.uploadButtons(); - }, - - // Load new content (e.g. change photo album) - loadContent: function (url) { - $('.fbrowser-content').hide(); - $('.fbrowser .profile-rotator-wrapper').show(); - - // load new content to fbrowser window - $('.fbrowser').load(url, function (responseText, textStatus) { - $('.profile-rotator-wrapper').hide(); - if (textStatus === 'success') { - $(".fbrowser_content").show(); - FileBrowser.postLoad(); - } - }); - }, - - // Initialize justified Gallery - initGallery: function () { - $('.fbrowser.photo .fbrowser-content-container').justifiedGallery({ - rowHeight: 80, - margins: 4, - border: 0, - }); - }, - - _getUrl: function (mode, folder) { - let folderValue = folder !== undefined ? folder : FileBrowser.folder; - let folderUrl = folderValue !== undefined ? '/' + encodeURIComponent(folderValue) : ''; - return 'media/' + FileBrowser.type + '/browser' + folderUrl + '?mode=' + mode + "&theme=frio"; - } -}; -// @license-end diff --git a/view/theme/frio/templates/media/browser.tpl b/view/theme/frio/templates/media/browser.tpl new file mode 100644 index 0000000000..71974eeea8 --- /dev/null +++ b/view/theme/frio/templates/media/browser.tpl @@ -0,0 +1,64 @@ + +
+
+ + + {{* The breadcrumb navigation *}} + + +
+ + {{* List of photo albums *}} + {{if $folders }} + + {{/if}} + + {{* The main content (images or files) *}} +
+
+ {{foreach $files as $f}} +
+ + {{$f.1}} +

{{$f.1}}

+ +
+ {{/foreach}} +
+
+
+ +
+ +
+
+ + {{* This part contains the conent loader icon which is visible when new conent is loaded *}} + +
diff --git a/view/theme/frio/templates/media/filebrowser.tpl b/view/theme/frio/templates/media/filebrowser.tpl deleted file mode 100644 index 71974eeea8..0000000000 --- a/view/theme/frio/templates/media/filebrowser.tpl +++ /dev/null @@ -1,64 +0,0 @@ - -
-
- - - {{* The breadcrumb navigation *}} - - -
- - {{* List of photo albums *}} - {{if $folders }} - - {{/if}} - - {{* The main content (images or files) *}} -
-
- {{foreach $files as $f}} -
- - {{$f.1}} -

{{$f.1}}

- -
- {{/foreach}} -
-
-
- -
- -
-
- - {{* This part contains the conent loader icon which is visible when new conent is loaded *}} - -