ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #12216 from MoonE/zoomslider-layout

Browse Source 
Fix ZoomSlider layout
This commit is contained in:
MoonE
2021-04-16 00:34:58 +02:00
committed by GitHub
parent ed5329e0cb fdbfb4015f
commit 1554bc4cc2
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/zoomslider.css
+10 -4
View File
@@ -3,11 +3,17 @@
* zoom-out buttons. * zoom-out buttons.
*/ */
#map2 .ol-zoom .ol-zoom-out { #map2 .ol-zoom .ol-zoom-out {
margin-top: 204px; margin-top: 200px;
} }
#map2 .ol-zoomslider { #map2 .ol-zoomslider {
background-color: transparent; background-color: transparent;
top: 2.3em; /*
Zoom control top: 0.5em
Zoom control padding: 2px
Zoom in button margin top: 1px
Zoom in button height: font size 1.14em * 1.375 height
*/
top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
} }
#map2 .ol-touch .ol-zoom .ol-zoom-out { #map2 .ol-touch .ol-zoom .ol-zoom-out {
@@ -40,7 +46,7 @@
height: 15px; height: 15px;
padding: 0; padding: 0;
box-shadow: 0 0 5px rgb(255,69,0); box-shadow: 0 0 5px rgb(255,69,0);
border-radius: 20px; border-radius: 7.5px;
} }
#map3 .ol-zoomslider:hover { #map3 .ol-zoomslider:hover {
@@ -53,7 +59,7 @@
margin: 0; margin: 0;
filter: none; filter: none;
background-color: rgba(255,69,0,0.6); background-color: rgba(255,69,0,0.6);
border-radius: 20px; border-radius: 7.5px;
} }
#map3 a.ol-zoomslider-handle:hover { #map3 a.ol-zoomslider-handle:hover {
background-color: rgba(255,69,0,0.7); background-color: rgba(255,69,0,0.7);
src/ol/control/ZoomSlider.js
+14 -7
View File
@@ -183,22 +183,29 @@ class ZoomSlider extends Control {
*/ */
initSlider_() { initSlider_() {
const container = this.element; const container = this.element;
const containerWidth = container.offsetWidth; let containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight; let containerHeight = container.offsetHeight;
if (containerWidth === 0 && containerHeight === 0) { if (containerWidth === 0 && containerHeight === 0) {
return (this.sliderInitialized_ = false); return (this.sliderInitialized_ = false);
} }
const containerStyle = getComputedStyle(container);
containerWidth -=
parseFloat(containerStyle['paddingRight']) +
parseFloat(containerStyle['paddingLeft']);
containerHeight -=
parseFloat(containerStyle['paddingTop']) +
parseFloat(containerStyle['paddingBottom']);
const thumb = /** @type {HTMLElement} */ (container.firstElementChild); const thumb = /** @type {HTMLElement} */ (container.firstElementChild);
const computedStyle = getComputedStyle(thumb); const thumbStyle = getComputedStyle(thumb);
const thumbWidth = const thumbWidth =
thumb.offsetWidth + thumb.offsetWidth +
parseFloat(computedStyle['marginRight']) + parseFloat(thumbStyle['marginRight']) +
parseFloat(computedStyle['marginLeft']); parseFloat(thumbStyle['marginLeft']);
const thumbHeight = const thumbHeight =
thumb.offsetHeight + thumb.offsetHeight +
parseFloat(computedStyle['marginTop']) + parseFloat(thumbStyle['marginTop']) +
parseFloat(computedStyle['marginBottom']); parseFloat(thumbStyle['marginBottom']);
this.thumbSize_ = [thumbWidth, thumbHeight]; this.thumbSize_ = [thumbWidth, thumbHeight];
if (containerWidth > containerHeight) { if (containerWidth > containerHeight) {