From: Philipp Date: Fri, 25 Nov 2022 22:43:07 +0000 (+0100) Subject: Move mod/fbrowser to src\Modules\Attachment|Photos\Browser X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=d0b16b2fc15ac2b3d5db65586a7a94fda8f7224c;p=friendica.git Move mod/fbrowser to src\Modules\Attachment|Photos\Browser --- diff --git a/src/App/Arguments.php b/src/App/Arguments.php index 6dfdcb560f..5d30f9bd2b 100644 --- a/src/App/Arguments.php +++ b/src/App/Arguments.php @@ -85,6 +85,8 @@ class Arguments /** * @return string The module name based on the arguments + * @deprecated 2022.12 - With the new (sub-)routes, it's no more trustworthy, use the ModuleClass instead + * @see Router::getModuleClass() */ public function getModuleName(): string { diff --git a/src/App/Page.php b/src/App/Page.php index 37141426c3..afc94fbdf0 100644 --- a/src/App/Page.php +++ b/src/App/Page.php @@ -241,6 +241,7 @@ class Page implements ArrayAccess * being first */ $this->page['htmlhead'] = Renderer::replaceMacros($tpl, [ + '$local_nickname' => $app->getLoggedInUserNickname(), '$local_user' => $localUID, '$generator' => 'Friendica' . ' ' . App::VERSION, '$delitem' => $l10n->t('Delete this item?'), diff --git a/src/App/Router.php b/src/App/Router.php index 4e5f29521a..b6fd1098f5 100644 --- a/src/App/Router.php +++ b/src/App/Router.php @@ -266,7 +266,7 @@ class Router * @throws HTTPException\MethodNotAllowedException If a rule matched but the method didn't * @throws HTTPException\NotFoundException If no rule matched */ - private function getModuleClass(): string + public function getModuleClass(): string { $cmd = $this->args->getCommand(); $cmd = '/' . ltrim($cmd, '/'); diff --git a/src/Model/Photo.php b/src/Model/Photo.php index 7c620b0ad4..a139ba715f 100644 --- a/src/Model/Photo.php +++ b/src/Model/Photo.php @@ -173,6 +173,59 @@ class Photo return $photo; } + /** + * Returns all browsable albums for a given user + * + * @param int $uid The given user + * + * @return array An array of albums + * @throws \Exception + */ + public static function getBrowsableAlbumsForUser(int $uid): array + { + $photos = DBA::toArray( + DBA::p( + "SELECT DISTINCT(`album`) AS `albume` FROM `photo` WHERE `uid` = ? AND NOT `photo-type` IN (?, ?)", + $uid, + static::CONTACT_AVATAR, + static::CONTACT_BANNER + ) + ); + + return array_column($photos, 'album'); + } + + /** + * Returns browsable photos for a given user (optional and a given album) + * + * @param int $uid The given user id + * @param string|null $album (optional) The given album + * + * @return array All photos of the user/album + * @throws \Exception + */ + public static function getBrowsablePhotosForUser(int $uid, string $album = null): array + { + if (!empty($album)) { + $sqlExtra = sprintf("AND `album` = '%S' ", DBA::escape($album)); + $sqlExtra2 = ""; + } else { + $sqlExtra = ''; + $sqlExtra2 = ' ORDER BY created DESC LIMIT 0, 10'; + } + + return DBA::toArray( + DBA::p( + "SELECT `resource-id`, ANY_VALUE(`id`) AS `id`, ANY_VALUE(`filename`) AS `filename`, ANY_VALUE(`type`) AS `type`, + min(`scale`) AS `hiq`, max(`scale`) AS `loq`, ANY_VALUE(`desc`) AS `desc`, ANY_VALUE(`created`) AS `created` + FROM `photo` WHERE `uid` = ? $sqlExtra AND NOT `photo-type` IN (?, ?) + GROUP BY `resource-id` $sqlExtra2", + $uid, + Photo::CONTACT_AVATAR, + Photo::CONTACT_BANNER + )); + } + /** * Check if photo with given conditions exists * diff --git a/src/Module/Attach.php b/src/Module/Attach.php index a73beb2b8d..17b2d6e908 100644 --- a/src/Module/Attach.php +++ b/src/Module/Attach.php @@ -37,7 +37,6 @@ class Attach extends BaseModule */ protected function rawContent(array $request = []) { - $a = DI::app(); if (empty($this->parameters['item'])) { throw new \Friendica\Network\HTTPException\BadRequestException(); } diff --git a/src/Module/Profile/Attachment/Browser.php b/src/Module/Profile/Attachment/Browser.php new file mode 100644 index 0000000000..09429bff85 --- /dev/null +++ b/src/Module/Profile/Attachment/Browser.php @@ -0,0 +1,81 @@ +session = $session; + $this->app = $app; + } + + protected function content(array $request = []): string + { + if (!$this->session->getLocalUserId()) { + $this->baseUrl->redirect(); + } + + // Needed to match the correct template in a module that uses a different theme than the user/site/default + $theme = Strings::sanitizeFilePathItem($request['theme'] ?? ''); + if ($theme && is_file("view/theme/$theme/config.php")) { + $this->app->setCurrentTheme($theme); + } + + $files = Attach::selectToArray(['id', 'filename', 'filetype'], ['uid' => $this->session->getLocalUserId()]); + + + $fileArray = array_map([$this, 'map_files'], $files); + + $tpl = Renderer::getMarkupTemplate('profile/filebrowser.tpl'); + $output = Renderer::replaceMacros($tpl, [ + '$type' => 'attachment', + '$path' => ['' => $this->t('Files')], + '$folders' => false, + '$files' => $fileArray, + '$cancel' => $this->t('Cancel'), + '$nickname' => $this->app->getLoggedInUserNickname(), + '$upload' => $this->t('Upload'), + ]); + + if (empty($request['mode'])) { + System::httpExit($output); + } + + return $output; + } + + protected function map_files(array $record): array + { + [$m1, $m2] = explode('/', $record['filetype']); + $filetype = file_exists(sprintf('images/icons/%s.png', $m1) ? $m1 : 'zip'); + + return [ + sprintf('%s/attach/%s', $this->baseUrl, $record['id']), + $record['filename'], + sprintf('%s/images/icon/16/%s.png', $this->baseUrl, $filetype), + ]; + } +} diff --git a/src/Module/Profile/Photos/Browser.php b/src/Module/Profile/Photos/Browser.php new file mode 100644 index 0000000000..1e8a28b123 --- /dev/null +++ b/src/Module/Profile/Photos/Browser.php @@ -0,0 +1,105 @@ +session = $session; + $this->app = $app; + } + + protected function content(array $request = []): string + { + if (!$this->session->getLocalUserId()) { + $this->baseUrl->redirect(); + } + + // Needed to match the correct template in a module that uses a different theme than the user/site/default + $theme = Strings::sanitizeFilePathItem($request['theme'] ?? ''); + if ($theme && is_file("view/theme/$theme/config.php")) { + $this->app->setCurrentTheme($theme); + } + + $album = $this->parameters['album'] ?? null; + + $photos = Photo::getBrowsablePhotosForUser($this->session->getLocalUserId(), $album); + $albums = $album ? false : Photo::getBrowsableAlbumsForUser($this->session->getLocalUserId()); + + $path = [ + '' => $this->t('Photos'), + ]; + if (!empty($album)) { + $path[$album] = $album; + } + + $photosArray = array_map([$this, 'map_files'], $photos); + + $tpl = Renderer::getMarkupTemplate('profile/filebrowser.tpl'); + $output = Renderer::replaceMacros($tpl, [ + '$type' => 'photos', + '$path' => $path, + '$folders' => $albums, + '$files' => $photosArray, + '$cancel' => $this->t('Cancel'), + '$nickname' => $this->app->getLoggedInUserNickname(), + '$upload' => $this->t('Upload'), + ]); + + if (empty($request['mode'])) { + System::httpExit($output); + } + + return $output; + } + + protected function map_files(array $record): array + { + $types = Images::supportedTypes(); + $ext = $types[$record['type']]; + $filename_e = $record['filename']; + + // Take the largest picture that is smaller or equal 640 pixels + $photo = Photo::selectFirst( + ['scale'], + [ + "`resource-id` = ? AND `height` <= ? AND `width` <= ?", + $record['resource-id'], + 640, + 640 + ], + ['order' => ['scale']]); + $scale = $photo['scale'] ?? $record['loq']; + + return [ + sprintf('%s/photos/%s/image/%s', $this->baseUrl, $this->app->getLoggedInUserNickname(), $record['resource-id']), + $filename_e, + sprintf('%s/photo/%s-%s.%s', $this->baseUrl, $record['resource-id'], $scale, $ext), + $record['desc'], + ]; + } +} diff --git a/static/routes.config.php b/static/routes.config.php index ae57557117..794f705e40 100644 --- a/static/routes.config.php +++ b/static/routes.config.php @@ -31,18 +31,20 @@ use Friendica\App\Router as R; use Friendica\Module; $profileRoutes = [ - '' => [Module\Profile\Index::class, [R::GET]], - '/attachment/upload' => [Module\Profile\Attachment\Upload::class, [ R::POST]], - '/contacts/common' => [Module\Profile\Common::class, [R::GET]], - '/contacts[/{type}]' => [Module\Profile\Contacts::class, [R::GET]], - '/media' => [Module\Profile\Media::class, [R::GET]], - '/photos' => [Module\Profile\Photos\Index::class, [R::GET ]], - '/photos/upload' => [Module\Profile\Photos\Upload::class, [ R::POST]], - '/profile' => [Module\Profile\Profile::class, [R::GET]], - '/remote_follow' => [Module\Profile\RemoteFollow::class, [R::GET, R::POST]], - '/schedule' => [Module\Profile\Schedule::class, [R::GET, R::POST]], - '/status[/{category}[/{date1}[/{date2}]]]' => [Module\Profile\Status::class, [R::GET]], - '/unkmail' => [Module\Profile\UnkMail::class, [R::GET, R::POST]], + '' => [Module\Profile\Index::class, [R::GET]], + '/attachment/upload' => [Module\Profile\Attachment\Upload::class, [ R::POST]], + '/attachment/browser' => [Module\Profile\Attachment\Browser::class, [R::GET]], + '/contacts/common' => [Module\Profile\Common::class, [R::GET]], + '/contacts[/{type}]' => [Module\Profile\Contacts::class, [R::GET]], + '/media' => [Module\Profile\Media::class, [R::GET]], + '/photos' => [Module\Profile\Photos\Index::class, [R::GET ]], + '/photos/browser[/{album}]' => [Module\Profile\Photos\Browser::class, [R::GET]], + '/photos/upload' => [Module\Profile\Photos\Upload::class, [ R::POST]], + '/profile' => [Module\Profile\Profile::class, [R::GET]], + '/remote_follow' => [Module\Profile\RemoteFollow::class, [R::GET, R::POST]], + '/schedule' => [Module\Profile\Schedule::class, [R::GET, R::POST]], + '/status[/{category}[/{date1}[/{date2}]]]' => [Module\Profile\Status::class, [R::GET]], + '/unkmail' => [Module\Profile\UnkMail::class, [R::GET, R::POST]], ]; $apiRoutes = [ diff --git a/view/global.css b/view/global.css index 800a3ea34d..f09d959391 100644 --- a/view/global.css +++ b/view/global.css @@ -345,12 +345,12 @@ img.acpopup-img { .fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;} .fbrowser .folders ul { list-style-type: none; padding-left: 10px;} .fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; } -.fbrowser.image .photo-album-image-wrapper { float: left; } -.fbrowser.image a img, .fbrowser.image .btn-link img { height: 48px; } -.fbrowser.image a p, .fbrowser.image .btn-link p { display: none;} -.fbrowser.file .photo-album-image-wrapper { float:none; white-space: nowrap; } -.fbrowser.file img { display: inline; } -.fbrowser.file p { display: inline; white-space: nowrap; } +.fbrowser.photos .photo-album-image-wrapper { float: left; } +.fbrowser.photos a img, .fbrowser.photos .btn-link img { height: 48px; } +.fbrowser.photos a p, .fbrowser.photos .btn-link p { display: none;} +.fbrowser.attachment .photo-album-image-wrapper { float:none; white-space: nowrap; } +.fbrowser.attachment img { display: inline; } +.fbrowser.attachment p { display: inline; white-space: nowrap; } .fbrowser .upload { clear: both; padding-top: 1em;} .fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;} .fbrowser .error .close { float: right; font-weight: bold; } diff --git a/view/js/filebrowser.js b/view/js/filebrowser.js index e5bd2730c4..1b8a4d51fb 100644 --- a/view/js/filebrowser.js +++ b/view/js/filebrowser.js @@ -33,7 +33,7 @@ * will be one of "image" or "file", and the event handler will * get the following params: * - * filemane: filename of item choosed by user + * filename: filename of item chosen by user * embed: bbcode to embed element into posts * id: id from caller code * @@ -47,52 +47,51 @@ * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { * // close colorbox * $.colorbox.close(); - * // replace textxarea text with bbcode + * // replace textarea text with bbcode * $(id).value = bbcode; * }); **/ +const FileBrowser = { + nickname: '', + type: '', + event: '', + id: null, -var FileBrowser = { - nickname : "", - type : "", - event: "", - id : null, - - init: function(nickname, type) { + init: function (nickname, type) { FileBrowser.nickname = nickname; FileBrowser.type = type; - FileBrowser.event = "fbrowser."+type; - if (location['hash']!=="") { - var h = location['hash'].replace("#",""); + 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 ); + console.log('FileBrowser:', nickname, type, FileBrowser.event, FileBrowser.id); - $(".error a.close").on("click", function(e) { + $('.error a.close').on('click', function (e) { e.preventDefault(); - $(".error").addClass("hidden"); + $('.error').addClass('hidden'); }); - $(".folders a, .path a").on("click", function(e){ + $('.folders a, .path a').on('click', function (e) { e.preventDefault(); - location.href = baseurl + "/fbrowser/" + FileBrowser.type + "/" + encodeURIComponent(this.dataset.folder) + "?mode=minimal" + location['hash']; + location.href = FileBrowser._getUrl("minimal", location['hash'], this.dataset.folder); + location.reload(); }); - $(".photo-album-photo-link").on('click', function(e){ + $(".photo-album-photo-link").on('click', function (e) { e.preventDefault(); - var embed = ""; - if (FileBrowser.type == "image") { - embed = "[url="+this.dataset.link+"][img="+this.dataset.img+"]"+this.dataset.alt+"[/img][/url]"; + let embed = ''; + if (FileBrowser.type === "photos") { + embed = '[url=' + this.dataset.link + '][img=' + this.dataset.img + ']' + this.dataset.alt + '[/img][/url]'; } - if (FileBrowser.type=="file") { - // attachment links are "baseurl/attach/id"; we need id - embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]"; + 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, [ + parent.$('body').trigger(FileBrowser.event, [ this.dataset.filename, embed, FileBrowser.id @@ -100,45 +99,63 @@ var FileBrowser = { }); - if ($("#upload-image").length) - var image_uploader = new window.AjaxUpload( - 'upload-image', - { action: 'profile/' + FileBrowser.nickname + '/photos/upload?response=json', + if ($('#upload-photos').length) + { + new window.AjaxUpload( + 'upload-photos', + { + action: 'profile/' + FileBrowser.nickname + '/photos/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'); + 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 = baseurl + "/fbrowser/image/?mode=minimal"+location['hash']; - location.reload(true); + location.href = FileBrowser._getUrl("minimal", location['hash']); + location.reload(); } } ); + } - if ($("#upload-file").length) - var file_uploader = new window.AjaxUpload( - 'upload-file', - { action: 'profile/' + FileBrowser.nickname + '/attachment/upload?response=json', + if ($('#upload-attachment').length) + { + new window.AjaxUpload( + 'upload-attachment', + { + action: 'profile/' + FileBrowser.nickname + '/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'); + 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 = baseurl + "/fbrowser/file/?mode=minimal"+location['hash']; - location.reload(true); + 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 'profile/' + FileBrowser.nickname + '/' + FileBrowser.type + '/browser' + folderUrl + '?mode=' + mode + hash; } }; // @license-end diff --git a/view/js/main.js b/view/js/main.js index 93340dc37f..3ba8240fed 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -166,7 +166,7 @@ $(function() { /* event from comment textarea button popups */ /* insert returned bbcode at cursor position or replace selected text */ - $("body").on("fbrowser.image.comment", function(e, filename, bbcode, id) { + $("body").on("fbrowser.photos.comment", function(e, filename, bbcode, id) { $.colorbox.close(); var textarea = document.getElementById("comment-edit-text-" +id); var start = textarea.selectionStart; @@ -1069,7 +1069,7 @@ var Dialog = { * to the event handler */ doImageBrowser : function (name, id) { - var url = Dialog._get_url("image",name,id); + var url = Dialog._get_url("photos",name,id); return Dialog.show(url); }, @@ -1086,7 +1086,7 @@ var Dialog = { * to the event handler */ doFileBrowser : function (name, id) { - var url = Dialog._get_url("file",name,id); + var url = Dialog._get_url("attachment",name,id); return Dialog.show(url); }, @@ -1095,7 +1095,7 @@ var Dialog = { if (id !== undefined) { hash = hash + "-" + id; } - return baseurl + "/fbrowser/"+type+"/?mode=minimal#"+hash; + return '/profile/' + localNickname + '/' + type + '/browser?mode=minimal#' + hash; }, _get_size: function() { diff --git a/view/templates/filebrowser.tpl b/view/templates/filebrowser.tpl deleted file mode 100644 index 09bf563ee7..0000000000 --- a/view/templates/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.1}}

- -
- {{/foreach}} -
- -
- -
-
- - - - - diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl index a67f9c3f0c..2a81db6dd1 100644 --- a/view/templates/jot-header.tpl +++ b/view/templates/jot-header.tpl @@ -61,11 +61,11 @@ function enableOnUser(){ **/ /* callback */ - $('body').on('fbrowser.image.main', function(e, filename, embedcode, id) { + $('body').on('fbrowser.photos.main', function(e, filename, embedcode, id) { $.colorbox.close(); addeditortext(embedcode); }); - $('body').on('fbrowser.file.main', function(e, filename, embedcode, id) { + $('body').on('fbrowser.photos.main', function(e, filename, embedcode, id) { $.colorbox.close(); addeditortext(embedcode); }); diff --git a/view/templates/profile/filebrowser.tpl b/view/templates/profile/filebrowser.tpl new file mode 100644 index 0000000000..ff25741a9b --- /dev/null +++ b/view/templates/profile/filebrowser.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/theme/frio/css/style.css b/view/theme/frio/css/style.css index b3250d8055..0e54d1cf97 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -1563,10 +1563,10 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview { max-height: calc(100vh - 220px); } } -.fbrowser.image .photo-album-image-wrapper { +.fbrowser.photos .photo-album-image-wrapper { box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2); } -.fbrowser.image .photo-album-image-wrapper .caption { +.fbrowser.photos .photo-album-image-wrapper .caption { pointer-events: none; } .fbrowser .profile-rotator-wrapper { diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js index 67d3b7923e..d7217fdbc6 100644 --- a/view/theme/frio/js/filebrowser.js +++ b/view/theme/frio/js/filebrowser.js @@ -9,7 +9,7 @@ * 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. + * This code handle user interaction for photo/file upload/browser dialog. * Is loaded from filebrowser_plain.tpl * * To load filebrowser in colorbox, call @@ -33,7 +33,7 @@ * will be one of "image" or "file", and the event handler will * get the following params: * - * filemane: filename of item choosed by user + * filename: filename of item chosen by user * embed: bbcode to embed element into posts * id: id from caller code * @@ -47,7 +47,7 @@ * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { * // close colorbox * $.colorbox.close(); - * // replace textxarea text with bbcode + * // replace textarea text with bbcode * $(id).value = bbcode; * }); **/ @@ -58,194 +58,177 @@ * This is a modified version to work with * the frio theme.and bootstrap modals * - * The origninal file is under: + * The original file is under: * js/filebrowser.js * */ var FileBrowser = { - nickname: "", - type: "", - event: "", - folder: "", + nickname: '', + type: '', + event: '', + folder: '', id: null, init: function (nickname, type, hash) { FileBrowser.nickname = nickname; FileBrowser.type = type; - FileBrowser.event = "fbrowser." + type; - - if (hash !== "") { - var h = hash.replace("#", ""); - var destination = h.split("-")[0]; - FileBrowser.id = h.split("-")[1]; - FileBrowser.event = FileBrowser.event + "." + destination; - if (destination === "comment") { - // Get the comment textimput field - var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id); + 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); + console.log('FileBrowser: ' + nickname, type, FileBrowser.event, FileBrowser.id); FileBrowser.postLoad(); - $(".error .close").on("click", function (e) { + $('.error .close').on('click', function (e) { e.preventDefault(); - $(".error").addClass("hidden"); + $('.error').addClass('hidden'); }); // Click on album link - $(".fbrowser").on("click", ".folders button, .path button", function (e) { + $('.fbrowser').on('click', '.folders button, .path button', function (e) { e.preventDefault(); - var url = - baseurl + - "/fbrowser/" + - FileBrowser.type + - "/" + - encodeURIComponent(this.dataset.folder) + - "?mode=none&theme=frio"; + 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) { + $('.fbrowser').on('click', '.photo-album-photo-link', function (e) { e.preventDefault(); - var embed = ""; - if (FileBrowser.type === "image") { - embed = "[url=" + this.dataset.link + "][img=" + this.dataset.img + "]" + this.dataset.alt + "[/img][/url]"; + let embed = ''; + if (FileBrowser.type === 'photos') { + embed = '[url=' + this.dataset.link + '][img=' + this.dataset.img + ']' + this.dataset.alt + '[/img][/url]'; } - if (FileBrowser.type === "file") { + if (FileBrowser.type === 'attachment') { // attachment links are "baseurl/attach/id"; we need id - embed = "[attachment]" + this.dataset.link.split("/").pop() + "[/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"); + 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]); + $('body').trigger(FileBrowser.event, [this.dataset.filename, embed, FileBrowser.id, this.dataset.img]); // Close model - $("#modal").modal("hide"); + $('#modal').modal('hide'); // Update autosize for this textarea - autosize.update($(".text-autosize")); + autosize.update($('.text-autosize')); }); - // EventListener for switching between image and file mode - $(".fbrowser").on("click", ".fbswitcher .btn", function (e) { + // EventListener for switching between photo and file mode + $('.fbrowser').on('click', '.fbswitcher .btn', function (e) { e.preventDefault(); - FileBrowser.type = this.getAttribute("data-mode"); - $(".fbrowser") + FileBrowser.type = this.getAttribute('data-mode'); + $('.fbrowser') .removeClass() - .addClass("fbrowser " + FileBrowser.type); - url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio"; + .addClass('fbrowser ' + FileBrowser.type); - FileBrowser.loadContent(url); + FileBrowser.loadContent(FileBrowser._getUrl("none")); }); }, // Initialize the AjaxUpload for the upload buttons uploadButtons: function () { - if ($("#upload-image").length) { - //AjaxUpload for images - var image_uploader = new window.AjaxUpload("upload-image", { - action: - "profile/" + - FileBrowser.nickname + - "/photos/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( - baseurl + - "/fbrowser/" + - FileBrowser.type + - "/" + - encodeURIComponent(FileBrowser.folder) + - "?mode=none&theme=frio", - ); - }, - }); + if ($('#upload-photos').length) { + //AjaxUpload for photos + new window.AjaxUpload( + 'upload-photos', + { + action: 'profile/' + FileBrowser.nickname + '/photos/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-file").length) { + if ($('#upload-attachment').length) { //AjaxUpload for files - var file_uploader = new window.AjaxUpload("upload-file", { - action: "profile/" + FileBrowser.nickname + "/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; - } - - var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio"; - // Load new content to fbrowser window - FileBrowser.loadContent(url); - }, - }); + new window.AjaxUpload( + 'upload-attachment', + { + action: 'profile/' + FileBrowser.nickname + '/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 ne content was loaded + // 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"); + $('.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(); + $('.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').load(url, function (responseText, textStatus) { + $('.profile-rotator-wrapper').hide(); + if (textStatus === 'success') { $(".fbrowser_content").show(); FileBrowser.postLoad(); } @@ -254,11 +237,17 @@ var FileBrowser = { // Initialize justified Gallery initGallery: function () { - $(".fbrowser.image .fbrowser-content-container").justifiedGallery({ + $('.fbrowser.photos .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 'profile/' + FileBrowser.nickname + '/' + FileBrowser.type + '/browser' + folderUrl + '?mode=' + mode + "&theme=frio"; + } }; // @license-end diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js index eaf41eeb87..5e21a0b0bd 100644 --- a/view/theme/frio/js/modal.js +++ b/view/theme/frio/js/modal.js @@ -82,7 +82,7 @@ $(document).ready(function () { }); // Insert filebrowser images into the input field (field_fileinput.tpl). - $("body").on("fbrowser.image.input", function (e, filename, embedcode, id, img) { + $("body").on("fbrowser.photos.input", function (e, filename, embedcode, id, img) { // Select the clicked button by it's attribute. var elm = $("[image-input='select']"); // Select the input field which belongs to this button. @@ -132,12 +132,12 @@ Dialog.show = function (url, title) { Dialog._get_url = function (type, name, id) { var hash = name; if (id !== undefined) hash = hash + "-" + id; - return "fbrowser/" + type + "/?mode=none&theme=frio#" + hash; + return "profile/" + localNickname + "/" + type + "/browser?mode=none&theme=frio#" + hash; }; // Does load the filebrowser into the jot modal. Dialog.showJot = function () { - var type = "image"; + var type = "photos"; var name = "main"; var url = Dialog._get_url(type, name); @@ -159,7 +159,7 @@ Dialog._load = function (url) { let filebrowser = document.getElementById("filebrowser"); // Try to fetch the hash form the url. - let match = url.match(/fbrowser\/[a-z]+\/.*(#.*)/); + let match = url.match(/profile\/[a-z]+\/.*(#.*)/); if (!filebrowser || match === null) { return; //not fbrowser } diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl deleted file mode 100644 index 13c4790487..0000000000 --- a/view/theme/frio/templates/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 *}} - -
diff --git a/view/theme/frio/templates/jot-header.tpl b/view/theme/frio/templates/jot-header.tpl index 25a02b9b60..61f92ff73c 100644 --- a/view/theme/frio/templates/jot-header.tpl +++ b/view/theme/frio/templates/jot-header.tpl @@ -61,13 +61,13 @@ **/ /* callback */ - $('body').on('fbrowser.image.main', function(e, filename, embedcode, id) { + $('body').on('fbrowser.photos.main', function(e, filename, embedcode, id) { ///@todo this part isn't ideal and need to be done in a better way jotTextOpenUI(document.getElementById("profile-jot-text")); jotActive(); addeditortext(embedcode); }) - .on('fbrowser.file.main', function(e, filename, embedcode, id) { + .on('fbrowser.attachment.main', function(e, filename, embedcode, id) { jotTextOpenUI(document.getElementById("profile-jot-text")); jotActive(); addeditortext(embedcode); diff --git a/view/theme/frio/templates/js_strings.tpl b/view/theme/frio/templates/js_strings.tpl index 066e4bd585..c422648a21 100644 --- a/view/theme/frio/templates/js_strings.tpl +++ b/view/theme/frio/templates/js_strings.tpl @@ -5,6 +5,7 @@ They are loaded into the html so that js functions can use them *}} var updateInterval = {{$update_interval}}; var localUser = {{if $local_user}}{{$local_user}}{{else}}false{{/if}}; + var localNickname = {{if $local_nickname}}"{{$local_nickname|escape:'javascript' nofilter}}"{{else}}false{{/if}}; var aStr = { 'delitem' : "{{$delitem|escape:'javascript' nofilter}}", 'blockAuthor' : "{{$blockAuthor|escape:'javascript' nofilter}}", diff --git a/view/theme/frio/templates/profile/filebrowser.tpl b/view/theme/frio/templates/profile/filebrowser.tpl new file mode 100644 index 0000000000..7b24537cee --- /dev/null +++ b/view/theme/frio/templates/profile/filebrowser.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/quattro/dark/style.css b/view/theme/quattro/dark/style.css index e4f7fb3b95..30271c49b2 100644 --- a/view/theme/quattro/dark/style.css +++ b/view/theme/quattro/dark/style.css @@ -2517,29 +2517,29 @@ footer { .fbrowser .list { padding: 10px; } -.fbrowser.image .photo-album-image-wrapper { +.fbrowser.photos .photo-album-image-wrapper { width: 48px; height: 48px; } -.fbrowser.image a img { +.fbrowser.photos a img { width: auto; height: 48px; } -.fbrowser.image a p { +.fbrowser.photos a p { display: none; } -.fbrowser.file .photo-album-image-wrapper { +.fbrowser.attachment .photo-album-image-wrapper { float: none; white-space: nowrap; width: 100%; height: auto; } -.fbrowser.file img { +.fbrowser.attachment img { display: inline; width: 16px; height: 16px; } -.fbrowser.file p { +.fbrowser.attachment p { display: inline; white-space: nowrap; } diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css index 3ab55fbaff..574f9c5318 100644 --- a/view/theme/quattro/green/style.css +++ b/view/theme/quattro/green/style.css @@ -2516,29 +2516,29 @@ footer { .fbrowser .list { padding: 10px; } -.fbrowser.image .photo-album-image-wrapper { +.fbrowser.photos .photo-album-image-wrapper { width: 48px; height: 48px; } -.fbrowser.image a img { +.fbrowser.photos a img { width: auto; height: 48px; } -.fbrowser.image a p { +.fbrowser.photos a p { display: none; } -.fbrowser.file .photo-album-image-wrapper { +.fbrowser.attachment .photo-album-image-wrapper { float: none; white-space: nowrap; width: 100%; height: auto; } -.fbrowser.file img { +.fbrowser.attachment img { display: inline; width: 16px; height: 16px; } -.fbrowser.file p { +.fbrowser.attachment p { display: inline; white-space: nowrap; } diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css index 7adf87ad93..6a4afb89ce 100644 --- a/view/theme/quattro/lilac/style.css +++ b/view/theme/quattro/lilac/style.css @@ -2516,29 +2516,29 @@ footer { .fbrowser .list { padding: 10px; } -.fbrowser.image .photo-album-image-wrapper { +.fbrowser.photos .photo-album-image-wrapper { width: 48px; height: 48px; } -.fbrowser.image a img { +.fbrowser.photos a img { width: auto; height: 48px; } -.fbrowser.image a p { +.fbrowser.photos a p { display: none; } -.fbrowser.file .photo-album-image-wrapper { +.fbrowser.attachment .photo-album-image-wrapper { float: none; white-space: nowrap; width: 100%; height: auto; } -.fbrowser.file img { +.fbrowser.attachment img { display: inline; width: 16px; height: 16px; } -.fbrowser.file p { +.fbrowser.attachment p { display: inline; white-space: nowrap; } diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index 9a990557e4..e6a953e483 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -1673,11 +1673,11 @@ footer { height: 100px; display: table-row; } } .fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;} .fbrowser .list { padding: 10px; } -.fbrowser.image .photo-album-image-wrapper { width: 48px; height: 48px; } -.fbrowser.image a img { width: auto; height: 48px; } -.fbrowser.image a p { display: none;} -.fbrowser.file .photo-album-image-wrapper { float:none; white-space: nowrap; width: 100%; height: auto; } -.fbrowser.file img { display: inline; width: 16px; height: 16px} -.fbrowser.file p { display: inline; white-space: nowrap; } +.fbrowser.photos .photo-album-image-wrapper { width: 48px; height: 48px; } +.fbrowser.photos a img { width: auto; height: 48px; } +.fbrowser.photos a p { display: none;} +.fbrowser.attachment .photo-album-image-wrapper { float:none; white-space: nowrap; width: 100%; height: auto; } +.fbrowser.attachment img { display: inline; width: 16px; height: 16px} +.fbrowser.attachment p { display: inline; white-space: nowrap; } .fbrowser .upload { clear: both; padding-top: 1em;} diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css index 9054f62f7d..c156534d31 100644 --- a/view/theme/vier/style.css +++ b/view/theme/vier/style.css @@ -3261,7 +3261,7 @@ img.photo-album-photo { } /* upload/select popup */ -fbrowser.image .photo-album-image-wrapper { margin-left: 10px; } +fbrowser.photos .photo-album-image-wrapper { margin-left: 10px; } #message-preview { margin-top: 15px; } #message-preview span { width: 100%; } #message-preview .mail-count, #message-preview .mail-delete { display:none; }