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

This commit is contained in:
Philipp 2022-11-25 23:43:07 +01:00
parent a95e93c725
commit d0b16b2fc1
No known key found for this signature in database
GPG key ID: 24A7501396EB5432
24 changed files with 483 additions and 233 deletions

View file

@ -85,6 +85,8 @@ class Arguments
/** /**
* @return string The module name based on the 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 public function getModuleName(): string
{ {

View file

@ -241,6 +241,7 @@ class Page implements ArrayAccess
* being first * being first
*/ */
$this->page['htmlhead'] = Renderer::replaceMacros($tpl, [ $this->page['htmlhead'] = Renderer::replaceMacros($tpl, [
'$local_nickname' => $app->getLoggedInUserNickname(),
'$local_user' => $localUID, '$local_user' => $localUID,
'$generator' => 'Friendica' . ' ' . App::VERSION, '$generator' => 'Friendica' . ' ' . App::VERSION,
'$delitem' => $l10n->t('Delete this item?'), '$delitem' => $l10n->t('Delete this item?'),

View file

@ -266,7 +266,7 @@ class Router
* @throws HTTPException\MethodNotAllowedException If a rule matched but the method didn't * @throws HTTPException\MethodNotAllowedException If a rule matched but the method didn't
* @throws HTTPException\NotFoundException If no rule matched * @throws HTTPException\NotFoundException If no rule matched
*/ */
private function getModuleClass(): string public function getModuleClass(): string
{ {
$cmd = $this->args->getCommand(); $cmd = $this->args->getCommand();
$cmd = '/' . ltrim($cmd, '/'); $cmd = '/' . ltrim($cmd, '/');

View file

@ -173,6 +173,59 @@ class Photo
return $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 * Check if photo with given conditions exists
* *

View file

@ -37,7 +37,6 @@ class Attach extends BaseModule
*/ */
protected function rawContent(array $request = []) protected function rawContent(array $request = [])
{ {
$a = DI::app();
if (empty($this->parameters['item'])) { if (empty($this->parameters['item'])) {
throw new \Friendica\Network\HTTPException\BadRequestException(); throw new \Friendica\Network\HTTPException\BadRequestException();
} }

View file

@ -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),
];
}
}

View file

@ -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'],
];
}
}

View file

@ -33,10 +33,12 @@ use Friendica\Module;
$profileRoutes = [ $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]],
'/attachment/browser' => [Module\Profile\Attachment\Browser::class, [R::GET]],
'/contacts/common' => [Module\Profile\Common::class, [R::GET]], '/contacts/common' => [Module\Profile\Common::class, [R::GET]],
'/contacts[/{type}]' => [Module\Profile\Contacts::class, [R::GET]], '/contacts[/{type}]' => [Module\Profile\Contacts::class, [R::GET]],
'/media' => [Module\Profile\Media::class, [R::GET]], '/media' => [Module\Profile\Media::class, [R::GET]],
'/photos' => [Module\Profile\Photos\Index::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]], '/photos/upload' => [Module\Profile\Photos\Upload::class, [ R::POST]],
'/profile' => [Module\Profile\Profile::class, [R::GET]], '/profile' => [Module\Profile\Profile::class, [R::GET]],
'/remote_follow' => [Module\Profile\RemoteFollow::class, [R::GET, R::POST]], '/remote_follow' => [Module\Profile\RemoteFollow::class, [R::GET, R::POST]],

View file

@ -345,12 +345,12 @@ img.acpopup-img {
.fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;} .fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;}
.fbrowser .folders ul { list-style-type: none; padding-left: 10px;} .fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
.fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; } .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 .upload { clear: both; padding-top: 1em;}
.fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;} .fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;}
.fbrowser .error .close { float: right; font-weight: bold; } .fbrowser .error .close { float: right; font-weight: bold; }

View file

@ -33,7 +33,7 @@
* <type> will be one of "image" or "file", and the event handler will * <type> will be one of "image" or "file", and the event handler will
* get the following params: * 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 * embed: bbcode to embed element into posts
* id: id from caller code * id: id from caller code
* *
@ -47,52 +47,51 @@
* $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {
* // close colorbox * // close colorbox
* $.colorbox.close(); * $.colorbox.close();
* // replace textxarea text with bbcode * // replace textarea text with bbcode
* $(id).value = 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.nickname = nickname;
FileBrowser.type = type; 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.event = FileBrowser.event + "." + h.split("-")[0];
FileBrowser.id = h.split("-")[1]; 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(); 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(); 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(); 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); console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);
parent.$("body").trigger(FileBrowser.event, [ parent.$('body').trigger(FileBrowser.event, [
this.dataset.filename, this.dataset.filename,
embed, embed,
FileBrowser.id 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', name: 'userfile',
responseType: 'json', 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(); $('#profile-rotator').hide();
return; 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', name: 'userfile',
responseType: 'json', 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(); $('#profile-rotator').hide();
return; 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 // @license-end

View file

@ -166,7 +166,7 @@ $(function() {
/* event from comment textarea button popups */ /* event from comment textarea button popups */
/* insert returned bbcode at cursor position or replace selected text */ /* 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(); $.colorbox.close();
var textarea = document.getElementById("comment-edit-text-" +id); var textarea = document.getElementById("comment-edit-text-" +id);
var start = textarea.selectionStart; var start = textarea.selectionStart;
@ -1069,7 +1069,7 @@ var Dialog = {
* to the event handler * to the event handler
*/ */
doImageBrowser : function (name, id) { doImageBrowser : function (name, id) {
var url = Dialog._get_url("image",name,id); var url = Dialog._get_url("photos",name,id);
return Dialog.show(url); return Dialog.show(url);
}, },
@ -1086,7 +1086,7 @@ var Dialog = {
* to the event handler * to the event handler
*/ */
doFileBrowser : function (name, id) { doFileBrowser : function (name, id) {
var url = Dialog._get_url("file",name,id); var url = Dialog._get_url("attachment",name,id);
return Dialog.show(url); return Dialog.show(url);
}, },
@ -1095,7 +1095,7 @@ var Dialog = {
if (id !== undefined) { if (id !== undefined) {
hash = hash + "-" + id; hash = hash + "-" + id;
} }
return baseurl + "/fbrowser/"+type+"/?mode=minimal#"+hash; return '/profile/' + localNickname + '/' + type + '/browser?mode=minimal#' + hash;
}, },
_get_size: function() { _get_size: function() {

View file

@ -61,11 +61,11 @@ function enableOnUser(){
**/ **/
/* callback */ /* callback */
$('body').on('fbrowser.image.main', function(e, filename, embedcode, id) { $('body').on('fbrowser.photos.main', function(e, filename, embedcode, id) {
$.colorbox.close(); $.colorbox.close();
addeditortext(embedcode); addeditortext(embedcode);
}); });
$('body').on('fbrowser.file.main', function(e, filename, embedcode, id) { $('body').on('fbrowser.photos.main', function(e, filename, embedcode, id) {
$.colorbox.close(); $.colorbox.close();
addeditortext(embedcode); addeditortext(embedcode);
}); });

View file

@ -1,8 +1,8 @@
<!-- <!--
This is the template used by mod/fbrowser.php 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> <script>
$(function() { $(function() {
FileBrowser.init("{{$nickname}}", "{{$type}}"); FileBrowser.init("{{$nickname}}", "{{$type}}");
@ -33,7 +33,7 @@
{{foreach $files as $f}} {{foreach $files as $f}}
<div class="photo-album-image-wrapper"> <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}}"> <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> <p>{{$f.1}}</p>
</a> </a>
</div> </div>

View file

@ -1563,10 +1563,10 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
max-height: calc(100vh - 220px); 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); 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; pointer-events: none;
} }
.fbrowser .profile-rotator-wrapper { .fbrowser .profile-rotator-wrapper {

View file

@ -9,7 +9,7 @@
* the Free Software Foundation, either version 3 of the License, or * the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version. * (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 * Is loaded from filebrowser_plain.tpl
* *
* To load filebrowser in colorbox, call * To load filebrowser in colorbox, call
@ -33,7 +33,7 @@
* <type> will be one of "image" or "file", and the event handler will * <type> will be one of "image" or "file", and the event handler will
* get the following params: * 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 * embed: bbcode to embed element into posts
* id: id from caller code * id: id from caller code
* *
@ -47,7 +47,7 @@
* $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {
* // close colorbox * // close colorbox
* $.colorbox.close(); * $.colorbox.close();
* // replace textxarea text with bbcode * // replace textarea text with bbcode
* $(id).value = bbcode; * $(id).value = bbcode;
* }); * });
**/ **/
@ -58,194 +58,177 @@
* This is a modified version to work with * This is a modified version to work with
* the frio theme.and bootstrap modals * the frio theme.and bootstrap modals
* *
* The origninal file is under: * The original file is under:
* js/filebrowser.js * js/filebrowser.js
* *
*/ */
var FileBrowser = { var FileBrowser = {
nickname: "", nickname: '',
type: "", type: '',
event: "", event: '',
folder: "", folder: '',
id: null, id: null,
init: function (nickname, type, hash) { init: function (nickname, type, hash) {
FileBrowser.nickname = nickname; FileBrowser.nickname = nickname;
FileBrowser.type = type; 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(); FileBrowser.postLoad();
$(".error .close").on("click", function (e) { $('.error .close').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$(".error").addClass("hidden"); $('.error').addClass('hidden');
}); });
// Click on album link // Click on album link
$(".fbrowser").on("click", ".folders button, .path button", function (e) { $('.fbrowser').on('click', '.folders button, .path button', function (e) {
e.preventDefault(); 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.folder = this.dataset.folder;
FileBrowser.loadContent(url); FileBrowser.loadContent(url);
}); });
//Embed on click //Embed on click
$(".fbrowser").on("click", ".photo-album-photo-link", function (e) { $('.fbrowser').on('click', '.photo-album-photo-link', function (e) {
e.preventDefault(); 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 // 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 // Delete prefilled Text of the comment input
// Note: not the best solution but function commentOpenUI don't // Note: not the best solution but function commentOpenUI don't
// work as expected (we need a way to wait until commentOpenUI would be finished). // work as expected (we need a way to wait until commentOpenUI would be finished).
// As for now we insert pieces of this function here // 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); 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 // Close model
$("#modal").modal("hide"); $('#modal').modal('hide');
// Update autosize for this textarea // 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(); e.preventDefault();
FileBrowser.type = this.getAttribute("data-mode"); FileBrowser.type = this.getAttribute('data-mode');
$(".fbrowser") $('.fbrowser')
.removeClass() .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 // Initialize the AjaxUpload for the upload buttons
uploadButtons: function () { 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",
responseType: "json",
onSubmit: function (file, ext) { onSubmit: function (file, ext) {
$(".fbrowser-content").hide(); $('.fbrowser-content').hide();
$(".fbrowser .profile-rotator-wrapper").show(); $('.fbrowser .profile-rotator-wrapper').show();
$(".error").addClass("hidden"); $('.error').addClass('hidden');
}, },
onComplete: function (file, response) { onComplete: function (file, response) {
if (response["error"] != undefined) { if (response['error'] !== undefined) {
$(".error span").html(response["error"]); $('.error span').html(response['error']);
$(".error").removeClass("hidden"); $('.error').removeClass('hidden');
$(".fbrowser .profile-rotator-wrapper").hide(); $('.fbrowser .profile-rotator-wrapper').hide();
$(".fbrowser-content").show(); $('.fbrowser-content').show();
return; return;
} }
// load new content to fbrowser window // load new content to fbrowser window
FileBrowser.loadContent( FileBrowser.loadContent(FileBrowser._getUrl("none"));
baseurl +
"/fbrowser/" +
FileBrowser.type +
"/" +
encodeURIComponent(FileBrowser.folder) +
"?mode=none&theme=frio",
);
}, },
}); });
} }
if ($("#upload-file").length) { if ($('#upload-attachment').length) {
//AjaxUpload for files //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',
name: 'userfile',
responseType: 'json',
onSubmit: function (file, ext) { onSubmit: function (file, ext) {
$(".fbrowser-content").hide(); $('.fbrowser-content').hide();
$(".fbrowser .profile-rotator-wrapper").show(); $('.fbrowser .profile-rotator-wrapper').show();
$(".error").addClass("hidden"); $('.error').addClass('hidden');
}, },
onComplete: function (file, response) { onComplete: function (file, response) {
if (response["error"] != undefined) { if (response["error"] !== undefined) {
$(".error span").html(response["error"]); $('.error span').html(response['error']);
$(".error").removeClass("hidden"); $('.error').removeClass('hidden');
$(".fbrowser .profile-rotator-wrapper").hide(); $('.fbrowser .profile-rotator-wrapper').hide();
$(".fbrowser-content").show(); $('.fbrowser-content').show();
return; 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 () { postLoad: function () {
FileBrowser.initGallery(); 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 // We need to add the AjaxUpload to the button
FileBrowser.uploadButtons(); FileBrowser.uploadButtons();
}, },
// Load new content (e.g. change photo album) // Load new content (e.g. change photo album)
loadContent: function (url) { 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 // 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(); $(".fbrowser_content").show();
FileBrowser.postLoad(); FileBrowser.postLoad();
} }
@ -254,11 +237,17 @@ var FileBrowser = {
// Initialize justified Gallery // Initialize justified Gallery
initGallery: function () { initGallery: function () {
$(".fbrowser.image .fbrowser-content-container").justifiedGallery({ $('.fbrowser.photos .fbrowser-content-container').justifiedGallery({
rowHeight: 80, rowHeight: 80,
margins: 4, margins: 4,
border: 0, 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 // @license-end

View file

@ -82,7 +82,7 @@ $(document).ready(function () {
}); });
// Insert filebrowser images into the input field (field_fileinput.tpl). // 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. // Select the clicked button by it's attribute.
var elm = $("[image-input='select']"); var elm = $("[image-input='select']");
// Select the input field which belongs to this button. // 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) { Dialog._get_url = function (type, name, id) {
var hash = name; var hash = name;
if (id !== undefined) hash = hash + "-" + id; 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. // Does load the filebrowser into the jot modal.
Dialog.showJot = function () { Dialog.showJot = function () {
var type = "image"; var type = "photos";
var name = "main"; var name = "main";
var url = Dialog._get_url(type, name); var url = Dialog._get_url(type, name);
@ -159,7 +159,7 @@ Dialog._load = function (url) {
let filebrowser = document.getElementById("filebrowser"); let filebrowser = document.getElementById("filebrowser");
// Try to fetch the hash form the url. // 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) { if (!filebrowser || match === null) {
return; //not fbrowser return; //not fbrowser
} }

View file

@ -61,13 +61,13 @@
**/ **/
/* callback */ /* 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 ///@todo this part isn't ideal and need to be done in a better way
jotTextOpenUI(document.getElementById("profile-jot-text")); jotTextOpenUI(document.getElementById("profile-jot-text"));
jotActive(); jotActive();
addeditortext(embedcode); 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")); jotTextOpenUI(document.getElementById("profile-jot-text"));
jotActive(); jotActive();
addeditortext(embedcode); addeditortext(embedcode);

View file

@ -5,6 +5,7 @@ They are loaded into the html <head> so that js functions can use them *}}
var updateInterval = {{$update_interval}}; var updateInterval = {{$update_interval}};
var localUser = {{if $local_user}}{{$local_user}}{{else}}false{{/if}}; 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 = { var aStr = {
'delitem' : "{{$delitem|escape:'javascript' nofilter}}", 'delitem' : "{{$delitem|escape:'javascript' nofilter}}",
'blockAuthor' : "{{$blockAuthor|escape:'javascript' nofilter}}", 'blockAuthor' : "{{$blockAuthor|escape:'javascript' nofilter}}",

View file

@ -16,9 +16,9 @@
{{/foreach}} {{/foreach}}
{{* Switch between image and file mode *}} {{* 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> </div>
</ol> </ol>

View file

@ -2517,29 +2517,29 @@ footer {
.fbrowser .list { .fbrowser .list {
padding: 10px; padding: 10px;
} }
.fbrowser.image .photo-album-image-wrapper { .fbrowser.photos .photo-album-image-wrapper {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
.fbrowser.image a img { .fbrowser.photos a img {
width: auto; width: auto;
height: 48px; height: 48px;
} }
.fbrowser.image a p { .fbrowser.photos a p {
display: none; display: none;
} }
.fbrowser.file .photo-album-image-wrapper { .fbrowser.attachment .photo-album-image-wrapper {
float: none; float: none;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.fbrowser.file img { .fbrowser.attachment img {
display: inline; display: inline;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.fbrowser.file p { .fbrowser.attachment p {
display: inline; display: inline;
white-space: nowrap; white-space: nowrap;
} }

View file

@ -2516,29 +2516,29 @@ footer {
.fbrowser .list { .fbrowser .list {
padding: 10px; padding: 10px;
} }
.fbrowser.image .photo-album-image-wrapper { .fbrowser.photos .photo-album-image-wrapper {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
.fbrowser.image a img { .fbrowser.photos a img {
width: auto; width: auto;
height: 48px; height: 48px;
} }
.fbrowser.image a p { .fbrowser.photos a p {
display: none; display: none;
} }
.fbrowser.file .photo-album-image-wrapper { .fbrowser.attachment .photo-album-image-wrapper {
float: none; float: none;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.fbrowser.file img { .fbrowser.attachment img {
display: inline; display: inline;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.fbrowser.file p { .fbrowser.attachment p {
display: inline; display: inline;
white-space: nowrap; white-space: nowrap;
} }

View file

@ -2516,29 +2516,29 @@ footer {
.fbrowser .list { .fbrowser .list {
padding: 10px; padding: 10px;
} }
.fbrowser.image .photo-album-image-wrapper { .fbrowser.photos .photo-album-image-wrapper {
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
.fbrowser.image a img { .fbrowser.photos a img {
width: auto; width: auto;
height: 48px; height: 48px;
} }
.fbrowser.image a p { .fbrowser.photos a p {
display: none; display: none;
} }
.fbrowser.file .photo-album-image-wrapper { .fbrowser.attachment .photo-album-image-wrapper {
float: none; float: none;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
height: auto; height: auto;
} }
.fbrowser.file img { .fbrowser.attachment img {
display: inline; display: inline;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.fbrowser.file p { .fbrowser.attachment p {
display: inline; display: inline;
white-space: nowrap; white-space: nowrap;
} }

View file

@ -1673,11 +1673,11 @@ footer { height: 100px; display: table-row; }
} }
.fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;} .fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;}
.fbrowser .list { padding: 10px; } .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;} .fbrowser .upload { clear: both; padding-top: 1em;}

View file

@ -3261,7 +3261,7 @@ img.photo-album-photo {
} }
/* upload/select popup */ /* 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 { margin-top: 15px; }
#message-preview span { width: 100%; } #message-preview span { width: 100%; }
#message-preview .mail-count, #message-preview .mail-delete { display:none; } #message-preview .mail-count, #message-preview .mail-delete { display:none; }