use dune-site
This commit is contained in:
parent
2b8f3e8e7c
commit
037c094ed5
@ -1,6 +1,7 @@
|
||||
(lang dune 2.9)
|
||||
|
||||
(implicit_transitive_deps false)
|
||||
(using dune_site 0.1)
|
||||
;uncomment when fixed: https://github.com/ocaml/dune/issues/9661
|
||||
;(implicit_transitive_deps false)
|
||||
|
||||
(name leaflet)
|
||||
|
||||
@ -31,5 +32,7 @@
|
||||
(depends
|
||||
brr
|
||||
js_of_ocaml
|
||||
dune-site
|
||||
(ocaml
|
||||
(>= 4.08))))
|
||||
(>= 4.08)))
|
||||
(sites (share css) (share images)))
|
||||
|
||||
14
example/css_path.ml
Normal file
14
example/css_path.ml
Normal file
@ -0,0 +1,14 @@
|
||||
(* get leaflet.css path from dune-site *)
|
||||
|
||||
let dune_site = List.filter Sys.file_exists Mysites.Sites.css
|
||||
|
||||
let lookup_file filename =
|
||||
List.find_map
|
||||
(fun dir ->
|
||||
let filename' = Filename.concat dir filename in
|
||||
if Sys.file_exists filename' then Some filename' else None )
|
||||
dune_site
|
||||
|
||||
let leaflet_css = lookup_file "leaflet.css" |> Option.get
|
||||
|
||||
let () = Format.printf "%s@." leaflet_css
|
||||
13
example/dune
13
example/dune
@ -1,5 +1,14 @@
|
||||
(executable
|
||||
(name main)
|
||||
(modules main)
|
||||
(name css_path)
|
||||
(modules css_path mysites)
|
||||
(libraries dune-site))
|
||||
|
||||
(generate_sites_module
|
||||
(module mysites)
|
||||
(sites leaflet))
|
||||
|
||||
(executable
|
||||
(name script)
|
||||
(modules script)
|
||||
(libraries brr leaflet)
|
||||
(modes js))
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- dune-site should have installed leaflet.css
|
||||
you can use css_path.ml to get it's path -->
|
||||
<link href="leaflet.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="main.bc.js" defer="defer"></script>
|
||||
<script type="text/javascript" src="script.bc.js" defer="defer"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="map" style="height: 100%"></div>
|
||||
<!-- don't forget to set a size! -->
|
||||
<div id="map" style="height: 100%"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
(* this file will be compiled to js
|
||||
you can then open map.html to see a simple page with a map loaded
|
||||
by this script *)
|
||||
|
||||
(* create map *)
|
||||
let map = Leaflet.Map.create_on "map"
|
||||
|
||||
@ -18,6 +18,7 @@ depends: [
|
||||
"dune" {>= "2.9"}
|
||||
"brr"
|
||||
"js_of_ocaml"
|
||||
"dune-site"
|
||||
"ocaml" {>= "4.08"}
|
||||
"odoc" {with-doc}
|
||||
]
|
||||
|
||||
20
src/dune
20
src/dune
@ -4,4 +4,22 @@
|
||||
(private_modules global)
|
||||
(libraries brr)
|
||||
(js_of_ocaml
|
||||
(javascript_files leaflet.js)))
|
||||
(javascript_files vendor/leaflet.js)))
|
||||
|
||||
(install
|
||||
(section
|
||||
(site
|
||||
(leaflet css)))
|
||||
(files
|
||||
(vendor/leaflet.css as leaflet.css)))
|
||||
|
||||
(install
|
||||
(section
|
||||
(site
|
||||
(leaflet images)))
|
||||
(files
|
||||
(vendor/images/layers-2x.png as images/layers-2x.png)
|
||||
(vendor/images/layers.png as images/layers.png)
|
||||
(vendor/images/marker-icon-2x.png as images/marker-icon-2x.png)
|
||||
(vendor/images/marker-icon.png as images/marker-icon.png)
|
||||
(vendor/images/marker-shadow.png as images/marker-shadow.png)))
|
||||
|
||||
BIN
src/vendor/images/layers-2x.png
vendored
Normal file
BIN
src/vendor/images/layers-2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/vendor/images/layers.png
vendored
Normal file
BIN
src/vendor/images/layers.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
src/vendor/images/marker-icon-2x.png
vendored
Normal file
BIN
src/vendor/images/marker-icon-2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/vendor/images/marker-icon.png
vendored
Normal file
BIN
src/vendor/images/marker-icon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/vendor/images/marker-shadow.png
vendored
Normal file
BIN
src/vendor/images/marker-shadow.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
111
example/leaflet.css → src/vendor/leaflet.css
vendored
111
example/leaflet.css → src/vendor/leaflet.css
vendored
@ -45,7 +45,10 @@
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-overlay-pane svg {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
@ -53,8 +56,15 @@
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.leaflet-container img.leaflet-tile {
|
||||
/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
|
||||
mix-blend-mode: plus-lighter;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
@ -166,9 +176,6 @@
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
@ -183,9 +190,10 @@
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
svg.leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
@ -251,14 +259,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
@ -267,7 +272,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
@ -277,8 +285,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
.leaflet-bar a {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
@ -295,7 +302,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
.leaflet-bar a:hover,
|
||||
.leaflet-bar a:focus {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
@ -348,12 +356,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(/assets/img/layers.png);
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(/assets/img/layers-2x.png);
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
@ -385,6 +393,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
@ -393,8 +403,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(/assets/img/marker-icon.png);
|
||||
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
@ -402,23 +412,27 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
.leaflet-control-attribution a:hover,
|
||||
.leaflet-control-attribution a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
.leaflet-attribution-flag {
|
||||
display: inline !important;
|
||||
vertical-align: baseline !important;
|
||||
width: 1em;
|
||||
height: 0.6669em;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
@ -431,14 +445,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 1px 1px #fff;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
@ -474,17 +485,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
margin: 13px 24px 13px 20px;
|
||||
line-height: 1.3;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
min-height: 1px;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
margin: 17px 0;
|
||||
margin: 1.3em 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-top: -1px;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
@ -495,6 +511,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
pointer-events: auto;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
@ -511,24 +528,21 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font: 16px/24px Tahoma, Verdana, sans-serif;
|
||||
color: #757575;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
.leaflet-container a.leaflet-popup-close-button:hover,
|
||||
.leaflet-container a.leaflet-popup-close-button:focus {
|
||||
color: #585858;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
@ -541,9 +555,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
@ -578,7 +589,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
.leaflet-tooltip.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
@ -638,3 +649,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
/* Printing */
|
||||
|
||||
@media print {
|
||||
/* Prevent printers from removing background-images of controls. */
|
||||
.leaflet-control {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
0
src/leaflet.js → src/vendor/leaflet.js
vendored
0
src/leaflet.js → src/vendor/leaflet.js
vendored
Loading…
x
Reference in New Issue
Block a user