Merge pull request #2386 from FinnStutzenstein/sidebarScroll

First attempt to scroll the projector sidebar
This commit is contained in:
Norman Jäckel 2016-09-21 12:40:13 +02:00 committed by GitHub
commit 2d15bd54a1
3 changed files with 55 additions and 5 deletions

View File

@ -450,7 +450,9 @@ img {
#content .col2 {
float: right;
position: relative;
display: inline-table;
z-index: 3;
margin-bottom: 20px;
}
#content .col2.max {
@ -1252,7 +1254,11 @@ tr.selected td {
}
#content .col2.max {
width: 100%;
position: absolute;
position: absolute !important;
left: 0;
}
#content .col1.min {
width: calc(100% - 70px);
}
.col2 .projector_full {
margin-left: 0px;

View File

@ -989,11 +989,54 @@ angular.module('OpenSlidesApp.core.site', [
// Projector Sidebar Controller
.controller('ProjectorSidebarCtrl', [
'$scope',
function ($scope) {
'$document',
'$window',
function ($scope, $document, $window) {
$scope.isProjectorSidebar = false;
$scope.showProjectorSidebar = function (show) {
$scope.isProjectorSidebar = show;
};
// Sidebar scroll
var marginTop = 20, // margin-top from #content
marginBottom = 30, // 30px + 20px sidebar margin-bottom = 50px from footer
sidebar;
var sidebarScroll = function () {
var sidebarHeight = sidebar.height(),
sidebarOffset = sidebar.offset().top,
sidebarMinOffset = $('#header').height() + $('#nav').height() + marginTop,
documentHeight = $document.height(),
windowHeight = $window.innerHeight,
scrollTop = $window.pageYOffset;
// First, check if there is a need to scroll: scroll if the sidebar is smaller then the content
if (sidebarHeight < $('.col1').height()) {
if ((scrollTop + marginTop + sidebarHeight) > (documentHeight - marginBottom)) {
// Stick to the bottom
var bottom = marginBottom + scrollTop + windowHeight - documentHeight;
sidebar.css({'position': 'fixed', 'top': '', 'bottom': bottom});
} else if ((scrollTop + marginTop) > sidebarMinOffset) {
// scroll with the user
sidebar.css({'position': 'fixed', 'top': marginTop, 'bottom': ''});
} else {
// Stick to the top
sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
}
} else {
// Stick to the top, if the sidebar is larger then the content
sidebar.css({'position': 'relative', 'top': 0, 'bottom': ''});
}
};
$scope.initSidebar = function () {
sidebar = $('#sidebar');
$scope.$watch(function () {
return sidebar.height();
}, sidebarScroll);
angular.element($window).bind('scroll', sidebarScroll);
};
}
])
@ -1237,7 +1280,7 @@ angular.module('OpenSlidesApp.core.site', [
}, function () {
var conf = Config.get('projector_resolution').value;
// With multiprojector, get the resolution from Prjector.get(pk).{width; height}
if(!last_conf || last_conf.width != conf.width || last-conf.height != conf.height) {
if(!last_conf || last_conf.width != conf.width || last_conf.height != conf.height) {
last_conf = conf;
$scope.projectorWidth = conf.width;
$scope.projectorHeight = conf.height;

View File

@ -171,8 +171,9 @@
<a ui-sref="legalnotice" translate>Legal notice</a>
</div><!--end footer-->
</div>
<div class="col2" os-perms="core.can_see_projector"
ng-class="isProjectorSidebar ? 'max' : 'min'">
<div id="sidebar" class="col2" os-perms="core.can_see_projector"
ng-class="isProjectorSidebar ? 'max' : 'min'"
ng-init="initSidebar()">
<!-- sidebar maximized -->
<div class="projector_full" ng-if="isProjectorSidebar">
<div class="title" ng-click="showProjectorSidebar(false)">