Merge pull request #3266 from rabuzarus/20170321_-_frio-fbbrowser

frio: fbrowser styling

mod/wall_upload.php

@@ -1,17 +1,33 @@
 <?php
 
-require_once('include/Photo.php');
+/**
+ * @file mod/wall_upload.php
+ * @brief Module for uploading a picture to the profile wall
+ * 
+ * By default the picture will be stored in the photo album with the name Wall Photos.
+ * You can specify a different album by adding an optional query string "album="
+ * to the url
+ */
+
+use \Friendica\Core\Config;
+
+require_once 'include/Photo.php';
+
 
 function wall_upload_post(App $a, $desktopmode = true) {
 
 	logger("wall upload: starting new upload", LOGGER_DEBUG);
 
-	$r_json = (x($_GET,'response') && $_GET['response']=='json');
+	$r_json = (x($_GET, 'response') && $_GET['response'] == 'json');
+	$album = (x($_GET, 'album') ? notags(trim($_GET['album'])) : '');
 
-	if($a->argc > 1) {
+	if ($a->argc > 1) {
-		if(! x($_FILES,'media')) {
+		if (! x($_FILES, 'media')) {
 			$nick = $a->argv[1];
-			$r = q("SELECT `user`.*, `contact`.`id` FROM `user` INNER JOIN `contact` on `user`.`uid` = `contact`.`uid`  WHERE `user`.`nickname` = '%s' AND `user`.`blocked` = 0 and `contact`.`self` = 1 LIMIT 1",
+			$r = q("SELECT `user`.*, `contact`.`id` FROM `user`
+				INNER JOIN `contact` on `user`.`uid` = `contact`.`uid`
+				WHERE `user`.`nickname` = '%s' AND `user`.`blocked` = 0
+				AND `contact`.`self` = 1 LIMIT 1",
 				dbesc($nick)
 			);
 
@@ -24,7 +40,10 @@ function wall_upload_post(App $a, $desktopmode = true) {
 			}
 		} else {
 			$user_info = api_get_user($a);
-			$r = q("SELECT `user`.*, `contact`.`id` FROM `user` INNER JOIN `contact` on `user`.`uid` = `contact`.`uid`  WHERE `user`.`nickname` = '%s' AND `user`.`blocked` = 0 and `contact`.`self` = 1 LIMIT 1",
+			$r = q("SELECT `user`.*, `contact`.`id` FROM `user`
+				INNER JOIN `contact` on `user`.`uid` = `contact`.`uid`
+				WHERE `user`.`nickname` = '%s' AND `user`.`blocked` = 0
+				AND `contact`.`self` = 1 LIMIT 1",
 				dbesc($user_info['screen_name'])
 			);
 		}
@@ -36,6 +55,9 @@ function wall_upload_post(App $a, $desktopmode = true) {
 		return;
 	}
 
+	/*
+	 * Setup permissions structures
+	 */
 	$can_post  = false;
 	$visitor   = 0;
 
@@ -44,22 +66,24 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	$page_owner_nick  = $r[0]['nickname'];
 	$community_page   = (($r[0]['page-flags'] == PAGE_COMMUNITY) ? true : false);
 
-	if((local_user()) && (local_user() == $page_owner_uid))
+	if ((local_user()) && (local_user() == $page_owner_uid)) {
 		$can_post = true;
-	else {
+	} else {
-		if($community_page && remote_user()) {
+		if ($community_page && remote_user()) {
 			$contact_id = 0;
-			if(is_array($_SESSION['remote'])) {
+			if (is_array($_SESSION['remote'])) {
-				foreach($_SESSION['remote'] as $v) {
+				foreach ($_SESSION['remote'] as $v) {
-					if($v['uid'] == $page_owner_uid) {
+					if ($v['uid'] == $page_owner_uid) {
 						$contact_id = $v['cid'];
 						break;
 					}
 				}
 			}
-			if($contact_id) {
 
-				$r = q("SELECT `uid` FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
+			if ($contact_id) {
+				$r = q("SELECT `uid` FROM `contact`
+					WHERE `blocked` = 0 AND `pending` = 0
+					AND `id` = %d AND `uid` = %d LIMIT 1",
 					intval($contact_id),
 					intval($page_owner_uid)
 				);
@@ -72,16 +96,16 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	}
 
 
-	if(! $can_post) {
+	if (! $can_post) {
 		if ($r_json) {
 			echo json_encode(array('error'=>t('Permission denied.')));
 			killme();
 		}
-		notice( t('Permission denied.') . EOL );
+		notice(t('Permission denied.') . EOL);
 		killme();
 	}
 
-	if(! x($_FILES,'userfile') && ! x($_FILES,'media')){
+	if (! x($_FILES, 'userfile') && ! x($_FILES, 'media')) {
 		if ($r_json) {
 			echo json_encode(array('error'=>t('Invalid request.')));
 		}
@@ -89,33 +113,37 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	}
 
 	$src = "";
-	if(x($_FILES,'userfile')) {
+	if (x($_FILES, 'userfile')) {
 		$src      = $_FILES['userfile']['tmp_name'];
 		$filename = basename($_FILES['userfile']['name']);
 		$filesize = intval($_FILES['userfile']['size']);
 		$filetype = $_FILES['userfile']['type'];
-	}
+
-	elseif(x($_FILES,'media')) {
+	} elseif (x($_FILES, 'media')) {
-		if (is_array($_FILES['media']['tmp_name']))
+		if (is_array($_FILES['media']['tmp_name'])) {
 			$src = $_FILES['media']['tmp_name'][0];
-		else
+		} else {
 			$src = $_FILES['media']['tmp_name'];
+		}
 
-		if (is_array($_FILES['media']['name']))
+		if (is_array($_FILES['media']['name'])) {
 			$filename = basename($_FILES['media']['name'][0]);
-		else
+		} else {
 			$filename = basename($_FILES['media']['name']);
+		}
 
-		if (is_array($_FILES['media']['size']))
+		if (is_array($_FILES['media']['size'])) {
 			$filesize = intval($_FILES['media']['size'][0]);
-		else
+		} else {
 			$filesize = intval($_FILES['media']['size']);
+		}
 
-		if (is_array($_FILES['media']['type']))
+		if (is_array($_FILES['media']['type'])) {
 			$filetype = $_FILES['media']['type'][0];
-		else
+		} else {
 			$filetype = $_FILES['media']['type'];
 		}
+	}
 
 	if ($src=="") {
 		if ($r_json) {
@@ -127,28 +155,30 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	}
 
 	// This is a special treatment for picture upload from Twidere
-	if (($filename == "octet-stream") AND ($filetype != "")) {
+	if (($filename == "octet-stream") && ($filetype != "")) {
 		$filename = $filetype;
 		$filetype = "";
 	}
 
-	if ($filetype=="")
+	if ($filetype=="") {
 		$filetype=guess_image_type($filename);
+	}
 
 	// If there is a temp name, then do a manual check
 	// This is more reliable than the provided value
 
 	$imagedata = getimagesize($src);
-	if ($imagedata)
+	if ($imagedata) {
 		$filetype = $imagedata['mime'];
+	}
 
-	logger("File upload src: ".$src." - filename: ".$filename.
+	logger("File upload src: " . $src . " - filename: " . $filename .
-		" - size: ".$filesize." - type: ".$filetype, LOGGER_DEBUG);
+		" - size: " . $filesize . " - type: " . $filetype, LOGGER_DEBUG);
 
-	$maximagesize = get_config('system','maximagesize');
+	$maximagesize = Config::get('system', 'maximagesize');
 
-	if(($maximagesize) && ($filesize > $maximagesize)) {
+	if (($maximagesize) && ($filesize > $maximagesize)) {
-		$msg = sprintf( t('Image exceeds size limit of %s'), formatBytes($maximagesize));
+		$msg = sprintf(t('Image exceeds size limit of %s'), formatBytes($maximagesize));
 		if ($r_json) {
 			echo json_encode(array('error'=>$msg));
 		} else {
@@ -159,10 +189,12 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	}
 
 
-	$limit = service_class_fetch($page_owner_uid,'photo_upload_limit');
+	$limit = service_class_fetch($page_owner_uid, 'photo_upload_limit');
 
 	if ($limit) {
-		$r = q("select sum(octet_length(data)) as total from photo where uid = %d and scale = 0 and album != 'Contact Photos' ",
+		$r = q("SELECT SUM(OCTET_LENGTH(`data`)) AS `total` FROM `photo`
+			WHERE `uid` = %d AND `scale` = 0
+			AND `album` != 'Contact Photos' ",
 			intval($page_owner_uid)
 		);
 		$size = $r[0]['total'];
@@ -182,7 +214,7 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	$imagedata = @file_get_contents($src);
 	$ph = new Photo($imagedata, $filetype);
 
-	if(! $ph->is_valid()) {
+	if (! $ph->is_valid()) {
 		$msg = t('Unable to process image.');
 		if ($r_json) {
 			echo json_encode(array('error'=>$msg));
@@ -196,12 +228,13 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	$ph->orient($src);
 	@unlink($src);
 
-	$max_length = get_config('system','max_image_length');
+	$max_length = Config::get('system', 'max_image_length');
-	if(! $max_length)
+	if (! $max_length) {
 		$max_length = MAX_IMAGE_LENGTH;
-	if($max_length > 0) {
+	}
+	if ($max_length > 0) {
 		$ph->scaleImage($max_length);
-		logger("File upload: Scaling picture to new size ".$max_length, LOGGER_DEBUG);
+		logger("File upload: Scaling picture to new size " . $max_length, LOGGER_DEBUG);
 	}
 
 	$width = $ph->getWidth();
@@ -211,11 +244,16 @@ function wall_upload_post(App $a, $desktopmode = true) {
 
 	$smallest = 0;
 
+	// If we don't have an album name use the Wall Photos album
+	if (! strlen($album)) {
+		$album = t('Wall Photos');
+	}
+
 	$defperm = '<' . $default_cid . '>';
 
-	$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, t('Wall Photos'), 0, 0, $defperm);
+	$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, $album, 0, 0, $defperm);
 
-	if(! $r) {
+	if (! $r) {
 		$msg = t('Image upload failed.');
 		if ($r_json) {
 			echo json_encode(array('error'=>$msg));
@@ -225,26 +263,31 @@ function wall_upload_post(App $a, $desktopmode = true) {
 		killme();
 	}
 
-	if($width > 640 || $height > 640) {
+	if ($width > 640 || $height > 640) {
 		$ph->scaleImage(640);
-		$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, t('Wall Photos'), 1, 0, $defperm);
+		$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, $album, 1, 0, $defperm);
-		if($r)
+		if ($r) {
 			$smallest = 1;
 		}
+	}
 
-	if($width > 320 || $height > 320) {
+	if ($width > 320 || $height > 320) {
 		$ph->scaleImage(320);
-		$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, t('Wall Photos'), 2, 0, $defperm);
+		$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, $album, 2, 0, $defperm);
-		if($r AND ($smallest == 0))
+		if ($r && ($smallest == 0)) {
 			$smallest = 2;
 		}
+	}
 
 	$basename = basename($filename);
 
 	if (!$desktopmode) {
-
+		$r = q("SELECT `id`, `datasize`, `width`, `height`, `type` FROM `photo`
-		$r = q("SELECT `id`, `datasize`, `width`, `height`, `type` FROM `photo` WHERE `resource-id` = '%s' ORDER BY `width` DESC LIMIT 1", $hash);
+			WHERE `resource-id` = '%s'
-		if (!$r){
+			ORDER BY `width` DESC LIMIT 1",
+			$hash
+		);
+		if (!$r) {
 			if ($r_json) {
 				echo json_encode(array('error'=>''));
 				killme();
@@ -258,9 +301,9 @@ function wall_upload_post(App $a, $desktopmode = true) {
 		$picture["width"]     = $r[0]["width"];
 		$picture["height"]    = $r[0]["height"];
 		$picture["type"]      = $r[0]["type"];
-		$picture["albumpage"] = App::get_baseurl().'/photos/'.$page_owner_nick.'/image/'.$hash;
+		$picture["albumpage"] = App::get_baseurl() . '/photos/' . $page_owner_nick . '/image/' . $hash;
-		$picture["picture"] = App::get_baseurl()."/photo/{$hash}-0.".$ph->getExt();
+		$picture["picture"]   = App::get_baseurl() . "/photo/{$hash}-0." . $ph->getExt();
-		$picture["preview"] = App::get_baseurl()."/photo/{$hash}-{$smallest}.".$ph->getExt();
+		$picture["preview"]   = App::get_baseurl() . "/photo/{$hash}-{$smallest}." . $ph->getExt();
 
 		if ($r_json) {
 			echo json_encode(array('picture'=>$picture));
@@ -276,7 +319,6 @@ function wall_upload_post(App $a, $desktopmode = true) {
 	}
 
 /* mod Waitman Gobble NO WARRANTY */
-
 	// if we get the signal then return the image url info in BBCODE
 	if ($_REQUEST['hush']!='yeah') {
 		echo  "\n\n" . '[url=' . App::get_baseurl() . '/photos/' . $page_owner_nick . '/image/' . $hash . '][img]' . App::get_baseurl() . "/photo/{$hash}-{$smallest}.".$ph->getExt()."[/img][/url]\n\n";

view/theme/frio/css/mod_events.css

@@ -22,6 +22,9 @@
 #fc-header-right {
     margin-top: -4px;
 }
+#fc-header-right button {
+    color: inherit;
+}
 #event-calendar-title {
     vertical-align: middle;
 }

view/theme/frio/css/style.css

@@ -91,6 +91,10 @@ blockquote {
 .hidden {
     display: none !important;
 }
+.minimize {
+    max-height: 0px !important;
+    overflow: hidden !important;
+}
 code {
     white-space: pre-wrap;
 }
@@ -158,6 +162,7 @@ a#item-delete-selected {
     font-size: 14px;
     font-weight: 600;
     padding: 8px 16px;
+    color: inherit;
 }
 
 .btn-default {
@@ -190,12 +195,7 @@ a#item-delete-selected {
     outline: 0;
     background: $btn_primary_hover_color !important;
 }
-.btn-default:active, .btn-default.active {
+
-    color: $link_color;
-}
-.btn-default:active:hover, .btn-default.active:hover {
-    color: $link_hover_color;
-}
 .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
 .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
 .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus,
@@ -211,9 +211,6 @@ a#item-delete-selected {
     padding-left: 0;
     padding-right: 0;
 }
-.btn {
-	color: inherit;
-}
 .btn-eventnav, btn-eventnav:hover {
     font-size: 16px;
     background: none;
@@ -1310,6 +1307,69 @@ 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: 0px;
+    margin-left: -15px;
+    margin-bottom: 0px;
+    overflow-y: auto;
+    min-width: 100px;
+    max-height: calc(100vh - 210px);
+    line-height: 1.3;
+}
+@media (min-width: 768px) {
+    .fbrowser .folders ul {
+        max-height: calc(100vh - 255px);
+    }
+}
+.fbrowser .folders li {
+    padding-left: 20px;
+    padding-right: 10px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+.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 .fbrowser-content-container {
+    overflow-y: auto;
+    max-height: calc(100vh - 175px);
+}
+@media (min-width: 768px) {
+    .fbrowser .fbrowser-content-container {
+        max-height: calc(100vh - 220px);
+    }
+}
+.fbrowser.image .photo-album-image-wrapper {
+    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
+}
 .fbrowser .profile-rotator-wrapper {
     min-height: 200px;
 }
@@ -1610,6 +1670,10 @@ code > .hl-main {
 .wall-item-actions .button-likes {
     text-transform: capitalize;
 }
+.wall-item-actions button:hover {
+    color: #555;
+    text-decoration: underline;
+}
 .wall-item-actions .separator {
 	margin: 0 .3em;
 }

view/theme/frio/js/filebrowser.js

@@ -68,6 +68,7 @@ var FileBrowser = {
 	nickname : "",
 	type : "",
 	event: "",
+	folder: "",
 	id : null,
 
 	init: function(nickname, type, hash) {
@@ -80,16 +81,15 @@ var FileBrowser = {
 			var destination = h.split("-")[0];
 			FileBrowser.id = h.split("-")[1];
 			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);
 			}
 		};
 
-		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 .close").on("click", function(e) {
 			e.preventDefault();
@@ -97,34 +97,25 @@ var FileBrowser = {
 		});
 
 		// Click on album link
-		$(".fbrowser").on("click", ".folders a, .path a, .folders button, .path button", function(e) {
+		$(".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();
+			FileBrowser.folder = this.dataset.folder;
-			$(".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) {
 			e.preventDefault();
 
 			var embed = "";
-			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
-				embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";
+				embed = "[attachment]" + this.dataset.link.split("/").pop() + "[/attachment]";
 			}
 
 			// Delete prefilled Text of the comment input
@@ -132,7 +123,7 @@ var FileBrowser = {
 			// work as expected (we need a way to wait until commentOpenUI would be finished).
 			// As for now we insert pieces of this function here
 			if ((commentElm !== null) && (typeof commentElm !== "undefined")) {
-				if (commentElm.value == "") {
+				if (commentElm.value === "") {
 					$("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
 					$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
 					$("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');
@@ -140,61 +131,75 @@ var FileBrowser = {
 				}
 
 			}
+
 			console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);
+
 			parent.$("body").trigger(FileBrowser.event, [
 				this.dataset.filename,
 				embed,
 				FileBrowser.id,
-				this.dataset.img,
+				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) {
+			// To get the albumname we need to convert it from hex
+			var albumname = hex2bin(FileBrowser.folder);
+			//AjaxUpload for images
 			var image_uploader = new window.AjaxUpload(
 				'upload-image',
-				{	action: 'wall_upload/'+FileBrowser.nickname+'?response=json',
+				{	action: 'wall_upload/' + FileBrowser.nickname + '?response=json&album=' + albumname,
 					name: 'userfile',
 					responseType: 'json',
-					onSubmit: function(file,ext) {
+					onSubmit: function(file, ext) {
 						$(".fbrowser-content").hide();
 						$(".fbrowser .profile-rotator-wrapper").show();
 						$(".error").addClass('hidden');
 					},
 					onComplete: function(file,response) {
-						if (response['error']!= undefined) {
+						if (response['error'] != undefined) {
 							$(".error span").html(response['error']);
 							$(".error").removeClass('hidden');
 							$(".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"
+						var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + FileBrowser.folder + "?mode=none";
 						// load new content to fbrowser window
-						$(".fbrowser").load(url);
+						FileBrowser.loadContent(url);
 					}
 				}
 			);
 		}
 
 		if ($("#upload-file").length) {
+			//AjaxUpload for files
 			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) {
+					onSubmit: function(file, ext) {
 						$(".fbrowser-content").hide();
 						$(".fbrowser .profile-rotator-wrapper").show();
 						$(".error").addClass('hidden');
@@ -207,18 +212,49 @@ 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"
+						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);
 					}
 				}
 			);
 		}
+	},
+
+	// Stuff which should be executed if ne content was loaded
+	postLoad: function() {
+		FileBrowser.initGallery();
+		$(".fbrowser .fbswitcher .btn").removeClass("active");
+		$(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");
+		// We need to add the AjaxUpload to the button
+		FileBrowser.uploadButtons();
+		
+	},
+
+	// Load new content (e.g. change photo album)
+	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();
+			}
+		});
+	},
+
+	// Initialize justified Gallery
+	initGallery: function() {
+		$(".fbrowser.image .fbrowser-content-container").justifiedGallery({
+			'rowHeight': 80,
+			'margins': 4,
+			'border': 0
+		});
 	}
 };

view/theme/frio/js/modal.js

@@ -59,7 +59,7 @@ $(document).ready(function(){
 	});
 
 	// Jot nav menu.
-	$("body").on("click", "#jot-modal .jot-nav li a", function(e){
+	$("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function(e){
 		e.preventDefault();
 		toggleJotNav(this);
 	});
@@ -306,10 +306,37 @@ function jotreset() {
 
 // Give the active "jot-nav" list element the class "active"
 function toggleJotNav (elm) {
-	// select all li of jot-nav and remove the active class
+	// Get the ID of the tab panel which should be activated
-	$(".jot-nav li").removeClass("active");
+	var tabpanel = elm.getAttribute("aria-controls");
-	// add the active class to the parent of the link which was selected
+	var cls = hasClass(elm, "jot-nav-lnk-mobile");
+
+	// Select all li of jot-nav and remove the active class
+	$(elm).parent("li").siblings("li").removeClass("active");
+	// Add the active class to the parent of the link which was selected
 	$(elm).parent("li").addClass("active");
+
+	// Minimize all tab content wrapper and activate only the selected
+	// tab panel
+	$('#jot-modal [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
+	$('#jot-modal #' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
+
+	// Set the aria-selected states
+	$("#jot-modal .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
+	elm.setAttribute("aria-selected", "true");
+
+	// For some some tab panels we need to execute other js functions
+	if (tabpanel === "jot-preview-content") {
+		preview_post();
+	} else if (tabpanel === "jot-fbrowser-wrapper") {
+		$(function() {
+			Dialog.showJot();
+		});
+	}
+
+	// If element is a mobile dropdown nav menu we need to change the botton text
+	if (cls) {
+		toggleDropdownText(elm);
+	}
 }
 
 // Wall Message needs a special handling because in some cases

view/theme/frio/js/theme.js

@@ -208,11 +208,8 @@ $(document).ready(function(){
 
 	// Dropdown menus with the class "dropdown-head" will display the active tab
 	// as button text
-	$("body").on('click', '.dropdown-head .dropdown-menu li a', function(){
+	$("body").on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
-		$(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
+		toggleDropdownText(this);
-		$(this).closest(".dropdown").find('.btn').val($(this).data('value'));
-		$(this).closest("ul").children("li").show();
-		$(this).parent("li").hide();
 	});
 
 	/* setup onoff widgets */
@@ -638,3 +635,67 @@ function doLikeAction(ident, verb) {
 	liking = 1;
 	force_update = true;
 }
+
+// Decodes a hexadecimally encoded binary string
+function hex2bin (s) {
+	//  discuss at: http://locutus.io/php/hex2bin/
+	// original by: Dumitru Uzun (http://duzun.me)
+	//   example 1: hex2bin('44696d61')
+	//   returns 1: 'Dima'
+	//   example 2: hex2bin('00')
+	//   returns 2: '\x00'
+	//   example 3: hex2bin('2f1q')
+	//   returns 3: false
+	var ret = [];
+	var i = 0;
+	var l;
+	s += '';
+
+	for (l = s.length; i < l; i += 2) {
+		var c = parseInt(s.substr(i, 1), 16);
+		var k = parseInt(s.substr(i + 1, 1), 16);
+		if (isNaN(c) || isNaN(k)) {
+			return false;
+		}
+		ret.push((c << 4) | k);
+	}
+	return String.fromCharCode.apply(String, ret);
+}
+
+// Convert binary data into hexadecimal representation
+function bin2hex (s) {
+	// From: http://phpjs.org/functions
+	// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+	// +   bugfixed by: Onno Marsman
+	// +   bugfixed by: Linuxworld
+	// +   improved by: ntoniazzi (http://phpjs.org/functions/bin2hex:361#comment_177616)
+	// *     example 1: bin2hex('Kev');
+	// *     returns 1: '4b6576'
+	// *     example 2: bin2hex(String.fromCharCode(0x00));
+	// *     returns 2: '00'
+
+	var i, l, o = "", n;
+
+	s += "";
+
+	for (i = 0, l = s.length; i < l; i++) {
+		n = s.charCodeAt(i).toString(16);
+		o += n.length < 2 ? "0" + n : n;
+	}
+
+	return o;
+}
+
+// Dropdown menus with the class "dropdown-head" will display the active tab
+// as button text
+function toggleDropdownText(elm) {
+		$(elm).closest(".dropdown").find('.btn').html($(elm).text() + ' <span class="caret"></span>');
+		$(elm).closest(".dropdown").find('.btn').val($(elm).data('value'));
+		$(elm).closest("ul").children("li").show();
+		$(elm).parent("li").hide();
+}
+
+// Check if element does have a specific class
+function hasClass(elem, cls) {
+	return (" " + elem.className + " " ).indexOf( " "+cls+" " ) > -1;
+}

view/theme/frio/templates/filebrowser.tpl

@@ -13,37 +13,57 @@
 		<input id="fb-type" type="hidden" name="type" value="{{$type}}" />
 
 		<div class="error hidden">
-            <span></span> <button type="button" class="btn btn-link" class="close">X</a>
+			<span></span> <button type="button" class="btn btn-link" class="close" aria-label="Close">X</a>
 		</div>
 
-        <div class="path">
+		{{* The breadcrumb navigation *}}
-            {{foreach $path as $p}}<button type="button" class="btn-link" data-folder="{{$p.0}}">{{$p.1}}</button>{{/foreach}}
+		<ol class="path breadcrumb" aria-label="Breadcrumb" role="navigation">
-        </div>
+			{{foreach $path as $p}}<li role="presentation"><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
 
+			{{* Switch between image and file mode *}}
+			<div class="fbswitcher btn-group btn-group-xs pull-right" aria-label="Switch between image and file mode">
+				<button type="button" class="btn btn-default" data-mode="image" aria-label="Image Mode"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
+				<button type="button" class="btn btn-default" data-mode="file" aria-label="File Mode"><i class="fa fa-file-o" aria-hidden="true"></i></button>
+			</div>
+		</ol>
+
+		<div class="media">
+
+			{{* List of photo albums *}}
 			{{if $folders }}
-        <div class="folders">
+			<div class="folders media-left" role="navigation" aria-label="Album Navigation">
-            <ul>
+				<ul role="menu">
-                {{foreach $folders as $f}}<li><button type="button" class="btn-link" data-folder="{{$f.0}}">{{$f.1}}</button></li>{{/foreach}}
+					{{foreach $folders as $f}}
+					<li role="presentation">
+						<a href="#" data-folder="{{$f.0}}" role="menuitem">{{$f.1}}</a>
+					</li>
+					{{/foreach}}
 				</ul>
 			</div>
 			{{/if}}
 
-        <div class="list">
+			{{* The main content (images or files) *}}
+			<div class="list {{$type}} media-body" role="main" aria-label="Browser Content">
+				<div class="fbrowser-content-container">
 					{{foreach $files as $f}}
 					<div class="photo-album-image-wrapper">
-                <button type="button" class="btn btn-link 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}}">
-                    <img src="{{$f.2}}">
+							<img src="{{$f.2}}" alt="{{$f.1}}">
 							<p>{{$f.1}}</p>
-                </button>
+						</a>
 					</div>
 					{{/foreach}}
 				</div>
+			</div>
+		</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>
+			<button id="upload-{{$type}}">{{"Upload"|t}}</button>
 		</div>
 	</div>
-	<div class="profile-rotator-wrapper" style="display: none;">
+
-		<i class="fa fa-circle-o-notch fa-spin"></i>
+	{{* This part contains the conent loader icon which is visible when new conent is loaded *}}
+	<div class="profile-rotator-wrapper" aria-hidden="true" style="display: none;">
+		<i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
 	</div>
 </div>

view/theme/frio/templates/jot-header.tpl

@@ -280,36 +280,14 @@
 			.modal.show;
 	}
 
-	// the following functions show/hide the specific jot content
+	// Activate the jot text section in the jot modal
-	// in dependence of the selected nav
-	function aclActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").hide();
-		$(".modal-body #profile-jot-acl-wrapper").show();
-	}
-
-
-	function previewActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #profile-jot-acl-wrapper,.modal-body #jot-fbrowser-wrapper").hide();
-		preview_post();
-	}
-
 	function jotActive() {
-		$(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").hide();
+		// Make sure jot text does have really the active class (we do this because there are some
-		$(".modal-body #profile-jot-wrapper").show();
+		// other events which trigger jot text (we need to do this for the desktop and mobile
-
+		// jot nav
-		//make sure jot text does have really the active class (we do this because there are some
+		var elem = $("#jot-modal .jot-nav #jot-text-lnk");
-		// other events which trigger jot text
+		var elemMobile = $("#jot-modal .jot-nav #jot-text-lnk-mobile")
-		toggleJotNav($("#jot-modal .jot-nav #jot-text-lnk"));
+		toggleJotNav(elem[0]);
+		toggleJotNav(elemMobile[0]);
 	}
-
-	function fbrowserActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #profile-jot-acl-wrapper").hide();
-
-		$(".modal-body #jot-fbrowser-wrapper").show();
-
-		$(function() {Dialog.showJot();});
-	}
-
-
 </script>
-

view/theme/frio/templates/jot.tpl

@@ -9,48 +9,52 @@
 			{{* Note: We need 2 modal close buttons here to bypass a bug in bootstrap.
 			The second is for mobile view. The first one doesnt work with dropdowns. To get a working close button
 			in with dropdows the close button needs to be inserted after the dropdown. *}}
-			<button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">&times;</button>
+			<button type="button" class="close hidden-xs" data-dismiss="modal" aria-label="Close" style="float: right;">&times;</button>
 
-			{{* The Jot navigation menu (text input, permissions, preview, filebrowser) *}}
+			{{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
-			<ul class="nav nav-tabs hidden-xs jot-nav" role="menubar" data-tabs="tabs">
+			<ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">
 				{{* Mark the first list entry as active because it is the first which is active after opening
 					the modal. Changing of the activity status is done by js in jot.tpl-header *}}
-				<li class="active" role="menuitem">
+				<li class="active" role="presentation">
-					<a class="jot-text-lnk" id="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a>
+					<a href="#profile-jot-wrapper" class="jot-text-lnk jot-nav-lnk" id="jot-text-lnk" role="tab" aria-controls="profile-jot-wrapper" aria-selected="true">{{$message}}</a>
 				</li>
 				{{if $acl}}
-				<li role="menuitem">
+				<li role="presentation">
-					<a class="jot-perms-lnk" id="jot-perms-lnk" onclick="aclActive(); return false;">{{$shortpermset}}</a>
+					<a href="#profile-jot-acl-wrapper" class="jot-perms-lnk jot-nav-lnk" id="jot-perms-lnk" role="tab" aria-controls="profile-jot-acl-wrapper" aria-selected="false">{{$shortpermset}}</a>
 				</li>
 				{{/if}}
 				{{if $preview}}
-				<li role="menuitem">
+				<li role="presentation">
-					<a class="jot-preview-lnk" id="jot-preview-lnk" onclick="previewActive(); return false;">{{$preview}}</a>
+					<a href="#jot-preview-content" class="jot-preview-lnk jot-nav-lnk" id="jot-preview-lnk" role="tab" aria-controls="jot-preview-content" aria-selected="false">{{$preview}}</a>
 				</li>
 				{{/if}}
-				<li role="menuitem">
+				<li role="presentation">
-					<a class="jot-browser-lnk" id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a>
+					<a href="#jot-fbrowser-wrapper" class="jot-browser-lnk jot-nav-lnk" id="jot-browser-link" role="tab" aria-controls="jot-fbrowser-wrapper" aria-selected="false">{{$browser}}</a>
 				</li>
 			</ul>
 
+			{{* The Jot navigation menu for small displays (text input, permissions, preview, filebrowser) *}}
 			<div class="dropdown dropdown-head dropdown-mobile-jot jot-nav hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs" style="float: left;">
-				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{$message}}&nbsp;<span class="caret"></span></button>
+				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">{{$message}}&nbsp;<span class="caret"></span></button>
-				<ul class="dropdown-menu nav nav-pills">
+				<ul class="dropdown-menu nav nav-pills" aria-label="submenu">
 					{{* mark the first list entry as active because it is the first which is active after opening
 					the modal. Changing of the activity status is done by js in jot.tpl-header *}}
-					<li role="menuitem" style="display: none;">
+					<li role="presentation" style="display: none;">
-						<a class="jot-text-lnk" id="jot-text-lnk-mobile" onclick="jotActive(); return false;">{{$message}}</a>
+						<button class="jot-text-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-text-lnk-mobile" aria-controls="profile-jot-wrapper" role="menuitem" aria-selected="true">{{$message}}</button>
 					</li>
 					{{if $acl}}
-					<li role="menuitem">
+					<li role="presentation">
-						<a class="jot-perms-lnk" id="jot-perms-lnk-mobile" onclick="aclActive(); return false;">{{$shortpermset}}</a>
+						<button class="jot-perms-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-perms-lnk-mobile" aria-controls="profile-jot-acl-wrapper" role="menuitem" aria-selected="false">{{$shortpermset}}</button>
 					</li>
 					{{/if}}
 					{{if $preview}}
-					<li role="menuitem">
+					<li role="presentation">
-						<a class="jot-preview-lnk" id="jot-preview-lnk-mobile" onclick="previewActive(); return false;">{{$preview}}</a>
+						<button class="jot-preview-lnk btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-preview-lnk-mobile" aria-controls="jot-preview-content" role="menuitem" aria-selected="false">{{$preview}}</button>
 					</li>
 					{{/if}}
+					<li role="presentation">
+						<button class="jot-browser-lnk-mobile btn-link jot-nav-lnk jot-nav-lnk-mobile" id="jot-browser-lnk-mobile" aria-controls="jot-fbrowser-wrapper" role="menuitem" aria-selected="false">{{$browser}}</button>
+					</li>
 				</ul>
 			</div>
 			<button type="button" class="close hidden-lg hidden-md hidden-sm" data-dismiss="modal" style="float: right;">&times;</button>
@@ -58,7 +62,7 @@
 
 		<div id="jot-modal-body" class="modal-body">
 			<form id="profile-jot-form" action="{{$action}}" method="post">
-				<div id="profile-jot-wrapper">
+				<div id="profile-jot-wrapper" aria-labelledby="jot-text-lnk" role="tabpanel" aria-hidden="false">
 					<div>
 						<!--<div id="profile-jot-desc" class="jothidden pull-right">&nbsp;</div>-->
 					</div>
@@ -88,10 +92,6 @@
 					</div>
 
 					<ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">
-						{{* uncomment the button for "wall-immage-upload" because we have integrated it directly in the jot modal
-						<li><a href="#" id="wall-image-upload" title="{{$upload}}"><i class="fa fa-picture-o"></i></a></li>
-						*}}
-						<li><button type="button" class="btn-link" id="wall-file-upload" title="{{$attach}}"><i class="fa fa-paperclip"></i></button></li>
 						<li><button type="button" class="btn-link" id="profile-link"  ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink();" title="{{$weblink}}"><i class="fa fa-link"></i></button></li>
 						<li><button type="button" class="btn-link" id="profile-video" onclick="jotVideoURL();" title="{{$video}}"><i class="fa fa-film"></i></button></li>
 						<li><button type="button" class="btn-link" id="profile-audio" onclick="jotAudioURL();" title="{{$audio}}"><i class="fa fa-music"></i></button></li>
@@ -112,14 +112,14 @@
 
 				</div>
 
-				<div id="profile-jot-acl-wrapper" style="display: none;">
+				<div id="profile-jot-acl-wrapper" class="minimize" aria-labelledby="jot-perms-lnk" role="tabpanel" aria-hidden="true">
 					{{$acl}}
 				</div>
 
-				<div id="jot-preview-content" style="display:none;"></div>
+				<div id="jot-preview-content" class="minimize" aria-labelledby="jot-preview-lnk" role="tabpanel" aria-hidden="true"></div>
 			</form>
 
-			<div id="jot-fbrowser-wrapper" style="display: none"></div>
+			<div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
 
 			{{if $content}}<script>initEditor();</script>{{/if}}
 		</div>
@@ -146,4 +146,3 @@ can load different content into the jot moadl (e.g. the item edit jot)
 		this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
 	});
 </script>
-