Skip to content

Commit d586a84

Browse files
ondrasondras
committed
menu experiments
1 parent e58f8f2 commit d586a84

File tree

7 files changed

+134
-15
lines changed

7 files changed

+134
-15
lines changed

‎Makefile

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ SOURCES = src/mm.js \
88
src/tip.js \
99
src/action.js \
1010
src/clipboard.js \
11+
src/menu.js \
1112
src/command.js \
1213
src/command.edit.js \
1314
src/command.select.js \

‎css/style.css

+12-1
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,15 @@ ul {
5656

5757
#tip.hidden {
5858
opacity: 0;
59-
}
59+
}
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

+13-10
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
<title>My Mind</title>
77
<link rel="icon" href="favicon.ico" />
88
<script src="my-mind.js"></script>
9-
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
10-
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
9+
<xscript src="https://cdn.firebase.com/v0/firebase.js"></script>
10+
<xscript src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
1111
<link rel="stylesheet" href="css/font.css" />
1212
<link rel="stylesheet" href="css/style.css" />
1313
<link rel="stylesheet" href="css/print.css" media="print" />
1414
</head>
15-
<body onload="init()">
15+
<body>
1616
<ul id="port">
1717
<div id="tip">Press ‘Tab’ to Insert Child, ‘Enter’ to Insert Sibling Node. For more tips/news, follow <a href="https://twitter.com/my_mind_app" target="_blank">@my_mind_app</a>.</div>
1818
</ul>
@@ -181,13 +181,12 @@ <h3>Help</h3>
181181
<p><span>Other</span></p>
182182
<table class="other"></table>
183183
</div>
184-
185-
<script>
186-
var init = function() {
187-
MM.App.init();
188-
MM.App.io.restore();
189-
}
190-
</script>
184+
185+
<div id="menu">
186+
<button data-command="InsertSibling"></button>
187+
<button data-command="InsertChild"></button>
188+
<button data-command="Delete"></button>
189+
</div>
191190

192191
<script>
193192
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -198,6 +197,10 @@ <h3>Help</h3>
198197
ga('send', 'pageview');
199198
</script>
200199

200+
<script>
201+
MM.App.init();
202+
MM.App.io.restore();
203+
</script>
201204
<!--
202205
TODO:
203206
shortterm:

‎my-mind.js

+54-2
Original file line numberDiff line numberDiff line change
@@ -1313,6 +1313,49 @@ MM.Clipboard._endCut = function() {
13131313
this._data = null;
13141314
this._mode = "";
13151315
}
1316+
MM.Menu = {
1317+
_dom: {},
1318+
_port: null,
1319+
1320+
open: function(x, y) {
1321+
this._dom.node.style.left = x+"px";
1322+
this._dom.node.style.top = y+"px";
1323+
this._dom.node.style.display = "";
1324+
},
1325+
1326+
close: function() {
1327+
this._dom.node.style.display = "none";
1328+
},
1329+
1330+
handleEvent: function(e) {
1331+
if (e.currentTarget != this._dom.node) {
1332+
this.close();
1333+
return;
1334+
}
1335+
1336+
e.stopPropagation();
1337+
1338+
var command = e.target.getAttribute("data-command");
1339+
if (!command) { return; }
1340+
MM.Command[command].execute();
1341+
},
1342+
1343+
init: function(port) {
1344+
this._port = port;
1345+
this._dom.node = document.querySelector("#menu");
1346+
this._port.appendChild(this._dom.node);
1347+
var buttons = this._dom.node.querySelectorAll("[data-command]");
1348+
[].slice.call(buttons).forEach(function(button) {
1349+
button.innerHTML = MM.Command[button.getAttribute("data-command")].label;
1350+
});
1351+
1352+
this._port.addEventListener("mousedown", this);
1353+
this._dom.node.addEventListener("mousedown", this);
1354+
1355+
this.close();
1356+
}
1357+
}
1358+
13161359
MM.Command = Object.create(MM.Repo, {
13171360
keys: {value: []},
13181361
editMode: {value: false},
@@ -4218,6 +4261,7 @@ MM.Mouse.init = function(port) {
42184261
this._port.addEventListener("dblclick", this);
42194262
this._port.addEventListener("wheel", this);
42204263
this._port.addEventListener("mousewheel", this);
4264+
this._port.addEventListener("contextmenu", this);
42214265
}
42224266

42234267
MM.Mouse.handleEvent = function(e) {
@@ -4232,6 +4276,15 @@ MM.Mouse.handleEvent = function(e) {
42324276
if (item) { MM.Command.Edit.execute(); }
42334277
break;
42344278

4279+
case "contextmenu":
4280+
var item = MM.App.map.getItemFor(e.target);
4281+
if (item) {
4282+
e.preventDefault();
4283+
MM.App.select(item);
4284+
MM.Menu.open(e.clientX, e.clientY);
4285+
}
4286+
break;
4287+
42354288
case "mousedown":
42364289
var item = MM.App.map.getItemFor(e.target);
42374290
if (item == MM.App.current && MM.App.editing) { return; }
@@ -4430,8 +4483,6 @@ MM.Mouse._visualizeDragState = function(state) {
44304483
var spread = (x || y ? -2 : 2);
44314484
node.style.boxShadow = (x*offset) + "px " + (y*offset) + "px 2px " + spread + "px #000";
44324485
}
4433-
4434-
44354486
}
44364487
MM.App = {
44374488
keyboard: null,
@@ -4536,6 +4587,7 @@ MM.App = {
45364587

45374588
MM.Tip.init();
45384589
MM.Keyboard.init();
4590+
MM.Menu.init(this._port);
45394591
MM.Mouse.init(this._port);
45404592

45414593
window.addEventListener("resize", this);

‎src/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ MM.App = {
101101

102102
MM.Tip.init();
103103
MM.Keyboard.init();
104+
MM.Menu.init(this._port);
104105
MM.Mouse.init(this._port);
105106

106107
window.addEventListener("resize", this);

‎src/menu.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
MM.Menu = {
2+
_dom: {},
3+
_port: null,
4+
5+
open: function(x, y) {
6+
this._dom.node.style.left = x+"px";
7+
this._dom.node.style.top = y+"px";
8+
this._dom.node.style.display = "";
9+
},
10+
11+
close: function() {
12+
this._dom.node.style.display = "none";
13+
},
14+
15+
handleEvent: function(e) {
16+
if (e.currentTarget != this._dom.node) {
17+
this.close();
18+
return;
19+
}
20+
21+
e.stopPropagation();
22+
23+
var command = e.target.getAttribute("data-command");
24+
if (!command) { return; }
25+
MM.Command[command].execute();
26+
},
27+
28+
init: function(port) {
29+
this._port = port;
30+
this._dom.node = document.querySelector("#menu");
31+
this._port.appendChild(this._dom.node);
32+
var buttons = this._dom.node.querySelectorAll("[data-command]");
33+
[].slice.call(buttons).forEach(function(button) {
34+
button.innerHTML = MM.Command[button.getAttribute("data-command")].label;
35+
});
36+
37+
this._port.addEventListener("mousedown", this);
38+
this._dom.node.addEventListener("mousedown", this);
39+
40+
this.close();
41+
}
42+
}
43+

‎src/mouse.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ MM.Mouse.init = function(port) {
1515
this._port.addEventListener("dblclick", this);
1616
this._port.addEventListener("wheel", this);
1717
this._port.addEventListener("mousewheel", this);
18+
this._port.addEventListener("contextmenu", this);
1819
}
1920

2021
MM.Mouse.handleEvent = function(e) {
@@ -29,6 +30,15 @@ MM.Mouse.handleEvent = function(e) {
2930
if (item) { MM.Command.Edit.execute(); }
3031
break;
3132

33+
case "contextmenu":
34+
var item = MM.App.map.getItemFor(e.target);
35+
if (item) {
36+
e.preventDefault();
37+
MM.App.select(item);
38+
MM.Menu.open(e.clientX, e.clientY);
39+
}
40+
break;
41+
3242
case "mousedown":
3343
var item = MM.App.map.getItemFor(e.target);
3444
if (item == MM.App.current && MM.App.editing) { return; }
@@ -227,6 +237,4 @@ MM.Mouse._visualizeDragState = function(state) {
227237
var spread = (x || y ? -2 : 2);
228238
node.style.boxShadow = (x*offset) + "px " + (y*offset) + "px 2px " + spread + "px #000";
229239
}
230-
231-
232240
}

0 commit comments

Comments
 (0)