Skip to content

Commit 930ac94

Browse files
ondrasondras
committed
menu finished
1 parent d586a84 commit 930ac94

File tree

7 files changed

+83
-22
lines changed

7 files changed

+83
-22
lines changed

‎css/menu.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
#menu {
2+
position: absolute;
3+
z-index: 1;
4+
border: 1px solid #666;
5+
background-color: #fff;
6+
}
7+
8+
#menu button {
9+
display: block;
10+
background-color: transparent;
11+
border: none;
12+
margin: 0;
13+
padding: 3px 6px;
14+
width: 120px;
15+
}
16+
17+
#menu button:hover {
18+
font-weight: bold;
19+
}
20+
21+
#menu span {
22+
display: block;
23+
border-top: 1px solid #666;
24+
margin-top: 4px;
25+
padding-top: 4px;
26+
}

‎css/style.css

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import url(ui.css);
22
@import url(item.css);
33
@import url(shape.css);
4+
@import url(menu.css);
45

56
* {
67
font-family: source sans pro, sans-serif;
@@ -57,14 +58,3 @@ ul {
5758
#tip.hidden {
5859
opacity: 0;
5960
}
60-
61-
#menu {
62-
position: absolute;
63-
z-index: 1;
64-
}
65-
66-
#menu button {
67-
display: block;
68-
background-color: #fff;
69-
border: none;
70-
}

‎index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -183,9 +183,12 @@ <h3>Help</h3>
183183
</div>
184184

185185
<div id="menu">
186-
<button data-command="InsertSibling"></button>
187186
<button data-command="InsertChild"></button>
187+
<button data-command="InsertSibling"></button>
188188
<button data-command="Delete"></button>
189+
<span></span>
190+
<button data-command="Edit"></button>
191+
<button data-command="Value"></button>
189192
</div>
190193

191194
<script>

‎my-mind.js

+26-5
Original file line numberDiff line numberDiff line change
@@ -616,12 +616,14 @@ MM.Item.prototype.startEditing = function() {
616616

617617
this._dom.text.addEventListener("input", this);
618618
this._dom.text.addEventListener("keydown", this);
619+
this._dom.text.addEventListener("blur", this);
619620
return this;
620621
}
621622

622623
MM.Item.prototype.stopEditing = function() {
623624
this._dom.text.removeEventListener("input", this);
624625
this._dom.text.removeEventListener("keydown", this);
626+
this._dom.text.removeEventListener("blur", this);
625627

626628
this._dom.text.blur();
627629
this._dom.text.contentEditable = false;
@@ -641,6 +643,10 @@ MM.Item.prototype.handleEvent = function(e) {
641643
if (e.keyCode == 9) { e.preventDefault(); } /* TAB has a special meaning in this app, do not use it to change focus */
642644
break;
643645

646+
case "blur":
647+
MM.Command.Finish.execute();
648+
break;
649+
644650
case "click":
645651
if (this._collapsed) { this.expand(); } else { this.collapse(); }
646652
MM.App.select(this);
@@ -1318,9 +1324,18 @@ MM.Menu = {
13181324
_port: null,
13191325

13201326
open: function(x, y) {
1321-
this._dom.node.style.left = x+"px";
1322-
this._dom.node.style.top = y+"px";
13231327
this._dom.node.style.display = "";
1328+
var w = this._dom.node.offsetWidth;
1329+
var h = this._dom.node.offsetHeight;
1330+
1331+
var left = x;
1332+
var top = y;
1333+
1334+
if (left > this._port.offsetWidth / 2) { left -= w; }
1335+
if (top > this._port.offsetHeight / 2) { top -= h; }
1336+
1337+
this._dom.node.style.left = left+"px";
1338+
this._dom.node.style.top = top+"px";
13241339
},
13251340

13261341
close: function() {
@@ -1333,11 +1348,17 @@ MM.Menu = {
13331348
return;
13341349
}
13351350

1336-
e.stopPropagation();
1351+
e.stopPropagation(); /* no dragdrop, no blur of activeElement */
1352+
e.preventDefault(); /* we do not want to focus the button */
13371353

13381354
var command = e.target.getAttribute("data-command");
13391355
if (!command) { return; }
1340-
MM.Command[command].execute();
1356+
1357+
command = MM.Command[command];
1358+
if (!command.isValid()) { return; }
1359+
1360+
command.execute();
1361+
this.close();
13411362
},
13421363

13431364
init: function(port) {
@@ -4289,7 +4310,7 @@ MM.Mouse.handleEvent = function(e) {
42894310
var item = MM.App.map.getItemFor(e.target);
42904311
if (item == MM.App.current && MM.App.editing) { return; }
42914312

4292-
document.activeElement && document.activeElement.blur(); /* blur the panel FIXME only if activeElement is in the UI? */
4313+
document.activeElement && document.activeElement.blur();
42934314
this._startDrag(e, item);
42944315
break;
42954316

‎src/item.js

+6
Original file line numberDiff line numberDiff line change
@@ -338,12 +338,14 @@ MM.Item.prototype.startEditing = function() {
338338

339339
this._dom.text.addEventListener("input", this);
340340
this._dom.text.addEventListener("keydown", this);
341+
this._dom.text.addEventListener("blur", this);
341342
return this;
342343
}
343344

344345
MM.Item.prototype.stopEditing = function() {
345346
this._dom.text.removeEventListener("input", this);
346347
this._dom.text.removeEventListener("keydown", this);
348+
this._dom.text.removeEventListener("blur", this);
347349

348350
this._dom.text.blur();
349351
this._dom.text.contentEditable = false;
@@ -363,6 +365,10 @@ MM.Item.prototype.handleEvent = function(e) {
363365
if (e.keyCode == 9) { e.preventDefault(); } /* TAB has a special meaning in this app, do not use it to change focus */
364366
break;
365367

368+
case "blur":
369+
MM.Command.Finish.execute();
370+
break;
371+
366372
case "click":
367373
if (this._collapsed) { this.expand(); } else { this.collapse(); }
368374
MM.App.select(this);

‎src/menu.js

+19-4
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@ MM.Menu = {
33
_port: null,
44

55
open: function(x, y) {
6-
this._dom.node.style.left = x+"px";
7-
this._dom.node.style.top = y+"px";
86
this._dom.node.style.display = "";
7+
var w = this._dom.node.offsetWidth;
8+
var h = this._dom.node.offsetHeight;
9+
10+
var left = x;
11+
var top = y;
12+
13+
if (left > this._port.offsetWidth / 2) { left -= w; }
14+
if (top > this._port.offsetHeight / 2) { top -= h; }
15+
16+
this._dom.node.style.left = left+"px";
17+
this._dom.node.style.top = top+"px";
918
},
1019

1120
close: function() {
@@ -18,11 +27,17 @@ MM.Menu = {
1827
return;
1928
}
2029

21-
e.stopPropagation();
30+
e.stopPropagation(); /* no dragdrop, no blur of activeElement */
31+
e.preventDefault(); /* we do not want to focus the button */
2232

2333
var command = e.target.getAttribute("data-command");
2434
if (!command) { return; }
25-
MM.Command[command].execute();
35+
36+
command = MM.Command[command];
37+
if (!command.isValid()) { return; }
38+
39+
command.execute();
40+
this.close();
2641
},
2742

2843
init: function(port) {

‎src/mouse.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ MM.Mouse.handleEvent = function(e) {
4343
var item = MM.App.map.getItemFor(e.target);
4444
if (item == MM.App.current && MM.App.editing) { return; }
4545

46-
document.activeElement && document.activeElement.blur(); /* blur the panel FIXME only if activeElement is in the UI? */
46+
document.activeElement && document.activeElement.blur();
4747
this._startDrag(e, item);
4848
break;
4949

0 commit comments

Comments
 (0)