From c8a427804e10784b4b016c18e226ce3015a40193 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Mon, 20 Mar 2017 22:45:24 +0100
Subject: [PATCH] Bugfix: fbrowser did insert 2 Pictures instead of only 1

---
 view/theme/frio/css/style.css             | 12 ++++
 view/theme/frio/js/filebrowser.js         | 67 +++++++++++++++-------
 view/theme/frio/templates/filebrowser.tpl | 69 +++++++++++------------
 3 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 47973ed44..e0a0b09b7 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1272,6 +1272,18 @@ section #jotOpen {
     color: #fff;
 }
 
+/* Filebrowser */
+.fbrowser .profile-rotator-wrapper {
+    min-height: 200px;
+}
+.fbrowser .fa-spin {
+   position: absolute;
+   left: 45%;
+   top: 40%;
+   font-size: 48px;
+   margin:0px auto;
+}
+
 /*
 /* Stream
 */
diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js
index 6856d12ba..a66309865 100644
--- a/view/theme/frio/js/filebrowser.js
+++ b/view/theme/frio/js/filebrowser.js
@@ -88,23 +88,35 @@ var FileBrowser = {
 
 		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );
 
+		// We need to add the AjaxUpload to the button
+		FileBrowser.uploadButtons();
+
 		$(".error a.close").on("click", function(e) {
 			e.preventDefault();
 			$(".error").addClass("hidden");
 		});
 
-		$(".folders a, .path a").on("click", function(e) {
+		// Click on album link
+		$(".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() {
-				$(function() {FileBrowser.init(nickname, type, hash);});
+			$(".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
-		$(".photo-album-photo-link").on('click', function(e) {
+		$(".fbrowser").on('click', ".photo-album-photo-link", function(e) {
 			e.preventDefault();
 
 			var embed = "";
@@ -142,39 +154,52 @@ var FileBrowser = {
 			// update autosize for this textarea
 			autosize.update($(".text-autosize"));
 		});
+	},
 
-		if ($("#upload-image").length)
+	uploadButtons: function() {
+		if ($("#upload-image").length) {
 			var image_uploader = new window.AjaxUpload(
 				'upload-image',
-				{ action: 'wall_upload/'+FileBrowser.nickname+'?response=json',
+				{	action: 'wall_upload/'+FileBrowser.nickname+'?response=json',
 					name: 'userfile',
 					responseType: 'json',
-					onSubmit: function(file,ext) { $('#profile-rotator').show(); $(".error").addClass('hidden'); },
+					onSubmit: function(file,ext) {
+						$(".fbrowser-content").hide();
+						$(".fbrowser .profile-rotator-wrapper").show();
+						$(".error").addClass('hidden');
+					},
 					onComplete: function(file,response) {
 						if (response['error']!= undefined) {
 							$(".error span").html(response['error']);
 							$(".error").removeClass('hidden');
-							$('#profile-rotator').hide();
+							$(".fbrowser .profile-rotator-wrapper").hide();
 							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,function() {
-							$(function() {FileBrowser.init(nickname, type, hash);});
-						});
+						$(".fbrowser").load(url);
 					}
 				}
 			);
+		}
 
-		if ($("#upload-file").length)
+		if ($("#upload-file").length) {
 			var file_uploader = new window.AjaxUpload(
 				'upload-file',
-				{ action: 'wall_attach/'+FileBrowser.nickname+'?response=json',
+				{	action: 'wall_attach/'+FileBrowser.nickname+'?response=json',
 					name: 'userfile',
-					onSubmit: function(file,ext) { $('#profile-rotator').show(); $(".error").addClass('hidden'); },
+					onSubmit: function(file,ext) {
+						$(".fbrowser-content").hide();
+						$(".fbrowser .profile-rotator-wrapper").show();
+						$(".error").addClass('hidden');
+					},
 					onComplete: function(file,response) {
 						if (response['error']!= undefined) {
 							$(".error span").html(response['error']);
@@ -182,17 +207,19 @@ var FileBrowser = {
 							$('#profile-rotator').hide();
 							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,function() {
-							$(function() {FileBrowser.init(nickname, type, hash);});
-						});
+						$(".fbrowser").load(url);
 					}
 				}
-		);
-	},
+			);
+		}
+	}
 };
-
diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl
index 55cecabb8..1a1bd9a67 100644
--- a/view/theme/frio/templates/filebrowser.tpl
+++ b/view/theme/frio/templates/filebrowser.tpl
@@ -8,43 +8,42 @@
 {{*<script type="text/javascript" src="view/theme/frio/js/filebrowser.js"></script>*}}
 
 <div class="fbrowser {{$type}}">
-	<input id="fb-nickname" type="hidden" name="type" value="{{$nickname}}" />
-	<input id="fb-type" type="hidden" name="type" value="{{$type}}" />
+	<div class="fbrowser-content">
+		<input id="fb-nickname" type="hidden" name="type" value="{{$nickname}}" />
+		<input id="fb-type" type="hidden" name="type" value="{{$type}}" />
 
-	<div class="error hidden">
-		<span></span> <a href="#" class='close'>X</a>
-	</div>
-
-	<div class="path">
-		{{foreach $path as $p}}<a href="#" data-folder="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
-	</div>
-
-	{{if $folders }}
-	<div class="folders">
-		<ul>
-			{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
-		</ul>
-	</div>
-	{{/if}}
-
-	<div class="list">
-		{{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 class="error hidden">
+			<span></span> <a href="#" class='close'>X</a>
 		</div>
-		{{/foreach}}
-	</div>
 
-	<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>
+		<div class="path">
+			{{foreach $path as $p}}<a href="#" data-folder="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
+		</div>
+
+		{{if $folders }}
+		<div class="folders">
+			<ul>
+				{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+			</ul>
+		</div>
+		{{/if}}
+
+		<div class="list">
+			{{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>
+			{{/foreach}}
+		</div>
+
+		<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>
+		</div>
+	</div>
+	<div class="profile-rotator-wrapper" style="display: none;">
+		<i class="fa fa-circle-o-notch fa-spin"></i>
 	</div>
 </div>
-
-<script>
-    $(document).ready(function(){
-
-	});
-</script>
\ No newline at end of file