Skip to content
This repository has been archived by the owner on Feb 2, 2021. It is now read-only.

Commit

Permalink
Merge pull request #16 from MapOnline/develop
Browse files Browse the repository at this point in the history 
2.0.5
  • Loading branch information
Kevin Richter authored Jul 1, 2016
2 parents 2df3251 + 36d9ee7 commit 91701a8
Show file tree
Hide file tree
Showing 29 changed files with 605 additions and 3,263 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
.idea
.idea
dist
47 changes: 47 additions & 0 deletions app/js/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,5 +148,52 @@ main.api = {
main.globals.offset.changeBy(0, 40 * (factor || 1));
level.draw();
}
},

controls: {

/**
* Array of controls to add
* @param {Array|Object} objects
*/
add: function(objects) {
if(!Array.isArray(objects)) {
objects = [objects];
}
var control_container = helpers.createElement('div', 'm4n-custom-control-container');
objects.forEach(function(object) {

var isDisabled = false;

// If disabled properties are given
if(object.hasOwnProperty('disabled')) {
var checkDisabled = function() {
isDisabled = object.disabled.callback();
if(isDisabled) {
control.classList.add('disabled');
} else if(control.classList.contains('disabled')) {
control.classList.remove('disabled');
}
};

// If the object want to listen to an event
if(object.disabled.hasOwnProperty('event')) {
addEventListener(object.disabled.event, checkDisabled);
}
}

var control = helpers.createElement('div', 'm4n-control-button', {
'click': function() {
if(!isDisabled) { object.click(); }
}
});

control.setAttribute('data-content', object.text);
control_container.appendChild(control);
});
control_container.appendChild(helpers.createElement('div', 'm4n-control-separator'));

main.controlContainer.appendChild(control_container);
}
}
};
10 changes: 10 additions & 0 deletions app/js/classes/level.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,25 @@ Level.prototype.checkLoaded = function() {
Level.prototype.draw = function() {
main.object.popups.hideAll();


main.object.context.save();
main.object.context.setTransform(1, 0, 0, 1, 0, 0);

main.object.context.clearRect(0, 0, main.object.canvas.width, main.object.canvas.height);

main.object.context.restore();

main.globals.offset.changeTo(
this.getBounds(true, main.globals.offset.get().x),
this.getBounds(false, main.globals.offset.get().y)
);

this.tiles.draw();

if(main.dev) {
this.points.draw();
}

main.object.levels.setCurrent(this.level);
triggerEvent("level_drawn", this.getApiObject());
};
Expand Down
9 changes: 7 additions & 2 deletions app/js/classes/levels.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ var Levels = function(levels) {

/**
* Get the ideal level for the current canvas size
* @returns {number} The level number
* @returns {Level} The level number
*/
Levels.prototype.getIdealLevel = function() {
var level = this.getLevel(0);
Expand Down Expand Up @@ -56,7 +56,12 @@ Levels.prototype.getApiObject = function() {
levels.push(item.getApiObject());
});

return { current: this.current, levels: levels };
return {
current: this.current,
highest: this.getHighest().level,
lowest: this.getLowest().level,
levels: levels
};
};

/**
Expand Down
10 changes: 5 additions & 5 deletions app/js/classes/point.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ var Point = function(point) {
}
}
}
// TODO refactor to support all formats

this.position = {
left: Math.min(this.shape[0].x, this.shape[1].x, this.shape[2].x, this.shape[3].x),
top: Math.min(this.shape[0].y, this.shape[1].y, this.shape[2].y, this.shape[3].y)
left: Math.min.apply(null, this.shape.map(function(item) { return item.x })) - 10,
top: Math.min.apply(null, this.shape.map(function(item) { return item.y })) - 10
};
this.size = {
width: Math.max(this.shape[0].x, this.shape[1].x, this.shape[2].x, this.shape[3].x) - this.position.left,
height: Math.max(this.shape[0].y, this.shape[1].y, this.shape[2].y, this.shape[3].y) - this.position.top
width: Math.max.apply(null, this.shape.map(function(item) { return item.x })) - this.position.left + 10,
height: Math.max.apply(null, this.shape.map(function(item) { return item.y })) - this.position.top + 10
};
};

Expand Down
13 changes: 5 additions & 8 deletions app/js/classes/points.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,12 @@ Points.prototype.draw = function() {
* @returns {Point|null} The point the user clicked on
*/
Points.prototype.hitAPoint = function(x, y) {
var point = null;

this.list.forEach(function(item) {
if(item.isOn(x, y)) {
point = item;
return false;
for(var i = 0; i < this.list.length; i++) {
if(this.list[i].isOn(x, y)) {
return this.list[i];
}
});
return point;
}
return null;
};

/**
Expand Down
137 changes: 83 additions & 54 deletions app/js/classes/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,24 @@ Popup.prototype.show = function(center) {
var object = { x: 0, y: 0 };

var location = point.location();

if(location.location.x !== "center" || location.location.y !== "center") {
if(location.left < 5) {
object.x = 5 - location.left;
} else if(location.right < 5) {
object.x = -(5 - location.right);
// Check if popup isn't wider than the canvas
if(!(location.left <= 5 && location.right <= 5)) {
if(location.left < 5) {
object.x = 5 - location.left;
} else if(location.right < 5) {
object.x = -(5 - location.right);
}
}

if(location.top < 5) {
object.y = 5 - location.top;
} else if(location.bottom < 5) {
object.y = -(5 - location.bottom);
// Check if the popup isn't higher than the canvas
if(!(location.top <= 5 && location.bottom <= 5)) {
if(location.top < 5) {
object.y = 5 - location.top;
} else if(location.bottom < 5) {
object.y = -(5 - location.bottom);
}
}

if(object.x !== 0 || object.y !== 0) {
Expand Down Expand Up @@ -226,6 +233,7 @@ Popup.prototype.generateHTML = function() {

var popup = document.createElement("div");
popup.id = this.html_id;
popup.style.zIndex = main.object.canvas.style.zIndex +1;

var title_html = helpers.createElement("div", "m4n-title");
title_html.innerHTML = title;
Expand Down Expand Up @@ -322,62 +330,83 @@ Popup.prototype.generatePopover = function(popup, title_html, info_html, media_h

this.onShowDesktop = function(point) {
popup.style.display = "block";

// Triangle
var heightTriangle = 16.97056274847714; // 24 = width of a triangle plus the border
var triangle = popup.getElementsByClassName("m4n-popover-triangle")[0];

var left = Math.max(0.15, Math.min(0.85, ((point.position.left + main.globals.offset.get().x) / main.object.canvas.clientWidth))),
top = Math.max(0.05, Math.min(0.85, ((point.position.top + main.globals.offset.get().y) / main.object.canvas.clientHeight))),

triangle = popup.getElementsByClassName("m4n-popover-triangle")[0],
fits = {
nextTo: (
(main.globals.offset.get().x + point.position.left + (popup.clientWidth * left) + (point.size.width / 2)) < main.object.canvas.clientWidth &&
(main.globals.offset.get().x + point.position.left - (popup.clientWidth * left) + (point.size.width / 2)) > 0
),
above: (main.globals.offset.get().y + point.position.top - heightTriangle) > popup.clientHeight,
beneath: (main.object.canvas.clientHeight - (main.globals.offset.get().y + point.position.top + point.size.height + heightTriangle)) > popup.clientHeight,
left: (main.globals.offset.get().x + point.position.left - heightTriangle) > popup.clientWidth,
right: (main.object.canvas.clientWidth - (main.globals.offset.get().x + point.position.left + point.size.width + heightTriangle)) > popup.clientWidth
};

var showAbove = function() {
triangle.classList.add("bottom");
popup.style.top = main.globals.offset.get().y + point.position.top - popup.clientHeight - heightTriangle + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left + (point.size.width / 2) - (popup.clientWidth * left) + 'px';
triangle.style.left = (left * 100) + "%";
};
// Position for triangle
var left = Math.max(0.15, Math.min(0.85, ((point.position.left + main.globals.offset.get().x) / main.object.canvas.clientWidth)));
var top = Math.max(0.05, Math.min(0.85, ((point.position.top + main.globals.offset.get().y) / main.object.canvas.clientHeight)));

// Bounding Client Rect of the canvas
var boundingRect = main.object.canvas.getBoundingClientRect();

var showBeneath = function() {
triangle.classList.add("top");
popup.style.top = main.globals.offset.get().y + point.position.top + point.size.height + heightTriangle + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left + (point.size.width / 2) - (popup.clientWidth * left) + 'px';
triangle.style.left = (left * 100) + "%";
// Formulas for where the popup fits
var formulas = {
above: main.globals.offset.get().y + point.position.top - heightTriangle,
beneath: boundingRect.height - (main.globals.offset.get().y + point.position.top + point.size.height) - heightTriangle,
left: main.globals.offset.get().x + point.position.left - heightTriangle,
right: boundingRect.width - (main.globals.offset.get().x + point.position.left + point.size.width) - heightTriangle
};

var showLeft = function() {
triangle.classList.add("right");
popup.style.top = (main.globals.offset.get().y + point.position.top + (point.size.height / 2) - (popup.clientHeight * top) - 10) + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left - popup.clientWidth - heightTriangle + 'px';
triangle.style.top = (top * 100) + "%";
// Booleans for where the popup fits
var fits = {
onCanvas: {
above: formulas.above > popup.clientHeight,
beneath: formulas.beneath > popup.clientHeight,
left: formulas.left > popup.clientWidth,
right: formulas.right > popup.clientWidth
},
onScreen: {
above: (formulas.above + boundingRect.top) > popup.clientHeight,
beneath: (formulas.beneath + (window.innerHeight - boundingRect.height - boundingRect.top)) > popup.clientHeight,
left: (formulas.left + boundingRect.left) > popup.clientWidth,
right: (formulas.right + (window.innerWidth - boundingRect.width - boundingRect.left)) > popup.clientWidth
}
};

var showRight = function() {
triangle.classList.add("left");
popup.style.top = (main.globals.offset.get().y + point.position.top + (point.size.height / 2) - (popup.clientHeight * top) - 10) + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left + point.size.width + heightTriangle + 'px';
triangle.style.top = (top * 100) + "%";
var show = {
above: function() {
triangle.classList.add("bottom");
popup.style.top = main.globals.offset.get().y + point.position.top - popup.clientHeight - heightTriangle + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left + (point.size.width / 2) - (popup.clientWidth * left) + 'px';
triangle.style.left = (left * 100) + "%";
},
beneath: function() {
triangle.classList.add("top");
popup.style.top = main.globals.offset.get().y + point.position.top + point.size.height + heightTriangle + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left + (point.size.width / 2) - (popup.clientWidth * left) + 'px';
triangle.style.left = (left * 100) + "%";
},
left: function() {
triangle.classList.add("right");
popup.style.top = (main.globals.offset.get().y + point.position.top + (point.size.height / 2) - (popup.clientHeight * top) - 10) + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left - popup.clientWidth - heightTriangle + 'px';
triangle.style.top = (top * 100) + "%";
},
right: function() {
triangle.classList.add("left");
popup.style.top = (main.globals.offset.get().y + point.position.top + (point.size.height / 2) - (popup.clientHeight * top) - 10) + 'px';
popup.style.left = main.globals.offset.get().x + point.position.left + point.size.width + heightTriangle + 'px';
triangle.style.top = (top * 100) + "%";
}
};

// TODO redo if statements; redo
if((fits.above || !fits.beneath) && fits.nextTo) {
showAbove();
} else if(fits.nextTo) {
showBeneath();
} else if(fits.left) {
showLeft();
} else if(fits.right) {
showRight();
if(fits.onCanvas.above && fits.onScreen.above) {
show.above();
} else if(fits.onCanvas.beneath && fits.onScreen.beneath) {
show.beneath();
} else {
showAbove();

if(fits.onCanvas.left && fits.onScreen.left) {
show.left();
} else if(fits.onCanvas.right && fits.onScreen.right) {
show.right();
} else {
show.above();
}

}

return true;
Expand Down
12 changes: 5 additions & 7 deletions app/js/classes/popups.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,10 @@ Popups.prototype.hideAll = function(force) {
* @returns {Popup|null} the current popup
*/
Popups.prototype.getCurrent = function() {
var current = null;
this.getAll().forEach(function(item) {
if(item.on_screen) {
current = item;
return false;
for(var i = 0; i < this.list.length; i++) {
if(this.list[i].on_screen) {
return this.list[i];
}
});
return current;
}
return null;
};
Loading

0 comments on commit 91701a8

Please sign in to comment.