forked from fanruan/fineui
Browse Source
* commit 'b33744e22586c9e6d51365cffa45f6b59ab7dad8': update 从fineui中移除arrangement BI.point responsivetablees6
guy
7 years ago
22 changed files with 155 additions and 8558 deletions
@ -1,107 +0,0 @@
|
||||
Demo.AdaptiveArrangement = BI.inherit(BI.Widget, { |
||||
|
||||
_createItem: function () { |
||||
var self = this; |
||||
var id = BI.UUID(); |
||||
var item = BI.createWidget({ |
||||
type: "bi.text_button", |
||||
id: id, |
||||
cls: "layout-bg" + BI.random(1, 8), |
||||
value: "点我我就在最上面了", |
||||
handler: function () { |
||||
// self.arrangement.deleteRegion(id);
|
||||
} |
||||
}); |
||||
return item; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
this.arrangement = BI.createWidget({ |
||||
type: "bi.adaptive_arrangement", |
||||
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE, |
||||
cls: "bi-border", |
||||
width: 800, |
||||
height: 400, |
||||
items: [] |
||||
}); |
||||
var drag = BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "bi-border", |
||||
width: 70, |
||||
height: 25, |
||||
text: "drag me" |
||||
}); |
||||
|
||||
drag.element.draggable({ |
||||
revert: true, |
||||
cursorAt: {left: 0, top: 0}, |
||||
drag: function (e, ui) { |
||||
self.arrangement.setPosition({ |
||||
left: ui.position.left, |
||||
top: ui.position.top |
||||
}, { |
||||
width: 300, |
||||
height: 200 |
||||
}); |
||||
}, |
||||
stop: function (e, ui) { |
||||
self.arrangement.addRegion({ |
||||
el: self._createItem() |
||||
}); |
||||
}, |
||||
helper: function (e) { |
||||
var helper = self.arrangement.getHelper(); |
||||
return helper.element; |
||||
} |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: drag, |
||||
left: 30, |
||||
top: 450 |
||||
}, { |
||||
el: this.arrangement, |
||||
left: 30, |
||||
top: 30 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "getAllRegions", |
||||
height: 25, |
||||
handler: function () { |
||||
var items = []; |
||||
BI.each(self.arrangement.getAllRegions(), function (i, region) { |
||||
items.push({ |
||||
id: region.id, |
||||
left: region.left, |
||||
top: region.top, |
||||
width: region.width, |
||||
height: region.height |
||||
}); |
||||
}); |
||||
BI.Msg.toast(JSON.stringify(items)); |
||||
} |
||||
}, |
||||
left: 230, |
||||
top: 450 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "relayout", |
||||
height: 25, |
||||
handler: function () { |
||||
self.arrangement.relayout(); |
||||
} |
||||
}, |
||||
left: 330, |
||||
top: 450 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("demo.adaptive_arrangement", Demo.AdaptiveArrangement); |
@ -1,100 +0,0 @@
|
||||
Demo.Arrangement = BI.inherit(BI.Widget, { |
||||
|
||||
beforeCreate: function () { |
||||
this.index = 0; |
||||
}, |
||||
|
||||
_createItem: function () { |
||||
var self = this; |
||||
var item = BI.createWidget({ |
||||
type: "bi.text_button", |
||||
id: this.index, |
||||
text: "点我删掉", |
||||
cls: "layout-bg" + BI.random(1, 8), |
||||
handler: function () { |
||||
self.arrangement.deleteRegion(this.attr("id")); |
||||
} |
||||
}); |
||||
this.index++; |
||||
return item; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
this.arrangement = BI.createWidget({ |
||||
type: "bi.arrangement", |
||||
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID, |
||||
cls: "bi-border", |
||||
width: 800, |
||||
height: 400, |
||||
items: [] |
||||
}); |
||||
var drag = BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "bi-border", |
||||
width: 70, |
||||
height: 25, |
||||
text: "drag me" |
||||
}); |
||||
|
||||
drag.element.draggable({ |
||||
revert: true, |
||||
cursorAt: {left: 0, top: 0}, |
||||
drag: function (e, ui) { |
||||
self.arrangement.setPosition({ |
||||
left: ui.position.left, |
||||
top: ui.position.top |
||||
}, { |
||||
width: 300, |
||||
height: 200 |
||||
}); |
||||
}, |
||||
stop: function (e, ui) { |
||||
self.arrangement.addRegion({ |
||||
el: self._createItem() |
||||
}); |
||||
}, |
||||
helper: function (e) { |
||||
var helper = self.arrangement.getHelper(); |
||||
return helper.element; |
||||
} |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: drag, |
||||
left: 30, |
||||
top: 450 |
||||
}, { |
||||
el: this.arrangement, |
||||
left: 30, |
||||
top: 30 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "getAllRegions", |
||||
height: 25, |
||||
handler: function () { |
||||
var items = []; |
||||
BI.each(self.arrangement.getAllRegions(), function (i, region) { |
||||
items.push({ |
||||
id: region.id, |
||||
left: region.left, |
||||
top: region.top, |
||||
width: region.width, |
||||
height: region.height |
||||
}); |
||||
}); |
||||
BI.Msg.toast(JSON.stringify(items)); |
||||
} |
||||
}, |
||||
left: 230, |
||||
top: 450 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("demo.arrangement", Demo.Arrangement); |
@ -1,108 +0,0 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.RelationView = BI.inherit(BI.Widget, { |
||||
_createItem: function () { |
||||
var self = this; |
||||
var id = BI.UUID(); |
||||
var item = BI.createWidget({ |
||||
type: "bi.text_button", |
||||
id: id, |
||||
text: "对齐的时候是不是有根线?", |
||||
cls: "layout-bg" + BI.random(1, 8), |
||||
handler: function () { |
||||
self.arrangement.deleteRegion(id); |
||||
} |
||||
}); |
||||
return item; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
this.arrangement = BI.createWidget({ |
||||
type: "bi.interactive_arrangement", |
||||
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE, |
||||
cls: "bi-border", |
||||
width: 800, |
||||
height: 400, |
||||
items: [] |
||||
}); |
||||
var drag = BI.createWidget({ |
||||
type: "bi.label", |
||||
cls: "bi-border", |
||||
width: 70, |
||||
height: 25, |
||||
text: "drag me" |
||||
}); |
||||
|
||||
drag.element.draggable({ |
||||
revert: true, |
||||
cursorAt: {left: 0, top: 0}, |
||||
drag: function (e, ui) { |
||||
self.arrangement.setPosition({ |
||||
left: ui.position.left, |
||||
top: ui.position.top |
||||
}, { |
||||
width: 300, |
||||
height: 200 |
||||
}); |
||||
}, |
||||
stop: function (e, ui) { |
||||
self.arrangement.addRegion({ |
||||
el: self._createItem() |
||||
}); |
||||
}, |
||||
helper: function (e) { |
||||
var helper = self.arrangement.getHelper(); |
||||
return helper.element; |
||||
} |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: drag, |
||||
left: 30, |
||||
top: 450 |
||||
}, { |
||||
el: this.arrangement, |
||||
left: 30, |
||||
top: 30 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "getAllRegions", |
||||
height: 25, |
||||
handler: function () { |
||||
var items = []; |
||||
BI.each(self.arrangement.getAllRegions(), function (i, region) { |
||||
items.push({ |
||||
id: region.id, |
||||
left: region.left, |
||||
top: region.top, |
||||
width: region.width, |
||||
height: region.height |
||||
}); |
||||
}); |
||||
BI.Msg.toast(JSON.stringify(items)); |
||||
} |
||||
}, |
||||
left: 230, |
||||
top: 450 |
||||
}, { |
||||
el: { |
||||
type: "bi.button", |
||||
text: "relayout", |
||||
height: 25, |
||||
handler: function () { |
||||
self.arrangement.relayout(); |
||||
} |
||||
}, |
||||
left: 330, |
||||
top: 450 |
||||
}] |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("demo.interactive_arrangement", Demo.RelationView); |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +0,0 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-arrangement-block { |
||||
} |
@ -1,5 +0,0 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-arrangement-droppable{ |
||||
z-index: @zIndex-layer; |
||||
} |
@ -1,28 +0,0 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-arrangement { |
||||
& .arrangement-helper { |
||||
background: @color-bi-background-highlight; |
||||
z-index: @zIndex-tip; |
||||
} |
||||
& .arrangement-block { |
||||
z-index: @zIndex-tip; |
||||
} |
||||
& .arrangement-drop-container { |
||||
z-index: @zIndex-tip; |
||||
& .arrangement-drop-region { |
||||
overflow: hidden; |
||||
} |
||||
& .drop-devider{ |
||||
z-index: @zIndex-tip + 1; |
||||
background: @color-bi-background-highlight; |
||||
} |
||||
& .top-left, & .top-right, & .bottom-left, & .bottom-right, |
||||
& .top-left-second, & .top-right-second, & .bottom-left-second, & .bottom-right-second, |
||||
& .top-center, & .bottom-center, & .left-center, & .right-center, |
||||
& .top-center-second, & .bottom-center-second, & .left-center-second, & .right-center-second { |
||||
z-index: @zIndex-tip + 1; |
||||
background: @color-bi-background-highlight; |
||||
} |
||||
} |
||||
} |
@ -1,299 +0,0 @@
|
||||
/** |
||||
* 自适应布局 |
||||
* |
||||
* 1、resize |
||||
* 2、吸附 |
||||
* 3、当前组件在最上方 |
||||
* 4、可以撤销 |
||||
* 5、上下之间插入组件 |
||||
* |
||||
* Created by GUY on 2016/2/23. |
||||
* @class BI.AdaptiveArrangement |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.AdaptiveArrangement = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.AdaptiveArrangement.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-adaptive-arrangement", |
||||
resizable: true, |
||||
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE, |
||||
items: [] |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.AdaptiveArrangement.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.arrangement = BI.createWidget({ |
||||
type: "bi.arrangement", |
||||
element: this, |
||||
layoutType: o.layoutType, |
||||
items: o.items |
||||
}); |
||||
this.arrangement.on(BI.Arrangement.EVENT_SCROLL, function () { |
||||
self.fireEvent(BI.AdaptiveArrangement.EVENT_SCROLL, arguments); |
||||
}); |
||||
this.zIndex = 0; |
||||
BI.each(o.items, function (i, item) { |
||||
self._initResizable(item.el); |
||||
}); |
||||
|
||||
$(document).mousedown(function (e) { |
||||
BI.each(self.getAllRegions(), function (i, region) { |
||||
if (region.el.element.find(e.target).length === 0) { |
||||
region.el.element.removeClass("selected"); |
||||
} |
||||
}); |
||||
}); |
||||
BI.ResizeDetector.addResizeListener(this, function () { |
||||
self.arrangement.resize(); |
||||
self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE); |
||||
}); |
||||
}, |
||||
|
||||
_isEqual: function () { |
||||
return this.arrangement._isEqual.apply(this.arrangement, arguments); |
||||
}, |
||||
|
||||
_setSelect: function (item) { |
||||
if (!item.element.hasClass("selected")) { |
||||
item.element.css("zIndex", ++this.zIndex); |
||||
BI.each(this.getAllRegions(), function (i, region) { |
||||
region.el.element.removeClass("selected"); |
||||
}); |
||||
item.element.addClass("selected"); |
||||
} |
||||
}, |
||||
|
||||
_initResizable: function (item) { |
||||
var self = this, o = this.options; |
||||
item.element.css("zIndex", ++this.zIndex); |
||||
item.element.mousedown(function () { |
||||
self._setSelect(item); |
||||
}); |
||||
}, |
||||
|
||||
_getScrollOffset: function () { |
||||
return this.arrangement._getScrollOffset(); |
||||
}, |
||||
|
||||
getClientWidth: function () { |
||||
return this.arrangement.getClientWidth(); |
||||
}, |
||||
|
||||
getClientHeight: function () { |
||||
return this.arrangement.getClientHeight(); |
||||
}, |
||||
|
||||
addRegion: function (region, position) { |
||||
this._initResizable(region.el); |
||||
this._setSelect(region.el); |
||||
var self = this, flag; |
||||
var old = this.arrangement.getAllRegions(); |
||||
if (flag = this.arrangement.addRegion(region, position)) { |
||||
this._old = old; |
||||
} |
||||
return flag; |
||||
}, |
||||
|
||||
deleteRegion: function (name) { |
||||
var flag; |
||||
var old = this.getAllRegions(); |
||||
if (flag = this.arrangement.deleteRegion(name)) { |
||||
this._old = old; |
||||
} else { |
||||
this._old = this.getAllRegions(); |
||||
this.relayout(); |
||||
} |
||||
return flag; |
||||
}, |
||||
|
||||
setRegionSize: function (name, size) { |
||||
var flag; |
||||
var old = this.getAllRegions(); |
||||
if (flag = this.arrangement.setRegionSize(name, size)) { |
||||
this._old = old; |
||||
} |
||||
return flag; |
||||
}, |
||||
|
||||
setPosition: function (position, size) { |
||||
var self = this; |
||||
return this.arrangement.setPosition(position, size); |
||||
}, |
||||
|
||||
setRegionPosition: function (name, position) { |
||||
var region = this.getRegionByName(name); |
||||
return this.arrangement.setRegionPosition(name, position); |
||||
}, |
||||
|
||||
setDropPosition: function (position, size) { |
||||
return this.arrangement.setDropPosition(position, size); |
||||
}, |
||||
|
||||
scrollInterval: function (e, isBorderScroll, isOverflowScroll, cb) { |
||||
// var self = this;
|
||||
// var map = {
|
||||
// top: [-1, 0],
|
||||
// bottom: [1, 0],
|
||||
// left: [0, -1],
|
||||
// right: [0, 1]
|
||||
// };
|
||||
// var clientWidth = this.arrangement.getClientWidth();
|
||||
// var clientHeight = this.arrangement.getClientHeight();
|
||||
//
|
||||
// function scrollTo(direction, callback) {
|
||||
// if (direction === "") {
|
||||
// self.lastActiveRegion = "";
|
||||
// if (self._scrollInterval) {
|
||||
// clearInterval(self._scrollInterval);
|
||||
// self._scrollInterval = null;
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
// if (self.lastActiveRegion !== direction) {
|
||||
// self.lastActiveRegion = direction;
|
||||
// if (self._scrollInterval) {
|
||||
// clearInterval(self._scrollInterval);
|
||||
// self._scrollInterval = null;
|
||||
// }
|
||||
// var count = 0;
|
||||
// self._scrollInterval = setInterval(function () {
|
||||
// count++;
|
||||
// if (count <= 3) {
|
||||
// return;
|
||||
// }
|
||||
// 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
|
||||
// });
|
||||
// }, 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 >= clientHeight - 30 && p.top <= clientHeight) {
|
||||
// scrollTo("bottom", cb)
|
||||
// }
|
||||
// //向左滚
|
||||
// else if (isBorderScroll && p.left >= 0 && p.left <= 30) {
|
||||
// scrollTo("left", cb)
|
||||
// }
|
||||
// //向右滚
|
||||
// else if (isBorderScroll && p.left >= clientWidth - 30 && p.left <= clientWidth) {
|
||||
// scrollTo("right", cb)
|
||||
// } else {
|
||||
// if (isOverflowScroll === true) {
|
||||
// if (p.top < 0) {
|
||||
// scrollTo("top", cb);
|
||||
// }
|
||||
// else if (p.top > clientHeight) {
|
||||
// scrollTo("bottom", cb);
|
||||
// }
|
||||
// else if (p.left < 0) {
|
||||
// scrollTo("left", cb);
|
||||
// }
|
||||
// else if (p.left > clientWidth) {
|
||||
// scrollTo("right", cb);
|
||||
// } else {
|
||||
// scrollTo("", cb);
|
||||
// }
|
||||
// } else {
|
||||
// scrollTo("", cb);
|
||||
// }
|
||||
// }
|
||||
}, |
||||
|
||||
scrollEnd: function () { |
||||
this.lastActiveRegion = ""; |
||||
if (this._scrollInterval) { |
||||
clearInterval(this._scrollInterval); |
||||
this._scrollInterval = null; |
||||
} |
||||
}, |
||||
|
||||
scrollTo: function (scroll) { |
||||
this.arrangement.scrollTo(scroll); |
||||
}, |
||||
|
||||
zoom: function (ratio) { |
||||
this.arrangement.zoom(ratio); |
||||
}, |
||||
|
||||
resize: function () { |
||||
this.arrangement.resize(); |
||||
}, |
||||
|
||||
relayout: function () { |
||||
return this.arrangement.relayout(); |
||||
}, |
||||
|
||||
setLayoutType: function (type) { |
||||
var self = this; |
||||
this.arrangement.setLayoutType(type); |
||||
}, |
||||
|
||||
getLayoutType: function () { |
||||
return this.arrangement.getLayoutType(); |
||||
}, |
||||
|
||||
getLayoutRatio: function () { |
||||
return this.arrangement.getLayoutRatio(); |
||||
}, |
||||
|
||||
getHelper: function () { |
||||
return this.arrangement.getHelper(); |
||||
}, |
||||
|
||||
getRegionByName: function (name) { |
||||
return this.arrangement.getRegionByName(name); |
||||
}, |
||||
|
||||
getAllRegions: function () { |
||||
return this.arrangement.getAllRegions(); |
||||
}, |
||||
|
||||
revoke: function () { |
||||
if (this._old) { |
||||
this.populate(BI.toArray(this._old)); |
||||
} |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
var self = this; |
||||
BI.each(items, function (i, item) { |
||||
self._initResizable(item.el); |
||||
}); |
||||
this.arrangement.populate(items); |
||||
} |
||||
}); |
||||
BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE"; |
||||
BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_RESIZE"; |
||||
BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE"; |
||||
BI.AdaptiveArrangement.EVENT_RESIZE = "AdaptiveArrangement.EVENT_RESIZE"; |
||||
BI.AdaptiveArrangement.EVENT_SCROLL = "AdaptiveArrangement.EVENT_SCROLL"; |
||||
BI.shortcut("bi.adaptive_arrangement", BI.AdaptiveArrangement); |
@ -1,16 +0,0 @@
|
||||
/** |
||||
* Arrangement的block面板 |
||||
* |
||||
* Created by GUY on 2016/3/1. |
||||
* @class BI.ArrangementBlock |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.ArrangementBlock = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-arrangement-block bi-mask" |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.arrangement_block", BI.ArrangementBlock); |
@ -1,16 +0,0 @@
|
||||
/** |
||||
* Arrangement的drop面板 |
||||
* |
||||
* Created by GUY on 2016/3/1. |
||||
* @class BI.ArrangementDroppable |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.ArrangementDroppable = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.ArrangementDroppable.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-arrangement-droppable bi-resizer" |
||||
}); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.arrangement_droppable", BI.ArrangementDroppable); |
File diff suppressed because it is too large
Load Diff
@ -1,552 +0,0 @@
|
||||
/** |
||||
* 交互行为布局 |
||||
* |
||||
* |
||||
* Created by GUY on 2016/7/23. |
||||
* @class BI.InteractiveArrangement |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.InteractiveArrangement = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.InteractiveArrangement.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-interactive-arrangement", |
||||
resizable: true, |
||||
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID, |
||||
items: [] |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.InteractiveArrangement.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.arrangement = BI.createWidget({ |
||||
type: "bi.adaptive_arrangement", |
||||
element: this, |
||||
resizable: o.resizable, |
||||
layoutType: o.layoutType, |
||||
items: o.items |
||||
}); |
||||
this.arrangement.on(BI.AdaptiveArrangement.EVENT_SCROLL, function () { |
||||
self.fireEvent(BI.InteractiveArrangement.EVENT_SCROLL, arguments); |
||||
}); |
||||
this.arrangement.on(BI.AdaptiveArrangement.EVENT_RESIZE, function () { |
||||
self.fireEvent(BI.InteractiveArrangement.EVENT_RESIZE, arguments); |
||||
}); |
||||
|
||||
this.arrangement.on(BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE, function (id, size) { |
||||
var p = self._getRegionClientPosition(id); |
||||
self.draw({ |
||||
left: p.left, |
||||
top: p.top |
||||
}, size, id); |
||||
}); |
||||
this.arrangement.on(BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE, function (id, size) { |
||||
self.stopDraw(); |
||||
self.setRegionSize(id, size); |
||||
}); |
||||
|
||||
this.tags = []; |
||||
|
||||
}, |
||||
|
||||
_isEqual: function (num1, num2) { |
||||
return this.arrangement._isEqual(num1, num2); |
||||
}, |
||||
|
||||
_getScrollOffset: function () { |
||||
return this.arrangement._getScrollOffset(); |
||||
}, |
||||
|
||||
_positionAt: function (position, regions) { |
||||
var self = this; |
||||
regions = regions || this.getAllRegions(); |
||||
var left = [], center = [], right = [], top = [], middle = [], bottom = []; |
||||
BI.each(regions, function (i, region) { |
||||
var client = self._getRegionClientPosition(region.id); |
||||
if (Math.abs(client.left - position.left) <= 3) { |
||||
left.push(region); |
||||
} |
||||
if (Math.abs(client.left + client.width / 2 - position.left) <= 3) { |
||||
center.push(region); |
||||
} |
||||
if (Math.abs(client.left + client.width - position.left) <= 3) { |
||||
right.push(region); |
||||
} |
||||
if (Math.abs(client.top - position.top) <= 3) { |
||||
top.push(region); |
||||
} |
||||
if (Math.abs(client.top + client.height / 2 - position.top) <= 3) { |
||||
middle.push(region); |
||||
} |
||||
if (Math.abs(client.top + client.height - position.top) <= 3) { |
||||
bottom.push(region); |
||||
} |
||||
}); |
||||
return { |
||||
left: left, |
||||
center: center, |
||||
right: right, |
||||
top: top, |
||||
middle: middle, |
||||
bottom: bottom |
||||
}; |
||||
}, |
||||
|
||||
_getRegionClientPosition: function (name) { |
||||
var region = this.getRegionByName(name); |
||||
var offset = this.arrangement._getScrollOffset(); |
||||
return { |
||||
top: region.top - offset.top, |
||||
left: region.left - offset.left, |
||||
width: region.width, |
||||
height: region.height, |
||||
id: region.id |
||||
}; |
||||
}, |
||||
|
||||
_vAlign: function (position, regions) { |
||||
var self = this; |
||||
var vs = this._positionAt(position, regions); |
||||
var positions = []; |
||||
var l; |
||||
if (vs.left.length > 0) { |
||||
l = this._getRegionClientPosition(vs.left[0].id).left; |
||||
} else if (vs.right.length > 0) { |
||||
var temp = this._getRegionClientPosition(vs.right[0].id); |
||||
l = temp.left + temp.width; |
||||
} else if (vs.center.length > 0) { |
||||
var temp = this._getRegionClientPosition(vs.center[0].id); |
||||
l = temp.left + temp.width / 2; |
||||
} |
||||
var rs = vs.left.concat(vs.right).concat(vs.center); |
||||
BI.each(rs, function (i, region) { |
||||
var p = self._getRegionClientPosition(region.id); |
||||
if (self._isEqual(p.left, l) || self._isEqual(p.left + p.width, l) || self._isEqual(p.left + p.width / 2, l)) { |
||||
var topPoint = { |
||||
top: p.top + p.height / 2, |
||||
left: l |
||||
}; |
||||
positions.push({ |
||||
id: region.id, |
||||
start: topPoint, |
||||
end: { |
||||
left: l, |
||||
top: position.top |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
return positions; |
||||
}, |
||||
|
||||
_leftAlign: function (position, size, regions) { |
||||
var self = this; |
||||
return this._vAlign({ |
||||
left: position.left, |
||||
top: position.top + size.height / 2 |
||||
}, regions); |
||||
}, |
||||
|
||||
_rightAlign: function (position, size, regions) { |
||||
var self = this; |
||||
return this._vAlign({ |
||||
left: position.left + size.width, |
||||
top: position.top + size.height / 2 |
||||
}, regions); |
||||
}, |
||||
|
||||
_hAlign: function (position, regions) { |
||||
var self = this; |
||||
var hs = this._positionAt(position, regions); |
||||
var positions = []; |
||||
var t; |
||||
if (hs.top.length > 0) { |
||||
var temp = this._getRegionClientPosition(hs.top[0].id); |
||||
t = temp.top; |
||||
} else if (hs.bottom.length > 0) { |
||||
var temp = this._getRegionClientPosition(hs.bottom[0].id); |
||||
t = temp.top + temp.height; |
||||
} else if (hs.middle.length > 0) { |
||||
var temp = this._getRegionClientPosition(hs.middle[0].id); |
||||
t = temp.top + temp.height / 2; |
||||
} |
||||
var rs = hs.top.concat(hs.bottom).concat(hs.middle); |
||||
BI.each(rs, function (i, region) { |
||||
var p = self._getRegionClientPosition(region.id); |
||||
if (self._isEqual(p.top, t) || self._isEqual(p.top + p.height, t) || self._isEqual(p.top + p.height / 2, t)) { |
||||
var leftPoint = { |
||||
top: t, |
||||
left: p.left + p.width / 2 |
||||
}; |
||||
positions.push({ |
||||
id: p.id, |
||||
start: leftPoint, |
||||
end: { |
||||
left: position.left, |
||||
top: t |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
return positions; |
||||
}, |
||||
|
||||
_topAlign: function (position, size, regions) { |
||||
var self = this; |
||||
return this._hAlign({ |
||||
left: position.left + size.width / 2, |
||||
top: position.top |
||||
}, regions); |
||||
}, |
||||
|
||||
_bottomAlign: function (position, size, regions) { |
||||
var self = this; |
||||
return this._hAlign({ |
||||
left: position.left + size.width / 2, |
||||
top: position.top + size.height |
||||
}, regions); |
||||
}, |
||||
|
||||
_centerAlign: function (position, size, regions) { |
||||
var self = this; |
||||
return this._vAlign({ |
||||
left: position.left + size.width / 2, |
||||
top: position.top + size.height / 2 |
||||
}, regions); |
||||
}, |
||||
|
||||
_middleAlign: function (position, size, regions) { |
||||
var self = this; |
||||
return this._hAlign({ |
||||
left: position.left + size.width / 2, |
||||
top: position.top + size.height / 2 |
||||
}, regions); |
||||
}, |
||||
|
||||
|
||||
_drawOneTag: function (start, end) { |
||||
var s = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
// invisible: true,
|
||||
width: 13, |
||||
height: 13, |
||||
cls: "drag-tag-font interactive-arrangement-dragtag-icon" |
||||
}); |
||||
var e = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
// invisible: true,
|
||||
width: 13, |
||||
height: 13, |
||||
cls: "drag-tag-font interactive-arrangement-dragtag-icon" |
||||
}); |
||||
if (this._isEqual(start.left, end.left)) { |
||||
var line = BI.createWidget({ |
||||
type: "bi.layout", |
||||
// invisible: true,
|
||||
cls: "interactive-arrangement-dragtag-line", |
||||
width: 1, |
||||
height: Math.abs(start.top - end.top) |
||||
}); |
||||
} else { |
||||
var line = BI.createWidget({ |
||||
type: "bi.layout", |
||||
// invisible: true,
|
||||
cls: "interactive-arrangement-dragtag-line", |
||||
height: 1, |
||||
width: Math.abs(start.left - end.left) |
||||
}); |
||||
} |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: s, |
||||
left: start.left - 6, |
||||
top: start.top - 7 |
||||
}, { |
||||
el: e, |
||||
left: end.left - 6, |
||||
top: end.top - 7 |
||||
}, { |
||||
el: line, |
||||
left: Math.min(start.left, end.left), |
||||
top: Math.min(start.top, end.top) |
||||
}] |
||||
}); |
||||
this.tags.push(s); |
||||
this.tags.push(e); |
||||
this.tags.push(line); |
||||
}, |
||||
|
||||
stopDraw: function () { |
||||
BI.each(this.tags, function (i, w) { |
||||
w.destroy(); |
||||
}); |
||||
this.tags = []; |
||||
}, |
||||
|
||||
_getRegionExcept: function (name, regions) { |
||||
var other = []; |
||||
BI.each(regions || this.getAllRegions(), function (i, region) { |
||||
if (!(name && region.id === name)) { |
||||
other.push(region); |
||||
} |
||||
}); |
||||
return other; |
||||
}, |
||||
|
||||
getClientWidth: function () { |
||||
return this.arrangement.getClientWidth(); |
||||
}, |
||||
|
||||
getClientHeight: function () { |
||||
return this.arrangement.getClientHeight(); |
||||
}, |
||||
|
||||
getPosition: function (name, position, size) { |
||||
var regions = this.getAllRegions(); |
||||
var me; |
||||
if (name) { |
||||
me = this._getRegionClientPosition(name); |
||||
} |
||||
var other = this._getRegionExcept(name, regions); |
||||
position = position || { |
||||
left: me.left, |
||||
top: me.top |
||||
}; |
||||
size = size || { |
||||
width: me.width, |
||||
height: me.height |
||||
}; |
||||
var left = this._leftAlign(position, size, other); |
||||
var right = this._rightAlign(position, size, other); |
||||
var top = this._topAlign(position, size, other, other); |
||||
var bottom = this._bottomAlign(position, size, other); |
||||
var center = this._centerAlign(position, size, other); |
||||
var middle = this._middleAlign(position, size, other); |
||||
|
||||
BI.each(center, function (i, pos) { |
||||
position.left = pos.end.left - size.width / 2; |
||||
}); |
||||
BI.each(right, function (i, pos) { |
||||
position.left = pos.end.left - size.width; |
||||
}); |
||||
BI.each(left, function (i, pos) { |
||||
position.left = pos.end.left; |
||||
}); |
||||
BI.each(middle, function (i, pos) { |
||||
position.top = pos.end.top - size.height / 2; |
||||
}); |
||||
BI.each(bottom, function (i, pos) { |
||||
position.top = pos.end.top - size.height; |
||||
}); |
||||
BI.each(top, function (i, pos) { |
||||
position.top = pos.end.top; |
||||
}); |
||||
return position; |
||||
}, |
||||
|
||||
// position不动 变size
|
||||
getSize: function (name, position, size) { |
||||
var regions = this.getAllRegions(); |
||||
var me; |
||||
if (name) { |
||||
me = this._getRegionClientPosition(name); |
||||
} |
||||
var other = this._getRegionExcept(name, regions); |
||||
position = position || { |
||||
left: me.left, |
||||
top: me.top |
||||
}; |
||||
size = size || { |
||||
width: me.width, |
||||
height: me.height |
||||
}; |
||||
var left = this._leftAlign(position, size, other); |
||||
var right = this._rightAlign(position, size, other); |
||||
var top = this._topAlign(position, size, other, other); |
||||
var bottom = this._bottomAlign(position, size, other); |
||||
var center = this._centerAlign(position, size, other); |
||||
var middle = this._middleAlign(position, size, other); |
||||
|
||||
BI.each(center, function (i, pos) { |
||||
size.width = (pos.end.left - position.left) * 2; |
||||
}); |
||||
BI.each(right, function (i, pos) { |
||||
size.width = pos.end.left - position.left; |
||||
}); |
||||
BI.each(left, function (i, pos) { |
||||
}); |
||||
BI.each(middle, function (i, pos) { |
||||
size.height = (pos.end.top - position.top) * 2; |
||||
}); |
||||
BI.each(bottom, function (i, pos) { |
||||
size.height = pos.end.top - position.top; |
||||
}); |
||||
BI.each(top, function (i, pos) { |
||||
}); |
||||
return size; |
||||
}, |
||||
|
||||
draw: function (position, size, name) { |
||||
var self = this; |
||||
this.stopDraw(); |
||||
switch (this.getLayoutType()) { |
||||
case BI.Arrangement.LAYOUT_TYPE.FREE: |
||||
var other = this._getRegionExcept(name); |
||||
var left = this._leftAlign(position, size, other); |
||||
var right = this._rightAlign(position, size, other); |
||||
var top = this._topAlign(position, size, other); |
||||
var bottom = this._bottomAlign(position, size, other); |
||||
var center = this._centerAlign(position, size, other); |
||||
var middle = this._middleAlign(position, size, other); |
||||
|
||||
BI.each(center, function (i, pos) { |
||||
self._drawOneTag(pos.start, pos.end); |
||||
}); |
||||
BI.each(right, function (i, pos) { |
||||
self._drawOneTag(pos.start, pos.end); |
||||
}); |
||||
BI.each(left, function (i, pos) { |
||||
self._drawOneTag(pos.start, pos.end); |
||||
}); |
||||
BI.each(middle, function (i, pos) { |
||||
self._drawOneTag(pos.start, pos.end); |
||||
}); |
||||
BI.each(bottom, function (i, pos) { |
||||
self._drawOneTag(pos.start, pos.end); |
||||
}); |
||||
BI.each(top, function (i, pos) { |
||||
self._drawOneTag(pos.start, pos.end); |
||||
}); |
||||
break; |
||||
case BI.Arrangement.LAYOUT_TYPE.GRID: |
||||
break; |
||||
} |
||||
}, |
||||
|
||||
addRegion: function (region, position) { |
||||
this.stopDraw(); |
||||
return this.arrangement.addRegion(region, position); |
||||
}, |
||||
|
||||
deleteRegion: function (name) { |
||||
return this.arrangement.deleteRegion(name); |
||||
}, |
||||
|
||||
setRegionSize: function (name, size) { |
||||
size = this.getSize(name, null, size); |
||||
return this.arrangement.setRegionSize(name, size); |
||||
}, |
||||
|
||||
setPosition: function (position, size) { |
||||
var self = this; |
||||
this.stopDraw(); |
||||
if (position.left > 0 && position.top > 0) { |
||||
switch (this.getLayoutType()) { |
||||
case BI.Arrangement.LAYOUT_TYPE.FREE: |
||||
position = this.getPosition(null, position, size); |
||||
this.draw(position, size); |
||||
break; |
||||
case BI.Arrangement.LAYOUT_TYPE.GRID: |
||||
break; |
||||
} |
||||
} |
||||
var at = this.arrangement.setPosition(position, size); |
||||
return at; |
||||
}, |
||||
|
||||
setRegionPosition: function (name, position) { |
||||
if (position.left > 0 && position.top > 0) { |
||||
switch (this.getLayoutType()) { |
||||
case BI.Arrangement.LAYOUT_TYPE.FREE: |
||||
position = this.getPosition(name, position); |
||||
break; |
||||
case BI.Arrangement.LAYOUT_TYPE.GRID: |
||||
break; |
||||
} |
||||
} |
||||
return this.arrangement.setRegionPosition(name, position); |
||||
}, |
||||
|
||||
setDropPosition: function (position, size) { |
||||
var self = this; |
||||
this.stopDraw(); |
||||
if (position.left > 0 && position.top > 0) { |
||||
switch (this.getLayoutType()) { |
||||
case BI.Arrangement.LAYOUT_TYPE.FREE: |
||||
position = this.getPosition(null, position, size); |
||||
this.draw(position, size); |
||||
break; |
||||
case BI.Arrangement.LAYOUT_TYPE.GRID: |
||||
break; |
||||
} |
||||
} |
||||
var callback = self.arrangement.setDropPosition(position, size); |
||||
return function () { |
||||
callback(); |
||||
self.stopDraw(); |
||||
}; |
||||
}, |
||||
|
||||
scrollInterval: function () { |
||||
this.arrangement.scrollInterval.apply(this.arrangement, arguments); |
||||
}, |
||||
|
||||
scrollEnd: function () { |
||||
this.arrangement.scrollEnd.apply(this.arrangement, arguments); |
||||
}, |
||||
|
||||
scrollTo: function (scroll) { |
||||
this.arrangement.scrollTo(scroll); |
||||
}, |
||||
|
||||
zoom: function (ratio) { |
||||
this.arrangement.zoom(ratio); |
||||
}, |
||||
|
||||
resize: function () { |
||||
return this.arrangement.resize(); |
||||
}, |
||||
|
||||
relayout: function () { |
||||
return this.arrangement.relayout(); |
||||
}, |
||||
|
||||
setLayoutType: function (type) { |
||||
this.arrangement.setLayoutType(type); |
||||
}, |
||||
|
||||
getLayoutType: function () { |
||||
return this.arrangement.getLayoutType(); |
||||
}, |
||||
|
||||
getLayoutRatio: function () { |
||||
return this.arrangement.getLayoutRatio(); |
||||
}, |
||||
|
||||
getHelper: function () { |
||||
return this.arrangement.getHelper(); |
||||
}, |
||||
|
||||
getRegionByName: function (name) { |
||||
return this.arrangement.getRegionByName(name); |
||||
}, |
||||
|
||||
getAllRegions: function () { |
||||
return this.arrangement.getAllRegions(); |
||||
}, |
||||
|
||||
revoke: function () { |
||||
return this.arrangement.revoke(); |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
var self = this; |
||||
this.arrangement.populate(items); |
||||
} |
||||
}); |
||||
BI.InteractiveArrangement.EVENT_RESIZE = "InteractiveArrangement.EVENT_RESIZE"; |
||||
BI.InteractiveArrangement.EVENT_SCROLL = "InteractiveArrangement.EVENT_SCROLL"; |
||||
BI.shortcut("bi.interactive_arrangement", BI.InteractiveArrangement); |
Loading…
Reference in new issue