mirror of
https://github.com/sebastianpauli/netgis-client.git
synced 2025-06-07 02:24:13 +02:00
252 lines
5.9 KiB
HTML
252 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSDoc: Source: Popup.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: Popup.js</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
<article>
|
|
<pre class="prettyprint source linenums"><code>"use strict";
|
|
|
|
var netgis = netgis || {};
|
|
|
|
netgis.Popup = function( options )
|
|
{
|
|
if ( ! options )
|
|
{
|
|
options =
|
|
{
|
|
direction: "down"
|
|
};
|
|
}
|
|
|
|
this.options = options;
|
|
|
|
this.initElements();
|
|
};
|
|
|
|
netgis.Popup.prototype.initElements = function()
|
|
{
|
|
// TODO: remove this on destroy?
|
|
document.body.addEventListener( "pointerdown", this.onDocumentPointerDown.bind( this ) );
|
|
|
|
this.container = document.createElement( "div" );
|
|
this.container.className = "netgis-popup";
|
|
this.container.addEventListener( "pointerdown", this.onPointerDown.bind( this ) );
|
|
|
|
this.content = document.createElement( "div" );
|
|
this.content.className = "netgis-content netgis-color-e netgis-round";
|
|
this.container.appendChild( this.content );
|
|
|
|
switch ( this.options[ "direction" ] )
|
|
{
|
|
default:
|
|
case "down":
|
|
{
|
|
this.container.classList.add( "netgis-dir-down" );
|
|
break;
|
|
}
|
|
|
|
case "right":
|
|
{
|
|
this.container.classList.add( "netgis-dir-right" );
|
|
break;
|
|
}
|
|
}
|
|
|
|
/*
|
|
this.arrow = document.createElement( "div" );
|
|
this.arrow.className = "netgis-arrow-down";
|
|
this.container.appendChild( this.arrow );
|
|
*/
|
|
|
|
this.arrow = document.createElement( "div" );
|
|
this.arrow.className = "netgis-arrow";
|
|
this.container.appendChild( this.arrow );
|
|
|
|
// Closer
|
|
this.closer = document.createElement( "button" );
|
|
this.closer.setAttribute( "type", "button" );
|
|
this.closer.className = "netgis-closer netgis-color-e netgis-text-a";
|
|
this.closer.innerHTML = "<span></span><i class='fas fa-times'></i>";
|
|
this.closer.onclick = this.onCloserClick.bind( this );
|
|
this.content.appendChild( this.closer );
|
|
|
|
// Loader
|
|
this.loader = document.createElement( "div" );
|
|
this.loader.className = "netgis-loader netgis-color-e netgis-text-a";
|
|
this.loader.innerHTML = "<i class='netgis-icon netgis-anim-spin fas fa-sync-alt'></i>";
|
|
|
|
// Wrapper
|
|
this.wrapper = document.createElement( "div" );
|
|
this.wrapper.className = "netgis-wrapper";
|
|
this.content.appendChild( this.wrapper );
|
|
};
|
|
|
|
netgis.Popup.prototype.attachTo = function( parent )
|
|
{
|
|
parent.appendChild( this.container );
|
|
};
|
|
|
|
netgis.Popup.prototype.show = function()
|
|
{
|
|
this.container.classList.add( "netgis-show" );
|
|
|
|
// Update Width On Small Screens
|
|
if ( netgis.util.isMobile() )
|
|
{
|
|
this.container.style.width = ( document.body.getBoundingClientRect().width - 10 ) + "px";
|
|
}
|
|
};
|
|
|
|
netgis.Popup.prototype.hide = function()
|
|
{
|
|
this.container.classList.remove( "netgis-show" );
|
|
};
|
|
|
|
netgis.Popup.prototype.isVisible = function()
|
|
{
|
|
return this.container.classList.contains( "netgis-show" );
|
|
};
|
|
|
|
netgis.Popup.prototype.showLoader = function()
|
|
{
|
|
this.content.appendChild( this.loader );
|
|
};
|
|
|
|
netgis.Popup.prototype.hideLoader = function()
|
|
{
|
|
if ( this.loader.parentNode !== this.content ) return;
|
|
|
|
this.content.removeChild( this.loader );
|
|
};
|
|
|
|
/**
|
|
* Set the arrow tip pixel coordinates inside the container.
|
|
* Make sure to call show before this to allow bounds checking.
|
|
* @param {Number} x
|
|
* @param {Number} y
|
|
*/
|
|
netgis.Popup.prototype.setPosition = function( x, y )
|
|
{
|
|
// Point Bounds
|
|
var parent = this.container.parentNode;
|
|
var bounds = parent.getBoundingClientRect();
|
|
var arrow = this.arrow.getBoundingClientRect();
|
|
|
|
if ( x > bounds.width - arrow.width ) x = bounds.width - arrow.width;
|
|
if ( x < arrow.width ) x = arrow.width;
|
|
|
|
// Point Position
|
|
switch ( this.options[ "direction" ] )
|
|
{
|
|
default:
|
|
case "down":
|
|
{
|
|
this.container.style.left = x + "px";
|
|
this.container.style.top = y + "px";
|
|
break;
|
|
}
|
|
|
|
case "right":
|
|
{
|
|
this.container.style.right = ( bounds.width - x ) + "px";
|
|
this.container.style.top = y + "px";
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Keep Popup Content Inside Bounds
|
|
this.content.style.left = "";
|
|
|
|
var rect = this.content.getBoundingClientRect();
|
|
|
|
if ( rect.x < 0 )
|
|
{
|
|
this.content.style.left = -rect.x + "px";
|
|
}
|
|
else if ( rect.x + rect.width > bounds.width )
|
|
{
|
|
this.content.style.left = -( rect.x + rect.width - bounds.width ) + "px";
|
|
}
|
|
};
|
|
|
|
netgis.Popup.prototype.setHeader = function( title )
|
|
{
|
|
var span = this.closer.getElementsByTagName( "span" )[ 0 ];
|
|
span.innerHTML = title;
|
|
};
|
|
|
|
netgis.Popup.prototype.setContent = function( html )
|
|
{
|
|
this.wrapper.innerHTML = html;
|
|
};
|
|
|
|
netgis.Popup.prototype.clearContent = function()
|
|
{
|
|
this.wrapper.innerHTML = "";
|
|
};
|
|
|
|
netgis.Popup.prototype.addContent = function( html )
|
|
{
|
|
this.wrapper.innerHTML += html;
|
|
};
|
|
|
|
netgis.Popup.prototype.onDocumentPointerDown = function( e )
|
|
{
|
|
////this.hide();
|
|
};
|
|
|
|
netgis.Popup.prototype.onPointerDown = function( e )
|
|
{
|
|
e.stopPropagation();
|
|
};
|
|
|
|
netgis.Popup.prototype.onCloserClick = function( e )
|
|
{
|
|
this.hide();
|
|
//netgis.util.invoke( this.container, netgis.Events.POPUP_CLOSE, null );
|
|
};</code></pre>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav>
|
|
<h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="netgis.html">netgis</a></li></ul><h3>Classes</h3><ul><li><a href="netgis.Client.html">Client</a></li><li><a href="netgis.Import.html">Import</a></li></ul><h3>Global</h3><ul><li><a href="global.html#OSM">OSM</a></li></ul>
|
|
</nav>
|
|
|
|
<br class="clear">
|
|
|
|
<footer>
|
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Fri Apr 25 2025 14:07:12 GMT+0200 (Mitteleuropäische Sommerzeit)
|
|
</footer>
|
|
|
|
<script> prettyPrint(); </script>
|
|
<script src="scripts/linenumber.js"> </script>
|
|
</body>
|
|
</html>
|