prepared taphold

Author: mar10

jquery.contextmenu.js

@@ -15,10 +15,11 @@
 		return $menu.data("ui-menu") || $menu.data("menu");
 	}
 	$.widget("ui.contextmenu", {
-		version: "0.1.0",
+		version: "0.0.1",
 		options: {
 			delegate: "[data-menu]",  // selector
 			menu: null,      // selector or jQuery or a function returning such
+			taphold: 2000, // open menu after 2000 ms long touch
 			// Events:
 			beforeopen: $.noop, // menu about to open; return `false` to prevent opening
 			blur: $.noop,       // menu option lost focus
@@ -30,7 +31,32 @@
 			select: $.noop      // menu option was selected; return `false` to prevent closing
 		},
 		_create: function () {
-		    this.element.delegate(this.options.delegate, "contextmenu.contextmenu", $.proxy(this._openMenu, this));
+            this.element.delegate(this.options.delegate, "contextmenu.contextmenu", $.proxy(this._openMenu, this));
+            // emulate a 'taphold' event
+            /*
+            this.element.delegate(this.options.delegate, "mousedown.contextmenu", $.proxy(function(event, ui){
+                var self = this;
+                console.log("Event ", event.type, this.timer);
+                if(this.timer){
+                    console.log(" clear " + this.timer);
+                    clearTimeout(this.timer);
+                    this.timer = null;
+                }
+                this.timer = setTimeout(function(){
+                    console.log("Timeout ", event.type, self.timer);
+                    self.open.call(self, $(event.target));
+                    self.timer = null;
+                }, this.options.taphold);
+                console.log("Event started ", event.type, this.timer);
+            }, this));
+            this.element.delegate(this.options.delegate, "mouseup.contextmenu", $.proxy(function(){
+                if(this.timer){
+                    console.log("Event ", event.type, "clear" + this.timer);
+                    clearTimeout(this.timer);
+                    this.timer = null;
+                }
+            }, this));
+            */
 			this._trigger("init");
 		},
 		/** Return menu jQuery object. */
@@ -108,6 +134,10 @@
 		_closeMenu: function(){
 			var self = this, 
 				$menu = this._getMenu();
+            if(this.timer){
+                clearTimeout(this.timer);
+                this.timer = null;
+            }
 			$menu.fadeOut(function() {
 				self._trigger("close");
 			});

sample-widget.html

@@ -14,6 +14,12 @@
     font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
     font-size: 62.5%;
 }
+.hasmenu{
+    border: 1px solid #008;
+    margin: 3px;
+    padding: 2px;
+    width: 30px;
+}
 </style>
 
 <!-- Add code to initialize the tree when the document is loaded: -->
@@ -33,7 +39,7 @@
 //          alert("beforeopen on " + $(event.relatedTarget).text());
         },
         open: function(event) {
-          alert("open on " + $(event.relatedTarget).text());
+//          alert("open on " + $(event.relatedTarget).text());
         },
         select: function(event, ui) {
             var menuId = ui.item.find(">a").attr("href");
@@ -62,7 +68,7 @@ <h1>jquery.contextmenu.js</h1>
 
     <ul id="options" class="ui-helper-hidden">
         <li><a href="#action1">Action 1</a>
-        <li><a href="#action2">Action 2</a>
+        <li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
         <li class="ui-state-disabled"><a href="#action3">Action 3</a>
         <li>----
         <li><a>Extra</a>