more doc stuff

swisnl · Aug 24, 2011 · b7d4caf · b7d4caf
1 parent ea70ccd
commit b7d4caf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,5 @@
 # jQuery contextMenu plugin & polyfill #
 
-
-##Reasons for this fork:
-
-1) The official release of $.contextMenu is missing a test to check for native support of contextmenu in the browser.
-
-2) The Firefox nightlies implement contextmenu using the 'menuitem' tags for menu-structure. The specs however state that 'command' tags should be used for this purpose. Whilst the contextMenu plugin handles correct support for 'command' items, it doesn't for 'menuitem'. My fork handles this.
-
-[contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
-
-
-##Original summary
-
 $.contextMenu is a management facility for - you guessed it - context menus. It was designed for an application where there are hundreds of elements that may show a context menu - so intialization speed and memory usage are kept fairly small. It also allows to register context menus without providing actual markup, as $.contextMenu generates DOMElements as needed.
 
 [features](http://medialize.github.com/jQuery-contextMenu/index.html) - 
@@ -23,11 +11,17 @@ $.contextMenu is a management facility for - you guessed it - context menus. It
 * jQuery 1.6 (not tested with older versions)
 * jQuery UI position (optional but recommended)
 
+## HTML5 compatibility ##
+
+The Firefox nightlies implement contextmenu using the 'menuitem' tags for menu-structure. The specs however state that 'command' tags should be used for this purpose. Whilst the contextMenu plugin handles correct support for 'command' items, it doesn't for 'menuitem'. My fork handles this.
+
+[contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
+
 ## Usage ##
 
 register contextMenu from javascript:
 
-<pre><code>
+```javascript
 $.contextMenu({
     // define which elements trigger this menu
     selector: ".with-cool-menu",
@@ -38,13 +32,13 @@ $.contextMenu({
     }
     // there's more, have a look at the demos and docs…
 });
-</code></pre>
+```
 
 import contextMenu from HTML5 &lt;menu&gt;:
 
-<pre><code>
+```javascript
 $.contextMenu("html5");
-</code></pre>
+```
 
 ## Minify ##
 
@@ -60,6 +54,12 @@ use [Google Closure Compiler](http://closure-compiler.appspot.com/home):
 // ==/ClosureCompiler==    
 </code></pre>
 
+## Authors ##
+
+* [Rodney Rehm](https://github.com/rodneyrehm)
+* [Christiaan Baartse](https://github.com/christiaan) (single callback per menu)
+* [Addy Osmani](https://github.com/addyosmani) (compatibility with native context menu in Firefox 8)
+
 ## License ##
 
 $.contextMenu is published under the [MIT license](http://www.opensource.org/licenses/mit-license.php).
diff --git a/demo.html b/demo.html
@@ -451,6 +451,9 @@ <h2 id="html5">Demo: HTML5 &lt;menu&gt;</h2>
         <div class="box menu-2" contextmenu="html5polyfill">
             <strong>polyfill</strong>
         </div>
+		<div class="box menu-1" contextmenu="html5firefox8">
+            <strong>polyfill (firefox8)</strong>
+        </div>
 
         <menu id="html5menu" type="context" style="display:none">
           <command label="rotate" onclick="alert('rotate')">
@@ -472,6 +475,18 @@ <h2 id="html5">Demo: HTML5 &lt;menu&gt;</h2>
             <hr>
             <label>foo bar<input type="text" name="foo"></label>
           </menu>
+        </menu>
+
+		<menu id="html5firefox8" type="context">
+          <menuitem label="rotate" onclick="alert('rotate')"></menuitem>
+          <menuitem label="resize" onclick="alert('resize')"></menuitem>
+          <menu label="share">
+            <menuitem label="twitter" onclick="alert('twitter')"></menuitem>
+            <hr>
+            <menuitem label="facebook" onclick="alert('facebook')"></menuitem>
+            <hr>
+            <label>foo bar<input type="text" name="foo"></label>
+          </menu>
         </menu>
     </div>
     </div>

diff --git a/docs.html b/docs.html
@@ -426,7 +426,8 @@ <h2 id="html5-import">HTML5 &lt;menu&gt; import</h2>
         <li>&lt;menu&gt;</li>
         <li>&lt;hr&gt;</li>
         <li>&lt;a&gt;</li>
-        <li>&lt;command type=&quot;command|radio|checkbox&quot;&gt;</li>
+        <li>&lt;command type=&quot;command|radio|checkbox&quot;&gt; (W3C Specification)</li>
+        <li>&lt;menuitem type=&quot;command|radio|checkbox&quot;&gt; (Firefox 8)</li>
         <li>&lt;input type=&quot;text|radio|checkbox&quot;&gt;</li>
         <li>&lt;select&gt;</li>
         <li>&lt;textare&gt;</li>

diff --git a/index.html b/index.html
@@ -58,6 +58,17 @@ <h2 id="features">Features</h2>
         <li>HTML5 &lt;menu&gt; support</menu>
         <li>CSS is for styling, javascript is not…</li>
     </ul>
+
+    <h2 id="authors">Authors</h2>
+	<ul>
+		<li><a href="https://github.com/rodneyrehm">Rodney Rehm</a></li>
+		<li><a href="https://github.com/christiaan">Christian Baartse</a> (single callback per menu)</li>
+		<li><a href="https://github.com/addyosmani">Addy Osmani</a> (compatibility with native context menu in Firefox 8)</li>
+	</ul>
+
+    <h2 id="license">License</h2>
+	<p>$.contextMenu is published under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>
+
     </div>
 </body>
 </html>
diff --git a/jquery.contextMenu.js b/jquery.contextMenu.js
@@ -3,17 +3,6 @@
  *
  * Authors: Rodney Rehm, Addy Osmani (patches for FF)
  * Web: http://medialize.github.com/jQuery-contextMenu/
- * 
- * Reasons for this fork:
- * 
- * 1) The official release of contextMenu is missing a test to check
- * for native support of contextmenu in the browser.
- *
- * 2) The Firefox nightlies implement contextmenu using the 'menuitem' tags
- * for menu-structure. The specs however state that 'command' tags should
- * be used for this purpose. Whilst the contextMenu plugin handles correct
- * support for 'command' items, it doesn't for 'menuitem'. My fork handles
- * this.
  *
  * Licensed under the MIT License:
  *   http://www.opensource.org/licenses/mit-license.php
@@ -25,13 +14,9 @@
     // TODO
         // ARIA stuff: menuitem, menuitemcheckbox und menuitemradio
 
-/*
-    Mozilla support (firefox nightlies):
-    
-    https://bugzilla.mozilla.org/show_bug.cgi?id=617528
-        -> http://people.mozilla.com/~prouget/bugs/context-menu-test/nativemenu.xpi
-        -> http://people.mozilla.com/~prouget/bugs/context-menu-test/test.html
- */
+// determine html5 compatibility
+$.support.htmlMenuitem = !('HTMLMenuItemElement' in window);
+$.support.htmlCommand = !('HTMLCommandElement' in window);
 
 var // currently active contextMenu trigger
     $currentTrigger = null,
@@ -1012,16 +997,18 @@ $.contextMenu = function(operation, options) {
             break;
 
         case 'html5':
-            if(!('HTMLMenuItemElement' in window) || !('HTMLCommandElement' in window)){
-            $('menu[type="context"]').each(function(){
-                if (this.id) {
-                    $.contextMenu({
-                        selector: '[contextmenu=' + this.id +']',
-                        items: $.contextMenu.fromMenu(this)
-                    });
-                }
-            }).css('display', 'none');
-        }
+            // if <command> or <menuitem> are not handled by the browser,
+            // initialize $.contextMenu for them
+            if ($.support.htmlCommand || $.support.htmlMenuitem) {
+                $('menu[type="context"]').each(function() {
+                    if (this.id) {
+                        $.contextMenu({
+                            selector: '[contextmenu=' + this.id +']',
+                            items: $.contextMenu.fromMenu(this)
+                        });
+                    }
+                }).css('display', 'none');
+            }
             break;
 
         default:
@@ -1117,7 +1104,7 @@ function menuChildren(items, $children, counter) {
         /*
          * <menu> accepts flow-content as children. that means <embed>, <canvas> and such are valid menu items.
          * Not being the sadistic kind, $.contextMenu only accepts:
-         * <command>, <hr>, <span>, <p> <input [text, radio, checkbox]>, <textarea>, <select> and of course <menu>.
+         * <command>, <menuitem>, <hr>, <span>, <p> <input [text, radio, checkbox]>, <textarea>, <select> and of course <menu>.
          * Everything else will be imported as an html node, which is not interfaced with contextMenu.
          */
 
@@ -1139,10 +1126,12 @@ function menuChildren(items, $children, counter) {
 
             // http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-command-element-to-define-a-command
 
+            case 'menuitem':
             case 'command':
                 switch (node.type) {
                     case undefined:
                     case 'command':
+                    case 'menuitem':
                         item = {
                             name: $node.attr('label'),
                             disabled: node.disabled,
@@ -1174,43 +1163,7 @@ function menuChildren(items, $children, counter) {
                         item = undefined;
                 }
                 break;
-
-               case 'menuitem':
-                 switch (node.type) {
-                     case undefined:
-                     case 'menuitem':
-                         item = {
-                             name: $node.attr('label'),
-                             disabled: node.disabled,
-                             callback: (function(){ return function(){ node.click(); }; })()
-                         };
-                         break;
-
-                     case 'checkbox':
-                         item = {
-                             type: 'text',
-                             disabled: node.disabled,
-                             name: $node.attr('label'),
-                             selected: node.checked
-                         };
-                         break;
-
-                     case 'radio':
-                         item = {
-                             type: 'text',
-                             disabled: node.disabled,
-                             name: $node.attr('label'),
-                             radio: node.radiogroup ,
-                             value: node.id,
-                             selected: node.checked
-                         };
-                         break;
-
-                     default:
-                         item = undefined;
-                 }
-                 break;
-
+
             case 'hr':
                 item = '-------';
                 break;