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

Some code cleanup - move js and css to head.tpl -> this stuff should be done in theme.php but does need changings in core (this would allow theme developers more structured working)

Browse source
This commit is contained in:
rabuzarus 2016-05-08 00:29:33 +02:00
parent da63ae343a
commit 88be5e3028
6 changed files with 315 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -9,7 +9,7 @@ and open the template in the editor.
*/
/* Imports */
@import url("frameworks/bootstrap/css/bootstrap.min.css");
/*@import url("frameworks/bootstrap/css/bootstrap.min.css");
@import url("frameworks/bootstrap/css/bootstrap-theme.min.css");
@import url("frameworks/font-awesome/css/font-awesome.min.css");
@import url("frameworks/jasny/css/jasny-bootstrap.min.css");
@ -19,7 +19,7 @@ and open the template in the editor.
@import url("frameworks/justifiedGallery/justifiedGallery.min.css");
@import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
@import url("font/open_sans/open-sans.css");
@import url("css/hovercard.css");
@import url("css/hovercard.css");*/
body {

180
js/hovercard.js
View file

@ -7,90 +7,103 @@
* It is licensed under the GNU Affero General Public License <http://www.gnu.org/licenses/>
*
*/
$(document).ready(function(){
// Elements with the class "userinfo" will get a hover-card.
// Note that this elements does need a href attribute which links to
// a valid profile url
$("body").on("mouseover", ".userinfo", function(e) {
var timeNow = new Date().getTime();
removeAllhoverCards(e,timeNow);
var hoverCardData = false;
var hrefAttr = false;
var targetElement = $(this);
// Elements with the class "userinfo" will get a hover-card.
// Note that this elements does need a href attribute which links to
// a valid profile url
$("body").on("mouseover", ".userinfo", function(e) {
// get href-attribute
if(targetElement.is('[href]')) {
hrefAttr = targetElement.attr('href');
} else {
return true;
}
// no hover card if the element has the no-hover-card class
if(targetElement.hasClass('no-hover-card')) {
return true;
}
// no hovercard for anchor links
if(hrefAttr.substring(0,1) == '#') {
return true;
}
targetElement.attr('data-awaiting-hover-card',timeNow);
// Take link href attribute as link to the profile
var profileurl = hrefAttr;
// the url to get the contact and template data
var url = baseurl + "/frio_hovercard";
// store the title in an other data attribute beause bootstrap
// popover destroys the title.attribute. We can restore it later
var title = targetElement.attr("title");
targetElement.attr({"data-orig-title": title, title: ""});
// Timeoute until the hover-card does appear
setTimeout(function(){
if(targetElement.is(":hover") && parseInt(targetElement.attr('data-awaiting-hover-card'),10) == timeNow) {
if($('.hovercard').length == 0) { // no card if there already is one open
// get an additional data atribute if the card is active
targetElement.attr('data-hover-card-active',timeNow);
// get the whole html content of the hover card and
// push it to the bootstrap popover
getHoverCardContent(profileurl, url, function(data){
if(data) {
targetElement.popover({
html: true,
placement: function () {
// Calculate the placement of the the hovercard (if top or bottom)
// The placement depence on the distance between window top and the element
// which triggers the hover-card
var get_position = $(targetElement).offset().top - $(window).scrollTop();
if (get_position < 270 ){
return "bottom";
}
return "top";
},
trigger: 'manual',
template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
content: data
}).popover('show');
}
});
}
}
}, 500);
}).on("mouseleave", ".userinfo", function(e) { // action when mouse leaves the hover-card
var timeNow = new Date().getTime();
// copy the original title to the title atribute
var title = $(this).attr("data-orig-title");
$(this).attr({"data-orig-title": "", title: title});
removeAllhoverCards(e,timeNow);
});
// hover cards should be removed very easily, e.g. when any of these events happen
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
var timeNow = new Date().getTime();
removeAllhoverCards(e,timeNow);
var hoverCardData = false;
var hrefAttr = false;
var targetElement = $(this);
});
// get href-attribute
if(targetElement.is('[href]')) {
hrefAttr = targetElement.attr('href');
} else {
return true;
}
// if we're hovering a hover card, give it a class, so we don't remove it
$('body').on('mouseover','.hovercard', function(e) {
$(this).addClass('dont-remove-card');
});
$('body').on('mouseleave','.hovercard', function(e) {
$(this).removeClass('dont-remove-card');
$(this).popover("hide");
});
// 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(hrefAttr.substring(0,1) == '#') {
return true;
}
targetElement.attr('data-awaiting-hover-card',timeNow);
// Take link href attribute as link to the profile
var profileurl = hrefAttr;
// the url to get the contact and template data
var url = baseurl + "/frio_hovercard";
// store the title in an other data attribute beause bootstrap
// popover destroys the title.attribute. We can restore it later
var title = targetElement.attr("title");
targetElement.attr({"data-orig-title": title, title: ""});
// Timeoute until the hover-card does appear
setTimeout(function(){
if(targetElement.is(":hover") && parseInt(targetElement.attr('data-awaiting-hover-card'),10) == timeNow) {
if($('.hovercard').length == 0) { // no card if there already is one open
// get an additional data atribute if the card is active
targetElement.attr('data-hover-card-active',timeNow);
// get the whole html content of the hover card and
// push it to the bootstrap popover
getHoverCardContent(profileurl, url, function(data){
if(data) {
targetElement.popover({
html: true,
placement: function () {
// Calculate the placement of the the hovercard (if top or bottom)
// The placement depence on the distance between window top and the element
// which triggers the hover-card
var get_position = $(targetElement).offset().top - $(window).scrollTop();
if (get_position < 270 ){
return "bottom";
}
return "top";
},
trigger: 'manual',
template: '<div class="popover hovercard" data-card-created="' + timeNow + '"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
content: data
}).popover('show');
}
});
}
}
}, 500);
}).on("mouseleave", ".userinfo", function(e) { // action when mouse leaves the hover-card
var timeNow = new Date().getTime();
// copy the original title to the title atribute
var title = $(this).attr("data-orig-title");
$(this).attr({"data-orig-title": "", title: title});
removeAllhoverCards(e,timeNow);
});
// hover cards should be removed very easily, e.g. when any of these events happen
$('body').on("mouseleave touchstart scroll click dblclick mousedown mouseup submit keydown keypress keyup", function(e){
var timeNow = new Date().getTime();
removeAllhoverCards(e,timeNow);
});
}); // End of $(document).ready
// removes all hover cards
function removeAllhoverCards(event,priorTo) {
@ -110,15 +123,6 @@ function removeAllhoverCards(event,priorTo) {
},100);
}
// if we're hovering a hover card, give it a class, so we don't remove it
$('body').on('mouseover','.hovercard', function(e) {
$(this).addClass('dont-remove-card');
});
$('body').on('mouseleave','.hovercard', function(e) {
$(this).removeClass('dont-remove-card');
$(this).popover("hide");
});
// Ajax request to get json contact data
function getContactData(purl, url, actionOnSuccess) {
var postdata = {

83
js/textedit.js Normal file
View file

@ -0,0 +1,83 @@
/*
* @brief The file contains functions for text editing and commenting
*/
function insertFormatting(comment,BBcode,id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == comment) {
tmpStr = "";
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
openMenu("comment-edit-submit-wrapper-" + id);
$("#comment-edit-text-" + id).val(tmpStr);
}
textarea = document.getElementById("comment-edit-text-" +id);
if (document.selection) {
textarea.focus();
selected = document.selection.createRange();
if (BBcode == "url"){
selected.text = "["+BBcode+"]" + "http://" + selected.text + "[/"+BBcode+"]";
} else
selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
} else if (textarea.selectionStart || textarea.selectionStart == "0") {
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
if (BBcode == "url"){
textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
} else
textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
}
return true;
}
function showThread(id) {
$("#collapsed-comments-" + id).show()
$("#collapsed-comments-" + id + " .collapsed-comments").show()
}
function hideThread(id) {
$("#collapsed-comments-" + id).hide()
$("#collapsed-comments-" + id + " .collapsed-comments").hide()
}
function cmtBbOpen(id) {
$("#comment-edit-bb-" + id).show();
}
function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide();
}
function commentExpand(id) {
$("#comment-edit-text-" + id).value = '';
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
$("#comment-edit-text-" + id).focus();
$("#mod-cmnt-wrap-" + id).show();
openMenu("comment-edit-submit-wrapper-" + id);
return true;
}
function commentClose(obj,id) {
if(obj.value == '') {
obj.value = '{{$comment}}';
$("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
$("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
$("#mod-cmnt-wrap-" + id).hide();
closeMenu("comment-edit-submit-wrapper-" + id);
return true;
}
return false;
}
function showHideCommentBox(id) {
if( $('#comment-edit-form-' + id).is(':visible')) {
$('#comment-edit-form-' + id).hide();
}
else {
$('#comment-edit-form-' + id).show();
}
}

48
js/theme.js
View file

@ -281,54 +281,6 @@ function qOrAmp(url) {
}
}
function insertFormatting(comment,BBcode,id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == comment) {
tmpStr = "";
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
openMenu("comment-edit-submit-wrapper-" + id);
$("#comment-edit-text-" + id).val(tmpStr);
}
textarea = document.getElementById("comment-edit-text-" +id);
if (document.selection) {
textarea.focus();
selected = document.selection.createRange();
if (BBcode == "url"){
selected.text = "["+BBcode+"]" + "http://" + selected.text + "[/"+BBcode+"]";
} else
selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
} else if (textarea.selectionStart || textarea.selectionStart == "0") {
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
if (BBcode == "url"){
textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
} else
textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
}
return true;
}
function showThread(id) {
$("#collapsed-comments-" + id).show()
$("#collapsed-comments-" + id + " .collapsed-comments").show()
}
function hideThread(id) {
$("#collapsed-comments-" + id).hide()
$("#collapsed-comments-" + id + " .collapsed-comments").hide()
}
function cmtBbOpen(id) {
$("#comment-edit-bb-" + id).show();
}
function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide();
}
function contact_filter(item) {
// get the html content from the js template of the contact-wrapper
contact_tpl = unescape($(".javascript-template[rel=contact-template]").html());

56
php/modes/default.php
View file

@ -17,7 +17,6 @@
<html>
<head>
<title><?php if(x($page,'title')) echo $page['title'] ?></title>
<meta name="viewport" content="initial-scale=1.0">
<meta request="<?php echo $_REQUEST['pagename'] ?> ">
<script>var baseurl="<?php echo $a->get_baseurl() ?>";</script>
<script>var frio="<?php echo "view/theme/frio"; ?>";</script>
@ -110,60 +109,7 @@ else
</main>
<footer>
<span id="notifsound"></span>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script type="text/javascript">
$.fn.enterKey = function (fnc, mod) {
return this.each(function () {
$(this).keypress(function (ev) {
var keycode = (ev.keyCode ? ev.keyCode : ev.which);
if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
fnc.call(this, ev);
}
})
})
}
$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')
$('input').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')
</script>
<script>
var pagetitle = null;
$("nav").bind('nav-update', function(e,data)
{
if (pagetitle==null) pagetitle = document.title;
var count = $(data).find('notif').attr('count');
if (count>0)
{
document.title = "("+count+") "+pagetitle;
/* document.getElementById('notifsound').innerHTML='<object type="audio/mpeg" width="0" height="0" data="<?=$frio?>/audios/901.mp3"><param name="notif" value="<?=$frio?>/audios/901.mp3" /><param name="autostart" value="true" /><param name="loop" value="false" /></object>'; */
}
else
{
document.title = pagetitle;
}
});
</script>
<script src="<?=$frio?>/frameworks/bootstrap/js/bootstrap.min.js"></script>
<script src="<?=$frio?>/frameworks/jasny/js/jasny-bootstrap.custom.js"></script>
<script src="<?=$frio?>/frameworks/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="<?=$frio?>/frameworks/ekko-lightbox/ekko-lightbox.min.js"></script>
<script src="<?=$frio?>/frameworks/justifiedGallery/jquery.justifiedGallery.min.js"></script>
<script src="<?=$frio?>/frameworks/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<script src="<?=$frio?>/frameworks/flexMenu/flexmenu.custom.js"></script>
<script src="<?=$frio?>/frameworks/jsmart/jsmart.custom.js"></script>
<script src="<?=$frio?>/js/theme.js"></script>
<script src="<?=$frio?>/js/modal.js"></script>
<script src="<?=$frio?>/js/hovercard.js"></script>
<?php if(x($page,'footer')) echo $page['footer']; ?>
<!-- Modal -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="plan-info" aria-hidden="true">
<div class="modal-dialog modal-full-screen">

137
templates/head.tpl Normal file
View file

@ -0,0 +1,137 @@
{{* This content will be added to the html page <head> *}}
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<base href="{{$baseurl}}/" />
<meta name="generator" content="{{$generator}}" />
<meta name="viewport" content="initial-scale=1.0">
{{* All needed css files - Note: css must be inserted before js files *}}
<link rel="stylesheet" href="view/global.css" type="text/css" media="all" />
<link rel="stylesheet" href="library/colorbox/colorbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/jgrowl/jquery.jgrowl.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/datetimepicker/jquery.datetimepicker.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/perfect-scrollbar/perfect-scrollbar.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="view/theme/frio/frameworks/bootstrap/css/bootstrap.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/bootstrap/css/bootstrap-theme.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/font-awesome/css/font-awesome.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/jasny/css/jasny-bootstrap.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/bootstrap-select/css/bootstrap-select.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/ekko-lightbox/ekko-lightbox.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/justifiedGallery/justifiedGallery.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="view/theme/frio/font/open_sans/open-sans.css" type="text/css" media="screen"/>
{{* The own style.css *}}
<link rel="stylesheet" type="text/css" href="{{$stylesheet}}" media="all" />
{{* own css files *}}
<link rel="stylesheet" href="view/theme/frio/css/hovercard.css" type="text/css" media="screen"/>
<!--
<link rel="shortcut icon" href="images/friendica-32.png" />
<link rel="apple-touch-icon" href="images/friendica-128.png"/>
-->
<link rel="shortcut icon" href="{{$shortcut_icon}}" />
<link rel="apple-touch-icon" href="{{$touch_icon}}"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="search"
href="{{$baseurl}}/opensearch"
type="application/opensearchdescription+xml"
title="Search in Friendica" />
{{* The js files we use *}}
<!--[if IE]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/modernizr.js" ></script>
<script type="text/javascript" src="js/jquery.js" ></script>
<!-- <script type="text/javascript" src="js/jquery-migrate.js" ></script>-->
<script type="text/javascript" src="js/jquery-migrate.js" ></script>
<script type="text/javascript" src="js/jquery.textinputs.js" ></script>
<script type="text/javascript" src="library/jquery-textcomplete/jquery.textcomplete.min.js" ></script>
<script type="text/javascript" src="js/autocomplete.js" ></script>
<script type="text/javascript" src="library/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="library/jgrowl/jquery.jgrowl_minimized.js"></script>
<script type="text/javascript" src="library/datetimepicker/jquery.datetimepicker.js"></script>
<script type="text/javascript" src="library/tinymce/jscripts/tiny_mce/tiny_mce_src.js" ></script>
<script type="text/javascript" src="library/perfect-scrollbar/perfect-scrollbar.jquery.js" ></script>
<script type="text/javascript" src="js/acl.js" ></script>
<script type="text/javascript" src="js/webtoolkit.base64.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript" src="view/theme/frio/frameworks/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/jasny/js/jasny-bootstrap.custom.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/ekko-lightbox/ekko-lightbox.min.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/justifiedGallery/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/flexMenu/flexmenu.custom.js"></script>
<script type="text/javascript" src="view/theme/frio/frameworks/jsmart/jsmart.custom.js"></script>
{{* own js files *}}
<script type="text/javascript" src="view/theme/frio/js/theme.js"></script>
<script type="text/javascript" src="view/theme/frio/js/modal.js"></script>
<script type="text/javascript" src="view/theme/frio/js/hovercard.js"></script>
<script type="text/javascript" src="view/theme/frio/js/textedit.js"></script>
<script>
var updateInterval = {{$update_interval}};
var localUser = {{if $local_user}}{{$local_user}}{{else}}false{{/if}};
function confirmDelete() { return confirm("{{$delitem}}"); }
function commentOpen(obj,id) {
if(obj.value == '{{$comment}}') {
obj.value = '';
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
$("#mod-cmnt-wrap-" + id).show();
openMenu("comment-edit-submit-wrapper-" + id);
return true;
}
return false;
}
function commentInsert(obj,id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == '{{$comment}}') {
tmpStr = '';
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
openMenu("comment-edit-submit-wrapper-" + id);
}
var ins = $(obj).html();
ins = ins.replace('&lt;','<');
ins = ins.replace('&gt;','>');
ins = ins.replace('&amp;','&');
ins = ins.replace('&quot;','"');
$("#comment-edit-text-" + id).val(tmpStr + ins);
}
function qCommentInsert(obj,id) {
var tmpStr = $("#comment-edit-text-" + id).val();
if(tmpStr == '{{$comment}}') {
tmpStr = '';
$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
openMenu("comment-edit-submit-wrapper-" + id);
}
var ins = $(obj).val();
ins = ins.replace('&lt;','<');
ins = ins.replace('&gt;','>');
ins = ins.replace('&amp;','&');
ins = ins.replace('&quot;','"');
$("#comment-edit-text-" + id).val(tmpStr + ins);
$(obj).val('');
}
window.showMore = "{{$showmore}}";
window.showFewer = "{{$showfewer}}";
</script>