@canonical/yui 3.18.2-pre

package/build/autocomplete-list/autocomplete-list-debug.js

@@ -0,0 +1,906 @@
+YUI.add('autocomplete-list', function (Y, NAME) {
+
+/**
+Traditional autocomplete dropdown list widget, just like Mom used to make.
+
+@module autocomplete
+@submodule autocomplete-list
+**/
+
+/**
+Traditional autocomplete dropdown list widget, just like Mom used to make.
+
+@class AutoCompleteList
+@extends Widget
+@uses AutoCompleteBase
+@uses WidgetPosition
+@uses WidgetPositionAlign
+@constructor
+@param {Object} config Configuration object.
+**/
+
+var Lang   = Y.Lang,
+    Node   = Y.Node,
+    YArray = Y.Array,
+
+    // Whether or not we need an iframe shim.
+    useShim = Y.UA.ie && Y.UA.ie < 7,
+
+    // keyCode constants.
+    KEY_TAB = 9,
+
+    // String shorthand.
+    _CLASS_ITEM        = '_CLASS_ITEM',
+    _CLASS_ITEM_ACTIVE = '_CLASS_ITEM_ACTIVE',
+    _CLASS_ITEM_HOVER  = '_CLASS_ITEM_HOVER',
+    _SELECTOR_ITEM     = '_SELECTOR_ITEM',
+
+    ACTIVE_ITEM      = 'activeItem',
+    ALWAYS_SHOW_LIST = 'alwaysShowList',
+    CIRCULAR         = 'circular',
+    HOVERED_ITEM     = 'hoveredItem',
+    ID               = 'id',
+    ITEM             = 'item',
+    LIST             = 'list',
+    RESULT           = 'result',
+    RESULTS          = 'results',
+    VISIBLE          = 'visible',
+    WIDTH            = 'width',
+
+    // Event names.
+    EVT_SELECT = 'select',
+
+List = Y.Base.create('autocompleteList', Y.Widget, [
+    Y.AutoCompleteBase,
+    Y.WidgetPosition,
+    Y.WidgetPositionAlign
+], {
+    // -- Prototype Properties -------------------------------------------------
+    ARIA_TEMPLATE: '<div/>',
+    ITEM_TEMPLATE: '<li/>',
+    LIST_TEMPLATE: '<ul/>',
+
+    // Widget automatically attaches delegated event handlers to everything in
+    // Y.Node.DOM_EVENTS, including synthetic events. Since Widget's event
+    // delegation won't work for the synthetic valuechange event, and since
+    // it creates a name collision between the backcompat "valueChange" synth
+    // event alias and AutoCompleteList's "valueChange" event for the "value"
+    // attr, this hack is necessary in order to prevent Widget from attaching
+    // valuechange handlers.
+    UI_EVENTS: (function () {
+        var uiEvents = Y.merge(Y.Node.DOM_EVENTS);
+
+        delete uiEvents.valuechange;
+        delete uiEvents.valueChange;
+
+        return uiEvents;
+    }()),
+
+    // -- Lifecycle Prototype Methods ------------------------------------------
+    initializer: function () {
+        var inputNode = this.get('inputNode');
+
+        if (!inputNode) {
+            Y.error('No inputNode specified.');
+            return;
+        }
+
+        this._inputNode  = inputNode;
+        this._listEvents = [];
+
+        // This ensures that the list is rendered inside the same parent as the
+        // input node by default, which is necessary for proper ARIA support.
+        this.DEF_PARENT_NODE = inputNode.get('parentNode');
+
+        // Cache commonly used classnames and selectors for performance.
+        this[_CLASS_ITEM]        = this.getClassName(ITEM);
+        this[_CLASS_ITEM_ACTIVE] = this.getClassName(ITEM, 'active');
+        this[_CLASS_ITEM_HOVER]  = this.getClassName(ITEM, 'hover');
+        this[_SELECTOR_ITEM]     = '.' + this[_CLASS_ITEM];
+
+        /**
+        Fires when an autocomplete suggestion is selected from the list,
+        typically via a keyboard action or mouse click.
+
+        @event select
+        @param {Node} itemNode List item node that was selected.
+        @param {Object} result AutoComplete result object.
+        @preventable _defSelectFn
+        **/
+        this.publish(EVT_SELECT, {
+            defaultFn: this._defSelectFn
+        });
+    },
+
+    destructor: function () {
+        while (this._listEvents.length) {
+            this._listEvents.pop().detach();
+        }
+
+        if (this._ariaNode) {
+            this._ariaNode.remove().destroy(true);
+        }
+    },
+
+    bindUI: function () {
+        this._bindInput();
+        this._bindList();
+    },
+
+    renderUI: function () {
+        var ariaNode    = this._createAriaNode(),
+            boundingBox = this.get('boundingBox'),
+            contentBox  = this.get('contentBox'),
+            inputNode   = this._inputNode,
+            listNode    = this._createListNode(),
+            parentNode  = inputNode.get('parentNode');
+
+        inputNode.addClass(this.getClassName('input')).setAttrs({
+            'aria-autocomplete': LIST,
+            'aria-expanded'    : false,
+            'aria-owns'        : listNode.get('id')
+        });
+
+        // ARIA node must be outside the widget or announcements won't be made
+        // when the widget is hidden.
+        parentNode.append(ariaNode);
+
+        // Add an iframe shim for IE6.
+        if (useShim) {
+            boundingBox.plug(Y.Plugin.Shim);
+        }
+
+        this._ariaNode    = ariaNode;
+        this._boundingBox = boundingBox;
+        this._contentBox  = contentBox;
+        this._listNode    = listNode;
+        this._parentNode  = parentNode;
+    },
+
+    syncUI: function () {
+        // No need to call _syncPosition() here; the other _sync methods will
+        // call it when necessary.
+        this._syncResults();
+        this._syncVisibility();
+    },
+
+    // -- Public Prototype Methods ---------------------------------------------
+
+    /**
+    Hides the list, unless the `alwaysShowList` attribute is `true`.
+
+    @method hide
+    @see show
+    @chainable
+    **/
+    hide: function () {
+        return this.get(ALWAYS_SHOW_LIST) ? this : this.set(VISIBLE, false);
+    },
+
+    /**
+    Selects the specified _itemNode_, or the current `activeItem` if _itemNode_
+    is not specified.
+
+    @method selectItem
+    @param {Node} [itemNode] Item node to select.
+    @param {EventFacade} [originEvent] Event that triggered the selection, if
+        any.
+    @chainable
+    **/
+    selectItem: function (itemNode, originEvent) {
+        if (itemNode) {
+            if (!itemNode.hasClass(this[_CLASS_ITEM])) {
+                return this;
+            }
+        } else {
+            itemNode = this.get(ACTIVE_ITEM);
+
+            if (!itemNode) {
+                return this;
+            }
+        }
+
+        this.fire(EVT_SELECT, {
+            itemNode   : itemNode,
+            originEvent: originEvent || null,
+            result     : itemNode.getData(RESULT)
+        });
+
+        return this;
+    },
+
+    // -- Protected Prototype Methods ------------------------------------------
+
+    /**
+    Activates the next item after the currently active item. If there is no next
+    item and the `circular` attribute is `true`, focus will wrap back to the
+    input node.
+
+    @method _activateNextItem
+    @chainable
+    @protected
+    **/
+    _activateNextItem: function () {
+        var item = this.get(ACTIVE_ITEM),
+            nextItem;
+
+        if (item) {
+            nextItem = item.next(this[_SELECTOR_ITEM]) ||
+                    (this.get(CIRCULAR) ? null : item);
+        } else {
+            nextItem = this._getFirstItemNode();
+        }
+
+        this.set(ACTIVE_ITEM, nextItem);
+
+        return this;
+    },
+
+    /**
+    Activates the item previous to the currently active item. If there is no
+    previous item and the `circular` attribute is `true`, focus will wrap back
+    to the input node.
+
+    @method _activatePrevItem
+    @chainable
+    @protected
+    **/
+    _activatePrevItem: function () {
+        var item     = this.get(ACTIVE_ITEM),
+            prevItem = item ? item.previous(this[_SELECTOR_ITEM]) :
+                    this.get(CIRCULAR) && this._getLastItemNode();
+
+        this.set(ACTIVE_ITEM, prevItem || null);
+
+        return this;
+    },
+
+    /**
+    Appends the specified result _items_ to the list inside a new item node.
+
+    @method _add
+    @param {Array|Node|HTMLElement|String} items Result item or array of
+        result items.
+    @return {NodeList} Added nodes.
+    @protected
+    **/
+    _add: function (items) {
+        var itemNodes = [];
+
+        YArray.each(Lang.isArray(items) ? items : [items], function (item) {
+            itemNodes.push(this._createItemNode(item).setData(RESULT, item));
+        }, this);
+
+        itemNodes = Y.all(itemNodes);
+        this._listNode.append(itemNodes.toFrag());
+
+        return itemNodes;
+    },
+
+    /**
+    Updates the ARIA live region with the specified message.
+
+    @method _ariaSay
+    @param {String} stringId String id (from the `strings` attribute) of the
+        message to speak.
+    @param {Object} [subs] Substitutions for placeholders in the string.
+    @protected
+    **/
+    _ariaSay: function (stringId, subs) {
+        var message = this.get('strings.' + stringId);
+        this._ariaNode.set('text', subs ? Lang.sub(message, subs) : message);
+    },
+
+    /**
+    Binds `inputNode` events and behavior.
+
+    @method _bindInput
+    @protected
+    **/
+    _bindInput: function () {
+        var inputNode = this._inputNode,
+            alignNode, alignWidth, tokenInput;
+
+        // Null align means we can auto-align. Set align to false to prevent
+        // auto-alignment, or a valid alignment config to customize the
+        // alignment.
+        if (this.get('align') === null) {
+            // If this is a tokenInput, align with its bounding box.
+            // Otherwise, align with the inputNode. Bit of a cheat.
+            tokenInput = this.get('tokenInput');
+            alignNode  = (tokenInput && tokenInput.get('boundingBox')) || inputNode;
+
+            this.set('align', {
+                node  : alignNode,
+                points: ['tl', 'bl']
+            });
+
+            // If no width config is set, attempt to set the list's width to the
+            // width of the alignment node. If the alignment node's width is
+            // falsy, do nothing.
+            if (!this.get(WIDTH) && (alignWidth = alignNode.get('offsetWidth'))) {
+                this.set(WIDTH, alignWidth);
+            }
+        }
+
+        // Attach inputNode events.
+        this._listEvents = this._listEvents.concat([
+            inputNode.after('blur',  this._afterListInputBlur, this),
+            inputNode.after('focus', this._afterListInputFocus, this)
+        ]);
+    },
+
+    /**
+    Binds list events.
+
+    @method _bindList
+    @protected
+    **/
+    _bindList: function () {
+        this._listEvents = this._listEvents.concat([
+            Y.one('doc').after('click', this._afterDocClick, this),
+            Y.one('win').after('windowresize', this._syncPosition, this),
+
+            this.after({
+                mouseover: this._afterMouseOver,
+                mouseout : this._afterMouseOut,
+
+                activeItemChange    : this._afterActiveItemChange,
+                alwaysShowListChange: this._afterAlwaysShowListChange,
+                hoveredItemChange   : this._afterHoveredItemChange,
+                resultsChange       : this._afterResultsChange,
+                visibleChange       : this._afterVisibleChange
+            }),
+
+            this._listNode.delegate('click', this._onItemClick,
+                    this[_SELECTOR_ITEM], this)
+        ]);
+    },
+
+    /**
+    Clears the contents of the tray.
+
+    @method _clear
+    @protected
+    **/
+    _clear: function () {
+        this.set(ACTIVE_ITEM, null);
+        this._set(HOVERED_ITEM, null);
+
+        this._listNode.get('children').remove(true);
+    },
+
+    /**
+    Creates and returns an ARIA live region node.
+
+    @method _createAriaNode
+    @return {Node} ARIA node.
+    @protected
+    **/
+    _createAriaNode: function () {
+        var ariaNode = Node.create(this.ARIA_TEMPLATE);
+
+        return ariaNode.addClass(this.getClassName('aria')).setAttrs({
+            'aria-live': 'polite',
+            role       : 'status'
+        });
+    },
+
+    /**
+    Creates and returns an item node with the specified _content_.
+
+    @method _createItemNode
+    @param {Object} result Result object.
+    @return {Node} Item node.
+    @protected
+    **/
+    _createItemNode: function (result) {
+        var itemNode = Node.create(this.ITEM_TEMPLATE);
+
+        return itemNode.addClass(this[_CLASS_ITEM]).setAttrs({
+            id  : Y.stamp(itemNode),
+            role: 'option'
+        }).setAttribute('data-text', result.text).append(result.display);
+    },
+
+    /**
+    Creates and returns a list node. If the `listNode` attribute is already set
+    to an existing node, that node will be used.
+
+    @method _createListNode
+    @return {Node} List node.
+    @protected
+    **/
+    _createListNode: function () {
+        var listNode = this.get('listNode') || Node.create(this.LIST_TEMPLATE);
+
+        listNode.addClass(this.getClassName(LIST)).setAttrs({
+            id  : Y.stamp(listNode),
+            role: 'listbox'
+        });
+
+        this._set('listNode', listNode);
+        this.get('contentBox').append(listNode);
+
+        return listNode;
+    },
+
+    /**
+    Gets the first item node in the list, or `null` if the list is empty.
+
+    @method _getFirstItemNode
+    @return {Node|null}
+    @protected
+    **/
+    _getFirstItemNode: function () {
+        return this._listNode.one(this[_SELECTOR_ITEM]);
+    },
+
+    /**
+    Gets the last item node in the list, or `null` if the list is empty.
+
+    @method _getLastItemNode
+    @return {Node|null}
+    @protected
+    **/
+    _getLastItemNode: function () {
+        return this._listNode.one(this[_SELECTOR_ITEM] + ':last-child');
+    },
+
+    /**
+    Synchronizes the result list's position and alignment.
+
+    @method _syncPosition
+    @protected
+    **/
+    _syncPosition: function () {
+        // Force WidgetPositionAlign to refresh its alignment.
+        this._syncUIPosAlign();
+
+        // Resize the IE6 iframe shim to match the list's dimensions.
+        this._syncShim();
+    },
+
+    /**
+    Synchronizes the results displayed in the list with those in the _results_
+    argument, or with the `results` attribute if an argument is not provided.
+
+    @method _syncResults
+    @param {Array} [results] Results.
+    @protected
+    **/
+    _syncResults: function (results) {
+        if (!results) {
+            results = this.get(RESULTS);
+        }
+
+        this._clear();
+
+        if (results.length) {
+            this._add(results);
+            this._ariaSay('items_available');
+        }
+
+        this._syncPosition();
+
+        if (this.get('activateFirstItem') && !this.get(ACTIVE_ITEM)) {
+            this.set(ACTIVE_ITEM, this._getFirstItemNode());
+        }
+    },
+
+    /**
+    Synchronizes the size of the iframe shim used for IE6 and lower. In other
+    browsers, this method is a noop.
+
+    @method _syncShim
+    @protected
+    **/
+    _syncShim: useShim ? function () {
+        var shim = this._boundingBox.shim;
+
+        if (shim) {
+            shim.sync();
+        }
+    } : function () {},
+
+    /**
+    Synchronizes the visibility of the tray with the _visible_ argument, or with
+    the `visible` attribute if an argument is not provided.
+
+    @method _syncVisibility
+    @param {Boolean} [visible] Visibility.
+    @protected
+    **/
+    _syncVisibility: function (visible) {
+        if (this.get(ALWAYS_SHOW_LIST)) {
+            visible = true;
+            this.set(VISIBLE, visible);
+        }
+
+        if (typeof visible === 'undefined') {
+            visible = this.get(VISIBLE);
+        }
+
+        this._inputNode.set('aria-expanded', visible);
+        this._boundingBox.set('aria-hidden', !visible);
+
+        if (visible) {
+            this._syncPosition();
+        } else {
+            this.set(ACTIVE_ITEM, null);
+            this._set(HOVERED_ITEM, null);
+
+            // Force a reflow to work around a glitch in IE6 and 7 where some of
+            // the contents of the list will sometimes remain visible after the
+            // container is hidden.
+            this._boundingBox.get('offsetWidth');
+        }
+
+        // In some pages, IE7 fails to repaint the contents of the list after it
+        // becomes visible. Toggling a bogus class on the body forces a repaint
+        // that fixes the issue.
+        if (Y.UA.ie === 7) {
+            // Note: We don't actually need to use ClassNameManager here. This
+            // class isn't applying any actual styles; it's just frobbing the
+            // body element to force a repaint. The actual class name doesn't
+            // really matter.
+            Y.one('body')
+                .addClass('yui3-ie7-sucks')
+                .removeClass('yui3-ie7-sucks');
+        }
+    },
+
+    // -- Protected Event Handlers ---------------------------------------------
+
+    /**
+    Handles `activeItemChange` events.
+
+    @method _afterActiveItemChange
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterActiveItemChange: function (e) {
+        var inputNode = this._inputNode,
+            newVal    = e.newVal,
+            prevVal   = e.prevVal,
+            node;
+
+        // The previous item may have disappeared by the time this handler runs,
+        // so we need to be careful.
+        if (prevVal && prevVal._node) {
+            prevVal.removeClass(this[_CLASS_ITEM_ACTIVE]);
+        }
+
+        if (newVal) {
+            newVal.addClass(this[_CLASS_ITEM_ACTIVE]);
+            inputNode.set('aria-activedescendant', newVal.get(ID));
+        } else {
+            inputNode.removeAttribute('aria-activedescendant');
+        }
+
+        if (this.get('scrollIntoView')) {
+            node = newVal || inputNode;
+
+            if (!node.inRegion(Y.DOM.viewportRegion(), true)
+                    || !node.inRegion(this._contentBox, true)) {
+
+                node.scrollIntoView();
+            }
+        }
+    },
+
+    /**
+    Handles `alwaysShowListChange` events.
+
+    @method _afterAlwaysShowListChange
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterAlwaysShowListChange: function (e) {
+        this.set(VISIBLE, e.newVal || this.get(RESULTS).length > 0);
+    },
+
+    /**
+    Handles click events on the document. If the click is outside both the
+    input node and the bounding box, the list will be hidden.
+
+    @method _afterDocClick
+    @param {EventFacade} e
+    @protected
+    @since 3.5.0
+    **/
+    _afterDocClick: function (e) {
+        var boundingBox = this._boundingBox,
+            target      = e.target;
+
+        if (target !== this._inputNode && target !== boundingBox &&
+                !target.ancestor('#' + boundingBox.get('id'), true)){
+            this.hide();
+        }
+    },
+
+    /**
+    Handles `hoveredItemChange` events.
+
+    @method _afterHoveredItemChange
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterHoveredItemChange: function (e) {
+        var newVal  = e.newVal,
+            prevVal = e.prevVal;
+
+        if (prevVal) {
+            prevVal.removeClass(this[_CLASS_ITEM_HOVER]);
+        }
+
+        if (newVal) {
+            newVal.addClass(this[_CLASS_ITEM_HOVER]);
+        }
+    },
+
+    /**
+    Handles `inputNode` blur events.
+
+    @method _afterListInputBlur
+    @protected
+    **/
+    _afterListInputBlur: function () {
+        this._listInputFocused = false;
+
+        if (this.get(VISIBLE) &&
+                !this._mouseOverList &&
+                (this._lastInputKey !== KEY_TAB ||
+                    !this.get('tabSelect') ||
+                    !this.get(ACTIVE_ITEM))) {
+            this.hide();
+        }
+    },
+
+    /**
+    Handles `inputNode` focus events.
+
+    @method _afterListInputFocus
+    @protected
+    **/
+    _afterListInputFocus: function () {
+        this._listInputFocused = true;
+    },
+
+    /**
+    Handles `mouseover` events.
+
+    @method _afterMouseOver
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterMouseOver: function (e) {
+        var itemNode = e.domEvent.target.ancestor(this[_SELECTOR_ITEM], true);
+
+        this._mouseOverList = true;
+
+        if (itemNode) {
+            this._set(HOVERED_ITEM, itemNode);
+        }
+    },
+
+    /**
+    Handles `mouseout` events.
+
+    @method _afterMouseOut
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterMouseOut: function () {
+        this._mouseOverList = false;
+        this._set(HOVERED_ITEM, null);
+    },
+
+    /**
+    Handles `resultsChange` events.
+
+    @method _afterResultsChange
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterResultsChange: function (e) {
+        this._syncResults(e.newVal);
+
+        if (!this.get(ALWAYS_SHOW_LIST)) {
+            this.set(VISIBLE, !!e.newVal.length);
+        }
+    },
+
+    /**
+    Handles `visibleChange` events.
+
+    @method _afterVisibleChange
+    @param {EventFacade} e
+    @protected
+    **/
+    _afterVisibleChange: function (e) {
+        this._syncVisibility(!!e.newVal);
+    },
+
+    /**
+    Delegated event handler for item `click` events.
+
+    @method _onItemClick
+    @param {EventFacade} e
+    @protected
+    **/
+    _onItemClick: function (e) {
+        var itemNode = e.currentTarget;
+
+        this.set(ACTIVE_ITEM, itemNode);
+        this.selectItem(itemNode, e);
+    },
+
+    // -- Protected Default Event Handlers -------------------------------------
+
+    /**
+    Default `select` event handler.
+
+    @method _defSelectFn
+    @param {EventFacade} e
+    @protected
+    **/
+    _defSelectFn: function (e) {
+        var text = e.result.text;
+
+        // TODO: support typeahead completion, etc.
+        this._inputNode.focus();
+        this._updateValue(text);
+        this._ariaSay('item_selected', {item: text});
+        this.hide();
+    }
+}, {
+    ATTRS: {
+        /**
+        If `true`, the first item in the list will be activated by default when
+        the list is initially displayed and when results change.
+
+        @attribute activateFirstItem
+        @type Boolean
+        @default false
+        **/
+        activateFirstItem: {
+            value: false
+        },
+
+        /**
+        Item that's currently active, if any. When the user presses enter, this
+        is the item that will be selected.
+
+        @attribute activeItem
+        @type Node
+        **/
+        activeItem: {
+            setter: Y.one,
+            value: null
+        },
+
+        /**
+        If `true`, the list will remain visible even when there are no results
+        to display.
+
+        @attribute alwaysShowList
+        @type Boolean
+        @default false
+        **/
+        alwaysShowList: {
+            value: false
+        },
+
+        /**
+        If `true`, keyboard navigation will wrap around to the opposite end of
+        the list when navigating past the first or last item.
+
+        @attribute circular
+        @type Boolean
+        @default true
+        **/
+        circular: {
+            value: true
+        },
+
+        /**
+        Item currently being hovered over by the mouse, if any.
+
+        @attribute hoveredItem
+        @type Node|null
+        @readOnly
+        **/
+        hoveredItem: {
+            readOnly: true,
+            value: null
+        },
+
+        /**
+        Node that will contain result items.
+
+        @attribute listNode
+        @type Node|null
+        @initOnly
+        **/
+        listNode: {
+            writeOnce: 'initOnly',
+            value: null
+        },
+
+        /**
+        If `true`, the viewport will be scrolled to ensure that the active list
+        item is visible when necessary.
+
+        @attribute scrollIntoView
+        @type Boolean
+        @default false
+        **/
+        scrollIntoView: {
+            value: false
+        },
+
+        /**
+        Translatable strings used by the AutoCompleteList widget.
+
+        @attribute strings
+        @type Object
+        **/
+        strings: {
+            valueFn: function () {
+                return Y.Intl.get('autocomplete-list');
+            }
+        },
+
+        /**
+        If `true`, pressing the tab key while the list is visible will select
+        the active item, if any.
+
+        @attribute tabSelect
+        @type Boolean
+        @default true
+        **/
+        tabSelect: {
+            value: true
+        },
+
+        // The "visible" attribute is documented in Widget.
+        visible: {
+            value: false
+        }
+    },
+
+    CSS_PREFIX: Y.ClassNameManager.getClassName('aclist')
+});
+
+Y.AutoCompleteList = List;
+
+/**
+Alias for <a href="AutoCompleteList.html">`AutoCompleteList`</a>. See that class
+for API docs.
+
+@class AutoComplete
+**/
+
+Y.AutoComplete = List;
+
+
+}, '@VERSION@', {
+    "lang": [
+        "en",
+        "es",
+        "hu",
+        "it"
+    ],
+    "requires": [
+        "autocomplete-base",
+        "event-resize",
+        "node-screen",
+        "selector-css3",
+        "shim-plugin",
+        "widget",
+        "widget-position",
+        "widget-position-align"
+    ],
+    "skinnable": true
+});