Permalink
Browse files

adding demo for TouchSwipe triggering

  • Loading branch information...
1 parent 25668c2 commit a63c9fa7d8e3b43e6528ea469a651c9a021ea158 @rodneyrehm rodneyrehm committed Dec 29, 2012
View
@@ -112,6 +112,7 @@ $.contextMenu is published under the [MIT license](http://www.opensource.org/lic
* fixing unused variables - ([Issue 100](https://github.com/medialize/jQuery-contextMenu/issues/100))
* adding export of internal functions and event handlers - ([Issue 101](https://github.com/medialize/jQuery-contextMenu/issues/101))
* adding class `context-menu-active` to define state on active trigger element - ([Issue 92](https://github.com/medialize/jQuery-contextMenu/issues/92))
+* adding [demo for TouchSwipe](http://medialize.github.com/jQuery-contextMenu/demo/trigger-swipe.html) activation
### 1.5.25 ###
View
@@ -91,6 +91,7 @@ <h3 id="html">Example HTML: Simple Context Menu</h3>
<li><a href="demo/callback.html">Command's action (callbacks)</a></li>
<li><a href="demo/trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="demo/trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="demo/trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="demo/trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="demo/trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -88,6 +88,7 @@ <h3 id="html">Example HTML: Accesskeys</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -108,6 +108,7 @@ <h3 id="html">Example HTML: Asynchronous</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -95,6 +95,7 @@ <h3 id="html">Example HTML: Command's action (callbacks)</h3>
<li class="current"><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -140,6 +140,7 @@ <h3 id="html">Example HTML: Custom Command Types</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
@@ -89,6 +89,7 @@ <h3 id="html">Example HTML: Disabled Callback</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
@@ -96,6 +96,7 @@ <h3 id="html">Example HTML: Changing Disabled</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -101,6 +101,7 @@ <h3 id="html">Example HTML: Disabled Context Menu</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -81,6 +81,7 @@ <h3 id="html">Example HTML: Disabled Command</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -94,6 +94,7 @@ <h3 id="html">Example HTML: Dynamic on-demand Menu</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -96,6 +96,7 @@ <h3 id="html">Example HTML: Adding new Context Menu Triggers</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -84,6 +84,7 @@ <h3 id="html">Example HTML: Importing HTML5 &lt;menu type=&quot;context&quot;&gt
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
@@ -88,6 +88,7 @@ <h3 id="html">Example HTML: HTML5 Polyfill (Firefox 8)</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -82,6 +82,7 @@ <h3 id="html">Example HTML: HTML5 Polyfill</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -166,6 +166,7 @@ <h3 id="html">Example HTML: Input Commands</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
@@ -90,6 +90,7 @@ <h3 id="html">Example HTML: Keeping the Menu visible</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -176,6 +176,7 @@ <h3 id="html">Example HTML: Menu Title</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -110,6 +110,7 @@ <h3 id="html">Example HTML: Context Menu on DOM Element</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -111,6 +111,7 @@ <h3 id="html">Example HTML: Submenus</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -59,10 +59,11 @@ <h3 id="code">Example code: Custom Activated Context Menu</h3>
$('.context-menu-one').contextMenu();
// or $('.context-menu-one').trigger("contextmenu");
// or $('.context-menu-one').contextMenu({x: 100, y: 100});
- })
+ });
$.contextMenu({
selector: '.context-menu-one',
+ trigger: 'none',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
@@ -96,6 +97,7 @@ <h3 id="html">Example HTML: Custom Activated Context Menu</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li class="current"><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
@@ -90,6 +90,7 @@ <h3 id="html">Example HTML: Hover Activated Context Menu With Autohide</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li class="current"><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -89,6 +89,7 @@ <h3 id="html">Example HTML: Hover Activated Context Menu</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li class="current"><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
@@ -88,6 +88,7 @@ <h3 id="html">Example HTML: Left-Click Trigger</h3>
<li><a href="callback.html">Command's action (callbacks)</a></li>
<li class="current"><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
View
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Swipe Trigger Demo - jQuery contextMenu Plugin</title>
+ <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
+
+ <script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
+ <script src="../jquery.touchSwipe.min.js" type="text/javascript"></script>
+ <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
+ <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
+ <script src="../prettify/prettify.js" type="text/javascript"></script>
+ <script src="../screen.js" type="text/javascript"></script>
+
+ <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+ <link href="../screen.css" rel="stylesheet" type="text/css" />
+ <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-8922143-3']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+</head>
+<body>
+ <a id="github-forkme" href="https://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <div id="container">
+ <h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
+
+ <ul class="menu">
+ <li><a href="../index.html">About</a></li>
+ <li class="active"><a href="../demo.html">Demo</a></li>
+ <li><a href="../docs.html">Documentation</a></li>
+ <li><a href="http://rodneyrehm.de/en/">Author</a></li>
+ </ul>
+
+ <h2 id="demo">Demo: Swipe Trigger</h2>
+
+ <p>This demo uses the (third party) <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin">TouchSwipe</a> plugin.</p>
+
+ <div class="inline-spaces">
+<div class="context-menu-one box menu-1">
+ <strong>swipe right</strong>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Swipe Trigger</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ // make swipe right open the menu
+ $('.context-menu-one').swipe({
+ // see http://labs.skinkers.com/touchSwipe/
+ swipe: function(event, direction, distance, duration, fingerCount) {
+ if (fingerCount === 1) {
+ $(this).contextMenu({
+ x: event.changedTouches[0].screenX,
+ y: event.changedTouches[0].screenY,
+ });
+ }
+ }
+ });
+
+ $.contextMenu({
+ selector: '.context-menu-one',
+ trigger: 'none',
+ callback: function(key, options) {
+ var m = "clicked: " + key;
+ window.console && console.log(m) || alert(m);
+ },
+ items: {
+ "edit": {name: "Edit", icon: "edit"},
+ "cut": {name: "Cut", icon: "cut"},
+ "copy": {name: "Copy", icon: "copy"},
+ "paste": {name: "Paste", icon: "paste"},
+ "delete": {name: "Delete", icon: "delete"},
+ "sep1": "---------",
+ "quit": {name: "Quit", icon: "quit"}
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Swipe Trigger</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+ <li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
+ <li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li class="current"><a href="trigger-swipe.html">Swipe Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="menu-title.html">Menus with titles</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
+ </div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit a63c9fa

Please sign in to comment.