keith/friendica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Upload/Browse popup for files and images

Browse source 
Jot buttons to upload images and files show a popup, where the
user can select a previously uploaded item o upload a new one
This commit is contained in:
Fabrixxm 2015-07-28 17:20:40 +02:00
parent c8c0c4d791
commit 70b7de39a7
11 changed files with 422 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
mod/fbrowser.php
View file

@ -18,11 +18,18 @@ function fbrowser_content($a){
if ($a->argc==1) if ($a->argc==1)
killme(); killme();
$template_file = "filebrowser.tpl";
$mode = "";
if (x($_GET,'mode')) {
$template_file = "filebrowser_plain.tpl";
$mode = "?mode=".$_GET['mode'];
}
//echo "<pre>"; var_dump($a->argv); killme(); //echo "<pre>"; var_dump($a->argv); killme();
switch($a->argv[1]){ switch($a->argv[1]){
case "image": case "image":
$path = array( array($a->get_baseurl()."/fbrowser/image/", t("Photos"))); $path = array( array($a->get_baseurl()."/fbrowser/image/".$mode, t("Photos")));
$albums = false; $albums = false;
$sql_extra = ""; $sql_extra = "";
$sql_extra2 = " ORDER BY created DESC LIMIT 0, 10"; $sql_extra2 = " ORDER BY created DESC LIMIT 0, 10";
@ -32,8 +39,8 @@ function fbrowser_content($a){
intval(local_user()) intval(local_user())
); );
// anon functions only from 5.3.0... meglio tardi che mai.. // anon functions only from 5.3.0... meglio tardi che mai..
function folder1($el){return array(bin2hex($el['album']),$el['album']);} $folder1 = function($el) use ($mode) {return array(bin2hex($el['album']).$mode,$el['album']);};
$albums = array_map( "folder1" , $albums); $albums = array_map( $folder1 , $albums);
} }
@ -42,7 +49,7 @@ function fbrowser_content($a){
$album = hex2bin($a->argv[2]); $album = hex2bin($a->argv[2]);
$sql_extra = sprintf("AND `album` = '%s' ",dbesc($album)); $sql_extra = sprintf("AND `album` = '%s' ",dbesc($album));
$sql_extra2 = ""; $sql_extra2 = "";
$path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album); $path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/".$mode, $album);
} }
$r = q("SELECT `resource-id`, `id`, `filename`, type, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc` $r = q("SELECT `resource-id`, `id`, `filename`, type, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc`
@ -71,14 +78,16 @@ function fbrowser_content($a){
} }
$files = array_map("files1", $r); $files = array_map("files1", $r);
$tpl = get_markup_template("filebrowser.tpl"); $tpl = get_markup_template($template_file);
echo replace_macros($tpl, array(
$o = replace_macros($tpl, array(
'$type' => 'image', '$type' => 'image',
'$baseurl' => $a->get_baseurl(), '$baseurl' => $a->get_baseurl(),
'$path' => $path, '$path' => $path,
'$folders' => $albums, '$folders' => $albums,
'$files' =>$files, '$files' =>$files,
'$cancel' => t('Cancel'), '$cancel' => t('Cancel'),
'$nickname' => $a->user['nickname'],
)); ));
@ -106,14 +115,15 @@ function fbrowser_content($a){
//echo "<pre>"; var_dump($files); killme(); //echo "<pre>"; var_dump($files); killme();
$tpl = get_markup_template("filebrowser.tpl"); $tpl = get_markup_template($template_file);
echo replace_macros($tpl, array( $o = replace_macros($tpl, array(
'$type' => 'file', '$type' => 'file',
'$baseurl' => $a->get_baseurl(), '$baseurl' => $a->get_baseurl(),
'$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Files")) ), '$path' => array( array($a->get_baseurl()."/fbrowser/file/", t("Files")) ),
'$folders' => false, '$folders' => false,
'$files' =>$files, '$files' =>$files,
'$cancel' => t('Cancel'), '$cancel' => t('Cancel'),
'$nickname' => $a->user['nickname'],
)); ));
} }
@ -121,7 +131,12 @@ function fbrowser_content($a){
break; break;
} }
if (x($_GET,'mode')) {
return $o;
} else {
echo $o;
killme(); killme();
}
} }

16
view/global.css
View file

@ -177,3 +177,19 @@ span.oembed, h4 {
/* notifications unseen */ /* notifications unseen */
.notify-unseen { background-color: #cceeFF; } .notify-unseen { background-color: #cceeFF; }
/* plain text editor upload/select popup */
.fbrowser .path a { padding: 5px; }
.fbrowser .path a: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 { height: 48px; }
.fbrowser.image a 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 .upload { clear: both; padding-top: 1em;}

7
view/templates/filebrowser.tpl
View file

@ -1,6 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<!--
This is the template used by mod/fbrowser.php when is called from TinyMCE rich editor.
See also 'filebrowser_plain.tpl'
-->
<head> <head>
<script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script> <script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
<style> <style>
@ -65,7 +68,7 @@
</div> </div>
<div class="filebrowser folders"> <div class="filebrowser folders">
<ul> <ul>
{{foreach $folders as $f}}<li><a href="{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}} {{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
</ul> </ul>
</div> </div>
<div class="filebrowser files {{$type}}"> <div class="filebrowser files {{$type}}">

86
view/templates/filebrowser_plain.tpl Normal file
View file

@ -0,0 +1,86 @@
<!--
This is the template used by mod/fbrowser.php when is called from plain text editor.
See also 'filebrowser.tpl'
-->
<script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>
<div class="fbrowser {{$type}}">
<div class="path">
{{foreach $path as $p}}<a href="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
</div>
<div class="folders">
<ul>
{{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
</ul>
</div>
{{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}}">
<img src="{{$f.2}}">
<p>{{$f.1}}</p>
</a>
</div>
<div class="photo-album-image-wrapper-end"></div>
{{/foreach}}
<div class="upload">
<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button>
</dksiv>
</div>
<script>
$(".photo-album-photo-link").on('click', function(e){
e.preventDefault();
{{if $type == "image"}}
var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
{{/if}}
{{if $type == "file"}}
var embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img] "+this.dataset.filename+"[/url]";
{{/if}}
console.log(this.dataset.filename, embed, parent.$("body"));
parent.$("body").trigger("fbrowser.{{$type}}", [
this.dataset.filename,
embed,
]);
});
if ($("#upload-image").length)
var image_uploader = new window.AjaxUpload(
'upload-image',
{ action: 'wall_upload/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
location = baseurl + "/fbrowser/image/?mode=minimal";
location.reload(true);
}
}
);
if ($("#upload-file").length)
var file_uploader = new window.AjaxUpload(
'upload-file',
{ action: 'wall_attach/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
location = baseurl + "/fbrowser/file/?mode=minimal";
location.reload(true); }
}
);
</script>
</body>
</html>

31
view/templates/jot-header.tpl
View file

@ -127,12 +127,39 @@ function enableOnUser(){
<script> <script>
var ispublic = '{{$ispublic}}'; var ispublic = '{{$ispublic}}';
$(document).ready(function() { $(document).ready(function() {
/* enable tinymce on focus and click */ /* enable tinymce on focus and click */
$("#profile-jot-text").focus(enableOnUser); $("#profile-jot-text").focus(enableOnUser);
$("#profile-jot-text").click(enableOnUser); $("#profile-jot-text").click(enableOnUser);
/* show images / file browser window
*
**/
/* callback */
$('body').on('fbrowser.image', function(e, filename, embedcode) {
$.colorbox.close();
addeditortext(embedcode);
});
$('body').on('fbrowser.file', function(e, filename, embedcode) {
$.colorbox.close();
addeditortext(embedcode);
});
$('#wall-image-upload').on('click', function(){
$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal", iframe:true,innerWidth:'500px',innerHeight:'400px'})
});
$('#wall-file-upload').on('click', function(){
$.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal", iframe:true,innerWidth:'500px',innerHeight:'400px'})
});
/**
var uploader = new window.AjaxUpload( var uploader = new window.AjaxUpload(
'wall-image-upload', 'wall-image-upload',
{ action: 'wall_upload/{{$nickname}}', { action: 'wall_upload/{{$nickname}}',
@ -156,9 +183,11 @@ function enableOnUser(){
} }
); );
}
**/
}); });
function deleteCheckedItems() { function deleteCheckedItems() {
if(confirm('{{$delitems}}')) { if(confirm('{{$delitems}}')) {
var checkedstr = ''; var checkedstr = '';

3
view/theme/duepuntozero/style.css
View file

@ -1469,6 +1469,7 @@ blockquote.shared_content {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
font-size: 1.0em; font-size: 1.0em;
clear:left;
} }
@ -3468,3 +3469,5 @@ ul.menu-popup {
.videos .video-top-wrapper:hover .video-delete { .videos .video-top-wrapper:hover .video-delete {
opacity: 1; opacity: 1;
} }

67
view/theme/quattro/dark/style.css
View file

@ -544,6 +544,7 @@ header {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -876,6 +877,7 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -957,6 +959,7 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
} }
.widget h3 { .widget h3 {
padding: 0px; padding: 0px;
@ -1238,6 +1241,7 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -2107,6 +2111,7 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;
@ -2480,3 +2485,65 @@ footer {
float: left; float: left;
margin-left: 2px; margin-left: 2px;
} }
/* upload/select popup */
.fbrowser {
overflow: auto;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.fbrowser .path {
background-color: #0e232e;
}
.fbrowser .path a {
padding: 5px;
margin: 0px 2px;
display: inline-block;
}
.fbrowser .path a,
.fbrowser .path a:active,
.fbrowser .path a:visited,
.fbrowser .path a:link,
.fbrowser .path a:hover {
color: #ffffff;
text-decoration: none;
outline: none;
}
.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 .upload {
clear: both;
padding-top: 1em;
}

67
view/theme/quattro/green/style.css
View file

@ -544,6 +544,7 @@ header {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -876,6 +877,7 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -957,6 +959,7 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
} }
.widget h3 { .widget h3 {
padding: 0px; padding: 0px;
@ -1238,6 +1241,7 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -2107,6 +2111,7 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;
@ -2480,3 +2485,65 @@ footer {
float: left; float: left;
margin-left: 2px; margin-left: 2px;
} }
/* upload/select popup */
.fbrowser {
overflow: auto;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.fbrowser .path {
background-color: #009100;
}
.fbrowser .path a {
padding: 5px;
margin: 0px 2px;
display: inline-block;
}
.fbrowser .path a,
.fbrowser .path a:active,
.fbrowser .path a:visited,
.fbrowser .path a:link,
.fbrowser .path a:hover {
color: #ffffff;
text-decoration: none;
outline: none;
}
.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 .upload {
clear: both;
padding-top: 1em;
}

67
view/theme/quattro/lilac/style.css
View file

@ -544,6 +544,7 @@ header {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -876,6 +877,7 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -957,6 +959,7 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
} }
.widget h3 { .widget h3 {
padding: 0px; padding: 0px;
@ -1238,6 +1241,7 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -2107,6 +2111,7 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;
@ -2480,3 +2485,65 @@ footer {
float: left; float: left;
margin-left: 2px; margin-left: 2px;
} }
/* upload/select popup */
.fbrowser {
overflow: auto;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.fbrowser .path {
background-color: #521f5c;
}
.fbrowser .path a {
padding: 5px;
margin: 0px 2px;
display: inline-block;
}
.fbrowser .path a,
.fbrowser .path a:active,
.fbrowser .path a:visited,
.fbrowser .path a:link,
.fbrowser .path a:hover {
color: #ffffff;
text-decoration: none;
outline: none;
}
.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 .upload {
clear: both;
padding-top: 1em;
}

25
view/theme/quattro/quattro.less
View file

@ -1705,3 +1705,28 @@ footer { height: 100px; display: table-row; }
float: left; float: left;
margin-left: 2px; margin-left: 2px;
} }
/* upload/select popup */
.fbrowser {
overflow: auto;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.fbrowser .path {
background-color: @NavbarBackground;
a { padding: 5px; margin: 0px 2px; display: inline-block; }
a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none; }
}
.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 .upload { clear: both; padding-top: 1em;}

6
view/theme/vier/style.css
View file

@ -1109,6 +1109,9 @@ section {
section.minimal { section.minimal {
top: 0px; top: 0px;
left: 0px; left: 0px;
position: absolute;
width: 100%;
height: 100%;
} }
/* wall item */ /* wall item */
@ -2929,3 +2932,6 @@ a.mail-list-link {
.videos .video-top-wrapper:hover .video-delete { .videos .video-top-wrapper:hover .video-delete {
opacity: 1; opacity: 1;
} }
/* upload/select popup */
.fbrowser.image .photo-album-image-wrapper { margin-left: 10px; }