mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
109 lines
3.3 KiB
HTML
109 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2015-2021 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-ext: Collection inputs!</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="A list input to keep track of Collection interactively" />
|
|
<meta name="keywords" content="openlayers, ol, input, collection, list, order, ordering" />
|
|
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<style>
|
|
body {
|
|
user-select: none;
|
|
}
|
|
#collection {
|
|
width: 20em;
|
|
margin: 1em;
|
|
border: 1px solid #369;
|
|
float: left;
|
|
}
|
|
#position {
|
|
font-size: 1.5em;
|
|
color: #369;
|
|
font-weight: bold;
|
|
}
|
|
ul li {
|
|
min-height: 2.4em;
|
|
line-height: 1.2em;
|
|
border-bottom: 1px solid rgba(51, 102, 153, 0.3);
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: Collection input!</h1>
|
|
</a>
|
|
<div class="info">
|
|
<i>ol/ext/input/Collection</i> lets you create list elements that synchronize with a <i>ol/Collection</i>.
|
|
List can be ordered interactively and keep associated Collection up to date.
|
|
</div>
|
|
|
|
<div id="collection"></div>
|
|
|
|
<div class="info" style="display: inline-block;">
|
|
<p>
|
|
Position: <span id="position"></span>
|
|
</p><p>
|
|
Item: <span id="result"></span>
|
|
</p>
|
|
<hr/>
|
|
<p>
|
|
Add new line: <input type="text" onchange="collect.push({ title: this.value })" />
|
|
</p>
|
|
<p>
|
|
Remove at: <input type="number" onchange="collect.removeAt(this.value)" />
|
|
</p>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var collect = new ol.Collection();
|
|
for (var i=0; i<20; i++) collect.push({ title: 'line '+(i+1)+'<br/>---' });
|
|
var ul = new ol.ext.input.Collection({
|
|
collection: collect,
|
|
getTitle: function(elt) {
|
|
return elt.title;
|
|
},
|
|
target: document.getElementById('collection')
|
|
})
|
|
|
|
ul.on(['item:select', 'item:order'], function (e) {
|
|
$('#position').html(e.position)
|
|
if (e.item) $('#result').html(e.item.title);
|
|
else $('#result').html('')
|
|
})
|
|
ul.on('item:dblclick', function (e) {
|
|
alert (e.item.title.replace('<br/>', ' '));
|
|
})
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |