Skip to content

Commit 02f7c3f

Browse files
liqian7liqian7
committed
增加 select & dropDownBox template review by tangqin
1 parent ea1bcd8 commit 02f7c3f

File tree

7 files changed

+344
-4
lines changed

7 files changed

+344
-4
lines changed

‎src/common/css/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,6 @@ import '../widgets/css/Icon.css';
77
import '../widgets/css/OpenFile.css';
88
import '../widgets/css/MessageBox.css';
99
import '../widgets/css/DataFlow.css';
10+
import '../widgets/css/WidgetContainer.css';
11+
import '../widgets/css/WidgetDropDownBox.css';
12+
import '../widgets/css/WidgetSelect.css';

‎src/common/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -422,9 +422,9 @@ import {
422422
SUtil
423423

424424
} from './overlay';
425-
import {FileTypes, FileConfig, FileModel, MessageBox, WidgetContainer, widgetsUtil, FileReaderUtil} from './widgets';
425+
import {FileTypes, FileConfig, FileModel, MessageBox, WidgetContainer, WidgetDropDownBox, WidgetSelect, widgetsUtil, FileReaderUtil} from './widgets';
426426

427-
export {FileTypes, FileConfig, FileModel, MessageBox, WidgetContainer, widgetsUtil, FileReaderUtil}
427+
export {FileTypes, FileConfig, FileModel, MessageBox, WidgetContainer, WidgetDropDownBox, WidgetSelect, widgetsUtil, FileReaderUtil}
428428
export {SuperMap};
429429
export {
430430
DataFormat,

‎src/common/widgets/css/WidgetDropDownBox.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
.drop-down-container {
2+
position: relative;
3+
width: 200px;
4+
height: 58px;
5+
}
6+
7+
.drop-down-box {
8+
width: 192px;
9+
height: 50px;
10+
background: #FFFFFF;
11+
margin: 0 auto;
12+
padding: 8px 0 0px 8px;
13+
border: 1px solid #D9D9D9;
14+
border-radius: 2px;
15+
}
16+
17+
.drop-down-box:hover {
18+
border: 1px solid #108EE9;
19+
}
20+
.drop-down-item {
21+
width: 177px;
22+
height: 42px;
23+
margin-bottom: 8px;
24+
cursor: pointer;
25+
color: #595959;
26+
}
27+
.drop-down-content .drop-down-item:hover .drop-down-title {
28+
color: #108EE9;
29+
}
30+
31+
.drop-down-content .drop-down-item:hover .drop-down-remark {
32+
color: #108EE9;
33+
}
34+
35+
.drop-down-content {
36+
position: absolute !important;
37+
top: 61px;
38+
left: 0;
39+
width: 184px;
40+
/* height: 92px; */
41+
background: #FFFFFF;
42+
padding: 8px;
43+
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
44+
border: 1px solid #D9D9D9;
45+
border-radius: 2px;
46+
z-index: 10001;
47+
}
48+
49+
.drop-down-content.chart-content{
50+
display: none;
51+
}
52+
.drop-down-img div {
53+
width: 48px;
54+
height: 42px;
55+
}
56+
57+
.drop-down-title {
58+
position: relative;
59+
bottom: 40px;
60+
left: 57px;
61+
width: 120px;
62+
height: 16px;
63+
font-size: 12px;
64+
font-weight: bold;
65+
color: #595959;
66+
overflow: hidden;
67+
}
68+
69+
.drop-down-remark {
70+
position: relative;
71+
bottom: 32px;
72+
left: 57px;
73+
width: 120px;
74+
height: 16px;
75+
font-size: 12px;
76+
color: #919191;
77+
overflow: hidden;
78+
text-overflow: ellipsis;
79+
white-space: nowrap;
80+
}
81+
82+
.triangle-btn {
83+
position: relative;
84+
bottom: 46px;
85+
left: 173px;
86+
width: 10px;
87+
height: 10px;
88+
cursor: pointer;
89+
}
90+
91+
.triangle-btn>div {
92+
width: 100%;
93+
height: 100%;
94+
}
95+
96+
97+
.scrollarea-content {
98+
min-height: 28px;
99+
margin-top: 0px;
100+
margin-left: 0px;
101+
/* background: white; */
102+
overflow: visible;
103+
height: 100%;
104+
105+
106+
}
107+
108+
scrollarea>.scrollarea-content {
109+
padding-bottom: 16px;
110+
}

‎src/common/widgets/css/WidgetSelect.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.widget-select-options {
2+
width: 202px !important;
3+
/* margin-top: 0px !important; */
4+
height: 32px !important;
5+
margin-top: -3px !important;
6+
margin-bottom: 16px;
7+
}

‎src/common/widgets/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import {FileTypes, FileConfig} from './CommonTypes';
33
//组件
44
import {FileModel} from './openFile/FileModel';
55
//提示框微件
6-
import {MessageBox} from './messageBox/MessageBox'
6+
import {MessageBox} from './messageBox/MessageBox';
77
//公用模板：
8-
import {WidgetContainer} from './templates/WidgetContainer'
8+
import {WidgetContainer} from './templates/WidgetContainer';
9+
import {WidgetSelect} from './templates/WidgetSelect';
10+
import {WidgetDropDownBox} from './templates/WidgetDropDownBox';
911
//工具类
1012
import {widgetsUtil, FileReaderUtil} from './util';
1113

@@ -14,4 +16,6 @@ export {FileTypes, FileConfig}
1416
export {FileModel};
1517
export {MessageBox};
1618
export {WidgetContainer};
19+
export {WidgetSelect};
20+
export {WidgetDropDownBox};
1721
export {widgetsUtil, FileReaderUtil};

‎src/common/widgets/templates/WidgetDropDownBox.js‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { SuperMap } from '../../SuperMap';
2+
3+
/**
4+
* @class SuperMap.Widgets.WidgetDropDownBox
5+
* @classDec 微件统一 dropDownBox 下拉框。
6+
* @param {Array} optionsArr - 需要创建的 option 数据数组。
7+
*/
8+
export class WidgetDropDownBox {
9+
constructor(optionsArr) {
10+
this._initView(optionsArr);
11+
}
12+
_initView(optionsArr) {
13+
let dropDownContainer = document.createElement('div');
14+
dropDownContainer.className = 'drop-down-container';
15+
let dropDownBox = document.createElement('div');
16+
dropDownBox.setAttribute('tabindex', '1');
17+
dropDownBox.className = "drop-down-box";
18+
dropDownBox.id = 'dropDownBox';
19+
20+
let dropDownTopContainer = document.createElement('div');
21+
dropDownTopContainer.id = 'dropDownTopContainer';
22+
23+
let dropDownTop = document.createElement('div');
24+
dropDownTop.className = 'drop-down-item';
25+
dropDownTop.id = 'dropDownTop';
26+
27+
let dropDownImg = document.createElement('div');
28+
dropDownImg.className = 'drop-down-img';
29+
let activeIcon = document.createElement('div');
30+
activeIcon.className = optionsArr[0].icon.className;
31+
activeIcon.style.background = optionsArr[0].icon.background;
32+
dropDownImg.appendChild(activeIcon);
33+
dropDownTop.appendChild(dropDownImg);
34+
35+
let dropDownTitle = document.createElement('div');
36+
dropDownTitle.title = optionsArr[0].title;
37+
dropDownTitle.innerHTML = optionsArr[0].title;
38+
dropDownTitle.className = 'drop-down-title';
39+
dropDownTop.appendChild(dropDownTitle);
40+
41+
let dropDownRemark = document.createElement('div');
42+
dropDownRemark.title = optionsArr[0].remark;
43+
dropDownRemark.innerHTML = optionsArr[0].remark;
44+
dropDownRemark.className = 'drop-down-remark';
45+
dropDownTop.appendChild(dropDownRemark);
46+
dropDownTopContainer.appendChild(dropDownTop);
47+
dropDownBox.appendChild(dropDownTopContainer);
48+
49+
let triangleBtnContainer = document.createElement('div');
50+
triangleBtnContainer.className = 'triangle-btn';
51+
let triangleBtn = document.createElement('div');
52+
triangleBtn.className = 'triangle-down-img';
53+
triangleBtn.id = 'triangleBtn';
54+
triangleBtnContainer.appendChild(triangleBtn);
55+
dropDownBox.appendChild(triangleBtnContainer);
56+
dropDownContainer.appendChild(dropDownBox);
57+
58+
let creatDropDownBoxParam = {
59+
"parentEle": dropDownBox,
60+
"dropDownContent": ['drop-down-content chart-content', 'dropDownContent'],
61+
"dropDownItems": 'scrollarea drop-down-items',
62+
"scrollareaContent": 'scrollarea-content',
63+
"optionsArr": optionsArr,
64+
"triangleBtn": triangleBtn,
65+
"dropDownTopContainer": dropDownTopContainer
66+
}
67+
this._creatDropDownBox(creatDropDownBoxParam);
68+
69+
this.dropDownContainer = dropDownContainer;
70+
71+
}
72+
_creatDropDownBox(creatDropDownBoxParam) {
73+
let dropDownBox = creatDropDownBoxParam.parentEle;
74+
let dropDownTopContainer = creatDropDownBoxParam.dropDownTopContainer;
75+
let dropDownContent = document.createElement('div');
76+
dropDownContent.className = creatDropDownBoxParam.dropDownContent[0];
77+
dropDownContent.id = creatDropDownBoxParam.dropDownContent[1];
78+
dropDownBox.appendChild(dropDownContent);
79+
80+
let dropDownItems = document.createElement('div');
81+
dropDownItems.className = creatDropDownBoxParam.dropDownItems;
82+
dropDownContent.appendChild(dropDownItems);
83+
84+
let scrollareaContent = document.createElement('div');
85+
scrollareaContent.className = creatDropDownBoxParam.scrollareaContent;
86+
dropDownItems.appendChild(scrollareaContent);
87+
88+
this._creatDropDownOptions(creatDropDownBoxParam.optionsArr, scrollareaContent);
89+
90+
// 下拉框显示 & 隐藏事件
91+
let triangleBtn = creatDropDownBoxParam.triangleBtn;
92+
this._dropDownClickEvent(dropDownBox, dropDownContent.id, triangleBtn.id);
93+
94+
this._eleOnblur(dropDownBox, creatDropDownBoxParam.dropDownContent[1], triangleBtn.id)
95+
96+
// 下拉框 options 点击事件
97+
let scrollareaOptions = scrollareaContent.children;
98+
for (let i = 0; i < scrollareaOptions.length; i++) {
99+
scrollareaOptions[i].onclick = function () {
100+
dropDownTopContainer.innerHTML = scrollareaOptions[i].outerHTML;
101+
dropDownTopContainer.children[0].id = 'dropDownTop';
102+
//evt.stopPropagation();
103+
}
104+
}
105+
}
106+
107+
_creatDropDownOptions(dataArr, parentElement) {
108+
for (let i = 0; i < dataArr.length; i++) {
109+
let ele = document.createElement('div');
110+
ele.className = 'drop-down-item';
111+
ele.setAttribute('data-value', dataArr[i]['data-value']);
112+
parentElement.appendChild(ele);
113+
114+
let imgContainer = document.createElement('div');
115+
imgContainer.className = 'drop-down-img';
116+
ele.appendChild(imgContainer);
117+
118+
let img = document.createElement('div');
119+
img.className = dataArr[i].icon.className;
120+
img.style.background = dataArr[i].icon.background;
121+
imgContainer.appendChild(img);
122+
123+
let title = document.createElement('div');
124+
title.className = 'drop-down-title';
125+
title.title = dataArr[i].title;
126+
title.innerHTML = dataArr[i].title;
127+
ele.appendChild(title);
128+
129+
let remark = document.createElement('div');
130+
remark.className = 'drop-down-remark';
131+
remark.title = dataArr[i].remark;
132+
remark.innerHTML = dataArr[i].remark;
133+
ele.appendChild(remark);
134+
135+
}
136+
}
137+
138+
_dropDownClickEvent(eventElement, contentElementId, triangleBtnId) {
139+
eventElement.onclick = function (e) {
140+
let contentElement = document.getElementById(contentElementId);
141+
let triangleBtn = document.getElementById(triangleBtnId);
142+
if (contentElement.style.display === "block") {
143+
contentElement.style.display = "none";
144+
triangleBtn.className = "triangle-down-img";
145+
} else {
146+
contentElement.style.display = "block";
147+
triangleBtn.className = "triangle-up-img";
148+
}
149+
e.preventDefault();
150+
e.stopPropagation()
151+
}
152+
eventElement.onmousedown = function (evt) {
153+
//console.log('drop-down-box onmousedown '+evt.target.className);
154+
if (evt.target !== this) {
155+
this.focus();
156+
evt.preventDefault();
157+
evt.stopPropagation()
158+
}
159+
}
160+
}
161+
162+
_eleOnblur(eventElement, contentElementId, triangleBtnId) {
163+
eventElement.onblur = function () {
164+
let contentElement = document.getElementById(contentElementId);
165+
let triangleBtn = document.getElementById(triangleBtnId);
166+
contentElement.style.display = "none";
167+
triangleBtn.className = "triangle-down-img";
168+
}
169+
}
170+
/**
171+
* @function WidgetSelect.prototype.getElement
172+
* @description 获取当前模板 Dom 元素。
173+
*/
174+
getElement() {
175+
return this.dropDownContainer;
176+
}
177+
}
178+
SuperMap.Widgets.WidgetDropDownBox = WidgetDropDownBox;

‎src/common/widgets/templates/WidgetSelect.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { SuperMap } from '../../SuperMap';
2+
3+
/**
4+
* @class SuperMap.Widgets.WidgetSelect
5+
* @classDec 微件统一 select 下拉框。
6+
* @param {Array} optionsArr - 需要创建的 option 数据数组。
7+
*/
8+
export class WidgetSelect {
9+
constructor(optionsArr) {
10+
this._initView(optionsArr);
11+
}
12+
_initView(optionsArr) {
13+
let select = document.createElement('select');
14+
select.className = "widget-select-options";
15+
select.id = 'widgetSelect';
16+
for (let i = 0; i < optionsArr.length; i++) {
17+
let ele = document.createElement('option');
18+
ele.innerHTML = optionsArr[i];
19+
ele.value = optionsArr[i];
20+
// 默认选中第 0 个元素
21+
if (i === 0) {
22+
ele.selected = true;
23+
}
24+
select.appendChild(ele);
25+
}
26+
this.select = select;
27+
28+
}
29+
30+
/**
31+
* @function WidgetSelect.prototype.getElement
32+
* @description 获取当前模板 Dom 元素。
33+
*/
34+
getElement() {
35+
return this.select;
36+
}
37+
}
38+
SuperMap.Widgets.WidgetSelect = WidgetSelect;

0 commit comments

Comments
 (0)