friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

frio: formating, otherwise untouched

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 { .icon:before {
font-family: ForkAwesome; font-family: ForkAwesome;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
display: inline-block; display: inline-block;
text-decoration: inherit; text-decoration: inherit;
vertical-align: top; vertical-align: top;
font-size: 1.4em; font-size: 1.4em;
} }
/* media icons */ /* media icons */
.icon.type-image:before { content: "\f1c5"; } .icon.type-image:before {
.icon.type-video:before { content: "\f1c8"; } content: "\f1c5";
.icon.type-audio:before { content: "\f1c7"; } }
.icon.type-text:before { content: "\f0f6"; } .icon.type-video:before {
.icon.type-application:before { content: "\f016"; } content: "\f1c8";
.icon.type-unkn:before { content: "\f016"; } }
.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 { .hovercard {
position: absolute; position: absolute;
top: 0; top: 0;
@ -202,7 +201,6 @@
text-decoration: none !important; text-decoration: none !important;
} }
/* Basic hovercard */ /* Basic hovercard */
.basic-content { .basic-content {
padding: 9px; padding: 9px;
@ -285,7 +283,6 @@
.hover-card-header h4 { .hover-card-header h4 {
display: block; display: block;
} }
.hover-card-header h4 a { .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:first-of-type {
#users th:nth-of-type(2) { width: 40px; } width: 1em;
#users th:last-of-type { width: 1em; } }
.admin-settings-footer-elements { padding-left: 8px; padding-right: 8px; } #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, #users img.avatar-nano,
#deleted 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 td,
tr.details th { tr.details th {
border-top: 0!important; border-top: 0 !important;
} }
.adminpage td > .checkbox, .adminpage td > .checkbox,
.adminpage th > .checkbox { .adminpage th > .checkbox {
margin: 0; 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 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
$(function() { $(function () {
// Jot attachment live preview. // Jot attachment live preview.
let $textarea = $('textarea[name=body]'); let $textarea = $("textarea[name=body]");
$textarea.linkPreview(); $textarea.linkPreview();
$textarea.keyup(function(){ $textarea.keyup(function () {
var textlen = $(this).val().length; var textlen = $(this).val().length;
$('#character-counter').text(textlen); $("#character-counter").text(textlen);
}); });
$textarea.editor_autocomplete(baseurl + '/search/acl'); $textarea.editor_autocomplete(baseurl + "/search/acl");
$textarea.bbco_autocomplete('bbcode'); $textarea.bbco_autocomplete("bbcode");
let location_button = document.getElementById('profile-location'); let location_button = document.getElementById("profile-location");
let location_input = document.getElementById('jot-location'); let location_input = document.getElementById("jot-location");
if (location_button && location_input) { if (location_button && location_input) {
updateLocationButtonDisplay(location_button, location_input); updateLocationButtonDisplay(location_button, location_input);
location_input.addEventListener('change', function () { location_input.addEventListener("change", function () {
updateLocationButtonDisplay(location_button, location_input); updateLocationButtonDisplay(location_button, location_input);
}); });
location_input.addEventListener('keyup', function () { location_input.addEventListener("keyup", function () {
updateLocationButtonDisplay(location_button, location_input); updateLocationButtonDisplay(location_button, location_input);
}); });
location_button.addEventListener('click', function() { location_button.addEventListener("click", function () {
if (location_input.value) { if (location_input.value) {
location_input.value = ''; location_input.value = "";
updateLocationButtonDisplay(location_button, location_input); updateLocationButtonDisplay(location_button, location_input);
} else if ("geolocation" in navigator) { } else if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) { navigator.geolocation.getCurrentPosition(
location_input.value = position.coords.latitude + ', ' + position.coords.longitude; function (position) {
updateLocationButtonDisplay(location_button, location_input); location_input.value = position.coords.latitude + ", " + position.coords.longitude;
}, function (error) { updateLocationButtonDisplay(location_button, location_input);
location_button.disabled = true; },
updateLocationButtonDisplay(location_button, location_input); function (error) {
}); location_button.disabled = true;
updateLocationButtonDisplay(location_button, location_input);
},
);
} }
}); });
} }
}); });
function updateLocationButtonDisplay(location_button, location_input) function updateLocationButtonDisplay(location_button, location_input) {
{ location_button.classList.remove("btn-primary");
location_button.classList.remove('btn-primary');
if (location_input.value) { if (location_input.value) {
location_button.disabled = false; location_button.disabled = false;
location_button.classList.add('btn-primary'); location_button.classList.add("btn-primary");
location_button.title = location_button.dataset.titleClear; location_button.title = location_button.dataset.titleClear;
} else if (!"geolocation" in navigator) { } else if (!"geolocation" in navigator) {
location_button.disabled = true; 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 // @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. // Go to the permissions tab if the checkbox is checked.
$('body').on("click", "#id_share", function() { $("body")
if ($('#id_share').is(':checked') && !( $('#id_share').attr("disabled"))) { .on("click", "#id_share", function () {
$('#acl-wrapper').show(); if ($("#id_share").is(":checked") && !$("#id_share").attr("disabled")) {
$("a#event-perms-lnk").parent("li").show(); $("#acl-wrapper").show();
toggleEventNav("a#event-perms-lnk"); $("a#event-perms-lnk").parent("li").show();
eventAclActive(); toggleEventNav("a#event-perms-lnk");
} eventAclActive();
else { } else {
$('#acl-wrapper').hide(); $("#acl-wrapper").hide();
$("a#event-perms-lnk").parent("li").hide(); $("a#event-perms-lnk").parent("li").hide();
} }
}).trigger('change'); })
.trigger("change");
// Disable the finish time input if the user disable it. // Disable the finish time input if the user disable it.
$('body').on("change", "#id_nofinish", function() { $("body")
enableDisableFinishDate() .on("change", "#id_nofinish", function () {
}).trigger('change'); enableDisableFinishDate();
})
.trigger("change");
// JS for the permission section. // JS for the permission section.
$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() { $("#contact_allow, #contact_deny, #group_allow, #group_deny")
var selstr; .change(function () {
$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() { var selstr;
selstr = $(this).html(); $(
$('#jot-public').hide(); "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
}); ).each(function () {
if (selstr == null) { selstr = $(this).html();
$('#jot-public').show(); $("#jot-public").hide();
} });
if (selstr == null) {
}).trigger('change'); $("#jot-public").show();
}
})
.trigger("change");
// Change the event nav menu.tabs on click. // 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(); e.preventDefault();
toggleEventNav(this); toggleEventNav(this);
}); });
@ -46,7 +52,7 @@ $(document).ready(function() {
// Clear some elements (e.g. the event-preview container) when // Clear some elements (e.g. the event-preview container) when
// selecting a event nav link so it don't appear more than once. // 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(); $("#event-preview").empty();
e.preventDefault(); e.preventDefault();
}); });
@ -55,14 +61,13 @@ $(document).ready(function() {
// Load the html of the actual event and incect the output to the // Load the html of the actual event and incect the output to the
// event-edit section. // event-edit section.
function doEventPreview() { function doEventPreview() {
$('#event-edit-preview').val(1); $("#event-edit-preview").val(1);
$.post('events',$('#event-edit-form').serialize(), function(data) { $.post("events", $("#event-edit-form").serialize(), function (data) {
$("#event-preview").append(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 // The following functions show/hide the specific event-edit content
// in dependence of the selected nav. // in dependence of the selected nav.
function eventAclActive() { function eventAclActive() {
@ -70,7 +75,6 @@ function eventAclActive() {
$("#event-acl-wrapper").show(); $("#event-acl-wrapper").show();
} }
function eventPreviewActive() { function eventPreviewActive() {
$("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide(); $("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide();
$("#event-preview").show(); $("#event-preview").show();
@ -92,20 +96,16 @@ function eventDescActive() {
} }
// Give the active "event-nav" list element the class "active". // 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. // Select all li of #event-nav and remove the active class.
$(elm).closest("#event-nav").children("li").removeClass("active"); $(elm).closest("#event-nav").children("li").removeClass("active");
// Add the active class to the parent of the link which was selected. // Add the active class to the parent of the link which was selected.
$(elm).parent("li").addClass("active"); $(elm).parent("li").addClass("active");
} }
// Disable the input for the finish date if it is not available. // Disable the input for the finish date if it is not available.
function enableDisableFinishDate() { function enableDisableFinishDate() {
if( $('#id_nofinish').is(':checked')) if ($("#id_nofinish").is(":checked")) $("#id_finish_text").prop("disabled", true);
$('#id_finish_text').prop("disabled", true); else $("#id_finish_text").prop("disabled", false);
else
$('#id_finish_text').prop("disabled", false);
} }
// @license-end // @license-end

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

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

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

@ -9,16 +9,16 @@
* *
*/ */
$(document).ready(function () { $(document).ready(function () {
let $body = $('body'); let $body = $("body");
// Prevents normal click action on click hovercard elements // 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(); e.preventDefault();
}); });
// This event listener needs to be declared before the one that removes // 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 // all cards so that we can stop the immediate propagation of the event
// Since the manual popover appears instantly and the hovercard removal is // Since the manual popover appears instantly and the hovercard removal is
// on a 100ms delay, leaving event propagation immediately hides any click hovercard // 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(); e.stopImmediatePropagation();
let timeNow = new Date().getTime(); let timeNow = new Date().getTime();
@ -26,14 +26,14 @@ $(document).ready(function () {
let targetElement = $(this); let targetElement = $(this);
// get href-attribute // get href-attribute
if (targetElement.is('[href]')) { if (targetElement.is("[href]")) {
contactUrl = targetElement.attr('href'); contactUrl = targetElement.attr("href");
} else { } else {
return true; return true;
} }
// no hovercard for anchor links // no hovercard for anchor links
if (contactUrl.substring(0, 1) === '#') { if (contactUrl.substring(0, 1) === "#") {
return true; return true;
} }
@ -41,59 +41,62 @@ $(document).ready(function () {
}); });
// hover cards should be removed very easily, e.g. when any of these events happens // 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 // remove hover card only for desktiop user, since on mobile we open the hovercards
// by click event insteadof hover // by click event insteadof hover
removeAllHovercards(e, new Date().getTime()); removeAllHovercards(e, new Date().getTime());
}); });
$body.on('mouseover', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { $body
let timeNow = new Date().getTime(); .on("mouseover", ".userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a", function (e) {
removeAllHovercards(e, timeNow); let timeNow = new Date().getTime();
let contactUrl = false; removeAllHovercards(e, timeNow);
let targetElement = $(this); let contactUrl = false;
let targetElement = $(this);
// get href-attribute // get href-attribute
if (targetElement.is('[href]')) { if (targetElement.is("[href]")) {
contactUrl = targetElement.attr('href'); contactUrl = targetElement.attr("href");
} else { } else {
return true; 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);
} }
}, 500);
}).on('mouseleave', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { // action when mouse leaves the hover-card // no hover card if the element has the no-hover-card class
removeAllHovercards(e, new Date().getTime()); 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 // if we're hovering a hover card, give it a class, so we don't remove it
$body.on('mouseover', '.hovercard', function (e) { $body.on("mouseover", ".hovercard", function (e) {
$(this).addClass('dont-remove-card'); $(this).addClass("dont-remove-card");
}); });
$body.on('mouseleave', '.hovercard', function (e) { $body.on("mouseleave", ".hovercard", function (e) {
$(this).removeClass('dont-remove-card'); $(this).removeClass("dont-remove-card");
$(this).popover('hide'); $(this).popover("hide");
}); });
}); // End of $(document).ready }); // End of $(document).ready
@ -101,20 +104,20 @@ $(document).ready(function () {
function removeAllHovercards(event, priorTo) { 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) // 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 () { setTimeout(function () {
$.each($('.hovercard'), function () { $.each($(".hovercard"), function () {
let title = $(this).attr('data-orig-title'); let title = $(this).attr("data-orig-title");
// don't remove card if it was created after removeAllhoverCards() was called // 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! // don't remove it if we're hovering it right now!
if (!$(this).hasClass('dont-remove-card')) { if (!$(this).hasClass("dont-remove-card")) {
let $handle = $('[data-hover-card-active="' + $(this).data('card-created') + '"]'); let $handle = $('[data-hover-card-active="' + $(this).data("card-created") + '"]');
$handle.removeAttr('data-hover-card-active'); $handle.removeAttr("data-hover-card-active");
// Restoring the popover handle title // Restoring the popover handle title
let title = $handle.attr('data-orig-title'); let title = $handle.attr("data-orig-title");
$handle.attr({'data-orig-title': '', title: 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) { function openHovercard(targetElement, contactUrl, timeNow) {
// store the title in a data attribute because Bootstrap // store the title in a data attribute because Bootstrap
// popover destroys the title attribute. // popover destroys the title attribute.
let title = targetElement.attr('title'); let title = targetElement.attr("title");
targetElement.attr({'data-orig-title': title, title: ''}); targetElement.attr({ "data-orig-title": title, title: "" });
// get an additional data atribute if the card is active // 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 // get the whole html content of the hover card and
// push it to the bootstrap popover // push it to the bootstrap popover
getHoverCardContent(contactUrl, function (data) { getHoverCardContent(contactUrl, function (data) {
if (data) { if (data) {
targetElement.popover({ targetElement
html: true, .popover({
placement: function () { html: true,
// Calculate the placement of the the hovercard (if top or bottom) placement: function () {
// The placement depence on the distance between window top and the element // Calculate the placement of the the hovercard (if top or bottom)
// which triggers the hover-card // The placement depence on the distance between window top and the element
let get_position = $(targetElement).offset().top - $(window).scrollTop(); // which triggers the hover-card
if (get_position < 270) { let get_position = $(targetElement).offset().top - $(window).scrollTop();
return 'bottom'; if (get_position < 270) {
} return "bottom";
return 'top'; }
}, 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>', trigger: "manual",
content: data, template:
container: 'body', '<div class="popover hovercard" data-card-created="' +
sanitizeFn: function (content) { timeNow +
return DOMPurify.sanitize(content) '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
}, content: data,
}).popover('show'); container: "body",
sanitizeFn: function (content) {
return DOMPurify.sanitize(content);
},
})
.popover("show");
} }
}); });
} }
@ -176,7 +184,7 @@ function getHoverCardContent(contact_url, callback) {
} }
$.ajax({ $.ajax({
url: baseurl + '/contact/hovercard', url: baseurl + "/contact/hovercard",
data: postdata, data: postdata,
success: function (data, textStatus, request) { success: function (data, textStatus, request) {
getHoverCardContent.cache[nurl] = data; 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. * Insert a link into friendica jot.
* *
* @returns {void} * @returns {void}
*/ */
function jotGetLink() { function jotGetLink() {
var currentText = $("#profile-jot-text").val(); var currentText = $("#profile-jot-text").val();
var noAttachment = ''; var noAttachment = "";
reply = prompt(aStr.linkurl); reply = prompt(aStr.linkurl);
if(reply && reply.length) { if (reply && reply.length) {
// There should be only one attachment per post. // There should be only one attachment per post.
// So we need to remove the old one. // So we need to remove the old one.
$('#jot-attachment-preview').empty(); $("#jot-attachment-preview").empty();
$('#profile-rotator').show(); $("#profile-rotator").show();
if (currentText.includes("[attachment") && currentText.includes("[/attachment]")) { if (currentText.includes("[attachment") && currentText.includes("[/attachment]")) {
noAttachment = '&noAttachment=1'; noAttachment = "&noAttachment=1";
} }
// We use the linkPreview library to have a preview // We use the linkPreview library to have a preview
// of the attachments. // of the attachments.
if (typeof linkPreview === 'object') { if (typeof linkPreview === "object") {
linkPreview.crawlText(reply + noAttachment); linkPreview.crawlText(reply + noAttachment);
// Fallback: insert the attachment bbcode directly into the textarea // Fallback: insert the attachment bbcode directly into the textarea
// if the attachment live preview isn't available // if the attachment live preview isn't available
} else { } else {
$.get('parse_url?binurl=' + bin2hex(reply) + noAttachment, function(data) { $.get("parse_url?binurl=" + bin2hex(reply) + noAttachment, function (data) {
addeditortext(data); addeditortext(data);
$('#profile-rotator').hide(); $("#profile-rotator").hide();
}); });
} }
autosize.update($("#profile-jot-text")); autosize.update($("#profile-jot-text"));

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

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

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

@ -2,22 +2,20 @@
var batchConfirmed = false; var batchConfirmed = false;
$(document).ready(function() { $(document).ready(function () {
// Initiale autosize for the textareas. // Initiale autosize for the textareas.
autosize($("textarea.text-autosize")); autosize($("textarea.text-autosize"));
// Replace the drop contact link of the photo menu // Replace the drop contact link of the photo menu
// with a confirmation modal. // with a confirmation modal.
$("body").on("click", ".contact-photo-menu a", function(e) { $("body").on("click", ".contact-photo-menu a", function (e) {
var photoMenuLink = $(this).attr('href'); var photoMenuLink = $(this).attr("href");
if (typeof photoMenuLink !== "undefined" && photoMenuLink.indexOf("/drop?confirm=1") !== -1) { if (typeof photoMenuLink !== "undefined" && photoMenuLink.indexOf("/drop?confirm=1") !== -1) {
e.preventDefault(); e.preventDefault();
addToModal(photoMenuLink); addToModal(photoMenuLink);
return false; return false;
} }
}); });
}); });
/** /**
@ -25,7 +23,7 @@ $(document).ready(function() {
* *
* @param {string} name The name of the batch action. * @param {string} name The name of the batch action.
* @param {string} value If it isn't empty the action will be posted. * @param {string} value If it isn't empty the action will be posted.
* *
* @return {void} * @return {void}
*/ */
function batch_submit_handler(name, value) { 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 // Catch the GUID from the URL
var itemGuid = window.location.pathname.split("/").pop(); var itemGuid = window.location.pathname.split("/").pop();
$(window).load(function(){ $(window).load(function () {
// Scroll to the Item by its GUID // Scroll to the Item by its GUID
scrollToItem('item-' + itemGuid); scrollToItem("item-" + itemGuid);
}); });
// @license-end // @license-end

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

@ -4,75 +4,86 @@
* Initialization of the fullCalendar and format the output. * Initialization of the fullCalendar and format the output.
*/ */
$(document).ready(function() { $(document).ready(function () {
// start the fullCalendar // start the fullCalendar
$('#events-calendar').fullCalendar({ $("#events-calendar").fullCalendar({
firstDay: aStr.firstDay, firstDay: aStr.firstDay,
monthNames: aStr['monthNames'], monthNames: aStr["monthNames"],
monthNamesShort: aStr['monthNamesShort'], monthNamesShort: aStr["monthNamesShort"],
dayNames: aStr['dayNames'], dayNames: aStr["dayNames"],
dayNamesShort: aStr['dayNamesShort'], dayNamesShort: aStr["dayNamesShort"],
allDayText: aStr.allday, allDayText: aStr.allday,
noEventsMessage: aStr.noevent, noEventsMessage: aStr.noevent,
buttonText: { buttonText: {
today: aStr.today, today: aStr.today,
month: aStr.month, month: aStr.month,
week: aStr.week, week: aStr.week,
day: aStr.day day: aStr.day,
}, },
events: baseurl + moduleUrl + '/json/', events: baseurl + moduleUrl + "/json/",
header: { header: {
left: '', left: "",
// center: 'title', // center: 'title',
right: '' right: "",
}, },
timeFormat: 'H:mm', timeFormat: "H:mm",
eventClick: function(calEvent, jsEvent, view) { eventClick: function (calEvent, jsEvent, view) {
showEvent(calEvent.id); showEvent(calEvent.id);
}, },
loading: function(isLoading, view) { loading: function (isLoading, view) {
if(!isLoading) { if (!isLoading) {
$('td.fc-day').dblclick(function() { addToModal('/events/new?start='+$(this).data('date')); }); $("td.fc-day").dblclick(function () {
addToModal("/events/new?start=" + $(this).data("date"));
});
} }
}, },
defaultView: 'month', defaultView: "month",
aspectRatio: 1, aspectRatio: 1,
eventRender: function(event, element, view) { eventRender: function (event, element, view) {
//console.log(view.name); //console.log(view.name);
switch(view.name){ switch (view.name) {
case "month": case "month":
element.find(".fc-title").html( element
"<span class='item-desc'>{2}</span>".format( .find(".fc-title")
event.item['author-avatar'], .html(
event.item['author-name'], "<span class='item-desc'>{2}</span>".format(
event.title, event.item["author-avatar"],
event.item.desc, event.item["author-name"],
event.item.location event.title,
)); event.item.desc,
event.item.location,
),
);
break; break;
case "agendaWeek": case "agendaWeek":
if (event.item['author-name'] == null) return; if (event.item["author-name"] == null) return;
element.find(".fc-title").html( element
"<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format( .find(".fc-title")
event.item['author-avatar'], .html(
event.item['author-name'], "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item.desc, event.item["author-avatar"],
htmlToText(event.item.location) event.item["author-name"],
)); event.item.desc,
break; htmlToText(event.item.location),
),
);
break;
case "agendaDay": case "agendaDay":
if (event.item['author-name'] == null) return; if (event.item["author-name"] == null) return;
element.find(".fc-title").html( element
"<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format( .find(".fc-title")
event.item['author-avatar'], .html(
event.item['author-name'], "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
event.item.desc, event.item["author-avatar"],
htmlToText(event.item.location) event.item["author-name"],
)); event.item.desc,
htmlToText(event.item.location),
),
);
break; break;
case "listMonth": case "listMonth":
element.find(".fc-list-item-title").html(formatListViewEvent(event)); element.find(".fc-list-item-title").html(formatListViewEvent(event));
break; break;
} }
}, },
eventAfterRender: function (event, element) { eventAfterRender: function (event, element) {
@ -82,54 +93,53 @@ $(document).ready(function() {
html: true, html: true,
trigger: "hover", trigger: "hover",
placement: "auto", 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) { sanitizeFn: function (content) {
return DOMPurify.sanitize(content) return DOMPurify.sanitize(content);
}, },
}); });
},
} });
})
// center on date // center on date
var args=location.href.replace(baseurl,"").split("/"); var args = location.href.replace(baseurl, "").split("/");
if (modparams == 2) { if (modparams == 2) {
if (args.length>=5) { if (args.length >= 5) {
$("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1); $("#events-calendar").fullCalendar("gotoDate", args[3], args[4] - 1);
} }
} else { } else {
if (args.length>=4) { if (args.length >= 4) {
$("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1); $("#events-calendar").fullCalendar("gotoDate", args[2], args[3] - 1);
} }
} }
// echo the title // echo the title
var view = $('#events-calendar').fullCalendar('getView'); var view = $("#events-calendar").fullCalendar("getView");
$('#fc-title').text(view.title); $("#fc-title").text(view.title);
// show event popup // show event popup
var hash = location.hash.split("-") var hash = location.hash.split("-");
if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]); if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
}); });
// loads the event into a modal // loads the event into a modal
function showEvent(eventid) { function showEvent(eventid) {
addToModal(baseurl + moduleUrl + '/?id=' + eventid); addToModal(baseurl + moduleUrl + "/?id=" + eventid);
} }
function changeView(action, viewName) { function changeView(action, viewName) {
$('#events-calendar').fullCalendar(action, viewName); $("#events-calendar").fullCalendar(action, viewName);
var view = $('#events-calendar').fullCalendar('getView'); var view = $("#events-calendar").fullCalendar("getView");
$('#fc-title').text(view.title); $("#fc-title").text(view.title);
} }
// The template for the bootstrap popover for displaying the event title and // 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 // author (it's the nearly the same template we use in frio for the contact
// hover cards. So be careful when changing the css) // hover cards. So be careful when changing the css)
function eventHoverBodyTemplate() { function eventHoverBodyTemplate() {
var template = '\ var template =
'\
<div class="event-card-basic-content media">\ <div class="event-card-basic-content media">\
<div class="event-card-details">\ <div class="event-card-details">\
<div class="event-card-header">\ <div class="event-card-header">\
@ -154,52 +164,53 @@ function eventHoverBodyTemplate() {
// The template for presenting the event location in the event hover-card // The template for presenting the event location in the event hover-card
function eventHoverLocationTemplate() { 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>'; <span class="event-card-location"> {0}</span></div>';
return template; return template;
} }
function eventHoverProfileNameTemplate() { function eventHoverProfileNameTemplate() {
var template = '\ var template =
'\
<div class="event-card-profile-name profile-entry-name">\ <div class="event-card-profile-name profile-entry-name">\
<a href="{0}" class="userinfo">{1}</a>\ <a href="{0}" class="userinfo">{1}</a>\
</div>'; </div>';
return template; 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) { function eventHoverHtmlContent(event) {
var eventLocation = ''; var eventLocation = "";
var eventProfileName = ''; var eventProfileName = "";
// Get the Browser language // Get the Browser language
var locale = window.navigator.userLanguage || window.navigator.language; var locale = window.navigator.userLanguage || window.navigator.language;
var data = ''; var data = "";
// Use the browser language for date formatting // Use the browser language for date formatting
moment.locale(locale); moment.locale(locale);
// format dates to different styles // format dates to different styles
var startDate = moment(event.item.start).format('dd HH:mm'); var startDate = moment(event.item.start).format("dd HH:mm");
var endDate = moment(event.item.finsih).format('dd HH:mm'); var endDate = moment(event.item.finsih).format("dd HH:mm");
var monthShort = moment(event.item.start).format('MMM'); var monthShort = moment(event.item.start).format("MMM");
var dayNumberStart = moment(event.item.start).format('DD'); var dayNumberStart = moment(event.item.start).format("DD");
var dayNumberEnd = moment(event.item.finish).format('DD'); var dayNumberEnd = moment(event.item.finish).format("DD");
var startTime = moment(event.item.start).format('HH:mm'); var startTime = moment(event.item.start).format("HH:mm");
var endTime = moment(event.item.finish).format('HH:mm'); var endTime = moment(event.item.finish).format("HH:mm");
var monthNumber; var monthNumber;
var formattedDate = startDate; var formattedDate = startDate;
// We only need the to format the end date if the event does have // 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) { if (event.item.nofinish == 0) {
formattedDate = startDate + ' - ' + endTime; formattedDate = startDate + " - " + endTime;
// use a different Format (15. Feb - 18. Feb) if the events end date // use a different Format (15. Feb - 18. Feb) if the events end date
// is not the start date // is not the start date
if ( dayNumberStart != dayNumberEnd) { if (dayNumberStart != dayNumberEnd) {
formattedDate = moment(event.item.start).format('Do MMM') + formattedDate =
' - ' + moment(event.item.start).format("Do MMM") + " - " + moment(event.item.finish).format("Do MMM");
moment(event.item.finish).format('Do MMM');
} }
} }
@ -213,32 +224,27 @@ function eventHoverHtmlContent(event) {
var eventLocationTemplate = eventHoverLocationTemplate(); var eventLocationTemplate = eventHoverLocationTemplate();
// Format the event location data according to the the event location // Format the event location data according to the the event location
// template // template
eventLocation = eventLocationTemplate.format( eventLocation = eventLocationTemplate.format(eventLocationText);
eventLocationText
);
} }
// Get only template data if there exists a profile name // Get only template data if there exists a profile name
if (event.item['author-name']) { if (event.item["author-name"]) {
// Get the template // Get the template
var eventProfileNameTemplate = eventHoverProfileNameTemplate(); var eventProfileNameTemplate = eventHoverProfileNameTemplate();
// Insert the data into the template // Insert the data into the template
eventProfileName = eventProfileNameTemplate.format( eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]);
event.item['author-link'],
event.item['author-name']
);
} }
// Format the event data according to the event hover template // Format the event data according to the event hover template
var formatted = data.format( var formatted = data.format(
event.item['author-avatar'], // this isn't used at the present time event.item["author-avatar"], // this isn't used at the present time
eventProfileName, eventProfileName,
event.title, event.title,
eventLocation, eventLocation,
formattedDate, formattedDate,
monthShort.replace('.', ''), // Get rid of possible dots in the string monthShort.replace(".", ""), // Get rid of possible dots in the string
dayNumberStart dayNumberStart,
); );
return formatted; return formatted;
} }
@ -246,7 +252,8 @@ function eventHoverHtmlContent(event) {
// transform the the list view event element into formatted html // transform the the list view event element into formatted html
function formatListViewEvent(event) { function formatListViewEvent(event) {
// The basic template for list view // 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>\ <hr class="seperator"></hr>\
<div class="event-card">\ <div class="event-card">\
<div class="popover-content hovercard-content">{0}</div>\ <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 * The javascript for the group module
*/ */
$(document).ready(function () {
$(document).ready(function() {
// Add an event listeners on buttons for switching the contact list view // 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); switchGroupViewMode(this);
}); });
}); });
@ -28,16 +27,16 @@ function groupChangeMember(gid, cid, sec_token) {
$(".tooltip").tooltip("hide"); $(".tooltip").tooltip("hide");
$("body").css("cursor", "wait"); $("body").css("cursor", "wait");
$.get('group/' + gid + '/' + cid + "?t=" + sec_token, function(data) { $.get("group/" + gid + "/" + cid + "?t=" + sec_token, function (data) {
// Insert the new group member list // Insert the new group member list
$("#group-update-wrapper").html(data); $("#group-update-wrapper").html(data);
// Apply the actual gropu list view mode to the new // Apply the actual gropu list view mode to the new
// group list html // group list html
var activeMode = $(".group-list-switcher.active"); var activeMode = $(".group-list-switcher.active");
switchGroupViewMode(activeMode[0]); switchGroupViewMode(activeMode[0]);
$("body").css("cursor", "auto"); $("body").css("cursor", "auto");
}); });
} }
@ -48,17 +47,17 @@ function groupChangeMember(gid, cid, sec_token) {
* @returns {undefined} * @returns {undefined}
*/ */
function switchGroupViewMode(elm) { function switchGroupViewMode(elm) {
// Remove the active class from group list switcher buttons // Remove the active class from group list switcher buttons
$(".group-list-switcher").removeClass("active"); $(".group-list-switcher").removeClass("active");
// And add it to the active button element // And add it to the active button element
$(elm).addClass("active"); $(elm).addClass("active");
// Add or remove the css classes for the group list with regard to the active view mode // Add or remove the css classes for the group list with regard to the active view mode
if (elm.id === "group-list-small") { if (elm.id === "group-list-small") {
$("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); $("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12");
} else { } else {
$("#contact-group-list > li").removeClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); $("#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 // Catch the intro ID from the URL
var introID = location.pathname.split("/").pop(); var introID = location.pathname.split("/").pop();
$(document).ready(function(){ $(document).ready(function () {
// Since only the DIV's inside the notification-list are marked // Since only the DIV's inside the notification-list are marked
// with the class "unseen", we need some js to transfer this class // with the class "unseen", we need some js to transfer this class
// to the parent li list-elements. // to the parent li list-elements.
if($(".notif-item").hasClass("unseen")) { if ($(".notif-item").hasClass("unseen")) {
$(".notif-item.unseen").parent("li").addClass("unseen"); $(".notif-item.unseen").parent("li").addClass("unseen");
} }
}); });
$(window).load(function(){ $(window).load(function () {
// Scroll to the intro by its intro ID. // Scroll to the intro by its intro ID.
if (isIntroID()) { 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 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
$(document).ready(function() { $(document).ready(function () {
$("#contact_allow, #contact_deny, #group_allow, #group_deny")
$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() { .change(function () {
var selstr; var selstr;
$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() { $(
selstr = $(this).html(); "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected",
$('#jot-perms-icon').removeClass('unlock').addClass('lock'); ).each(function () {
$('#jot-public').hide(); selstr = $(this).html();
}); $("#jot-perms-icon").removeClass("unlock").addClass("lock");
if(selstr == null) { $("#jot-public").hide();
$('#jot-perms-icon').removeClass('lock').addClass('unlock'); });
$('#jot-public').show(); if (selstr == null) {
} $("#jot-perms-icon").removeClass("lock").addClass("unlock");
$("#jot-public").show();
}).trigger('change'); }
})
.trigger("change");
// Click event listener for the album edit link/button. // 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"); var modalUrl = $(this).attr("data-modal-url");
if (typeof modalUrl !== "undefined") { 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. // 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"); var modalUrl = $(this).attr("data-modal-url");
if (typeof modalUrl !== "undefined") { if (typeof modalUrl !== "undefined") {
@ -35,7 +37,7 @@ $(document).ready(function() {
}); });
}); });
$(window).load(function() { $(window).load(function () {
// Get picture dimensions // Get picture dimensions
var pheight = $("#photo-photo img").height(); var pheight = $("#photo-photo img").height();
var pwidth = $("#photo-photo img").width(); 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 // 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 // we do this to make it possible to have overlay navigation buttons for the photo
$("#photo-photo").css({ $("#photo-photo").css({
"width": pwidth, width: pwidth,
"height": pheight height: pheight,
}); });
}); });
// @license-end // @license-end

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

@ -2,13 +2,13 @@
/** /**
* Contains functions for bootstrap modal handling. * Contains functions for bootstrap modal handling.
*/ */
$(document).ready(function(){ $(document).ready(function () {
// Clear bs modal on close. // Clear bs modal on close.
// We need this to prevent that the modal displays old content. // We need this to prevent that the modal displays old content.
$('body, footer').on('hidden.bs.modal', '.modal', function () { $("body, footer").on("hidden.bs.modal", ".modal", function () {
$(this).removeData('bs.modal'); $(this).removeData("bs.modal");
$("#modal-title").empty(); $("#modal-title").empty();
$('#modal-body').empty(); $("#modal-body").empty();
// Remove the file browser from jot (else we would have problems // Remove the file browser from jot (else we would have problems
// with AjaxUpload. // with AjaxUpload.
$(".fbrowser").remove(); $(".fbrowser").remove();
@ -18,20 +18,20 @@ $(document).ready(function(){
// Clear bs modal on close. // Clear bs modal on close.
// We need this to prevent that the modal displays old content. // 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"). // Restore cached jot at its hidden position ("#jot-content").
$("#jot-content").append(jotcache); $("#jot-content").append(jotcache);
// Clear the jotcache. // Clear the jotcache.
jotcache = ''; jotcache = "";
// Destroy the attachment linkPreviw for Jot. // Destroy the attachment linkPreviw for Jot.
if (typeof linkPreview === 'object') { if (typeof linkPreview === "object") {
linkPreview.destroy(); linkPreview.destroy();
} }
}); });
// Add Colorbox for viewing Network page images. // Add Colorbox for viewing Network page images.
//var cBoxClasses = new Array(); //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 aElem = $(this).parent();
var imgHref = aElem.attr("href"); 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 // We'll try to do this by looking for links of the form
// .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes // .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
// that that will be unique enough. // 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 // 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"; var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
$(this).addClass(cBoxClass); $(this).addClass(cBoxClass);
// if( $.inArray(cBoxClass, cBoxClasses) < 0 ) { // if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
// cBoxClasses.push(cBoxClass); // cBoxClasses.push(cBoxClass);
// } // }
aElem.colorbox({ aElem.colorbox({
maxHeight: '90%', maxHeight: "90%",
photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo. 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. // Navbar login.
$("body").on("click", "#nav-login", function(e){ $("body").on("click", "#nav-login", function (e) {
e.preventDefault(); e.preventDefault();
Dialog.show(this.href, this.dataset.originalTitle || this.title); Dialog.show(this.href, this.dataset.originalTitle || this.title);
}); });
// Jot nav menu.. // 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(); e.preventDefault();
toggleJotNav(this); toggleJotNav(this);
}); });
// Bookmarklet page needs an jot modal which appears automatically. // 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(); jotShow();
} }
// Open filebrowser for elements with the class "image-select" // Open filebrowser for elements with the class "image-select"
// The following part handles the filebrowser for field_fileinput.tpl. // 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. // Set a extra attribute to mark the clicked button.
this.setAttribute("image-input", "select"); this.setAttribute("image-input", "select");
Dialog.doImageBrowser("input"); Dialog.doImageBrowser("input");
}); });
// Insert filebrowser images into the input field (field_fileinput.tpl). // 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. // Select the clicked button by it's attribute.
var elm = $("[image-input='select']"); var elm = $("[image-input='select']");
// Select the input field which belongs to this button. // Select the input field which belongs to this button.
@ -92,15 +91,14 @@ $(document).ready(function(){
elm.removeAttr("image-input"); elm.removeAttr("image-input");
// Insert the link from the image into the input field. // Insert the link from the image into the input field.
input.val(img); input.val(img);
}); });
// Generic delegated event to open an anchor URL in a modal. // Generic delegated event to open an anchor URL in a modal.
// Used in the hovercard. // Used in the hovercard.
document.getElementsByTagName('body')[0].addEventListener('click', function(e) { document.getElementsByTagName("body")[0].addEventListener("click", function (e) {
var target = e.target; var target = e.target;
while (target) { while (target) {
if (target.matches && target.matches('a.add-to-modal')) { if (target.matches && target.matches("a.add-to-modal")) {
addToModal(target.href); addToModal(target.href);
e.preventDefault(); e.preventDefault();
return false; return false;
@ -112,55 +110,53 @@ $(document).ready(function(){
}); });
// Overwrite Dialog.show from main js to load the filebrowser into a bs modal. // Overwrite Dialog.show from main js to load the filebrowser into a bs modal.
Dialog.show = function(url, title) { Dialog.show = function (url, title) {
if (typeof(title) === 'undefined') { if (typeof title === "undefined") {
title = ""; title = "";
} }
var modal = $('#modal').modal(); var modal = $("#modal").modal();
modal.find("#modal-header h4").html(title); modal.find("#modal-header h4").html(title);
modal modal.find("#modal-body").load(url, function (responseText, textStatus) {
.find('#modal-body') if (textStatus === "success" || textStatus === "notmodified") {
.load(url, function (responseText, textStatus) { modal.show();
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.show();
$(function() {Dialog._load(url);}); $(function () {
} Dialog._load(url);
}); });
}
});
}; };
// Overwrite the function _get_url from main.js. // 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; var hash = name;
if (id !== undefined) hash = hash + "-" + id; 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. // Does load the filebrowser into the jot modal.
Dialog.showJot = function() { Dialog.showJot = function () {
var type = "image"; var type = "image";
var name = "main"; var name = "main";
var url = Dialog._get_url(type, name); 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. // Load new content to fbrowser window.
$("#jot-fbrowser-wrapper").load(url,function(responseText, textStatus){ $("#jot-fbrowser-wrapper").load(url, function (responseText, textStatus) {
if ( textStatus === 'success' || if (textStatus === "success" || textStatus === "notmodified") {
textStatus === 'notmodified') $(function () {
{ Dialog._load(url);
$(function() {Dialog._load(url);}); });
} }
}); });
} }
}; };
// Init the filebrowser after page load. // Init the filebrowser after page load.
Dialog._load = function(url) { Dialog._load = function (url) {
// Get nickname & filebrowser type from the modal content. // 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. // Try to fetch the hash form the url.
let match = url.match(/fbrowser\/[a-z]+\/.*(#.*)/); let match = url.match(/fbrowser\/[a-z]+\/.*(#.*)/);
@ -170,14 +166,14 @@ Dialog._load = function(url) {
// Initialize the filebrowser. // Initialize the filebrowser.
loadScript("view/js/ajaxupload.js"); 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]); FileBrowser.init(filebrowser.dataset.nickname, filebrowser.dataset.type, match[1]);
}); });
}; };
/** /**
* Add first element with the class "heading" as modal title * Add first element with the class "heading" as modal title
* *
* Note: this should be really done in the template * Note: this should be really done in the template
* and is the solution where we havent done it until this * and is the solution where we havent done it until this
* moment or where it isn't possible because of design * moment or where it isn't possible because of design
@ -195,22 +191,21 @@ function loadModalTitle() {
title = $("#modal-body .heading").first().html(); title = $("#modal-body .heading").first().html();
// for event modals we need some speacial handling // 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;'; title = '<i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;';
var eventsum = $("#modal-body .event-wrapper .event-summary").html(); var eventsum = $("#modal-body .event-wrapper .event-summary").html();
title = title + eventsum; title = title + eventsum;
} }
// And append it to modal title. // And append it to modal title.
if (title!=="") { if (title !== "") {
$("#modal-title").append(title); $("#modal-title").append(title);
} }
} }
/** /**
* This function loads html content from a friendica page into a modal. * This function loads html content from a friendica page into a modal.
* *
* @param {string} url The url with html content. * @param {string} url The url with html content.
* @param {string} id The ID of a html element (can be undefined). * @param {string} id The ID of a html element (can be undefined).
* @returns {void} * @returns {void}
@ -218,42 +213,35 @@ function loadModalTitle() {
function addToModal(url, id) { function addToModal(url, id) {
var char = qOrAmp(url); var char = qOrAmp(url);
url = url + char + 'mode=none'; url = url + char + "mode=none";
var modal = $('#modal').modal(); var modal = $("#modal").modal();
// Only search for an element if we have an ID. // Only search for an element if we have an ID.
if (typeof id !== "undefined") { if (typeof id !== "undefined") {
url = url + " div#" + id; url = url + " div#" + id;
} }
modal modal.find("#modal-body").load(url, function (responseText, textStatus) {
.find('#modal-body') if (textStatus === "success" || textStatus === "notmodified") {
.load(url, function (responseText, textStatus) { modal.show();
if ( textStatus === 'success' ||
textStatus === 'notmodified')
{
modal.show();
//Get first element with the class "heading" //Get first element with the class "heading"
//and use it as title. //and use it as title.
loadModalTitle(); loadModalTitle();
// We need to initialize autosize again for new // We need to initialize autosize again for new
// modal conent. // modal conent.
autosize($('.modal .text-autosize')); autosize($(".modal .text-autosize"));
} }
}); });
} }
// Add an element (by its id) to a bootstrap modal. // Add an element (by its id) to a bootstrap modal.
function addElmToModal(id) { function addElmToModal(id) {
var elm = $(id).html(); var elm = $(id).html();
var modal = $('#modal').modal(); var modal = $("#modal").modal();
modal modal.find("#modal-body").append(elm).modal.show;
.find('#modal-body')
.append(elm)
.modal.show;
loadModalTitle(); loadModalTitle();
} }
@ -269,12 +257,12 @@ function editpost(url) {
// Test if in the url path containing "events/event". If the path containing this // 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 // expression then we will call the addToModal function and exit this function at
// this point. // this point.
if (splitURL.path.indexOf('events/event') > -1) { if (splitURL.path.indexOf("events/event") > -1) {
addToModal(splitURL.path); addToModal(splitURL.path);
return; return;
} }
var modal = $('#jot-modal').modal(); var modal = $("#jot-modal").modal();
url = url + " #jot-sections"; url = url + " #jot-sections";
$(".jot-nav .jot-perms-lnk").parent("li").addClass("hidden"); $(".jot-nav .jot-perms-lnk").parent("li").addClass("hidden");
@ -293,34 +281,29 @@ function editpost(url) {
jotreset(); jotreset();
modal modal.find("#jot-modal-content").load(url, function (responseText, textStatus) {
.find('#jot-modal-content') if (textStatus === "success" || textStatus === "notmodified") {
.load(url, function (responseText, textStatus) { // get the item type and hide the input for title and category if it isn't needed.
if ( textStatus === 'success' || var type = $(responseText).find("#profile-jot-form input[name='type']").val();
textStatus === 'notmodified') if (type === "wall-comment" || type === "remote-comment") {
{ // Hide title and category input fields because we don't.
// get the item type and hide the input for title and category if it isn't needed. $("#profile-jot-form #jot-title-wrap").hide();
var type = $(responseText).find("#profile-jot-form input[name='type']").val(); $("#profile-jot-form #jot-category-wrap").hide();
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.show();
$("#jot-popup").show();
linkPreview = $("#profile-jot-text").linkPreview();
}
});
} }
// Remove content from the jot modal. // Remove content from the jot modal.
function jotreset() { function jotreset() {
// Clear bs modal on close. // Clear bs modal on close.
// We need this to prevent that the modal displays old content. // We need this to prevent that the modal displays old content.
$('body').on('hidden.bs.modal', '#jot-modal.edit-jot', function () { $("body").on("hidden.bs.modal", "#jot-modal.edit-jot", function () {
$(this).removeData('bs.modal'); $(this).removeData("bs.modal");
$(".jot-nav .jot-perms-lnk").parent("li").removeClass("hidden"); $(".jot-nav .jot-perms-lnk").parent("li").removeClass("hidden");
$("#profile-jot-form #jot-title-wrap").show(); $("#profile-jot-form #jot-title-wrap").show();
$("#profile-jot-form #jot-category-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". // 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. // Get the ID of the tab panel which should be activated.
var tabpanel = elm.getAttribute("aria-controls"); var tabpanel = elm.getAttribute("aria-controls");
var cls = hasClass(elm, "jot-nav-lnk-mobile"); 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 // Minimize all tab content wrapper and activate only the selected
// tab panel. // tab panel.
$('#profile-jot-form > [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true"); $("#profile-jot-form > [role=tabpanel]").addClass("minimize").attr("aria-hidden", "true");
$('#' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false"); $("#" + tabpanel)
.removeClass("minimize")
.attr("aria-hidden", "false");
// Set the aria-selected states // Set the aria-selected states
$("#jot-modal .modal-header .nav-tabs .jot-nav-lnk").attr("aria-selected", "false"); $("#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") { if (tabpanel === "jot-preview-content") {
preview_post(); preview_post();
// Make Share button visivle in preview // 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") { } else if (tabpanel === "jot-fbrowser-wrapper") {
$(function() { $(function () {
Dialog.showJot(); Dialog.showJot();
}); });
} }
@ -377,7 +362,7 @@ function openWallMessage(url) {
// If the host isn't the same we can't load it in a modal. // If the host isn't the same we can't load it in a modal.
// So we will go to to the url directly. // 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; window.location.href = url;
} else { } else {
// Otherwise load the wall message into a modal. // 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. /// @todo Rename this function because it can be used for more than events.
function eventEdit(url) { function eventEdit(url) {
var char = qOrAmp(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").empty();
$("#modal-body").append(data); $("#modal-body").append(data);
}).done(function() { }).done(function () {
loadModalTitle(); 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/ // Lifted from https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
jQuery.fn.putCursorAtEnd = function() { jQuery.fn.putCursorAtEnd = function () {
return this.each(function() { return this.each(function () {
// Cache references // Cache references
var $el = $(this), var $el = $(this),
el = this; el = this;
@ -21,7 +21,7 @@ jQuery.fn.putCursorAtEnd = function() {
var len = $el.val().length * 2; var len = $el.val().length * 2;
// Timeout seems to be required for Blink // Timeout seems to be required for Blink
setTimeout(function() { setTimeout(function () {
el.setSelectionRange(len, len); el.setSelectionRange(len, len);
}, 1); }, 1);
} else { } else {
@ -38,9 +38,9 @@ jQuery.fn.putCursorAtEnd = function() {
function commentGetLink(id, prompttext) { function commentGetLink(id, prompttext) {
reply = prompt(prompttext); reply = prompt(prompttext);
if(reply && reply.length) { if (reply && reply.length) {
reply = bin2hex(reply); reply = bin2hex(reply);
$.get('parse_url?noAttachment=1&binurl=' + reply, function(data) { $.get("parse_url?noAttachment=1&binurl=" + reply, function (data) {
addCommentText(data, id); addCommentText(data, id);
}); });
} }
@ -64,7 +64,7 @@ function commentLinkDrop(event, id) {
event.preventDefault(); event.preventDefault();
if (reply && reply.length) { if (reply && reply.length) {
reply = bin2hex(reply); reply = bin2hex(reply);
$.get('parse_url?noAttachment=1&binurl=' + reply, function(data) { $.get("parse_url?noAttachment=1&binurl=" + reply, function (data) {
addCommentText(data, id); addCommentText(data, id);
}); });
} }
@ -86,12 +86,12 @@ function insertFormattingToPost(BBCode) {
} }
function showThread(id) { function showThread(id) {
$("#collapsed-comments-" + id).show() $("#collapsed-comments-" + id).show();
$("#collapsed-comments-" + id + " .collapsed-comments").show() $("#collapsed-comments-" + id + " .collapsed-comments").show();
} }
function hideThread(id) { function hideThread(id) {
$("#collapsed-comments-" + id).hide() $("#collapsed-comments-" + id).hide();
$("#collapsed-comments-" + id + " .collapsed-comments").hide() $("#collapsed-comments-" + id + " .collapsed-comments").hide();
} }
function cmtBbOpen(id) { function cmtBbOpen(id) {
@ -101,8 +101,7 @@ function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide(); $("#comment-edit-bb-" + id).hide();
} }
function commentExpand(id) function commentExpand(id) {
{
$("#mod-cmnt-wrap-" + id).show(); $("#mod-cmnt-wrap-" + id).show();
closeMenu("comment-fake-form-" + id); closeMenu("comment-fake-form-" + id);
openMenu("item-comments-" + id); openMenu("item-comments-" + id);
@ -114,9 +113,8 @@ function commentExpand(id)
return true; return true;
} }
function commentClose(obj, id) function commentClose(obj, id) {
{ if (obj.value === "" || obj.value === obj.dataset.default) {
if (obj.value === '' || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id) $("#comment-edit-text-" + id)
.removeClass("comment-edit-text-full") .removeClass("comment-edit-text-full")
.addClass("comment-edit-text-empty"); .addClass("comment-edit-text-empty");
@ -129,8 +127,8 @@ function commentClose(obj, id)
} }
function showHideCommentBox(id) { function showHideCommentBox(id) {
var $el = $('#comment-edit-form-' + id); var $el = $("#comment-edit-form-" + id);
if ($el.is(':visible')) { if ($el.is(":visible")) {
$el.hide(); $el.hide();
} else { } else {
$el.show(); $el.show();
@ -142,19 +140,21 @@ function commentOpenUI(obj, id) {
openMenu("item-comments-" + id); openMenu("item-comments-" + id);
$("#comment-edit-text-" + id) $("#comment-edit-text-" + id)
.putCursorAtEnd() .putCursorAtEnd()
.addClass("comment-edit-text-full").removeClass("comment-edit-text-empty") .addClass("comment-edit-text-full")
.attr('tabindex', '9'); // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them) .removeClass("comment-edit-text-empty")
$("#comment-edit-submit-" + id).attr('tabindex', '10'); // The submit button gets tabindex + 1 .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 // initialize autosize for this comment
autosize($("#comment-edit-text-" + id + ".text-autosize")); autosize($("#comment-edit-text-" + id + ".text-autosize"));
} }
function commentCloseUI(obj, id) { function commentCloseUI(obj, id) {
if (obj.value === '' || obj.value === obj.dataset.default) { if (obj.value === "" || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id) $("#comment-edit-text-" + id)
.removeClass("comment-edit-text-full").addClass("comment-edit-text-empty") .removeClass("comment-edit-text-full")
.removeAttr('tabindex'); .addClass("comment-edit-text-empty")
$("#comment-edit-submit-" + id).removeAttr('tabindex'); .removeAttr("tabindex");
$("#comment-edit-submit-" + id).removeAttr("tabindex");
openMenu("comment-fake-form-" + id); openMenu("comment-fake-form-" + id);
closeMenu("item-comments-" + id); closeMenu("item-comments-" + id);
// destroy the automatic textarea resizing // destroy the automatic textarea resizing
@ -163,7 +163,7 @@ function commentCloseUI(obj, id) {
} }
function jotTextOpenUI(obj) { 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"); var $el = $(".modal-body #profile-jot-text");
$el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty"); $el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
// initiale autosize for the jot // initiale autosize for the jot
@ -172,7 +172,7 @@ function jotTextOpenUI(obj) {
} }
function jotTextCloseUI(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"); var $el = $(".modal-body #profile-jot-text");
$el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty"); $el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty");
// destroy the automatic textarea resizing // destroy the automatic textarea resizing
@ -181,7 +181,7 @@ function jotTextCloseUI(obj) {
} }
function commentOpen(obj, id) { function commentOpen(obj, id) {
if (obj.value === '' || obj.value === obj.dataset.default) { if (obj.value === "" || obj.value === obj.dataset.default) {
$("#comment-edit-text-" + id) $("#comment-edit-text-" + id)
.putCursorAtEnd() .putCursorAtEnd()
.addClass("comment-edit-text-full") .addClass("comment-edit-text-full")
@ -210,19 +210,22 @@ function dropItem(url, elementId) {
var confirm = confirmDelete(); var confirm = confirmDelete();
if (confirm) { if (confirm) {
$('body').css('cursor', 'wait'); $("body").css("cursor", "wait");
var $el = $(document.getElementById(elementId)); var $el = $(document.getElementById(elementId));
$el.fadeTo('fast', 0.33, function () { $el.fadeTo("fast", 0.33, function () {
$.get(url).then(function() { $.get(url)
$el.remove(); .then(function () {
}).fail(function() { $el.remove();
// @todo Show related error message })
$el.show(); .fail(function () {
}).always(function() { // @todo Show related error message
$('body').css('cursor', 'auto'); $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 // @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 // Destroy unused perfect scrollbar in aside element
$('aside').perfectScrollbar('destroy'); $("aside").perfectScrollbar("destroy");
//fade in/out based on scrollTop value //fade in/out based on scrollTop value
var scrollStart; var scrollStart;
@ -27,24 +27,27 @@ $(document).ready(function(){
// scroll body to 0px on click // scroll body to 0px on click
$("#back-to-top").click(function () { $("#back-to-top").click(function () {
$("body,html").animate({ $("body,html").animate(
scrollTop: 0 {
}, 400); scrollTop: 0,
},
400,
);
return false; return false;
}); });
// add the class "selected" to group widges li if li > a does have the class group-selected // 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"); $("#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 // 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"); $("#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 // 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"); $("#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 // 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 // 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. // 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')"; var pageurl = "url('" + window.location.href + "#logo-mask')";
$("#logo-img").css({"mask": pageurl}); $("#logo-img").css({ mask: pageurl });
} }
// make responsive tabmenu with flexmenu.js // make responsive tabmenu with flexmenu.js
// the menupoints which doesn't fit in the second nav bar will moved to a // the menupoints which doesn't fit in the second nav bar will moved to a
// dropdown menu. Look at common_tabs.tpl // dropdown menu. Look at common_tabs.tpl
$("ul.tabs.flex-nav").flexMenu({ $("ul.tabs.flex-nav").flexMenu({
'cutoff': 2, cutoff: 2,
'popupClass': "dropdown-menu pull-right", popupClass: "dropdown-menu pull-right",
'popupAbsolute': false, popupAbsolute: false,
'target': ".flex-target" target: ".flex-target",
}); });
// add Jot button to the second navbar // add Jot button to the second navbar
@ -84,33 +87,33 @@ $(document).ready(function(){
if ($("#jot-popup").is(":hidden")) { if ($("#jot-popup").is(":hidden")) {
$jotButton.hide(); $jotButton.hide();
} }
$jotButton.on('click', function (e) { $jotButton.on("click", function (e) {
e.preventDefault(); e.preventDefault();
jotShow(); jotShow();
}); });
} }
let $body = $('body'); let $body = $("body");
// show bulk deletion button at network page if checkbox is checked // 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; var checked = false;
// We need to get all checked items, so it would close the delete button // We need to get all checked items, so it would close the delete button
// if we uncheck one item and others are still checked. // if we uncheck one item and others are still checked.
// So return checked = true if there is any checked item // So return checked = true if there is any checked item
$('input.item-select').each( function() { $("input.item-select").each(function () {
if($(this).is(':checked')) { if ($(this).is(":checked")) {
checked = true; checked = true;
return false; return false;
} }
}); });
if(checked) { if (checked) {
$("#item-delete-selected").fadeTo(400, 1); $("#item-delete-selected").fadeTo(400, 1);
$("#item-delete-selected").show(); $("#item-delete-selected").show();
} else { } else {
$("#item-delete-selected").fadeTo(400, 0, function(){ $("#item-delete-selected").fadeTo(400, 0, function () {
$("#item-delete-selected").hide(); $("#item-delete-selected").hide();
}); });
} }
@ -119,31 +122,31 @@ $(document).ready(function(){
// initialize the bootstrap tooltips // initialize the bootstrap tooltips
$body.tooltip({ $body.tooltip({
selector: '[data-toggle="tooltip"]', selector: '[data-toggle="tooltip"]',
container: 'body', container: "body",
animation: true, animation: true,
html: true, html: true,
placement: 'auto', placement: "auto",
trigger: 'hover', trigger: "hover",
delay: { delay: {
show: 500, show: 500,
hide: 100 hide: 100,
}, },
sanitizeFn: function (content) { sanitizeFn: function (content) {
return DOMPurify.sanitize(content) return DOMPurify.sanitize(content);
}, },
}); });
// initialize the bootstrap-select // initialize the bootstrap-select
$('.selectpicker').selectpicker(); $(".selectpicker").selectpicker();
// add search-heading to the second navbar // add search-heading to the second navbar
if( $(".search-heading").length) { if ($(".search-heading").length) {
$(".search-heading").appendTo("#topbar-second > .container > #tabmenu"); $(".search-heading").appendTo("#topbar-second > .container > #tabmenu");
} }
// add search results heading to the second navbar // add search results heading to the second navbar
// and insert the search value to the top nav search input // 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 // get the text of the heading (we catch the plain text because we don't
// want to have a h4 heading in the navbar // want to have a h4 heading in the navbar
var searchText = $(".section-title-wrapper > h2").html(); var searchText = $(".section-title-wrapper > h2").html();
@ -151,11 +154,11 @@ $(document).ready(function(){
// temporary workaround to avoid 'undefined' being displayed (issue #9789) // temporary workaround to avoid 'undefined' being displayed (issue #9789)
// https://github.com/friendica/friendica/issues/9789 // https://github.com/friendica/friendica/issues/9789
// TODO: find a way to localize this string // TODO: find a way to localize this string
if(typeof searchText === "undefined") { if (typeof searchText === "undefined") {
searchText = "No results"; searchText = "No results";
} }
// insert the plain text in a <h4> heading and give it a class // 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 // append the new heading to the navbar
$("#topbar-second > .container > #tabmenu").append(newText); $("#topbar-second > .container > #tabmenu").append(newText);
@ -164,19 +167,19 @@ $(document).ready(function(){
var searchValue = $("#search-wrapper .form-group-search input").val(); var searchValue = $("#search-wrapper .form-group-search input").val();
// if the orignal search value isn't available use the location path as value // 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 // get the location path
var urlPath = window.location.search var urlPath = window.location.search;
// and split it up in its parts // and split it up in its parts
var splitPath = urlPath.split(/(\?search?=)(.*$)/); 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 @) // decode the path (e.g to decode %40 to the character @)
var searchValue = decodeURIComponent(splitPath[2]); var searchValue = decodeURIComponent(splitPath[2]);
} }
} }
if( typeof searchValue !== "undefined") { if (typeof searchValue !== "undefined") {
$("#nav-search-input-field").val(searchValue); $("#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 // append the vcard-short-info to the second nav after passing the element
// with .fn (vcard username). Use scrollspy to get the scroll position. // with .fn (vcard username). Use scrollspy to get the scroll position.
if( $("aside .vcard .fn").length) { if ($("aside .vcard .fn").length) {
$(".vcard .fn").scrollspy({ $(".vcard .fn").scrollspy({
min: $(".vcard .fn").position().top - 50, min: $(".vcard .fn").position().top - 50,
onLeaveTop: function onLeave(element) { onLeaveTop: function onLeave(element) {
@ -194,7 +197,7 @@ $(document).ready(function(){
$("#vcard-short-info").appendTo("#vcard-short-info-wrapper"); $("#vcard-short-info").appendTo("#vcard-short-info-wrapper");
}); });
}, },
onEnter: function(element) { onEnter: function (element) {
$("#vcard-short-info").appendTo("#nav-short-info"); $("#vcard-short-info").appendTo("#nav-short-info");
$("#vcard-short-info").fadeIn(500); $("#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 // 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 // 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 // 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 // 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 // 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 // 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 // get the heading element
var heading = $(".network-content-wrapper > .section-title-wrapper > h2"); var heading = $(".network-content-wrapper > .section-title-wrapper > h2");
// get the text of the heading // get the text of the heading
var headingContent = heading.html(); var headingContent = heading.html();
// create a new element with the content of the heading // 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 // remove the old heading element
heading.remove(), heading.remove(),
// put the new element to the second nav bar // put the new element to the second nav bar
$("#topbar-second #nav-short-info").append(newText); $("#topbar-second #nav-short-info").append(newText);
} }
if( $(".community-content-wrapper").length) { if ($(".community-content-wrapper").length) {
// get the heading element // get the heading element
var heading = $(".community-content-wrapper > h3").first(); var heading = $(".community-content-wrapper > h3").first();
// get the text of the heading // get the text of the heading
var headingContent = heading.html(); var headingContent = heading.html();
// create a new element with the content of the heading // 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 // remove the old heading element
heading.remove(), heading.remove(),
// put the new element to the second nav bar // put the new element to the second nav bar
$("#topbar-second > .container > #tabmenu").append(newText); $("#topbar-second > .container > #tabmenu").append(newText);
} }
// Dropdown menus with the class "dropdown-head" will display the active tab // Dropdown menus with the class "dropdown-head" will display the active tab
// as button text // 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); toggleDropdownText(this);
}); });
// Change the css class while clicking on the switcher elements // 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(); event.preventDefault();
// Get the value of the input element // Get the value of the input element
var input = $(this).siblings("input"); var input = $(this).siblings("input");
var val = 1-input.val(); var val = 1 - input.val();
var id = input.attr("id"); var id = input.attr("id");
// The css classes for "on" and "off" // 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 // According to the value of the input element we need to decide
// which class need to be added and removed when changing the switch // which class need to be added and removed when changing the switch
var removedclass = (val == 0 ? onstyle : offstyle); var removedclass = val == 0 ? onstyle : offstyle;
var addedclass = (val == 0 ? offstyle : onstyle) var addedclass = val == 0 ? offstyle : onstyle;
$("#"+id+"_onoff").addClass(addedclass).removeClass(removedclass); $("#" + id + "_onoff")
.addClass(addedclass)
.removeClass(removedclass);
// After changing the switch the input element is getting // After changing the switch the input element is getting
// the newvalue // the newvalue
@ -273,19 +281,18 @@ $(document).ready(function(){
// to the input element where the padding value would be at least the width // 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 // of the button. Otherwise long user input would be invisible because it is
// behind the button. // 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 // Get the width of the button (if the button isn't available
// buttonWidth will be null // buttonWidth will be null
var buttonWidth = $(this).next('.form-button-search').outerWidth(); var buttonWidth = $(this).next(".form-button-search").outerWidth();
if (buttonWidth) { if (buttonWidth) {
// Take the width of the button and ad 5px // Take the width of the button and ad 5px
var newWidth = buttonWidth + 5; var newWidth = buttonWidth + 5;
// Set the padding of the input element according // Set the padding of the input element according
// to the width of the button // 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 * 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. * comment opening button that results in an already closed comment UI.
*/ */
$(document).on('mousedown', function(event) { $(document).on("mousedown", function (event) {
if (event.target.type === 'button') { if (event.target.type === "button") {
return true; return true;
} }
var $dontclosethis = $(event.target).closest('.wall-item-comment-wrapper').find('.comment-edit-form'); var $dontclosethis = $(event.target).closest(".wall-item-comment-wrapper").find(".comment-edit-form");
$('.wall-item-comment-wrapper .comment-edit-submit-wrapper:visible').each(function() { $(".wall-item-comment-wrapper .comment-edit-submit-wrapper:visible").each(function () {
var $parent = $(this).parent('.comment-edit-form'); var $parent = $(this).parent(".comment-edit-form");
var itemId = $parent.data('itemId'); var itemId = $parent.data("itemId");
if ($dontclosethis[0] != $parent[0]) { if ($dontclosethis[0] != $parent[0]) {
var textarea = $parent.find('textarea').get(0) var textarea = $parent.find("textarea").get(0);
commentCloseUI(textarea, itemId); commentCloseUI(textarea, itemId);
} }
@ -314,10 +321,10 @@ $(document).ready(function(){
}); });
// Customize some elements when the app is used in standalone mode on Android // 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 // Open links to source outside of the webview
$('body').on('click', '.plink', function (e) { $("body").on("click", ".plink", function (e) {
$(e.target).attr('target', '_blank'); $(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 * This event listeners ensures that the textarea size is updated event if the
* value is changed externally (textcomplete, insertFormatting, fbrowser...) * value is changed externally (textcomplete, insertFormatting, fbrowser...)
*/ */
$(document).on('change', 'textarea', function(event) { $(document).on("change", "textarea", function (event) {
autosize.update(event.target); autosize.update(event.target);
}); });
@ -343,11 +350,11 @@ $(document).ready(function(){
if ($(window).width() > 976) { if ($(window).width() > 976) {
$("aside").stick_in_parent({ $("aside").stick_in_parent({
offset_top: 100, // px, header + tab bar + spacing offset_top: 100, // px, header + tab bar + spacing
recalc_every: 10 recalc_every: 10,
}); });
// recalculate sticky aside on clicks on <a> elements // recalculate sticky aside on clicks on <a> elements
// this handle height changes on expanding submenus // this handle height changes on expanding submenus
$("aside").on("click", "a", function(){ $("aside").on("click", "a", function () {
$(document.body).trigger("sticky_kit:recalc"); $(document.body).trigger("sticky_kit:recalc");
}); });
} }
@ -359,22 +366,22 @@ $(document).ready(function(){
* is shown. * is shown.
*/ */
$("aside") $("aside")
.on("shown.bs.offcanvas", function() { .on("shown.bs.offcanvas", function () {
$body.addClass("aside-out"); $body.addClass("aside-out");
}) })
.on("hidden.bs.offcanvas", function() { .on("hidden.bs.offcanvas", function () {
$body.removeClass("aside-out"); $body.removeClass("aside-out");
}); });
// Event listener for 'Show & hide event map' button in the network stream. // 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); showHideEventMap(this);
}); });
// Comment form submit // Comment form submit
$body.on('submit', '.comment-edit-form', function(e) { $body.on("submit", ".comment-edit-form", function (e) {
let $form = $(this); 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 // Compose page form exception: id is always 0 and form must not be submitted asynchronously
if (id === 0) { if (id === 0) {
@ -383,86 +390,75 @@ $(document).ready(function(){
e.preventDefault(); e.preventDefault();
let $commentSubmit = $form.find('.comment-edit-submit').button('loading'); let $commentSubmit = $form.find(".comment-edit-submit").button("loading");
unpause(); unpause();
commentBusy = true; commentBusy = true;
$.post( $.post("item", $form.serialize(), "json")
'item', .then(function (data) {
$form.serialize(), if (data.success) {
'json' $("#comment-edit-wrapper-" + id).hide();
) let $textarea = $("#comment-edit-text-" + id);
.then(function(data) { $textarea.val("");
if (data.success) { if ($textarea.get(0)) {
$('#comment-edit-wrapper-' + id).hide(); commentClose($textarea.get(0), id);
let $textarea = $('#comment-edit-text-' + id); }
$textarea.val(''); if (timer) {
if ($textarea.get(0)) { clearTimeout(timer);
commentClose($textarea.get(0), id); }
timer = setTimeout(NavUpdate, 10);
force_update = true;
update_item = id;
} }
if (timer) { if (data.reload) {
clearTimeout(timer); window.location.href = data.reload;
} }
timer = setTimeout(NavUpdate,10); })
force_update = true; .always(function () {
update_item = id; $commentSubmit.button("reset");
} });
if (data.reload) {
window.location.href = data.reload;
}
})
.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(); e.preventDefault();
let $form = $(this); let $form = $(this);
let $pokeSubmit = $form.find('button[type=submit]').button('loading'); let $pokeSubmit = $form.find("button[type=submit]").button("loading");
$.post( $.post($form.attr("action"), $form.serialize(), "json")
$form.attr('action'), .then(function (data) {
$form.serialize(), if (data.success) {
'json' $("#modal").modal("hide");
) }
.then(function(data) { })
if (data.success) { .always(function () {
$('#modal').modal('hide'); $pokeSubmit.button("reset");
} });
}) });
.always(function() {
$pokeSubmit.button('reset');
});
})
}); });
function openClose(theID) { function openClose(theID) {
var elem = document.getElementById(theID); var elem = document.getElementById(theID);
if( $(elem).is(':visible')) { if ($(elem).is(":visible")) {
$(elem).slideUp(200); $(elem).slideUp(200);
} } else {
else {
$(elem).slideDown(200); $(elem).slideDown(200);
} }
} }
function showHide(theID) { function showHide(theID) {
var elem = document.getElementById(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 ($(elem).is(":visible")) {
if (!$(edit).is(':visible')) { if (!$(edit).is(":visible")) {
edit.style.display = "block"; edit.style.display = "block";
} } else {
else {
elem.style.display = "none"; elem.style.display = "none";
} }
} } else {
else {
elem.style.display = "block"; elem.style.display = "block";
} }
} }
@ -471,27 +467,27 @@ function showHide(theID) {
function showHideEventMap(elm) { function showHideEventMap(elm) {
// Get the id of the map element - it should be provided through // Get the id of the map element - it should be provided through
// the atribute "data-map-id". // the atribute "data-map-id".
var mapID = elm.getAttribute('data-map-id'); var mapID = elm.getAttribute("data-map-id");
// Get translation labels. // Get translation labels.
var mapshow = elm.getAttribute('data-show-label'); var mapshow = elm.getAttribute("data-show-label");
var maphide = elm.getAttribute('data-hide-label'); var maphide = elm.getAttribute("data-hide-label");
// Change the button labels. // Change the button labels.
if (elm.innerText == mapshow) { if (elm.innerText == mapshow) {
$('#' + elm.id).text(maphide); $("#" + elm.id).text(maphide);
} else { } else {
$('#' + elm.id).text(mapshow); $("#" + elm.id).text(mapshow);
} }
// Because maps are iframe elements, we cant hide it through css (display: none). // 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. // 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 // So the first time the 'Show map' button is pressed we move the map
// element into the screen area. // element into the screen area.
var mappos = $('#' + mapID).css('position'); var mappos = $("#" + mapID).css("position");
if (mappos === 'absolute') { if (mappos === "absolute") {
$('#' + mapID).hide(); $("#" + mapID).hide();
$('#' + mapID).css({position: 'relative', left: 'auto', top: 'auto'}); $("#" + mapID).css({ position: "relative", left: "auto", top: "auto" });
openClose(mapID); openClose(mapID);
} else { } else {
openClose(mapID); openClose(mapID);
@ -501,18 +497,22 @@ function showHideEventMap(elm) {
function justifyPhotos() { function justifyPhotos() {
justifiedGalleryActive = true; justifiedGalleryActive = true;
$('#photo-album-contents').justifiedGallery({ $("#photo-album-contents")
margins: 3, .justifiedGallery({
border: 0, margins: 3,
sizeRangeSuffixes: { border: 0,
'lt48': '-6', sizeRangeSuffixes: {
'lt80': '-5', lt48: "-6",
'lt300': '-4', lt80: "-5",
'lt320': '-2', lt300: "-4",
'lt640': '-1', lt320: "-2",
'lt1024': '-0' lt640: "-1",
} lt1024: "-0",
}).on('jg.complete', function(e){ justifiedGalleryActive = false; }); },
})
.on("jg.complete", function (e) {
justifiedGalleryActive = false;
});
} }
// Load a js script to the html head. // Load a js script to the html head.
@ -525,9 +525,9 @@ function loadScript(url, callback) {
oscript.remove(); oscript.remove();
} }
// Adding the script tag to the head as suggested before. // Adding the script tag to the head as suggested before.
var head = document.getElementsByTagName('head')[0]; var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script'); var script = document.createElement("script");
script.type = 'text/javascript'; script.type = "text/javascript";
script.src = url; script.src = url;
// Then bind the event to the callback function. // 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 // Does we need a ? or a & to append values to a url
function qOrAmp(url) { function qOrAmp(url) {
if(url.search('\\?') < 0) { if (url.search("\\?") < 0) {
return '?'; return "?";
} else { } else {
return '&'; return "&";
} }
} }
String.prototype.normalizeLink = function () { String.prototype.normalizeLink = function () {
var ret = this.replace('https:', 'http:'); var ret = this.replace("https:", "http:");
var ret = ret.replace('//www', '//'); var ret = ret.replace("//www", "//");
return ret.rtrim(); return ret.rtrim();
}; };
function cleanContactUrl(url) { function cleanContactUrl(url) {
var parts = parseUrl(url); var parts = parseUrl(url);
if(! ("scheme" in parts) || ! ("host" in parts)) { if (!("scheme" in parts) || !("host" in parts)) {
return url; 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"]; newUrl += ":" + parts["port"];
} }
if("path" in parts) { if ("path" in parts) {
newUrl += parts["path"]; newUrl += parts["path"];
} }
// if(url != newUrl) { // if(url != newUrl) {
// console.log("Cleaned contact url " + url + " to " + newUrl); // console.log("Cleaned contact url " + url + " to " + newUrl);
// } // }
return 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/ // discuss at: http://locutusjs.io/php/parse_url/
// original by: Steven Levithan (http://blog.stevenlevithan.com) // original by: Steven Levithan (http://blog.stevenlevithan.com)
// reimplemented by: Brett Zamir (http://brett-zamir.me) // 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') // 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' } // 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 = [ var key = [
'source', "source",
'scheme', "scheme",
'authority', "authority",
'userInfo', "userInfo",
'user', "user",
'pass', "pass",
'host', "host",
'port', "port",
'relative', "relative",
'path', "path",
'directory', "directory",
'file', "file",
'query', "query",
'fragment' "fragment",
] ];
// For loose we added one optional slash to post-scheme to catch file:/// (should restrict this) // For loose we added one optional slash to post-scheme to catch file:/// (should restrict this)
var parser = { var parser = {
php: new RegExp([ php: new RegExp(
'(?:([^:\\/?#]+):)?', [
'(?:\\/\\/()(?:(?:()(?:([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?', "(?:([^:\\/?#]+):)?",
'()', "(?:\\/\\/()(?:(?:()(?:([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?",
'(?:(()(?:(?:[^?#\\/]*\\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)' "()",
].join('')), "(?:(()(?:(?:[^?#\\/]*\\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)",
strict: new RegExp([ ].join(""),
'(?:([^:\\/?#]+):)?', ),
'(?:\\/\\/((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?', strict: new RegExp(
'((((?:[^?#\\/]*\\/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)' [
].join('')), "(?:([^:\\/?#]+):)?",
loose: new RegExp([ "(?:\\/\\/((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?",
'(?:(?![^:@]+:[^:@\\/]*@)([^:\\/?#.]+):)?', "((((?:[^?#\\/]*\\/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)",
'(?:\\/\\/\\/?)?', ].join(""),
'((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?)', ),
'(((\\/(?:[^?#](?![^?#\\/]*\\.[^?#\\/.]+(?:[?#]|$)))*\\/?)?([^?#\\/]*))', loose: new RegExp(
'(?:\\?([^#]*))?(?:#(.*))?)' [
].join('')) "(?:(?![^:@]+:[^:@\\/]*@)([^:\\/?#.]+):)?",
} "(?:\\/\\/\\/?)?",
"((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?)",
"(((\\/(?:[^?#](?![^?#\\/]*\\.[^?#\\/.]+(?:[?#]|$)))*\\/?)?([^?#\\/]*))",
"(?:\\?([^#]*))?(?:#(.*))?)",
].join(""),
),
};
var m = parser[mode].exec(str) var m = parser[mode].exec(str);
var uri = {} var uri = {};
var i = 14 var i = 14;
while (i--) { while (i--) {
if (m[i]) { if (m[i]) {
uri[key[i]] = m[i] uri[key[i]] = m[i];
} }
} }
if (component) { if (component) {
return uri[component.replace('PHP_URL_', '').toLowerCase()] return uri[component.replace("PHP_URL_", "").toLowerCase()];
} }
if (mode !== 'php') { if (mode !== "php") {
var name = (typeof require !== 'undefined' ? require('../info/ini_get')('locutus.parse_url.queryKey') : undefined) || 'queryKey' var name =
parser = /(?:^|&)([^&=]*)=?([^&]*)/g (typeof require !== "undefined" ? require("../info/ini_get")("locutus.parse_url.queryKey") : undefined) ||
uri[name] = {} "queryKey";
query = uri[key[12]] || '' parser = /(?:^|&)([^&=]*)=?([^&]*)/g;
uri[name] = {};
query = uri[key[12]] || "";
query.replace(parser, function ($0, $1, $2) { query.replace(parser, function ($0, $1, $2) {
if ($1) { if ($1) {
uri[name][$1] = $2 uri[name][$1] = $2;
} }
}) });
} }
delete uri.source delete uri.source;
return uri return uri;
} }
// trim function to replace whithespace after the string // trim function to replace whithespace after the string
String.prototype.rtrim = function() { String.prototype.rtrim = function () {
var trimmed = this.replace(/\s+$/g, ''); var trimmed = this.replace(/\s+$/g, "");
return trimmed; return trimmed;
}; };
@ -695,34 +705,40 @@ function scrollToItem(elementId) {
return; return;
} }
var $el = $('#' + elementId + ' > .media'); var $el = $("#" + elementId + " > .media");
// Test if the Item exists // Test if the Item exists
if (!$el.length) { if (!$el.length) {
return; return;
} }
// Define the colors which are used for highlighting // Define the colors which are used for highlighting
var colWhite = {backgroundColor:'#F5F5F5'}; var colWhite = { backgroundColor: "#F5F5F5" };
var colShiny = {backgroundColor:'#FFF176'}; var colShiny = { backgroundColor: "#FFF176" };
// Get the Item Position (we need to substract 100 to match correct position // Get the Item Position (we need to substract 100 to match correct position
var itemPos = $el.offset().top - 100; var itemPos = $el.offset().top - 100;
// Scroll to the DIV with the ID (GUID) // Scroll to the DIV with the ID (GUID)
$('html, body').animate({ $("html, body")
scrollTop: itemPos .animate(
}, 400).promise().done( function() { {
// Highlight post/commenent with ID (GUID) scrollTop: itemPos,
$el.animate(colWhite, 1000).animate(colShiny).animate({backgroundColor: 'transparent'}, 600); },
}); 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 // format a html string to pure text
function htmlToText(htmlString) { function htmlToText(htmlString) {
// Replace line breaks with spaces // 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 // Strip the text out of the html string
text = text.replace(/<[^>]*>/g, ''); text = text.replace(/<[^>]*>/g, "");
return text; return text;
} }
@ -736,16 +752,16 @@ function htmlToText(htmlString) {
* @param {boolean} un Whether to perform an activity removal instead of creation * @param {boolean} un Whether to perform an activity removal instead of creation
*/ */
function doLikeAction(ident, verb, un) { function doLikeAction(ident, verb, un) {
if (verb.indexOf('attend') === 0) { if (verb.indexOf("attend") === 0) {
$('.item-' + ident + ' .button-event:not(#' + verb + '-' + ident + ')').removeClass('active'); $(".item-" + ident + " .button-event:not(#" + verb + "-" + ident + ")").removeClass("active");
} }
$('#' + verb + '-' + ident).toggleClass('active'); $("#" + verb + "-" + ident).toggleClass("active");
dolike(ident, verb, un); dolike(ident, verb, un);
} }
// Decodes a hexadecimally encoded binary string // Decodes a hexadecimally encoded binary string
function hex2bin (s) { function hex2bin(s) {
// discuss at: http://locutus.io/php/hex2bin/ // discuss at: http://locutus.io/php/hex2bin/
// original by: Dumitru Uzun (http://duzun.me) // original by: Dumitru Uzun (http://duzun.me)
// example 1: hex2bin('44696d61') // example 1: hex2bin('44696d61')
@ -757,7 +773,7 @@ function hex2bin (s) {
var ret = []; var ret = [];
var i = 0; var i = 0;
var l; var l;
s += ''; s += "";
for (l = s.length; i < l; i += 2) { for (l = s.length; i < l; i += 2) {
var c = parseInt(s.substr(i, 1), 16); var c = parseInt(s.substr(i, 1), 16);
@ -771,7 +787,7 @@ function hex2bin (s) {
} }
// Convert binary data into hexadecimal representation // Convert binary data into hexadecimal representation
function bin2hex (s) { function bin2hex(s) {
// From: http://phpjs.org/functions // From: http://phpjs.org/functions
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman // + bugfixed by: Onno Marsman
@ -782,7 +798,10 @@ function bin2hex (s) {
// * example 2: bin2hex(String.fromCharCode(0x00)); // * example 2: bin2hex(String.fromCharCode(0x00));
// * returns 2: '00' // * returns 2: '00'
var i, l, o = "", n; var i,
l,
o = "",
n;
s += ""; s += "";
@ -797,14 +816,17 @@ function bin2hex (s) {
// Dropdown menus with the class "dropdown-head" will display the active tab // Dropdown menus with the class "dropdown-head" will display the active tab
// as button text // as button text
function toggleDropdownText(elm) { function toggleDropdownText(elm) {
$(elm).closest(".dropdown").find('.btn').html($(elm).html() + ' <span class="caret"></span>'); $(elm)
$(elm).closest(".dropdown").find('.btn').val($(elm).data('value')); .closest(".dropdown")
$(elm).closest("ul").children("li").show(); .find(".btn")
$(elm).parent("li").hide(); .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 // Check if element does have a specific class
function hasClass(elem, cls) { function hasClass(elem, cls) {
return (" " + elem.className + " " ).indexOf( " "+cls+" " ) > -1; return (" " + elem.className + " ").indexOf(" " + cls + " ") > -1;
} }
// @license-end // @license-end

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

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

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

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

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

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

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

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

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

@ -9,132 +9,160 @@
*/ */
body { body {
background: url(scheme/plusminus.jpg); background: url(scheme/plusminus.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
height: auto; height: auto;
} }
aside .widget, .form-control, .panel, .nav-container, .wall-item-content, .e-content, .p-name, .topbar, post, shiny, tread-wrapper, #topbar-second { aside .widget,
color: #000; .form-control,
background-color: #f5f5f5; .panel,
.nav-container,
.wall-item-content,
.e-content,
.p-name,
.topbar,
post,
shiny,
tread-wrapper,
#topbar-second {
color: #000;
background-color: #f5f5f5;
} }
.form-control { .form-control {
font-family: ".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Helvetica,Arial,sans-serif; 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 { #topbar-first #nav-notifications-menu li.notification-unseen {
border-left: 3px solid #e3eff3; border-left: 3px solid #e3eff3;
background-color: antiquewhite; background-color: antiquewhite;
} }
#topbar-first #nav-notifications-menu li.notif-entry { #topbar-first #nav-notifications-menu li.notif-entry {
padding: 0px; padding: 0px;
} }
.birthday-notice { .birthday-notice {
background-color:#cc0000; background-color: #cc0000;
color: white; color: white;
} }
#birthday-title { #birthday-title {
background-color:#ff0000; background-color: #ff0000;
color: white; color: white;
text-indent: 6px; text-indent: 6px;
} }
.birthday-list:before { .birthday-list:before {
content: "\1F382 "; content: "\1F382 ";
} }
.birthday-list{ .birthday-list {
margin: 1px; margin: 1px;
color: black; color: black;
background-color: yellow; background-color: yellow;
text-indent: 10px; text-indent: 10px;
border-radius: 5px; border-radius: 5px;
} }
#event-notice{ #event-notice {
color: white; color: white;
background-color: #004c5b; background-color: #004c5b;
text-indent: 2px; text-indent: 2px;
} }
#event-title{ #event-title {
color: whitesmoke; color: whitesmoke;
background-color: #006c83; background-color: #006c83;
text-indent: 6px; text-indent: 6px;
} }
.event-list:before { .event-list:before {
content: "\1F5D3 "; content: "\1F5D3 ";
} }
.event-list { .event-list {
margin: 1px; margin: 1px;
color: black; color: black;
background-color: #00c7f0; background-color: #00c7f0;
text-indent: 10px; text-indent: 10px;
border-radius: 5px; border-radius: 5px;
} }
.panel .panel-body { .panel .panel-body {
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
padding-left:5px; padding-left: 5px;
padding-right:5px; padding-right: 5px;
border: 1px; border: 1px;
} }
.wall-item-network { .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 { .wall-item-content
box-sizing: border-box; .clearfix
margin-top: 0px; .post
margin-bottom: 0px; .comment-container
border:0px; .well
padding:0px; .well-sm
color:black; .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 { .wall-spacer {
height: 0px; height: 0px;
} }
/* Contact-page */ /* Contact-page */
#connect-desc { #connect-desc {
color: grey; color: grey;
} }
.search-input.form-control.form-search { .search-input.form-control.form-search {
background-color: #ebebeb; background-color: #ebebeb;
border-color:lightgrey; border-color: lightgrey;
} }
.search-input.form-control.form-search:focus { .search-input.form-control.form-search:focus {
background-color: white; background-color: white;
border-color:grey; border-color: grey;
} }
/* Addon-Showmore*/ /* Addon-Showmore*/
.showmore-wrap { .showmore-wrap {
background-color:lightgrey; background-color: lightgrey;
text-decoration: underline; text-decoration: underline;
text-decoration-color: black; text-decoration-color: black;
text-decoration-style: wavy; text-decoration-style: wavy;
} }
/* New compose popup */ /* New compose popup */
.profile-jot-net { .profile-jot-net {
background: #dff0d8; background: #dff0d8;
} }
.profile-jot-net summary { .profile-jot-net summary {
color: #3c763d; color: #3c763d;
font-weight: bold; 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 *}} {{* 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}} {{if $nav.userinfo}}
<header> <header>
{{* {{$langselector}} *}} {{* {{$langselector}} *}}
<div id="site-location">{{$sitelocation}}</div> <div id="site-location">{{$sitelocation}}</div>
<div id="banner" class="hidden-sm hidden-xs"> <div id="banner" class="hidden-sm hidden-xs">
{{* show on remote/visitor connections an other logo which symols that fact*}} {{* show on remote/visitor connections an other logo which symols that fact*}}
{{if $nav.remote}} {{if $nav.remote}}
<a href="{{$baseurl}}"><div id="remote-logo-img" aria-label="{{$home}}"></div></a> <a href="{{$baseurl}}">
{{else}} <div id="remote-logo-img" aria-label="{{$home}}"></div>
{{* #logo-img is the the placeholder to insert a mask (friendica logo) into this 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). 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 *}} 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> <a href="{{$baseurl}}">
{{/if}} <div id="logo-img" aria-label="{{$home}}"></div>
</div> </a>
</header> {{/if}}
<nav id="topbar-first" class="topbar"> </div>
<div class="container"> </header>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"><!-- div for navbar width--> <nav id="topbar-first" class="topbar">
<!-- Brand and toggle get grouped for better mobile display --> <div class="container">
<div class="topbar-nav" role="navigation"> <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 *}} {{* 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"> <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas"
<span class="sr-only">Toggle navigation</span> data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
<i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i> <span class="sr-only">Toggle navigation</span>
</button> <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile"> </button>
<span class="sr-only">Toggle Search</span> <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse"
<i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i> data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
</button> <span class="sr-only">Toggle Search</span>
<button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside" aria-haspopup="true"> <i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i>
<span class="sr-only">Toggle navigation</span> </button>
<i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i> <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs"
</button> 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 *}} {{* Left section of the NavBar with navigation shortcuts/icons *}}
<ul class="nav navbar-left" role="menubar"> <ul class="nav navbar-left" role="menubar">
{{if $nav.network}} {{if $nav.network}}
<li class="nav-segment"> <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> <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}"
</li> data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i
{{/if}} class="fa fa-lg fa-th fa-fw" aria-hidden="true"></i><span id="net-update"
{{if $nav.home}} class="nav-network-badge badge nav-notification"></span></a>
<li class="nav-segment"> </li>
<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> {{/if}}
</li> {{if $nav.home}}
{{/if}} <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}} {{if $nav.community}}
<li class="nav-segment"> <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> <a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}"
</li> data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i
{{/if}} class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
</li>
{{/if}}
{{if $nav.messages}} {{if $nav.messages}}
<li class="nav-segment hidden-xs"> <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> <a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip"
</li> aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}"
{{/if}} 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}} {{if $nav.events}}
<li class="nav-segment hidden-xs"> <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> <a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip"
</li> aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i
{{/if}} class="fa fa-lg fa-calendar fa-fw"></i></a>
</li>
{{/if}}
{{if $nav.contacts}} {{if $nav.contacts}}
<li class="nav-segment hidden-xs"> <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> <a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip"
</li> aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"
{{/if}} class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i
class="fa fa-users fa-lg fa-fw"></i></a>
</li>
{{/if}}
{{* The notifications dropdown *}} {{* The notifications dropdown *}}
{{if $nav.notifications}} {{if $nav.notifications}}
<li id="nav-notification" class="nav-segment dropdown" role="presentation"> <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"> <button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown"
<span id="notification-update" class="nav-notification-badge badge nav-notification"></span> type="button" aria-haspopup="true" aria-expanded="false"
<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i> aria-controls="nav-notifications-menu">
</button> <span id="notification-update" class="nav-notification-badge badge nav-notification"></span>
{{* 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 *}} <i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="nav-notifications-menu-btn"> </button>
{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}} {{* 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 *}}
<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header"> <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu"
<div class="arrow"></div> aria-labelledby="nav-notifications-menu-btn">
{{$nav.notifications.1}} {{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
<div class="dropdown-header-link"> <li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<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 class="arrow"></div>
</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"> <li role="presentation">
<p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p> <p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
</li> </li>
</ul> </ul>
</li> </li>
{{/if}} {{/if}}
</ul> </ul>
</div> </div>
{{* This is the right part of the NavBar. It includes the search and the user menu *}} {{* This is the right part of the NavBar. It includes the search and the user menu *}}
<div class="topbar-actions pull-right"> <div class="topbar-actions pull-right">
<ul class="nav"> <ul class="nav">
{{* The search box *}} {{* The search box *}}
{{if $nav.search}} {{if $nav.search}}
<li id="search-box" class="hidden-xs"> <li id="search-box" class="hidden-xs">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}"> <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;"> --> <!-- <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"> <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}}"> <input accesskey="s" id="nav-search-input-field" class="form-control form-search"
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button> type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}"
</div> placeholder="{{$nav.search.1}}">
</form> <button class="btn btn-default btn-sm form-button-search"
</li> type="submit">{{$nav.search.1}}</button>
{{/if}} </div>
</form>
</li>
{{/if}}
{{* The user dropdown menu *}} {{* The user dropdown menu *}}
{{if $nav.userinfo}} {{if $nav.userinfo}}
<li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs"> <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"> <button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar"
<div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md"> data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false"
<strong>{{$nav.userinfo.name}}</strong><br> aria-controls="nav-user-menu">
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}} <div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
</div> <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}}"> <img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
{{* The list of available usermenu links *}} {{* The list of available usermenu links *}}
<ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu" aria-labelledby="main-menu"> <ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu"
{{if $nav.remote}}{{if $nav.sitename}} aria-labelledby="main-menu">
<li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li> {{if $nav.remote}}
<li role="presentation" class="divider"></li> {{if $nav.sitename}}
{{/if}}{{/if}} <li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
{{foreach $nav.usermenu as $usermenu}} <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li> {{/if}}
{{/foreach}} {{/if}}
<li role="presentation" class="divider"></li> {{foreach $nav.usermenu as $usermenu}}
{{if $nav.notifications}} <li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
<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> title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/if}} {{/foreach}}
{{if $nav.messages}} <li role="presentation" class="divider"></li>
<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 $nav.notifications}}
{{/if}} <li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}"
<li role="presentation" class="divider"></li> title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i>
{{if $nav.contacts}} {{$nav.notifications.1}}</a></li>
<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}} {{if $nav.messages}}
{{if $nav.delegation}} <li role="presentation"><a role="menuitem"
<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> class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}"
{{/if}} href="{{$nav.messages.0}}" title="{{$nav.messages.3}}"><i
<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> class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span
<li role="presentation" class="divider"></li> id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a>
{{if $nav.apps}} </li>
<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> {{/if}}
<li role="presentation" class="divider"></li> <li role="presentation" class="divider"></li>
{{/if}} {{if $nav.contacts}}
{{if $nav.help}} <li role="presentation"><a role="menuitem" id="nav-menu-contacts-link"
<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> class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
{{/if}} title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
{{if $nav.settings}} {{$nav.contacts.1}}</a></li>
<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}} {{if $nav.delegation}}
{{if $nav.admin}} <li role="presentation"><a role="menuitem" id="nav-delegation-link"
<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> class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
{{/if}} href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i
{{if $nav.tos}} class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
<li role="presentation" class="divider"></li> {{/if}}
<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> <li role="presentation"><a role="menuitem" id="nav-directory-link"
{{/if}} class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}"
<li role="presentation" class="divider"></li> title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw"
{{if $nav.logout}} aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
<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> <li role="presentation" class="divider"></li>
{{else}} {{if $nav.apps}}
<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> <li role="presentation"><a role="menuitem" id="nav-apps-link"
{{/if}} class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}"><i
</ul> class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
</li>{{* End of userinfo dropdown menu *}} <li role="presentation" class="divider"></li>
{{/if}} {{/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> <li>{{$langselector}}</li>
--> -->
</ul> </ul>
</div>{{* End of right navbar *}} </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 *}} {{* 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 id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
<div class="nav-container"> <div class="nav-container">
<ul role="menu" class="list-group"> <ul role="menu" class="list-group">
{{if $nav.remote}}{{if $nav.sitename}} {{if $nav.remote}}
<li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li> {{if $nav.sitename}}
{{/if}}{{/if}} <li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
<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> {{/if}}
{{foreach $nav.usermenu as $usermenu}} {{/if}}
<li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li> <li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}"
{{/foreach}} alt="{{$nav.userinfo.name}}"
{{if $nav.notifications}} style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;">
<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> {{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
{{/if}} {{foreach $nav.usermenu as $usermenu}}
{{if $nav.contacts}} <li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}"
<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> href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/if}} {{/foreach}}
{{if $nav.messages}} {{if $nav.notifications}}
<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> <li role="presentation" class="list-group-item"><a role="menuitem"
{{/if}} href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i
{{if $nav.delegation}} class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
<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}} {{if $nav.contacts}}
{{if $nav.settings}} <li role="presentation" class="list-group-item"><a role="menuitem"
<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> class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
{{/if}} title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
{{if $nav.admin}} {{$nav.contacts.1}}</a></li>
<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}} {{if $nav.messages}}
{{if $nav.logout}} <li role="presentation" class="list-group-item"><a role="menuitem"
<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> class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}"
{{else}} title="{{$nav.messages.3}}"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
<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> {{$nav.messages.1}}</a></li>
{{/if}} {{/if}}
</ul> {{if $nav.delegation}}
</div> <li role="presentation" class="list-group-item"><a role="menuitem"
</div><!--/.sidebar-offcanvas--> class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
</div><!-- end of div for navbar width--> href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw"
</div><!-- /.container --> aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
</nav><!-- /.navbar --> {{/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}} {{/if}}
{{* The navbar for users which are not logged in *}} {{* The navbar for users which are not logged in *}}
{{if $nav.userinfo == ''}} {{if $nav.userinfo == ''}}
<nav class="navbar navbar-fixed-top"> <nav class="navbar navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header pull-left"> <div class="navbar-header pull-left">
<a class="navbar-brand" href="#"><div id="navbrand-container"> <a class="navbar-brand" href="#">
<div id="logo-img"></div> <div id="navbrand-container">
<div id="navbar-brand-text"> Friendica</div></div> <div id="logo-img"></div>
</a> <div id="navbar-brand-text"> Friendica</div>
</div> </div>
<div class="pull-right"> </a>
<ul class="nav navbar-nav navbar-right"> </div>
<li role="presentation"> <div class="pull-right">
<a href="login?mode=none" id="nav-login" <ul class="nav navbar-nav navbar-right">
data-toggle="tooltip" aria-label="{{$nav.login.3}}" title="{{$nav.login.3}}"> <li role="presentation">
<i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> <a href="login?mode=none" id="nav-login" data-toggle="tooltip" aria-label="{{$nav.login.3}}"
</a> title="{{$nav.login.3}}">
</li> <i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
<li role="presentation"> </a>
<a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}" title="{{$nav.about.3}}"> </li>
<i class="fa fa-info fa-fw" aria-hidden="true"></i> <li role="presentation">
</a> <a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}"
</li> title="{{$nav.about.3}}">
</ul> <i class="fa fa-info fa-fw" aria-hidden="true"></i>
</div> </a>
</div> </li>
</nav> </ul>
</div>
</div>
</nav>
{{/if}} {{/if}}
{{* provide a a search input for mobile view, which expands by pressing the search icon *}} {{* 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 id="search-mobile" class="hidden-lg hidden-md hidden-sm collapse row well">
<div class="col-xs-12"> <div class="col-xs-12">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}"> <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;"> --> <!-- <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"> <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}}"> <input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="q"
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button> data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
</div> <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</form> </div>
</div> </form>
</div>
</div> </div>
{{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}} {{* 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 id="topbar-second" class="topbar">
<div class="container"> <div class="container">
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" id="nav-short-info"></div> <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-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 class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
</div> </div>
</div> </div>
{{*The second part of the notifications dropdown menu. It handles the notifications *}} {{*The second part of the notifications dropdown menu. It handles the notifications *}}
{{if $nav.notifications}} {{if $nav.notifications}}
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template"> <ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
<li class="{4} notif-entry"> <li class="{4} notif-entry">
<div class="notif-entry-wrapper media"> <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> <div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}"
<a href="{0}" class="notif-desc-wrapper media-body"> class="userinfo click-card" tabIndex="-1"><img data-src="{1}"></a></div>
{2} <a href="{0}" class="notif-desc-wrapper media-body">
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div> {2}
</a> <div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
</div> </a>
</li> </div>
</ul> </li>
</ul>
{{/if}} {{/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 {{* 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.*}} 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"> <svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">
<defs> <defs>
<mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <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> <path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"
</mask> 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">
</defs> </path>
</svg> </mask>
</defs>
</svg>