make fullscreen mode available for other modules and some cleanup

This commit is contained in:
Mario Vavti 2016-03-31 23:13:40 +02:00
parent 6c2673ae2a
commit 90a5ba01a3
4 changed files with 62 additions and 54 deletions

View File

@ -107,17 +107,3 @@ aside {
.leave { .leave {
color: red; color: red;
} }
.generic-content-wrapper.fullscreen {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
border-radius: 0px;
z-index: 10000;
}
.generic-content-wrapper.fullscreen .section-title-wrapper {
border-radius: 0px;
}

View File

@ -1451,3 +1451,16 @@ function zid(s) {
return s; return s;
} }
function makeFullScreen(full) {
if(typeof full=='undefined' || full == true) {
$('#fullscreen, aside').hide();
$('#inline').show();
$('.generic-content-wrapper').addClass('fullscreen');
}
else {
$('#fullscreen, aside').show();
$('#inline').hide();
$('.generic-content-wrapper').removeClass('fullscreen');
}
}

View File

@ -1518,6 +1518,20 @@ nav .dropdown-menu {
word-wrap: break-word; word-wrap: break-word;
} }
.generic-content-wrapper.fullscreen {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
border-radius: 0px;
z-index: 10000;
}
.generic-content-wrapper.fullscreen .section-title-wrapper {
border-radius: 0px;
}
.chatroom-index-row:hover td, .chatroom-index-row:hover td,
.locs-index-row:hover td, .locs-index-row:hover td,
[id^="cloud-index-"]:hover td, [id^="cloud-index-"]:hover td,

View File

@ -1,8 +1,8 @@
<div class="generic-content-wrapper"> <div class="generic-content-wrapper">
<div class="section-title-wrapper"> <div class="section-title-wrapper">
<div class="pull-right"> <div class="pull-right">
<button id="fullscreen" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen();"><i class="icon-resize-full"></i></button> <button id="fullscreen" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen(); adjustFullscreenTopBarHeight();"><i class="icon-resize-full"></i></button>
<button id="inline" type="button" class="btn btn-default btn-xs" onclick="makeInline();"><i class="icon-resize-small"></i></button> <button id="inline" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen(false); adjustInlineTopBarHeight();"><i class="icon-resize-small"></i></button>
{{if $is_owner}} {{if $is_owner}}
<form id="chat-destroy" method="post" action="chat"> <form id="chat-destroy" method="post" action="chat">
<input type="hidden" name="room_name" value="{{$room_name}}" /> <input type="hidden" name="room_name" value="{{$room_name}}" />
@ -109,12 +109,16 @@ $(document).ready(function() {
chat_timer = setTimeout(load_chats,300); chat_timer = setTimeout(load_chats,300);
$('#chatroom_bookmarks, #vcard').hide(); $('#chatroom_bookmarks, #vcard').hide();
$('#chatroom_list, #chatroom_members').show(); $('#chatroom_list, #chatroom_members').show();
$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 23 ); adjustInlineTopBarHeight();
}); });
$(window).resize(function () { $(window).resize(function () {
var navHeight = $('.generic-content-wrapper').hasClass('fullscreen') ? 0 : $('nav').outerHeight(true); if($('.generic-content-wrapper').hasClass('fullscreen')) {
$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - navHeight - 23); adjustFullscreenTopBarHeight();
}
else {
adjustInlineTopBarHeight();
}
$('#chatTopBar').scrollTop($('#chatTopBar').scrollTop() + $('#chatTopBar').outerHeight(true)); $('#chatTopBar').scrollTop($('#chatTopBar').scrollTop() + $('#chatTopBar').outerHeight(true));
}); });
@ -177,7 +181,6 @@ function update_chats(chats) {
} }
function chatJotGetLink() { function chatJotGetLink() {
reply = prompt("{{$linkurl}}"); reply = prompt("{{$linkurl}}");
if(reply && reply.length) { if(reply && reply.length) {
@ -194,47 +197,39 @@ function addmailtext(data) {
$("#chatText").val(currentText + data); $("#chatText").val(currentText + data);
} }
function makeFullScreen() { function adjustFullscreenTopBarHeight() {
$('#fullscreen, aside').hide();
$('#inline').show();
$('.generic-content-wrapper').addClass('fullscreen');
$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - 23); $('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - 23);
} }
function makeInline() { function adjustInlineTopBarHeight() {
$('#fullscreen, aside').show();
$('#inline').hide();
$('.generic-content-wrapper').removeClass('fullscreen');
$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 23); $('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 23);
} }
</script>
<script>
function isMobile() { function isMobile() {
if( navigator.userAgent.match(/Android/i) if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/Windows Phone/i)
){ ){
return true; return true;
}
else {
return false;
}
}
$(function(){
$('#chatText').keypress(function(e){
if (e.keyCode == 13 && e.shiftKey||isMobile()) {
} }
else if (e.keyCode == 13) { else {
e.preventDefault(); return false;
$('#chat-form').trigger('submit'); }
} }
});
$(function(){
$('#chatText').keypress(function(e){
if (e.keyCode == 13 && e.shiftKey||isMobile()) {
//do nothing
}
else if (e.keyCode == 13) {
e.preventDefault();
$('#chat-form').trigger('submit');
}
});
}); });
</script> </script>