From af8bd4b45f66e88d3535d688eb3ae88789db3867 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Tue, 21 Mar 2017 03:35:25 +0100
Subject: [PATCH] frio: gui work for fbrowser + switch between image and file
mode
---
view/theme/frio/css/style.css | 41 +++++++++++++
view/theme/frio/js/filebrowser.js | 70 ++++++++++++++---------
view/theme/frio/templates/filebrowser.tpl | 48 +++++++++-------
3 files changed, 110 insertions(+), 49 deletions(-)
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index e0a0b09b76..7f3d522a9d 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1273,6 +1273,47 @@ section #jotOpen {
}
/* 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 {
min-height: 200px;
}
diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js
index a66309865d..5c60c44cad 100644
--- a/view/theme/frio/js/filebrowser.js
+++ b/view/theme/frio/js/filebrowser.js
@@ -81,15 +81,14 @@ var FileBrowser = {
FileBrowser.id = h.split("-")[1];
FileBrowser.event = FileBrowser.event + "." + destination;
if (destination == "comment") {
- // get the comment textimput field
+ // Get the comment textimput field
var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
}
};
console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );
- // We need to add the AjaxUpload to the button
- FileBrowser.uploadButtons();
+ FileBrowser.postLoad();
$(".error a.close").on("click", function(e) {
e.preventDefault();
@@ -100,22 +99,11 @@ var FileBrowser = {
$(".fbrowser").on("click", ".folders a, .path a", function(e) {
e.preventDefault();
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
- $(".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();
- }
- });
-
+ FileBrowser.loadContent(url);
});
- //embed on click
+ //Embed on click
$(".fbrowser").on('click', ".photo-album-photo-link", function(e) {
e.preventDefault();
@@ -123,7 +111,7 @@ var FileBrowser = {
if (FileBrowser.type == "image") {
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
embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";
}
@@ -149,13 +137,24 @@ var FileBrowser = {
this.dataset.img,
]);
- // close model
+ // Close model
$('#modal').modal('hide');
- // update autosize for this textarea
+ // Update autosize for this textarea
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() {
if ($("#upload-image").length) {
var image_uploader = new window.AjaxUpload(
@@ -176,15 +175,12 @@ var FileBrowser = {
return;
}
- $(".profile-rotator-wrapper").hide();
- $(".fbrowser_content").show();
-
// location = baseurl + "/fbrowser/image/?mode=none"+location['hash'];
// location.reload(true);
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
// load new content to fbrowser window
- $(".fbrowser").load(url);
+ FileBrowser.loadContent(url);
}
}
);
@@ -208,18 +204,36 @@ var FileBrowser = {
return;
}
- $(".profile-rotator-wrapper").hide();
- $(".fbrowser_content").show();
-
// location = baseurl + "/fbrowser/file/?mode=none"+location['hash'];
// location.reload(true);
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none"
- // load new content to fbrowser window
- $(".fbrowser").load(url);
+ // Load new content to fbrowser window
+ 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();
+ }
+ });
}
};
diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl
index 1a1bd9a675..dc8a9593a3 100644
--- a/view/theme/frio/templates/filebrowser.tpl
+++ b/view/theme/frio/templates/filebrowser.tpl
@@ -16,27 +16,33 @@
X
-
- {{foreach $path as $p}}
{{$p.1}}{{/foreach}}
-
-
- {{foreach $folders as $f}}- {{$f.1}}
{{/foreach}}
-
-
- {{foreach $files as $f}}
-
-
+
-