Your IP : 18.117.174.43
/**
* Dashboard block moving
* @param {object} window global object
* @param {function} $ jQuery library
* @param {object} EventMgr EventMgr library
* @param {object} App Application
*/
App.DashboardDragAndDrop = function(window, $, EventMgr, App) {
'use strict';
var dashboardTabSel = '.b-form-page_view_dblock .i-form-page__title',
dragObj = {},
bPositions = [],
bCount = {},
pos = null,
dragPos = null,
after = false,
lastMoveTime = 0;
function init() {
EventMgr.on($content(), dashboardTabSel, 'mousedown', drag);
EventMgr.on($content(), dashboardTabSel, 'ontouchstart', drag);
}
function topBorder() {
return $('#content').offset().top;
}
function $content() {
return $('#content');
}
function $topCont() {
return $('#dash-top');
}
function $leftCont() {
return $('#dash-left');
}
function $rightCont() {
return $('#dash-right');
}
function getDragPos(name) {
var len = bPositions.length;
for (var i = 0; i < len; i++) {
if (bPositions[i].name === name) {
return i;
}
}
}
function drag(e) {
e = e || window.event;
//get positions all blocks
getPositions();
if (dragObj.shadow !== undefined) { dragObj.shadow.remove();}
var self = $(this).parent();
dragObj.obj = self.parent();
document.onmouseup = drop;
if (document.captureEvents) { document.captureEvents(Event.MOUSEUP); }
document.onmousemove = move;
if (document.captureEvents) { document.captureEvents(Event.MOUSEMOVE); }
document.ontouchend = drop;
document.ontouchmove = move;
if (e.touches) {
dragObj.y = e.touches[0].pageY;
dragObj.x = e.touches[0].pageX;
} else {
dragObj.y = e.clientY;
dragObj.x = e.clientX;
}
var width = dragObj.obj[0].offsetWidth,
height = dragObj.obj[0].offsetHeight,
widthHeader = self.find('.i-form-page__title').width(),
heightHeader = this.offsetHeight,
heightBody = height - heightHeader,
$shadow = $('<div class="dash-block-bg" style="width: ' +
width + 'px; height: ' + height +
'px;"><div class="dash-block-bg-header" style="width: ' +
widthHeader + 'px; height: ' + heightHeader +
'px;"></div><div class="dash-block-bg-body" style=" height: ' +
heightBody + 'px;"></div></div>');
if (dragObj.obj.hasClass('b-form-page_st_collapsed')) {
$shadow.addClass('b-form-page_st_collapsed');
}
dragObj.obj.after($shadow);
dragObj.shadow = $shadow;
dragObj.name = dragObj.obj[0].getAttribute('data-tabid');
dragPos = getDragPos(dragObj.name);
var top = this.parentNode.parentNode.offsetTop,
left = this.parentNode.parentNode.offsetLeft;
dragObj.obj[0].style.left = left + 'px';
dragObj.obj[0].style.top = top + 'px';
dragObj.obj[0].style.width = width + 'px';
dragObj.obj[0].style.height = height + 'px';
dragObj.obj[0].style.position = 'absolute';
dragObj.obj.addClass('movingBlock');
if (e.preventDefault) {e.preventDefault();}
blockEvent(e);
}
function move(e) {
if (lastMoveTime - 0 === 0) {
lastMoveTime = new Date().getTime();
} else {
var currentTime = new Date().getTime();
if (currentTime - lastMoveTime < 50) {
return;
} else {
lastMoveTime = currentTime;
}
}
e = e || window.event;
var x = null,
y = null;
if (e.touches !== undefined) {
y = e.touches[0].pageY;
x = e.touches[0].pageX;
} else {
y = e.clientY;
x = e.clientX;
}
//moving block
var curX = x - dragObj.x,
curY = y - dragObj.y;
if (Math.abs(curX) < 10 && Math.abs(curY) < 10) {
return;
}
pos = null;
dragObj.x = x;
dragObj.y = y;
var top = parseInt(dragObj.obj[0].style.top, 10),
left = parseInt(dragObj.obj[0].style.left, 10);
dragObj.obj[0].style.left = left + curX + 'px';
dragObj.obj[0].style.top = top + curY + 'px';
var len = bPositions.length;
//moving shadow
for (var i = 0; i < len; i++) {
if (bPositions[i].x1 <= x && bPositions[i].x2 >= x &&
bPositions[i].y1 <= y && bPositions[i].y2 >= y) {
//insert before
// dragObj.shadow[0].style.width = bPositions[i].width;
// bPositions[i].self.before(dragObj.shadow);
pos = i;
after = false;
break;
} else if (bPositions[i].x1 <= x && bPositions[i].x2 >= x &&
bPositions[i].y1 <= y && bPositions[i].y2 + 37 >= y) {
//insert after
//dragObj.shadow[0].style.width = bPositions[i].width;
//bPositions[i].self.after(dragObj.shadow);
pos = i;
after = true;
break;
} else if (topBorder() >= y && bCount.top === 0) {
//insert into TOP
pos = 'TOP';
} else if ($rightCont().offset().left <= x &&
$rightCont().offset().top <= y) {
//insert into RIGHT
pos = 'RIGHT';
} else if ($rightCont().offset().left >= x &&
$rightCont().offset().top <= y) {
//insert into LEFT
pos = 'LEFT';
}
}
if (pos !== null) {
var content = App.Dom.byId('content');
if (content === null) { return; }
if (pos === 'TOP') {
$topCont().append(dragObj.shadow);
dragObj.shadow[0].style.width = content.offsetWidth - 36 + 'px';
} else if (pos === 'LEFT') {
$leftCont().append(dragObj.shadow);
dragObj.shadow[0].style.width = ((content.offsetWidth - 36) / 2) + 'px';
} else if (pos === 'RIGHT') {
$rightCont().append(dragObj.shadow);
dragObj.shadow[0].style.width = ((content.offsetWidth - 36) / 2) + 'px';
} else {
dragObj.shadow[0].style.width = bPositions[pos].width + 'px';
if (after) {
bPositions[pos].self.after(dragObj.shadow);
} else {
bPositions[pos].self.before(dragObj.shadow);
}
}
}
if (e.preventDefault) { e.preventDefault(); }
//for remove collapsed block handler
App.Global.HeaderMoving = true;
blockEvent(e);
}
function drop(e) {
var rPos = false;
e = e || window.event;
document.onmousemove = null;
document.onmouseup = null;
document.ontouchmove = null;
document.ontouchend = null;
dragObj.obj.css('left', '')
.css('top', '')
.css('position', '')
.width('')
.height('')
.removeClass('movingBlock');
if (pos !== null) {
if (pos === 'TOP') {
$topCont().append(dragObj.obj);
dragObj.order = 9;
} else if (pos === 'LEFT') {
$leftCont().append(dragObj.obj);
dragObj.order = 9;
} else if (pos === 'RIGHT') {
$rightCont().append(dragObj.obj);
dragObj.order = 9;
} else if (dragObj.name !== bPositions[pos].name) {
rPos = true;
if (after) {
bPositions[pos].self.after(dragObj.obj);
dragObj.order = bPositions[pos].order;
} else {
bPositions[pos].self.before(dragObj.obj);
dragObj.order = bPositions[pos].order;
}
}
//don't save if after or before self
if (rPos) {
if (pos !== dragPos) {
if (after) {
//check for next
if (bPositions[dragPos + 1] !== undefined &&
bPositions[dragPos].pos === bPositions[pos].pos &&
bPositions[pos].order === (bPositions[dragPos].order + 1)) {
} else {
dragObj.order += 1;
}
}
saveBlock(dragObj);
}
} else {
saveBlock(dragObj);
}
setTimeout(function() {
EventMgr.trigger('updateScroll', {});
}, 100);
}
if (e.preventDefault) { e.preventDefault(); }
dragObj.shadow.remove();
pos = null;
//reload block after moved
if (dragObj.obj.children('h3').attr('data-block-type') === 'report') {
dragObj.obj.find('.dashblock-reload').trigger('click');
}
}
//send position to server
function saveBlock(dragObj) {
var position = dragObj.obj.parents('.b-dashboard_cell').attr('data-pos'),
order = dragObj.order,
display = 'max',
block = dragObj.name;
if (dragObj.shadow.hasClass('collapsed')) { display = 'min';}
var param = {
func: 'dashboard.save', order: order,
block: block, display: display, position: position },
url = pageInfo.url;
EventMgr.trigger('ajaxRequest', {
url: url, param: param, trfunc: 'DoNothing', queue: 'noqueue' });
}
//get position each block in dashboard
function getPositions() {
bPositions = [];
var leftCount = 0,
rightCount = 0,
topCount = 0,
self,
offset,
posObj;
$('#dash-top .b-form-page').each(function() {
self = $(this);
offset = self.offset();
posObj = {
x1: offset.left,
x2: offset.left + self.width(),
y1: offset.top,
y2: offset.top + self.height(),
width: self.width(),
self: self,
name: self.attr('data-tabid'),
order: topCount++,
pos: 'TOP'
};
bPositions.push(posObj);
});
$('#dash-left .b-form-page').each(function() {
self = $(this);
offset = self.offset();
posObj = {
x1: offset.left,
x2: offset.left + self.width(),
y1: offset.top,
y2: offset.top + self.height(),
width: self.width(),
self: self,
name: self.attr('data-tabid'),
order: leftCount++,
pos: 'LEFT'
};
bPositions.push(posObj);
});
$('#dash-right .b-form-page').each(function() {
self = $(this);
offset = self.offset();
posObj = {
x1: offset.left,
x2: offset.left + self.width(),
y1: offset.top,
y2: offset.top + self.height(),
width: self.width(),
self: self,
name: self.attr('data-tabid'),
order: rightCount++,
pos: 'RIGHT'
};
bPositions.push(posObj);
});
self = null;
offset = null;
posObj = null;
bCount = {
top: topCount,
left: leftCount,
right: rightCount
};
}
return {
init: init,
bPositions: bPositions
};
}(window, $, EventMgr, App);