.travis.yml

@@ -10,7 +10,9 @@ env:
     - GIT_EMAIL: couscous@couscous.io
     - GH_REF: github.com/swisnl/jQuery-contextMenu
     - SAUCE_USERNAME: "bbrala-contextmenu"
-    - secure:  "rEkgz8GHGUs0WDeuo1VPcQMAiO26dBs3b4dT1j67XtJEIHojcLNjjx2z434E+KaweuO0peWWmKFkT6ObZxJTnLd6xxyJjwhXERVaLNtwwlIxt20SpWCKFm5hOGFOwiCRP9pXK2vxWxnHKFJtGyX+pwDGjy0VtMF3ME8/KaHwfvs="
+    # GH_TOKEN
+    - secure: gWIh9j5sUgVn9DmVDYnmS4OT2GhHmsndLTPKRLgAF8LM4sa65SkSCNB4Xu5drcb1a6e4egOe0bXNgXSl70ApBoQIxPvjvWxLBCjPQBPD6kJjo2ovOsfxLARMSGAqlGN7hiocLi+s8qa7RP3uuJ373z+Ge+bLIV6vFxEjK9U3Iz4=
+    # SAUCE_ACCESS_KEY
     - secure: UOse3txRLxLQKsPVQf6OKZZP3c0nLaPJ+4G2vR/qJqBXCTTCQ84+9qx9ih/40FDFcjVXwabJsdn0EhkqDw4h50OGdc58V1UfSbk7g1RiuvvRakOPTK0J9h7bEkBPb7QQXCvAVfOZ81DN6l5lMjmH1tiC2T/h/MNOLHPXsbzXElg=
 
 matrix:
@@ -25,7 +27,7 @@ matrix:
       node_js: "10"
       env: JQUERY=3
     - language: php
-      php: 5.5
+      php: 7.4
       env: DOCUMENTATION=1
   allow_failures:
     - env: DOCUMENTATION=1
@@ -36,7 +38,7 @@ install:
 - if [ "$DOCUMENTATION" ] ; then cd documentation && composer global require couscous/couscous ; fi
 
 script:
-- if [ "$JQUERY" ] ; then yarn run test ; else /home/travis/.composer/vendor/bin/couscous travis-auto-deploy --php-version=5.5 ; fi
+- if [ "$JQUERY" ] ; then yarn run test ; else /home/travis/.config/composer/vendor/bin/couscous travis-auto-deploy --php-version=7.4 ; fi
 - if [ "$JQUERY" ] && [ "$SAUCE_USERNAME" ] ; then yarn run test-sauce ; fi
 
 deploy:

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Changelog ##
 
+### Unreleased
+
+* Context menu no longer jumps to the top of the screen #749
+
 ### 2.9.2
 
 * Fix reflow when adding click layer to page (fixed #721, thanks @Rhain)

README.md

@@ -2,12 +2,12 @@
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/swisnl/jQuery-contextMenu.svg)](https://greenkeeper.io/)
 
-[![Travis](https://img.shields.io/travis/swisnl/jQuery-contextMenu/master.svg?style=flat-square&maxAge=600)](https://travis-ci.org/swisnl/jQuery-contextMenu) [![npm](https://img.shields.io/npm/v/jquery-contextmenu.svg?style=flat-square&maxAge=600)](https://www.npmjs.com/package/jquery-contextmenu) [![npm](https://img.shields.io/npm/dm/jquery-contextmenu.svg?style=flat-square&maxAge=600)](https://www.npmjs.com/package/jquery-contextmenu) [![CDNJS](https://img.shields.io/cdnjs/v/jquery-contextmenu.svg?style=flat-square&maxAge=600)](https://cdnjs.com/libraries/jquery-contextmenu) [![npm](https://img.shields.io/npm/l/jquery-contextmenu.svg?style=flat-square)]()
+[![Travis](https://img.shields.io/travis/com/swisnl/jQuery-contextMenu/master.svg?style=flat-square&maxAge=600)](https://app.travis-ci.com/github/swisnl/jQuery-contextMenu) [![npm](https://img.shields.io/npm/v/jquery-contextmenu.svg?style=flat-square&maxAge=600)](https://www.npmjs.com/package/jquery-contextmenu) [![npm](https://img.shields.io/npm/dm/jquery-contextmenu.svg?style=flat-square&maxAge=600)](https://www.npmjs.com/package/jquery-contextmenu) [![CDNJS](https://img.shields.io/cdnjs/v/jquery-contextmenu.svg?style=flat-square&maxAge=600)](https://cdnjs.com/libraries/jquery-contextmenu) [![npm](https://img.shields.io/npm/l/jquery-contextmenu.svg?style=flat-square)]() [![Buy us a tree](https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen.svg?style=flat-square)](https://plant.treeware.earth/swisnl/jQuery-contextMenu)
 
-$.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.
+`$.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://swisnl.github.io/jQuery-contextMenu/index.html) - 
-[demo](http://swisnl.github.io/jQuery-contextMenu/demo.html) - 
+[features](http://swisnl.github.io/jQuery-contextMenu/index.html) -
+[demo](http://swisnl.github.io/jQuery-contextMenu/demo.html) -
 [documentation](http://swisnl.github.io/jQuery-contextMenu/docs.html)
 
 
@@ -40,7 +40,7 @@ have a look at the [demos](http://swisnl.github.io/jQuery-contextMenu/demo.html)
 
 ## Version 3.0 beta
 
-Version 3.0 is a restructure of the javascript into something more sane written in ES6. It consolidates all API's so callbacks are better documented and more concise. The basics are still the same, but all callbacks are structured differently. 
+Version 3.0 is a restructure of the javascript into something more sane written in ES6. It consolidates all API's so callbacks are better documented and more concise. The basics are still the same, but all callbacks are structured differently.
 
 The goal of this refactor was mostly to make the ContextMenu easier to maintain, and make the API's more consise. It also adds JSdoc comments so the API documentation is generated from the code and it enables code completion.
 
@@ -54,7 +54,7 @@ Firefox 8 does not yet fully implement the contextmenu specification ([Ticket #6
 [a](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command),
 [button](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command),
 [input](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-input-element-to-define-a-command) and
-[option](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-option-element-to-define-a-command) 
+[option](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-option-element-to-define-a-command)
 usable as commands are being ignored altogether. It also doesn't (optically) distinguish between checkbox/radio and regular commands ([Bug #705292](https://bugzilla.mozilla.org/show_bug.cgi?id=705292)).
 
 * [contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
@@ -67,7 +67,7 @@ Note: While the specs note <option>s to be renderd as regular commands, $.
 $.contextMenu("html5");
 ```
 
-## Interaction Principles 
+## Interaction Principles
 
 You're (obviously) able to use the context menu with your mouse. Once it is opened, you can also use the keyboard to (fully) navigate it.
 
@@ -96,17 +96,19 @@ Besides the obvious, browser also react to alphanumeric key strokes. Hitting <co
 * [Addy Osmani](https://github.com/addyosmani) (compatibility with native context menu in Firefox 8)
 
 
-## License 
+## License
 
-$.contextMenu is published under the [MIT license](http://www.opensource.org/licenses/mit-license)
+`$.contextMenu` is published under the [MIT license](http://www.opensource.org/licenses/mit-license)
 
+This package is [Treeware](https://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/swisnl/jQuery-contextMenu) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
 
-## Special thanks 
+
+## Special thanks
 
 Font-Awesome icons used from [encharm/Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG).
 
 ## SWIS :heart: Open Source
 
-[SWIS][link-swis] is a web agency from Leiden, the Netherlands. We love working with open source software. 
+[SWIS][link-swis] is a web agency from Leiden, the Netherlands. We love working with open source software.
 
 [link-swis]: https://www.swis.nl

documentation/demo/menu-promise.md

@@ -0,0 +1,100 @@
+---
+currentMenu: menu-promise 
+---
+
+# Demo: Submenu through promise (asynchronous)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+
+- [Example code](#example-code)
+- [Example HTML](#example-html)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+<h3>right-clickable context menus</h3>
+<ul>
+  <li><label for="immediate">immediate:</label><input id="immediate"/></li>
+  <li><label for="async">async:</label><input id="async"/></li>
+</ul>
+
+## Example code
+
+<script type="text/javascript" class="showcase">
+    $(function() {
+        // normally, contextMenu sets up a handler for right click
+        $.contextMenu({
+            selector: '#immediate',
+            callback: menuCallback,
+            items: buildMenuItems()
+        });
+
+        // for async menus, we set up a handler and a menu for it to call
+        $('#async').on('contextmenu', rightClickHandler)
+        $.contextMenu({
+            selector: '#async',
+            trigger: 'none',
+            build: function($trigger, e) {
+                // return callback set by the mouseup handler
+                return $trigger.data('runCallbackThingie')();
+            }
+        });
+
+        function buildMenuItems () {
+            return {
+                "GTA": {name: "Lysine", icon: "edit"},
+                "TGG": {name: "Tryptophan", icon: "cut"},
+                "TTC": {name: "Phenylalanine", icon: "copy"}
+            }
+        }
+
+        // asynchronous menu item construction takes one second
+        function buildMenuItemsPromise () {
+            return new Promise((accept, reject) => {
+                setTimeout(() => accept(buildMenuItems()), 1000)
+            })
+        }
+
+        // right-click handler enables mouseup handler
+        function rightClickHandler (e) {
+            e.preventDefault();
+            const $this = $(this);
+            $this.off('contextmenu', rightClickHandler);
+
+            // when the items are ready,
+            buildMenuItemsPromise().then(items => {
+
+                // store a callback on the trigger
+                $this.data('runCallbackThingie', function () {
+                    return {
+                        callback: menuCallback,
+                        items: items
+                    };
+                });
+                const _offset = $this.offset(),
+                        position = {
+                            x: _offset.left + 10,
+                            y: _offset.top + 10
+                        }
+                $this.contextMenu(position);
+
+                $this.on('contextmenu', rightClickHandler)
+            });
+        }
+
+        // callback insert letters over the selection
+        function menuCallback (key, options) {
+            const contents = $(this).val(),
+                        start = this.get(0).selectionStart,
+                        end = this.get(0).selectionEnd
+            $(this).val(contents.substr(0, start)
+                                    + key
+                                    + contents.substr(end)
+            )
+        }
+    });
+</script>
+
+## Example HTML
+<div style="display:none;" class="showcase" data-showcase-import=".context-menu-one"></div>

documentation/website/css/screen.css

@@ -70,7 +70,6 @@ div.swis-branding a {
     padding:0;
 }
 div.swis-branding .swis-logo {
-    height:38px;
     width:70px;
     float:left;
     clear:left;

documentation/website/default.twig

@@ -70,7 +70,7 @@
             </ul>
             <div class="swis-branding">
                 <span>Maintained by:</span>
-                <a href="https://www.swis.nl"><img src="{{ baseUrl }}/images/swis-logo.jpg" class="swis-logo">Creative Digital Agency</a>
+                <a href="https://www.swis.nl"><img src="{{ baseUrl }}/images/swis-logo.png" class="swis-logo">Creative Digital Agency</a>
             </div>
         </div>
         &nbsp;

src/jquery.contextMenu.js

@@ -1579,18 +1579,32 @@
                 var $menu = opt.$menu;
                 var $menuOffset = $menu.offset();
                 var winHeight = $(window).height();
+                var winWidth = $(window).width();
                 var winScrollTop = $(window).scrollTop();
+                var winScrollLeft = $(window).scrollLeft();
                 var menuHeight = $menu.height();
+                var outerHeight = $menu.outerHeight();
+                var outerWidth = $menu.outerWidth();
+
                 if(menuHeight > winHeight){
                     $menu.css({
                         'height' : winHeight + 'px',
                         'overflow-x': 'hidden',
                         'overflow-y': 'auto',
                         'top': winScrollTop + 'px'
                     });
-                } else if(($menuOffset.top < winScrollTop) || ($menuOffset.top + menuHeight > winScrollTop + winHeight)){
+                } else if($menuOffset.top < winScrollTop){
                     $menu.css({
-                        'top': winScrollTop + 'px'
+                      'top': winScrollTop + 'px'
+                    });
+                } else if($menuOffset.top + outerHeight > winScrollTop + winHeight){
+                    $menu.css({
+                      'top': $menuOffset.top - (($menuOffset.top + outerHeight) - (winScrollTop + winHeight)) + "px"
+                    });
+                }
+                if($menuOffset.left + outerWidth > winScrollLeft + winWidth){
+                    $menu.css({
+                      'left': $menuOffset.left - (($menuOffset.left + outerWidth) - (winScrollLeft + winWidth)) + "px"
                     });
                 }
             }

src/sass/_variables.scss

@@ -45,8 +45,8 @@ $context-menu-separator-margin: .35em 0 !default;
 $context-menu-icon-font-path: 'font/' !default;
 $context-menu-icon-font-name: 'context-menu-icons' !default;
 $context-menu-icon-size: 1em !default;
-$context-menu-icon-color: #2980B9;
-$context-menu-icon-color-hover: $context-menu-text-color-hover;
+$context-menu-icon-color: #2980B9 !default;
+$context-menu-icon-color-hover: $context-menu-text-color-hover !default;
 
 @keyframes cm-spin {
   0% {