Skip to content
This repository

Custom Control Connect to Context Menu #748

tneil opened this Issue March 11, 2013 · 3 comments

3 participants

Tim Neil marchitos Shane Cridlebaugh
Tim Neil
tneil commented March 11, 2013

While bbUI contains multiple versions of Image Lists and a Grid List that utilize the context menu you can also make your own controls that work with the bbUI context menu.

Something to consider when creating controls inside bbUI is the same off-DOM philosophy for applying all your styling changes or modifications before the control is inserted into the DOM. This will make your control perform faster.

Context Menus

One of the features of bbUI is the ability to perform a press-and-hold on a list for the Context Menu to appear. You can also add this functionality to your custom control by using the below steps.

Context Menu Attribute

For consistency with the other controls in bbUI you should add a data-bb-context="true" attribute for your control. This will be your internal trigger to know that you need to provide context menu information on your control.

<div data-bb-type="my-custom-control" data-bb-context="true">
  <!-- My control DOM -->

Markup for Context Menu support

The next step is ensuring that you have the proper attribute and JSON assigned for your control so that the Context Menu knows how to connect. This is done by setting the data-webworks-context attribute on your control. This can be done while processing the content for your control and can be added by using the setAttribute() DOM function.

The contents of the data-webworks-context attribute is a JSON structure identifying information for both the context menu and underlying plumbing to wire back selection events.

  "id" : "myuniqueid",                     // Unique identifier for item
  "type" : "bbui-context",                // Sets the bbUI context for menu items
  "header" : "my header",               // Header text to display at the top of the menu
  "subheader" : "my sub header"    // Sub header text to display at the top of the menu

An example of what this would look like on your DOM element is:

<div data-webworks-context='{"id":"ksjflfui4989us","type":"bbui-context","header":"My","subheader":"header"}' />

One easy way to generate a unique id for your context menu JSON is by calling the bb.guidGenerator() function. This will return you a unique string.

Wiring up events

In order to handle the highlight state of the control you will need to add a drawSelected () and drawUnselected() function to your control.

These are the functions where you can change the CSS styling of your control like the way the image list or grid list items draw a selected state based on if the context menu is shown or cancelled.


This is great, there should be a "onContextShowing" event too, to give the ability to dinamically show/hide context menu items before the menu become visible

Shane Cridlebaugh

This is very cool, but will it also over-ride the system standard context menu?

Tim Neil
tneil commented May 28, 2013

That will be up to you on how you want to handle it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.