The Radical JavaScript Contextmenu

calebpitan

Caleb Adepitan

Posted on December 15, 2019

The Radical JavaScript Contextmenu

You could skip this introduction

It has been forever now, that browser support has limited the amount of cool features we can use on the web. If you cared much about those people who are not privileged to get the latest browser, or due to some other reasons have defaulted in updating their browsers, you'd make your cool features fairly available to all users and keep the vast unsupported extra cool to your development machine. One must be discreet as to what platforms (clients) to support, counting the cost and knowing how it affects the public distribution and availability of your product.

The statistics of support should be estimated before incorporating features into your app or product.

Take for example a gas cooker and a microwave oven (as client), then a small metal dish, which is safe to use on a gas cooker and in an oven. Now, if you tried to replace all metal dishes with ceramic ones, because metal dishes makes too much noise when they collide with something, therefore a pollution to the community. Ceramic dishes are oven compatible but are not gas cooker compatible as they could crack. You would think twice before taking this action, counting the cost and doing the stats. of how many household in the community has a microwave oven.

The only solution we could provide to this problem over the years, is for one brilliant mind to come up with a library that finds alternative means to leverage all client when possible.

Contextmenu

Here today, I present to my fellow developers, who have cut a part out of the web architecture as their abode, The Radical Contextmenu.

The power of contextmenu in front-end design, although available on desktop devices, is not available to mobile devices. The reason for this is yet unknown to me. The contextmenu event works appropriately on desktop, but not on most mobile browsers.
A contextmenu as we all know is triggered by a right click on a desktop and a press-down on a mobile.

Although the contextmenu event doesn't work on mobile, this radical Javascript library Contextmenu has found alternative events pathway to achieve the same result, irrespective of your browser, as long as your browser supports the Touch and TouchEvents interface.

Contextmenu makes use of touch events in place of the contextmenu event. With the help of touch events a press-down is detected. The press-down can be controlled by setting a timeout—a timeout that determines a valid press-down. If a timeout of 800ms is specified, a press-down won't be initiated until an uninterrupted touch signal/gesture that lapses 800ms is detected.

The contextmenu interface provided by this library provides four positioning system.

  • absolute
  • fixed
  • relative
  • static

This positioning system is unrelated to the css positioning of the target element. See the documentation

Releases

There have been two releases recently. The first release, v0.1.0, was a faulty one, as the package name was not unique enough to be published on npm. This is corrected in the latest release, v0.1.1, and has made the first npm publication.

Contextmenu on Github

The API is still susceptible to frequent changes. Till a stable release: we can publish a v1.0 of the library.
Check it on Github, and please contribute with pull request, report bugs using the issue tracker, gracias.

💖 💪 🙅 🚩
calebpitan
Caleb Adepitan

Posted on December 15, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

The Radical JavaScript Contextmenu
opensource The Radical JavaScript Contextmenu

December 15, 2019