Editing Choices In-line

Status: Unset

The ChoiceEdit widget allows users to choose an item from an enum, in-place.

Required include dependencies

  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>

Example instantiation

    var LAZR_YUI_CONFIG = {
        filter: "min",
        base: "../../build/",
        modules: LAZR_MODULES,
    };
    YUI(LAZR_YUI_CONFIG).use('node', 'event', 'widget', 'plugin', 'overlay',
                             'lazr.choiceedit', function(Y) {

    var choice_edit = new Y.ChoiceSource({
        contentBox:  '#status',
        value:       'incomplete',
        title:       'Change status to',
        items: [
          { name: 'New', value: 'new', style: '',
            help: '', disabled: false },
          { name: 'Invalid', value: 'invalid', style: '', 
            help: '', disabled: true },
          { name: 'Incomplete', value: 'incomplete', style: '', 
            help: '', disabled: false },
          { name: 'Fix Released', value: 'fixreleased', style: '', 
            help: '', disabled: false },
          { name: 'Fix Committed', value: 'fixcommitted', style: '', 
            help: '', disabled: true },
          { name: 'In Progress', value: 'inprogress', style: '', 
            help: '', disabled: false }
        ]
    });

    choice_edit.render();
    })
    

Widget setup

DOM Structure

The widget requires a well-structured block of elements. Various parts of the block will be discovered by the widget. Here's an example of some existing markup:

<p id="thestatus">
Status: <span class="value">Unset</span>
<img class="editicon" src="https://bugs.edge.launchpad.net/@@/edit">
</p>

The choicelist requires three DOM elements to work correctly:

Initialization

The ChoiceSource widget requires the following parameters:

Parameter Meaning
contentBox A selector unambiguously identifying the contentBox as described in the DOM Structure section above
value The current value of the field. This must match one of the value properties on an item in items. If that item's name field is different from the text currently displayed in the "value" node described in DOM Structure, the text in that "value" node will be changed for the name.
title The title displayed at the top of the popup menu
items A list of dictionaries. Each dictionary must contain the fields described below.

Fields in each item in items

nameThe displayed text for a selection
valueThe value sent to the server for a selection
styleArbitrary CSS styles applied to an item when displayed in the popup menu (not currently implemented)
help(reserved for future expansion)
disabledBoolean field: disabled values are displayed as disabled in the popup menu and cannot be selected

Null choice edit

Sometimes a choice edit may allow choosing from several values, as well as null. In such cases you may want to display a different text and an add icon rather than the null value and an edit icon. That's what the NullChoiceSource widget is for.

Choose something

This widget requires a slightly more elaborate HTML setup, with a place for the add icon, and for the text to display when the chosen value is null.
<p id="nullchoiceedit" style="margin-top: 25px">
  <img class="addicon" src="https://bugs.edge.launchpad.net/@@/add">
  <span class="nulltext">Choose something</span>
  <span class="value" style="display:none" />
  <img class="editicon" style="display:none" src="https://bugs.edge.launchpad.net/@@/edit">
</p>