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

Merge pull request #9850 from Extarys/frio-formating 

frio: formating, otherwise untouched
This commit is contained in:
Hypolite Petovan 2021-01-22 10:18:40 -05:00 committed by GitHub
parent cb24e8987c 82acad004a
commit 1a9bc9e444
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 3291 additions and 2928 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;
}

3489
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;

20
view/theme/frio/js/jot.js
View File

@ -11,28 +11,28 @@ var linkPreview;
*/ */
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));
} }

8
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;
} }
}); });
}); });
/** /**

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

207
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,13 +164,15 @@ 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>';
@ -168,23 +180,23 @@ function eventHoverProfileNameTemplate() {
} }
// 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;
@ -192,14 +204,13 @@ function eventHoverHtmlContent(event) {
// 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

195
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,7 +166,7 @@ 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]);
}); });
}; };
@ -195,19 +191,18 @@ 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.
* *
@ -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;
} }

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

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

618
view/theme/frio/templates/nav.tpl
View File

@ -1,265 +1,371 @@
{{* 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 hruf="{{$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>
For Firefox we have to call the paths of the mask (look at the bottom of this file). {{else}}
Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}} {{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
<a href="{{$baseurl}}"><div id="logo-img" aria-label="{{$home}}"></div></a> For Firefox we have to call the paths of the mask (look at the bottom of this file).
{{/if}} Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
</div> <a href="{{$baseurl}}">
</header> <div id="logo-img" aria-label="{{$home}}"></div>
<nav id="topbar-first" class="topbar"> </a>
<div class="container"> {{/if}}
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"><!-- div for navbar width--> </div>
<!-- Brand and toggle get grouped for better mobile display --> </header>
<div class="topbar-nav" role="navigation"> <nav id="topbar-first" class="topbar">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<!-- div for navbar width-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="topbar-nav" role="navigation">
{{* Buttons for the mobile view *}} {{* 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>
</li>
{{/if}}
{{if $nav.community}}
<li class="nav-segment">
<a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}" data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
</li>
{{/if}}
{{if $nav.messages}}
<li class="nav-segment hidden-xs">
<a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip" aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}" class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i><span id="mail-update" class="nav-mail-badge badge nav-notification"></span></a>
</li>
{{/if}}
{{if $nav.events}}
<li class="nav-segment hidden-xs">
<a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip" aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i class="fa fa-lg fa-calendar fa-fw"></i></a>
</li>
{{/if}}
{{if $nav.contacts}}
<li class="nav-segment hidden-xs">
<a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i class="fa fa-users fa-lg fa-fw"></i></a>
</li>
{{/if}}
{{* The notifications dropdown *}}
{{if $nav.notifications}}
<li id="nav-notification" class="nav-segment dropdown" role="presentation">
<button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
<span id="notification-update" class="nav-notification-badge badge nav-notification"></span>
<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
</button>
{{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="nav-notifications-menu-btn">
{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div>
{{$nav.notifications.1}}
<div class="dropdown-header-link">
<button role="menuitem" type="button" class="btn-link" onclick="notificationMarkAll();" data-toggle="tooltip" aria-label="{{$nav.notifications.mark.3}}" title="{{$nav.notifications.mark.3}}">{{$nav.notifications.mark.1}}</button>
</div>
</li>
<li role="presentation">
<p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
</li>
</ul>
</li>
{{/if}}
</ul>
</div>
{{* This is the right part of the NavBar. It includes the search and the user menu *}}
<div class="topbar-actions pull-right">
<ul class="nav">
{{* The search box *}}
{{if $nav.search}}
<li id="search-box" class="hidden-xs">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
<div class="form-group form-group-search">
<input accesskey="s" id="nav-search-input-field" class="form-control form-search" type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</div>
</form>
</li>
{{/if}}
{{* The user dropdown menu *}}
{{if $nav.userinfo}}
<li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
<button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-user-menu">
<div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
<strong>{{$nav.userinfo.name}}</strong><br>
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
</div>
<img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
<span class="caret"></span>
</button>
{{* The list of available usermenu links *}}
<ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu" aria-labelledby="main-menu">
{{if $nav.remote}}{{if $nav.sitename}}
<li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
<li role="presentation" class="divider"></li>
{{/if}}{{/if}}
{{foreach $nav.usermenu as $usermenu}}
<li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
<li role="presentation" class="divider"></li>
{{if $nav.notifications}}
<li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation"><a role="menuitem" class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a></li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.contacts}}
<li role="presentation"><a role="menuitem" id="nav-menu-contacts-link" class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i> {{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation"><a role="menuitem" id="nav-delegation-link" class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}" href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
<li role="presentation"><a role="menuitem" id="nav-directory-link" class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw" aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
<li role="presentation" class="divider"></li>
{{if $nav.apps}}
<li role="presentation"><a role="menuitem" id="nav-apps-link" class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}" ><i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
<li role="presentation" class="divider"></li>
{{/if}}
{{if $nav.help}}
<li role="presentation"><a role="menuitem" id="nav-help-link" class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" ><i class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a></li>
{{/if}}
{{if $nav.settings}}
<li role="presentation"><a role="menuitem" id="nav-settings-link" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link" class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.tos}}
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" id="nav-tos-link" class="nav-link {{$nav.tos.2}}" href="{{$nav.tos.0}}" title="{{$nav.tos.3}}" ><i class="fa fa-file-text" aria-hidden="true"></i> {{$nav.tos.1}}</a></li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.logout}}
<li role="presentation"><a role="menuitem" id="nav-logout-link" class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" ><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation"><a role="menuitem" id="nav-login-link" class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" ><i class="fa fa-power-off fa-fw" aria-hidden="true"></i> {{$nav.login.1}}</a></li>
{{/if}}
</ul>
</li>{{* End of userinfo dropdown menu *}}
{{/if}}
<!-- Language selector, I do not find it relevant, activate if necessary.
<li>{{$langselector}}</li>
-->
</ul>
</div>{{* End of right navbar *}}
{{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
<div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
<div class="nav-container">
<ul role="menu" class="list-group">
{{if $nav.remote}}{{if $nav.sitename}}
<li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
{{/if}}{{/if}}
<li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;"> {{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
{{foreach $nav.usermenu as $usermenu}}
<li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
{{if $nav.notifications}}
<li role="presentation" class="list-group-item"><a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
{{/if}} {{/if}}
{{if $nav.contacts}} {{if $nav.home}}
<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> <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}}
{{if $nav.community}}
<li class="nav-segment">
<a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}"
data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i
class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
</li>
{{/if}}
{{if $nav.messages}} {{if $nav.messages}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" ><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}}</a></li> <li class="nav-segment hidden-xs">
<a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip"
aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}"
class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg fa-fw"
aria-hidden="true"></i><span id="mail-update"
class="nav-mail-badge badge nav-notification"></span></a>
</li>
{{/if}} {{/if}}
{{if $nav.delegation}}
<li role="presentation" class="list-group-item"><a role="menuitem" class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}" href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li> {{if $nav.events}}
<li class="nav-segment hidden-xs">
<a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip"
aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i
class="fa fa-lg fa-calendar fa-fw"></i></a>
</li>
{{/if}} {{/if}}
{{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 $nav.contacts}}
<li class="nav-segment hidden-xs">
<a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip"
aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"
class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i
class="fa fa-users fa-lg fa-fw"></i></a>
</li>
{{/if}} {{/if}}
{{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> {{* The notifications dropdown *}}
{{/if}} {{if $nav.notifications}}
{{if $nav.logout}} <li id="nav-notification" class="nav-segment dropdown" role="presentation">
<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> <button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown"
{{else}} type="button" aria-haspopup="true" aria-expanded="false"
<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> aria-controls="nav-notifications-menu">
<span id="notification-update" class="nav-notification-badge badge nav-notification"></span>
<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
</button>
{{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu"
aria-labelledby="nav-notifications-menu-btn">
{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div>
{{$nav.notifications.1}}
<div class="dropdown-header-link">
<button role="menuitem" type="button" class="btn-link"
onclick="notificationMarkAll();" data-toggle="tooltip"
aria-label="{{$nav.notifications.mark.3}}"
title="{{$nav.notifications.mark.3}}">{{$nav.notifications.mark.1}}</button>
</div>
</li>
<li role="presentation">
<p role="menuitem" class="text-muted"><i>{{$emptynotifications}}</i></p>
</li>
</ul>
</li>
{{/if}} {{/if}}
</ul> </ul>
</div> </div>
</div><!--/.sidebar-offcanvas-->
</div><!-- end of div for navbar width--> {{* This is the right part of the NavBar. It includes the search and the user menu *}}
</div><!-- /.container --> <div class="topbar-actions pull-right">
</nav><!-- /.navbar --> <ul class="nav">
{{* The search box *}}
{{if $nav.search}}
<li id="search-box" class="hidden-xs">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
<div class="form-group form-group-search">
<input accesskey="s" id="nav-search-input-field" class="form-control form-search"
type="text" name="q" data-toggle="tooltip" title="{{$search_hint}}"
placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search"
type="submit">{{$nav.search.1}}</button>
</div>
</form>
</li>
{{/if}}
{{* The user dropdown menu *}}
{{if $nav.userinfo}}
<li id="nav-user-linkmenu" class="dropdown account nav-menu hidden-xs">
<button accesskey="u" id="main-menu" class="btn-link dropdown-toggle nav-avatar"
data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false"
aria-controls="nav-user-menu">
<div aria-hidden="true" class="user-title pull-left hidden-xs hidden-sm hidden-md">
<strong>{{$nav.userinfo.name}}</strong><br>
{{if $nav.remote}}<span class="trunctate">{{$nav.remote}}</span>{{/if}}
</div>
<img id="avatar" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}">
<span class="caret"></span>
</button>
{{* The list of available usermenu links *}}
<ul id="nav-user-menu" class="dropdown-menu pull-right menu-popup" role="menu"
aria-labelledby="main-menu">
{{if $nav.remote}}
{{if $nav.sitename}}
<li id="nav-sitename" role="menuitem">{{$nav.sitename}}</li>
<li role="presentation" class="divider"></li>
{{/if}}
{{/if}}
{{foreach $nav.usermenu as $usermenu}}
<li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
<li role="presentation" class="divider"></li>
{{if $nav.notifications}}
<li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}"
title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i>
{{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation"><a role="menuitem"
class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}"
href="{{$nav.messages.0}}" title="{{$nav.messages.3}}"><i
class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span
id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a>
</li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.contacts}}
<li role="presentation"><a role="menuitem" id="nav-menu-contacts-link"
class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
{{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation"><a role="menuitem" id="nav-delegation-link"
class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i
class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
<li role="presentation"><a role="menuitem" id="nav-directory-link"
class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}"
title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw"
aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
<li role="presentation" class="divider"></li>
{{if $nav.apps}}
<li role="presentation"><a role="menuitem" id="nav-apps-link"
class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}"><i
class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
<li role="presentation" class="divider"></li>
{{/if}}
{{if $nav.help}}
<li role="presentation"><a role="menuitem" id="nav-help-link"
class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i
class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a>
</li>
{{/if}}
{{if $nav.settings}}
<li role="presentation"><a role="menuitem" id="nav-settings-link"
class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
{{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link"
class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}"
title="{{$nav.admin.3}}"><i class="fa fa-user-secret fa-fw" aria-hidden="true"></i>
{{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.tos}}
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" id="nav-tos-link" class="nav-link {{$nav.tos.2}}"
href="{{$nav.tos.0}}" title="{{$nav.tos.3}}"><i class="fa fa-file-text"
aria-hidden="true"></i> {{$nav.tos.1}}</a></li>
{{/if}}
<li role="presentation" class="divider"></li>
{{if $nav.logout}}
<li role="presentation"><a role="menuitem" id="nav-logout-link"
class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}"
title="{{$nav.logout.3}}"><i class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i>
{{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation"><a role="menuitem" id="nav-login-link"
class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
title="{{$nav.login.3}}"><i class="fa fa-power-off fa-fw" aria-hidden="true"></i>
{{$nav.login.1}}</a></li>
{{/if}}
</ul>
</li>{{* End of userinfo dropdown menu *}}
{{/if}}
<!-- Language selector, I do not find it relevant, activate if necessary.
<li>{{$langselector}}</li>
-->
</ul>
</div>{{* End of right navbar *}}
{{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
<div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
<div class="nav-container">
<ul role="menu" class="list-group">
{{if $nav.remote}}
{{if $nav.sitename}}
<li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
{{/if}}
{{/if}}
<li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}"
alt="{{$nav.userinfo.name}}"
style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;">
{{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
{{foreach $nav.usermenu as $usermenu}}
<li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}"
href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
{{/foreach}}
{{if $nav.notifications}}
<li role="presentation" class="list-group-item"><a role="menuitem"
href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i
class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
{{/if}}
{{if $nav.contacts}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
{{$nav.contacts.1}}</a></li>
{{/if}}
{{if $nav.messages}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.messages.2}} {{$sel.messages}}" href="{{$nav.messages.0}}"
title="{{$nav.messages.3}}"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
{{$nav.messages.1}}</a></li>
{{/if}}
{{if $nav.delegation}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw"
aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
{{/if}}
{{if $nav.settings}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
{{$nav.settings.1}}</a></li>
{{/if}}
{{if $nav.admin}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}"><i
class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
{{/if}}
{{if $nav.logout}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}"><i
class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
{{else}}
<li role="presentation" class="list-group-item"><a role="menuitem"
class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"
title="{{$nav.login.3}}"><i class="fa fa-power-off fa-fw" aria-hidden="true"></i>
{{$nav.login.1}}</a></li>
{{/if}}
</ul>
</div>
</div>
<!--/.sidebar-offcanvas-->
</div><!-- end of div for navbar width-->
</div><!-- /.container -->
</nav><!-- /.navbar -->
{{/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">
<a href="login?mode=none" id="nav-login" data-toggle="tooltip" aria-label="{{$nav.login.3}}"
title="{{$nav.login.3}}">
<i class="fa fa-sign-in fa-fw" aria-hidden="true"></i> <i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>
</a> </a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}" title="{{$nav.about.3}}"> <a href="{{$nav.about.0}}" id="nav-about" data-toggle="tooltip" aria-label="{{$nav.about.3}}"
<i class="fa fa-info fa-fw" aria-hidden="true"></i> title="{{$nav.about.3}}">
</a> <i class="fa fa-info fa-fw" aria-hidden="true"></i>
</li> </a>
</ul> </li>
</ul>
</div>
</div> </div>
</div> </nav>
</nav>
{{/if}} {{/if}}
@ -269,7 +375,8 @@
<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"
data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button> <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</div> </div>
</form> </form>
@ -287,17 +394,18 @@
{{*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
@ -305,7 +413,9 @@ 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;"
d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z">
</path>
</mask> </mask>
</defs> </defs>
</svg> </svg>