Move mod/fbrowser to src\Modules\Attachment|Photos\Browser

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
 	{

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?'),

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, '/');

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
 	 *

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();
 		}

src/Module/Profile/Attachment/Browser.php

@@ -0,0 +1,81 @@
+<?php
+
+namespace Friendica\Module\Profile\Attachment;
+
+use Friendica\App;
+use Friendica\BaseModule;
+use Friendica\Core\L10n;
+use Friendica\Core\Renderer;
+use Friendica\Core\Session\Capability\IHandleUserSessions;
+use Friendica\Core\System;
+use Friendica\Model\Attach;
+use Friendica\Module\Response;
+use Friendica\Util\Profiler;
+use Friendica\Util\Strings;
+use Psr\Log\LoggerInterface;
+
+/**
+ * Browser for Attachments
+ */
+class Browser extends BaseModule
+{
+	/** @var IHandleUserSessions */
+	protected $session;
+	/** @var App */
+	protected $app;
+
+	public function __construct(L10n $l10n, App\BaseURL $baseUrl, App\Arguments $args, LoggerInterface $logger, Profiler $profiler, Response $response, IHandleUserSessions $session, App $app, array $server, array $parameters = [])
+	{
+		parent::__construct($l10n, $baseUrl, $args, $logger, $profiler, $response, $server, $parameters);
+
+		$this->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),
+		];
+	}
+}

src/Module/Profile/Photos/Browser.php

@@ -0,0 +1,105 @@
+<?php
+
+namespace Friendica\Module\Profile\Photos;
+
+use Friendica\App;
+use Friendica\BaseModule;
+use Friendica\Core\L10n;
+use Friendica\Core\Renderer;
+use Friendica\Core\Session\Capability\IHandleUserSessions;
+use Friendica\Core\System;
+use Friendica\Model\Photo;
+use Friendica\Module\Response;
+use Friendica\Util\Images;
+use Friendica\Util\Profiler;
+use Friendica\Util\Strings;
+use Psr\Log\LoggerInterface;
+
+/**
+ * Browser for Photos
+ */
+class Browser extends BaseModule
+{
+	/** @var IHandleUserSessions */
+	protected $session;
+	/** @var App */
+	protected $app;
+
+	public function __construct(L10n $l10n, App\BaseURL $baseUrl, App\Arguments $args, LoggerInterface $logger, Profiler $profiler, Response $response, IHandleUserSessions $session, App $app, array $server, array $parameters = [])
+	{
+		parent::__construct($l10n, $baseUrl, $args, $logger, $profiler, $response, $server, $parameters);
+
+		$this->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'],
+		];
+	}
+}

static/routes.config.php

@@ -31,18 +31,20 @@ use Friendica\App\Router as R;
 use Friendica\Module;
 
 $profileRoutes = [
-	''                                         => [Module\Profile\Index::class,             [R::GET]],
+	''                                         => [Module\Profile\Index::class,              [R::GET]],
-	'/attachment/upload'                       => [Module\Profile\Attachment\Upload::class, [        R::POST]],
+	'/attachment/upload'                       => [Module\Profile\Attachment\Upload::class,  [        R::POST]],
-	'/contacts/common'                         => [Module\Profile\Common::class,            [R::GET]],
+	'/attachment/browser'                      => [Module\Profile\Attachment\Browser::class, [R::GET]],
-	'/contacts[/{type}]'                       => [Module\Profile\Contacts::class,          [R::GET]],
+	'/contacts/common'                         => [Module\Profile\Common::class,             [R::GET]],
-	'/media'                                   => [Module\Profile\Media::class,             [R::GET]],
+	'/contacts[/{type}]'                       => [Module\Profile\Contacts::class,           [R::GET]],
-	'/photos'                                  => [Module\Profile\Photos\Index::class,      [R::GET         ]],
+	'/media'                                   => [Module\Profile\Media::class,              [R::GET]],
-	'/photos/upload'                           => [Module\Profile\Photos\Upload::class,     [        R::POST]],
+	'/photos'                                  => [Module\Profile\Photos\Index::class,       [R::GET         ]],
-	'/profile'                                 => [Module\Profile\Profile::class,           [R::GET]],
+	'/photos/browser[/{album}]'                => [Module\Profile\Photos\Browser::class,     [R::GET]],
-	'/remote_follow'                           => [Module\Profile\RemoteFollow::class,      [R::GET, R::POST]],
+	'/photos/upload'                           => [Module\Profile\Photos\Upload::class,      [        R::POST]],
-	'/schedule'                                => [Module\Profile\Schedule::class,          [R::GET, R::POST]],
+	'/profile'                                 => [Module\Profile\Profile::class,            [R::GET]],
-	'/status[/{category}[/{date1}[/{date2}]]]' => [Module\Profile\Status::class,            [R::GET]],
+	'/remote_follow'                           => [Module\Profile\RemoteFollow::class,       [R::GET, R::POST]],
-	'/unkmail'                                 => [Module\Profile\UnkMail::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 = [

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.photos .photo-album-image-wrapper { float: left; }
-.fbrowser.image a img, .fbrowser.image .btn-link img { height: 48px; }
+.fbrowser.photos a img, .fbrowser.photos .btn-link img { height: 48px; }
-.fbrowser.image a p, .fbrowser.image .btn-link p { display: none;}
+.fbrowser.photos a p, .fbrowser.photos .btn-link p { display: none;}
-.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; }
+.fbrowser.attachment .photo-album-image-wrapper { float:none;  white-space: nowrap; }
-.fbrowser.file img { display: inline; }
+.fbrowser.attachment img { display: inline; }
-.fbrowser.file p  { display: inline; white-space: nowrap; }
+.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; }

view/js/filebrowser.js

@@ -33,7 +33,7 @@
  * <type> 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 = {
+	init: function (nickname, type) {
-	nickname : "",
-	type : "",
-	event: "",
-	id : null,
-
-	init: function(nickname, type) {
 		FileBrowser.nickname = nickname;
 		FileBrowser.type = type;
-		FileBrowser.event = "fbrowser."+type;
+		FileBrowser.event = "fbrowser." + type;
-		if (location['hash']!=="") {
+		if (location['hash'] !== "") {
-			var h = location['hash'].replace("#","");
+			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 = "";
+			let embed = '';
-			if (FileBrowser.type == "image") {
+			if (FileBrowser.type === "photos") {
-				embed = "[url="+this.dataset.link+"][img="+this.dataset.img+"]"+this.dataset.alt+"[/img][/url]";
+				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 + '[/attachment]';
-				embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/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)
+		if ($('#upload-photos').length)
-			var image_uploader = new window.AjaxUpload(
+		{
-				'upload-image',
+			new window.AjaxUpload(
-				{ action: 'profile/' + FileBrowser.nickname + '/photos/upload?response=json',
+				'upload-photos',
+				{
+					action: 'profile/' + FileBrowser.nickname + '/photos/upload?response=json',
 					name: 'userfile',
 					responseType: 'json',
-					onSubmit: function(file,ext) { $('#profile-rotator').show(); $(".error").addClass('hidden'); },
+					onSubmit: function (file, ext) {
-					onComplete: function(file,response) {
+						$('#profile-rotator').show();
-						if (response['error']!= undefined) {
+						$('.error').addClass('hidden');
-							$(".error span").html(response['error']);
+					},
-							$(".error").removeClass('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.href = FileBrowser._getUrl("minimal", location['hash']);
-						location.reload(true);
+						location.reload();
 					}
 				}
 			);
+		}
 
-		if ($("#upload-file").length)
+		if ($('#upload-attachment').length)
-			var file_uploader = new window.AjaxUpload(
+		{
-				'upload-file',
+			new window.AjaxUpload(
-				{ action: 'profile/' + FileBrowser.nickname + '/attachment/upload?response=json',
+				'upload-attachment',
+				{
+					action: 'profile/' + FileBrowser.nickname + '/attachment/upload?response=json',
 					name: 'userfile',
 					responseType: 'json',
-					onSubmit: function(file,ext) { $('#profile-rotator').show(); $(".error").addClass('hidden'); },
+					onSubmit: function (file, ext) {
-					onComplete: function(file,response) {
+						$('#profile-rotator').show();
-						if (response['error']!= undefined) {
+						$('.error').addClass('hidden');
-							$(".error span").html(response['error']);
+					},
-							$(".error").removeClass('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.href = FileBrowser._getUrl("minimal", location['hash']);
-						location.reload(true);
+						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

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() {

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

view/templates/profile/filebrowser.tpl

@@ -1,8 +1,8 @@
 <!--
 	This is the template used by mod/fbrowser.php
 -->
-<script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
+<script type="text/javascript" src="view/js/ajaxupload.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
-<script type="text/javascript" src="{{$baseurl}}/view/js/filebrowser.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
+<script type="text/javascript" src="view/js/filebrowser.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 <script>
 	$(function() {
 		FileBrowser.init("{{$nickname}}", "{{$type}}");
@@ -33,7 +33,7 @@
 		{{foreach $files as $f}}
 		<div class="photo-album-image-wrapper">
 			<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}" data-alt="{{$f.3}}">
-				<img src="{{$f.2}}">
+				<img alt="{{$f.3}}" src="{{$f.1}}">
 				<p>{{$f.1}}</p>
 			</a>
 		</div>

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 {

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 @@
  * <type> 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: "",
+	nickname: '',
-	type: "",
+	type: '',
-	event: "",
+	event: '',
-	folder: "",
+	folder: '',
 	id: null,
 
 	init: function (nickname, type, hash) {
 		FileBrowser.nickname = nickname;
 		FileBrowser.type = type;
-		FileBrowser.event = "fbrowser." + type;
+		FileBrowser.event = 'fbrowser.' + type;
 
-		if (hash !== "") {
+		if (hash !== '') {
-			var h = hash.replace("#", "");
+			const h = hash.replace('#', '');
-			var destination = h.split("-")[0];
+			const destination = h.split('-')[0];
-			FileBrowser.id = h.split("-")[1];
+			FileBrowser.id = h.split('-')[1];
-			FileBrowser.event = FileBrowser.event + "." + destination;
+			FileBrowser.event = FileBrowser.event + '.' + destination;
-			if (destination === "comment") {
+			if (destination === 'comment') {
-				// Get the comment textimput field
+				// Get the comment textinput field
-				var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
+				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 =
+			let url = FileBrowser._getUrl("none", this.dataset.folder);
-				baseurl +
-				"/fbrowser/" +
-				FileBrowser.type +
-				"/" +
-				encodeURIComponent(this.dataset.folder) +
-				"?mode=none&theme=frio";
 			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 = "";
+			let embed = '';
-			if (FileBrowser.type === "image") {
+			if (FileBrowser.type === 'photos') {
-				embed = "[url=" + this.dataset.link + "][img=" + this.dataset.img + "]" + this.dataset.alt + "[/img][/url]";
+				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 !== null && typeof commentElm !== 'undefined') {
-				if (commentElm.value === "") {
+				if (commentElm.value === '') {
-					$("#comment-edit-text-" + FileBrowser.id)
+					$('#comment-edit-text-' + FileBrowser.id)
-						.addClass("comment-edit-text-full")
+						.addClass('comment-edit-text-full')
-						.removeClass("comment-edit-text-empty");
+						.removeClass('comment-edit-text-empty');
-					$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
+					$('#comment-edit-submit-wrapper-' + FileBrowser.id).show();
-					$("#comment-edit-text-" + FileBrowser.id).attr("tabindex", "9");
+					$('#comment-edit-text-' + FileBrowser.id).attr('tabindex', '9');
-					$("#comment-edit-submit-" + FileBrowser.id).attr("tabindex", "10");
+					$('#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
+		// EventListener for switching between photo and file mode
-		$(".fbrowser").on("click", ".fbswitcher .btn", function (e) {
+		$('.fbrowser').on('click', '.fbswitcher .btn', function (e) {
 			e.preventDefault();
-			FileBrowser.type = this.getAttribute("data-mode");
+			FileBrowser.type = this.getAttribute('data-mode');
-			$(".fbrowser")
+			$('.fbrowser')
 				.removeClass()
-				.addClass("fbrowser " + FileBrowser.type);
+				.addClass('fbrowser ' + FileBrowser.type);
-			url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio";
 
-			FileBrowser.loadContent(url);
+			FileBrowser.loadContent(FileBrowser._getUrl("none"));
 		});
 	},
 
 	// Initialize the AjaxUpload for the upload buttons
 	uploadButtons: function () {
-		if ($("#upload-image").length) {
+		if ($('#upload-photos').length) {
-			//AjaxUpload for images
+			//AjaxUpload for photos
-			var image_uploader = new window.AjaxUpload("upload-image", {
+			new window.AjaxUpload(
-				action:
+				'upload-photos',
-					"profile/" +
+				{
-					FileBrowser.nickname +
+					action: 'profile/' + FileBrowser.nickname + '/photos/upload?response=json&album=' + encodeURIComponent(FileBrowser.folder),
-					"/photos/upload?response=json&album=" +
+					name: 'userfile',
-					encodeURIComponent(FileBrowser.folder),
+					responseType: 'json',
-				name: "userfile",
+					onSubmit: function (file, ext) {
-				responseType: "json",
+						$('.fbrowser-content').hide();
-				onSubmit: function (file, ext) {
+						$('.fbrowser .profile-rotator-wrapper').show();
-					$(".fbrowser-content").hide();
+						$('.error').addClass('hidden');
-					$(".fbrowser .profile-rotator-wrapper").show();
+					},
-					$(".error").addClass("hidden");
+					onComplete: function (file, response) {
-				},
+						if (response['error'] !== undefined) {
-				onComplete: function (file, response) {
+							$('.error span').html(response['error']);
-					if (response["error"] != undefined) {
+							$('.error').removeClass('hidden');
-						$(".error span").html(response["error"]);
+							$('.fbrowser .profile-rotator-wrapper').hide();
-						$(".error").removeClass("hidden");
+							$('.fbrowser-content').show();
-						$(".fbrowser .profile-rotator-wrapper").hide();
+							return;
-						$(".fbrowser-content").show();
+						}
-						return;
+						// load new content to fbrowser window
-					}
+						FileBrowser.loadContent(FileBrowser._getUrl("none"));
-
+					},
-					// load new content to fbrowser window
+				});
-					FileBrowser.loadContent(
-						baseurl +
-							"/fbrowser/" +
-							FileBrowser.type +
-							"/" +
-							encodeURIComponent(FileBrowser.folder) +
-							"?mode=none&theme=frio",
-					);
-				},
-			});
 		}
 
-		if ($("#upload-file").length) {
+		if ($('#upload-attachment').length) {
 			//AjaxUpload for files
-			var file_uploader = new window.AjaxUpload("upload-file", {
+			new window.AjaxUpload(
-				action: "profile/" + FileBrowser.nickname + "/attachment/upload?response=json",
+				'upload-attachment',
-				name: "userfile",
+				{
-				responseType: "json",
+					action: 'profile/' + FileBrowser.nickname + '/attachment/upload?response=json',
-				onSubmit: function (file, ext) {
+					name: 'userfile',
-					$(".fbrowser-content").hide();
+					responseType: 'json',
-					$(".fbrowser .profile-rotator-wrapper").show();
+					onSubmit: function (file, ext) {
-					$(".error").addClass("hidden");
+						$('.fbrowser-content').hide();
-				},
+						$('.fbrowser .profile-rotator-wrapper').show();
-				onComplete: function (file, response) {
+						$('.error').addClass('hidden');
-					if (response["error"] != undefined) {
+					},
-						$(".error span").html(response["error"]);
+					onComplete: function (file, response) {
-						$(".error").removeClass("hidden");
+						if (response["error"] !== undefined) {
-						$(".fbrowser .profile-rotator-wrapper").hide();
+							$('.error span').html(response['error']);
-						$(".fbrowser-content").show();
+							$('.error').removeClass('hidden');
-						return;
+							$('.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
+						// Load new content to fbrowser window
-					FileBrowser.loadContent(url);
+						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 .btn').removeClass('active');
-		$(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("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-content').hide();
-		$(".fbrowser .profile-rotator-wrapper").show();
+		$('.fbrowser .profile-rotator-wrapper').show();
 
 		// load new content to fbrowser window
-		$(".fbrowser").load(url, function (responseText, textStatus) {
+		$('.fbrowser').load(url, function (responseText, textStatus) {
-			$(".profile-rotator-wrapper").hide();
+			$('.profile-rotator-wrapper').hide();
-			if (textStatus === "success") {
+			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

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
 	}

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);

view/theme/frio/templates/js_strings.tpl

@@ -5,6 +5,7 @@ They are loaded into the html <head> 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}}",

view/theme/frio/templates/profile/filebrowser.tpl

@@ -16,9 +16,9 @@
 		{{/foreach}}
 
 			{{* Switch between image and file mode *}}
-			<div class="fbswitcher btn-group btn-group-xs pull-right" aria-label="Switch between image and file mode">
+			<div class="fbswitcher btn-group btn-group-xs pull-right" aria-label="Switch between photo and attachment mode">
-				<button type="button" class="btn btn-default" data-mode="image" aria-label="Image Mode"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
+				<button type="button" class="btn btn-default" data-mode="photos" aria-label="Photo Mode"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
-				<button type="button" class="btn btn-default" data-mode="file" aria-label="File Mode"><i class="fa fa-file-o" aria-hidden="true"></i></button>
+				<button type="button" class="btn btn-default" data-mode="attachment" aria-label="Attachment Mode"><i class="fa fa-file-o" aria-hidden="true"></i></button>
 			</div>
 		</ol>
 

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

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

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

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.photos .photo-album-image-wrapper { width: 48px; height: 48px; }
-.fbrowser.image a img { width: auto; height: 48px; }
+.fbrowser.photos a img { width: auto; height: 48px; }
-.fbrowser.image a p { display: none;}
+.fbrowser.photos a p { display: none;}
-.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
+.fbrowser.attachment .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
-.fbrowser.file img { display: inline; width: 16px; height: 16px}
+.fbrowser.attachment img { display: inline; width: 16px; height: 16px}
-.fbrowser.file p  { display: inline; white-space: nowrap; }
+.fbrowser.attachment p  { display: inline; white-space: nowrap; }
 
 .fbrowser .upload { clear: both; padding-top: 1em;}

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