<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: olHelpers/layerSwipe.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: olHelpers/layerSwipe.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* Created by gavorhes on 6/1/2016.
*/
import provide from '../util/provide';
import $ from '../jquery/jquery';
let nm = provide('collections.layerSwipe');
class LayerSwipe {
/**
*
* @param {ol.Map} map - the map
* @param {string} [sliderContent=''] - additional html to be added inside the slider div
*/
constructor(map, sliderContent) {
sliderContent = sliderContent || '';
/**
*
* @type {Array<LayerBase>}
*/
this.leftLayers = [];
/**
*
* @type {Array<LayerBase>}
*/
this.rightLayers = [];
this._percentRight = 50;
this.offset = null;
this._map = map;
this.$mapElement = $(map.getTargetElement());
this.$mapElement.append(`<div class="layer-swiper">${sliderContent}</div>`);
this.$swiper = this.$mapElement.find('.layer-swiper');
this.percentRight = this.percentRight;
this.dragging = false;
this.$mapElement.mouseleave(() => {
this.dragging = false;
});
this.$swiper.bind('mousewheel DOMMouseScroll', function(evt){
evt.preventDefault();
});
this.$swiper.mousedown((evt) => {
this.dragging = true;
this.offset = evt.offsetX;
});
$(window).mouseup(() => {
this.dragging = false;
});
this.$mapElement.mousemove((evt) => {
if (this.dragging) {
let mapLeft = this.$mapElement.position().left;
let mapWidth = this.$mapElement.width();
this.percentRight = 100 * (evt.pageX - this.offset - mapLeft) / mapWidth;
}
});
}
/**
*
* @param {LayerBase|*} lyr - layer to be added to left side
*/
addLeftLayer(lyr) {
if (this.leftLayers.indexOf(lyr) != -1){
return;
}
lyr.olLayer.on('precompose', (event) => {
let ctx = event.context;
let width = ctx.canvas.width * (this.percentRight / 100);
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, width, ctx.canvas.height);
ctx.clip();
});
lyr.olLayer.on('postcompose', function (event) {
let ctx = event.context;
ctx.restore();
});
this.leftLayers.push(lyr);
}
/**
*
* @param {LayerBase|*} lyr - layer to be added to right side
*/
addRightLayer(lyr) {
if (this.rightLayers.indexOf(lyr) != -1){
return;
}
lyr.olLayer.on('precompose', (event) => {
let ctx = event.context;
let width = ctx.canvas.width * (this.percentRight / 100);
ctx.save();
ctx.beginPath();
ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
ctx.clip();
});
lyr.olLayer.on('postcompose', function (event) {
let ctx = event.context;
ctx.restore();
});
this.rightLayers.push(lyr);
}
get percentRight() {
return this._percentRight;
}
set percentRight(pcnt) {
let maxed = this.$swiper.position().left + this.$swiper.width() > this.$mapElement.width();
if (pcnt < 0) {
return;
} else if (maxed && pcnt > this.percentRight) {
return;
}
this._percentRight = pcnt;
this.$swiper.css('left', `${this._percentRight.toFixed(2)}%`);
this._map.render();
}
}
nm.LayerSwipe = LayerSwipe;
export default LayerSwipe;
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="-_FeatureLayerProperties.html">_FeatureLayerProperties</a></li><li><a href="-_Slider.html">_Slider</a></li><li><a href="CommonSymbol.html">CommonSymbol</a></li><li><a href="DayRange.html">DayRange</a></li><li><a href="ItsLayerCollection.html">ItsLayerCollection</a></li><li><a href="LayerBase.html">LayerBase</a></li><li><a href="LayerBaseVector.html">LayerBaseVector</a></li><li><a href="LayerBaseVectorEsri.html">LayerBaseVectorEsri</a></li><li><a href="LayerBaseVectorGeoJson.html">LayerBaseVectorGeoJson</a></li><li><a href="LayerBaseXyzTile.html">LayerBaseXyzTile</a></li><li><a href="LayerEsriMapServer.html">LayerEsriMapServer</a></li><li><a href="LayerEsriTile.html">LayerEsriTile</a></li><li><a href="LayerGroup.html">LayerGroup</a></li><li><a href="LayerItsInventory.html">LayerItsInventory</a></li><li><a href="LayerLegend.html">LayerLegend</a></li><li><a href="LayerRealEarthTile.html">LayerRealEarthTile</a></li><li><a href="LayerSwipe.html">LayerSwipe</a></li><li><a href="LayerVectorRealEarth.html">LayerVectorRealEarth</a></li><li><a href="MapInteractionBase.html">MapInteractionBase</a></li><li><a href="MapMoveCls.html">MapMoveCls</a></li><li><a href="MapPopupCls.html">MapPopupCls</a></li><li><a href="RealEarthAnimate.html">RealEarthAnimate</a></li><li><a href="RealEarthAnimateTile.html">RealEarthAnimateTile</a></li><li><a href="RealEarthAnimateVector.html">RealEarthAnimateVector</a></li><li><a href="SingleSymbol.html">SingleSymbol</a></li><li><a href="Sliders.html">Sliders</a></li><li><a href="SortedFeatures.html">SortedFeatures</a></li><li><a href="UniqueValueSymbol.html">UniqueValueSymbol</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bundleEs2015Multiple">bundleEs2015Multiple</a></li><li><a href="global.html#dateToYyyyMmDdHh000">dateToYyyyMmDdHh000</a></li><li><a href="global.html#dateToYyyyMmDdHhMmSs">dateToYyyyMmDdHhMmSs</a></li><li><a href="global.html#definedAndNotNull">definedAndNotNull</a></li><li><a href="global.html#defineLegend">defineLegend</a></li><li><a href="global.html#defineStyle">defineStyle</a></li><li><a href="global.html#gulp">gulp</a></li><li><a href="global.html#hexAlphaToRgbOrRgba">hexAlphaToRgbOrRgba</a></li><li><a href="global.html#htmlEscape">htmlEscape</a></li><li><a href="global.html#keyValPairs">keyValPairs</a></li><li><a href="global.html#makeBlueGreenRedGradient">makeBlueGreenRedGradient</a></li><li><a href="global.html#makeBlueGreenRedGradientZScore">makeBlueGreenRedGradientZScore</a></li><li><a href="global.html#makeFeatureServiceLegendAndSymbol">makeFeatureServiceLegendAndSymbol</a></li><li><a href="global.html#makeGuid">makeGuid</a></li><li><a href="global.html#makeMapServiceLegend">makeMapServiceLegend</a></li><li><a href="global.html#mapServiceLegendItem">mapServiceLegendItem</a></li><li><a href="global.html#offsetMinutes">offsetMinutes</a></li><li><a href="global.html#processLessFile">processLessFile</a></li><li><a href="global.html#propertiesZoomStyle">propertiesZoomStyle</a></li><li><a href="global.html#provide">provide</a></li><li><a href="global.html#quickMap">quickMap</a></li><li><a href="global.html#quickMapBase">quickMapBase</a></li><li><a href="global.html#quickMapMulti">quickMapMulti</a></li><li><a href="global.html#resolutionToZoom">resolutionToZoom</a></li><li><a href="global.html#rgb2hex">rgb2hex</a></li><li><a href="global.html#rgbToRgba">rgbToRgba</a></li><li><a href="global.html#triggerCallback">triggerCallback</a></li><li><a href="global.html#undefinedOrNull">undefinedOrNull</a></li><li><a href="global.html#zoomToResolution">zoomToResolution</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Tue Jun 07 2016 12:31:52 GMT-0500 (Central Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>