1610 lines
59 KiB
JavaScript
1610 lines
59 KiB
JavaScript
|
|
|
|
var Toolbox = function (cfg, container) {
|
|
this.cfg = cfg;
|
|
this.X = 0;
|
|
this.Y = 0;
|
|
this.container = container;
|
|
|
|
// Restore saved position
|
|
this.StrKeyPosition = "Toolbox_" + cfg.IDBoard + "_Position";
|
|
try {
|
|
var pos = window.localStorage.getItem(this.StrKeyPosition);
|
|
if (pos && typeof pos === "string") {
|
|
pos = JSON.parse(pos);
|
|
this.X = parseInt(pos.X);
|
|
this.Y = parseInt(pos.Y);
|
|
}
|
|
} catch (e) {
|
|
window.localStorage.removeItem(this.StrKeyPosition);
|
|
}
|
|
|
|
// Create DOM
|
|
this.divToolbox = document.createElement("div");
|
|
this.divToolbox.className = "divToolbox";
|
|
this.divToolbox.style.left = this.X + "px";
|
|
this.divToolbox.style.top = this.Y + "px";
|
|
|
|
this.divTitle = document.createElement("div");
|
|
this.divToolbox.appendChild(this.divTitle);
|
|
this.divTitle.className = "divTitle";
|
|
this.divTitle.innerHTML = cfg.Texts.Toolbox;
|
|
|
|
this.btnAddCard = document.createElement("button");
|
|
this.divToolbox.appendChild(this.btnAddCard);
|
|
this.btnAddCard.className = "btnToolbox";
|
|
this.btnAddCard.innerHTML = cfg.Texts.AddCard;
|
|
this.btnAddCard.addEventListener("click", Toolbox.prototype.btnAddCard_Click.bind(this), false);
|
|
|
|
this.btnAddRegion = document.createElement("button");
|
|
this.divToolbox.appendChild(this.btnAddRegion);
|
|
this.btnAddRegion.className = "btnToolbox";
|
|
this.btnAddRegion.innerHTML = cfg.Texts.AddRegion;
|
|
this.btnAddRegion.addEventListener("click", Toolbox.prototype.btnAddRegion_Click.bind(this), false);
|
|
|
|
this.btnEditBoard = document.createElement("button");
|
|
this.divToolbox.appendChild(this.btnEditBoard);
|
|
this.btnEditBoard.className = "btnToolbox";
|
|
this.btnEditBoard.innerHTML = cfg.Texts.EditBoard;
|
|
this.btnEditBoard.addEventListener("click", Toolbox.prototype.btnEditBoard_Click.bind(this), false);
|
|
|
|
this.divOverlay = document.createElement("div");
|
|
this.divToolbox.appendChild(this.divOverlay);
|
|
this.divOverlay.className = "divOverlay";
|
|
|
|
this.container.appendChild(this.divToolbox);
|
|
|
|
// Bind mouse event handlers
|
|
this.bindedMouseDown = Toolbox.prototype.MouseDown.bind(this);
|
|
this.bindedMouseMove = Toolbox.prototype.MouseMove.bind(this);
|
|
this.bindedMouseUp = Toolbox.prototype.MouseUp.bind(this);
|
|
this.divOverlay.addEventListener("mousedown", this.bindedMouseDown, false);
|
|
|
|
// Bind touch event handlers
|
|
this.bindedTouchStart = Toolbox.prototype.TouchStart.bind(this);
|
|
this.bindedTouchMove = Toolbox.prototype.TouchMove.bind(this);
|
|
this.bindedTouchEnd = Toolbox.prototype.TouchEnd.bind(this);
|
|
this.divOverlay.addEventListener("touchstart", this.bindedTouchStart, false);
|
|
|
|
// temporal variables for dragging, editing and deleting
|
|
this.offsetX = 0;
|
|
this.offsetY = 0;
|
|
};
|
|
Toolbox.prototype = {
|
|
ReInsertOnContainer: function () {
|
|
this.container.removeChild(this.divToolbox);
|
|
this.container.appendChild(this.divToolbox);
|
|
},
|
|
GetRelativePosToContainer: function (pos) {
|
|
var tempElem = this.container;
|
|
var relPos = { x: pos.x, y: pos.y };
|
|
while (tempElem) {
|
|
relPos.x -= tempElem.offsetLeft;
|
|
relPos.y -= tempElem.offsetTop;
|
|
tempElem = tempElem.offsetParent;
|
|
}
|
|
return relPos;
|
|
},
|
|
SetPosition: function (x, y) {
|
|
if (x < 0) { x = 0; }
|
|
if (y < 0) { y = 0; }
|
|
this.X = x;
|
|
this.Y = y;
|
|
this.divToolbox.style.left = x + "px";
|
|
this.divToolbox.style.top = y + "px";
|
|
},
|
|
SavePosition: function () {
|
|
var pos = { X: this.X, Y: this.Y };
|
|
window.localStorage.setItem(this.StrKeyPosition, JSON.stringify(pos));
|
|
},
|
|
MouseDown: function (evt) {
|
|
evt.preventDefault();
|
|
var pos = this.GetRelativePosToContainer({ x: evt.clientX, y: evt.clientY });
|
|
this.offsetX = pos.x - this.divToolbox.offsetLeft;
|
|
this.offsetY = pos.y - this.divToolbox.offsetTop;
|
|
document.addEventListener("mouseup", this.bindedMouseUp, false);
|
|
document.addEventListener("mousemove", this.bindedMouseMove, false);
|
|
return false;
|
|
},
|
|
MouseMove: function (evt) {
|
|
evt.preventDefault();
|
|
var pos = this.GetRelativePosToContainer({ x: evt.clientX, y: evt.clientY });
|
|
this.SetPosition(parseInt(pos.x - this.offsetX), parseInt(pos.y - this.offsetY));
|
|
return false;
|
|
},
|
|
MouseUp: function (evt) {
|
|
evt.preventDefault();
|
|
this.SavePosition();
|
|
document.removeEventListener("mouseup", this.bindedMouseUp, false);
|
|
document.removeEventListener("mousemove", this.bindedMouseMove, false);
|
|
return false;
|
|
},
|
|
TouchStart: function (evt) {
|
|
evt.preventDefault();
|
|
var pos = this.GetRelativePosToContainer({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
|
|
this.offsetX = pos.x - this.divToolbox.offsetLeft;
|
|
this.offsetY = pos.y - this.divToolbox.offsetTop;
|
|
document.addEventListener("touchend", this.bindedTouchEnd, false);
|
|
document.addEventListener("touchcancel", this.bindedTouchEnd, false);
|
|
document.addEventListener("touchmove", this.bindedTouchMove, false);
|
|
return false;
|
|
},
|
|
TouchMove: function (evt) {
|
|
evt.preventDefault();
|
|
var pos = this.GetRelativePosToContainer({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
|
|
this.SetPosition(parseInt(pos.x - this.offsetX), parseInt(pos.y - this.offsetY));
|
|
return false;
|
|
},
|
|
TouchEnd: function (evt) {
|
|
evt.preventDefault();
|
|
this.SavePosition();
|
|
document.removeEventListener("touchend", this.bindedTouchEnd, false);
|
|
document.removeEventListener("touchcancel", this.bindedTouchEnd, false);
|
|
document.removeEventListener("touchmove", this.bindedTouchMove, false);
|
|
return false;
|
|
},
|
|
btnAddCard_Click: function (evt) {
|
|
evt.preventDefault();
|
|
var pos = { x: 0, y: 0 };
|
|
pos.x += this.divToolbox.offsetLeft;
|
|
pos.y += this.divToolbox.offsetTop + this.divToolbox.offsetHeight;
|
|
var card = new Card(this.cfg, 0, "", "", pos.x, pos.y, this.cfg.DefaultCardWidth, this.cfg.DefaultCardHeight);
|
|
card.InsertOnContainer(this.cfg.divBoard);
|
|
card.EnterEditionMode();
|
|
return false;
|
|
},
|
|
btnAddRegion_Click: function (evt) {
|
|
evt.preventDefault();
|
|
var pos = { x: 0, y: 0 };
|
|
pos.x += this.divToolbox.offsetLeft;
|
|
pos.y += this.divToolbox.offsetTop + this.divToolbox.offsetHeight;
|
|
var region = new Region(this.cfg, 0, "", pos.x, pos.y, this.cfg.DefaultRegionWidth, this.cfg.DefaultRegionHeight);
|
|
region.InsertOnContainer(this.cfg.divBoard);
|
|
region.EnterEditionMode();
|
|
return false;
|
|
},
|
|
btnEditBoard_Click: function (evt) {
|
|
evt.preventDefault();
|
|
window.location.href = this.cfg.EditBoardUrl;
|
|
return false;
|
|
},
|
|
empty: null
|
|
};
|
|
|
|
var Card = function (cfg, idCard, title, body, x, y, width, height, locked) {
|
|
this.cfg = cfg;
|
|
this.IDCard = idCard;
|
|
this.Title = title;
|
|
this.Body = body;
|
|
this.X = x;
|
|
this.Y = y;
|
|
this.Width = width;
|
|
this.Height = height;
|
|
this.Locked = locked;
|
|
|
|
// Create DOM
|
|
this.container = null;
|
|
this.divCard = document.createElement("div");
|
|
this.divCard.className = "divCard";
|
|
this.divCard.style.left = x + "px";
|
|
this.divCard.style.top = y + "px";
|
|
this.divCard.style.width = width + "px";
|
|
this.divCard.style.height = height + "px";
|
|
|
|
this.divTitle = document.createElement("div");
|
|
this.divCard.appendChild(this.divTitle);
|
|
this.divTitle.className = "divTitle";
|
|
|
|
this.txtTitle = document.createElement("input");
|
|
this.txtTitle.className = "txtTitle";
|
|
this.txtTitle.value = this.Title;
|
|
this.divTitle.appendChild(this.txtTitle);
|
|
|
|
this.divBody = document.createElement("div");
|
|
this.divCard.appendChild(this.divBody);
|
|
this.divBody.className = "divBody";
|
|
|
|
this.txtBody = document.createElement("textarea");
|
|
this.txtBody.className = "txtBody";
|
|
this.txtBody.value = this.Body;
|
|
this.divBody.appendChild(this.txtBody);
|
|
|
|
this.divOverlay = document.createElement("div");
|
|
this.divCard.appendChild(this.divOverlay);
|
|
this.divOverlay.className = "divOverlay";
|
|
this.divOverlay_MouseDownBinded = Card.prototype.divOverlay_MouseDown.bind(this);
|
|
this.divOverlay_MouseMoveBinded = Card.prototype.divOverlay_MouseMove.bind(this);
|
|
this.divOverlay_MouseUpBinded = Card.prototype.divOverlay_MouseUp.bind(this);
|
|
this.divOverlay.addEventListener("mousedown", this.divOverlay_MouseDownBinded, false);
|
|
this.divOverlay_TouchStartBinded = Card.prototype.divOverlay_TouchStart.bind(this);
|
|
this.divOverlay_TouchMoveBinded = Card.prototype.divOverlay_TouchMove.bind(this);
|
|
this.divOverlay_TouchEndBinded = Card.prototype.divOverlay_TouchEnd.bind(this);
|
|
this.divOverlay.addEventListener("touchstart", this.divOverlay_TouchStartBinded, false);
|
|
|
|
this.btnEdit = document.createElement("button");
|
|
this.divCard.appendChild(this.btnEdit);
|
|
this.btnEdit.className = "btnCard btnEdit";
|
|
this.btnEdit.innerHTML = "✎"; // Unicode "Lower Right Pencil"
|
|
this.btnEdit.addEventListener("click", Card.prototype.btnEdit_Click.bind(this), false);
|
|
|
|
this.btnDelete = document.createElement("button");
|
|
this.divCard.appendChild(this.btnDelete);
|
|
this.btnDelete.className = "btnCard btnDelete";
|
|
this.btnDelete.innerHTML = "X";
|
|
this.btnDelete.addEventListener("click", Card.prototype.btnDelete_Click.bind(this), false);
|
|
|
|
this.btnLock = document.createElement("button");
|
|
this.divCard.appendChild(this.btnLock);
|
|
this.btnLock.className = "btnCard btnLock";
|
|
this.btnLock.innerHTML = "🔒"; // Unicode "Lock"
|
|
this.btnLock.addEventListener("click", Region.prototype.btnLock_Click.bind(this), false);
|
|
|
|
this.btnUnlock = document.createElement("button");
|
|
this.divCard.appendChild(this.btnUnlock);
|
|
this.btnUnlock.className = "btnCard btnUnlock";
|
|
this.btnUnlock.innerHTML = "🔓"; // Unicode "Open Lock"
|
|
this.btnUnlock.style.display = "none";
|
|
this.btnUnlock.addEventListener("click", Region.prototype.btnUnlock_Click.bind(this), false);
|
|
|
|
this.divResize = document.createElement("div");
|
|
this.divCard.appendChild(this.divResize);
|
|
this.divResize.className = "divResize";
|
|
this.divResize_MouseDownBinded = Card.prototype.divResize_MouseDown.bind(this);
|
|
this.divResize_MouseMoveBinded = Card.prototype.divResize_MouseMove.bind(this);
|
|
this.divResize_MouseUpBinded = Card.prototype.divResize_MouseUp.bind(this);
|
|
this.divResize.addEventListener("mousedown", this.divResize_MouseDownBinded, false);
|
|
this.divResize_TouchStartBinded = Card.prototype.divResize_TouchStart.bind(this);
|
|
this.divResize_TouchMoveBinded = Card.prototype.divResize_TouchMove.bind(this);
|
|
this.divResize_TouchEndBinded = Card.prototype.divResize_TouchEnd.bind(this);
|
|
this.divResize.addEventListener("touchstart", this.divResize_TouchStartBinded, false);
|
|
|
|
// Temporal variables for actions
|
|
this.offsetX = 0;
|
|
this.offsetY = 0;
|
|
this.newX = this.X;
|
|
this.newY = this.Y;
|
|
this.newWidth = this.Width;
|
|
this.newHeight = this.Height;
|
|
this.newTitle = this.Title;
|
|
this.newBody = this.Body;
|
|
this.newLocked = locked;
|
|
this.Editing = false;
|
|
|
|
// SelfInsert
|
|
if (this.IDCard > 0) {
|
|
this.cfg.Cards.push(this);
|
|
}
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
|
|
this.SetLock(this.Locked);
|
|
};
|
|
Card.prototype = {
|
|
FilterText: function (text) {
|
|
text = text.split(" ").join(" ");
|
|
text = text.split(" ").join(" ");
|
|
text = text.split("\n").join("<br />");
|
|
return text;
|
|
},
|
|
CosineInterpolation: function (f) {
|
|
f = 1.0 - (Math.cos(f * Math.PI) + 1.0) / 2.0;
|
|
f = 1.0 - (Math.cos(f * Math.PI) + 1.0) / 2.0;
|
|
f = 1.0 - (Math.cos(f * Math.PI) + 1.0) / 2.0;
|
|
return f;
|
|
},
|
|
InsertOnContainer: function (container) {
|
|
this.container = container;
|
|
this.container.appendChild(this.divCard);
|
|
this.cfg.Toolbox.ReInsertOnContainer();
|
|
},
|
|
RemoveFromContainer: function () {
|
|
this.container.removeChild(this.divCard);
|
|
},
|
|
MoveFrame: function () {
|
|
if (this.animData) {
|
|
var f = (+new Date() - this.animData.startTime) / this.animData.time;
|
|
if (f < 1.0) {
|
|
f = this.CosineInterpolation(f);
|
|
var f2 = 1 - f;
|
|
var x = this.animData.X1 * f + this.animData.X0 * f2;
|
|
var y = this.animData.Y1 * f + this.animData.Y0 * f2;
|
|
this.divCard.style.left = x + "px";
|
|
this.divCard.style.top = y + "px";
|
|
this.animData.animationID = window.setTimeout(this.bindedMoveFrame, 16);
|
|
return;
|
|
}
|
|
}
|
|
this.divCard.style.left = this.X + "px";
|
|
this.divCard.style.top = this.Y + "px";
|
|
this.animData = null;
|
|
},
|
|
ResizeFrame: function () {
|
|
if (this.animData) {
|
|
var f = (+new Date() - this.animData.startTime) / this.animData.time;
|
|
if (f < 1.0) {
|
|
f = this.CosineInterpolation(f);
|
|
var f2 = 1 - f;
|
|
var width = this.animData.Width1 * f + this.animData.Width0 * f2;
|
|
var height = this.animData.Height1 * f + this.animData.Height0 * f2;
|
|
this.divCard.style.width = width + "px";
|
|
this.divCard.style.height = height + "px";
|
|
this.animData.animationID = window.setTimeout(this.bindedResizeFrame, 16);
|
|
return;
|
|
}
|
|
}
|
|
this.divCard.style.width = this.Width + "px";
|
|
this.divCard.style.height = this.Height + "px";
|
|
this.animData = null;
|
|
},
|
|
Move: function (x, y) {
|
|
if (x < 0) { x = 0; }
|
|
if (y < 0) { y = 0; }
|
|
this.OnMoveStart();
|
|
this.X = x;
|
|
this.Y = y;
|
|
this.newX = x;
|
|
this.newY = y;
|
|
this.animData = {
|
|
X0: parseInt(this.divCard.style.left),
|
|
Y0: parseInt(this.divCard.style.top),
|
|
X1: x,
|
|
Y1: y,
|
|
time: this.cfg.TimeMoveAnimation,
|
|
startTime: +new Date(),
|
|
animationID: 0
|
|
};
|
|
this.bindedMoveFrame = Card.prototype.MoveFrame.bind(this);
|
|
this.animData.animationID = window.setTimeout(this.bindedMoveFrame, 16);
|
|
},
|
|
Resize: function (width, height) {
|
|
if (width < 100) { x = 100; }
|
|
if (height < 100) { y = 100; }
|
|
this.OnResizeStart();
|
|
this.Width = width;
|
|
this.Height = height;
|
|
this.newWidth = width;
|
|
this.newHeight = height;
|
|
this.animData = {
|
|
Width0: parseInt(this.divCard.style.width),
|
|
Height0: parseInt(this.divCard.style.height),
|
|
Width1: width,
|
|
Height1: height,
|
|
time: this.cfg.TimeMoveAnimation,
|
|
startTime: +new Date(),
|
|
animationID: 0
|
|
};
|
|
this.bindedResizeFrame = Card.prototype.ResizeFrame.bind(this);
|
|
this.animData.animationID = window.setTimeout(this.bindedResizeFrame, 16);
|
|
},
|
|
Edit: function (title, body) {
|
|
if (this.Editing) {
|
|
this.ExitEditionMode();
|
|
}
|
|
this.Title = title;
|
|
this.Body = body;
|
|
this.newTitle = title;
|
|
this.newBody = body;
|
|
this.txtTitle.value = this.Title;
|
|
this.txtBody.value = this.Body;
|
|
this.RemoveFromContainer();
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
},
|
|
Lock: function (locked) {
|
|
this.newLocked = locked
|
|
this.SetLock(locked);
|
|
},
|
|
SetLock: function (locked) {
|
|
if (locked) {
|
|
this.btnEdit.style.display = "none";
|
|
this.btnDelete.style.display = "none";
|
|
this.btnLock.style.display = "none";
|
|
this.btnUnlock.style.display = "";
|
|
this.divOverlay.className = "divOverlayTouchable";
|
|
this.divOverlay.removeEventListener("mousedown", this.divOverlay_MouseDownBinded, false);
|
|
this.divOverlay.removeEventListener("touchstart", this.divOverlay_TouchStartBinded, false);
|
|
this.divResize.style.display = "none";
|
|
} else {
|
|
this.btnEdit.style.display = "";
|
|
this.btnDelete.style.display = "";
|
|
this.btnLock.style.display = "";
|
|
this.btnUnlock.style.display = "none";
|
|
this.divOverlay.className = "divOverlay";
|
|
this.divOverlay.addEventListener("mousedown", this.divOverlay_MouseDownBinded, false);
|
|
this.divOverlay.addEventListener("touchstart", this.divOverlay_TouchStartBinded, false);
|
|
this.divResize.style.display = "";
|
|
}
|
|
},
|
|
Reset: function () {
|
|
this.newX = this.X;
|
|
this.newY = this.Y;
|
|
this.newWidth = this.Width;
|
|
this.newHeight = this.Height;
|
|
this.newTitle = this.Title;
|
|
this.newBody = this.Body;
|
|
this.newLocked = this.Locked;
|
|
|
|
this.divCard.style.left = this.X + "px";
|
|
this.divCard.style.top = this.Y + "px";
|
|
this.txtTitle.value = this.Title;
|
|
this.SetLock(this.Locked);
|
|
this.txtBody.value = this.Body;
|
|
},
|
|
SetNew: function () {
|
|
this.X = this.newX;
|
|
this.Y = this.newY;
|
|
this.Width = this.newWidth;
|
|
this.Height = this.newHeight;
|
|
this.Title = this.newTitle;
|
|
this.Body = this.newBody;
|
|
this.Locked = this.newLocked;
|
|
this.Reset();
|
|
},
|
|
Hide: function () {
|
|
this.divCard.style.display = "none";
|
|
},
|
|
Show: function () {
|
|
this.divCard.style.display = "";
|
|
},
|
|
SendEvent: function (eventData) {
|
|
var card = this;
|
|
SendData(this.cfg.ServiceUrl, eventData,
|
|
function (responseText) {
|
|
try {
|
|
var recvData = JSON.parse(responseText);
|
|
if (recvData && recvData instanceof Object && recvData.IsOK === true) {
|
|
card.SetNew();
|
|
} else {
|
|
card.Reset();
|
|
}
|
|
} catch (e) { /* Empty */ }
|
|
}, function () {
|
|
card.Reset();
|
|
});
|
|
},
|
|
OnCreate: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.OnDelete();
|
|
return;
|
|
}
|
|
this.RemoveFromContainer();
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "CardCreate",
|
|
"X": this.X,
|
|
"Y": this.Y,
|
|
"Width": this.Width,
|
|
"Height": this.Height,
|
|
"Title": this.Title,
|
|
"Body": this.Body,
|
|
"Locked": this.Locked ? 1 : 0,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnMoveStart: function () {
|
|
if (this.animData) {
|
|
window.clearTimeout(this.animData.animationID);
|
|
this.animData = null;
|
|
}
|
|
this.RemoveFromContainer();
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
},
|
|
OnMove: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "CardMove",
|
|
"IDCard": this.IDCard,
|
|
"X": this.newX,
|
|
"Y": this.newY,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnResizeStart: function () {
|
|
if (this.animData) {
|
|
window.clearTimeout(this.animData.animationID);
|
|
this.animData = null;
|
|
}
|
|
this.RemoveFromContainer();
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
},
|
|
OnResize: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "CardResize",
|
|
"IDCard": this.IDCard,
|
|
"Width": this.newWidth,
|
|
"Height": this.newHeight,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnEdit: function () {
|
|
if (this.Title !== this.newTitle || this.Body !== this.newBody) {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "CardEdit",
|
|
"IDCard": this.IDCard,
|
|
"Title": this.newTitle,
|
|
"Body": this.newBody,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
}
|
|
},
|
|
OnLocked: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "CardLock",
|
|
"IDCard": this.IDCard,
|
|
"Locked": this.newLocked ? 1 : 0,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnDelete: function () {
|
|
this.Hide();
|
|
if (this.cfg.Connected === false) {
|
|
this.Show();
|
|
return;
|
|
}
|
|
if (this.IDCard === 0) {
|
|
this.RemoveFromContainer();
|
|
this.cfg.RemoveCardByID(this.IDCard);
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "CardDelete",
|
|
"IDCard": this.IDCard,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
GetRelativePosToContainer: function (pos) {
|
|
var tempElem = this.container;
|
|
var relPos = { x: pos.x, y: pos.y };
|
|
while (tempElem) {
|
|
relPos.x -= tempElem.offsetLeft;
|
|
relPos.y -= tempElem.offsetTop;
|
|
tempElem = tempElem.offsetParent;
|
|
}
|
|
return relPos;
|
|
},
|
|
divOverlay_MouseDown: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnMoveStart();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.clientX, y: evt.clientY });
|
|
this.offsetX = pos.x - this.divCard.offsetLeft;
|
|
this.offsetY = pos.y - this.divCard.offsetTop;
|
|
|
|
document.addEventListener("mouseup", this.divOverlay_MouseUpBinded, false);
|
|
document.addEventListener("mousemove", this.divOverlay_MouseMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divOverlay_MouseMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.clientX, y: evt.clientY });
|
|
this.newX = parseInt(pos.x - this.offsetX);
|
|
this.newY = parseInt(pos.y - this.offsetY);
|
|
if (this.newX < 0) { this.newX = 0; }
|
|
if (this.newY < 0) { this.newY = 0; }
|
|
this.divCard.style.left = this.newX + "px";
|
|
this.divCard.style.top = this.newY + "px";
|
|
|
|
return false;
|
|
},
|
|
divOverlay_MouseUp: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("mouseup", this.divOverlay_MouseUpBinded, false);
|
|
document.removeEventListener("mousemove", this.divOverlay_MouseMoveBinded, false);
|
|
|
|
this.OnMove();
|
|
|
|
return false;
|
|
},
|
|
divOverlay_TouchStart: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnMoveStart();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
|
|
this.offsetX = pos.x - this.divCard.offsetLeft;
|
|
this.offsetY = pos.y - this.divCard.offsetTop;
|
|
|
|
document.addEventListener("touchend", this.divOverlay_TouchEndBinded, false);
|
|
document.addEventListener("touchcancel", this.divOverlay_TouchEndBinded, false);
|
|
document.addEventListener("touchmove", this.divOverlay_TouchMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divOverlay_TouchMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
|
|
this.newX = parseInt(pos.x - this.offsetX);
|
|
this.newY = parseInt(pos.y - this.offsetY);
|
|
if (this.newX < 0) { this.newX = 0; }
|
|
if (this.newY < 0) { this.newY = 0; }
|
|
this.divCard.style.left = this.newX + "px";
|
|
this.divCard.style.top = this.newY + "px";
|
|
|
|
return false;
|
|
},
|
|
divOverlay_TouchEnd: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("touchend", this.divOverlay_TouchEndBinded, false);
|
|
document.removeEventListener("touchcancel", this.divOverlay_TouchEndBinded, false);
|
|
document.removeEventListener("touchmove", this.divOverlay_TouchMoveBinded, false);
|
|
|
|
this.OnMove();
|
|
|
|
return false;
|
|
},
|
|
divResize_MouseDown: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnResizeStart();
|
|
|
|
this.offsetX = evt.clientX;
|
|
this.offsetY = evt.clientY;
|
|
|
|
document.addEventListener("mouseup", this.divResize_MouseUpBinded, false);
|
|
document.addEventListener("mousemove", this.divResize_MouseMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divResize_MouseMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.newWidth = this.Width + (evt.clientX - this.offsetX);
|
|
this.newHeight = this.Height + (evt.clientY - this.offsetY);
|
|
if (this.newWidth < 100) { this.newWidth = 100; }
|
|
if (this.newHeight < 100) { this.newHeight = 100; }
|
|
this.divCard.style.width = this.newWidth + "px";
|
|
this.divCard.style.height = this.newHeight + "px";
|
|
|
|
return false;
|
|
},
|
|
divResize_MouseUp: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("mouseup", this.divResize_MouseUpBinded, false);
|
|
document.removeEventListener("mousemove", this.divResize_MouseMoveBinded, false);
|
|
|
|
this.OnResize();
|
|
|
|
return false;
|
|
},
|
|
divResize_TouchStart: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnResizeStart();
|
|
|
|
this.offsetX = evt.touches[0].clientX;
|
|
this.offsetY = evt.touches[0].clientY;
|
|
|
|
document.addEventListener("touchend", this.divResize_TouchEndBinded, false);
|
|
document.addEventListener("touchcancel", this.divResize_TouchEndBinded, false);
|
|
document.addEventListener("touchmove", this.divResize_TouchMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divResize_TouchMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.newWidth = this.Width + (evt.touches[0].clientX - this.offsetX);
|
|
this.newHeight = this.Height + (evt.touches[0].clientY - this.offsetY);
|
|
if (this.newWidth < 100) { this.newWidth = 100; }
|
|
if (this.newHeight < 100) { this.newHeight = 100; }
|
|
this.divCard.style.width = this.newWidth + "px";
|
|
this.divCard.style.height = this.newHeight + "px";
|
|
|
|
return false;
|
|
},
|
|
divResize_TouchEnd: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("touchend", this.divResize_TouchEndBinded, false);
|
|
document.removeEventListener("touchcancel", this.divResize_TouchEndBinded, false);
|
|
document.removeEventListener("touchmove", this.divResize_TouchMoveBinded, false);
|
|
|
|
this.OnResize();
|
|
|
|
return false;
|
|
},
|
|
EnterEditionMode: function () {
|
|
this.RemoveFromContainer();
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
|
|
this.txtTitle.value = this.Title;
|
|
this.txtBody.value = this.Body;
|
|
|
|
this.divOverlay.style.display = "none";
|
|
this.divResize.style.display = "none";
|
|
this.Editing = true;
|
|
|
|
this.divEditBackground = document.createElement("div");
|
|
this.divEditBackground.className = "divEditBackground";
|
|
this.divEditBackground.addEventListener("click", Card.prototype.btnEdit_Click.bind(this), false);
|
|
this.divCard.parentElement.insertBefore(this.divEditBackground, this.divCard);
|
|
|
|
},
|
|
ExitEditionMode: function () {
|
|
this.divOverlay.style.display = "";
|
|
this.divResize.style.display = "";
|
|
this.Editing = false;
|
|
this.divEditBackground.className = ""; // Needed to remove "position: fixed" that causes to be not found on parentElement.
|
|
this.divEditBackground.parentElement.removeChild(this.divEditBackground);
|
|
},
|
|
btnEdit_Click: function (evt) {
|
|
evt.preventDefault();
|
|
if (this.Editing === false) {
|
|
this.EnterEditionMode();
|
|
} else {
|
|
this.newTitle = this.txtTitle.value;
|
|
this.newBody = this.txtBody.value;
|
|
this.ExitEditionMode();
|
|
this.txtTitle.value = this.newTitle;
|
|
this.txtBody.value = this.newBody;
|
|
if (this.IDCard > 0) {
|
|
this.OnEdit();
|
|
} else {
|
|
this.Title = this.newTitle;
|
|
this.Body = this.newBody;
|
|
this.OnCreate();
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
btnDelete_Click: function (evt) {
|
|
evt.preventDefault();
|
|
if (this.Editing === true) {
|
|
this.ExitEditionMode();
|
|
this.Reset();
|
|
if (this.IDCard > 0) {
|
|
return false;
|
|
}
|
|
}
|
|
if (this.IDCard === 0 || confirm(this.cfg.Texts.ConfirmDelete)) {
|
|
this.OnDelete();
|
|
}
|
|
return false;
|
|
},
|
|
btnLock_Click: function (evt) {
|
|
evt.preventDefault();
|
|
this.Lock(true);
|
|
this.OnLocked();
|
|
return false;
|
|
},
|
|
btnUnlock_Click: function (evt) {
|
|
evt.preventDefault();
|
|
this.Lock(false);
|
|
this.OnLocked();
|
|
return false;
|
|
},
|
|
empty: null
|
|
};
|
|
|
|
var Region = function (cfg, idRegion, title, x, y, width, height, locked) {
|
|
this.cfg = cfg;
|
|
this.IDRegion = idRegion;
|
|
this.Title = title;
|
|
this.X = x;
|
|
this.Y = y;
|
|
this.Width = width;
|
|
this.Height = height;
|
|
this.Locked = locked;
|
|
|
|
// Create DOM
|
|
this.container = null;
|
|
this.divRegion = document.createElement("div");
|
|
this.divRegion.className = "divRegion";
|
|
this.divRegion.style.left = x + "px";
|
|
this.divRegion.style.top = y + "px";
|
|
this.divRegion.style.width = width + "px";
|
|
this.divRegion.style.height = height + "px";
|
|
|
|
this.divTitle = document.createElement("div");
|
|
this.divRegion.appendChild(this.divTitle);
|
|
this.divTitle.className = "divTitle";
|
|
|
|
this.txtTitle = document.createElement("input");
|
|
this.txtTitle.className = "txtTitle";
|
|
this.txtTitle.value = this.Title;
|
|
this.divTitle.appendChild(this.txtTitle);
|
|
|
|
this.divOverlay = document.createElement("div");
|
|
this.divRegion.appendChild(this.divOverlay);
|
|
this.divOverlay.className = "divOverlay";
|
|
this.divOverlay_MouseDownBinded = Region.prototype.divOverlay_MouseDown.bind(this);
|
|
this.divOverlay_MouseMoveBinded = Region.prototype.divOverlay_MouseMove.bind(this);
|
|
this.divOverlay_MouseUpBinded = Region.prototype.divOverlay_MouseUp.bind(this);
|
|
this.divOverlay.addEventListener("mousedown", this.divOverlay_MouseDownBinded, false);
|
|
this.divOverlay_TouchStartBinded = Region.prototype.divOverlay_TouchStart.bind(this);
|
|
this.divOverlay_TouchMoveBinded = Region.prototype.divOverlay_TouchMove.bind(this);
|
|
this.divOverlay_TouchEndBinded = Region.prototype.divOverlay_TouchEnd.bind(this);
|
|
this.divOverlay.addEventListener("touchstart", this.divOverlay_TouchStartBinded, false);
|
|
|
|
this.btnEdit = document.createElement("button");
|
|
this.divRegion.appendChild(this.btnEdit);
|
|
this.btnEdit.className = "btnRegion btnEdit";
|
|
this.btnEdit.innerHTML = "✎"; // Unicode "Lower Right Pencil"
|
|
this.btnEdit.addEventListener("click", Region.prototype.btnEdit_Click.bind(this), false);
|
|
|
|
this.btnDelete = document.createElement("button");
|
|
this.divRegion.appendChild(this.btnDelete);
|
|
this.btnDelete.className = "btnRegion btnDelete";
|
|
this.btnDelete.innerHTML = "X";
|
|
this.btnDelete.addEventListener("click", Region.prototype.btnDelete_Click.bind(this), false);
|
|
|
|
this.btnLock = document.createElement("button");
|
|
this.divRegion.appendChild(this.btnLock);
|
|
this.btnLock.className = "btnRegion btnLock";
|
|
this.btnLock.innerHTML = "🔒"; // Unicode "Lock"
|
|
this.btnLock.addEventListener("click", Region.prototype.btnLock_Click.bind(this), false);
|
|
|
|
this.btnUnlock = document.createElement("button");
|
|
this.divRegion.appendChild(this.btnUnlock);
|
|
this.btnUnlock.className = "btnRegion btnUnlock";
|
|
this.btnUnlock.innerHTML = "🔓"; // Unicode "Open Lock"
|
|
this.btnUnlock.style.display = "none";
|
|
this.btnUnlock.addEventListener("click", Region.prototype.btnUnlock_Click.bind(this), false);
|
|
|
|
this.divResize = document.createElement("div");
|
|
this.divRegion.appendChild(this.divResize);
|
|
this.divResize.className = "divResize";
|
|
this.divResize_MouseDownBinded = Region.prototype.divResize_MouseDown.bind(this);
|
|
this.divResize_MouseMoveBinded = Region.prototype.divResize_MouseMove.bind(this);
|
|
this.divResize_MouseUpBinded = Region.prototype.divResize_MouseUp.bind(this);
|
|
this.divResize.addEventListener("mousedown", this.divResize_MouseDownBinded, false);
|
|
this.divResize_TouchStartBinded = Region.prototype.divResize_TouchStart.bind(this);
|
|
this.divResize_TouchMoveBinded = Region.prototype.divResize_TouchMove.bind(this);
|
|
this.divResize_TouchEndBinded = Region.prototype.divResize_TouchEnd.bind(this);
|
|
this.divResize.addEventListener("touchstart", this.divResize_TouchStartBinded, false);
|
|
|
|
// Temporal variables for actions
|
|
this.offsetX = 0;
|
|
this.offsetY = 0;
|
|
this.newX = this.X;
|
|
this.newY = this.Y;
|
|
this.newWidth = this.Width;
|
|
this.newHeight = this.Height;
|
|
this.newTitle = this.Title;
|
|
this.newLocked = this.Locked;
|
|
this.Editing = false;
|
|
|
|
// Selfinsert
|
|
if (this.IDRegion > 0) {
|
|
this.cfg.Regions.push(this);
|
|
}
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
|
|
this.SetLock(this.Locked);
|
|
};
|
|
Region.prototype = {
|
|
FilterText: function (text) {
|
|
text = text.split(" ").join(" ");
|
|
text = text.split(" ").join(" ");
|
|
text = text.split("\n").join("<br />");
|
|
return text;
|
|
},
|
|
CosineInterpolation: function (f) {
|
|
f = 1.0 - (Math.cos(f * Math.PI) + 1.0) / 2.0;
|
|
f = 1.0 - (Math.cos(f * Math.PI) + 1.0) / 2.0;
|
|
f = 1.0 - (Math.cos(f * Math.PI) + 1.0) / 2.0;
|
|
return f;
|
|
},
|
|
InsertOnContainer: function (container) {
|
|
this.container = container;
|
|
this.container.insertBefore(this.divRegion, this.container.firstChild);
|
|
},
|
|
RemoveFromContainer: function () {
|
|
this.container.removeChild(this.divRegion);
|
|
},
|
|
MoveFrame: function () {
|
|
if (this.animData) {
|
|
var f = (+new Date() - this.animData.startTime) / this.animData.time;
|
|
if (f < 1.0) {
|
|
f = this.CosineInterpolation(f);
|
|
var f2 = 1 - f;
|
|
var x = this.animData.X1 * f + this.animData.X0 * f2;
|
|
var y = this.animData.Y1 * f + this.animData.Y0 * f2;
|
|
this.divRegion.style.left = x + "px";
|
|
this.divRegion.style.top = y + "px";
|
|
this.animData.animationID = window.setTimeout(this.bindedMoveFrame, 16);
|
|
return;
|
|
}
|
|
}
|
|
this.divRegion.style.left = this.X + "px";
|
|
this.divRegion.style.top = this.Y + "px";
|
|
this.animData = null;
|
|
},
|
|
ResizeFrame: function () {
|
|
if (this.animData) {
|
|
var f = (+new Date() - this.animData.startTime) / this.animData.time;
|
|
if (f < 1.0) {
|
|
f = this.CosineInterpolation(f);
|
|
var f2 = 1 - f;
|
|
var width = this.animData.Width1 * f + this.animData.Width0 * f2;
|
|
var height = this.animData.Height1 * f + this.animData.Height0 * f2;
|
|
this.divRegion.style.width = width + "px";
|
|
this.divRegion.style.height = height + "px";
|
|
this.animData.animationID = window.setTimeout(this.bindedResizeFrame, 16);
|
|
return;
|
|
}
|
|
}
|
|
this.divRegion.style.width = this.Width + "px";
|
|
this.divRegion.style.height = this.Height + "px";
|
|
this.animData = null;
|
|
},
|
|
Move: function (x, y) {
|
|
if (x < 0) { x = 0; }
|
|
if (y < 0) { y = 0; }
|
|
this.OnMoveStart();
|
|
this.X = x;
|
|
this.Y = y;
|
|
this.newX = x;
|
|
this.newY = y;
|
|
this.animData = {
|
|
X0: parseInt(this.divRegion.style.left),
|
|
Y0: parseInt(this.divRegion.style.top),
|
|
X1: x,
|
|
Y1: y,
|
|
time: this.cfg.TimeMoveAnimation,
|
|
startTime: +new Date(),
|
|
animationID: 0
|
|
};
|
|
this.bindedMoveFrame = Region.prototype.MoveFrame.bind(this);
|
|
this.animData.animationID = window.setTimeout(this.bindedMoveFrame, 16);
|
|
},
|
|
Resize: function (width, height) {
|
|
if (width < 100) { x = 100; }
|
|
if (height < 100) { y = 100; }
|
|
this.OnResizeStart();
|
|
this.Width = width;
|
|
this.Height = height;
|
|
this.newWidth = width;
|
|
this.newHeight = height;
|
|
this.animData = {
|
|
Width0: parseInt(this.divRegion.style.width),
|
|
Height0: parseInt(this.divRegion.style.height),
|
|
Width1: width,
|
|
Height1: height,
|
|
time: this.cfg.TimeMoveAnimation,
|
|
startTime: +new Date(),
|
|
animationID: 0
|
|
};
|
|
this.bindedResizeFrame = Region.prototype.ResizeFrame.bind(this);
|
|
this.animData.animationID = window.setTimeout(this.bindedResizeFrame, 16);
|
|
},
|
|
Edit: function (title) {
|
|
if (this.Editing) {
|
|
this.ExitEditionMode();
|
|
}
|
|
this.Title = title;
|
|
this.newTitle = title;
|
|
this.txtTitle.value = this.Title;
|
|
},
|
|
Lock: function (locked) {
|
|
this.newLocked = locked
|
|
this.SetLock(locked);
|
|
},
|
|
SetLock: function (locked) {
|
|
if (locked) {
|
|
this.btnEdit.style.display = "none";
|
|
this.btnDelete.style.display = "none";
|
|
this.btnLock.style.display = "none";
|
|
this.btnUnlock.style.display = "";
|
|
this.divOverlay.className = "divOverlayTouchable";
|
|
this.divOverlay.removeEventListener("mousedown", this.divOverlay_MouseDownBinded, false);
|
|
this.divOverlay.removeEventListener("touchstart", this.divOverlay_TouchStartBinded, false);
|
|
this.divResize.style.display = "none";
|
|
} else {
|
|
this.btnEdit.style.display = "";
|
|
this.btnDelete.style.display = "";
|
|
this.btnLock.style.display = "";
|
|
this.btnUnlock.style.display = "none";
|
|
this.divOverlay.className = "divOverlay";
|
|
this.divOverlay.addEventListener("mousedown", this.divOverlay_MouseDownBinded, false);
|
|
this.divOverlay.addEventListener("touchstart", this.divOverlay_TouchStartBinded, false);
|
|
this.divResize.style.display = "";
|
|
}
|
|
},
|
|
Reset: function () {
|
|
this.newX = this.X;
|
|
this.newY = this.Y;
|
|
this.newWidth = this.Width;
|
|
this.newHeight = this.Height;
|
|
this.newLocked = this.Locked;
|
|
this.newTitle = this.Title;
|
|
|
|
this.divRegion.style.left = this.X + "px";
|
|
this.divRegion.style.top = this.Y + "px";
|
|
this.divRegion.style.width = this.Width + "px";
|
|
this.divRegion.style.height = this.Height + "px";
|
|
this.SetLock(this.Locked);
|
|
this.txtTitle.value = this.Title;
|
|
},
|
|
SetNew: function () {
|
|
this.X = this.newX;
|
|
this.Y = this.newY;
|
|
this.Width = this.newWidth;
|
|
this.Height = this.newHeight;
|
|
this.Locked = this.newLocked;
|
|
this.Title = this.newTitle;
|
|
this.Reset();
|
|
},
|
|
Hide: function () {
|
|
this.divRegion.style.display = "none";
|
|
},
|
|
Show: function () {
|
|
this.divRegion.style.display = "";
|
|
},
|
|
SendEvent: function (eventData) {
|
|
var region = this;
|
|
SendData(this.cfg.ServiceUrl, eventData,
|
|
function (responseText) {
|
|
try {
|
|
var recvData = JSON.parse(responseText);
|
|
if (recvData && recvData instanceof Object && recvData.IsOK === true) {
|
|
region.SetNew();
|
|
} else {
|
|
region.Reset();
|
|
}
|
|
} catch (e) { /* Empty */ }
|
|
}, function () {
|
|
region.Reset();
|
|
});
|
|
},
|
|
OnCreate: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.OnDelete();
|
|
return;
|
|
}
|
|
this.RemoveFromContainer();
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "RegionCreate",
|
|
"X": this.X,
|
|
"Y": this.Y,
|
|
"Width": this.Width,
|
|
"Height": this.Height,
|
|
"Locked": this.Locked ? 1 : 0,
|
|
"Title": this.Title,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnMoveStart: function () {
|
|
if (this.animData) {
|
|
window.clearTimeout(this.animData.animationID);
|
|
this.animData = null;
|
|
}
|
|
},
|
|
OnMove: function () {
|
|
var Region = this;
|
|
if (this.cfg.Connected === false) {
|
|
Region.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "RegionMove",
|
|
"IDRegion": this.IDRegion,
|
|
"X": this.newX,
|
|
"Y": this.newY,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnResizeStart: function () {
|
|
if (this.animData) {
|
|
window.clearTimeout(this.animData.animationID);
|
|
this.animData = null;
|
|
}
|
|
},
|
|
OnResize: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "RegionResize",
|
|
"IDRegion": this.IDRegion,
|
|
"Width": this.newWidth,
|
|
"Height": this.newHeight,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnEdit: function () {
|
|
if (this.Title !== this.newTitle) {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "RegionEdit",
|
|
"IDRegion": this.IDRegion,
|
|
"Title": this.newTitle,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
}
|
|
},
|
|
OnLocked: function () {
|
|
if (this.cfg.Connected === false) {
|
|
this.Reset();
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "RegionLock",
|
|
"IDRegion": this.IDRegion,
|
|
"Locked": this.newLocked ? 1 : 0,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
OnDelete: function () {
|
|
this.Hide();
|
|
if (this.cfg.Connected === false) {
|
|
this.Show();
|
|
return;
|
|
}
|
|
if (this.IDRegion === 0) {
|
|
this.RemoveFromContainer();
|
|
this.cfg.RemoveRegionByID(this.IDRegion);
|
|
return;
|
|
}
|
|
var data = {
|
|
"IDBoard": this.cfg.IDBoard,
|
|
"Command": "RegionDelete",
|
|
"IDRegion": this.IDRegion,
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
this.SendEvent(data);
|
|
},
|
|
GetRelativePosToContainer: function (pos) {
|
|
var tempElem = this.container;
|
|
var relPos = { x: pos.x, y: pos.y };
|
|
while (tempElem) {
|
|
relPos.x -= tempElem.offsetLeft;
|
|
relPos.y -= tempElem.offsetTop;
|
|
tempElem = tempElem.offsetParent;
|
|
}
|
|
return relPos;
|
|
},
|
|
divOverlay_MouseDown: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnMoveStart();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.clientX, y: evt.clientY });
|
|
this.offsetX = pos.x - this.divRegion.offsetLeft;
|
|
this.offsetY = pos.y - this.divRegion.offsetTop;
|
|
|
|
document.addEventListener("mouseup", this.divOverlay_MouseUpBinded, false);
|
|
document.addEventListener("mousemove", this.divOverlay_MouseMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divOverlay_MouseMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.clientX, y: evt.clientY });
|
|
this.newX = parseInt(pos.x - this.offsetX);
|
|
this.newY = parseInt(pos.y - this.offsetY);
|
|
if (this.newX < 0) { this.newX = 0; }
|
|
if (this.newY < 0) { this.newY = 0; }
|
|
this.divRegion.style.left = this.newX + "px";
|
|
this.divRegion.style.top = this.newY + "px";
|
|
|
|
return false;
|
|
},
|
|
divOverlay_MouseUp: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("mouseup", this.divOverlay_MouseUpBinded, false);
|
|
document.removeEventListener("mousemove", this.divOverlay_MouseMoveBinded, false);
|
|
|
|
this.OnMove();
|
|
|
|
return false;
|
|
},
|
|
divOverlay_TouchStart: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnMoveStart();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
|
|
this.offsetX = pos.x - this.divRegion.offsetLeft;
|
|
this.offsetY = pos.y - this.divRegion.offsetTop;
|
|
|
|
document.addEventListener("touchend", this.divOverlay_TouchEndBinded, false);
|
|
document.addEventListener("touchcancel", this.divOverlay_TouchEndBinded, false);
|
|
document.addEventListener("touchmove", this.divOverlay_TouchMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divOverlay_TouchMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
var pos = this.GetRelativePosToContainer({ x: evt.touches[0].clientX, y: evt.touches[0].clientY });
|
|
this.newX = parseInt(pos.x - this.offsetX);
|
|
this.newY = parseInt(pos.y - this.offsetY);
|
|
if (this.newX < 0) { this.newX = 0; }
|
|
if (this.newY < 0) { this.newY = 0; }
|
|
this.divRegion.style.left = this.newX + "px";
|
|
this.divRegion.style.top = this.newY + "px";
|
|
|
|
return false;
|
|
},
|
|
divOverlay_TouchEnd: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("touchend", this.divOverlay_TouchEndBinded, false);
|
|
document.removeEventListener("touchcancel", this.divOverlay_TouchEndBinded, false);
|
|
document.removeEventListener("touchmove", this.divOverlay_TouchMoveBinded, false);
|
|
|
|
this.OnMove();
|
|
|
|
return false;
|
|
},
|
|
divResize_MouseDown: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnResizeStart();
|
|
|
|
this.offsetX = evt.clientX;
|
|
this.offsetY = evt.clientY;
|
|
|
|
document.addEventListener("mouseup", this.divResize_MouseUpBinded, false);
|
|
document.addEventListener("mousemove", this.divResize_MouseMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divResize_MouseMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.newWidth = this.Width + (evt.clientX - this.offsetX);
|
|
this.newHeight = this.Height + (evt.clientY - this.offsetY);
|
|
if (this.newWidth < 100) { this.newWidth = 100; }
|
|
if (this.newHeight < 100) { this.newHeight = 100; }
|
|
this.divRegion.style.width = this.newWidth + "px";
|
|
this.divRegion.style.height = this.newHeight + "px";
|
|
|
|
return false;
|
|
},
|
|
divResize_MouseUp: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("mouseup", this.divResize_MouseUpBinded, false);
|
|
document.removeEventListener("mousemove", this.divResize_MouseMoveBinded, false);
|
|
|
|
this.OnResize();
|
|
|
|
return false;
|
|
},
|
|
divResize_TouchStart: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.OnResizeStart();
|
|
|
|
this.offsetX = evt.touches[0].clientX;
|
|
this.offsetY = evt.touches[0].clientY;
|
|
|
|
document.addEventListener("touchend", this.divResize_TouchEndBinded, false);
|
|
document.addEventListener("touchcancel", this.divResize_TouchEndBinded, false);
|
|
document.addEventListener("touchmove", this.divResize_TouchMoveBinded, false);
|
|
|
|
return false;
|
|
},
|
|
divResize_TouchMove: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
this.newWidth = this.Width + (evt.touches[0].clientX - this.offsetX);
|
|
this.newHeight = this.Height + (evt.touches[0].clientY - this.offsetY);
|
|
if (this.newWidth < 100) { this.newWidth = 100; }
|
|
if (this.newHeight < 100) { this.newHeight = 100; }
|
|
this.divRegion.style.width = this.newWidth + "px";
|
|
this.divRegion.style.height = this.newHeight + "px";
|
|
|
|
return false;
|
|
},
|
|
divResize_TouchEnd: function (evt) {
|
|
evt.preventDefault();
|
|
|
|
document.removeEventListener("touchend", this.divResize_TouchEndBinded, false);
|
|
document.removeEventListener("touchcancel", this.divResize_TouchEndBinded, false);
|
|
document.removeEventListener("touchmove", this.divResize_TouchMoveBinded, false);
|
|
|
|
this.OnResize();
|
|
|
|
return false;
|
|
},
|
|
EnterEditionMode: function () {
|
|
this.RemoveFromContainer();
|
|
this.InsertOnContainer(this.cfg.divBoard);
|
|
|
|
this.txtTitle.value = this.Title;
|
|
|
|
this.divOverlay.style.display = "none";
|
|
this.divResize.style.display = "none";
|
|
this.Editing = true;
|
|
|
|
this.divEditBackground = document.createElement("div");
|
|
this.divEditBackground.className = "divEditBackground";
|
|
this.divEditBackground.addEventListener("click", Region.prototype.btnEdit_Click.bind(this), false);
|
|
this.divRegion.parentElement.insertBefore(this.divEditBackground, this.divRegion);
|
|
|
|
},
|
|
ExitEditionMode: function () {
|
|
this.divOverlay.style.display = "";
|
|
this.divResize.style.display = "";
|
|
this.Editing = false;
|
|
this.divEditBackground.className = ""; // Needed to remove "position: fixed" that causes to be not found on parentElement.
|
|
this.divEditBackground.parentElement.removeChild(this.divEditBackground);
|
|
},
|
|
btnEdit_Click: function (evt) {
|
|
evt.preventDefault();
|
|
if (this.Editing === false) {
|
|
this.EnterEditionMode();
|
|
} else {
|
|
this.newTitle = this.txtTitle.value;
|
|
this.ExitEditionMode();
|
|
this.txtTitle.value = this.newTitle;
|
|
if (this.IDRegion > 0) {
|
|
this.OnEdit();
|
|
} else {
|
|
this.Title = this.newTitle;
|
|
this.OnCreate();
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
btnDelete_Click: function (evt) {
|
|
evt.preventDefault();
|
|
if (this.Editing === true) {
|
|
this.ExitEditionMode();
|
|
this.Reset();
|
|
if (this.IDRegion > 0) {
|
|
return false;
|
|
}
|
|
}
|
|
if (this.IDRegion === 0 || confirm(this.cfg.Texts.ConfirmDelete)) {
|
|
this.OnDelete();
|
|
}
|
|
return false;
|
|
},
|
|
btnLock_Click: function (evt) {
|
|
evt.preventDefault();
|
|
this.Lock(true);
|
|
this.OnLocked();
|
|
return false;
|
|
},
|
|
btnUnlock_Click: function (evt) {
|
|
evt.preventDefault();
|
|
this.Lock(false);
|
|
this.OnLocked();
|
|
return false;
|
|
},
|
|
empty: null
|
|
};
|
|
|
|
function RunCardBoard(cfg) {
|
|
cfg.divBoard = GetElement(cfg.divBoard);
|
|
|
|
cfg.Toolbox = new Toolbox(cfg, cfg.divBoard);
|
|
|
|
cfg.Connected = false;
|
|
|
|
cfg.Cards = [];
|
|
|
|
cfg.Regions = [];
|
|
|
|
cfg.GetCardByID = function (idCard) {
|
|
for (var i = 0, n = this.Cards.length; i < n; i++) {
|
|
var card = this.Cards[i];
|
|
if (card.IDCard === idCard) {
|
|
return card;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
cfg.RemoveCardByID = function (idCard) {
|
|
for (var i = 0, n = this.Cards.length; i < n; i++) {
|
|
var card = this.Cards[i];
|
|
if (card.IDCard === idCard) {
|
|
this.Cards.splice(i, 1);
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
cfg.GetRegionByID = function (idRegion) {
|
|
for (var i = 0, n = this.Regions.length; i < n; i++) {
|
|
var region = this.Regions[i];
|
|
if (region.IDRegion === idRegion) {
|
|
return region;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
cfg.RemoveRegionByID = function (idRegion) {
|
|
for (var i = 0, n = this.Regions.length; i < n; i++) {
|
|
var region = this.Regions[i];
|
|
if (region.IDRegion === idRegion) {
|
|
this.Regions.splice(i, 1);
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
var ProcessCardCreateEvent = function (cardEvent) {
|
|
var card = new Card(cfg, cardEvent.IDCard, cardEvent.Title, cardEvent.Body, cardEvent.X, cardEvent.Y, cardEvent.Width, cardEvent.Height, cardEvent.Locked);
|
|
};
|
|
|
|
var ProcessCardMoveEvent = function (cardEvent) {
|
|
var card = cfg.GetCardByID(cardEvent.IDCard);
|
|
if (card === null) { return; }
|
|
card.Move(cardEvent.X, cardEvent.Y);
|
|
};
|
|
|
|
var ProcessCardResizeEvent = function (cardEvent) {
|
|
var card = cfg.GetCardByID(cardEvent.IDCard);
|
|
if (card === null) { return; }
|
|
card.Resize(cardEvent.Width, cardEvent.Height);
|
|
};
|
|
|
|
var ProcessCardEditEvent = function (cardEvent) {
|
|
var card = cfg.GetCardByID(cardEvent.IDCard);
|
|
if (card === null) { return; }
|
|
card.Edit(cardEvent.Title, cardEvent.Body);
|
|
};
|
|
|
|
var ProcessCardLockEvent = function (cardEvent) {
|
|
var card = cfg.GetCardByID(cardEvent.IDCard);
|
|
if (card === null) { return; }
|
|
card.Lock(cardEvent.Locked);
|
|
};
|
|
|
|
var ProcessCardDeleteEvent = function (cardEvent) {
|
|
var card = cfg.GetCardByID(cardEvent.IDCard);
|
|
if (card === null) { return; }
|
|
card.RemoveFromContainer(cfg.divBoard);
|
|
};
|
|
|
|
var ProcessRegionCreateEvent = function (cardEvent) {
|
|
var region = new Region(cfg, cardEvent.IDRegion, cardEvent.Title, cardEvent.X, cardEvent.Y, cardEvent.Width, cardEvent.Height, cardEvent.Locked);
|
|
};
|
|
|
|
var ProcessRegionMoveEvent = function (cardEvent) {
|
|
var region = cfg.GetRegionByID(cardEvent.IDRegion);
|
|
if (region === null) { return; }
|
|
region.Move(cardEvent.X, cardEvent.Y);
|
|
};
|
|
|
|
var ProcessRegionResizeEvent = function (cardEvent) {
|
|
var region = cfg.GetRegionByID(cardEvent.IDRegion);
|
|
if (region === null) { return; }
|
|
region.Resize(cardEvent.Width, cardEvent.Height);
|
|
};
|
|
|
|
var ProcessRegionEditEvent = function (cardEvent) {
|
|
var region = cfg.GetRegionByID(cardEvent.IDRegion);
|
|
if (region === null) { return; }
|
|
region.Edit(cardEvent.Title);
|
|
};
|
|
|
|
var ProcessRegionLockEvent = function (cardEvent) {
|
|
var region = cfg.GetRegionByID(cardEvent.IDRegion);
|
|
if (region === null) { return; }
|
|
region.Lock(cardEvent.Locked);
|
|
};
|
|
|
|
var ProcessRegionDeleteEvent = function (cardEvent) {
|
|
var region = cfg.GetRegionByID(cardEvent.IDRegion);
|
|
if (region === null) { return; }
|
|
region.RemoveFromContainer(cfg.divBoard);
|
|
};
|
|
|
|
var RequestCardEventData = function () {
|
|
var ReciveCardEventData = function (responseText) {
|
|
cfg.Connected = true;
|
|
|
|
var recvData = JSON.parse(responseText);
|
|
if (recvData && recvData instanceof Array) {
|
|
for (var i = 0, n = recvData.length; i < n; i++) {
|
|
var cardEvent = recvData[i];
|
|
if (cardEvent.IDCardEvent > cfg.IDCardEvent) {
|
|
cfg.IDCardEvent = cardEvent.IDCardEvent;
|
|
}
|
|
if (cardEvent.EventType === "CardCreate") {
|
|
ProcessCardCreateEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "CardMove") {
|
|
ProcessCardMoveEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "CardResize") {
|
|
ProcessCardResizeEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "CardEdit") {
|
|
ProcessCardEditEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "CardLock") {
|
|
ProcessCardLockEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "CardDelete") {
|
|
ProcessCardDeleteEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "RegionCreate") {
|
|
ProcessRegionCreateEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "RegionMove") {
|
|
ProcessRegionMoveEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "RegionResize") {
|
|
ProcessRegionResizeEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "RegionEdit") {
|
|
ProcessRegionEditEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "RegionLock") {
|
|
ProcessRegionLockEvent(cardEvent);
|
|
}
|
|
if (cardEvent.EventType === "RegionDelete") {
|
|
ProcessRegionDeleteEvent(cardEvent);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reset pool
|
|
window.setTimeout(function () {
|
|
RequestCardEventData();
|
|
}, cfg.TimeRefresh);
|
|
};
|
|
var ErrorCardEventData = function () {
|
|
cfg.Connected = false;
|
|
|
|
// Retry
|
|
window.setTimeout(function () {
|
|
RequestCardEventData();
|
|
}, cfg.TimeRefreshDisconnected);
|
|
};
|
|
|
|
// Pool data
|
|
var data = {
|
|
"IDBoard": cfg.IDBoard,
|
|
"IDCardEvent": cfg.IDCardEvent,
|
|
"TimePoolData": cfg.Connected === false ? "0" : String(cfg.TimePoolData),
|
|
"TimeStamp": new Date().getTime()
|
|
};
|
|
SendRequest(cfg.ServiceUrl, data, ReciveCardEventData, ErrorCardEventData);
|
|
};
|
|
RequestCardEventData();
|
|
} |