BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fit to width slide in portrait. substitute jquery resizing for whiteboard

Browse Source
This commit is contained in:
Anton Georgiev 2015-02-24 21:29:32 +00:00
parent 42de151296
commit 6cededf848
3 changed files with 14 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
labs/meteor-client/app/client/stylesheets/whiteboard.less
View File

@ -10,6 +10,7 @@
flex: 2 2 50%;
min-width: 0;
@media @landscape {
height:98%;
-webkit-order: 2;
order: 2;
display: -moz-flex;

29
labs/meteor-client/app/client/views/whiteboard/slide.coffee
View File

@ -5,13 +5,9 @@ Template.slide.rendered = ->
setInSession 'slideOriginalWidth', this.width
setInSession 'slideOriginalHeight', this.height
$(window).resize( ->
# redraw the whiteboard to adapt to the resized window
redrawWhiteboard()
)
if window.matchMedia('(orientation: portrait)').matches
$('#whiteboard').height($('#whiteboard').width() * this.height / this.width + $('#whiteboard-navbar').height() + 20)
else
# set the slide height to the max available
$('#whiteboard-paper').height($('#whiteboard').height())
if currentSlide?.slide?.png_uri?
createWhiteboardPaper (wpm) ->
displaySlide wpm
@ -49,19 +45,18 @@ Template.slide.rendered = ->
# based on the image's original width and height
@scaleSlide = (originalWidth, originalHeight) ->
# the size of the whiteboard space (frame) where the slide will be displayed
boardWidth = $("#whiteboard").width()
boardHeight = null # see under
# calculate boardHeight
whiteboardBottom = $("#whiteboard").offset().top + $("#whiteboard").height()
footerTop = $(".myFooter").offset().top
if footerTop < whiteboardBottom
boardHeight = footerTop - $("#whiteboard").offset().top - $("#whiteboard-navbar").height() - 10
else
boardHeight = $("#whiteboard").height() - $("#whiteboard-navbar").height() - 10
# set the size of the whiteboard space (frame) where the slide will be displayed
if window.matchMedia('(orientation: landscape)').matches
boardHeight -= 10; # add some bottom padding
# for landscape orientation we want "fit to height" so that we can
# minimize the empty space above and below the slide (for best readability)
boardWidth = $("#whiteboard").width()
# the slide area is under the whiteboard navbar. -10 so that the slide stays within
boardHeight = $("#whiteboard").height() - $("#whiteboard-navbar").height() - 10
else
# for portrait orientation we want "fit to width" so that we can
# minimize the empty space on the sides of the slide (for best readability)
boardWidth = $("#whiteboard").width()
boardHeight = 1.4 * $("#whiteboard").width() # A4 ratio
# this is the best fitting pair
adjustedWidth = null

9
labs/meteor-client/app/client/views/whiteboard/whiteboard.coffee
View File

@ -1,8 +1,5 @@
# redraw the whiteboard to adapt to the resized window
@redrawWhiteboard = () ->
if window.matchMedia('(orientation: portrait)').matches
$('#whiteboard').height($('#whiteboard').width() * getInSession('slideOriginalHeight') / getInSession('slideOriginalWidth') + $('#whiteboard-navbar').height() + 20)
else if $('#whiteboard').height() isnt $('#users').height() + 10
$('#whiteboard').height($('#users').height() + 10)
adjustedDimensions = scaleSlide(getInSession('slideOriginalWidth'), getInSession('slideOriginalHeight'))
wpm = whiteboardPaperModel
wpm.clearShapes()
@ -10,7 +7,3 @@
manuallyDisplayShapes()
wpm.scale(adjustedDimensions.width, adjustedDimensions.height)
wpm.createCursor()
Template.whiteboard.rendered = ->
if window.matchMedia('(orientation: landscape)').matches
$("#whiteboard").height(($("#chat").height()) + 'px')