Browse Source

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

frio: fbrowser styling
pull/3296/head
Hypolite Petovan 4 years ago
committed by GitHub
parent
commit
cfb99aa323
  1. 168
      mod/wall_upload.php
  2. 3
      view/theme/frio/css/mod_events.css
  3. 82
      view/theme/frio/css/style.css
  4. 122
      view/theme/frio/js/filebrowser.js
  5. 35
      view/theme/frio/js/modal.js
  6. 73
      view/theme/frio/js/theme.js
  7. 74
      view/theme/frio/templates/filebrowser.tpl
  8. 38
      view/theme/frio/templates/jot-header.tpl
  9. 55
      view/theme/frio/templates/jot.tpl

168
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(! x($_FILES,'media')) {
if ($a->argc > 1) {
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 {
if($community_page && remote_user()) {
} else {
if ($community_page && remote_user()) {
$contact_id = 0;
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $page_owner_uid) {
if (is_array($_SESSION['remote'])) {
foreach ($_SESSION['remote'] as $v) {
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,32 +113,36 @@ 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')) {
if (is_array($_FILES['media']['tmp_name']))
} elseif (x($_FILES, 'media')) {
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=="") {
@ -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.
" - size: ".$filesize." - type: ".$filetype, LOGGER_DEBUG);
logger("File upload src: " . $src . " - filename: " . $filename .
" - size: " . $filesize . " - type: " . $filetype, LOGGER_DEBUG);
$maximagesize = get_config('system','maximagesize');
$maximagesize = Config::get('system', 'maximagesize');
if(($maximagesize) && ($filesize > $maximagesize)) {
$msg = sprintf( t('Image exceeds size limit of %s'), formatBytes($maximagesize));
if (($maximagesize) && ($filesize > $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');
if(! $max_length)
$max_length = Config::get('system', 'max_image_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);
if($r)
$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, $album, 1, 0, $defperm);
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);
if($r AND ($smallest == 0))
$r = $ph->store($page_owner_uid, $visitor, $hash, $filename, $album, 2, 0, $defperm);
if ($r && ($smallest == 0)) {
$smallest = 2;
}
}
$basename = basename($filename);
if (!$desktopmode) {
$r = q("SELECT `id`, `datasize`, `width`, `height`, `type` FROM `photo` WHERE `resource-id` = '%s' ORDER BY `width` DESC LIMIT 1", $hash);
if (!$r){
$r = q("SELECT `id`, `datasize`, `width`, `height`, `type` FROM `photo`
WHERE `resource-id` = '%s'
ORDER BY `width` DESC LIMIT 1",
$hash
);
if (!$r) {
if ($r_json) {
echo json_encode(array('error'=>''));
killme();
@ -253,14 +296,14 @@ function wall_upload_post(App $a, $desktopmode = true) {
}
$picture = array();
$picture["id"] = $r[0]["id"];
$picture["size"] = $r[0]["datasize"];
$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["picture"] = App::get_baseurl()."/photo/{$hash}-0.".$ph->getExt();
$picture["preview"] = App::get_baseurl()."/photo/{$hash}-{$smallest}.".$ph->getExt();
$picture["id"] = $r[0]["id"];
$picture["size"] = $r[0]["datasize"];
$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["picture"] = App::get_baseurl() . "/photo/{$hash}-0." . $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";

3
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;
}

82
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;
}

122
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") {
// get the comment textimput field
if (destination === "comment") {
// 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.uploadButtons();
FileBrowser.postLoad();
$(".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();
$(".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.folder = this.dataset.folder;
FileBrowser.loadContent(url);
});
//embed on click
//Embed on click
$(".fbrowser").on('click', ".photo-album-photo-link", function(e) {
e.preventDefault();
var embed = "";
if (FileBrowser.type == "image") {
embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
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]";
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"
// load new content to fbrowser window
$(".fbrowser").load(url);
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none";
// Load new content to fbrowser window
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
});
}
};

35
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
$(".jot-nav li").removeClass("active");
// add the active class to the parent of the link which was selected
// Get the ID of the tab panel which should be activated
var tabpanel = elm.getAttribute("aria-controls");
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

73
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(){
$(this).closest(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).closest(".dropdown").find('.btn').val($(this).data('value'));
$(this).closest("ul").children("li").show();
$(this).parent("li").hide();
$("body").on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
toggleDropdownText(this);
});
/* setup onoff widgets */
@ -637,4 +634,68 @@ function doLikeAction(ident, verb) {
$.get('like/' + ident.toString() + '?verb=' + verb, NavUpdate );
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;
}

74
view/theme/frio/templates/filebrowser.tpl

@ -12,38 +12,58 @@
<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> <button type="button" class="btn btn-link" class="close">X</a>
</div>
<div class="path">
{{foreach $path as $p}}<button type="button" class="btn-link" data-folder="{{$p.0}}">{{$p.1}}</button>{{/foreach}}
</div>
{{if $folders }}
<div class="folders">
<ul>
{{foreach $folders as $f}}<li><button type="button" class="btn-link" data-folder="{{$f.0}}">{{$f.1}}</button></li>{{/foreach}}
</ul>
</div>
{{/if}}
<div class="list">
{{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}}">
<img src="{{$f.2}}">
<p>{{$f.1}}</p>
</button>
<div class="error hidden">
<span></span> <button type="button" class="btn btn-link" class="close" aria-label="Close">X</a>
</div>
{{* The breadcrumb navigation *}}
<ol class="path breadcrumb" aria-label="Breadcrumb" role="navigation">
{{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 media-left" role="navigation" aria-label="Album Navigation">
<ul role="menu">
{{foreach $folders as $f}}
<li role="presentation">
<a href="#" data-folder="{{$f.0}}" role="menuitem">{{$f.1}}</a>
</li>
{{/foreach}}
</ul>
</div>
{{/if}}
{{* 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">
<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
<img src="{{$f.2}}" alt="{{$f.1}}">
<p>{{$f.1}}</p>
</a>
</div>
{{/foreach}}
</div>
</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>
<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>

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

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

55
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) *}}
<ul class="nav nav-tabs hidden-xs jot-nav" role="menubar" data-tabs="tabs">
{{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
<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">
<a class="jot-text-lnk" id="jot-text-lnk" onclick="jotActive(); return false;">{{$message}}</a>
<li class="active" role="presentation">
<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">
<a class="jot-perms-lnk" id="jot-perms-lnk" onclick="aclActive(); return false;">{{$shortpermset}}</a>
<li role="presentation">
<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">
<a class="jot-preview-lnk" id="jot-preview-lnk" onclick="previewActive(); return false;">{{$preview}}</a>
<li role="presentation">
<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">
<a class="jot-browser-lnk" id="jot-browser-link" onclick="fbrowserActive(); return false;">{{$browser}}</a>
<li role="presentation">
<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>
<ul class="dropdown-menu nav nav-pills">
<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" 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;">
<a class="jot-text-lnk" id="jot-text-lnk-mobile" onclick="jotActive(); return false;">{{$message}}</a>
<li role="presentation" style="display: none;">
<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">
<a class="jot-perms-lnk" id="jot-perms-lnk-mobile" onclick="aclActive(); return false;">{{$shortpermset}}</a>
<li role="presentation">
<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">
<a class="jot-preview-lnk" id="jot-preview-lnk-mobile" onclick="previewActive(); return false;">{{$preview}}</a>
<li role="presentation">
<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>
Loading…
Cancel
Save