Upload/Browse popup for files and images

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

View file

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

View file

@ -176,4 +176,20 @@ span.oembed, h4 {
}
/* 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;}

View file

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

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>

View file

@ -127,38 +127,67 @@ function enableOnUser(){
<script>
var ispublic = '{{$ispublic}}';
$(document).ready(function() {
/* enable tinymce on focus and click */
$("#profile-jot-text").focus(enableOnUser);
$("#profile-jot-text").click(enableOnUser);
var uploader = new window.AjaxUpload(
'wall-image-upload',
{ action: 'wall_upload/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
}
}
);
var file_uploader = new window.AjaxUpload(
'wall-file-upload',
{ action: 'wall_attach/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
}
}
);
/* 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(
'wall-image-upload',
{ action: 'wall_upload/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
}
}
);
var file_uploader = new window.AjaxUpload(
'wall-file-upload',
{ action: 'wall_attach/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
}
}
);
}
**/
});
function deleteCheckedItems() {
if(confirm('{{$delitems}}')) {
var checkedstr = '';

View file

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

View file

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

View file

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

View file

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

View file

@ -1705,3 +1705,28 @@ footer { height: 100px; display: table-row; }
float: left;
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;}

View file

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