Skip to content

Commit 81bbb75

Browse files
xieguigangxieguigang
committed
how to get value from modal input?
1 parent c37c3a8 commit 81bbb75

File tree

8 files changed

+97
-22
lines changed

8 files changed

+97
-22
lines changed

‎sample_group_UI/UI/css.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ namespace biodeep.ui {
66
if (isNullOrUndefined($ts("#table-style"))) {
77
htmlHead.appendElement($ts("<style>", {
88
id: "table-style"
9-
}).display(`.selected {
9+
}).display(`
10+
.selected {
1011
background-color: lightBlue;
11-
}`)
12-
);
12+
}
13+
`));
1314
}
1415

1516
if (isNullOrUndefined($ts("#context-style"))) {

‎sample_group_UI/UI/html.ts

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
private lastSelectedRow: HTMLTableRowElement;
3838
private trs: HTMLCollectionOf<HTMLTableRowElement>;
3939

40+
public editMode: boolean = true;
41+
4042
/**
4143
* hook events
4244
*/
@@ -45,7 +47,7 @@
4547

4648
// disable text selection
4749
document.onselectstart = function () {
48-
return false;
50+
return !vm.editMode;
4951
}
5052

5153
this.trs = (<HTMLTableElement>$ts("#sampleinfo").any)
@@ -54,34 +56,53 @@
5456

5557
$ts(this.trs).ForEach(tr => tr.onmousedown = function () {
5658
vm.RowClick(tr, false);
59+
vm.editMode = true;
5760
})
5861

59-
this.registerContextMenu();
62+
this.registerContextMenu();
6063
}
6164

6265
private registerContextMenu() {
6366
let menuDisplayed = false;
64-
let menuBox = null;
67+
let menuBox: HTMLElement = null;
68+
let vm = this;
6569

6670
window.addEventListener("contextmenu", function () {
67-
let left = arguments[0].clientX;
68-
let top = arguments[0].clientY;
71+
if (vm.editMode) {
72+
let left = arguments[0].clientX;
73+
let top = arguments[0].clientY;
6974

70-
menuBox = window.document.querySelector(".menu");
71-
menuBox.style.left = left + "px";
72-
menuBox.style.top = top + "px";
73-
menuBox.style.display = "block";
75+
menuBox = window.document.querySelector(".menu");
76+
menuBox.style.left = left + "px";
77+
menuBox.style.top = top + "px";
78+
menuBox.style.display = "block";
7479

75-
arguments[0].preventDefault();
80+
arguments[0].preventDefault();
7681

77-
menuDisplayed = true;
82+
menuDisplayed = true;
83+
}
7884
}, false);
7985

8086
window.addEventListener("click", function () {
8187
if (menuDisplayed == true) {
8288
menuBox.style.display = "none";
8389
}
8490
}, true);
91+
92+
$ts("#add-group").onclick = function () {
93+
vm.buildSampleInfo();
94+
}
95+
$ts("#exit-edit-mode").onclick = function () {
96+
vm.editMode = false;
97+
}
98+
}
99+
100+
private buildSampleInfo() {
101+
let selects = $ts.select(".selected");
102+
103+
$('#myModal').modal();
104+
105+
console.log(selects);
85106
}
86107

87108
RowClick(currenttr: HTMLTableRowElement, lock: boolean) {
@@ -119,7 +140,7 @@
119140
});
120141

121142
for (var i = indexes[0]; i <= indexes[1]; i++) {
122-
tr = this.trs[i - 1];
143+
tr = this.trs[i];
123144

124145
if (!isNullOrUndefined(tr)) {
125146
tr.classList.add('selected');
@@ -134,14 +155,14 @@
134155
}
135156

136157
private static createSampleInfotable(model: biodeep.IsampleInfo[]): HTMLElement {
137-
return $ts.evalHTML.table(model, null, { id: "sampleinfo", class: "sampleinfo" });
158+
return $ts.evalHTML.table(model, null, { id: "sampleinfo", class: ["sampleinfo", "table"] });
138159
}
139160

140161
private static createContextMenu(): HTMLElement {
141162
let div = $ts("<div>", { id: "context", class: "menu" });
142163

143-
div.appendElement($ts("<div>", { class: "menu-item" }).display("添加样本分组"));
144-
div.appendElement($ts("<div>", { class: "menu-item" }).display("退出编辑模式"));
164+
div.appendElement($ts("<div>", { class: "menu-item", id: "add-group" }).display("添加样本分组"));
165+
div.appendElement($ts("<div>", { class: "menu-item", id: "exit-edit-mode" }).display("退出编辑模式"));
145166

146167
return div;
147168
}

‎sample_group_UI/UI/modal.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
namespace biodeep {
2+
3+
export function createInputModal() {
4+
let modal = $ts("<div>", {
5+
class: ["modal", "fade"],
6+
id: "myModal",
7+
tabindex: -1,
8+
role: "dialog",
9+
"aria-labelledby": "myModalLabel"
10+
}).display(`
11+
<div class="modal-dialog" role="document">
12+
<div class="modal-content">
13+
<div class="modal-header">
14+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
15+
<span aria-hidden="true">×</span>
16+
</button>
17+
<h4 class="modal-title" id="myModalLabel">设置分组名称</h4>
18+
</div>
19+
<div class="modal-body">
20+
<p><input id="sample-groupName" type="text" class="form-control"></input></p>
21+
</div>
22+
<div class="modal-footer">
23+
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
24+
<button type="button" class="btn btn-primary">确定</button>
25+
</div>
26+
</div>
27+
</div> `);
28+
29+
$ts("&body").appendElement(modal);
30+
}
31+
}

‎sample_group_UI/app.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
/// <reference path="../../../build/linq.d.ts" />
22

3-
function loadSamples(sampleNames: string[]) {
3+
$ts(function () {
4+
// initialize the web app style
5+
biodeep.ui.doStyle();
6+
biodeep.createInputModal();
7+
})
8+
49

10+
function loadSamples(sampleNames: string[]) {
511

612
}

‎sample_group_UI/package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample_group_UI/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"@types/node": "^6.14.10"
1111
},
1212
"dependencies": {
13+
"@types/jquery": "^3.3.35",
1314
"bootstrap": "^4.4.1",
1415
"jquery": "^3.5.0",
1516
"npm": "^6.14.4",

‎sample_group_UI/sample_group_UI.njsproj

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@
4545
<TypeScriptCompile Include="UI\css.ts">
4646
<SubType>Code</SubType>
4747
</TypeScriptCompile>
48+
<TypeScriptCompile Include="UI\modal.ts">
49+
<SubType>Code</SubType>
50+
</TypeScriptCompile>
4851
</ItemGroup>
4952
<ItemGroup>
5053
<Folder Include="UI\" />

‎test/index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@
1515
<body>
1616
<div id="designer"></div>
1717

18-
<script>
19-
biodeep.ui.doStyle();
20-
18+
<script>
2119
$ts.mode = Modes.debug;
2220
$ts(function () {
2321
let samplenames = [
@@ -67,5 +65,6 @@
6765
console.log(ui.csv);
6866
})
6967
</script>
68+
7069
</body>
7170
</html>

0 commit comments

Comments
 (0)