scrollmap-with-zoom
v1.11.1
Published
Improved version of scrollmap used in multiple bga game
Downloads
25
Readme
bga_scrollmap
Improved version of scrollmap used in multiple bga game
improvements
- add zoom capabilities
- add possibility to adjust pan delta to tile size when clicking on arrows
- allow zoom with scroll wheel
- allow pan/scrool and pinch zoom on smartphone
- allow control of scrollmap with keys
- make clickable area of buttons a bit bigger on smartphone
- zooming with buttons doesn't drift the board anymore
- improve animation between game board and player bards tanks to an animation_div
- add support to long click on buttons (continuous scroll or zoom or enlarge/reduce until button released)
- add possibility to select which key need to be pressed when zooming with wheel
- only allow 2 fingers scrolling by default, one finger is for page scrolling
- only allow zoom with wheel if alt or ctrl or shift are pressed by default, wheel+no key pressed scroll the page as usual.
- keep in memory zoom, pos for each game table between sessions via localStore
- adapt height automatically when bAdaptHeightAuto is set
- allow tooltips on any scrollmap layer
- ...
usage
in tpl file:
<div id="map_container" class="scrollmap_container">
</div>
in your css file
#map_container {
position: relative;
width: 100%;
height: 600px;
}
in your js file
settings you can change :
zoom, maxZoom, minZoom, defaultZoom, zoomPinchDelta, zoomWheelDelta, zoomDelta, bEnableZooming, zoomingOptions, zoomChangeHandler
scrollDelta, bScrollDeltaAlignWithZoom, bEnableScrolling, crollingOptions
minHeight, incrHeightDelta, incrHeightKeepInPos, bAdaptHeightAuto, adaptHeightCorr
setup: function (gamedatas) {
...
this.scrollmap = new ebg.scrollmapWithZoom(); // Scrollable area
this.scrollmap.zoom = 0.8;
this.scrollmap.createCompletely($('map_container'));
// if needed
//scrollable elements above surface that you can click
dojo.place(dojo.eval("jstpl_map_onsurface"), this.scrollmap.onsurface_div);
//elements fix on the scrollmap
// if you wnat that they also zoom, add class="scrollmap_zoomed" style="transform-origin: 0px 0px;">
dojo.place(dojo.eval("jstpl_map_clipped"), this.scrollmap.clipped_div);
//scrollable elements below surface you can not click
dojo.place(dojo.eval("jstpl_map_scrollable"), this.scrollmap.scrollable_div);
}
alternative
setup: function (gamedatas) {
...
// if needed
const scrollmapCreateExtra = (scrollmap) => {
//scrollable elements above surface that you can click
dojo.place(dojo.eval("jstpl_map_onsurface"), scrollmap.onsurface_div);
//elements fix on the scrollmap
// if you wnat that they also zoom, add class="scrollmap_zoomed" style="transform-origin: 0px 0px;">
dojo.place(dojo.eval("jstpl_map_clipped"), scrollmap.clipped_div);
//scrollable elements below surface you can not click
dojo.place(dojo.eval("jstpl_map_scrollable"), scrollmap.scrollable_div);
};
this.scrollmap = new ebg.scrollmapWithZoom(); // Scrollable area
this.scrollmap.zoom = 0.8;
this.scrollmap.createCompletely($('map_container'), this, scrollmapCreateExtra);
}