mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
258 lines
8.0 KiB
HTML
258 lines
8.0 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: inputs!</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="Animated canvas Overlay for Openlayers" />
|
|
<meta name="keywords" content="openlayers, ol, input, color, checkbox, width, pattern" />
|
|
|
|
<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;
|
|
}
|
|
.ol-input-popup.marker li > * {
|
|
background-color: transparent;
|
|
width: .6em;
|
|
}
|
|
.marker li > *:before {
|
|
content: "\f041";
|
|
font-family: FontAwesome;
|
|
color: #369;
|
|
}
|
|
.ol-ext-dialog .ol-content {
|
|
padding: .5em;
|
|
}
|
|
/* Arrow style */
|
|
.ol-input-popup.arrow i {
|
|
position: relative;
|
|
display: block;
|
|
width: 100px;
|
|
color: #369;
|
|
background-color: currentColor;
|
|
height: 2px;
|
|
}
|
|
.ol-input-popup.arrow > div > i {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 40px;
|
|
}
|
|
.ol-input-popup.arrow i:before,
|
|
.ol-input-popup.arrow i:after {
|
|
content: "";
|
|
position: absolute;
|
|
border: 0 solid transparent;
|
|
border-color: transparent currentColor;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.ol-input-popup.arrow i.arrow1:before {
|
|
border-width: 5px 0 5px 10px;
|
|
right: 0;
|
|
}
|
|
.ol-input-popup.arrow i.arrow-1:before {
|
|
border-width: 5px 10px 5px 0;
|
|
left: 0;
|
|
}
|
|
.ol-input-popup.arrow i.arrow2:before {
|
|
border-width: 5px 0 5px 10px;
|
|
right: 0;
|
|
}
|
|
.ol-input-popup.arrow i.arrow2:after {
|
|
border-width: 5px 10px 5px 0;
|
|
left: 0;
|
|
}
|
|
</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: input!</h1>
|
|
</a>
|
|
|
|
<p>
|
|
Switch: <input class="switch" type="checkbox" />
|
|
</p><p>
|
|
<input class="check" type="checkbox" />
|
|
</p>
|
|
<input class="radio" type="radio" name="radio" value=1 />
|
|
<input class="radio" type="radio" name="radio" value=2 />
|
|
</p><p style="overflow: hidden; padding: 1em 0;">
|
|
Color: <input class="color1" />
|
|
</p><p>
|
|
<button onclick="dialog.show()">Color dialog</button>
|
|
</p><p style="border: 1px solid #999; border-width: 1px 0; padding: .5em 0;">
|
|
Color (inline):
|
|
<span class="color" style="display: inline-block; background-color: red; width: 2.5em; height: 1.5em; vertical-align: middle;"></span>
|
|
<input class="color2" />
|
|
</p><p>
|
|
Slider:
|
|
<span class="opacity" style="display: inline-block; background-color: red; width: 2.5em; height: 1.5em; vertical-align: middle;"></span>
|
|
<input class='slider' type="number" style="width: 3em" value=25 min=0 max=100 />
|
|
</p><p>
|
|
Size:
|
|
<i class="fa fa-map-marker" style="line-height: 60px; width: 60px; text-align: center; vertical-align: middle;"></i>
|
|
<input class="slide2" type="number" style="width: 3em" value=50 min=20 max=80 />
|
|
</p><p>
|
|
Size:
|
|
<i class="fa fa-map-pin" style="line-height: 60px; width: 60px; text-align: center; vertical-align: middle;"></i>
|
|
<input class="size" type="number" style="width: 3em" />
|
|
</p><p>
|
|
Size (styled):
|
|
<input class="size2" type="number" style="width: 3em" />
|
|
</p><p>
|
|
Width:
|
|
<span class="line" style="display: inline-block; background-color: red; width: 2.5em; vertical-align: middle;"></span>
|
|
<input class="width" type="number" style="width: 3em" value=8 />
|
|
</p><p>
|
|
Arrow:
|
|
<input class="arrow" style="width: 3em" value=1 />
|
|
</p><p>
|
|
Popup:
|
|
<input class="popup" style="width: 3em" value=1 />
|
|
</p><p>
|
|
Range:
|
|
<input type="number" class="range" style="width: 3em" value=1 min=0 max=20 />
|
|
</p><p>
|
|
Range2:
|
|
<input type="number" class="range2" style="width: 3em" value=5 min=0 max=20 step=".1" />
|
|
<input type="number" class="range2" style="width: 3em" value=12 min=0 max=20 />
|
|
</p>
|
|
<p style="height:3em;"></p>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
/* A dialog with a color input */
|
|
var fakeMap = new ol.Map();
|
|
var dialog = new ol.control.Dialog({ fullscreen: true });
|
|
fakeMap.addControl(dialog);
|
|
dialog.setContent({
|
|
title: 'Color',
|
|
content: 'Color : '
|
|
});
|
|
var inputColor = new ol.ext.input.Color({ position: 'fixed', parent: dialog.getContentElement() })
|
|
|
|
/* Set inputs */
|
|
var switcher = new ol.ext.input.Switch({ input: $('.switch').get(0), html: 'off', after: 'on' });
|
|
|
|
var checkbox = new ol.ext.input.Checkbox({ input: $('.check').get(0), html: 'Checkbox:', after: 'on' });
|
|
$('.radio').each(function(i) {
|
|
window['radio'+(i+1)] = new ol.ext.input.Radio({ input: this, html: i ? '' : 'Radio:', after: 'radio '+(i+1), checked: !i });
|
|
});
|
|
|
|
var slider = new ol.ext.input.Slider({ input: $('.slider').get(0) });
|
|
slider.on('change:value', function(e) {
|
|
$('.opacity').css('opacity', e.value/100);
|
|
});
|
|
slider.setValue(25);
|
|
|
|
var slide2 = new ol.ext.input.Slider({ input: $('.slide2').get(0), type: 'size' });
|
|
slide2.on('change:value', function(e) {
|
|
$('.fa-map-marker').css('font-size', e.value+'px');
|
|
});
|
|
slide2.setValue(50);
|
|
|
|
var cpicker = new ol.ext.input.Color({
|
|
input: $('.color1').get(0),
|
|
color: 'red',
|
|
position: 'fixed',
|
|
hidden: true,
|
|
opacity: false,
|
|
hastab: true
|
|
});
|
|
cpicker.on('color', function(e) { console.log('Color:', e.color) })
|
|
|
|
var cpicker2 = new ol.ext.input.Color({ input: $('.color2').get(0), position: 'inline' });
|
|
cpicker2.on('color', function(e) {
|
|
$('.color').css('background-color', ol.color.asString(e.color));
|
|
});
|
|
cpicker2.setColor('#f90');
|
|
|
|
var size = new ol.ext.input.Size({ input: $('.size').get(0), fixed: false });
|
|
size.on('change:value', function(e) {
|
|
$('.fa-map-pin').css('font-size', e.value+'px');
|
|
});
|
|
size.setValue(8);
|
|
|
|
var size2 = new ol.ext.input.Size({ input: $('.size2').get(0), className: 'marker' });
|
|
size2.setValue(8);
|
|
|
|
var width = new ol.ext.input.Width({ input: $('.width').get(0), fixed: false });
|
|
width.on('change:value', function(e) {
|
|
$('.line').height(e.value)
|
|
})
|
|
// width.setValue(8);
|
|
|
|
// An arrow list
|
|
var arrow = new ol.ext.input.List({
|
|
input: $('.arrow').get(0),
|
|
className: 'arrow',
|
|
disabled: true,
|
|
hidden: true,
|
|
//align: 'middle',
|
|
options: [{
|
|
value: 0,
|
|
title: 'none',
|
|
html: '<i class="arrow0"></i>'
|
|
},{
|
|
value: 1,
|
|
title: 'direct',
|
|
html: '<i class="arrow1"></i>'
|
|
},{
|
|
value: -1,
|
|
title: 'revers',
|
|
html: '<i class="arrow-1"></i>'
|
|
},{
|
|
value: 2,
|
|
title: 'both',
|
|
html: '<i class="arrow2"></i>'
|
|
}]
|
|
});
|
|
arrow.on('change:value', function(e) {
|
|
console.log(e.value)
|
|
});
|
|
|
|
var popup = new ol.ext.input.PopupBase({
|
|
input: $('.popup').get(0),
|
|
});
|
|
|
|
var range = new ol.ext.input.Range({
|
|
input: $('.range').get(0),
|
|
});
|
|
var range2 = new ol.ext.input.Range({
|
|
input: $('.range2').get(0),
|
|
input2: $('.range2').get(1),
|
|
overflow: true
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |