");
}
function appendTd() {
$("#load-maps > tbody > tr:last-of-type").append("");
}
function lastTd() {
return $("#load-maps > tbody > tr:last-of-type > td:last-of-type");
}
appendTr();
appendTd();
lastTd().text(map["_id"]);
appendTd();
lastTd().html("Load");
lastTd().find('a').click(showMap(map['_id']));
appendTd();
lastTd().html("Delete");
lastTd().find('a').click(deleteMap(map['_id'], map['_rev']));
});
}
});
}
function showMap(_id) {
return function(event) {
event.preventDefault();
$('#map-name').val(_id);
db2.get(_id, fill);
};
};
function fill(error, json) {
if(!error) {
var map = json.data;
$('#map-area img').remove();
var mapAreaOffset = $('#map-area').offset();
$.each(map, function(index, img) {
var top = img.top;
var left = img.left;
var angle = img.angle;
var src = img.src;
var classes = img.classes;
var $img = createImg(classes, src);
console.log('up', mapAreaOffset.top, mapAreaOffset.left)
// TODO: SUUUPER dirty! Refactor this!
if(classes.indexOf('tile') > 0) {
makeDraggable(8, '#map-area .tile')($img);
makeRotateable(90, 250)($img);
} else if(classes.indexOf('token') > 0 || classes.indexOf('base') > 0) {
makeDraggable(1, '#map-area .token, #map-area .base')($img);
makeRotateable(22.5, 125)($img);
}
$img.offset({
top: top + $('#map-area').offset().top,
left: left + $('#map-area').offset().left
});
$img.css({ transform: "rotate(" + angle + "deg)" });
$img.data('angle', angle);
disableContextMenu($img);
});
}
}
function deleteMap(_id, _rev) {
return function(event) {
event.preventDefault();
if(confirm("This will delete your map. Do you want to proceed?")) {
db2.remove(_id, _rev, function(error, code) {
var map = currentMapData();
listMaps();
$('#map-area img').remove();
var json = { 'data': map };
setTimeout(function() {
fill(false, json);
}, 300);
});
}
};
};
function createImg(classes, src) {
var $img = $('![]() ');
$img.addClass(classes);
$img.attr('src', src);
$('#map-area').append($img);
return $img;
}
function makeDraggable(step, stackSelector) {
return function($el) {
$el.draggable({
cursor: 'crosshair',
cursorAt: { left: $el.width() / 2, top: $el.height() / 2 },
opacity: 0.5,
drag: grid(),
stack: stackSelector
});
function grid() {
var $parent = $el.parent();
var parentOffset = $parent.offset();
var compensation = {
top: parentOffset.top % step,
left: parentOffset.left % step
};
return function(event, ui) {
var remainder = {
top: ui.position.top % step,
left: ui.position.left % step
};
ui.position = {
top: ui.position.top - remainder.top + compensation.top,
left: ui.position.left - remainder.left + compensation.left
};
};
};
};
};
function makeRotateable(degree, duration) {
return function($el) {
// Idea: If $el is clicked but not moved, it is rotated
$el.data('angle', 0);
$el.mousedown(function(event) {
var offset = $el.offset();
$el.data('moved', false);
});
$el.mousemove(function(event) {
$el.data('moved', true);
});
$el.mouseup(function(event) {
var offset = $el.offset();
if(!$el.data('moved')) {
// Rotate element clockwise if it did not move. On right click, rotate counterclockwise.
rotateElement($el, event.button === 2 ? -degree : degree, duration);
}
$el.removeData('moved');
});
return $el;
};
function rotateElement($el, degree, duration) {
var w = $el.css('width');
var h = $el.css('height');
var currentAngle = getCurrentRotationAngle($el);
var angle = currentAngle + degree;
$({deg: currentAngle}).animate({deg: angle}, {
duration: duration,
step: function(now){
$el.css({ transform: "rotate(" + now + "deg)" });
}
});
$el.data('angle', angle);
}
function getCurrentRotationAngle($el) {
var st = window.getComputedStyle($el[0], null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
'none';
if(tr === 'none') {
tr = 'matrix(0.0, 0.0, 0.0, 0.0, 0px, 0px)';
}
var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var scale = Math.sqrt(a*a + b*b);
var sin = b/scale;
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
return angle;
}
};
function disableContextMenu($el) {
$el[0].oncontextmenu = function() { return false; }
}
function currentMapData($mapArea) {
var data = [];
var $mapArea = $('#map-area');
var areaOffset = $mapArea.offset();
$mapArea.find('img').each(function(i, img) {
var $img = $(img);
$img.css('width', 0);
$img.css('height', 0);
$img.css({ transform: 'rotate(0deg)' });
var imgOffset = $img.offset();
console.log('down', areaOffset.top, areaOffset.left)
var entry = {
top: imgOffset.top - areaOffset.top,
left: imgOffset.left - areaOffset.left,
angle: $img.data('angle'),
src: $img.attr('src'),
classes: $img.attr('class')
};
data.push(entry);
});
return data;
}
})(); |
\
\
\
\
\
\
\
\
\