soundmap/js/soundmap.add.js

(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(){
            //this.layers.push(new L.Google());
            //this.layers.push(new L.Google('TERRAIN'));
            //this.map.addLayer(this.layers[0]);
					/*	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w}', {
							attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
							maxZoom: 18,
							id: 'mapbox.streets',
							accessToken: 'your.mapbox.access.token'
						}).addTo(this.map);*/
								mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
						var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light'}),
					  		streets   = L.tileLayer(mapboxUrl, {id: 'mapbox.streets'});
            this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
            this.map.addControl(
                new L.Control.Layers(
                    {
                        'Grayscale':grayscale,
                        'Streets': streets
                    }, {}
                )
            );

            this.map.addEventListener('click', this.mapClick, this);

            if( $('#soundmap-marker-lat').val() ){
                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);
            }
            //_.bindAll(this);
            this.initEvents();
;

        },


        initEvents: function(){
            $('#add_files').bind('click', this.openMediaManager);
            this.file_frame.on('select',this.mediaSelected, this);
            $('.delete-att-item').live('click', this.removeMedia);
        },

        removeMedia: function(event){
            $(event.currentTarget).parents('.soundmap-attach-item').remove();
        },
        openMediaManager: function(event){
            event.preventDefault();
            if ( this.file_frame ){
                this.file_frame.open();
                return;
            };
        },
        mediaSelected: function(event){
            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);

        },

        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);
        }

    });




    $(document).ready(function(){
        soundmap.initMap();
    });

}(jQuery));