VAR/VAR.WebFormsCore
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cards: Toolbox and card creation

Browse Source
This commit is contained in:
Valeriano A.R.
2015-06-19 07:26:02 +02:00
parent 0137680d58
commit 8cee8412b4
5 changed files with 229 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Scrummer/Code/Entities/OperationStatus.cs
View File

@@ -9,5 +9,6 @@ namespace Scrummer.Code.Entities
{
public bool IsOK { get; set; }
public string Message { get; set; }
public string ReturnValue { get; set; }
}
}

2
Scrummer/Controls/CardBoardControl.cs
View File

@@ -83,6 +83,8 @@ namespace Scrummer.Controls
sbCfg.AppendFormat(" ServiceUrl: \"{0}\",\n", _serviceUrl);
sbCfg.AppendFormat(" TimePoolData: {0},\n", _timePoolData);
sbCfg.AppendFormat(" Texts: {{\n");
sbCfg.AppendFormat(" Toolbox: \"Toolbox\",\n");
sbCfg.AppendFormat(" AddCard: \"+ Add card\",\n");
sbCfg.AppendFormat(" Accept: \"Accept\",\n");
sbCfg.AppendFormat(" Cancel: \"Cancel\",\n");
sbCfg.AppendFormat(" ConfirmDelete: \"Are you sure to delete?\",\n");

17
Scrummer/Controls/CardBoardHandler.cs
View File

@@ -139,7 +139,7 @@ namespace Scrummer.Controls
string strIDBoard = GetRequestParm(context, "IDBoard");
int idBoard = Convert.ToInt32(string.IsNullOrEmpty(strIDBoard) ? "0" : strIDBoard);
string command = GetRequestParm(context, "Command");
int idCard = 0;
bool done = false;
CardBoard cardBoard = GetCardBoard(idBoard);
lock (cardBoard)
@@ -150,12 +150,12 @@ namespace Scrummer.Controls
string body = GetRequestParm(context, "Body");
int x = Convert.ToInt32(GetRequestParm(context, "X"));
int y = Convert.ToInt32(GetRequestParm(context, "Y"));
cardBoard.Card_Create(title, body, x, y);
idCard = cardBoard.Card_Create(title, body, x, y);
done = true;
}
if (command == "Move")
{
int idCard = Convert.ToInt32(GetRequestParm(context, "IDCard"));
idCard = Convert.ToInt32(GetRequestParm(context, "IDCard"));
int x = Convert.ToInt32(GetRequestParm(context, "X"));
int y = Convert.ToInt32(GetRequestParm(context, "Y"));
cardBoard.Card_Move(idCard, x, y);
@@ -163,7 +163,7 @@ namespace Scrummer.Controls
}
if (command == "Edit")
{
int idCard = Convert.ToInt32(GetRequestParm(context, "IDCard"));
idCard = Convert.ToInt32(GetRequestParm(context, "IDCard"));
string title = GetRequestParm(context, "Title");
string body = GetRequestParm(context, "Body");
cardBoard.Card_Edit(idCard, title, body);
@@ -171,7 +171,7 @@ namespace Scrummer.Controls
}
if (command == "Delete")
{
int idCard = Convert.ToInt32(GetRequestParm(context, "IDCard"));
idCard = Convert.ToInt32(GetRequestParm(context, "IDCard"));
cardBoard.Card_Delete(idCard);
done = true;
}
@@ -179,7 +179,12 @@ namespace Scrummer.Controls
if (done)
{
NotifyAll();
ResponseObject(context, new OperationStatus { IsOK = true, Message = "Update successfully" });
ResponseObject(context, new OperationStatus
{
IsOK = true,
Message = "Update successfully",
ReturnValue = Convert.ToString(idCard)
});
}
}

165
Scrummer/Scripts/05. Cards.js
View File

@@ -1,4 +1,120 @@
var Card = function (cfg, idCard, title, body, x, y) {
var Toolbox = function (cfg, container) {
this.cfg = cfg;
this.X = 0;
this.Y = 0;
this.container = container;
// 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.btnAdd = document.createElement("button");
this.divToolbox.appendChild(this.btnAdd);
this.btnAdd.className = "btnToolbox";
this.btnAdd.innerHTML = cfg.Texts.AddCard;
this.btnAdd.addEventListener("click", Toolbox.prototype.btnAdd_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 = {
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;
},
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.divToolbox.style.left = parseInt(pos.x - this.offsetX) + "px";
this.divToolbox.style.top = parseInt(pos.y - this.offsetY) + "px";
return false;
},
MouseUp: function (evt) {
evt.preventDefault();
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.divToolbox.style.left = parseInt(pos.x - this.offsetX) + "px";
this.divToolbox.style.top = parseInt(pos.y - this.offsetY) + "px";
return false;
},
TouchEnd: function (evt) {
evt.preventDefault();
document.removeEventListener("touchend", this.bindedTouchEnd, false);
document.removeEventListener("touchcancel", this.bindedTouchEnd, false);
document.removeEventListener("touchmove", this.bindedTouchMove, false);
return false;
},
btnAdd_Click: function (evt) {
evt.preventDefault();
var pos = this.GetRelativePosToContainer({ 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);
//card.SetDeleteCallback(bindedCardDelete);
//cfg.Cards.push(card);
card.InsertInContainer(this.cfg.divBoard);
card.EnterEditionMode();
return false;
}
};
var Card = function (cfg, idCard, title, body, x, y) {
this.cfg = cfg;
this.IDCard = idCard;
this.Title = title;
@@ -144,6 +260,7 @@ Card.prototype = {
var card = this;
if (this.cfg.Connected == false) {
card.Reset();
return;
}
var data = {
"IDBoard": this.cfg.IDBoard,
@@ -173,6 +290,7 @@ Card.prototype = {
var card = this;
if (this.cfg.Connected == false) {
card.Reset();
return;
}
var data = {
"IDBoard": this.cfg.IDBoard,
@@ -230,6 +348,36 @@ Card.prototype = {
card.Show();
});
},
OnCreate: function () {
var card = this;
if (this.cfg.Connected == false) {
card.OnDelete();
return;
}
var data = {
"IDBoard": this.cfg.IDBoard,
"Command": "Create",
"X": this.X,
"Y": this.Y,
"Title": this.Title,
"Body": this.Body,
"TimeStamp": new Date().getTime()
};
SendData(this.cfg.ServiceUrl, data,
function (responseText) {
try {
var recvData = JSON.parse(responseText);
if (recvData && recvData instanceof Object && recvData.IsOK == true) {
//card.IDCard = parseInt(recvData.ReturnValue);
card.OnDelete();
} else {
card.OnDelete();
}
} catch (e) { }
}, function () {
card.OnDelete();
});
},
GetRelativePosToContainer: function (pos) {
var tempElem = this.container;
var relPos = { x: pos.x, y: pos.y };
@@ -342,18 +490,27 @@ Card.prototype = {
this.ExitEditionMode();
this.divTitle.innerHTML = this.FilterText(this.newTitle);
this.divBody.innerHTML = this.FilterText(this.newBody);
this.OnEdit();
if (this.IDCard > 0) {
this.OnEdit();
} else {
this.Title = this.newTitle;
this.Body = this.newBody;
this.OnCreate();
}
return false;
},
btnCancelEdit_Click: function (evt) {
evt.preventDefault();
this.ExitEditionMode();
this.Reset();
if (this.IDCard == 0) {
this.OnDelete();
}
return false;
},
btnDelete_Click: function (evt) {
evt.preventDefault();
if (confirm(this.cfg.Texts.ConfirmDelete)) {
if (this.IDCard==0 || confirm(this.cfg.Texts.ConfirmDelete)) {
this.OnDelete();
}
return false;
@@ -363,6 +520,8 @@ Card.prototype = {
function RunCardBoard(cfg) {
cfg.divBoard = GetElement(cfg.divBoard);
cfg.Toolbox = new Toolbox(cfg, cfg.divBoard);
cfg.Connected = false;
cfg.Cards = [];

54
Scrummer/Styles/05. Cards.css
View File

@@ -1,4 +1,55 @@
.divCard{
.divToolbox{
position: absolute;
background-color: rgb(127,127,255);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
min-width: 150px;
min-height: 50px;
padding: 5px;
border-radius: 2px;
}
.divToolbox .divTitle{
font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
display: block;
height: 20px;
line-height: 20px;
background-color: rgb(0,0,128);
color: rgb(128,128,255);
border-radius: 3px;
margin-bottom: 5px;
}
.divToolbox .divOverlay{
opacity: 0;
background-color: rgb(127,127,255);
position: absolute;
top: 0;
left: 0;
right: 0;
height:30px;
}
.divToolbox .btnToolbox{
margin-top: 5px;
margin-right: 5px;
padding: 2px;
border:solid 1px rgb(0,0,128);
border-radius: 3px;
color: rgb(0,0,128);
background-color: transparent;
font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
font-size: 12px;
}
.divToolbox .btnToolbox:hover{
color: rgb(127,127,255);
background-color: rgb(0,0,128);
}
.divCard{
position: absolute;
background-color: rgb(255,255,0);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
@@ -36,6 +87,7 @@
margin-right: 5px;
padding: 2px;
border:solid 1px black;
border-radius: 3px;
color: black;
background-color: transparent;
font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;