strk/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

frio: formating, otherwise untouched

Browse source
This commit is contained in:
Extarys 2021-01-22 08:38:44 -05:00
parent cb24e8987c
commit 91d3e72be7
25 changed files with 3300 additions and 2937 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
view/theme/frio/css/font-awesome.custom.css
View file

@ -4,18 +4,30 @@ This file applies Font Awesome icons to some friendica standard classes
*/
.icon:before {
font-family: ForkAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: top;
font-size: 1.4em;
font-family: ForkAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: top;
font-size: 1.4em;
}
/* media icons */
.icon.type-image:before { content: "\f1c5"; }
.icon.type-video:before { content: "\f1c8"; }
.icon.type-audio:before { content: "\f1c7"; }
.icon.type-text:before { content: "\f0f6"; }
.icon.type-application:before { content: "\f016"; }
.icon.type-unkn:before { content: "\f016"; }
.icon.type-image:before {
content: "\f1c5";
}
.icon.type-video:before {
content: "\f1c8";
}
.icon.type-audio:before {
content: "\f1c7";
}
.icon.type-text:before {
content: "\f0f6";
}
.icon.type-application:before {
content: "\f016";
}
.icon.type-unkn:before {
content: "\f016";
}

3
view/theme/frio/css/hovercard.css
View file

@ -1,4 +1,3 @@
.hovercard {
position: absolute;
top: 0;
@ -202,7 +201,6 @@
text-decoration: none !important;
}
/* Basic hovercard */
.basic-content {
padding: 9px;
@ -285,7 +283,6 @@
.hover-card-header h4 {
display: block;
}
.hover-card-header h4 a {

38
view/theme/frio/css/mod_admin.css
View file

@ -1,24 +1,42 @@
#adminpage.adminpage > h1 { padding: 0 15px; }
#adminpage.adminpage > h1 {
padding: 0 15px;
}
#users th:first-of-type { width: 1em; }
#users th:nth-of-type(2) { width: 40px; }
#users th:last-of-type { width: 1em; }
.admin-settings-footer-elements { padding-left: 8px; padding-right: 8px; }
#users th:first-of-type {
width: 1em;
}
#users th:nth-of-type(2) {
width: 40px;
}
#users th:last-of-type {
width: 1em;
}
.admin-settings-footer-elements {
padding-left: 8px;
padding-right: 8px;
}
#deleted th:first-of-type { width: 40px; }
#deleted th:first-of-type {
width: 40px;
}
#users img.avatar-nano,
#deleted img.avatar-nano {
height: 24px; width: 24px;
height: 24px;
width: 24px;
}
.opened .caret {
transform: rotate(180deg);
}
.opened .caret { transform: rotate(180deg); }
tr.details td,
tr.details th {
border-top: 0!important;
border-top: 0 !important;
}
.adminpage td > .checkbox,
.adminpage th > .checkbox {
margin: 0;
}
.adminpage td { word-break: break-all; }
.adminpage td {
word-break: break-all;
}

3493
view/theme/frio/css/style.css
View file

File diff suppressed because it is too large Load diff

48
view/theme/frio/js/compose.js
View file

@ -1,51 +1,53 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
$(function() {
$(function () {
// Jot attachment live preview.
let $textarea = $('textarea[name=body]');
let $textarea = $("textarea[name=body]");
$textarea.linkPreview();
$textarea.keyup(function(){
$textarea.keyup(function () {
var textlen = $(this).val().length;
$('#character-counter').text(textlen);
$("#character-counter").text(textlen);
});
$textarea.editor_autocomplete(baseurl + '/search/acl');
$textarea.bbco_autocomplete('bbcode');
$textarea.editor_autocomplete(baseurl + "/search/acl");
$textarea.bbco_autocomplete("bbcode");
let location_button = document.getElementById('profile-location');
let location_input = document.getElementById('jot-location');
let location_button = document.getElementById("profile-location");
let location_input = document.getElementById("jot-location");
if (location_button && location_input) {
updateLocationButtonDisplay(location_button, location_input);
location_input.addEventListener('change', function () {
location_input.addEventListener("change", function () {
updateLocationButtonDisplay(location_button, location_input);
});
location_input.addEventListener('keyup', function () {
location_input.addEventListener("keyup", function () {
updateLocationButtonDisplay(location_button, location_input);
});
location_button.addEventListener('click', function() {
location_button.addEventListener("click", function () {
if (location_input.value) {
location_input.value = '';
location_input.value = "";
updateLocationButtonDisplay(location_button, location_input);
} else if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
location_input.value = position.coords.latitude + ', ' + position.coords.longitude;
updateLocationButtonDisplay(location_button, location_input);
}, function (error) {
location_button.disabled = true;
updateLocationButtonDisplay(location_button, location_input);
});
navigator.geolocation.getCurrentPosition(
function (position) {
location_input.value = position.coords.latitude + ", " + position.coords.longitude;
updateLocationButtonDisplay(location_button, location_input);
},
function (error) {
location_button.disabled = true;
updateLocationButtonDisplay(location_button, location_input);
},
);
}
});
}
});
function updateLocationButtonDisplay(location_button, location_input)
{
location_button.classList.remove('btn-primary');
function updateLocationButtonDisplay(location_button, location_input) {
location_button.classList.remove("btn-primary");
if (location_input.value) {
location_button.disabled = false;
location_button.classList.add('btn-primary');
location_button.classList.add("btn-primary");
location_button.title = location_button.dataset.titleClear;
} else if (!"geolocation" in navigator) {
location_button.disabled = true;

82
view/theme/frio/js/event_edit.js
View file

@ -1,39 +1,45 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
$(document).ready(function() {
$(document).ready(function () {
// Go to the permissions tab if the checkbox is checked.
$('body').on("click", "#id_share", function() {
if ($('#id_share').is(':checked') && !( $('#id_share').attr("disabled"))) {
$('#acl-wrapper').show();
$("a#event-perms-lnk").parent("li").show();
toggleEventNav("a#event-perms-lnk");
eventAclActive();
}
else {
$('#acl-wrapper').hide();
$("a#event-perms-lnk").parent("li").hide();
}
}).trigger('change');
$("body")
.on("click", "#id_share", function () {
if ($("#id_share").is(":checked") && !$("#id_share").attr("disabled")) {
$("#acl-wrapper").show();
$("a#event-perms-lnk").parent("li").show();
toggleEventNav("a#event-perms-lnk");
eventAclActive();
} else {
$("#acl-wrapper").hide();
$("a#event-perms-lnk").parent("li").hide();
}
})
.trigger("change");
// Disable the finish time input if the user disable it.
$('body').on("change", "#id_nofinish", function() {
enableDisableFinishDate()
}).trigger('change');
$("body")
.on("change", "#id_nofinish", function () {
enableDisableFinishDate();
})
.trigger("change");
// JS for the permission section.
$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
var selstr;
$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
selstr = $(this).html();
$('#jot-public').hide();
});
if (selstr == null) {
$('#jot-public').show();
}
}).trigger('change');
$("#contact_allow, #contact_deny, #group_allow, #group_deny")
.change(function () {
var selstr;
$(
"#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
).each(function () {
selstr = $(this).html();
$("#jot-public").hide();
});
if (selstr == null) {
$("#jot-public").show();
}
})
.trigger("change");
// Change the event nav menu.tabs on click.
$("body").on("click", "#event-nav > li > a", function(e){
$("body").on("click", "#event-nav > li > a", function (e) {
e.preventDefault();
toggleEventNav(this);
});
@ -46,7 +52,7 @@ $(document).ready(function() {
// Clear some elements (e.g. the event-preview container) when
// selecting a event nav link so it don't appear more than once.
$('body').on("click", "#event-nav a", function(e) {
$("body").on("click", "#event-nav a", function (e) {
$("#event-preview").empty();
e.preventDefault();
});
@ -55,14 +61,13 @@ $(document).ready(function() {
// Load the html of the actual event and incect the output to the
// event-edit section.
function doEventPreview() {
$('#event-edit-preview').val(1);
$.post('events',$('#event-edit-form').serialize(), function(data) {
$("#event-edit-preview").val(1);
$.post("events", $("#event-edit-form").serialize(), function (data) {
$("#event-preview").append(data);
});
$('#event-edit-preview').val(0);
$("#event-edit-preview").val(0);
}
// The following functions show/hide the specific event-edit content
// in dependence of the selected nav.
function eventAclActive() {
@ -70,7 +75,6 @@ function eventAclActive() {
$("#event-acl-wrapper").show();
}
function eventPreviewActive() {
$("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
$("#event-preview").show();
@ -92,20 +96,16 @@ function eventDescActive() {
}
// Give the active "event-nav" list element the class "active".
function toggleEventNav (elm) {
function toggleEventNav(elm) {
// Select all li of #event-nav and remove the active class.
$(elm).closest("#event-nav").children("li").removeClass("active");
// Add the active class to the parent of the link which was selected.
$(elm).parent("li").addClass("active");
}
// Disable the input for the finish date if it is not available.
function enableDisableFinishDate() {
if( $('#id_nofinish').is(':checked'))
$('#id_finish_text').prop("disabled", true);
else
$('#id_finish_text').prop("disabled", false);
if ($("#id_nofinish").is(":checked")) $("#id_finish_text").prop("disabled", true);
else $("#id_finish_text").prop("disabled", false);
}
// @license-end

180
view/theme/frio/js/filebrowser.js
View file

@ -52,7 +52,6 @@
* });
**/
/*
* IMPORTANT
*
@ -64,21 +63,20 @@
*
*/
var FileBrowser = {
nickname : "",
type : "",
nickname: "",
type: "",
event: "",
folder: "",
id : null,
id: null,
init: function(nickname, type, hash) {
init: function (nickname, type, hash) {
FileBrowser.nickname = nickname;
FileBrowser.type = type;
FileBrowser.event = "fbrowser."+type;
FileBrowser.event = "fbrowser." + type;
if (hash!=="") {
var h = hash.replace("#","");
if (hash !== "") {
var h = hash.replace("#", "");
var destination = h.split("-")[0];
FileBrowser.id = h.split("-")[1];
FileBrowser.event = FileBrowser.event + "." + destination;
@ -86,28 +84,34 @@ var FileBrowser = {
// 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);
FileBrowser.postLoad();
$(".error .close").on("click", function(e) {
$(".error .close").on("click", function (e) {
e.preventDefault();
$(".error").addClass("hidden");
});
// Click on album link
$(".fbrowser").on("click", ".folders a, .path a", function(e) {
$(".fbrowser").on("click", ".folders a, .path a", function (e) {
e.preventDefault();
var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + encodeURIComponent(this.dataset.folder) + "?mode=none&theme=frio";
var url =
baseurl +
"/fbrowser/" +
FileBrowser.type +
"/" +
encodeURIComponent(this.dataset.folder) +
"?mode=none&theme=frio";
FileBrowser.folder = this.dataset.folder;
FileBrowser.loadContent(url);
});
//Embed on click
$(".fbrowser").on('click', ".photo-album-photo-link", function(e) {
$(".fbrowser").on("click", ".photo-album-photo-link", function (e) {
e.preventDefault();
var embed = "";
@ -123,36 +127,34 @@ var FileBrowser = {
// Note: not the best solution but function commentOpenUI don't
// 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 !== null && typeof commentElm !== "undefined") {
if (commentElm.value === "") {
$("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
$("#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');
$("#comment-edit-submit-" + FileBrowser.id).attr('tabindex','10');
$("#comment-edit-text-" + FileBrowser.id).attr("tabindex", "9");
$("#comment-edit-submit-" + FileBrowser.id).attr("tabindex", "10");
}
}
console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);
$("body").trigger(FileBrowser.event, [
this.dataset.filename,
embed,
FileBrowser.id,
this.dataset.img
]);
$("body").trigger(FileBrowser.event, [this.dataset.filename, embed, FileBrowser.id, this.dataset.img]);
// Close model
$('#modal').modal('hide');
$("#modal").modal("hide");
// Update autosize for this textarea
autosize.update($(".text-autosize"));
});
// EventListener for switching between image and file mode
$(".fbrowser").on('click', ".fbswitcher .btn", function(e) {
$(".fbrowser").on("click", ".fbswitcher .btn", function (e) {
e.preventDefault();
FileBrowser.type = this.getAttribute("data-mode");
$(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type);
$(".fbrowser")
.removeClass()
.addClass("fbrowser " + FileBrowser.type);
url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio";
FileBrowser.loadContent(url);
@ -160,67 +162,73 @@ var FileBrowser = {
},
// Initialize the AjaxUpload for the upload buttons
uploadButtons: function() {
uploadButtons: function () {
if ($("#upload-image").length) {
//AjaxUpload for images
var image_uploader = new window.AjaxUpload(
'upload-image',
{
action: 'wall_upload/' + FileBrowser.nickname + '?response=json&album=' + encodeURIComponent(FileBrowser.folder),
name: 'userfile',
responseType: 'json',
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');
$(".fbrowser .profile-rotator-wrapper").hide();
$(".fbrowser-content").show();
return;
}
// load new content to fbrowser window
FileBrowser.loadContent(baseurl + '/fbrowser/' + FileBrowser.type + '/' + encodeURIComponent(FileBrowser.folder) + '?mode=none&theme=frio');
var image_uploader = new window.AjaxUpload("upload-image", {
action:
"wall_upload/" +
FileBrowser.nickname +
"?response=json&album=" +
encodeURIComponent(FileBrowser.folder),
name: "userfile",
responseType: "json",
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");
$(".fbrowser .profile-rotator-wrapper").hide();
$(".fbrowser-content").show();
return;
}
}
);
// load new content to fbrowser window
FileBrowser.loadContent(
baseurl +
"/fbrowser/" +
FileBrowser.type +
"/" +
encodeURIComponent(FileBrowser.folder) +
"?mode=none&theme=frio",
);
},
});
}
if ($("#upload-file").length) {
//AjaxUpload for files
var file_uploader = new window.AjaxUpload(
'upload-file',
{ action: 'wall_attach/' + FileBrowser.nickname + '?response=json',
name: 'userfile',
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-content").show();
return;
}
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio";
// Load new content to fbrowser window
FileBrowser.loadContent(url);
var file_uploader = new window.AjaxUpload("upload-file", {
action: "wall_attach/" + FileBrowser.nickname + "?response=json",
name: "userfile",
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-content").show();
return;
}
}
);
var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio";
// Load new content to fbrowser window
FileBrowser.loadContent(url);
},
});
}
},
// Stuff which should be executed if ne content was loaded
postLoad: function() {
postLoad: function () {
FileBrowser.initGallery();
$(".fbrowser .fbswitcher .btn").removeClass("active");
$(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");
@ -229,14 +237,14 @@ var FileBrowser = {
},
// Load new content (e.g. change photo album)
loadContent: function(url) {
loadContent: function (url) {
$(".fbrowser-content").hide();
$(".fbrowser .profile-rotator-wrapper").show();
// load new content to fbrowser window
$(".fbrowser").load(url, function(responseText, textStatus) {
$(".fbrowser").load(url, function (responseText, textStatus) {
$(".profile-rotator-wrapper").hide();
if (textStatus === 'success') {
if (textStatus === "success") {
$(".fbrowser_content").show();
FileBrowser.postLoad();
}
@ -244,12 +252,12 @@ var FileBrowser = {
},
// Initialize justified Gallery
initGallery: function() {
initGallery: function () {
$(".fbrowser.image .fbrowser-content-container").justifiedGallery({
'rowHeight': 80,
'margins': 4,
'border': 0
rowHeight: 80,
margins: 4,
border: 0,
});
}
},
};
// @license-end

170
view/theme/frio/js/hovercard.js
View file

@ -9,16 +9,16 @@
*
*/
$(document).ready(function () {
let $body = $('body');
let $body = $("body");
// Prevents normal click action on click hovercard elements
$body.on('click', '.userinfo.click-card', function (e) {
$body.on("click", ".userinfo.click-card", function (e) {
e.preventDefault();
});
// This event listener needs to be declared before the one that removes
// all cards so that we can stop the immediate propagation of the event
// Since the manual popover appears instantly and the hovercard removal is
// on a 100ms delay, leaving event propagation immediately hides any click hovercard
$body.on('mousedown', '.userinfo.click-card', function (e) {
$body.on("mousedown", ".userinfo.click-card", function (e) {
e.stopImmediatePropagation();
let timeNow = new Date().getTime();
@ -26,14 +26,14 @@ $(document).ready(function () {
let targetElement = $(this);
// get href-attribute
if (targetElement.is('[href]')) {
contactUrl = targetElement.attr('href');
if (targetElement.is("[href]")) {
contactUrl = targetElement.attr("href");
} else {
return true;
}
// no hovercard for anchor links
if (contactUrl.substring(0, 1) === '#') {
if (contactUrl.substring(0, 1) === "#") {
return true;
}
@ -41,59 +41,62 @@ $(document).ready(function () {
});
// hover cards should be removed very easily, e.g. when any of these events happens
$body.on('mouseleave touchstart scroll mousedown submit keydown', function (e) {
$body.on("mouseleave touchstart scroll mousedown submit keydown", function (e) {
// remove hover card only for desktiop user, since on mobile we open the hovercards
// by click event insteadof hover
removeAllHovercards(e, new Date().getTime());
});
$body.on('mouseover', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) {
let timeNow = new Date().getTime();
removeAllHovercards(e, timeNow);
let contactUrl = false;
let targetElement = $(this);
$body
.on("mouseover", ".userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a", function (e) {
let timeNow = new Date().getTime();
removeAllHovercards(e, timeNow);
let contactUrl = false;
let targetElement = $(this);
// get href-attribute
if (targetElement.is('[href]')) {
contactUrl = targetElement.attr('href');
} else {
return true;
}
// no hover card if the element has the no-hover-card class
if (targetElement.hasClass('no-hover-card')) {
return true;
}
// no hovercard for anchor links
if (contactUrl.substring(0, 1) === '#') {
return true;
}
targetElement.attr('data-awaiting-hover-card', timeNow);
// Delay until the hover-card does appear
setTimeout(function () {
if (
targetElement.is(':hover')
&& parseInt(targetElement.attr('data-awaiting-hover-card'), 10) === timeNow
&& $('.hovercard').length === 0
) {
openHovercard(targetElement, contactUrl, timeNow);
// get href-attribute
if (targetElement.is("[href]")) {
contactUrl = targetElement.attr("href");
} else {
return true;
}
}, 500);
}).on('mouseleave', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { // action when mouse leaves the hover-card
removeAllHovercards(e, new Date().getTime());
});
// no hover card if the element has the no-hover-card class
if (targetElement.hasClass("no-hover-card")) {
return true;
}
// no hovercard for anchor links
if (contactUrl.substring(0, 1) === "#") {
return true;
}
targetElement.attr("data-awaiting-hover-card", timeNow);
// Delay until the hover-card does appear
setTimeout(function () {
if (
targetElement.is(":hover") &&
parseInt(targetElement.attr("data-awaiting-hover-card"), 10) === timeNow &&
$(".hovercard").length === 0
) {
openHovercard(targetElement, contactUrl, timeNow);
}
}, 500);
})
.on("mouseleave", ".userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a", function (e) {
// action when mouse leaves the hover-card
removeAllHovercards(e, new Date().getTime());
});
// if we're hovering a hover card, give it a class, so we don't remove it
$body.on('mouseover', '.hovercard', function (e) {
$(this).addClass('dont-remove-card');
$body.on("mouseover", ".hovercard", function (e) {
$(this).addClass("dont-remove-card");
});
$body.on('mouseleave', '.hovercard', function (e) {
$(this).removeClass('dont-remove-card');
$(this).popover('hide');
$body.on("mouseleave", ".hovercard", function (e) {
$(this).removeClass("dont-remove-card");
$(this).popover("hide");
});
}); // End of $(document).ready
@ -101,20 +104,20 @@ $(document).ready(function () {
function removeAllHovercards(event, priorTo) {
// don't remove hovercards until after 100ms, so user have time to move the cursor to it (which gives it the dont-remove-card class)
setTimeout(function () {
$.each($('.hovercard'), function () {
let title = $(this).attr('data-orig-title');
$.each($(".hovercard"), function () {
let title = $(this).attr("data-orig-title");
// don't remove card if it was created after removeAllhoverCards() was called
if ($(this).data('card-created') < priorTo) {
if ($(this).data("card-created") < priorTo) {
// don't remove it if we're hovering it right now!
if (!$(this).hasClass('dont-remove-card')) {
let $handle = $('[data-hover-card-active="' + $(this).data('card-created') + '"]');
$handle.removeAttr('data-hover-card-active');
if (!$(this).hasClass("dont-remove-card")) {
let $handle = $('[data-hover-card-active="' + $(this).data("card-created") + '"]');
$handle.removeAttr("data-hover-card-active");
// Restoring the popover handle title
let title = $handle.attr('data-orig-title');
$handle.attr({'data-orig-title': '', title: title});
let title = $handle.attr("data-orig-title");
$handle.attr({ "data-orig-title": "", title: title });
$(this).popover('hide');
$(this).popover("hide");
}
}
});
@ -124,35 +127,40 @@ function removeAllHovercards(event, priorTo) {
function openHovercard(targetElement, contactUrl, timeNow) {
// store the title in a data attribute because Bootstrap
// popover destroys the title attribute.
let title = targetElement.attr('title');
targetElement.attr({'data-orig-title': title, title: ''});
let title = targetElement.attr("title");
targetElement.attr({ "data-orig-title": title, title: "" });
// get an additional data atribute if the card is active
targetElement.attr('data-hover-card-active', timeNow);
targetElement.attr("data-hover-card-active", timeNow);
// get the whole html content of the hover card and
// push it to the bootstrap popover
getHoverCardContent(contactUrl, function (data) {
if (data) {
targetElement.popover({
html: true,
placement: function () {
// Calculate the placement of the the hovercard (if top or bottom)
// The placement depence on the distance between window top and the element
// which triggers the hover-card
let get_position = $(targetElement).offset().top - $(window).scrollTop();
if (get_position < 270) {
return 'bottom';
}
return 'top';
},
trigger: 'manual',
template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
content: data,
container: 'body',
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
},
}).popover('show');
targetElement
.popover({
html: true,
placement: function () {
// Calculate the placement of the the hovercard (if top or bottom)
// The placement depence on the distance between window top and the element
// which triggers the hover-card
let get_position = $(targetElement).offset().top - $(window).scrollTop();
if (get_position < 270) {
return "bottom";
}
return "top";
},
trigger: "manual",
template:
'<div class="popover hovercard" data-card-created="' +
timeNow +
'"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
content: data,
container: "body",
sanitizeFn: function (content) {
return DOMPurify.sanitize(content);
},
})
.popover("show");
}
});
}
@ -176,7 +184,7 @@ function getHoverCardContent(contact_url, callback) {
}
$.ajax({
url: baseurl + '/contact/hovercard',
url: baseurl + "/contact/hovercard",
data: postdata,
success: function (data, textStatus, request) {
getHoverCardContent.cache[nurl] = data;

22
view/theme/frio/js/jot.js
View file

@ -6,33 +6,33 @@ var linkPreview;
/**
* Insert a link into friendica jot.
*
*
* @returns {void}
*/
function jotGetLink() {
var currentText = $("#profile-jot-text").val();
var noAttachment = '';
var noAttachment = "";
reply = prompt(aStr.linkurl);
if(reply && reply.length) {
if (reply && reply.length) {
// There should be only one attachment per post.
// So we need to remove the old one.
$('#jot-attachment-preview').empty();
$('#profile-rotator').show();
$("#jot-attachment-preview").empty();
$("#profile-rotator").show();
if (currentText.includes("[attachment") && currentText.includes("[/attachment]")) {
noAttachment = '&noAttachment=1';
noAttachment = "&noAttachment=1";
}
// We use the linkPreview library to have a preview
// of the attachments.
if (typeof linkPreview === 'object') {
if (typeof linkPreview === "object") {
linkPreview.crawlText(reply + noAttachment);
// Fallback: insert the attachment bbcode directly into the textarea
// if the attachment live preview isn't available
// Fallback: insert the attachment bbcode directly into the textarea
// if the attachment live preview isn't available
} else {
$.get('parse_url?binurl=' + bin2hex(reply) + noAttachment, function(data) {
$.get("parse_url?binurl=" + bin2hex(reply) + noAttachment, function (data) {
addeditortext(data);
$('#profile-rotator').hide();
$("#profile-rotator").hide();
});
}
autosize.update($("#profile-jot-text"));

32
view/theme/frio/js/mod_admin.js
View file

@ -2,42 +2,40 @@
/**
* Javascript for the admin module
*/
$(function() {
let $body = $('body');
$body.on('click', '.selectall', function() {
selectall($(this).data('selectAll'));
$(function () {
let $body = $("body");
$body.on("click", ".selectall", function () {
selectall($(this).data("selectAll"));
});
$body.on('click', '.selectnone', function() {
selectnone($(this).data('selectNone'));
$body.on("click", ".selectnone", function () {
selectnone($(this).data("selectNone"));
});
// Toggle checkbox status to all or none for all checkboxes of a specific
// css class.
$body.on('change', 'input[type=checkbox].selecttoggle', function() {
$body.on("change", "input[type=checkbox].selecttoggle", function () {
$this = $(this);
if ($this.prop('checked')) {
selectall($this.data('selectClass'));
$this.attr('title', $this.data('selectNone'));
if ($this.prop("checked")) {
selectall($this.data("selectClass"));
$this.attr("title", $this.data("selectNone"));
} else {
selectnone($this.data('selectClass'));
$this.attr('title', $this.data('selectAll'));
selectnone($this.data("selectClass"));
$this.attr("title", $this.data("selectAll"));
}
});
function selectall(cls) {
$('.' + cls).prop('checked', true);
$("." + cls).prop("checked", true);
return false;
}
function selectnone(cls) {
$('.' + cls).prop('checked', false);
$("." + cls).prop("checked", false);
return false;
}
});
// Users
function confirm_delete(msg, uname){
function confirm_delete(msg, uname) {
return confirm(msg.format(uname));
}

10
view/theme/frio/js/mod_contacts.js
View file

@ -2,22 +2,20 @@
var batchConfirmed = false;
$(document).ready(function() {
$(document).ready(function () {
// Initiale autosize for the textareas.
autosize($("textarea.text-autosize"));
// Replace the drop contact link of the photo menu
// with a confirmation modal.
$("body").on("click", ".contact-photo-menu a", function(e) {
var photoMenuLink = $(this).attr('href');
$("body").on("click", ".contact-photo-menu a", function (e) {
var photoMenuLink = $(this).attr("href");
if (typeof photoMenuLink !== "undefined" && photoMenuLink.indexOf("/drop?confirm=1") !== -1) {
e.preventDefault();
addToModal(photoMenuLink);
return false;
}
});
});
/**
@ -25,7 +23,7 @@ $(document).ready(function() {
*
* @param {string} name The name of the batch action.
* @param {string} value If it isn't empty the action will be posted.
*
*
* @return {void}
*/
function batch_submit_handler(name, value) {

4
view/theme/frio/js/mod_display.js
View file

@ -6,8 +6,8 @@
// Catch the GUID from the URL
var itemGuid = window.location.pathname.split("/").pop();
$(window).load(function(){
$(window).load(function () {
// Scroll to the Item by its GUID
scrollToItem('item-' + itemGuid);
scrollToItem("item-" + itemGuid);
});
// @license-end

213
view/theme/frio/js/mod_events.js
View file

@ -4,75 +4,86 @@
* Initialization of the fullCalendar and format the output.
*/
$(document).ready(function() {
$(document).ready(function () {
// start the fullCalendar
$('#events-calendar').fullCalendar({
$("#events-calendar").fullCalendar({
firstDay: aStr.firstDay,
monthNames: aStr['monthNames'],
monthNamesShort: aStr['monthNamesShort'],
dayNames: aStr['dayNames'],
dayNamesShort: aStr['dayNamesShort'],
monthNames: aStr["monthNames"],
monthNamesShort: aStr["monthNamesShort"],
dayNames: aStr["dayNames"],
dayNamesShort: aStr["dayNamesShort"],
allDayText: aStr.allday,
noEventsMessage: aStr.noevent,
buttonText: {
today: aStr.today,
month: aStr.month,
week: aStr.week,
day: aStr.day
day: aStr.day,
},
events: baseurl + moduleUrl + '/json/',
events: baseurl + moduleUrl + "/json/",
header: {
left: '',
// center: 'title',
right: ''
},
timeFormat: 'H:mm',
eventClick: function(calEvent, jsEvent, view) {
left: "",
// center: 'title',
right: "",
},
timeFormat: "H:mm",
eventClick: function (calEvent, jsEvent, view) {
showEvent(calEvent.id);
},
loading: function(isLoading, view) {
if(!isLoading) {
$('td.fc-day').dblclick(function() { addToModal('/events/new?start='+$(this).data('date')); });
loading: function (isLoading, view) {
if (!isLoading) {
$("td.fc-day").dblclick(function () {
addToModal("/events/new?start=" + $(this).data("date"));
});
}
},
defaultView: 'month',
defaultView: "month",
aspectRatio: 1,
eventRender: function(event, element, view) {
eventRender: function (event, element, view) {
//console.log(view.name);
switch(view.name){
switch (view.name) {
case "month":
element.find(".fc-title").html(
"<span class='item-desc'>{2}</span>".format(
event.item['author-avatar'],
event.item['author-name'],
event.title,
event.item.desc,
event.item.location
));
element
.find(".fc-title")
.html(
"<span class='item-desc'>{2}</span>".format(
event.item["author-avatar"],
event.item["author-name"],
event.title,
event.item.desc,
event.item.location,
),
);
break;
case "agendaWeek":
if (event.item['author-name'] == null) return;
element.find(".fc-title").html(
"<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item['author-avatar'],
event.item['author-name'],
event.item.desc,
htmlToText(event.item.location)
));
break;
if (event.item["author-name"] == null) return;
element
.find(".fc-title")
.html(
"<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item["author-avatar"],
event.item["author-name"],
event.item.desc,
htmlToText(event.item.location),
),
);
break;
case "agendaDay":
if (event.item['author-name'] == null) return;
element.find(".fc-title").html(
"<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item['author-avatar'],
event.item['author-name'],
event.item.desc,
htmlToText(event.item.location)
));
if (event.item["author-name"] == null) return;
element
.find(".fc-title")
.html(
"<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item["author-avatar"],
event.item["author-name"],
event.item.desc,
htmlToText(event.item.location),
),
);
break;
case "listMonth":
element.find(".fc-list-item-title").html(formatListViewEvent(event));
break;
break;
}
},
eventAfterRender: function (event, element) {
@ -82,54 +93,53 @@ $(document).ready(function() {
html: true,
trigger: "hover",
placement: "auto",
template: '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
template:
'<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
return DOMPurify.sanitize(content);
},
});
}
})
},
});
// center on date
var args=location.href.replace(baseurl,"").split("/");
var args = location.href.replace(baseurl, "").split("/");
if (modparams == 2) {
if (args.length>=5) {
$("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1);
if (args.length >= 5) {
$("#events-calendar").fullCalendar("gotoDate", args[3], args[4] - 1);
}
} else {
if (args.length>=4) {
$("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
if (args.length >= 4) {
$("#events-calendar").fullCalendar("gotoDate", args[2], args[3] - 1);
}
}
// echo the title
var view = $('#events-calendar').fullCalendar('getView');
$('#fc-title').text(view.title);
var view = $("#events-calendar").fullCalendar("getView");
$("#fc-title").text(view.title);
// show event popup
var hash = location.hash.split("-")
if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
var hash = location.hash.split("-");
if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
});
// loads the event into a modal
function showEvent(eventid) {
addToModal(baseurl + moduleUrl + '/?id=' + eventid);
addToModal(baseurl + moduleUrl + "/?id=" + eventid);
}
function changeView(action, viewName) {
$('#events-calendar').fullCalendar(action, viewName);
var view = $('#events-calendar').fullCalendar('getView');
$('#fc-title').text(view.title);
$("#events-calendar").fullCalendar(action, viewName);
var view = $("#events-calendar").fullCalendar("getView");
$("#fc-title").text(view.title);
}
// The template for the bootstrap popover for displaying the event title and
// author (it's the nearly the same template we use in frio for the contact
// hover cards. So be careful when changing the css)
function eventHoverBodyTemplate() {
var template = '\
var template =
'\
<div class="event-card-basic-content media">\
<div class="event-card-details">\
<div class="event-card-header">\
@ -154,52 +164,53 @@ function eventHoverBodyTemplate() {
// The template for presenting the event location in the event hover-card
function eventHoverLocationTemplate() {
var template = '<span role="presentation" aria-hidden="true"> · </span>\
var template =
'<span role="presentation" aria-hidden="true"> · </span>\
<span class="event-card-location"> {0}</span></div>';
return template;
}
function eventHoverProfileNameTemplate() {
var template = '\
var template =
'\
<div class="event-card-profile-name profile-entry-name">\
<a href="{0}" class="userinfo">{1}</a>\
</div>';
return template;
}
// transform the event data to html so we can use it in the event hover-card
// transform the event data to html so we can use it in the event hover-card
function eventHoverHtmlContent(event) {
var eventLocation = '';
var eventProfileName = '';
var eventLocation = "";
var eventProfileName = "";
// Get the Browser language
var locale = window.navigator.userLanguage || window.navigator.language;
var data = '';
var data = "";
// Use the browser language for date formatting
moment.locale(locale);
// format dates to different styles
var startDate = moment(event.item.start).format('dd HH:mm');
var endDate = moment(event.item.finsih).format('dd HH:mm');
var monthShort = moment(event.item.start).format('MMM');
var dayNumberStart = moment(event.item.start).format('DD');
var dayNumberEnd = moment(event.item.finish).format('DD');
var startTime = moment(event.item.start).format('HH:mm');
var endTime = moment(event.item.finish).format('HH:mm');
var startDate = moment(event.item.start).format("dd HH:mm");
var endDate = moment(event.item.finsih).format("dd HH:mm");
var monthShort = moment(event.item.start).format("MMM");
var dayNumberStart = moment(event.item.start).format("DD");
var dayNumberEnd = moment(event.item.finish).format("DD");
var startTime = moment(event.item.start).format("HH:mm");
var endTime = moment(event.item.finish).format("HH:mm");
var monthNumber;
var formattedDate = startDate;
// We only need the to format the end date if the event does have
// a finish date.
// a finish date.
if (event.item.nofinish == 0) {
formattedDate = startDate + ' - ' + endTime;
formattedDate = startDate + " - " + endTime;
// use a different Format (15. Feb - 18. Feb) if the events end date
// is not the start date
if ( dayNumberStart != dayNumberEnd) {
formattedDate = moment(event.item.start).format('Do MMM') +
' - ' +
moment(event.item.finish).format('Do MMM');
if (dayNumberStart != dayNumberEnd) {
formattedDate =
moment(event.item.start).format("Do MMM") + " - " + moment(event.item.finish).format("Do MMM");
}
}
@ -213,32 +224,27 @@ function eventHoverHtmlContent(event) {
var eventLocationTemplate = eventHoverLocationTemplate();
// Format the event location data according to the the event location
// template
eventLocation = eventLocationTemplate.format(
eventLocationText
);
eventLocation = eventLocationTemplate.format(eventLocationText);
}
// Get only template data if there exists a profile name
if (event.item['author-name']) {
if (event.item["author-name"]) {
// Get the template
var eventProfileNameTemplate = eventHoverProfileNameTemplate();
// Insert the data into the template
eventProfileName = eventProfileNameTemplate.format(
event.item['author-link'],
event.item['author-name']
);
eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]);
}
// Format the event data according to the event hover template
var formatted = data.format(
event.item['author-avatar'], // this isn't used at the present time
eventProfileName,
event.title,
eventLocation,
formattedDate,
monthShort.replace('.', ''), // Get rid of possible dots in the string
dayNumberStart
);
event.item["author-avatar"], // this isn't used at the present time
eventProfileName,
event.title,
eventLocation,
formattedDate,
monthShort.replace(".", ""), // Get rid of possible dots in the string
dayNumberStart,
);
return formatted;
}
@ -246,7 +252,8 @@ function eventHoverHtmlContent(event) {
// transform the the list view event element into formatted html
function formatListViewEvent(event) {
// The basic template for list view
var template = '<td class="fc-list-item-title fc-widget-content">\
var template =
'<td class="fc-list-item-title fc-widget-content">\
<hr class="seperator"></hr>\
<div class="event-card">\
<div class="popover-content hovercard-content">{0}</div>\

41
view/theme/frio/js/mod_group.js
View file

@ -5,10 +5,9 @@
* The javascript for the group module
*/
$(document).ready(function() {
$(document).ready(function () {
// Add an event listeners on buttons for switching the contact list view
$("body").on("click", ".group-list-switcher", function() {
$("body").on("click", ".group-list-switcher", function () {
switchGroupViewMode(this);
});
});
@ -28,16 +27,16 @@ function groupChangeMember(gid, cid, sec_token) {
$(".tooltip").tooltip("hide");
$("body").css("cursor", "wait");
$.get('group/' + gid + '/' + cid + "?t=" + sec_token, function(data) {
// Insert the new group member list
$("#group-update-wrapper").html(data);
$.get("group/" + gid + "/" + cid + "?t=" + sec_token, function (data) {
// Insert the new group member list
$("#group-update-wrapper").html(data);
// Apply the actual gropu list view mode to the new
// group list html
var activeMode = $(".group-list-switcher.active");
switchGroupViewMode(activeMode[0]);
// Apply the actual gropu list view mode to the new
// group list html
var activeMode = $(".group-list-switcher.active");
switchGroupViewMode(activeMode[0]);
$("body").css("cursor", "auto");
$("body").css("cursor", "auto");
});
}
@ -48,17 +47,17 @@ function groupChangeMember(gid, cid, sec_token) {
* @returns {undefined}
*/
function switchGroupViewMode(elm) {
// Remove the active class from group list switcher buttons
$(".group-list-switcher").removeClass("active");
// And add it to the active button element
$(elm).addClass("active");
// Remove the active class from group list switcher buttons
$(".group-list-switcher").removeClass("active");
// And add it to the active button element
$(elm).addClass("active");
// Add or remove the css classes for the group list with regard to the active view mode
if (elm.id === "group-list-small") {
$("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12");
} else {
$("#contact-group-list > li").removeClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12");
}
// Add or remove the css classes for the group list with regard to the active view mode
if (elm.id === "group-list-small") {
$("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12");
} else {
$("#contact-group-list > li").removeClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12");
}
}
/**

8
view/theme/frio/js/mod_notifications.js
View file

@ -7,19 +7,19 @@
// Catch the intro ID from the URL
var introID = location.pathname.split("/").pop();
$(document).ready(function(){
$(document).ready(function () {
// Since only the DIV's inside the notification-list are marked
// with the class "unseen", we need some js to transfer this class
// to the parent li list-elements.
if($(".notif-item").hasClass("unseen")) {
if ($(".notif-item").hasClass("unseen")) {
$(".notif-item.unseen").parent("li").addClass("unseen");
}
});
$(window).load(function(){
$(window).load(function () {
// Scroll to the intro by its intro ID.
if (isIntroID()) {
scrollToItem('intro-' + introID);
scrollToItem("intro-" + introID);
}
});

44
view/theme/frio/js/mod_photos.js
View file

@ -1,32 +1,34 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
$(document).ready(function() {
$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
var selstr;
$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
selstr = $(this).html();
$('#jot-perms-icon').removeClass('unlock').addClass('lock');
$('#jot-public').hide();
});
if(selstr == null) {
$('#jot-perms-icon').removeClass('lock').addClass('unlock');
$('#jot-public').show();
}
}).trigger('change');
$(document).ready(function () {
$("#contact_allow, #contact_deny, #group_allow, #group_deny")
.change(function () {
var selstr;
$(
"#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
).each(function () {
selstr = $(this).html();
$("#jot-perms-icon").removeClass("unlock").addClass("lock");
$("#jot-public").hide();
});
if (selstr == null) {
$("#jot-perms-icon").removeClass("lock").addClass("unlock");
$("#jot-public").show();
}
})
.trigger("change");
// Click event listener for the album edit link/button.
$("body").on('click', '#album-edit-link', function() {
$("body").on("click", "#album-edit-link", function () {
var modalUrl = $(this).attr("data-modal-url");
if (typeof modalUrl !== "undefined") {
addToModal(modalUrl, 'photo-album-edit-wrapper');
addToModal(modalUrl, "photo-album-edit-wrapper");
}
});
// Click event listener for the album drop link/button.
$("body").on('click', '#album-drop-link', function() {
$("body").on("click", "#album-drop-link", function () {
var modalUrl = $(this).attr("data-modal-url");
if (typeof modalUrl !== "undefined") {
@ -35,7 +37,7 @@ $(document).ready(function() {
});
});
$(window).load(function() {
$(window).load(function () {
// Get picture dimensions
var pheight = $("#photo-photo img").height();
var pwidth = $("#photo-photo img").width();
@ -43,8 +45,8 @@ $(window).load(function() {
// Append the diminsons of the picture to the css of the photo-photo div
// we do this to make it possible to have overlay navigation buttons for the photo
$("#photo-photo").css({
"width": pwidth,
"height": pheight
width: pwidth,
height: pheight,
});
});
// @license-end

199
view/theme/frio/js/modal.js
View file

@ -2,13 +2,13 @@
/**
* Contains functions for bootstrap modal handling.
*/
$(document).ready(function(){
$(document).ready(function () {
// Clear bs modal on close.
// We need this to prevent that the modal displays old content.
$('body, footer').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
$("body, footer").on("hidden.bs.modal", ".modal", function () {
$(this).removeData("bs.modal");
$("#modal-title").empty();
$('#modal-body').empty();
$("#modal-body").empty();
// Remove the file browser from jot (else we would have problems
// with AjaxUpload.
$(".fbrowser").remove();
@ -18,20 +18,20 @@ $(document).ready(function(){
// Clear bs modal on close.
// We need this to prevent that the modal displays old content.
$('body').on('hidden.bs.modal', '#jot-modal', function () {
$("body").on("hidden.bs.modal", "#jot-modal", function () {
// Restore cached jot at its hidden position ("#jot-content").
$("#jot-content").append(jotcache);
// Clear the jotcache.
jotcache = '';
jotcache = "";
// Destroy the attachment linkPreviw for Jot.
if (typeof linkPreview === 'object') {
if (typeof linkPreview === "object") {
linkPreview.destroy();
}
});
// Add Colorbox for viewing Network page images.
//var cBoxClasses = new Array();
$("body").on("click", ".wall-item-body a img", function(){
$("body").on("click", ".wall-item-body a img", function () {
var aElem = $(this).parent();
var imgHref = aElem.attr("href");
@ -39,51 +39,50 @@ $(document).ready(function(){
// We'll try to do this by looking for links of the form
// .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
// that that will be unique enough.
if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
if (imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
// Add a unique class to all the images of a certain post, to allow scrolling through
var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
$(this).addClass(cBoxClass);
// if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
// cBoxClasses.push(cBoxClass);
// }
// if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
// cBoxClasses.push(cBoxClass);
// }
aElem.colorbox({
maxHeight: '90%',
maxHeight: "90%",
photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo.
rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0].
rel: cBoxClass, //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0].
});
}
});
// Navbar login.
$("body").on("click", "#nav-login", function(e){
$("body").on("click", "#nav-login", function (e) {
e.preventDefault();
Dialog.show(this.href, this.dataset.originalTitle || this.title);
});
// Jot nav menu..
$("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function(e){
$("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function (e) {
e.preventDefault();
toggleJotNav(this);
});
// Bookmarklet page needs an jot modal which appears automatically.
if(window.location.pathname.indexOf("/bookmarklet") >=0 && $("#jot-modal").length){
if (window.location.pathname.indexOf("/bookmarklet") >= 0 && $("#jot-modal").length) {
jotShow();
}
// Open filebrowser for elements with the class "image-select"
// The following part handles the filebrowser for field_fileinput.tpl.
$("body").on("click", ".image-select", function(){
$("body").on("click", ".image-select", function () {
// Set a extra attribute to mark the clicked button.
this.setAttribute("image-input", "select");
Dialog.doImageBrowser("input");
});
// Insert filebrowser images into the input field (field_fileinput.tpl).
$("body").on("fbrowser.image.input", function(e, filename, embedcode, id, img) {
$("body").on("fbrowser.image.input", function (e, filename, embedcode, id, img) {
// Select the clicked button by it's attribute.
var elm = $("[image-input='select']");
// Select the input field which belongs to this button.
@ -92,15 +91,14 @@ $(document).ready(function(){
elm.removeAttr("image-input");
// Insert the link from the image into the input field.
input.val(img);
});
// Generic delegated event to open an anchor URL in a modal.
// Used in the hovercard.
document.getElementsByTagName('body')[0].addEventListener('click', function(e) {
document.getElementsByTagName("body")[0].addEventListener("click", function (e) {
var target = e.target;
while (target) {
if (target.matches && target.matches('a.add-to-modal')) {
if (target.matches && target.matches("a.add-to-modal")) {
addToModal(target.href);
e.preventDefault();
return false;
@ -112,55 +110,53 @@ $(document).ready(function(){
});
// Overwrite Dialog.show from main js to load the filebrowser into a bs modal.
Dialog.show = function(url, title) {
if (typeof(title) === 'undefined') {
Dialog.show = function (url, title) {
if (typeof title === "undefined") {
title = "";
}
var modal = $('#modal').modal();
var modal = $("#modal").modal();
modal.find("#modal-header h4").html(title);
modal
.find('#modal-body')
.load(url, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.show();
modal.find("#modal-body").load(url, function (responseText, textStatus) {
if (textStatus === "success" || textStatus === "notmodified") {
modal.show();
$(function() {Dialog._load(url);});
}
});
$(function () {
Dialog._load(url);
});
}
});
};
// Overwrite the function _get_url from main.js.
Dialog._get_url = function(type, name, id) {
Dialog._get_url = function (type, name, id) {
var hash = name;
if (id !== undefined) hash = hash + "-" + id;
return "fbrowser/"+type+"/?mode=none&theme=frio#"+hash;
return "fbrowser/" + type + "/?mode=none&theme=frio#" + hash;
};
// Does load the filebrowser into the jot modal.
Dialog.showJot = function() {
Dialog.showJot = function () {
var type = "image";
var name = "main";
var url = Dialog._get_url(type, name);
if(($(".modal-body #jot-fbrowser-wrapper .fbrowser").length) < 1 ) {
if ($(".modal-body #jot-fbrowser-wrapper .fbrowser").length < 1) {
// Load new content to fbrowser window.
$("#jot-fbrowser-wrapper").load(url,function(responseText, textStatus){
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
$(function() {Dialog._load(url);});
$("#jot-fbrowser-wrapper").load(url, function (responseText, textStatus) {
if (textStatus === "success" || textStatus === "notmodified") {
$(function () {
Dialog._load(url);
});
}
});
}
};
// Init the filebrowser after page load.
Dialog._load = function(url) {
Dialog._load = function (url) {
// Get nickname & filebrowser type from the modal content.
let filebrowser = document.getElementById('filebrowser');
let filebrowser = document.getElementById("filebrowser");
// Try to fetch the hash form the url.
let match = url.match(/fbrowser\/[a-z]+\/.*(#.*)/);
@ -170,14 +166,14 @@ Dialog._load = function(url) {
// Initialize the filebrowser.
loadScript("view/js/ajaxupload.js");
loadScript("view/theme/frio/js/filebrowser.js", function() {
loadScript("view/theme/frio/js/filebrowser.js", function () {
FileBrowser.init(filebrowser.dataset.nickname, filebrowser.dataset.type, match[1]);
});
};
/**
* Add first element with the class "heading" as modal title
*
*
* Note: this should be really done in the template
* and is the solution where we havent done it until this
* moment or where it isn't possible because of design
@ -195,22 +191,21 @@ function loadModalTitle() {
title = $("#modal-body .heading").first().html();
// for event modals we need some speacial handling
if($("#modal-body .event-wrapper .event-summary").length) {
if ($("#modal-body .event-wrapper .event-summary").length) {
title = '<i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;';
var eventsum = $("#modal-body .event-wrapper .event-summary").html();
title = title + eventsum;
}
// And append it to modal title.
if (title!=="") {
if (title !== "") {
$("#modal-title").append(title);
}
}
/**
* This function loads html content from a friendica page into a modal.
*
*
* @param {string} url The url with html content.
* @param {string} id The ID of a html element (can be undefined).
* @returns {void}
@ -218,42 +213,35 @@ function loadModalTitle() {
function addToModal(url, id) {
var char = qOrAmp(url);
url = url + char + 'mode=none';
var modal = $('#modal').modal();
url = url + char + "mode=none";
var modal = $("#modal").modal();
// Only search for an element if we have an ID.
if (typeof id !== "undefined") {
url = url + " div#" + id;
}
modal
.find('#modal-body')
.load(url, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.show();
modal.find("#modal-body").load(url, function (responseText, textStatus) {
if (textStatus === "success" || textStatus === "notmodified") {
modal.show();
//Get first element with the class "heading"
//and use it as title.
loadModalTitle();
//Get first element with the class "heading"
//and use it as title.
loadModalTitle();
// We need to initialize autosize again for new
// modal conent.
autosize($('.modal .text-autosize'));
}
});
// We need to initialize autosize again for new
// modal conent.
autosize($(".modal .text-autosize"));
}
});
}
// Add an element (by its id) to a bootstrap modal.
function addElmToModal(id) {
var elm = $(id).html();
var modal = $('#modal').modal();
var modal = $("#modal").modal();
modal
.find('#modal-body')
.append(elm)
.modal.show;
modal.find("#modal-body").append(elm).modal.show;
loadModalTitle();
}
@ -269,12 +257,12 @@ function editpost(url) {
// Test if in the url path containing "events/event". If the path containing this
// expression then we will call the addToModal function and exit this function at
// this point.
if (splitURL.path.indexOf('events/event') > -1) {
if (splitURL.path.indexOf("events/event") > -1) {
addToModal(splitURL.path);
return;
}
var modal = $('#jot-modal').modal();
var modal = $("#jot-modal").modal();
url = url + " #jot-sections";
$(".jot-nav .jot-perms-lnk").parent("li").addClass("hidden");
@ -293,34 +281,29 @@ function editpost(url) {
jotreset();
modal
.find('#jot-modal-content')
.load(url, function (responseText, textStatus) {
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
// get the item type and hide the input for title and category if it isn't needed.
var type = $(responseText).find("#profile-jot-form input[name='type']").val();
if(type === "wall-comment" || type === "remote-comment")
{
// Hide title and category input fields because we don't.
$("#profile-jot-form #jot-title-wrap").hide();
$("#profile-jot-form #jot-category-wrap").hide();
}
modal.show();
$("#jot-popup").show();
linkPreview = $('#profile-jot-text').linkPreview();
modal.find("#jot-modal-content").load(url, function (responseText, textStatus) {
if (textStatus === "success" || textStatus === "notmodified") {
// get the item type and hide the input for title and category if it isn't needed.
var type = $(responseText).find("#profile-jot-form input[name='type']").val();
if (type === "wall-comment" || type === "remote-comment") {
// Hide title and category input fields because we don't.
$("#profile-jot-form #jot-title-wrap").hide();
$("#profile-jot-form #jot-category-wrap").hide();
}
});
modal.show();
$("#jot-popup").show();
linkPreview = $("#profile-jot-text").linkPreview();
}
});
}
// Remove content from the jot modal.
function jotreset() {
// Clear bs modal on close.
// We need this to prevent that the modal displays old content.
$('body').on('hidden.bs.modal', '#jot-modal.edit-jot', function () {
$(this).removeData('bs.modal');
$("body").on("hidden.bs.modal", "#jot-modal.edit-jot", function () {
$(this).removeData("bs.modal");
$(".jot-nav .jot-perms-lnk").parent("li").removeClass("hidden");
$("#profile-jot-form #jot-title-wrap").show();
$("#profile-jot-form #jot-category-wrap").show();
@ -332,7 +315,7 @@ function jotreset() {
}
// Give the active "jot-nav" list element the class "active".
function toggleJotNav (elm) {
function toggleJotNav(elm) {
// 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");
@ -344,8 +327,10 @@ function toggleJotNav (elm) {
// Minimize all tab content wrapper and activate only the selected
// tab panel.
$('#profile-jot-form > [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true");
$('#' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false");
$("#profile-jot-form > [role=tabpanel]").addClass("minimize").attr("aria-hidden", "true");
$("#" + tabpanel)
.removeClass("minimize")
.attr("aria-hidden", "false");
// Set the aria-selected states
$("#jot-modal .modal-header .nav-tabs .jot-nav-lnk").attr("aria-selected", "false");
@ -355,9 +340,9 @@ function toggleJotNav (elm) {
if (tabpanel === "jot-preview-content") {
preview_post();
// Make Share button visivle in preview
$('#jot-preview-share').removeClass("minimize").attr("aria-hidden" ,"false");
$("#jot-preview-share").removeClass("minimize").attr("aria-hidden", "false");
} else if (tabpanel === "jot-fbrowser-wrapper") {
$(function() {
$(function () {
Dialog.showJot();
});
}
@ -377,7 +362,7 @@ function openWallMessage(url) {
// If the host isn't the same we can't load it in a modal.
// So we will go to to the url directly.
if( ("host" in parts) && (parts.host !== window.location.host)) {
if ("host" in parts && parts.host !== window.location.host) {
window.location.href = url;
} else {
// Otherwise load the wall message into a modal.
@ -389,12 +374,12 @@ function openWallMessage(url) {
/// @todo Rename this function because it can be used for more than events.
function eventEdit(url) {
var char = qOrAmp(url);
url = url + char + 'mode=none';
url = url + char + "mode=none";
$.get(url, function(data) {
$.get(url, function (data) {
$("#modal-body").empty();
$("#modal-body").append(data);
}).done(function() {
}).done(function () {
loadModalTitle();
});
}

77
view/theme/frio/js/textedit.js
View file

@ -4,8 +4,8 @@
*/
// Lifted from https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
jQuery.fn.putCursorAtEnd = function() {
return this.each(function() {
jQuery.fn.putCursorAtEnd = function () {
return this.each(function () {
// Cache references
var $el = $(this),
el = this;
@ -21,7 +21,7 @@ jQuery.fn.putCursorAtEnd = function() {
var len = $el.val().length * 2;
// Timeout seems to be required for Blink
setTimeout(function() {
setTimeout(function () {
el.setSelectionRange(len, len);
}, 1);
} else {
@ -38,9 +38,9 @@ jQuery.fn.putCursorAtEnd = function() {
function commentGetLink(id, prompttext) {
reply = prompt(prompttext);
if(reply && reply.length) {
if (reply && reply.length) {
reply = bin2hex(reply);
$.get('parse_url?noAttachment=1&binurl=' + reply, function(data) {
$.get("parse_url?noAttachment=1&binurl=" + reply, function (data) {
addCommentText(data, id);
});
}
@ -64,7 +64,7 @@ function commentLinkDrop(event, id) {
event.preventDefault();
if (reply && reply.length) {
reply = bin2hex(reply);
$.get('parse_url?noAttachment=1&binurl=' + reply, function(data) {
$.get("parse_url?noAttachment=1&binurl=" + reply, function (data) {
addCommentText(data, id);
});
}
@ -86,12 +86,12 @@ function insertFormattingToPost(BBCode) {
}
function showThread(id) {
$("#collapsed-comments-" + id).show()
$("#collapsed-comments-" + id + " .collapsed-comments").show()
$("#collapsed-comments-" + id).show();
$("#collapsed-comments-" + id + " .collapsed-comments").show();
}
function hideThread(id) {
$("#collapsed-comments-" + id).hide()
$("#collapsed-comments-" + id + " .collapsed-comments").hide()
$("#collapsed-comments-" + id).hide();
$("#collapsed-comments-" + id + " .collapsed-comments").hide();
}
function cmtBbOpen(id) {
@ -101,8 +101,7 @@ function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide();
}
function commentExpand(id)
{
function commentExpand(id) {
$("#mod-cmnt-wrap-" + id).show();
closeMenu("comment-fake-form-" + id);
openMenu("item-comments-" + id);
@ -114,9 +113,8 @@ function commentExpand(id)
return true;
}
function commentClose(obj, id)
{
if (obj.value === '' || obj.value === obj.dataset.default) {
function commentClose(obj, id) {
if (obj.value === "" || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id)
.removeClass("comment-edit-text-full")
.addClass("comment-edit-text-empty");
@ -129,8 +127,8 @@ function commentClose(obj, id)
}
function showHideCommentBox(id) {
var $el = $('#comment-edit-form-' + id);
if ($el.is(':visible')) {
var $el = $("#comment-edit-form-" + id);
if ($el.is(":visible")) {
$el.hide();
} else {
$el.show();
@ -142,19 +140,21 @@ function commentOpenUI(obj, id) {
openMenu("item-comments-" + id);
$("#comment-edit-text-" + id)
.putCursorAtEnd()
.addClass("comment-edit-text-full").removeClass("comment-edit-text-empty")
.attr('tabindex', '9'); // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
$("#comment-edit-submit-" + id).attr('tabindex', '10'); // The submit button gets tabindex + 1
.addClass("comment-edit-text-full")
.removeClass("comment-edit-text-empty")
.attr("tabindex", "9"); // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
$("#comment-edit-submit-" + id).attr("tabindex", "10"); // The submit button gets tabindex + 1
// initialize autosize for this comment
autosize($("#comment-edit-text-" + id + ".text-autosize"));
}
function commentCloseUI(obj, id) {
if (obj.value === '' || obj.value === obj.dataset.default) {
if (obj.value === "" || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id)
.removeClass("comment-edit-text-full").addClass("comment-edit-text-empty")
.removeAttr('tabindex');
$("#comment-edit-submit-" + id).removeAttr('tabindex');
.removeClass("comment-edit-text-full")
.addClass("comment-edit-text-empty")
.removeAttr("tabindex");
$("#comment-edit-submit-" + id).removeAttr("tabindex");
openMenu("comment-fake-form-" + id);
closeMenu("item-comments-" + id);
// destroy the automatic textarea resizing
@ -163,7 +163,7 @@ function commentCloseUI(obj, id) {
}
function jotTextOpenUI(obj) {
if (obj.value === '' || obj.value === obj.dataset.default) {
if (obj.value === "" || obj.value === obj.dataset.default) {
var $el = $(".modal-body #profile-jot-text");
$el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
// initiale autosize for the jot
@ -172,7 +172,7 @@ function jotTextOpenUI(obj) {
}
function jotTextCloseUI(obj) {
if (obj.value === '' || obj.value === obj.dataset.default) {
if (obj.value === "" || obj.value === obj.dataset.default) {
var $el = $(".modal-body #profile-jot-text");
$el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty");
// destroy the automatic textarea resizing
@ -181,7 +181,7 @@ function jotTextCloseUI(obj) {
}
function commentOpen(obj, id) {
if (obj.value === '' || obj.value === obj.dataset.default) {
if (obj.value === "" || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id)
.putCursorAtEnd()
.addClass("comment-edit-text-full")
@ -210,19 +210,22 @@ function dropItem(url, elementId) {
var confirm = confirmDelete();
if (confirm) {
$('body').css('cursor', 'wait');
$("body").css("cursor", "wait");
var $el = $(document.getElementById(elementId));
$el.fadeTo('fast', 0.33, function () {
$.get(url).then(function() {
$el.remove();
}).fail(function() {
// @todo Show related error message
$el.show();
}).always(function() {
$('body').css('cursor', 'auto');
});
$el.fadeTo("fast", 0.33, function () {
$.get(url)
.then(function () {
$el.remove();
})
.fail(function () {
// @todo Show related error message
$el.show();
})
.always(function () {
$("body").css("cursor", "auto");
});
});
}
}

502
view/theme/frio/js/theme.js
View file

@ -1,10 +1,10 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
var jotcache = ''; //The jot cache. We use it as cache to restore old/original jot content
var jotcache = ""; //The jot cache. We use it as cache to restore old/original jot content
$(document).ready(function(){
$(document).ready(function () {
// Destroy unused perfect scrollbar in aside element
$('aside').perfectScrollbar('destroy');
$("aside").perfectScrollbar("destroy");
//fade in/out based on scrollTop value
var scrollStart;
@ -27,24 +27,27 @@ $(document).ready(function(){
// scroll body to 0px on click
$("#back-to-top").click(function () {
$("body,html").animate({
scrollTop: 0
}, 400);
$("body,html").animate(
{
scrollTop: 0,
},
400,
);
return false;
});
// add the class "selected" to group widges li if li > a does have the class group-selected
if( $("#sidebar-group-ul li a").hasClass("group-selected")) {
if ($("#sidebar-group-ul li a").hasClass("group-selected")) {
$("#sidebar-group-ul li a.group-selected").parent("li").addClass("selected");
}
// add the class "selected" to forums widges li if li > a does have the class forum-selected
if( $("#forumlist-sidbar-ul li a").hasClass("forum-selected")) {
if ($("#forumlist-sidbar-ul li a").hasClass("forum-selected")) {
$("#forumlist-sidbar-ul li a.forum-selected").parent("li").addClass("selected");
}
// add the class "active" to tabmenuli if li > a does have the class active
if( $("#tabmenu ul li a").hasClass("active")) {
if ($("#tabmenu ul li a").hasClass("active")) {
$("#tabmenu ul li a.active").parent("li").addClass("active");
}
@ -62,19 +65,19 @@ $(document).ready(function(){
// to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the
// correct url. The only way which comes to my mind was to do this with js
// So we apply the correct url (with the link to the id of the mask) after the page is loaded.
if($("#logo-img").length ) {
if ($("#logo-img").length) {
var pageurl = "url('" + window.location.href + "#logo-mask')";
$("#logo-img").css({"mask": pageurl});
$("#logo-img").css({ mask: pageurl });
}
// make responsive tabmenu with flexmenu.js
// the menupoints which doesn't fit in the second nav bar will moved to a
// dropdown menu. Look at common_tabs.tpl
$("ul.tabs.flex-nav").flexMenu({
'cutoff': 2,
'popupClass': "dropdown-menu pull-right",
'popupAbsolute': false,
'target': ".flex-target"
cutoff: 2,
popupClass: "dropdown-menu pull-right",
popupAbsolute: false,
target: ".flex-target",
});
// add Jot button to the second navbar
@ -84,33 +87,33 @@ $(document).ready(function(){
if ($("#jot-popup").is(":hidden")) {
$jotButton.hide();
}
$jotButton.on('click', function (e) {
$jotButton.on("click", function (e) {
e.preventDefault();
jotShow();
});
}
let $body = $('body');
let $body = $("body");
// show bulk deletion button at network page if checkbox is checked
$body.change("input.item-select", function(){
$body.change("input.item-select", function () {
var checked = false;
// We need to get all checked items, so it would close the delete button
// if we uncheck one item and others are still checked.
// So return checked = true if there is any checked item
$('input.item-select').each( function() {
if($(this).is(':checked')) {
$("input.item-select").each(function () {
if ($(this).is(":checked")) {
checked = true;
return false;
}
});
if(checked) {
if (checked) {
$("#item-delete-selected").fadeTo(400, 1);
$("#item-delete-selected").show();
} else {
$("#item-delete-selected").fadeTo(400, 0, function(){
$("#item-delete-selected").fadeTo(400, 0, function () {
$("#item-delete-selected").hide();
});
}
@ -119,31 +122,31 @@ $(document).ready(function(){
// initialize the bootstrap tooltips
$body.tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body',
container: "body",
animation: true,
html: true,
placement: 'auto',
trigger: 'hover',
placement: "auto",
trigger: "hover",
delay: {
show: 500,
hide: 100
hide: 100,
},
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
return DOMPurify.sanitize(content);
},
});
// initialize the bootstrap-select
$('.selectpicker').selectpicker();
$(".selectpicker").selectpicker();
// add search-heading to the second navbar
if( $(".search-heading").length) {
if ($(".search-heading").length) {
$(".search-heading").appendTo("#topbar-second > .container > #tabmenu");
}
// add search results heading to the second navbar
// and insert the search value to the top nav search input
if( $(".search-content-wrapper").length ) {
if ($(".search-content-wrapper").length) {
// get the text of the heading (we catch the plain text because we don't
// want to have a h4 heading in the navbar
var searchText = $(".section-title-wrapper > h2").html();
@ -151,11 +154,11 @@ $(document).ready(function(){
// temporary workaround to avoid 'undefined' being displayed (issue #9789)
// https://github.com/friendica/friendica/issues/9789
// TODO: find a way to localize this string
if(typeof searchText === "undefined") {
if (typeof searchText === "undefined") {
searchText = "No results";
}
// insert the plain text in a <h4> heading and give it a class
var newText = '<h4 class="search-heading">'+searchText+'</h4>';
var newText = '<h4 class="search-heading">' + searchText + "</h4>";
// append the new heading to the navbar
$("#topbar-second > .container > #tabmenu").append(newText);
@ -164,19 +167,19 @@ $(document).ready(function(){
var searchValue = $("#search-wrapper .form-group-search input").val();
// if the orignal search value isn't available use the location path as value
if( typeof searchValue === "undefined") {
if (typeof searchValue === "undefined") {
// get the location path
var urlPath = window.location.search
var urlPath = window.location.search;
// and split it up in its parts
var splitPath = urlPath.split(/(\?search?=)(.*$)/);
if(typeof splitPath[2] !== 'undefined') {
if (typeof splitPath[2] !== "undefined") {
// decode the path (e.g to decode %40 to the character @)
var searchValue = decodeURIComponent(splitPath[2]);
}
}
if( typeof searchValue !== "undefined") {
if (typeof searchValue !== "undefined") {
$("#nav-search-input-field").val(searchValue);
}
}
@ -186,7 +189,7 @@ $(document).ready(function(){
// append the vcard-short-info to the second nav after passing the element
// with .fn (vcard username). Use scrollspy to get the scroll position.
if( $("aside .vcard .fn").length) {
if ($("aside .vcard .fn").length) {
$(".vcard .fn").scrollspy({
min: $(".vcard .fn").position().top - 50,
onLeaveTop: function onLeave(element) {
@ -194,7 +197,7 @@ $(document).ready(function(){
$("#vcard-short-info").appendTo("#vcard-short-info-wrapper");
});
},
onEnter: function(element) {
onEnter: function (element) {
$("#vcard-short-info").appendTo("#nav-short-info");
$("#vcard-short-info").fadeIn(500);
},
@ -202,53 +205,56 @@ $(document).ready(function(){
}
// move the forum contact information of the network page into the second navbar
if( $(".network-content-wrapper > #viewcontact_wrapper-network").length) {
if ($(".network-content-wrapper > #viewcontact_wrapper-network").length) {
// get the contact-wrapper element and append it to the second nav bar
// Note: We need the first() element with this class since at the present time we
// store also the js template information in the html code and thats why
// there are two elements with this class but we don't want the js template
$(".network-content-wrapper > #viewcontact_wrapper-network .contact-wrapper").first().appendTo("#nav-short-info");
$(".network-content-wrapper > #viewcontact_wrapper-network .contact-wrapper")
.first()
.appendTo("#nav-short-info");
}
// move heading from network stream to the second navbar nav-short-info section
if( $(".network-content-wrapper > .section-title-wrapper").length) {
if ($(".network-content-wrapper > .section-title-wrapper").length) {
// get the heading element
var heading = $(".network-content-wrapper > .section-title-wrapper > h2");
// get the text of the heading
var headingContent = heading.html();
// create a new element with the content of the heading
var newText = '<h4 class="heading" data-toggle="tooltip" title="'+headingContent+'">'+headingContent+'</h4>';
var newText =
'<h4 class="heading" data-toggle="tooltip" title="' + headingContent + '">' + headingContent + "</h4>";
// remove the old heading element
heading.remove(),
// put the new element to the second nav bar
$("#topbar-second #nav-short-info").append(newText);
// put the new element to the second nav bar
$("#topbar-second #nav-short-info").append(newText);
}
if( $(".community-content-wrapper").length) {
if ($(".community-content-wrapper").length) {
// get the heading element
var heading = $(".community-content-wrapper > h3").first();
// get the text of the heading
var headingContent = heading.html();
// create a new element with the content of the heading
var newText = '<h4 class="heading">'+headingContent+'</h4>';
var newText = '<h4 class="heading">' + headingContent + "</h4>";
// remove the old heading element
heading.remove(),
// put the new element to the second nav bar
$("#topbar-second > .container > #tabmenu").append(newText);
// put the new element to the second nav bar
$("#topbar-second > .container > #tabmenu").append(newText);
}
// Dropdown menus with the class "dropdown-head" will display the active tab
// as button text
$body.on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){
$body.on("click", ".dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button", function () {
toggleDropdownText(this);
});
// Change the css class while clicking on the switcher elements
$(".toggle label, .toggle .toggle-handle").click(function(event){
$(".toggle label, .toggle .toggle-handle").click(function (event) {
event.preventDefault();
// Get the value of the input element
var input = $(this).siblings("input");
var val = 1-input.val();
var val = 1 - input.val();
var id = input.attr("id");
// The css classes for "on" and "off"
@ -257,9 +263,11 @@ $(document).ready(function(){
// According to the value of the input element we need to decide
// which class need to be added and removed when changing the switch
var removedclass = (val == 0 ? onstyle : offstyle);
var addedclass = (val == 0 ? offstyle : onstyle)
$("#"+id+"_onoff").addClass(addedclass).removeClass(removedclass);
var removedclass = val == 0 ? onstyle : offstyle;
var addedclass = val == 0 ? offstyle : onstyle;
$("#" + id + "_onoff")
.addClass(addedclass)
.removeClass(removedclass);
// After changing the switch the input element is getting
// the newvalue
@ -273,19 +281,18 @@ $(document).ready(function(){
// to the input element where the padding value would be at least the width
// of the button. Otherwise long user input would be invisible because it is
// behind the button.
$body.on('click', '.form-group-search > input', function() {
$body.on("click", ".form-group-search > input", function () {
// Get the width of the button (if the button isn't available
// buttonWidth will be null
var buttonWidth = $(this).next('.form-button-search').outerWidth();
var buttonWidth = $(this).next(".form-button-search").outerWidth();
if (buttonWidth) {
// Take the width of the button and ad 5px
var newWidth = buttonWidth + 5;
// Set the padding of the input element according
// to the width of the button
$(this).css('padding-right', newWidth);
$(this).css("padding-right", newWidth);
}
});
/*
@ -295,18 +302,18 @@ $(document).ready(function(){
* We are making an exception for buttons because of a race condition with the
* comment opening button that results in an already closed comment UI.
*/
$(document).on('mousedown', function(event) {
if (event.target.type === 'button') {
$(document).on("mousedown", function (event) {
if (event.target.type === "button") {
return true;
}
var $dontclosethis = $(event.target).closest('.wall-item-comment-wrapper').find('.comment-edit-form');
$('.wall-item-comment-wrapper .comment-edit-submit-wrapper:visible').each(function() {
var $parent = $(this).parent('.comment-edit-form');
var itemId = $parent.data('itemId');
var $dontclosethis = $(event.target).closest(".wall-item-comment-wrapper").find(".comment-edit-form");
$(".wall-item-comment-wrapper .comment-edit-submit-wrapper:visible").each(function () {
var $parent = $(this).parent(".comment-edit-form");
var itemId = $parent.data("itemId");
if ($dontclosethis[0] != $parent[0]) {
var textarea = $parent.find('textarea').get(0)
var textarea = $parent.find("textarea").get(0);
commentCloseUI(textarea, itemId);
}
@ -314,10 +321,10 @@ $(document).ready(function(){
});
// Customize some elements when the app is used in standalone mode on Android
if (window.matchMedia('(display-mode: standalone)').matches) {
if (window.matchMedia("(display-mode: standalone)").matches) {
// Open links to source outside of the webview
$('body').on('click', '.plink', function (e) {
$(e.target).attr('target', '_blank');
$("body").on("click", ".plink", function (e) {
$(e.target).attr("target", "_blank");
});
}
@ -325,7 +332,7 @@ $(document).ready(function(){
* This event listeners ensures that the textarea size is updated event if the
* value is changed externally (textcomplete, insertFormatting, fbrowser...)
*/
$(document).on('change', 'textarea', function(event) {
$(document).on("change", "textarea", function (event) {
autosize.update(event.target);
});
@ -343,11 +350,11 @@ $(document).ready(function(){
if ($(window).width() > 976) {
$("aside").stick_in_parent({
offset_top: 100, // px, header + tab bar + spacing
recalc_every: 10
recalc_every: 10,
});
// recalculate sticky aside on clicks on <a> elements
// this handle height changes on expanding submenus
$("aside").on("click", "a", function(){
$("aside").on("click", "a", function () {
$(document.body).trigger("sticky_kit:recalc");
});
}
@ -359,22 +366,22 @@ $(document).ready(function(){
* is shown.
*/
$("aside")
.on("shown.bs.offcanvas", function() {
.on("shown.bs.offcanvas", function () {
$body.addClass("aside-out");
})
.on("hidden.bs.offcanvas", function() {
.on("hidden.bs.offcanvas", function () {
$body.removeClass("aside-out");
});
// Event listener for 'Show & hide event map' button in the network stream.
$body.on("click", ".event-map-btn", function() {
$body.on("click", ".event-map-btn", function () {
showHideEventMap(this);
});
// Comment form submit
$body.on('submit', '.comment-edit-form', function(e) {
$body.on("submit", ".comment-edit-form", function (e) {
let $form = $(this);
let id = $form.data('item-id');
let id = $form.data("item-id");
// Compose page form exception: id is always 0 and form must not be submitted asynchronously
if (id === 0) {
@ -383,86 +390,75 @@ $(document).ready(function(){
e.preventDefault();
let $commentSubmit = $form.find('.comment-edit-submit').button('loading');
let $commentSubmit = $form.find(".comment-edit-submit").button("loading");
unpause();
commentBusy = true;
$.post(
'item',
$form.serialize(),
'json'
)
.then(function(data) {
if (data.success) {
$('#comment-edit-wrapper-' + id).hide();
let $textarea = $('#comment-edit-text-' + id);
$textarea.val('');
if ($textarea.get(0)) {
commentClose($textarea.get(0), id);
$.post("item", $form.serialize(), "json")
.then(function (data) {
if (data.success) {
$("#comment-edit-wrapper-" + id).hide();
let $textarea = $("#comment-edit-text-" + id);
$textarea.val("");
if ($textarea.get(0)) {
commentClose($textarea.get(0), id);
}
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(NavUpdate, 10);
force_update = true;
update_item = id;
}
if (timer) {
clearTimeout(timer);
if (data.reload) {
window.location.href = data.reload;
}
timer = setTimeout(NavUpdate,10);
force_update = true;
update_item = id;
}
if (data.reload) {
window.location.href = data.reload;
}
})
.always(function() {
$commentSubmit.button('reset');
});
})
.always(function () {
$commentSubmit.button("reset");
});
});
$body.on('submit', '.modal-body #poke-wrapper', function(e) {
$body.on("submit", ".modal-body #poke-wrapper", function (e) {
e.preventDefault();
let $form = $(this);
let $pokeSubmit = $form.find('button[type=submit]').button('loading');
let $pokeSubmit = $form.find("button[type=submit]").button("loading");
$.post(
$form.attr('action'),
$form.serialize(),
'json'
)
.then(function(data) {
if (data.success) {
$('#modal').modal('hide');
}
})
.always(function() {
$pokeSubmit.button('reset');
});
})
$.post($form.attr("action"), $form.serialize(), "json")
.then(function (data) {
if (data.success) {
$("#modal").modal("hide");
}
})
.always(function () {
$pokeSubmit.button("reset");
});
});
});
function openClose(theID) {
var elem = document.getElementById(theID);
if( $(elem).is(':visible')) {
if ($(elem).is(":visible")) {
$(elem).slideUp(200);
}
else {
} else {
$(elem).slideDown(200);
}
}
function showHide(theID) {
var elem = document.getElementById(theID);
var edit = document.getElementById("comment-edit-submit-wrapper-" + theID.match('[0-9$]+'));
var edit = document.getElementById("comment-edit-submit-wrapper-" + theID.match("[0-9$]+"));
if ($(elem).is(':visible')) {
if (!$(edit).is(':visible')) {
if ($(elem).is(":visible")) {
if (!$(edit).is(":visible")) {
edit.style.display = "block";
}
else {
} else {
elem.style.display = "none";
}
}
else {
} else {
elem.style.display = "block";
}
}
@ -471,27 +467,27 @@ function showHide(theID) {
function showHideEventMap(elm) {
// Get the id of the map element - it should be provided through
// the atribute "data-map-id".
var mapID = elm.getAttribute('data-map-id');
var mapID = elm.getAttribute("data-map-id");
// Get translation labels.
var mapshow = elm.getAttribute('data-show-label');
var maphide = elm.getAttribute('data-hide-label');
var mapshow = elm.getAttribute("data-show-label");
var maphide = elm.getAttribute("data-hide-label");
// Change the button labels.
if (elm.innerText == mapshow) {
$('#' + elm.id).text(maphide);
$("#" + elm.id).text(maphide);
} else {
$('#' + elm.id).text(mapshow);
$("#" + elm.id).text(mapshow);
}
// Because maps are iframe elements, we cant hide it through css (display: none).
// We solve this issue by putting the map outside the screen with css.
// So the first time the 'Show map' button is pressed we move the map
// element into the screen area.
var mappos = $('#' + mapID).css('position');
var mappos = $("#" + mapID).css("position");
if (mappos === 'absolute') {
$('#' + mapID).hide();
$('#' + mapID).css({position: 'relative', left: 'auto', top: 'auto'});
if (mappos === "absolute") {
$("#" + mapID).hide();
$("#" + mapID).css({ position: "relative", left: "auto", top: "auto" });
openClose(mapID);
} else {
openClose(mapID);
@ -501,18 +497,22 @@ function showHideEventMap(elm) {
function justifyPhotos() {
justifiedGalleryActive = true;
$('#photo-album-contents').justifiedGallery({
margins: 3,
border: 0,
sizeRangeSuffixes: {
'lt48': '-6',
'lt80': '-5',
'lt300': '-4',
'lt320': '-2',
'lt640': '-1',
'lt1024': '-0'
}
}).on('jg.complete', function(e){ justifiedGalleryActive = false; });
$("#photo-album-contents")
.justifiedGallery({
margins: 3,
border: 0,
sizeRangeSuffixes: {
lt48: "-6",
lt80: "-5",
lt300: "-4",
lt320: "-2",
lt640: "-1",
lt1024: "-0",
},
})
.on("jg.complete", function (e) {
justifiedGalleryActive = false;
});
}
// Load a js script to the html head.
@ -525,9 +525,9 @@ function loadScript(url, callback) {
oscript.remove();
}
// Adding the script tag to the head as suggested before.
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
// Then bind the event to the callback function.
@ -541,44 +541,45 @@ function loadScript(url, callback) {
// Does we need a ? or a & to append values to a url
function qOrAmp(url) {
if(url.search('\\?') < 0) {
return '?';
if (url.search("\\?") < 0) {
return "?";
} else {
return '&';
return "&";
}
}
String.prototype.normalizeLink = function () {
var ret = this.replace('https:', 'http:');
var ret = ret.replace('//www', '//');
var ret = this.replace("https:", "http:");
var ret = ret.replace("//www", "//");
return ret.rtrim();
};
function cleanContactUrl(url) {
var parts = parseUrl(url);
if(! ("scheme" in parts) || ! ("host" in parts)) {
if (!("scheme" in parts) || !("host" in parts)) {
return url;
}
var newUrl =parts["scheme"] + "://" + parts["host"];
var newUrl = parts["scheme"] + "://" + parts["host"];
if("port" in parts) {
if ("port" in parts) {
newUrl += ":" + parts["port"];
}
if("path" in parts) {
if ("path" in parts) {
newUrl += parts["path"];
}
// if(url != newUrl) {
// console.log("Cleaned contact url " + url + " to " + newUrl);
// }
// if(url != newUrl) {
// console.log("Cleaned contact url " + url + " to " + newUrl);
// }
return newUrl;
}
function parseUrl (str, component) { // eslint-disable-line camelcase
function parseUrl(str, component) {
// eslint-disable-line camelcase
// discuss at: http://locutusjs.io/php/parse_url/
// original by: Steven Levithan (http://blog.stevenlevithan.com)
// reimplemented by: Brett Zamir (http://brett-zamir.me)
@ -603,82 +604,91 @@ function parseUrl (str, component) { // eslint-disable-line camelcase
// example 4: parse_url('https://gooduser:secretpassword@www.example.com/a@b.c/folder?foo=bar')
// returns 4: { scheme: 'https', host: 'www.example.com', path: '/a@b.c/folder', query: 'foo=bar', user: 'gooduser', pass: 'secretpassword' }
var query
var query;
var mode = (typeof require !== 'undefined' ? require('../info/ini_get')('locutus.parse_url.mode') : undefined) || 'php'
var mode =
(typeof require !== "undefined" ? require("../info/ini_get")("locutus.parse_url.mode") : undefined) || "php";
var key = [
'source',
'scheme',
'authority',
'userInfo',
'user',
'pass',
'host',
'port',
'relative',
'path',
'directory',
'file',
'query',
'fragment'
]
"source",
"scheme",
"authority",
"userInfo",
"user",
"pass",
"host",
"port",
"relative",
"path",
"directory",
"file",
"query",
"fragment",
];
// For loose we added one optional slash to post-scheme to catch file:/// (should restrict this)
var parser = {
php: new RegExp([
'(?:([^:\\/?#]+):)?',
'(?:\\/\\/()(?:(?:()(?:([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?',
'()',
'(?:(()(?:(?:[^?#\\/]*\\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)'
].join('')),
strict: new RegExp([
'(?:([^:\\/?#]+):)?',
'(?:\\/\\/((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?',
'((((?:[^?#\\/]*\\/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)'
].join('')),
loose: new RegExp([
'(?:(?![^:@]+:[^:@\\/]*@)([^:\\/?#.]+):)?',
'(?:\\/\\/\\/?)?',
'((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?)',
'(((\\/(?:[^?#](?![^?#\\/]*\\.[^?#\\/.]+(?:[?#]|$)))*\\/?)?([^?#\\/]*))',
'(?:\\?([^#]*))?(?:#(.*))?)'
].join(''))
}
php: new RegExp(
[
"(?:([^:\\/?#]+):)?",
"(?:\\/\\/()(?:(?:()(?:([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?",
"()",
"(?:(()(?:(?:[^?#\\/]*\\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)",
].join(""),
),
strict: new RegExp(
[
"(?:([^:\\/?#]+):)?",
"(?:\\/\\/((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?",
"((((?:[^?#\\/]*\\/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)",
].join(""),
),
loose: new RegExp(
[
"(?:(?![^:@]+:[^:@\\/]*@)([^:\\/?#.]+):)?",
"(?:\\/\\/\\/?)?",
"((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?)",
"(((\\/(?:[^?#](?![^?#\\/]*\\.[^?#\\/.]+(?:[?#]|$)))*\\/?)?([^?#\\/]*))",
"(?:\\?([^#]*))?(?:#(.*))?)",
].join(""),
),
};
var m = parser[mode].exec(str)
var uri = {}
var i = 14
var m = parser[mode].exec(str);
var uri = {};
var i = 14;
while (i--) {
if (m[i]) {
uri[key[i]] = m[i]
uri[key[i]] = m[i];
}
}
if (component) {
return uri[component.replace('PHP_URL_', '').toLowerCase()]
return uri[component.replace("PHP_URL_", "").toLowerCase()];
}
if (mode !== 'php') {
var name = (typeof require !== 'undefined' ? require('../info/ini_get')('locutus.parse_url.queryKey') : undefined) || 'queryKey'
parser = /(?:^|&)([^&=]*)=?([^&]*)/g
uri[name] = {}
query = uri[key[12]] || ''
if (mode !== "php") {
var name =
(typeof require !== "undefined" ? require("../info/ini_get")("locutus.parse_url.queryKey") : undefined) ||
"queryKey";
parser = /(?:^|&)([^&=]*)=?([^&]*)/g;
uri[name] = {};
query = uri[key[12]] || "";
query.replace(parser, function ($0, $1, $2) {
if ($1) {
uri[name][$1] = $2
uri[name][$1] = $2;
}
})
});
}
delete uri.source
return uri
delete uri.source;
return uri;
}
// trim function to replace whithespace after the string
String.prototype.rtrim = function() {
var trimmed = this.replace(/\s+$/g, '');
String.prototype.rtrim = function () {
var trimmed = this.replace(/\s+$/g, "");
return trimmed;
};
@ -695,34 +705,40 @@ function scrollToItem(elementId) {
return;
}
var $el = $('#' + elementId + ' > .media');
var $el = $("#" + elementId + " > .media");
// Test if the Item exists
if (!$el.length) {
return;
}
// Define the colors which are used for highlighting
var colWhite = {backgroundColor:'#F5F5F5'};
var colShiny = {backgroundColor:'#FFF176'};
var colWhite = { backgroundColor: "#F5F5F5" };
var colShiny = { backgroundColor: "#FFF176" };
// Get the Item Position (we need to substract 100 to match correct position
var itemPos = $el.offset().top - 100;
// Scroll to the DIV with the ID (GUID)
$('html, body').animate({
scrollTop: itemPos
}, 400).promise().done( function() {
// Highlight post/commenent with ID (GUID)
$el.animate(colWhite, 1000).animate(colShiny).animate({backgroundColor: 'transparent'}, 600);
});
$("html, body")
.animate(
{
scrollTop: itemPos,
},
400,
)
.promise()
.done(function () {
// Highlight post/commenent with ID (GUID)
$el.animate(colWhite, 1000).animate(colShiny).animate({ backgroundColor: "transparent" }, 600);
});
}
// format a html string to pure text
function htmlToText(htmlString) {
// Replace line breaks with spaces
var text = htmlString.replace(/<br>/g, ' ');
var text = htmlString.replace(/<br>/g, " ");
// Strip the text out of the html string
text = text.replace(/<[^>]*>/g, '');
text = text.replace(/<[^>]*>/g, "");
return text;
}
@ -736,16 +752,16 @@ function htmlToText(htmlString) {
* @param {boolean} un Whether to perform an activity removal instead of creation
*/
function doLikeAction(ident, verb, un) {
if (verb.indexOf('attend') === 0) {
$('.item-' + ident + ' .button-event:not(#' + verb + '-' + ident + ')').removeClass('active');
if (verb.indexOf("attend") === 0) {
$(".item-" + ident + " .button-event:not(#" + verb + "-" + ident + ")").removeClass("active");
}
$('#' + verb + '-' + ident).toggleClass('active');
$("#" + verb + "-" + ident).toggleClass("active");
dolike(ident, verb, un);
}
// Decodes a hexadecimally encoded binary string
function hex2bin (s) {
function hex2bin(s) {
// discuss at: http://locutus.io/php/hex2bin/
// original by: Dumitru Uzun (http://duzun.me)
// example 1: hex2bin('44696d61')
@ -757,7 +773,7 @@ function hex2bin (s) {
var ret = [];
var i = 0;
var l;
s += '';
s += "";
for (l = s.length; i < l; i += 2) {
var c = parseInt(s.substr(i, 1), 16);
@ -771,7 +787,7 @@ function hex2bin (s) {
}
// Convert binary data into hexadecimal representation
function bin2hex (s) {
function bin2hex(s) {
// From: http://phpjs.org/functions
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
@ -782,7 +798,10 @@ function bin2hex (s) {
// * example 2: bin2hex(String.fromCharCode(0x00));
// * returns 2: '00'
var i, l, o = "", n;
var i,
l,
o = "",
n;
s += "";
@ -797,14 +816,17 @@ function bin2hex (s) {
// 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).html() + ' <span class="caret"></span>');
$(elm).closest(".dropdown").find('.btn').val($(elm).data('value'));
$(elm).closest("ul").children("li").show();
$(elm).parent("li").hide();
$(elm)
.closest(".dropdown")
.find(".btn")
.html($(elm).html() + ' <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;
return (" " + elem.className + " ").indexOf(" " + cls + " ") > -1;
}
// @license-end

78
view/theme/frio/scheme/black.css
View file

@ -18,7 +18,7 @@
}
#topbar-first #nav-notifications-menu li.notification-unseen {
background-color: $nav_icon_hover_color;
background-color: $nav_icon_hover_color;
}
#topbar-second {
@ -29,17 +29,20 @@
border_color: $link_color;
}
.dropdown-menu, .account .dropdown-menu {
.dropdown-menu,
.account .dropdown-menu {
background-color: $background_color;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
color: $link_color;
}
.account .dropdown-menu li {
border-color: $background_color;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
background-image: none;
background-color: rgba(232, 232, 232, $contentbg_transp);
}
@ -61,9 +64,9 @@
border-color: #a0a0a0;
}
input[type=text],
input[type=submit],
button[type=submit]:not(.btn),
input[type="text"],
input[type="submit"],
button[type="submit"]:not(.btn),
select,
textarea,
.form-control {
@ -73,11 +76,13 @@ textarea,
box-shadow: 0 0 3px #dadada;
-webkit-box-shadow: 0 0 3px #dadada;
}
input[type=range] {
input[type="range"] {
box-shadow: none;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: $background_color;
color: $font_color_darker;
}
@ -87,17 +92,18 @@ input[type=range] {
background-color: $background_color;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
main .nav-tabs>li.active>a,
main .nav-tabs>li.active>a:focus,
main .nav-tabs>li.active>a:hover {
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
main .nav-tabs > li.active > a,
main .nav-tabs > li.active > a:focus,
main .nav-tabs > li.active > a:hover {
background-color: $nav_bg;
color: $font_color_darker;
}
.nav > li > a:focus, .nav > li > a:hover {
.nav > li > a:focus,
.nav > li > a:hover {
background-color: rgba(238, 238, 238, $contentbg_transp);
}
@ -126,7 +132,8 @@ main .nav-tabs>li.active>a:hover {
color: $font_color;
}
.pagination>li>a:hover, .pagination>li>span:hover {
.pagination > li > a:hover,
.pagination > li > span:hover {
background-color: $nav_bg;
}
@ -139,7 +146,8 @@ main .nav-tabs>li.active>a:hover {
color: $font_color;
text-shadow: 0 1px 0 $nav_bg;
}
.close:focus, .close:hover {
.close:focus,
.close:hover {
color: $link_color;
}
@ -174,19 +182,23 @@ main .nav-tabs>li.active>a:hover {
background: none;
color: $font_color_darker;
}
.btn.focus, .btn:focus, .btn:hover {
.btn.focus,
.btn:focus,
.btn:hover {
color: $font_color;
}
.btn-default:focus, .btn-default:hover {
.btn-default:focus,
.btn-default:hover {
background: $nav_bg;
}
.btn-default.active, .btn-default:active {
.btn-default.active,
.btn-default:active {
background-color: $nav_bg;
color: $font_color;
}
button[type=submit]:not(.btn),
input[type=submit],
button[type="submit"]:not(.btn),
input[type="submit"],
.btn.btn-primary {
border: 1px solid $link_color;
}
@ -196,7 +208,7 @@ input[type=submit],
color: $link_color;
}
.panel-default>.panel-heading {
.panel-default > .panel-heading {
background: none;
background-color: $nav_bg;
color: $font_color;
@ -285,7 +297,8 @@ input[type=submit],
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
.hovercard, .hover-card-footer {
.hovercard,
.hover-card-footer {
background-color: $nav_bg;
}
.hovercard.top > .arrow:after {
@ -305,21 +318,20 @@ input[type=submit],
color: inherit;
}
code {
color: $font_color;
background-color: rgba(255, 255, 255, .2);
background-color: rgba(255, 255, 255, 0.2);
}
pre {
color: $font_color_darker;
background-color: rgba(255, 255, 255, .05);
background-color: rgba(255, 255, 255, 0.05);
}
legend {
color: $font_color;
}
.table-striped>tbody>tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover,
.adminpage .table-hover > tbody > tr:hover + tr.details {
background-color: $nav_bg;
@ -334,7 +346,8 @@ section > .generic-page-wrapper,
.delegation-content-wrapper,
.notes-content-wrapper,
.message-content-wrapper,
.apps-content-wrapper, #adminpage,
.apps-content-wrapper,
#adminpage,
.delegate-content-wrapper,
.uexport-content-wrapper,
.dfrn_request-content-wrapper,
@ -348,13 +361,12 @@ section > .generic-page-wrapper,
.panel,
aside .widget,
.nav-container .widget,
#back-to-top
{
#back-to-top {
box-shadow: 0 0 3px $link_color;
-webkit-box-shadow: 0 0 3px $link_color;
}
input[type=text].tt-input {
input[type="text"].tt-input {
box-shadow: none;
}

50
view/theme/frio/scheme/dark.css
View file

@ -18,7 +18,7 @@
}
#topbar-first #nav-notifications-menu li.notification-unseen {
background-color: $nav_icon_hover_color;
background-color: $nav_icon_hover_color;
}
#topbar-second {
@ -29,17 +29,20 @@
border_color: $link_color;
}
.dropdown-menu, .account .dropdown-menu {
.dropdown-menu,
.account .dropdown-menu {
background-color: $background_color;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
color: $link_color;
}
.account .dropdown-menu li {
border-color: $background_color;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
background-image: none;
background-color: rgba(232, 232, 232, $contentbg_transp);
}
@ -60,9 +63,9 @@
-webkit-box-shadow: 0 0 3px #dadada;
}
input[type=text],
input[type=submit],
button[type=submit]:not(.btn),
input[type="text"],
input[type="submit"],
button[type="submit"]:not(.btn),
select,
textarea,
.form-control {
@ -72,7 +75,7 @@ textarea,
box-shadow: 0 0 3px #dadada;
-webkit-box-shadow: 0 0 3px #dadada;
}
input[type=range] {
input[type="range"] {
box-shadow: none;
}
@ -88,12 +91,12 @@ input[type=range] {
background-color: $background_color;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
main .nav-tabs>li.active>a,
main .nav-tabs>li.active>a:focus,
main .nav-tabs>li.active>a:hover {
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
main .nav-tabs > li.active > a,
main .nav-tabs > li.active > a:focus,
main .nav-tabs > li.active > a:hover {
background-color: $nav_bg;
color: $font_color_darker;
}
@ -118,8 +121,8 @@ main .nav-tabs>li.active>a:hover {
color: $font_color;
}
.pagination>li>a:hover,
.pagination>li>span:hover {
.pagination > li > a:hover,
.pagination > li > span:hover {
background-color: $nav_bg;
}
@ -183,8 +186,8 @@ main .nav-tabs>li.active>a:hover {
color: $font_color;
}
button[type=submit]:not(.btn),
input[type=submit],
button[type="submit"]:not(.btn),
input[type="submit"],
.btn.btn-primary {
border: 1px solid $link_color;
}
@ -194,7 +197,7 @@ input[type=submit],
color: $link_color;
}
.panel-default>.panel-heading {
.panel-default > .panel-heading {
background: none;
background-color: $nav_bg;
color: $font_color;
@ -304,27 +307,26 @@ input[type=submit],
color: inherit;
}
code {
color: $font_color;
background-color: rgba(255, 255, 255, .2);
background-color: rgba(255, 255, 255, 0.2);
}
pre {
color: $font_color_darker;
background-color: rgba(255, 255, 255, .05);
background-color: rgba(255, 255, 255, 0.05);
}
legend {
color: $font_color;
}
.table-striped>tbody>tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover,
.adminpage .table-hover > tbody > tr:hover + tr.details {
background-color: $nav_bg;
}
input[type=text].tt-input {
input[type="text"].tt-input {
box-shadow: none;
}

51
view/theme/frio/scheme/koyu-dark.css
View file

@ -5,37 +5,48 @@
Author : koyu
*/
#topbar-first, #topbar-second, body {
background: #111;
border: 0;
#topbar-first,
#topbar-second,
body {
background: #111;
border: 0;
}
#topbar-first .dropdown.account > a, #topbar-first .dropdown.account.open > a, #topbar-first .dropdown.account > button, #topbar-first .dropdown.account.open > button, #topbar-first .dropdown.account > :hover, #topbar-first .dropdown.account.open > :hover {
background: #111;
border: 0;
#topbar-first .dropdown.account > a,
#topbar-first .dropdown.account.open > a,
#topbar-first .dropdown.account > button,
#topbar-first .dropdown.account.open > button,
#topbar-first .dropdown.account > :hover,
#topbar-first .dropdown.account.open > :hover {
background: #111;
border: 0;
}
.nav-pills .dropdown-menu, .nav-tabs .dropdown-menu, .account .dropdown-menu, .contact-photo-wrapper .dropdown-menu {
background: #111;
-webkit-box-shadow: 0px 0px 69px 4px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 69px 4px rgba(0,0,0,0.25);
box-shadow: 0px 0px 69px 4px rgba(0,0,0,0.25);
border: 0;
.nav-pills .dropdown-menu,
.nav-tabs .dropdown-menu,
.account .dropdown-menu,
.contact-photo-wrapper .dropdown-menu {
background: #111;
-webkit-box-shadow: 0px 0px 69px 4px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 69px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 69px 4px rgba(0, 0, 0, 0.25);
border: 0;
}
.account .dropdown-menu li, .account .dropdown-menu li:hover {
border: 0;
background: #111;
.account .dropdown-menu li,
.account .dropdown-menu li:hover {
border: 0;
background: #111;
}
#topbar-first .topbar-nav .nav-segment>a:hover {
background: #333;
#topbar-first .topbar-nav .nav-segment > a:hover {
background: #333;
}
.account .dropdown-menu li:hover {
background: #333 !important;
background: #333 !important;
}
.account .dropdown-menu li.divider {
background: #111;
}
background: #111;
}

58
view/theme/frio/scheme/love-music.css
View file

@ -6,7 +6,7 @@
*/
body {
color: #000;
color: #000;
}
/*
@ -14,25 +14,25 @@ body {
*/
#topbar-first,
nav.navbar {
box-shadow: 0 -1px 5px 2px #000;
box-shadow: 0 -1px 5px 2px #000;
}
#topbar-first .nav>li>a:hover,
nav.navbar .nav>li>a:hover {
background-color: #000;
color: #15e3ff;
#topbar-first .nav > li > a:hover,
nav.navbar .nav > li > a:hover {
background-color: #000;
color: #15e3ff;
}
#topbar-first .nav>li>a.selected {
background: #e355e0;
color: #000;
padding: 9px;
border-radius: 8px;
#topbar-first .nav > li > a.selected {
background: #e355e0;
color: #000;
padding: 9px;
border-radius: 8px;
}
#topbar-first #nav-notifications-menu li.notif-entry:hover,
#topbar-second .nav>li>ul>li>a:hover,
#topbar-second .nav>li>ul>li>a.active,
#topbar-second .nav>li>a:hover,
#topbar-second .nav .open>a,
#topbar-second .nav>li.active,
#topbar-second .nav > li > ul > li > a:hover,
#topbar-second .nav > li > ul > li > a.active,
#topbar-second .nav > li > a:hover,
#topbar-second .nav .open > a,
#topbar-second .nav > li.active,
.nav-pills .dropdown-menu li:hover,
.nav-tabs .dropdown-menu li:hover,
.account .dropdown-menu li:hover,
@ -44,29 +44,31 @@ nav.navbar .nav>li>a:hover {
aside .widget li:hover,
aside .widget li.selected,
.nav-container .widget li:hover {
border-left:3px solid #15e3ff !important;
border-left: 3px solid #15e3ff !important;
}
.panel,
aside .widget,
.nav-container .widget,
#profile-page, .photos-content-wrapper,
#profile-page,
.photos-content-wrapper,
.settings-content-wrapper {
border-style: solid solid solid solid;
border-width: 1px;
border-color: #DDDDDD;
box-shadow: none;
border-radius: 15px;
color: #000;
border-style: solid solid solid solid;
border-width: 1px;
border-color: #dddddd;
box-shadow: none;
border-radius: 15px;
color: #000;
}
aside .widget li a, aside .widget li a:hover,
aside .widget li a,
aside .widget li a:hover,
.panel .panel-body .wall-item-content,
.toplevel_item .wall-item-container .btn-link {
color: #000;
color: #000;
}
.wall-item-content a:hover,
nav.navbar .navbar-brand{
color: #15e3ff !important;
nav.navbar .navbar-brand {
color: #15e3ff !important;
}

158
view/theme/frio/scheme/plusminus.css
View file

@ -9,132 +9,160 @@
*/
body {
background: url(scheme/plusminus.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: auto;
background: url(scheme/plusminus.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: auto;
}
aside .widget, .form-control, .panel, .nav-container, .wall-item-content, .e-content, .p-name, .topbar, post, shiny, tread-wrapper, #topbar-second {
color: #000;
background-color: #f5f5f5;
aside .widget,
.form-control,
.panel,
.nav-container,
.wall-item-content,
.e-content,
.p-name,
.topbar,
post,
shiny,
tread-wrapper,
#topbar-second {
color: #000;
background-color: #f5f5f5;
}
.form-control {
font-family: ".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Helvetica,Arial,sans-serif;
.form-control {
font-family: ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande",
Helvetica, Arial, sans-serif;
}
#topbar-first #nav-notifications-menu li.notification-unseen {
border-left: 3px solid #e3eff3;
background-color: antiquewhite;
border-left: 3px solid #e3eff3;
background-color: antiquewhite;
}
#topbar-first #nav-notifications-menu li.notif-entry {
padding: 0px;
padding: 0px;
}
.birthday-notice {
background-color:#cc0000;
color: white;
background-color: #cc0000;
color: white;
}
#birthday-title {
background-color:#ff0000;
color: white;
text-indent: 6px;
background-color: #ff0000;
color: white;
text-indent: 6px;
}
.birthday-list:before {
content: "\1F382 ";
content: "\1F382 ";
}
.birthday-list{
margin: 1px;
color: black;
background-color: yellow;
text-indent: 10px;
border-radius: 5px;
.birthday-list {
margin: 1px;
color: black;
background-color: yellow;
text-indent: 10px;
border-radius: 5px;
}
#event-notice{
color: white;
background-color: #004c5b;
text-indent: 2px;
#event-notice {
color: white;
background-color: #004c5b;
text-indent: 2px;
}
#event-title{
color: whitesmoke;
background-color: #006c83;
text-indent: 6px;
#event-title {
color: whitesmoke;
background-color: #006c83;
text-indent: 6px;
}
.event-list:before {
content: "\1F5D3 ";
content: "\1F5D3 ";
}
.event-list {
margin: 1px;
color: black;
background-color: #00c7f0;
text-indent: 10px;
border-radius: 5px;
margin: 1px;
color: black;
background-color: #00c7f0;
text-indent: 10px;
border-radius: 5px;
}
.panel .panel-body {
padding-top: 1px;
padding-bottom: 1px;
padding-left:5px;
padding-right:5px;
border: 1px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 5px;
padding-right: 5px;
border: 1px;
}
.wall-item-network {
font-size: 12px;
font-size: 12px;
}
.wall-item-content .clearfix .post .comment-container .well .well-sm .wall-item-body .e-content .p-name .media .comment .wall-item-bottom .wall-item-links .wall-item-tags .wall-item-actions .wall-item-responses #hr {
box-sizing: border-box;
margin-top: 0px;
margin-bottom: 0px;
border:0px;
padding:0px;
color:black;
.wall-item-content
.clearfix
.post
.comment-container
.well
.well-sm
.wall-item-body
.e-content
.p-name
.media
.comment
.wall-item-bottom
.wall-item-links
.wall-item-tags
.wall-item-actions
.wall-item-responses
#hr {
box-sizing: border-box;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
padding: 0px;
color: black;
}
.wall-spacer {
height: 0px;
height: 0px;
}
/* Contact-page */
#connect-desc {
color: grey;
color: grey;
}
.search-input.form-control.form-search {
background-color: #ebebeb;
border-color:lightgrey;
background-color: #ebebeb;
border-color: lightgrey;
}
.search-input.form-control.form-search:focus {
background-color: white;
border-color:grey;
background-color: white;
border-color: grey;
}
/* Addon-Showmore*/
.showmore-wrap {
background-color:lightgrey;
text-decoration: underline;
text-decoration-color: black;
text-decoration-style: wavy;
background-color: lightgrey;
text-decoration: underline;
text-decoration-color: black;
text-decoration-style: wavy;
}
/* New compose popup */
.profile-jot-net {
background: #dff0d8;
background: #dff0d8;
}
.profile-jot-net summary {
color: #3c763d;
font-weight: bold;
color: #3c763d;
font-weight: bold;
}

638
view/theme/frio/templates/nav.tpl
View file

@ -1,311 +1,421 @@
{{* we have modified the navmenu (look at function frio_remote_nav() ) to have remote links. $nav.userinfo is a new variable and replaces the original $userinfo variable *}}
{{if $nav.userinfo}}
<header>
{{* {{$langselector}} *}}
<header>
{{* {{$langselector}} *}}
<div id="site-location">{{$sitelocation}}</div>
<div id="banner" class="hidden-sm hidden-xs">
{{* show on remote/visitor connections an other logo which symols that fact*}}
{{if $nav.remote}}
<a href="{{$baseurl}}"><div id="remote-logo-img" aria-label="{{$home}}"></div></a>
{{else}}
{{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
<div id="site-location">{{$sitelocation}}</div>
<div id="banner" class="hidden-sm hidden-xs">
{{* show on remote/visitor connections an other logo which symols that fact*}}
{{if $nav.remote}}
<a href="{{$baseurl}}">
<div id="remote-logo-img" aria-label="{{$home}}"></div>
</a>
{{else}}
{{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
For Firefox we have to call the paths of the mask (look at the bottom of this file).
Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
<a href="{{$baseurl}}"><div id="logo-img" aria-label="{{$home}}"></div></a>
{{/if}}
</div>
</header>
<nav id="topbar-first" class="topbar">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"><!-- div for navbar width-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="topbar-nav" role="navigation">
<a href="{{$baseurl}}">
<div id="logo-img" aria-label="{{$home}}"></div>
</a>
{{/if}}
</div>
</header>
<nav id="topbar-first" class="topbar">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<!-- div for navbar width-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="topbar-nav" role="navigation">
{{* Buttons for the mobile view *}}
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas" data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i>
</button>
<button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
</button>
{{* Buttons for the mobile view *}}
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas"
data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse"
data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i>
</button>
<button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs"
data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
</button>
{{* Left section of the NavBar with navigation shortcuts/icons *}}
<ul class="nav navbar-left" role="menubar">
{{if $nav.network}}
<li class="nav-segment">
<a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th fa-fw" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{if $nav.home}}
<li class="nav-segment">
<a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip" aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home fa-fw" aria-hidden="true"></i><span id="home-update" class="nav-home-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{* Left section of the NavBar with navigation shortcuts/icons *}}
<ul class="nav navbar-left" role="menubar">
{{if $nav.network}}
<li class="nav-segment">
<a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}"
data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i
class="fa fa-lg fa-th fa-fw" aria-hidden="true"></i><span id="net-update"
class="nav-network-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{if $nav.home}}
<li class="nav-segment">
<a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip"
aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home fa-fw"
aria-hidden="true"></i><span id="home-update"
class="nav-home-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{if $nav.community}}
<li class="nav-segment">
<a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}" data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
</li>
{{/if}}
{{if $nav.community}}
<li class="nav-segment">
<a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}"
data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i
class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
</li>
{{/if}}
{{if $nav.messages}}
<li class="nav-segment hidden-xs">
<a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip" aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}" class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i><span id="mail-update" class="nav-mail-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{if $nav.messages}}
<li class="nav-segment hidden-xs">
<a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip"
aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}"
class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg fa-fw"
aria-hidden="true"></i><span id="mail-update"
class="nav-mail-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{if $nav.events}}
<li class="nav-segment hidden-xs">
<a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip" aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i class="fa fa-lg fa-calendar fa-fw"></i></a>
</li>
{{/if}}
{{if $nav.events}}
<li class="nav-segment hidden-xs">
<a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip"
aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i
class="fa fa-lg fa-calendar fa-fw"></i></a>
</li>
{{/if}}
{{if $nav.contacts}}
<li class="nav-segment hidden-xs">
<a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i class="fa fa-users fa-lg fa-fw"></i></a>
</li>
{{/if}}
{{if $nav.contacts}}
<li class="nav-segment hidden-xs">
<a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip"
aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"
class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i
class="fa fa-users fa-lg fa-fw"></i></a>
</li>
{{/if}}
{{* The notifications dropdown *}}
{{if $nav.notifications}}
<li id="nav-notification" class="nav-segment dropdown" role="presentation">
<button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
<span id="notification-update" class="nav-notification-badge badge nav-notification"></span>
<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
</button>
{{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="nav-notifications-menu-btn">
{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div>
{{$nav.notifications.1}}
<div class="dropdown-header-link">
<button role="menuitem" type="button" class="btn-link" onclick="notificationMarkAll();" data-toggle="tooltip" aria-label="{{$nav.notifications.mark.3}}" title="{{$nav.notifications.mark.3}}">{{$nav.notifications.mark.1}}</button>
</div>
{{* The notifications dropdown *}}
{{if $nav.notifications}}
<li id="nav-notification" class="nav-segment dropdown" role="presentation">
<button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown"
type="button" aria-haspopup="true" aria-expanded="false"
aria-controls="nav-notifications-menu">
<span id="notification-update" class="nav-notification-badge badge nav-notification"></span>
<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
</button>
{{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu"
aria-labelledby="nav-notifications-menu-btn">
{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div>
{{$nav.notifications.1}}
<div class="dropdown-header-link">
<button role="menuitem" type="button" class="btn-link"
onclick="notificationMarkAll();" data-toggle="tooltip"
aria-label="{{$nav.notifications.mark.3}}"
title="{{$nav.notifications.mark.3}}">{{$nav.notifications.mark.1}}</button>
</div>
</li>
</li>
<li role="presentation">
<p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
</li>
</ul>
</li>
{{/if}}
<li role="presentation">
<p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
</li>
</ul>
</li>
{{/if}}
</ul>
</div>
</ul>
</div>
{{* This is the right part of the NavBar. It includes the search and the user menu *}}
<div class="topbar-actions pull-right">
<ul class="nav">
{{* This is the right part of the NavBar. It includes the search and the user menu *}}
<div class="topbar-actions pull-right">
<ul class="nav">
{{* The search box *}}
{{if $nav.search}}
<li id="search-box" class="hidden-xs">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
<div class="form-group form-group-search">
<input accesskey="s" id="nav-search-input-field" class="form-control form-search" type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</div>
</form>
</li>
{{/if}}
{{* The search box *}}
{{if $nav.search}}
<li id="search-box" class="hidden-xs">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
<div class="form-group form-group-search">
<input accesskey="s" id="nav-search-input-field" class="form-control form-search"
type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}"
placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search"
type="submit">{{$nav.search.1}}</button>
</div>
</form>
</li>
{{/if}}
{{* The user dropdown menu *}}
{{if $nav.userinfo}}
<li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
<button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-user-menu">
<div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
<strong>{{$nav.userinfo.name}}</strong><br>
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
</div>
{{* The user dropdown menu *}}
{{if $nav.userinfo}}
<li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
<button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar"
data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false"
aria-controls="nav-user-menu">
<div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
<strong>{{$nav.userinfo.name}}</strong><br>
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
</div>
<img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
<span class="caret"></span>
</button>
<img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
<span class="caret"></span>
</button>
{{* The list of available usermenu links *}}
<ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu" aria-labelledby="main-menu">
{{if $nav.remote}}{{if $nav.sitename}}
<li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
<li role="presentation" class="divider"></li>
{{/if}}{{/if}}
{{foreach $nav.usermenu as $usermenu}}
<li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
<li role="presentation" class="divider"></li>
{{if $nav.notifications}}
<li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation"><a role="menuitem" class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a></li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.contacts}}
<li role="presentation"><a role="menuitem" id="nav-menu-contacts-link" class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i> {{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation"><a role="menuitem" id="nav-delegation-link" class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}" href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
<li role="presentation"><a role="menuitem" id="nav-directory-link" class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw" aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
<li role="presentation" class="divider"></li>
{{if $nav.apps}}
<li role="presentation"><a role="menuitem" id="nav-apps-link" class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" ><i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
<li role="presentation" class="divider"></li>
{{/if}}
{{if $nav.help}}
<li role="presentation"><a role="menuitem" id="nav-help-link" class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" ><i class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a></li>
{{/if}}
{{if $nav.settings}}
<li role="presentation"><a role="menuitem" id="nav-settings-link" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link" class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.tos}}
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" id="nav-tos-link" class="nav-link {{$nav.tos.2}}" href="{{$nav.tos.0}}" title="{{$nav.tos.3}}" ><i class="fa fa-file-text" aria-hidden="true"></i> {{$nav.tos.1}}</a></li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.logout}}
<li role="presentation"><a role="menuitem" id="nav-logout-link" class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" ><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation"><a role="menuitem" id="nav-login-link" class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" ><i class="fa fa-power-off fa-fw" aria-hidden="true"></i> {{$nav.login.1}}</a></li>
{{/if}}
</ul>
</li>{{* End of userinfo dropdown menu *}}
{{/if}}
{{* The list of available usermenu links *}}
<ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu"
aria-labelledby="main-menu">
{{if $nav.remote}}
{{if $nav.sitename}}
<li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
<li role="presentation" class="divider"></li>
{{/if}}
{{/if}}
{{foreach $nav.usermenu as $usermenu}}
<li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
<li role="presentation" class="divider"></li>
{{if $nav.notifications}}
<li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}"
title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i>
{{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation"><a role="menuitem"
class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}"
href="{{$nav.messages.0}}" title="{{$nav.messages.3}}"><i
class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span
id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a>
</li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.contacts}}
<li role="presentation"><a role="menuitem" id="nav-menu-contacts-link"
class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
{{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation"><a role="menuitem" id="nav-delegation-link"
class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i
class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
<li role="presentation"><a role="menuitem" id="nav-directory-link"
class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}"
title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw"
aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
<li role="presentation" class="divider"></li>
{{if $nav.apps}}
<li role="presentation"><a role="menuitem" id="nav-apps-link"
class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}"><i
class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
<li role="presentation" class="divider"></li>
{{/if}}
{{if $nav.help}}
<li role="presentation"><a role="menuitem" id="nav-help-link"
class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i
class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a>
</li>
{{/if}}
{{if $nav.settings}}
<li role="presentation"><a role="menuitem" id="nav-settings-link"
class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
{{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link"
class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}"
title="{{$nav.admin.3}}"><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i>
{{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.tos}}
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" id="nav-tos-link" class="nav-link {{$nav.tos.2}}"
href="{{$nav.tos.0}}" title="{{$nav.tos.3}}"><i class="fa fa-file-text"
aria-hidden="true"></i> {{$nav.tos.1}}</a></li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.logout}}
<li role="presentation"><a role="menuitem" id="nav-logout-link"
class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}"
title="{{$nav.logout.3}}"><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i>
{{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation"><a role="menuitem" id="nav-login-link"
class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
title="{{$nav.login.3}}"><i class="fa fa-power-off fa-fw" aria-hidden="true"></i>
{{$nav.login.1}}</a></li>
{{/if}}
</ul>
</li>{{* End of userinfo dropdown menu *}}
{{/if}}
<!-- Language selector, I do not find it relevant, activate if necessary.
<!-- Language selector, I do not find it relevant, activate if necessary.
<li>{{$langselector}}</li>
-->
</ul>
</div>{{* End of right navbar *}}
</ul>
</div>{{* End of right navbar *}}
{{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
<div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
<div class="nav-container">
<ul role="menu" class="list-group">
{{if $nav.remote}}{{if $nav.sitename}}
<li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
{{/if}}{{/if}}
<li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;"> {{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
{{foreach $nav.usermenu as $usermenu}}
<li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
{{if $nav.notifications}}
<li role="presentation" class="list-group-item"><a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.contacts}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i> {{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}" href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
{{if $nav.settings}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.logout}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" ><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" ><i class="fa fa-power-off fa-fw" aria-hidden="true"></i> {{$nav.login.1}}</a></li>
{{/if}}
</ul>
</div>
</div><!--/.sidebar-offcanvas-->
</div><!-- end of div for navbar width-->
</div><!-- /.container -->
</nav><!-- /.navbar -->
{{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
<div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
<div class="nav-container">
<ul role="menu" class="list-group">
{{if $nav.remote}}
{{if $nav.sitename}}
<li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
{{/if}}
{{/if}}
<li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}"
alt="{{$nav.userinfo.name}}"
style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;">
{{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
{{foreach $nav.usermenu as $usermenu}}
<li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}"
href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
{{if $nav.notifications}}
<li role="presentation" class="list-group-item"><a role="menuitem"
href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i
class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.contacts}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
{{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}"
title="{{$nav.messages.3}}"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
{{$nav.messages.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw"
aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
{{if $nav.settings}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
{{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}"><i
class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.logout}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}"><i
class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
title="{{$nav.login.3}}"><i class="fa fa-power-off fa-fw" aria-hidden="true"></i>
{{$nav.login.1}}</a></li>
{{/if}}
</ul>
</div>
</div>
<!--/.sidebar-offcanvas-->
</div><!-- end of div for navbar width-->
</div><!-- /.container -->
</nav><!-- /.navbar -->
{{/if}}
{{* The navbar for users which are not logged in *}}
{{if $nav.userinfo == ''}}
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#"><div id="navbrand-container">
<div id="logo-img"></div>
<div id="navbar-brand-text"> Friendica</div></div>
</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<a href="login?mode=none" id="nav-login"
data-toggle="tooltip" aria-label="{{$nav.login.3}}" title="{{$nav.login.3}}">
<i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
</a>
</li>
<li role="presentation">
<a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}" title="{{$nav.about.3}}">
<i class="fa fa-info fa-fw" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">
<div id="navbrand-container">
<div id="logo-img"></div>
<div id="navbar-brand-text"> Friendica</div>
</div>
</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<a href="login?mode=none" id="nav-login" data-toggle="tooltip" aria-label="{{$nav.login.3}}"
title="{{$nav.login.3}}">
<i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
</a>
</li>
<li role="presentation">
<a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}"
title="{{$nav.about.3}}">
<i class="fa fa-info fa-fw" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
{{/if}}
{{* provide a a search input for mobile view, which expands by pressing the search icon *}}
<div id="search-mobile" class="hidden-lg hidden-md hidden-sm collapse row well">
<div class="col-xs-12">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
<div class="form-group form-group-search">
<input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</div>
</form>
</div>
<div class="col-xs-12">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
<div class="form-group form-group-search">
<input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="q"
data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</div>
</form>
</div>
</div>
{{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}
<div id="topbar-second" class="topbar">
<div class="container">
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" id="nav-short-info"></div>
<div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
</div>
<div class="container">
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" id="nav-short-info"></div>
<div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
</div>
</div>
{{*The second part of the notifications dropdown menu. It handles the notifications *}}
{{if $nav.notifications}}
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
<li class="{4} notif-entry">
<div class="notif-entry-wrapper media">
<div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}" class="userinfo click-card" tabIndex="-1"><img data-src="{1}"></a></div>
<a href="{0}" class="notif-desc-wrapper media-body">
{2}
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
</a>
</div>
</li>
</ul>
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
<li class="{4} notif-entry">
<div class="notif-entry-wrapper media">
<div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}"
class="userinfo click-card" tabIndex="-1"><img data-src="{1}"></a></div>
<a href="{0}" class="notif-desc-wrapper media-body">
{2}
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
</a>
</div>
</li>
</ul>
{{/if}}
{{* This is the mask of the firefox logo. We set the background of #logo-img to the user icon color and apply this mask to it
The result is a friendica logo in the user icon color.*}}
<svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">
<defs>
<mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;" d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z"></path>
</mask>
</defs>
</svg>
<defs>
<mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"
d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z">
</path>
</mask>
</defs>
</svg>