frio: gui work for fbrowser + switch between image and file mode
This commit is contained in:
parent
c8a427804e
commit
af8bd4b45f
3 changed files with 110 additions and 49 deletions
|
@ -1273,6 +1273,47 @@ section #jotOpen {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Filebrowser */
|
/* Filebrowser */
|
||||||
|
.fbrowser .breadcrumb {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
.fbrowser .path a:before {
|
||||||
|
content: "";
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.fbrowser .breadcrumb > li:last-of-type a{
|
||||||
|
color: #777;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.fbrowser .folders {
|
||||||
|
box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
|
||||||
|
padding-right: 1px;
|
||||||
|
}
|
||||||
|
.fbrowser .folders ul {
|
||||||
|
padding-left: 0px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
.fbrowser .folders li {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
.fbrowser .folders li:hover {
|
||||||
|
z-index: 2;
|
||||||
|
color: #555;
|
||||||
|
background-color: rgba(247, 247, 247, $contentbg_transp);
|
||||||
|
border-left: 3px solid $link_color !important;
|
||||||
|
padding-left: 17px;
|
||||||
|
}
|
||||||
|
.fbrowser .folders li a,
|
||||||
|
.fbrowser .folders li a:hover {
|
||||||
|
color: #555;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.fbrowser .folders + .list {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
.fbrowser .profile-rotator-wrapper {
|
.fbrowser .profile-rotator-wrapper {
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -81,15 +81,14 @@ var FileBrowser = {
|
||||||
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 textimput 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 );
|
||||||
|
|
||||||
// We need to add the AjaxUpload to the button
|
FileBrowser.postLoad();
|
||||||
FileBrowser.uploadButtons();
|
|
||||||
|
|
||||||
$(".error a.close").on("click", function(e) {
|
$(".error a.close").on("click", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -100,22 +99,11 @@ var FileBrowser = {
|
||||||
$(".fbrowser").on("click", ".folders a, .path a", function(e) {
|
$(".fbrowser").on("click", ".folders a, .path a", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=none";
|
var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=none";
|
||||||
$(".fbrowser-content").hide();
|
|
||||||
$(".fbrowser .profile-rotator-wrapper").show();
|
|
||||||
|
|
||||||
// load new content to fbrowser window
|
FileBrowser.loadContent(url);
|
||||||
$(".fbrowser").load(url, function(responseText, textStatus){
|
|
||||||
$(".profile-rotator-wrapper").hide();
|
|
||||||
if (textStatus === 'success') {
|
|
||||||
$(".fbrowser_content").show();
|
|
||||||
// We need to add the AjaxUpload to the button
|
|
||||||
FileBrowser.uploadButtons();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
//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();
|
||||||
|
|
||||||
|
@ -123,7 +111,7 @@ var FileBrowser = {
|
||||||
if (FileBrowser.type == "image") {
|
if (FileBrowser.type == "image") {
|
||||||
embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
|
embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
|
||||||
}
|
}
|
||||||
if (FileBrowser.type=="file") {
|
if (FileBrowser.type == "file") {
|
||||||
// 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.split("/").pop()+"[/attachment]";
|
||||||
}
|
}
|
||||||
|
@ -149,13 +137,24 @@ var FileBrowser = {
|
||||||
this.dataset.img,
|
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
|
||||||
|
$(".fbrowser").on('click', ".fbswitcher .btn", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
FileBrowser.type = this.getAttribute("data-mode");
|
||||||
|
$(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type);
|
||||||
|
url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";
|
||||||
|
|
||||||
|
FileBrowser.loadContent(url);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Initialize the AjaxUpload for the upload buttons
|
||||||
uploadButtons: function() {
|
uploadButtons: function() {
|
||||||
if ($("#upload-image").length) {
|
if ($("#upload-image").length) {
|
||||||
var image_uploader = new window.AjaxUpload(
|
var image_uploader = new window.AjaxUpload(
|
||||||
|
@ -176,15 +175,12 @@ var FileBrowser = {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(".profile-rotator-wrapper").hide();
|
|
||||||
$(".fbrowser_content").show();
|
|
||||||
|
|
||||||
// location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];
|
// location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];
|
||||||
// location.reload(true);
|
// location.reload(true);
|
||||||
|
|
||||||
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
|
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
|
||||||
// load new content to fbrowser window
|
// load new content to fbrowser window
|
||||||
$(".fbrowser").load(url);
|
FileBrowser.loadContent(url);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -208,18 +204,36 @@ var FileBrowser = {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(".profile-rotator-wrapper").hide();
|
|
||||||
$(".fbrowser_content").show();
|
|
||||||
|
|
||||||
// location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];
|
// location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];
|
||||||
// location.reload(true);
|
// location.reload(true);
|
||||||
|
|
||||||
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
|
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
|
||||||
// load new content to fbrowser window
|
// Load new content to fbrowser window
|
||||||
$(".fbrowser").load(url);
|
FileBrowser.loadContent(url)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
postLoad: function() {
|
||||||
|
$(".fbrowser .fbswitcher .btn").removeClass("active");
|
||||||
|
$(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");
|
||||||
|
// We need to add the AjaxUpload to the button
|
||||||
|
FileBrowser.uploadButtons();
|
||||||
|
},
|
||||||
|
|
||||||
|
loadContent: function(url) {
|
||||||
|
$(".fbrowser-content").hide();
|
||||||
|
$(".fbrowser .profile-rotator-wrapper").show();
|
||||||
|
|
||||||
|
// load new content to fbrowser window
|
||||||
|
$(".fbrowser").load(url, function(responseText, textStatus){
|
||||||
|
$(".profile-rotator-wrapper").hide();
|
||||||
|
if (textStatus === 'success') {
|
||||||
|
$(".fbrowser_content").show();
|
||||||
|
FileBrowser.postLoad();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -16,19 +16,24 @@
|
||||||
<span></span> <a href="#" class='close'>X</a>
|
<span></span> <a href="#" class='close'>X</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="path">
|
<ol class="path breadcrumb">
|
||||||
{{foreach $path as $p}}<a href="#" data-folder="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
|
{{foreach $path as $p}}<li><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
|
||||||
|
<div class="fbswitcher btn-group btn-group-xs pull-right">
|
||||||
|
<button type="button" class="btn btn-default" data-mode="image"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
|
||||||
|
<button type="button" class="btn btn-default" data-mode="file"><i class="fa fa-file-o" aria-hidden="true"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div class="media">
|
||||||
{{if $folders }}
|
{{if $folders }}
|
||||||
<div class="folders">
|
<div class="folders media-left">
|
||||||
<ul>
|
<ul>
|
||||||
{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
|
{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<div class="list">
|
<div class="list {{$type}} media-body">
|
||||||
{{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}}">
|
<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
|
||||||
|
@ -38,12 +43,13 @@
|
||||||
</div>
|
</div>
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="upload">
|
<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>
|
<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="profile-rotator-wrapper" style="display: none;">
|
<div class="profile-rotator-wrapper" style="display: none;">
|
||||||
<i class="fa fa-circle-o-notch fa-spin"></i>
|
<i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue