1
0
Fork 0

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
commit 70b7de39a7
11 changed files with 422 additions and 38 deletions

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 = '';