soundmap/js/soundmap.add.js

127 lines
4.5 KiB
JavaScript
Raw Normal View History

2016-11-29 01:04:30 +01:00
(function($){
var soundmap = window.Soundmap || {}
_.extend(soundmap, {
map: undefined,
layers:[],
marker: undefined,
file_frame: wp.media.frames.file_frame = wp.media({
multiple: false,
library: {
type: 'audio'
}
}),
attachTemplate: "<div class='soundmap-attach-item'><div class='att-icon'><img src='<%= icon %>'/></div>" +
"<div class='att-info'><a href='<%= url %>'><strong><%= name %></strong></a><br/>" +
"<span class='att-length'><%= length %></span><br/>" +
"<a href='#' class='delete-att-item'>Borrar</a></div><div class='clear'></div><input type='hidden' name='soundmap-att-ids[]' value='<%= id %>' /></div>",
initMap: function(){
mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'}),
osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [osm,grayscale,streets]});
2016-11-29 01:04:30 +01:00
this.map.addControl(
new L.Control.Layers(
{
'OSM': osm,
'Grayscale':grayscale,
'Streets': streets
2016-11-29 01:04:30 +01:00
}, {}
)
);
this.map.addEventListener('click', this.mapClick, this);
//this.map.invalidateSize();
2016-11-29 01:04:30 +01:00
if( $('#soundmap-marker-lat').val() ){
2016-11-29 01:04:30 +01:00
var _latlng = [parseFloat($('#soundmap-marker-lat').val()), parseFloat($('#soundmap-marker-lng').val())];
this.marker = L.marker(_latlng,{draggable: true}).addTo(this.map);
this.map.panTo(_latlng);
this.marker.addEventListener('dragend', this.markerDrag, this);
}
//init elements
this.file_frame = wp.media({
multiple: false,
library: {
type: 'audio'
}
});
2016-11-29 01:04:30 +01:00
this.initEvents();
2016-11-29 01:04:30 +01:00
},
initEvents: function(){
$('#add_files').bind('click', this.openMediaManager);
wp.media.frames.file_frame.on('select',this.mediaSelected, this);
2022-12-13 22:59:00 +01:00
$('.att-info').on('click','.delete-att-item', this.removeMedia);
setTimeout(() => { this.map.invalidateSize(); }, 0);
2016-11-29 01:04:30 +01:00
},
removeMedia: function(event){
$(event.currentTarget).parents('.soundmap-attach-item').remove();
},
openMediaManager: function(event){
2022-12-13 22:59:00 +01:00
this.file_frame = wp.media.frames.file_frame
2016-11-29 01:04:30 +01:00
event.preventDefault();
if ( this.file_frame ){
this.file_frame.open();
return;
}
2016-11-29 01:04:30 +01:00
},
mediaSelected: function(event){
this.file_frame = wp.media.frames.file_frame
2016-11-29 01:04:30 +01:00
var attachment = this.file_frame.state().get('selection').first().toJSON();
var _cT = _.template(this.attachTemplate);
var _o = _cT({
icon: attachment.icon,
url: attachment.url,
name: attachment.title,
length: attachment.fileLength,
id: attachment.id
});
$('#soundmap-attachments-list').append(_o);
2022-12-13 22:59:00 +01:00
$('.att-info').on('click','.delete-att-item', this.removeMedia);
2016-11-29 01:04:30 +01:00
},
mapClick: function(event){
var _latlng = event.latlng;
if(_.isUndefined(this.marker)){
this.marker = L.marker(_latlng,{draggable: true}).addTo(this.map);
this.marker.addEventListener('dragend', this.markerDrag, this);
}else{
this.marker.setLatLng(_latlng);
}
$('#soundmap-marker-lat').val(_latlng.lat);
$('#soundmap-marker-lng').val(_latlng.lng);
},
markerDrag: function(event){
var _latlng = this.marker.getLatLng();
$('#soundmap-marker-lat').val(_latlng.lat);
$('#soundmap-marker-lng').val(_latlng.lng);
}
});
2016-11-29 01:04:30 +01:00
$(document).ready(function(){
2022-12-13 22:59:00 +01:00
//console.log($('#map_canvas').width());
// Add Timeout for wait load metabox
setTimeout(function() {
soundmap.initMap();
}, 3000);
2016-11-29 01:04:30 +01:00
});
}(jQuery));