|
|
|
@ -17,8 +17,6 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
return BI.extend(BI.AdaptiveArrangement.superclass._defaultConfig.apply(this, arguments), { |
|
|
|
|
baseCls: "bi-adaptive-arrangement", |
|
|
|
|
resizable: true, |
|
|
|
|
isNeedReLayout: true, |
|
|
|
|
isNeedResizeContainer: true, |
|
|
|
|
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE, |
|
|
|
|
items: [] |
|
|
|
|
}); |
|
|
|
@ -30,73 +28,18 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
this.arrangement = BI.createWidget({ |
|
|
|
|
type: "bi.arrangement", |
|
|
|
|
element: this, |
|
|
|
|
isNeedReLayout: o.isNeedReLayout, |
|
|
|
|
layoutType: o.layoutType, |
|
|
|
|
items: o.items |
|
|
|
|
}); |
|
|
|
|
this.arrangement.on(BI.Arrangement.EVENT_SCROLL, function () { |
|
|
|
|
self.fireEvent(BI.AdaptiveArrangement.EVENT_SCROLL, arguments); |
|
|
|
|
}); |
|
|
|
|
if (o.isNeedResizeContainer) { |
|
|
|
|
|
|
|
|
|
var isResizing = false; |
|
|
|
|
var needEnd = false; |
|
|
|
|
var height; |
|
|
|
|
var interval; |
|
|
|
|
var startSize; |
|
|
|
|
var resize = function (e, ui) { |
|
|
|
|
if (isResizing) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
isResizing = true; |
|
|
|
|
height = ui.size.height; |
|
|
|
|
interval = setInterval(function () { |
|
|
|
|
height += 40; |
|
|
|
|
self.arrangement.setContainerSize({ |
|
|
|
|
width: ui.size.width, |
|
|
|
|
height: height |
|
|
|
|
}); |
|
|
|
|
self.arrangement.scrollTo({top: height}); |
|
|
|
|
}, 300); |
|
|
|
|
}; |
|
|
|
|
this.arrangement.container.element.resizable({ |
|
|
|
|
handles: "s", |
|
|
|
|
minWidth: 100, |
|
|
|
|
minHeight: 20, |
|
|
|
|
helper: "bi-resizer", |
|
|
|
|
autoHide: true, |
|
|
|
|
start: function (e, ui) { |
|
|
|
|
startSize = BI.clone(ui.size); |
|
|
|
|
}, |
|
|
|
|
resize: function (e, ui) { |
|
|
|
|
if (ui.size.height >= startSize.height - 10) { |
|
|
|
|
resize(e, ui); |
|
|
|
|
} else { |
|
|
|
|
interval && clearInterval(interval); |
|
|
|
|
needEnd = true; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
stop: function (e, ui) { |
|
|
|
|
var size = ui.size; |
|
|
|
|
if (isResizing && !needEnd) { |
|
|
|
|
size.height = height; |
|
|
|
|
} |
|
|
|
|
self.arrangement.setContainerSize(ui.size); |
|
|
|
|
needEnd = false; |
|
|
|
|
isResizing = false; |
|
|
|
|
startSize = null; |
|
|
|
|
interval && clearInterval(interval); |
|
|
|
|
self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this._setLayoutType(o.layoutType); |
|
|
|
|
} |
|
|
|
|
this.zIndex = 0; |
|
|
|
|
BI.each(o.items, function (i, item) { |
|
|
|
|
self._initResizable(item.el); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.element.click(function (e) { |
|
|
|
|
this.element.mousedown(function (e) { |
|
|
|
|
BI.each(self.getAllRegions(), function (i, region) { |
|
|
|
|
if (!region.el.element.__isMouseInBounds__(e)) { |
|
|
|
|
region.el.element.removeClass("selected"); |
|
|
|
@ -129,159 +72,65 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
item.element.mousedown(function () { |
|
|
|
|
self._setSelect(item) |
|
|
|
|
}); |
|
|
|
|
o.resizable && item.element.resizable({ |
|
|
|
|
handles: "e, s, se", |
|
|
|
|
minWidth: 20, |
|
|
|
|
minHeight: 20, |
|
|
|
|
autoHide: true, |
|
|
|
|
helper: "bi-resizer", |
|
|
|
|
start: function () { |
|
|
|
|
item.element.css("zIndex", ++self.zIndex); |
|
|
|
|
self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE); |
|
|
|
|
}, |
|
|
|
|
resize: function (e, ui) { |
|
|
|
|
// self._resize(item.attr("id"), ui.size);
|
|
|
|
|
self._resize(item.attr("id"), ui.size); |
|
|
|
|
self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE, item.attr("id"), ui.size); |
|
|
|
|
}, |
|
|
|
|
stop: function (e, ui) { |
|
|
|
|
self._stopResize(item.attr("id"), ui.size); |
|
|
|
|
self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE, item.attr("id"), ui.size); |
|
|
|
|
self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
_resize: function (name, size) { |
|
|
|
|
var self = this; |
|
|
|
|
switch (this.getLayoutType()) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
this.setRegionSize(name, size); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
_stopResize: function (name, size) { |
|
|
|
|
var self = this; |
|
|
|
|
switch (this.getLayoutType()) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
this.setRegionSize(name, { |
|
|
|
|
width: size.width, |
|
|
|
|
height: size.height |
|
|
|
|
}); |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
this.setRegionSize(name, size); |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
this.setRegionSize(name, size); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//检查宽高是否规范
|
|
|
|
|
_checkRegionSize: function (name, size) { |
|
|
|
|
var self = this; |
|
|
|
|
switch (this.getLayoutType()) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
var newSize = {}; |
|
|
|
|
var leftid, rightid, topid, bottomid; |
|
|
|
|
var region = this.getRegionByName(name); |
|
|
|
|
var rs = this.arrangement._getInDirectRelativeRegions(name, ["right"]).right; |
|
|
|
|
var bs = this.arrangement._getInDirectRelativeRegions(name, ["bottom"]).bottom; |
|
|
|
|
if (rs.left.length > 0) { |
|
|
|
|
topid = BI.first(rs.left).id; |
|
|
|
|
bottomid = BI.last(rs.left).id; |
|
|
|
|
} |
|
|
|
|
if (bs.top.length > 0) { |
|
|
|
|
leftid = BI.first(bs.top).id; |
|
|
|
|
rightid = BI.last(bs.top).id; |
|
|
|
|
} |
|
|
|
|
if (this.arrangement._isEqual(region.width, size.width)) { |
|
|
|
|
topid = name; |
|
|
|
|
bottomid = name; |
|
|
|
|
} |
|
|
|
|
if (this.arrangement._isEqual(region.height, size.height)) { |
|
|
|
|
leftid = name; |
|
|
|
|
rightid = name; |
|
|
|
|
} |
|
|
|
|
var tops = topid ? this.getDirectRelativeRegions(topid, ["top"]).top : []; |
|
|
|
|
var bottoms = bottomid ? this.getDirectRelativeRegions(bottomid, ["bottom"]).bottom : []; |
|
|
|
|
var lefts = leftid ? this.getDirectRelativeRegions(leftid, ["left"]).left : []; |
|
|
|
|
var rights = rightid ? this.getDirectRelativeRegions(rightid, ["right"]).right : []; |
|
|
|
|
if (region.width !== size.width) { |
|
|
|
|
if (rights.length === 0) {//最右边的组件不能调整宽度
|
|
|
|
|
newSize.width = region.width; |
|
|
|
|
} else { |
|
|
|
|
var finded = BI.find(tops.concat(bottoms), function (i, r) { |
|
|
|
|
r = self.getRegionByName(r.id); |
|
|
|
|
return Math.abs(size.width + region.left - (r.left + r.width)) <= 3; |
|
|
|
|
}); |
|
|
|
|
if (finded) { |
|
|
|
|
finded = this.getRegionByName(finded.id); |
|
|
|
|
newSize.width = finded.left + finded.width - region.left; |
|
|
|
|
} else { |
|
|
|
|
newSize.width = size.width; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
newSize.width = size.width; |
|
|
|
|
} |
|
|
|
|
if (region.height !== size.height) { |
|
|
|
|
if (bottoms.length === 0) { |
|
|
|
|
newSize.height = region.height; |
|
|
|
|
} else { |
|
|
|
|
var finded = BI.find(lefts.concat(rights), function (i, r) { |
|
|
|
|
r = self.getRegionByName(r.id); |
|
|
|
|
return Math.abs(size.height + region.top - (r.top + r.height)) <= 3; |
|
|
|
|
}); |
|
|
|
|
if (finded) { |
|
|
|
|
finded = this.getRegionByName(finded.id); |
|
|
|
|
newSize.height = finded.top + finded.height - region.top; |
|
|
|
|
} else { |
|
|
|
|
newSize.height = size.height; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
newSize.height = size.height; |
|
|
|
|
} |
|
|
|
|
return newSize; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
return size; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
return size; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// o.resizable && item.element.resizable({
|
|
|
|
|
// handles: "e, s, se",
|
|
|
|
|
// minWidth: 20,
|
|
|
|
|
// minHeight: 20,
|
|
|
|
|
// autoHide: true,
|
|
|
|
|
// helper: "bi-resizer",
|
|
|
|
|
// start: function () {
|
|
|
|
|
// item.element.css("zIndex", ++self.zIndex);
|
|
|
|
|
// self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE);
|
|
|
|
|
// },
|
|
|
|
|
// resize: function (e, ui) {
|
|
|
|
|
// // self._resize(item.attr("id"), ui.size);
|
|
|
|
|
// self._resize(item.attr("id"), e, ui.size, ui.position);
|
|
|
|
|
// },
|
|
|
|
|
// stop: function (e, ui) {
|
|
|
|
|
// self._stopResize(item.attr("id"), ui.size);
|
|
|
|
|
// self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE, item.attr("id"), ui.size);
|
|
|
|
|
// self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// _resize: function (name, e, size, position) {
|
|
|
|
|
// var self = this;
|
|
|
|
|
// this.scrollInterval(e, false, true, function (changedSize) {
|
|
|
|
|
// size.width += changedSize.offsetX;
|
|
|
|
|
// size.height += changedSize.offsetY;
|
|
|
|
|
// var containerWidth = self.arrangement.container.element.width();
|
|
|
|
|
// var containerHeight = self.arrangement.container.element.height();
|
|
|
|
|
// self.arrangement.container.element.width(containerWidth + changedSize.offsetX);
|
|
|
|
|
// self.arrangement.container.element.height(containerHeight + changedSize.offsetY);
|
|
|
|
|
// switch (self.getLayoutType()) {
|
|
|
|
|
// case BI.Arrangement.LAYOUT_TYPE.FREE:
|
|
|
|
|
// break;
|
|
|
|
|
// case BI.Arrangement.LAYOUT_TYPE.GRID:
|
|
|
|
|
// self.setRegionSize(name, size);
|
|
|
|
|
// break;
|
|
|
|
|
// }
|
|
|
|
|
// self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE, name, size);
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// _stopResize: function (name, size) {
|
|
|
|
|
// var self = this;
|
|
|
|
|
// this.scrollEnd();
|
|
|
|
|
// switch (this.getLayoutType()) {
|
|
|
|
|
// case BI.Arrangement.LAYOUT_TYPE.FREE:
|
|
|
|
|
// this.setRegionSize(name, size);
|
|
|
|
|
// break;
|
|
|
|
|
// case BI.Arrangement.LAYOUT_TYPE.GRID:
|
|
|
|
|
// this.setRegionSize(name, size);
|
|
|
|
|
// break;
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
_getScrollOffset: function () { |
|
|
|
|
return this.arrangement._getScrollOffset(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
_setLayoutType: function (type) { |
|
|
|
|
try { |
|
|
|
|
//BI.nextTick(function () {
|
|
|
|
|
switch (type) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
$(">.ui-resizable-s", this.arrangement.container.element).css("zIndex", ""); |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
$(">.ui-resizable-s", this.arrangement.container.element).css("zIndex", "-1"); |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
$(">.ui-resizable-s", this.arrangement.container.element).css("zIndex", "-1"); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
this.arrangement.container.element.resizable("option", "disabled", type === BI.Arrangement.LAYOUT_TYPE.FREE); |
|
|
|
|
//});
|
|
|
|
|
} catch (e) { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getClientWidth: function () { |
|
|
|
|
return this.arrangement.getClientWidth(); |
|
|
|
|
}, |
|
|
|
@ -290,98 +139,14 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
return this.arrangement.getClientHeight(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getDirectRelativeRegions: function (name, direction) { |
|
|
|
|
return this.arrangement.getDirectRelativeRegions(name, direction); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
addRegion: function (region, position) { |
|
|
|
|
this._initResizable(region.el); |
|
|
|
|
this._setSelect(region.el); |
|
|
|
|
var self = this, flag; |
|
|
|
|
var old = this.arrangement.getAllRegions(); |
|
|
|
|
if (BI.isNotNull(this.position)) { |
|
|
|
|
switch (this.getLayoutType()) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
var type = this.position.type; |
|
|
|
|
var current = this.position.region; |
|
|
|
|
switch (type) { |
|
|
|
|
case "top-gap": |
|
|
|
|
var t = this.arrangement._getEquivalentRelativeRegions(current.id, ["top"])[0]; |
|
|
|
|
current = this.getRegionByName(t.id); |
|
|
|
|
break; |
|
|
|
|
case "bottom-gap": |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
var id = BI.UUID(); |
|
|
|
|
var insert = this.position.insert; |
|
|
|
|
if (insert.height > 0) { |
|
|
|
|
var clone = this.arrangement._cloneRegion(); |
|
|
|
|
//找到最下面的组件
|
|
|
|
|
var occupied = this.arrangement._getRegionOccupied(); |
|
|
|
|
var bottomRegions = []; |
|
|
|
|
BI.each(clone, function (i, region) { |
|
|
|
|
if (self.arrangement._isEqual(region.top + region.height, occupied.top + occupied.height)) { |
|
|
|
|
bottomRegions.push(region); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
var bs = this.arrangement._getInDirectRelativeRegions(current.id, ["bottom"]).bottom; |
|
|
|
|
var seen = [current.id]; |
|
|
|
|
var bottoms = bs.bottom; |
|
|
|
|
var occ = this.arrangement._getRegionOccupied(bottoms); |
|
|
|
|
clone[id] = BI.extend({}, region, { |
|
|
|
|
left: occ.left, |
|
|
|
|
width: occ.width, |
|
|
|
|
top: current.top + current.height, |
|
|
|
|
height: insert.height |
|
|
|
|
}); |
|
|
|
|
while (bottoms.length > 0) { |
|
|
|
|
BI.each(bottoms, function (i, bottom) { |
|
|
|
|
seen.push(bottom.id); |
|
|
|
|
var r = self.getRegionByName(bottom.id); |
|
|
|
|
BI.extend(clone[bottom.id], { |
|
|
|
|
top: r.top + insert.height |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
var t = []; |
|
|
|
|
BI.each(bottoms, function (i, bottom) { |
|
|
|
|
var n = self.arrangement._getInDirectRelativeRegions(bottom.id, ["bottom"]).bottom; |
|
|
|
|
BI.each(n.top, function (i, region) { |
|
|
|
|
if (!seen.contains(region.id)) { |
|
|
|
|
seen.push(region.id); |
|
|
|
|
var r = self.getRegionByName(region.id); |
|
|
|
|
BI.extend(clone[region.id], { |
|
|
|
|
height: r.height + insert.height |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
t = t.concat(n.bottom); |
|
|
|
|
}); |
|
|
|
|
t = BI.uniq(t, function (i, region) { |
|
|
|
|
return region.id; |
|
|
|
|
}); |
|
|
|
|
bottoms = t; |
|
|
|
|
} |
|
|
|
|
BI.each(bottomRegions, function (i, region) { |
|
|
|
|
if (!seen.contains(region.id)) { |
|
|
|
|
region.height = region.height + insert.height; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.arrangement.populate(BI.toArray(clone)); |
|
|
|
|
this.arrangement.resize(); |
|
|
|
|
flag = true; |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
this.position = null; |
|
|
|
|
} else { |
|
|
|
|
if (flag = this.arrangement.addRegion(region, position)) { |
|
|
|
|
this._old = old; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return flag; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
@ -394,13 +159,12 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
this._old = this.getAllRegions(); |
|
|
|
|
this.relayout(); |
|
|
|
|
} |
|
|
|
|
return true; |
|
|
|
|
return flag; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
setRegionSize: function (name, size) { |
|
|
|
|
var flag; |
|
|
|
|
var old = this.getAllRegions(); |
|
|
|
|
size = this._checkRegionSize(name, size); |
|
|
|
|
if (flag = this.arrangement.setRegionSize(name, size)) { |
|
|
|
|
this._old = old; |
|
|
|
|
} |
|
|
|
@ -409,55 +173,114 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
|
|
|
|
|
setPosition: function (position, size) { |
|
|
|
|
var self = this; |
|
|
|
|
var at = this.arrangement.setPosition(position, size); |
|
|
|
|
this.position = null; |
|
|
|
|
if (!at) { |
|
|
|
|
switch (this.getLayoutType()) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
if (position.left < 0 || position.top < 0) { |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
var offset = this.arrangement._getScrollOffset(); |
|
|
|
|
position = { |
|
|
|
|
left: position.left + offset.left, |
|
|
|
|
top: position.top + offset.top |
|
|
|
|
}; |
|
|
|
|
BI.some(this.getAllRegions(), function (id, region) { |
|
|
|
|
if (self.arrangement._isPositionInBounds(position, region)) { |
|
|
|
|
var at = self.arrangement._positionAt(position, region); |
|
|
|
|
if (at.type === "top-gap" || at.type === "bottom-gap") { |
|
|
|
|
self.arrangement._setArrangeSize({ |
|
|
|
|
top: region.top - 8 + (at.type === "bottom-gap" ? region.height : 0), |
|
|
|
|
left: region.left, |
|
|
|
|
width: region.width, |
|
|
|
|
height: 16 |
|
|
|
|
}); |
|
|
|
|
self.position = { |
|
|
|
|
insert: { |
|
|
|
|
height: (size || {}).height |
|
|
|
|
return this.arrangement.setPosition(position, size); |
|
|
|
|
}, |
|
|
|
|
type: at.type, |
|
|
|
|
region: region |
|
|
|
|
|
|
|
|
|
setRegionPosition: function (name, position) { |
|
|
|
|
var region = this.getRegionByName(name); |
|
|
|
|
return this.arrangement.setRegionPosition(name, position); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
setDropPosition: function (position) { |
|
|
|
|
return this.arrangement.setDropPosition(position); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
scrollInterval: function (e, isBorderScroll, isOverflowScroll, cb) { |
|
|
|
|
var self = this; |
|
|
|
|
var map = { |
|
|
|
|
top: [-1, 0], |
|
|
|
|
bottom: [1, 0], |
|
|
|
|
left: [0, -1], |
|
|
|
|
right: [0, 1] |
|
|
|
|
}; |
|
|
|
|
self.arrangement._start(); |
|
|
|
|
var clientSize = this.element.bounds(); |
|
|
|
|
|
|
|
|
|
function scrollTo(direction, callback) { |
|
|
|
|
if (direction === "") { |
|
|
|
|
self.lastActiveRegion = ""; |
|
|
|
|
if (self._scrollInterval) { |
|
|
|
|
clearInterval(self._scrollInterval); |
|
|
|
|
self._scrollInterval = null; |
|
|
|
|
} |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
return true; |
|
|
|
|
if (self.lastActiveRegion !== direction) { |
|
|
|
|
self.lastActiveRegion = direction; |
|
|
|
|
if (self._scrollInterval) { |
|
|
|
|
clearInterval(self._scrollInterval); |
|
|
|
|
self._scrollInterval = null; |
|
|
|
|
} |
|
|
|
|
self._scrollInterval = setInterval(function () { |
|
|
|
|
var offset = self._getScrollOffset(); |
|
|
|
|
var t = offset.top + map[direction][0] * 40; |
|
|
|
|
var l = offset.left + map[direction][1] * 40; |
|
|
|
|
if (t < 0 || l < 0) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
callback({ |
|
|
|
|
offsetX: map[direction][1] * 40, |
|
|
|
|
offsetY: map[direction][0] * 40 |
|
|
|
|
}); |
|
|
|
|
self.scrollTo({ |
|
|
|
|
top: t, |
|
|
|
|
left: l |
|
|
|
|
}); |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
break; |
|
|
|
|
}, 300); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
cb({ |
|
|
|
|
offsetX: 0, |
|
|
|
|
offsetY: 0 |
|
|
|
|
}); |
|
|
|
|
var offset = this.element.offset(); |
|
|
|
|
var p = { |
|
|
|
|
left: e.pageX - offset.left, |
|
|
|
|
top: e.pageY - offset.top |
|
|
|
|
}; |
|
|
|
|
//向上滚
|
|
|
|
|
if (isBorderScroll && p.top >= 0 && p.top <= 30) { |
|
|
|
|
scrollTo("top", cb) |
|
|
|
|
} |
|
|
|
|
//向下滚
|
|
|
|
|
else if (isBorderScroll && p.top >= clientSize.height - 30 && p.top <= clientSize.height) { |
|
|
|
|
scrollTo("bottom", cb) |
|
|
|
|
} |
|
|
|
|
//向左滚
|
|
|
|
|
else if (isBorderScroll && p.left >= 0 && p.left <= 30) { |
|
|
|
|
scrollTo("left", cb) |
|
|
|
|
} |
|
|
|
|
//向右滚
|
|
|
|
|
else if (isBorderScroll && p.left >= clientSize.width - 30 && p.left <= clientSize.width) { |
|
|
|
|
scrollTo("right", cb) |
|
|
|
|
} else { |
|
|
|
|
if (isOverflowScroll === true) { |
|
|
|
|
if (p.top < 0) { |
|
|
|
|
scrollTo("top", cb); |
|
|
|
|
} |
|
|
|
|
else if (p.top > clientSize.height) { |
|
|
|
|
scrollTo("bottom", cb); |
|
|
|
|
} |
|
|
|
|
else if (p.left < 0) { |
|
|
|
|
scrollTo("left", cb); |
|
|
|
|
} |
|
|
|
|
else if (p.left > clientSize.width) { |
|
|
|
|
scrollTo("right", cb); |
|
|
|
|
} else { |
|
|
|
|
scrollTo("", cb); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
scrollTo("", cb); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return this.position || at; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
setRegionPosition: function (name, position) { |
|
|
|
|
var region = this.getRegionByName(name); |
|
|
|
|
region.el.element.css("zIndex", ++this.zIndex); |
|
|
|
|
return this.arrangement.setRegionPosition(name, position); |
|
|
|
|
scrollEnd: function () { |
|
|
|
|
this.lastActiveRegion = ""; |
|
|
|
|
if (this._scrollInterval) { |
|
|
|
|
clearInterval(this._scrollInterval); |
|
|
|
|
this._scrollInterval = null; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
scrollTo: function (scroll) { |
|
|
|
@ -478,7 +301,6 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
|
|
|
|
|
setLayoutType: function (type) { |
|
|
|
|
var self = this; |
|
|
|
|
this._setLayoutType(type); |
|
|
|
|
this.arrangement.setLayoutType(type); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
@ -514,17 +336,6 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
|
|
|
|
|
self._initResizable(item.el); |
|
|
|
|
}); |
|
|
|
|
this.arrangement.populate(items); |
|
|
|
|
switch (this.getLayoutType()) { |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE: |
|
|
|
|
BI.nextTick(function () { |
|
|
|
|
self.arrangement.resize(); |
|
|
|
|
}); |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.FREE: |
|
|
|
|
break; |
|
|
|
|
case BI.Arrangement.LAYOUT_TYPE.GRID: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE"; |
|
|
|
|