Browse Source

Merge pull request #56 in FUI/fineui from ~GUY/fineui:master to master

* commit '802e9f5b15d4526e423b20cbdbbe08cd758a1285':
  add
  normalize
  floatbox
  布局
  布局
  布局
  删除自适应布局
es6
guy 8 years ago
parent
commit
d33dc6c0bc
  1. 230
      bi/core.css
  2. 14
      bi/core.js
  3. 2692
      bi/widget.js
  4. 16
      demo/js/config/core.js
  5. 4
      demo/js/config/widget.js
  6. 13
      demo/js/widget/demo.interactivearrangement.js
  7. 230
      docs/core.css
  8. 14
      docs/core.js
  9. 32
      docs/demo.js
  10. 2692
      docs/widget.js
  11. 14
      src/core/controller/router.floatbox.js
  12. 230
      src/css/core/normalize.css
  13. 0
      src/css/core/normalize2.css
  14. 2
      src/css/lib/colors.css
  15. 231
      src/less/core/normalize.less
  16. 0
      src/less/core/normalize2.less
  17. 501
      src/widget/adaptivearrangement/adaptivearrangement.js
  18. 6
      src/widget/arrangement/arrangement.block.js
  19. 6
      src/widget/arrangement/arrangement.droppable.js
  20. 2012
      src/widget/arrangement/arrangement.js
  21. 43
      src/widget/interactivearrangement/interactivearrangement.js

230
bi/core.css

@ -1,3 +1,233 @@
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: .83em;
margin: 1.67em 0;
}
h6 {
font-size: .75em;
margin: 2.33em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000000;
}
p,
pre {
margin: 1em 0;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: none;
}
q:before,
q:after {
content: '';
content: none;
}
small {
font-size: 75%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
menu,
ol,
ul {
padding: 0 0 0 40px;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
form {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
body,
div,

14
bi/core.js

@ -15985,19 +15985,7 @@ BI.FloatBoxRouter = BI.inherit(BI.WRouter, {
BI.nextTick(function () {
self.close(url);
// view.end();
var t = void 0, isNew = false, keys;
if (isValid) {
keys = modelData.split('.');
BI.each(keys, function (i, k) {
if (i === 0) {
t = context.model.get(k) || (isNew = true);
} else {
t = t[k] || (isNew = true);
}
})
}
isNew && context.model.removeChild(modelData);
!isNew && (context.listenEnd.apply(context, isValid ? keys : [modelData]) !== false) && context.populate();
(context.listenEnd.apply(context, isValid ? modelData.split('.') : [modelData]) !== false) && context.populate();
}, 30)
}).on("change:" + view.cid, _.bind(context.notifyParent, context))
}

2692
bi/widget.js

File diff suppressed because it is too large Load Diff

16
demo/js/config/core.js

@ -7,27 +7,27 @@ Demo.CORE_CONFIG = [{
text: "布局"
}, {
pId: 101,
text: "bi.center_adapt",
text: "自适应居中bi.center_adapt",
value: "demo.center_adapt"
}, {
pId: 101,
text: "bi.vertical_adapt",
text: "自适应垂直居中bi.vertical_adapt",
value: "demo.vertical_adapt"
}, {
pId: 101,
text: "bi.horizontal_adapt",
text: "自适应水平居中bi.horizontal_adapt",
value: "demo.horizontal_adapt"
}, {
pId: 101,
text: "bi.horizontal_auto",
text: "margin-auto自适应水平居中bi.horizontal_auto",
value: "demo.horizontal_auto"
}, {
pId: 101,
text: "bi.horizontal_float",
text: "float水平居中bi.horizontal_float",
value: "demo.horizontal_float"
}, {
pId: 101,
text: "bi.left_right_vertical_adapt",
text: "左右垂直居中bi.left_right_vertical_adapt",
value: "demo.left_right_vertical_adapt"
}, {
pId: 101,
@ -39,11 +39,11 @@ Demo.CORE_CONFIG = [{
value: "demo.float_center"
}, {
pId: 101,
text: "bi.vertical",
text: "垂直流式bi.vertical",
value: "demo.vertical"
}, {
pId: 101,
text: "bi.horizontal",
text: "水平流式bi.horizontal",
value: "demo.horizontal"
}, {
pId: 101,

4
demo/js/config/widget.js

@ -41,4 +41,8 @@ Demo.WIDGET_CONFIG = [{
pId: 4,
text: "bi.relation_view",
value: "demo.relation_view"
}, {
pId: 4,
text: "bi.interactive_arrangement",
value: "demo.interactive_arrangement"
}];

13
demo/js/widget/demo.interactivearrangement.js

@ -0,0 +1,13 @@
/**
* Created by User on 2017/3/22.
*/
Demo.RelationView = BI.inherit(BI.Widget, {
props: {
},
render: function () {
return {
type: "bi.interactive_arrangement",
};
}
});
BI.shortcut("demo.interactive_arrangement", Demo.RelationView);

230
docs/core.css

@ -1,3 +1,233 @@
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: .83em;
margin: 1.67em 0;
}
h6 {
font-size: .75em;
margin: 2.33em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000000;
}
p,
pre {
margin: 1em 0;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: none;
}
q:before,
q:after {
content: '';
content: none;
}
small {
font-size: 75%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
menu,
ol,
ul {
padding: 0 0 0 40px;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
form {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,
body,
div,

14
docs/core.js

@ -21572,19 +21572,7 @@ BI.FloatBoxRouter = BI.inherit(BI.WRouter, {
BI.nextTick(function () {
self.close(url);
// view.end();
var t = void 0, isNew = false, keys;
if (isValid) {
keys = modelData.split('.');
BI.each(keys, function (i, k) {
if (i === 0) {
t = context.model.get(k) || (isNew = true);
} else {
t = t[k] || (isNew = true);
}
})
}
isNew && context.model.removeChild(modelData);
!isNew && (context.listenEnd.apply(context, isValid ? keys : [modelData]) !== false) && context.populate();
(context.listenEnd.apply(context, isValid ? modelData.split('.') : [modelData]) !== false) && context.populate();
}, 30)
}).on("change:" + view.cid, _.bind(context.notifyParent, context))
}

32
docs/demo.js

@ -3158,27 +3158,27 @@ Demo.COMPONENT_CONFIG = [{
text: "布局"
}, {
pId: 101,
text: "bi.center_adapt",
text: "自适应居中bi.center_adapt",
value: "demo.center_adapt"
}, {
pId: 101,
text: "bi.vertical_adapt",
text: "自适应垂直居中bi.vertical_adapt",
value: "demo.vertical_adapt"
}, {
pId: 101,
text: "bi.horizontal_adapt",
text: "自适应水平居中bi.horizontal_adapt",
value: "demo.horizontal_adapt"
}, {
pId: 101,
text: "bi.horizontal_auto",
text: "margin-auto自适应水平居中bi.horizontal_auto",
value: "demo.horizontal_auto"
}, {
pId: 101,
text: "bi.horizontal_float",
text: "float水平居中bi.horizontal_float",
value: "demo.horizontal_float"
}, {
pId: 101,
text: "bi.left_right_vertical_adapt",
text: "左右垂直居中bi.left_right_vertical_adapt",
value: "demo.left_right_vertical_adapt"
}, {
pId: 101,
@ -3190,11 +3190,11 @@ Demo.COMPONENT_CONFIG = [{
value: "demo.float_center"
}, {
pId: 101,
text: "bi.vertical",
text: "垂直流式bi.vertical",
value: "demo.vertical"
}, {
pId: 101,
text: "bi.horizontal",
text: "水平流式bi.horizontal",
value: "demo.horizontal"
}, {
pId: 101,
@ -3379,6 +3379,10 @@ Demo.COMPONENT_CONFIG = [{
pId: 4,
text: "bi.relation_view",
value: "demo.relation_view"
}, {
pId: 4,
text: "bi.interactive_arrangement",
value: "demo.interactive_arrangement"
}];Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
@ -5945,6 +5949,18 @@ Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.shortcut("demo.west", Demo.West);/**
* Created by User on 2017/3/22.
*/
Demo.RelationView = BI.inherit(BI.Widget, {
props: {
},
render: function () {
return {
type: "bi.interactive_arrangement",
};
}
});
BI.shortcut("demo.interactive_arrangement", Demo.RelationView);/**
* Created by User on 2017/3/22.
*/
Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-multi-select-combo"

2692
docs/widget.js

File diff suppressed because it is too large Load Diff

14
src/core/controller/router.floatbox.js

@ -57,19 +57,7 @@ BI.FloatBoxRouter = BI.inherit(BI.WRouter, {
BI.nextTick(function () {
self.close(url);
// view.end();
var t = void 0, isNew = false, keys;
if (isValid) {
keys = modelData.split('.');
BI.each(keys, function (i, k) {
if (i === 0) {
t = context.model.get(k) || (isNew = true);
} else {
t = t[k] || (isNew = true);
}
})
}
isNew && context.model.removeChild(modelData);
!isNew && (context.listenEnd.apply(context, isValid ? keys : [modelData]) !== false) && context.populate();
(context.listenEnd.apply(context, isValid ? modelData.split('.') : [modelData]) !== false) && context.populate();
}, 30)
}).on("change:" + view.cid, _.bind(context.notifyParent, context))
}

230
src/css/core/normalize.css vendored

@ -0,0 +1,230 @@
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: .83em;
margin: 1.67em 0;
}
h6 {
font-size: .75em;
margin: 2.33em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000000;
}
p,
pre {
margin: 1em 0;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: none;
}
q:before,
q:after {
content: '';
content: none;
}
small {
font-size: 75%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
menu,
ol,
ul {
padding: 0 0 0 40px;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
form {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

0
src/css/core/normal.css → src/css/core/normalize2.css

2
src/css/lib/colors.css

@ -1,2 +0,0 @@
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/

231
src/less/core/normalize.less vendored

@ -0,0 +1,231 @@
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden] {
display: none
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
html,
button,
input,
select,
textarea {
font-family: sans-serif
}
body {
margin: 0
}
a:focus {
outline: thin dotted
}
a:active,
a:hover {
outline: 0
}
h1 {
font-size: 2em;
margin: .67em 0
}
h2 {
font-size: 1.5em;
margin: .83em 0
}
h3 {
font-size: 1.17em;
margin: 1em 0
}
h4 {
font-size: 1em;
margin: 1.33em 0
}
h5 {
font-size: .83em;
margin: 1.67em 0
}
h6 {
font-size: .75em;
margin: 2.33em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: bold
}
blockquote {
margin: 1em 40px
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
p,
pre {
margin: 1em 0
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word
}
q {
quotes: none
}
q:before,
q:after {
content: '';
content: none
}
small {
font-size: 75%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
dl,
menu,
ol,
ul {
margin: 1em 0
}
dd {
margin: 0 0 0 40px
}
menu,
ol,
ul {
padding: 0 0 0 40px
}
nav ul,
nav ol {
list-style: none;
list-style-image: none
}
img {
border: 0;
-ms-interpolation-mode: bicubic
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
form {
margin: 0
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0;
white-space: normal;
*margin-left: -7px
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle
}
button,
input {
line-height: normal
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
*overflow: visible
}
button[disabled],
input[disabled] {
cursor: default
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
*height: 13px;
*width: 13px
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
textarea {
overflow: auto;
vertical-align: top
}
table {
border-collapse: collapse;
border-spacing: 0
}

0
src/less/core/normal.less → src/less/core/normalize2.less

501
src/widget/adaptivearrangement/adaptivearrangement.js

@ -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,75 +28,20 @@ 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) {
$(document).mousedown(function (e) {
BI.each(self.getAllRegions(), function (i, region) {
if (!region.el.element.__isMouseInBounds__(e)) {
if (region.el.element.find(e.target).length === 0) {
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, 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]
};
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";

6
src/widget/arrangement/arrangement.block.js

@ -11,12 +11,6 @@ BI.ArrangementBlock = BI.inherit(BI.Widget, {
return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-arrangement-block bi-mask"
});
},
_init: function () {
BI.ArrangementBlock.superclass._init.apply(this, arguments);
var self = this, o = this.options;
}
});
BI.shortcut('bi.arrangement_block', BI.ArrangementBlock);

6
src/widget/arrangement/arrangement.droppable.js

@ -11,12 +11,6 @@ BI.ArrangementDroppable = BI.inherit(BI.Widget, {
return BI.extend(BI.ArrangementDroppable.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-arrangement-droppable bi-resizer"
});
},
_init: function () {
BI.ArrangementDroppable.superclass._init.apply(this, arguments);
var self = this, o = this.options;
}
});
BI.shortcut('bi.arrangement_droppable', BI.ArrangementDroppable);

2012
src/widget/arrangement/arrangement.js

File diff suppressed because it is too large Load Diff

43
src/widget/interactivearrangement/interactivearrangement.js

@ -12,9 +12,7 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
return BI.extend(BI.InteractiveArrangement.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-interactive-arrangement",
resizable: true,
isNeedReLayout: true,
isNeedResizeContainer: true,
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID,
items: []
});
},
@ -26,8 +24,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
type: "bi.adaptive_arrangement",
element: this,
resizable: o.resizable,
isNeedReLayout: o.isNeedReLayout,
isNeedResizeContainer: o.isNeedResizeContainer,
layoutType: o.layoutType,
items: o.items
});
@ -439,7 +435,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
var self = this;
this.stopDraw();
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
case BI.Arrangement.LAYOUT_TYPE.FREE:
var other = this._getRegionExcept(name);
var left = this._leftAlign(position, size, other);
@ -473,10 +468,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
}
},
getDirectRelativeRegions: function (name, direction) {
return this.arrangement.getDirectRelativeRegions(name, direction);
},
addRegion: function (region, position) {
this.stopDraw();
return this.arrangement.addRegion(region, position);
@ -496,8 +487,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
this.stopDraw();
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(null, position, size);
this.draw(position, size);
@ -513,8 +502,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
setRegionPosition: function (name, position) {
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(name, position);
break;
@ -525,6 +512,34 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
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);
},

Loading…
Cancel
Save