Merge pull request #3251 from rabuzarus/20170320_-_fix_fbrowser

Bugfix: fbrowser did insert 2 Pictures instead of only 1

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
 */

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() {
+			$(".fbrowser").load(url, function(responseText, textStatus){
-				$(function() {FileBrowser.init(nickname, type, hash);});
+				$(".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() {
+						$(".fbrowser").load(url);
-							$(function() {FileBrowser.init(nickname, type, hash);});
-						});
 					}
 				}
 			);
+		}
 
-		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() {
+						$(".fbrowser").load(url);
-							$(function() {FileBrowser.init(nickname, type, hash);});
-						});
 					}
 				}
-		);
+			);
-	},
+		}
+	}
 };
-

view/theme/frio/js/modal.js

@@ -8,9 +8,11 @@ $(document).ready(function(){
 		$(this).removeData('bs.modal');
 		$("#modal-title").empty();
 		$('#modal-body').empty();
-		// remove the file browser from jot (else we would have problems
+		// Remove the file browser from jot (else we would have problems
-		// with ajaxupload
+		// with AjaxUpload
 		$(".fbrowser").remove();
+		// Remove the AjaxUpload element
+		$("[name=userfile]").parent().remove();
 	});
 
 	// Clear bs modal on close

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}}" />
+	<div class="fbrowser-content">
-	<input id="fb-type" type="hidden" name="type" value="{{$type}}" />
+		<input id="fb-nickname" type="hidden" name="type" value="{{$nickname}}" />
+		<input id="fb-type" type="hidden" name="type" value="{{$type}}" />
 
-	<div class="error hidden">
+		<div class="error hidden">
-		<span></span> <a href="#" class='close'>X</a>
+			<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>
-		{{/foreach}}
-	</div>
 
-	<div class="upload">
+		<div class="path">
-		<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button>
+			{{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>