60 lines
2.6 KiB
HTML
60 lines
2.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
|
||
|
|
<link rel="stylesheet" href="../css/doctest.css">
|
||
|
|
<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
<script src="../lib/3rdparty/all.js"></script>
|
||
|
|
<script src="all.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="Doctest.run()">
|
||
|
|
<h1>
|
||
|
|
Popup Menus
|
||
|
|
</h1>
|
||
|
|
<p>
|
||
|
|
Popup menus are a simple but effective solution to the problem that context dependent commands like "Delete", "Show", "Open"
|
||
|
|
cannot be easily mapped to standard gestures. Depending on the application popup menus can be assigned to taps, long
|
||
|
|
or forced presses or explicit interface elements like buttons.
|
||
|
|
</p>
|
||
|
|
<p>Let's look at an example of a popup menu. It is good practice to use the oncontextmenu handler with a return value of
|
||
|
|
false to ensure that the applications context menu is called instead of the browser context menu:
|
||
|
|
|
||
|
|
<pre><code class="html">
|
||
|
|
oncontextmenu="PopupMenu.open(cmds,
|
||
|
|
{ x: event.offsetX, y: event.offsetY},
|
||
|
|
{ parent: example,
|
||
|
|
keepWithin: example
|
||
|
|
}); return false;"
|
||
|
|
</code></pre> Note that the notch position depends on the event location of the opening event. Note that the position of the open command must be in the coordinates of the parent node.
|
||
|
|
</p>
|
||
|
|
<div id="example" class="interactive" style="position:relative; width: 100%; height: 200px; border: 1px solid lightgray"
|
||
|
|
oncontextmenu="PopupMenu.open(cmds, {x: event.offsetX, y: event.offsetY}, { parent: example, keepWithin: example}); return false;"></div>
|
||
|
|
<script class="doctest">
|
||
|
|
let cmds = {
|
||
|
|
"Start": () => alert("Start"),
|
||
|
|
"Stop": () => alert("Stop")
|
||
|
|
}
|
||
|
|
let app = new App()
|
||
|
|
let popup = new PopupMenu({ parent: example, fontSize: "2em", autoClose: false })
|
||
|
|
|
||
|
|
// Using JavaScripts arrow functions we can describe the
|
||
|
|
// context commands in a concise way
|
||
|
|
popup.showAt(cmds,
|
||
|
|
{ x: 100, y: 150 })
|
||
|
|
app.run()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<p>Sometimes popup menus are used within scaled, rotated, and translated DOM containers. Click into the following scaled
|
||
|
|
(0.5) and rotated container.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div id="example2" class="interactive" style="position:relative; width: 100%; height: 200px; border: 1px solid lightgray; transform: scale(0.5) rotate(15deg);"
|
||
|
|
oncontextmenu="PopupMenu.open(cmds, {x: event.offsetX, y: event.offsetY}, {parent: example2, keepWithin: example2}); return false;"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|