281 lines
9.3 KiB
JavaScript
281 lines
9.3 KiB
JavaScript
(function( $ ) {
|
|
'use strict';
|
|
|
|
var popup;
|
|
var map;
|
|
|
|
function initializeMap() {
|
|
|
|
map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: {
|
|
'version': 8,
|
|
"glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
|
|
'sources': {
|
|
'raster-tiles': {
|
|
'type': 'raster',
|
|
'tiles': [
|
|
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
],
|
|
'tileSize': 256,
|
|
'attribution': '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}
|
|
},
|
|
'layers': [
|
|
{
|
|
'id': 'simple-tiles',
|
|
'type': 'raster',
|
|
'source': 'raster-tiles',
|
|
'minzoom': 0,
|
|
'maxzoom': 22
|
|
}
|
|
]
|
|
},
|
|
center: [0, 0],
|
|
zoom: 2
|
|
});
|
|
|
|
setPopup()
|
|
setEventListeners()
|
|
|
|
map.on('load', () => {
|
|
map.resize();
|
|
})
|
|
}
|
|
|
|
function setPopup() {
|
|
if(popup) {
|
|
popup.remove();
|
|
}
|
|
|
|
var css = getCSS();
|
|
var html = getHTML();
|
|
var layout = getLayout();
|
|
|
|
var style = `
|
|
.mapboxgl-popup .mapboxgl-popup-content, .maplibregl-popup .maplibregl-popup-content {
|
|
padding: 0px;
|
|
background: none;
|
|
border: none;
|
|
border-radius: none;
|
|
box-shadow: none;
|
|
}
|
|
#mapster-popup.map-popup-background {
|
|
background : ${css.background};
|
|
text-align : ${css.align};
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
|
|
}
|
|
#mapster-popup .map-popup-header {
|
|
background : ${css.header};
|
|
padding: 10px;
|
|
}
|
|
#mapster-popup .map-popup-header h2 {
|
|
all : revert;
|
|
color : ${css.header_text};
|
|
font-weight: bold;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#mapster-popup .map-popup-image {
|
|
background-image : url(https://via.placeholder.com/150x50);
|
|
background-position : center center;
|
|
background-size: cover;
|
|
height : ${css.image_height}px;
|
|
width: 100%;
|
|
}
|
|
#mapster-popup .map-popup-body {
|
|
margin-top: -1px;
|
|
background : ${css.body};
|
|
padding: 10px;
|
|
color : ${css.body_text};
|
|
}
|
|
#mapster-popup .map-popup-body p {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
#mapster-popup .map-popup-footer {
|
|
margin-top: -1px;
|
|
background : ${css.footer};
|
|
padding: 10px;
|
|
}
|
|
#mapster-popup .map-popup-footer .map-popup-footer-button {
|
|
all : revert;
|
|
background : ${css.button};
|
|
border-color: ${css.button};
|
|
color : ${css.button_text};
|
|
padding: 5px;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
}
|
|
#mapster-popup .map-popup-footer .map-popup-footer-button:hover {
|
|
cursor: pointer;
|
|
filter: brightness(1.15);
|
|
}
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
|
|
border-bottom-color : ${css.pointer};
|
|
display : ${layout.enable_pointer ? 'block' : 'none'};
|
|
}
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
|
|
border-left-color : ${css.pointer};
|
|
display : ${layout.enable_pointer ? 'block' : 'none'};
|
|
}
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
|
|
border-right-color : ${css.pointer};
|
|
display : ${layout.enable_pointer ? 'block' : 'none'};
|
|
}
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
|
|
.mapboxgl-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip, .maplibregl-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
|
|
border-top-color : ${css.pointer};
|
|
display : ${layout.enable_pointer ? 'block' : 'none'};
|
|
}
|
|
`;
|
|
|
|
setCustomCSS(style);
|
|
|
|
var defaultValues = getDefaultValues();
|
|
var content = getContent();
|
|
|
|
popup = new maplibregl.Popup({
|
|
closeButton : defaultValues.close_button,
|
|
maxWidth : defaultValues.max_width,
|
|
closeOnClick : defaultValues.close_on_click,
|
|
closeOnMove : defaultValues.close_on_map_move,
|
|
focusAfterOpen : false
|
|
})
|
|
.setLngLat(map.getCenter())
|
|
.setHTML(`
|
|
<style>${style}</style>
|
|
${layout.use_custom_css ? `<style>${css.css_editor}</style>` : ''}
|
|
${layout.use_custom_html ?
|
|
replaceHTMLValues(html.html_editor, content) :
|
|
`<div id="mapster-popup" class="map-popup-background ${layout.popup_class}">
|
|
${layout.enable_header ?
|
|
`<div class="map-popup-header">
|
|
<h2>${content.header_text_preview}</h2>
|
|
</div>`
|
|
: ''}
|
|
${layout.enable_image ?
|
|
`<div class="map-popup-image"></div>`
|
|
: ''}
|
|
${layout.enable_body ?
|
|
`<div class="map-popup-body">
|
|
<p>${content.content_preview}
|
|
</div>`
|
|
: ''}
|
|
${layout.enable_footer ?
|
|
`<div class="map-popup-footer">
|
|
<button class="map-popup-footer-button">${content.button_text_preview}</button>
|
|
</div>`
|
|
: ''}
|
|
</div>`
|
|
}
|
|
`)
|
|
.addTo(map);
|
|
}
|
|
|
|
function replaceHTMLValues(html, content) {
|
|
let htmlToReturn;
|
|
|
|
return htmlToReturn;
|
|
}
|
|
|
|
function getDefaultValues() {
|
|
return {
|
|
close_button : $('.acf-field[data-name="close_button"] :input').is(':checked'),
|
|
close_on_click : $('.acf-field[data-name="close_on_click"] :input').is(':checked'),
|
|
close_on_map_move : $('.acf-field[data-name="close_on_map_move"] :input').is(':checked'),
|
|
max_width : $('.acf-field[data-name="max_width"] :input').val() + 'px'
|
|
}
|
|
}
|
|
|
|
function getLayout() {
|
|
return {
|
|
enable_header : $('.acf-field[data-name="enable_header"] :input').is(':checked'),
|
|
enable_image : $('.acf-field[data-name="enable_image"] :input').is(':checked'),
|
|
enable_body : $('.acf-field[data-name="enable_body"] :input').is(':checked'),
|
|
enable_footer : $('.acf-field[data-name="enable_footer"] :input').is(':checked'),
|
|
enable_pointer : $('.acf-field[data-name="enable_pointer"] :input').is(':checked'),
|
|
popup_class : $('.acf-field[data-name="popup_class"] :input').val(),
|
|
use_custom_css : $('.acf-field[data-name="use_custom_css"] :input').is(':checked'),
|
|
use_custom_html : $('.acf-field[data-name="use_custom_html"] :input').is(':checked'),
|
|
}
|
|
}
|
|
|
|
function getHTML() {
|
|
// {header} {image_url} {content} {button_link} {button_text}
|
|
return {
|
|
html_editor : $('.acf-field[data-name="html_editor"] :input').val()
|
|
}
|
|
}
|
|
|
|
function getCSS() {
|
|
return {
|
|
background : $('.acf-field[data-name="background"] :input').val(),
|
|
header : $('.acf-field[data-name="header"] :input').val(),
|
|
image_height : $('.acf-field[data-name="image_height"] :input').val(),
|
|
body : $('.acf-field[data-name="body"] :input').val(),
|
|
footer : $('.acf-field[data-name="footer"] :input').val(),
|
|
button : $('.acf-field[data-name="button"] :input').val(),
|
|
pointer : $('.acf-field[data-name="pointer"] :input').val(),
|
|
header_text : $('.acf-field[data-name="header_text"] :input').val(),
|
|
body_text : $('.acf-field[data-name="body_text"] :input').val(),
|
|
button_text : $('.acf-field[data-name="button_text"] :input').val(),
|
|
align : $('.acf-field[data-name="align"] :input').val(),
|
|
css_editor : $('.acf-field[data-name="css_editor"] :input').val(),
|
|
}
|
|
}
|
|
|
|
function getContent() {
|
|
return {
|
|
header_text_preview : $('.acf-field[data-name="header_text_preview"] :input').val(),
|
|
content_preview : $('.acf-field[data-name="content_preview"] :input').val(),
|
|
button_text_preview : $('.acf-field[data-name="button_text_preview"] :input').val()
|
|
}
|
|
}
|
|
|
|
function setCustomCSS(style) {
|
|
if($('.acf-field[data-name="css_editor"] :input').val() === '') {
|
|
$('.acf-field[data-name="css_editor"] :input').val(style);
|
|
}
|
|
}
|
|
|
|
function setCustomHTML(html) {
|
|
if($('.acf-field[data-name="css_editor"] :input').val() === '') {
|
|
$('.acf-field[data-name="css_editor"] :input').val(style);
|
|
}
|
|
}
|
|
|
|
function setEventListeners() {
|
|
var inputs = { ...getDefaultValues(), ...getCSS(), ...getLayout(), ...getContent(), ...getHTML() };
|
|
for(var name in inputs) {
|
|
$(document).on('change', `.acf-field[data-name="${name}"] :input`, function() {
|
|
setPopup()
|
|
});
|
|
}
|
|
$(document).on('click', '.acf-field-message .button', function() {
|
|
setPopup();
|
|
})
|
|
}
|
|
|
|
const acf = window.acf;
|
|
|
|
if( typeof acf.add_action !== 'undefined' ) {
|
|
|
|
acf.add_action('ready_field/name=background', initializeMap);
|
|
acf.add_action('append_field/name=background', initializeMap);
|
|
acf.add_action('show_field/name=background', initializeMap);
|
|
|
|
} else {
|
|
|
|
$(document).on('ready_field/name=background', function(e, postbox){
|
|
initializeMap();
|
|
});
|
|
|
|
}
|
|
|
|
})( jQuery );
|