jQuery(document).ready(function($) {
var admin = null,
self = null,
map = $('#mapplic-admin-map'),
codeeditor = null;
map.on('mapstart', function(e, s) {
self = s;
admin = new MapplicAdmin().init();
});
// Media buttons
$(document).on('click', '.media-button', function(e) {
e.preventDefault();
var button = this;
var media_popup = wp.media({
title: 'Select or Upload File',
button: { text: 'Select' },
multiple: false
});
media_popup.on('select', function() {
var attachment = media_popup.state().get('selection').first().toJSON();
$(button).closest('div').find('.input-text').val(attachment.url);
}).open();
});
// New map type select
$('#mapplic-new-type').on('change', function() {
if (this.value != 'custom') $('#mapplic-mapfile').hide();
else $('#mapplic-mapfile').show();
});
// load Mapplic
map.mapplic({
locations: true,
sidebar: false,
hovertip: false,
search: true,
minimap: true,
slide: 0
});
self = map.data('mapplic');
// admin class
function MapplicAdmin() {
this.init = function() {
var s = this;
this.controls();
if (self) this.overwriteMethods();
if (self.data.bottomLat && self.data.leftLng && self.data.topLat && self.data.rightLng) $('.landmark-geolocation').show();
s.dragControls();
map.on('mapready', function(e) {
// interactive elements number
$('#interactive-elements-number').text($('[id^=MLOC] > *[id], [id^=landmark] > *[id]', self.map).length);
s.sidebarSort();
});
return this;
}
this.overwriteMethods = function() {
self.showLocation = function(id, duration, check) {
var location = self.location = self.l[id];
if (!location) return false;
self.el.trigger('locationopen', location);
}
self.addMarker = function(location) {
var level = $('.mapplic-layer[data-floor="' + location.level + '"]', self.el);
var marker = $('').attr('href', '#').addClass('mapplic-pin').addClass(location.pin).css({'top': (location.y * 100) + '%', 'left': (location.x * 100) + '%'}).appendTo(level);
marker.on('click touchend', function(e) {
if (e.cancelable) e.preventDefault();
self.showLocation(location.id, 600);
});
if (location.label) {
if (location.label.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g)) marker.css('background-image', 'url(' + location.label + ')');
else $('' + location.label + '').appendTo(marker);
}
if (location.reveal) marker.attr('data-reveal', location.reveal).css('visibility', 'hidden');
if (location.category) {
location.category = location.category.toString();
marker.attr('data-category', location.category);
}
marker.attr('data-location', location.id);
if (self.o.zoom && self.o.mousewheel) marker.on('mousewheel DOMMouseScroll', self.mouseWheel);
if (location.styled) marker.addClass(location.styled);
if (location.color && location.pin.indexOf('pin-text') > -1) marker.css('color', location.color);
else if (location.color) marker.css({'background-color': location.color, 'border-color': location.color });
if (location.id != 'init') location.el = marker;
return marker;
}
}
this.controls = function() {
var s = this;
// click on interactive element
map.on('svgloaded', function(e, svg, id) {
// svg element and floor id returned
$(self.o.selector, svg).on('click touchend', function() {
if (!self.dragging) {
var id = $(this).attr('id'),
location = self.l[id];
if (location) {
if ($('#landmark-settings .save-landmark:visible').val() == mapplic_localization.add) $('#landmark-settings .id-input').val(id);
s.updateLocationPanel(location);
$('.selected-pin').removeClass('selected-pin');
$('.mapplic-pin[data-location="' + id + '"]', self.map).addClass('selected-pin');
}
else if (confirm('There\'s no location associated with "' + id + '" yet.\nWould you like to create a new one?')) s.clearLocationPanel(id);
}
});
});
// Sortable lists
$('.sortable-list').sortable({
placeholder: 'list-item-placeholder',
forcePlaceholderSize: true,
handle: '.list-item-handle'
});
$(document).on('keyup', '.title-input', function(e) {
var text = $(this).val();
if (text === '') text = 'undefined';
$(this).closest('.list-item').find('.menu-item-title').text(text);
});
$(document).on('click', '.list-item:not(.predefined) .list-item-handle', function(e) {
e.preventDefault();
$(this).closest('.list-item').find('.list-item-settings').slideToggle(200);
$(this).find('.menu-item-toggle').toggleClass('opened');
});
// Edit mode
$('#mapplic-editmode').click(function() {
$('.mapplic-rawedit').toggle();
$('#mapplic-admin-map').toggle();
$(this).val(function(i, text) { return text === mapplic_localization.raw ? mapplic_localization.map : mapplic_localization.raw; });
});
// Indentation
$('#mapplic-indent').change(function() {
var ischecked = $(this).is(':checked'),
object = JSON.parse($('#mapplic-mapdata').val());
if (ischecked) $('#mapplic-mapdata').val(JSON.stringify(object, null, 4));
else $('#mapplic-mapdata').val(JSON.stringify(object));
});
// Color pickers
s.initColorPicker('.mapplic-color-picker', 'body', false);
s.initColorPicker('.mapplic-alpha-color-picker', 'body', true);
// Code Editor
if (wp.codeEditor) codeeditor = wp.codeEditor.initialize($('#mapplic-customcss'), cm_settings);
// Item actions
$(document).on('click', '.item-cancel', function(e) {
e.preventDefault();
$(this).closest('.list-item-settings').slideToggle(200);
});
$(document).on('click', '.item-delete', function(e) {
e.preventDefault();
if (confirm('Are you sure you want to delete the selected item?')) {
$(this).closest('.list-item').remove();
}
});
// Floors
$('#new-floor').click(function() {
$('#floor-list .new-item').clone().removeClass('new-item').appendTo('#floor-list').find('.list-item-settings').slideDown(200);
});
// Styles
$('#new-style').click(function() {
var n = $('#style-list .new-item').clone().removeClass('new-item').appendTo('#style-list').find('.list-item-settings').slideDown(200);
s.initColorPicker('.mapplic-alpha-color-picker-new', n, true);
});
// Categories
$('#new-category').click(function() {
var n = $('#category-list .new-item').clone().removeClass('new-item').appendTo('#category-list').find('.list-item-settings').slideDown(200);
s.initColorPicker('.mapplic-color-picker-new', n, false);
});
// Pin switcher
$('#pins-input > div').click(function() {
$('#pins-input .selected').removeClass('selected');
$(this).addClass('selected');
// Show label field only when it's available
if ($('.mapplic-pin', this).hasClass('pin-label')) $('#landmark-settings .label-input').show();
else $('#landmark-settings .label-input').hide();
var selected = $('.selected-pin');
if (selected.length) {
var data = self.l[$('.selected-pin').data('location')];
pin = $('.mapplic-pin', this).data('pin');
selected.attr('class', 'mapplic-pin selected-pin ' + pin);
data.pin = pin;
}
});
// Settings panel
$('.help-toggle').mousedown(function(e) { e.preventDefault(); });
$('.help-toggle').click(function() { $(this).parent().next('.help-content').toggle(100); });
// Setting groups
$('.settings-toggle').change(function() {
var group = $('.settings-group[data-group="' + $(this).attr('data-setting') + '"]');
if (this.checked) {
$('input', group).prop('disabled', false);
group.removeClass('disabled');
}
else {
$('input', group).prop('disabled', true);
group.addClass('disabled');
}
}).change();
// Location actions
$('#new-landmark').click(function() {
s.clearLocationPanel();
});
$('.save-landmark').click(function() {
var data = null,
selected = $('.selected-pin');
// No id specified
if (!$('#landmark-settings .id-input').val()) {
alert(mapplic_localization.missing_id);
return false;
}
if (selected.length) {
// Save existing landmark
data = self.l[selected.data('location')];
s.getLocationFields(data);
$('.selected-pin').removeClass('selected-pin');
$('#landmark-settings').hide();
}
else {
// Add new landmark
data = {};
s.getLocationFields(data);
data.x = (self.container.el.width() * 0.5 - self.x)/self.contentWidth/self.scale;
data.y = (self.container.el.height() * 0.5 - self.y)/self.contentHeight/self.scale;
s.newLocation(data);
$(this).val(mapplic_localization.save);
}
});
$('.duplicate-landmark').click(function() {
var original = self.l[$('.selected-pin').data('location')];
duplicate = jQuery.extend(true, {}, original);
duplicate.id = prompt('Unique ID of the new landmark:', original.id + '-d');
$('.selected-pin').removeClass('selected-pin');
s.newLocation(duplicate);
$('#landmark-settings .id-input').val(duplicate.id);
});
$(document).on('click', '.mapplic-dir-item > a', function() {
var location = self.l[$(this).parent('.mapplic-dir-item').data('location')];
self.switchLevel(location.level);
self.moveTo(location.x, location.y, (location.zoom ? parseFloat(location.zoom)/self.o.maxscale : 1), 600);
$('.selected-pin').removeClass('selected-pin');
if (location.el) location.el.addClass('selected-pin');
s.updateLocationPanel(location);
});
$('.delete-landmark').click(s.deleteSelected);
$(document).keyup(function(e) {
if(e.keyCode == 46) s.deleteSelected();
});
// list item click
$(document).on('click', '.mapplic-dir-item > a', function() {
var location = self.l[$(this).parent('.mapplic-dir-item').data('location')];
self.switchLevel(location.level);
self.moveTo(location.x, location.y, (location.zoom ? parseFloat(location.zoom)/self.o.maxscale : 1), 600);
$('.selected-pin').removeClass('selected-pin');
if (location.el) location.el.addClass('selected-pin');
s.updateLocationPanel(location);
});
// CSV Load
$('#mapplic-csvload').click(function() {
var field = $('#mapplic-csvfile');
if (!field.val()) alert('No CSV file selected.');
else if (confirm('Are you sure you want to load the CSV file\'s content and remove the link?')) {
Papa.parse(field.val(), {
header: true,
download: true,
encoding: "UTF-8",
skipEmptyLines: true,
complete: function(results, file) {
$.each(self.data.levels, function(index, level) {
$.each(results.data, function(index, location) {
if (!location.level) {
var elem = $('[id^=MLOC] > *[id="' + location.id + '"], [id^=landmark] > *[id="' + location.id + '"]', self.map);
if (elem && elem.closest('.mapplic-layer').data('floor')) location.level = elem.closest('.mapplic-layer').data('floor');
else location.level = level.id;
}
if (level.id == location.level) {
self.data.locations.push(location);
self.l[location.id] = location;
}
});
});
field.val('');
$('input[type=submit]')[0].click();
}
});
}
});
}
this.initColorPicker = function(selector, context, alpha) {
$(selector, context).each(function() {
var text = $(this).attr('data-text'),
palette = ["#e9e9ed","#ffc857","#f24c00","#87b38d","#5688c7","#2b5c8c","#8d6b94","#474747"],
cp = null;
if (alpha) {
$(this).attr('data-palette', palette.join('|'));
cp = $(this).alphaColorPicker();
}
else cp = $(this).wpColorPicker({palettes:palette});
if (text) cp.parent().parent().prev().find('.wp-color-result-text').html(text);
});
}
this.sidebarSort = function() {
if (self.sidebar && self.sidebar.dir && !self.o.alphabetic) {
var oi = null;
self.sidebar.dir.sortable({
items: '.mapplic-dir-item',
placeholder: 'list-item-placeholder',
forcePlaceholderSize: true
});
self.sidebar.dir.on('sortstart', function(e, ui) {
oi = ui.item.index();
});
self.sidebar.dir.on('sortupdate', function(e, ui) {
var loc = self.l[ui.item.data('location')];
if (self.data && self.data.locations) {
var temp = self.data.locations[oi];
self.data.locations[oi] = self.data.locations[ui.item.index()];
self.data.locations[ui.item.index()] = temp;
}
});
}
}
this.dragControls = function() {
var s = this;
// Pin drag
$(document).on('mousedown', '.mapplic-element .mapplic-pin', function(event) {
var pin = $(this),
x = (event.pageX - self.map.offset().left) / self.scale,
y = (event.pageY - self.map.offset().top) / self.scale;
event.preventDefault();
$('.selected-pin').removeClass('selected-pin');
pin.addClass('selected-pin');
$(document).on('mousemove', function(event) {
x = (event.pageX - self.map.offset().left) / self.scale,
y = (event.pageY - self.map.offset().top) / self.scale;
pin.css({
left: x + 'px',
top: y + 'px'
});
});
$(document).on('mouseup', function() {
$(document).off('mousemove');
$(document).off('mouseup');
var location = self.l[pin.data('location')];
location.x = (x/self.contentWidth).toFixed(4);
location.y = (y/self.contentHeight).toFixed(4);
s.updateLocationPanel(location);
});
});
// Pin touch
$(document).on('touchstart', '.mapplic-element .mapplic-pin', function(event) {
var pin = $(this),
x = (event.originalEvent.changedTouches[0].pageX - self.map.offset().left) / self.scale,
y = (event.originalEvent.changedTouches[0].pageY - self.map.offset().top) / self.scale;
$('.selected-pin').removeClass('selected-pin');
pin.addClass('selected-pin');
$(document).on('touchmove', function(event) {
x = (event.originalEvent.changedTouches[0].pageX - self.map.offset().left) / self.scale,
y = (event.originalEvent.changedTouches[0].pageY - self.map.offset().top) / self.scale;
pin.css({
left: x + 'px',
top: y + 'px'
});
});
$(document).on('touchend', function() {
$(document).off('touchmove');
$(document).off('touchend');
var location = self.l[pin.data('location')];
location.x = (x/self.contentWidth).toFixed(4);
location.y = (y/self.contentHeight).toFixed(4);
s.updateLocationPanel(location);
});
});
}
this.clearLocationPanel = function(id) {
// Remove selection if any
$('.selected-pin').removeClass('selected-pin');
// Show empty landmark fields
$('#landmark-settings').show();
$('#landmark-settings input[type="text"]').val('');
$('#landmark-settings .mapplic-landmark-field').val('');
if (typeof id !== 'undefined') $('#landmark-settings .id-input').val(id);
if ($('#wp-descriptioninput-wrap').hasClass('html-active')) $('#descriptioninput').val('');
else tinyMCE.get('descriptioninput').setContent('');
$('#landmark-settings .style-select').val('false');
$('#landmark-settings .category-select').val('false');
$('#landmark-settings .action-select').val('default');
$('#landmark-settings .hide-input').prop('checked', false);
// Change button text
$('.save-landmark').val(mapplic_localization.add);
$('.duplicate-landmark').hide();
}
this.updateLocationPanel = function(location) {
$('#landmark-settings .title-input').val(location.title);
$('#landmark-settings .id-input').val(location.id);
$('#landmark-settings .post-input').val(location.post);
if ($('#wp-descriptioninput-wrap').hasClass('html-active')) $('#descriptioninput').val(location.description);
else {
if (location.description) tinymce.get('descriptioninput').setContent(location.description);
else tinymce.get('descriptioninput').setContent('');
}
$('#landmark-settings .landmark-lat').val(location.lat);
$('#landmark-settings .landmark-lng').val(location.lng);
$('#pins-input .selected').removeClass('selected');
if (location.pin) {
$('#pins-input div[data-pin="' + location.pin + '"]').parent('div').addClass('selected');
// Show label field only when it's available
if (location.pin.indexOf('pin-label') > -1) $('#landmark-settings .label-input').show();
else $('#landmark-settings .label-input').hide();
}
$('#landmark-settings .label-input').val(location.label);
$('#landmark-settings .link-input').val(location.link);
$('#landmark-settings .fill-input').val(location.fill);
if (location.fill) $('#landmark-settings .fill-input').wpColorPicker('color', location.fill);
else $('#landmark-settings .wp-color-result').css('background-color', '');
if (location.style) $('#landmark-settings .style-select').val(location.style);
else $('#landmark-settings .style-select').val('');
if (location.category && typeof location.category === 'string') $('#landmark-settings .category-select').val(location.category.split(','));
else $('#landmark-settings .category-select').val('false');
$('#landmark-settings .thumbnail-input').val(location.thumbnail);
$('#landmark-settings .image-input').val(location.image);
if (location.action) $('#landmark-settings .action-select').val(location.action);
else $('#landmark-settings .action-select').val('tooltip');
$('#landmark-settings .zoom-input').val(location.zoom);
$('#landmark-settings .reveal-input').val(location.reveal);
if (location.hide) $('#landmark-settings .hide-input').prop('checked', true);
else $('#landmark-settings .hide-input').prop('checked', false);
$('#landmark-settings .about-input').val(location.about);
// Custom fields
$('#landmark-settings .mapplic-landmark-field').each(function() {
var field = $(this).data('field');
$(this).val(location[field]);
});
// Update UI
$('#landmark-settings').show(); // show fields
$('.save-landmark').val(mapplic_localization.save); // button text
$('.duplicate-landmark').show(); // duplicate
}
this.getLocationFields = function(data) {
data.title = $('#landmark-settings .title-input').val();
data.id = $('#landmark-settings .id-input').val();
data.post = $('#landmark-settings .post-input').val();
data.description = $('#wp-descriptioninput-wrap').hasClass('html-active') ? $('#descriptioninput').val() : tinyMCE.get('descriptioninput').getContent();
data.lat = $('#landmark-settings .landmark-lat').val();
data.lng = $('#landmark-settings .landmark-lng').val();
data.pin = $('#pins-input .selected .mapplic-pin').data('pin');
data.label = $('#landmark-settings .label-input').val();
data.fill = $('#landmark-settings .fill-input').val();
data.link = $('#landmark-settings .link-input').val();
data.style = $('#landmark-settings .style-select').val();
data.category = $('#landmark-settings .category-select').val();
data.thumbnail = $('#landmark-settings .thumbnail-input').val();
data.image = $('#landmark-settings .image-input').val();
data.action = $('#landmark-settings .action-select').val();
data.zoom = $('#landmark-settings .zoom-input').val();
data.reveal = $('#landmark-settings .reveal-input').val();
data.about = $('#landmark-settings .about-input').val();
data.hide = $('#landmark-settings .hide-input').prop('checked');
// Custom fields
$('#landmark-settings .mapplic-landmark-field').each(function(){
var field = $(this).data('field');
data[field] = $(this).val();
});
}
this.deleteSelected = function() {
var data = self.l[$('.selected-pin').data('location')];
// Remove the location and pin
if (data) {
data.id = null;
$('.selected-pin').remove();
}
// Hide the settings
$('#landmark-settings').hide();
}
this.newLocation = function(data) {
/*
$.each(self.data.levels, function(index, level) {
if (level.id == self.level) {
level.locations.push(data);
self.l[data.id] = data;
data.level = level.id;
if (data.fill) data.color = data.fill;
}
});*/
if (!self.data.locations) self.data.locations = [];
self.data.locations.push(data);
self.l[data.id] = data;
data.level = self.level;
if (data.fill) data.color = data.fill;
var marker = self.addMarker(data);
marker.addClass('selected-pin').css({'transform': 'scale(' + 1/self.scale + ')'});
$('.duplicate-landmark').show();
}
}
// Form submit
var invalid;
var errormsg;
$('input[type=submit]').click(function(event) {
if ($('#mapplic-admin-map').is(':visible')) {
invalid = false;
var newData = {};
// required fields
newData['mapwidth'] = $('#setting-mapwidth').val();
newData['mapheight'] = $('#setting-mapheight').val();
// text and selected
$('#settings input[type="text"], #settings select, #settings textarea').each(function() {
var setting = $(this).attr('data-setting');
if (setting) {
if ($(this).val()) newData[setting] = $(this).val();
else delete newData[setting];
}
});
// remove csv protocol
if (newData['csv']) newData['csv'] = newData['csv'].replace(/^(https\:)/, '').replace(/^(http\:)/, '');
// checkboxes
$('#settings input[type="checkbox"]').each(function() {
var setting = $(this).attr('data-setting');
if (setting) newData[setting] = $(this).is(':checked');
});
// code editor
if (codeeditor) newData['customcss'] = codeeditor.codemirror.getValue();
// Geolocation
var topLat = $('#geopos > #topLat').val(),
leftLng = $('#geopos > #leftLng').val(),
bottomLat = $('#geopos > #bottomLat').val(),
rightLng = $('#geopos > #rightLng').val();
if (topLat && !isNaN(topLat)) newData['topLat'] = topLat;
if (leftLng && !isNaN(leftLng)) newData['leftLng'] = leftLng;
if (bottomLat && !isNaN(bottomLat)) newData['bottomLat'] = bottomLat;
if (rightLng && !isNaN(rightLng)) newData['rightLng'] = rightLng;
// Fetching data
newData['levels'] = getLevels();
newData['styles'] = getStyles();
newData['categories'] = getCategories();
newData['locations'] = getLocations();
// Trigger event
$('#mapplic-admin-map').trigger('mapplic-savedata', [newData]);
// Validation
if (invalid) {
alert(errormsg);
event.preventDefault();
return false;
}
// Saving
$('#mapplic-mapdata').val(JSON.stringify(newData));
}
});
var getLevels = function() {
var levels = [];
$('#floor-list .list-item:not(.new-item)').each(function() {
var level = {};
level['id'] = $('.id-input', this).val();
level['title'] = $('.title-input', this).val();
level['map'] = $('.map-input', this).val().replace(/^(https\:)/, '').replace(/^(http\:)/, '');
level['minimap'] = $('.minimap-input', this).val();
if ($('.show-input', this).is(':checked')) level['show'] = 'true';
//level['locations'] = getLocations(level['id']);
// Validation
if (level['id'] == '') {
if (!invalid) errormsg = 'The floor titled "' + level['title'] + '" has no ID.';
invalid = true;
}
levels.push(level);
});
levels.reverse();
return levels;
}
var getStyles = function() {
var styles = [];
$('#style-list .list-item:not(.new-item):not(.predefined)').each(function() {
var style = {base: {}, hover:{}, active: {}};
style['class'] = $('.class-input', this).val();
style.base['fill'] = $('.base-fill', this).val();
style.hover['fill'] = $('.hover-fill', this).val();
style.active['fill'] = $('.active-fill', this).val();
if ($(this).hasClass('predefined')) style.predefined = 'true';
// Validation
if (!/^([a-z_]|-[a-z_-])[a-z\d_-]*$/i.test(style['class'])) {
if (!invalid) errormsg = '"' + style['class'] + '" is not a valid class name.';
invalid = true;
}
styles.push(style);
});
return styles;
}
var getCategories = function() {
var categories = [];
$('#category-list .list-item:not(.new-item)').each(function() {
var category = {};
category['title'] = $('.title-input', this).val();
category['id'] = $('.id-input', this).val();
category['about'] = $('.about-input', this).val();
category['icon'] = $('.icon-input', this).val();
category['style'] = $('.style-select', this).val();
if ($('.legend-input', this).is(':checked')) category['legend'] = 'true';
if ($('.hide-input', this).is(':checked')) category['hide'] = 'true';
if ($('.toggle-input', this).is(':checked')) category['toggle'] = 'true';
if ($('.switchoff-input', this).is(':checked')) category['switchoff'] = 'true';
category['color'] = $('.color-input', this).val();
// Validation
if (category['id'] == '') {
if (!invalid) errormsg = 'The category titled "' + category['title'] + '" has no ID.';
invalid = true;
}
categories.push(category);
});
return categories;
}
var getLocations = function(targetLevel) {
var locations = [];
if (typeof self.data.levels !== 'undefined') {
$.each(self.data.levels, function(index, level) {
if ((level.id == targetLevel) || !targetLevel) {
$.each(level.locations, function(index, location) {
if (location.id !== null) {
delete location.el;
delete location.marker;
delete location.list;
delete location.styled;
for (var key in location) if (location[key] == '') delete location[key];
locations.push(location);
}
});
}
});
}
$.each(self.data.locations, function(index, location) {
if (location.id !== null) {
delete location.el;
delete location.marker;
delete location.list;
delete location.styled;
for (var key in location) if (location[key] == '') delete location[key];
locations.push(location);
}
});
return locations;
}
});