tests/manual/contextmenu.html

	contextmenu.html revision 68b1d15dad8af70374cec83a13758dce5621de1d
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots<!DOCTYPE html>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots<html lang="en">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots    <head>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <meta charset="utf-8">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <meta http-equiv="X-UA-Compatible" content="IE=edge">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <title>contextmenu synthetic event</title>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <meta name="author" content="Todd Kloots">
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <style type="text/css">
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots          .contextmenu {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots              background: #ccc;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots              padding: 0;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots              margin: 0;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots              list-style-type: none;
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots          }
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots          .contextmenu li {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots              white-space: nowrap;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots          }
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        </style>
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <script type="text/javascript" src="/build/yui/yui.js"></script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        <script type="text/javascript">
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots          YUI({
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots            filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots            allowRollup: false,
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots            lazyEventFacade: true
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots          }).use("event-contextmenu", "node-event-delegate", "overlay", function (Y) {
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots            var btn = Y.one("#btn-1"),
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                btn2 = Y.one("#btn-2"),
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                contextmenu;
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            function onContextmenu(e) {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                if (!contextmenu) {
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                  contextmenu = new Y.Overlay({
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                      bodyContent: "<ul class=\"contextmenu\"><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>",
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                      visible: false,
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                      constrain: true
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                  });
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                  contextmenu.render(Y.one("body"));
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                }
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                contextmenu.set("xy", [e.pageX, e.pageY]);
68b1d15dad8af70374cec83a13758dce5621de1dTodd Kloots                contextmenu.show();
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            }
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            btn.on("contextmenu", onContextmenu);
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            btn2.on("contextmenu", onContextmenu);
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            Y.one("doc").delegate("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots                Y.log("First delegate() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            }, "a");
f856a43636b28d436393ba16bcbe9016ebf7a59aTodd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            Y.one("doc").delegate("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots                Y.log("Second delegate() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            }, "a");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            btn.on("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots                Y.log("First on() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            });
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            btn.on("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots                Y.log("Second on() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            });
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            btn.on("contextmenu", function (e) {
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots                Y.log("Third on() listener called");
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots            });
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots          });
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
12df09d952fd1b176ed5930f9b30c7fb1a80dc0bTodd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots        </script>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots    </head>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots    <body>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots       <a href="#" id="btn-1">Button 1</a>
259d076b01f41c9f1846783430d4db658226dab1Todd Kloots       <button type="button" id="btn-2">Click Me</button>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots    </body>
7af920b5469a3ebc416dace31e18e2d1abfea057Todd Kloots</html>