From 3747e24cbead81527ddee8aa455f8d3133cb429c Mon Sep 17 00:00:00 2001 From: Simon Rettberg Date: Tue, 28 Mar 2017 13:51:16 +0200 Subject: [roomplanner] Add "fit to content" zoom button Implements #2965 --- modules-available/roomplanner/js/grid.js | 58 +++++++++++++++++++---- modules-available/roomplanner/js/init.js | 4 ++ modules-available/roomplanner/style.css | 7 ++- modules-available/roomplanner/templates/page.html | 5 +- 4 files changed, 61 insertions(+), 13 deletions(-) (limited to 'modules-available/roomplanner') diff --git a/modules-available/roomplanner/js/grid.js b/modules-available/roomplanner/js/grid.js index cc09e21d..334057bf 100644 --- a/modules-available/roomplanner/js/grid.js +++ b/modules-available/roomplanner/js/grid.js @@ -17,6 +17,7 @@ if (!roomplanner) var roomplanner = { }, settings: { cellsep: 4, + cellsize: 25, scale: 100, room: { width: 33, @@ -363,6 +364,7 @@ if (!roomplanner) var roomplanner = { }); roomplanner.grid.scale(roomplanner.settings.scale); + roomplanner.fitContent(); }, clear: function() { $('#draw-element-area').html(''); @@ -393,20 +395,18 @@ roomplanner.grid = (function() { $('#drawarea').css('background-size',num); roomplanner.settings.scale = num; $('#draw-element-area .ui-draggable').each(function(idx,item) { - var h = $(item).attr('data-height') * roomplanner.getScaleFactor(); - var w = $(item).attr('data-width') * roomplanner.getScaleFactor(); + var $item = $(item); + var h = $item.attr('data-height') * roomplanner.getScaleFactor(); + var w = $item.attr('data-width') * roomplanner.getScaleFactor(); //var pos = roomplanner.getCelloffset() + + var pos = roomplanner.getCellPositionFromGrid($item.attr('gridRow'),$item.attr('gridCol')); - var l = parseInt($(item).css('left')) * roomplanner.getScaleFactor(); - var t = parseInt($(item).css('top')) * roomplanner.getScaleFactor(); - - var pos = roomplanner.getCellPositionFromGrid($(item).attr('gridRow'),$(item).attr('gridCol')); - - $(item).css({width: w+"px", height: h+"px", left: pos[0]+"px", top: pos[1]+"px"}); - $(item).draggable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]); + $item.css({width: w+"px", height: h+"px", left: pos[0]+"px", top: pos[1]+"px"}); + $item.draggable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]); if (roomplanner.isElementResizable(item)) { - $(item).resizable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]); + $item.resizable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]); } }); this.resize(); @@ -423,6 +423,44 @@ roomplanner.grid = (function() { } )(); +roomplanner.fitContent = function() { + var minX = 99999; + var minY = 99999; + var maxX = -99999; + var maxY = -99999; + $('#draw-element-area .ui-draggable').each(function(idx,item) { + var $item = $(item); + + var l = parseInt($item.attr('gridcol')) * roomplanner.settings.cellsize; + var r = l + parseInt($item.attr('data-width')); + var t = parseInt($item.attr('gridrow')) * roomplanner.settings.cellsize; + var b = t + parseInt($item.attr('data-height')); + + if (l < minX) minX = l; + if (t < minY) minY = t; + if (r > maxX) maxX = r; + if (b > maxY) maxY = b; + }); + if (minX > maxX) + return; + var width = (maxX - minX) / $('#drawpanel .panel-body').width(); + var height = (maxY - minY) / $('#drawpanel .panel-body').height(); + var scale; + if (width > height) { + scale = Math.floor(100 / width); + } else { + scale = Math.floor(100 / height); + } + roomplanner.slider.slider('value', scale); + scale = roomplanner.settings.scale; + var opts = { + left: -(minX * (scale / 100)) + "px", + top: -(minY * (scale / 100)) + "px" + }; + + $('#drawarea').css(opts); +}; + $(document).ready(function(){ roomplanner.grid.init(); diff --git a/modules-available/roomplanner/js/init.js b/modules-available/roomplanner/js/init.js index ef3d15a7..7cada0dd 100644 --- a/modules-available/roomplanner/js/init.js +++ b/modules-available/roomplanner/js/init.js @@ -59,6 +59,10 @@ function initRoomplanner() { $('#zoom-in').click(function() { roomplanner.slider.slider('value', roomplanner.settings.scale + 10); }); + + $('#zoom-fit').click(function() { + roomplanner.fitContent(); + }); } var translation = { diff --git a/modules-available/roomplanner/style.css b/modules-available/roomplanner/style.css index 1460364a..6a68a444 100644 --- a/modules-available/roomplanner/style.css +++ b/modules-available/roomplanner/style.css @@ -40,7 +40,7 @@ body { #scaleContainer { position: absolute; bottom: 5px; - right: 30px; + right: 50px; width: 15%; z-index:1000; } @@ -48,7 +48,7 @@ body { #scaleslider { position:relative;} -#zoom-out, #zoom-in { +#zoom-out, #zoom-in, #zoom-fit { cursor:pointer; } @@ -61,6 +61,9 @@ body { #scaleContainer .glyphicon-zoom-out { left:-20px;} +#scaleContainer .glyphicon-move { + right:-40px;} + #scaleContainer .glyphicon-zoom-in { right:-20px; } diff --git a/modules-available/roomplanner/templates/page.html b/modules-available/roomplanner/templates/page.html index 8bfa0ca4..e8544ce8 100644 --- a/modules-available/roomplanner/templates/page.html +++ b/modules-available/roomplanner/templates/page.html @@ -301,9 +301,12 @@
+ +
+
@@ -311,7 +314,7 @@
-
+
{{lang_managerIp}}
-- cgit v1.2.3-55-g7522