rob.m rob.m - 6 months ago 11
jQuery Question

How to limit the scaledown of an svg not less than its original size?

HTML

<button class="zoom_plus">+</button>
<button class="zoom_minus">-</button>
<div class="map" data-scale="0">
<svg>...</svg>
</div>


JS scaledown (how not to scale less than its original size?) :

var $map = $(".map");
$(".zoom_minus").on("click", function(){
var $svg = $map.find('svg');
var current_scale = $map.attr('data-scale');
current_scale = parseInt(current_scale,10);
var sclae_to = current_scale - 2;

$svg.css({'transform': 'scale('+ sclae_to +')'});
$map.attr('data-scale',sclae_to);
});


JS scale UP

$(".zoom_plus").on("click", function(){
var $svg = $map.find('svg');
var current_scale = $map.attr('data-scale');
current_scale = parseInt(current_scale,10);
var sclae_to = current_scale + 2;

$svg.css({'transform': 'scale('+ sclae_to +')'});
$map.attr('data-scale',sclae_to);
});

Answer

Save the initial value of data-scale and use scaleDown conditionally:

var $map = $(".map");
var initialScale=parseInt($map.attr('data-scale'));

$(".zoom_plus").on("click", function(){
    var $svg = $map.find('svg');
    var current_scale = $map.attr('data-scale');
        current_scale = parseInt(current_scale,10);
    var sclae_to = current_scale - 2;

    //Perform this check
    if(sclae_to<initialScale){sclae_to=initialScale;}

    $svg.css({'transform': 'scale('+ sclae_to +')'});
    $map.attr('data-scale',sclae_to);
});

Besides it not seems correct to define two onClick functions both on map!