electerious / basiccontext

Easy-to-use context-menu for your website or webapp.

[Deprecated] basicContext

Easy-to-use context-menu for your website or web-app.

Contents

• Demos
• Features
• Requirements
• Setup
• How to use
  • Vanilla JS
  • jQuery
• Themes
• Addons

Demos

Name	Description	Link
Basic demo	basicContext works with all kind of events	Try it on CodePen
Position demo	basicContext never leaves the visible screen-area	Try it on CodePen
Scroll demo	basicContext is scrollable when the context height is bigger than the browser height	Try it on CodePen
Custom close function demo	basicContext lets you define a custom close function	Try it on CodePen
Custom position demo	basicContext accepts an object with custom coordinates	Try it on CodePen
jQuery demo	Use basicContext with the jQuery Event Object	Demo

Features

• Works in all modern browsers
• Written in Vanilla JS
• CommonJS and AMD support
• Layout and theme are separated CSS-files. This makes it easy to style our own context.
• Stays within the viewport and never opens outside the visible screen-area (Demo)
• Scrollable, when the height of the context-menu is bigger than the height of the browser (Demo)

Requirements

basicContext is written in Vanilla JS and only dependents on the following browser APIs:

• classList

All of these APIs are capable of being polyfilled in older browser. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.

Setup

We recommend to install basicContext using Bower or npm.

bower install basicContext

npm install basiccontext

Include the CSS-files in the head and the JS-file at the end of your body:

<link rel="stylesheet" href="dist/basicContext.min.css">
<link rel="stylesheet" href="dist/themes/default.min.css">

<script src="dist/basicContext.min.js"></script>

Skip the JS-file if you want to use basicContext as module together with Browserify:

let basicContext = require('basiccontext')

How to use

Vanilla JS

Show a context-menu by using the following command:

document.querySelector('.btn').addEventListener('click', function(e) {

	let items = [
		{ title: 'Add Sites', icon: 'ion-plus-round', fn: clicked },
		{ title: 'Reset Login', icon: 'ion-person', fn: clicked },
		{ title: 'Help', icon: 'ion-help-buoy', fn: clicked },
		{ title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true },
		{ title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false },
		{ },
		{ title: 'Logout', icon: 'ion-log-out', fn: clicked }
	]

	basicContext.show(items, e)

})

jQuery

basicContext doesn't work properly with the normalized jQuery Event Object, but you can easily bypass this issue using e.originalEvent:

$('.btn').on('click', function(e) {

	let items = [
		{ title: 'Add Sites', icon: 'ion-plus-round', fn: clicked },
		{ title: 'Reset Login', icon: 'ion-person', fn: clicked },
		{ title: 'Help', icon: 'ion-help-buoy', fn: clicked },
		{ title: 'Disabled', icon: 'ion-minus-circled', fn: clicked, disabled: true },
		{ title: 'Invisible', icon: 'ion-eye-disabled', fn: clicked, visible: false },
		{ },
		{ title: 'Logout', icon: 'ion-log-out', fn: clicked }
	]

	basicContext.show(items, e.originalEvent)

})

Themes

Layout and theme are separated CSS-files. This makes it easy to style your own context or to choose from the included themes.

Name	Preview	CSS-File	Demo
Default theme		CSS-File	Demo
Bright theme		CSS-File	Demo
Dark theme		CSS-File	Demo

Addons

Include the following CSS-files to enhance the look and functionality of your contexts.

Name	Preview	CSS-File	Demo
PopIn effect		CSS-File	Demo
FadeIn effect		CSS-File	Demo

basiccontext's Issues

Passing the target element down?

From a cursory look at the source code, it seems to me that the element on which the contextual actions are performed is not passed down to the functions that are invoked for menu items.

Is this already possible or would this be a good addition to the library if implemented?

New item options

Remove those options …

let items = [
  { icon: '', title: '', type: 'item' }
]

… and add the following:

let items = [
  { content: '' }
]

// or

let items = [
  { content: () => '' }
]

Test as CommonJS and AMD module

some ideas

lovely, short written, cool menu, i love it and i love that there is no jquery involved:)
some ideas if you dont mind

• ability to select where the menu you will show relative to the element, maybe left to it, above it or on top of it, etc..
  • the scroll demo is cool, but the scroll bars are so large and the menu it self is so narrow

all the best and thanks again for simple awesome work :)

Support for sub-menus

Problem with positioning when using flexbox layout

I have a flaxbox layout in our web app. Topbar and two columns below. When I click to show the menu then the menu is exactly the same count of pixel up as the top bar height it is.

Update demos and documentation

Is this still under development?

Hey there,

It looks like you've built an awesome, easy to use component, but I'm hesitant to use it because it looks like development on it has stalled. There are still features I would like to use that don't appear to have been implemented yet, namely the sub-menu functionality.

So, will development continue for this tool?

Thanks!

[Feature Request] Icons

Ability to have custom Icons? like Google material?

Callback

Like in basicModal, a callback which gets fired when the context shows up.

firing a context menu twice has unexpected behavior

repro steps:

1 attach a context menu to an element
2 right click in the element
3 notice that the context menu appears as it should
4 right click again
5 notice that the context menu is still visible, and so is the built-in context menu (see attached screenshot.)

Expected behavior:
If you keep right clicking it will either toggle the visibility of the context menu or it will re-position it under the new mouse position

is there a way to disable/enable context menu items?

i want the classic "greyed out" behavior for unavailable options.

New show-function parameters

Current:

basicContext.show(items, e, fnClose, fnCallback)

Proposed:

let opts = {
  onClick,
  …
}

basicContext.show(e, items, opts)

Add custom class

An option to add a custom class to the context. Like in basicModal.

Escape data-name

When the title of an item is html, the data-name must be escaped.