Merge remote-tracking branch 'microsoft/master'

.eslintrc.yaml

@@ -12,3 +12,4 @@
     - 2
     - "always"
   "linebreak-style": 0
+  "no-duplicate-imports": 0

demos/default/index.js

@@ -18,9 +18,10 @@ window.toolbar = new ToolbarView({
     onClick: () => console.log('click button-2nd'),
   }, {
     type: 'button',
-    text: 'The 3rd Button',
+    text: 'The 3rd Button (disabled)',
     iconRight: ['glyphicon', 'glyphicon-th-list'],
     id: 'button-3rd',
+    disabled: true,
     onClick: () => console.log('click button-3rd'),
   }, {
     type: 'dropdown',
@@ -68,6 +69,12 @@ window.toolbar = new ToolbarView({
         ],
       }],
     },
+  }, {
+    type: 'dropdown',
+    button: {
+      text: 'The 2nd Dropdown (disabled)',
+      disabled: true,
+    },
   }],
 }).render();
 

js/button-mixin.jade

@@ -1,5 +1,5 @@
 mixin buttonMixin(options)
-  button&attributes(options.attributes)(class=options.classes, id=options.id, type='button', role='button', tabindex=options.tabindex)
+  button&attributes(options.attributes)(class=options.classes, id=options.id, type='button', role='button', tabindex=options.tabindex, disabled=options.disabled)
     if options.iconLeft
       span.icon-left(class=options.iconLeft)
     span.text=options.text

js/button.jade

@@ -3,8 +3,9 @@ include ./button-mixin.jade
 -
   var options = {
     classes: classes,
-    attributes: {},
     id: id,
+    attributes: attributes || {},
+    disabled: disabled,
     tabindex: tabindex,
     iconLeft: iconLeft,
     text: text,

js/button.js

@@ -4,7 +4,9 @@ import buttonTemplate from './button.jade';
 export function renderButton(button) {
   const options = _.defaults({}, button, {
     classes: ['btn', 'btn-default'],
-    id:  _.uniqueId('button-'),
+    id: _.uniqueId('button-'),
+    attributes: {},
+    disabled: false,
     text: '',
     iconLeft: null,
     iconRight: null,

js/dropdown-item.js

@@ -4,7 +4,7 @@ import dropdownItemTemplate from './dropdown-item.jade';
 export function renderDropdownItem(dropdownItem) {
   const options = _.extend({
     classes: [],
-    id:  _.uniqueId('dropdown-item-'),
+    id: _.uniqueId('dropdown-item-'),
     text: '',
     iconLeft: null,
     iconRight: null,

js/dropdown-radio-group.jade

@@ -3,7 +3,7 @@ li.dropdown-radio-group(class=classes, id=id)
     li.dropdown-header(role='presentation')=title
     each item in items
       li.dropdown-radio-item(role='presentation', data-value=item.value)
-        a(role='menuitem')
+        span(role='menuitem')
           if item.value === value
             span.selection.selection-selected(class=checkIcon)
           else
@@ -12,7 +12,7 @@ li.dropdown-radio-group(class=classes, id=id)
           if !item.locked
             span.remove
               if removeText
-                span.pull-right.remove-text=removeText
+                a.pull-right.remove-text=removeText
               if removeIcon
                 span.pull-right.remove-icon(class=removeIcon)
 

js/dropdown-radio-group.js

@@ -20,7 +20,7 @@ function normalizeItem(item) {
   return dropdownRadioGroup;
 }
 
-export function renderDropdownRadioGroup(item, renderItem) {
+export function renderDropdownRadioGroup(item) {
   const dropdownRadioGroup = normalizeItem(item);
   const html = dropdownRadioGroupTemplate(dropdownRadioGroup);
   const {

js/dropdown-radio-group.less

@@ -10,6 +10,10 @@
       border: none;
       box-shadow: none;
 
+      li.dropdown-radio-item {
+        cursor: pointer;
+      }
+
       span.selection {
         visibility: hidden;
         margin-right: 5px;

js/dropdown-submenu.js

@@ -36,26 +36,14 @@ export function renderDropdownSubmenu(dropdownSubmenu, renderItem) {
   }, dropdownSubmenu);
 
   const html = dropdownSubmenuTemplate(options);
+  const selector = `li#${options.id}`;
 
-  events[`click #${options.button.id}`] = function (e) {
-    const $menu = this.$(`#${options.menu.id}`);
-    const hideMenu = () => {
-      $menu.hide();
-      $(document).off('click', hideMenu);
-    };
-    const showMenu = () => {
-      $menu.show();
-      $(document).on('click', hideMenu);
-    };
+  events[`mouseover ${selector}`] = function () {
+    this.$(`#${options.menu.id}`).show();
+  };
 
-    if ($menu.is(':visible')) {
-      hideMenu();
-    } else {
-      showMenu();
-    }
-
-    e.stopPropagation();
-    e.preventDefault();
+  events[`mouseover ul:has(> ${selector}) > li:not(${selector})`] = function (e) {
+    this.$(`#${options.menu.id}`).hide();
   };
 
   return { html, events };

js/dropdown.jade

@@ -1,6 +1,6 @@
 include ./button-mixin.jade
 include ./menu-mixin.jade
 
-.dropdown(class=classes, id=id)
+.dropdown&attributes(attributes)(class=classes, id=id)
   +buttonMixin(button)
   +menuMixin(button.id, menu)

js/dropdown.js

@@ -21,6 +21,7 @@ export function renderDropdown(dropdown, renderItem) {
       ]),
     }, button, {
       id: _.uniqueId('dropdown-button-'),
+      disabled: false,
       text: '',
       iconLeft: null,
       iconRight: ['glyphicon', 'glyphicon-triangle-bottom'],
@@ -38,6 +39,7 @@ export function renderDropdown(dropdown, renderItem) {
   }, dropdown, {
     classes: [],
     id: _.uniqueId('dropdown-'),
+    attributes: {},
   });
   const html = dropdownTemplate(options);
 

js/toolbar-view.js

@@ -4,14 +4,6 @@ import { sequence } from './util.js';
 import { getRenderer } from './item-register.js';
 import './toolbar.less';
 
-function defaultState() {
-  return {
-    items: [],
-    classes: [],
-    events: {},
-  };
-}
-
 function getItemContext(item) {
   if (!_.isString(item.type)) {
     throw new Error('Invalie item');
@@ -51,11 +43,12 @@ function renderItemTree(root) {
  * The Backbone View of configurable toolbar
  * @class ToolbarView
  *
- * @param {string} [toolbarId]
+ * @param {Object} options
+ * @param {string} [options.toolbarId]
  *    The id of the toolbar.
- * @param {string[]} [classes=[]]
+ * @param {string[]} [options.classes=[]]
  *    The classes of the toolbar.
- * @param {ToolbarItemConfig[]} [items=[]]
+ * @param {ToolbarItemConfig[]} [options.items=[]]
  *    The list of the toolbar items.
  */
 export class ToolbarView extends Backbone.View {
@@ -93,13 +86,44 @@ export class ToolbarView extends Backbone.View {
     delete this._contexts[id];
   }
 
+  /**
+   * The ID of the root toolbar item.
+   * @type {string}
+   */
+  get rootId() {
+    return this._root.id;
+  }
+
   /**
    * Get the configuration of a toolbar item.
    * @param {string} id - The ID of the item.
    * @return {ToolbarItemConfig}
    */
   get(id) {
-    return _.chain(this._contexts).result(id).result('item').value();
+    return _.chain(this._contexts)
+      .result(id || this.rootId)
+      .result('item')
+      .value();
+  }
+
+  /**
+   * Set the configuration of a toolbar item.
+   * @param {string} id
+   *    The ID of the item.
+   * @param {(ToolbarItemConfig|ToolbarSetCallback)} options
+   *    Describe the new configuration of the toolbar item.
+   */
+  set(id, options) {
+    /**
+     * @callback ToolbarSetCallback
+     * @param {ToolbarItemConfig} config - The current configuration.
+     * @return {ToolbarItemConfig} - The new configuration.
+     */
+    const item = _.isFunction(options) ? options(this.get(id)) : options;
+
+    this.update(_.defaults({
+      id: id || this.rootId,
+    }, item));
   }
 
   /**
@@ -107,11 +131,11 @@ export class ToolbarView extends Backbone.View {
    * @param {ToolbarItemConfig} item - The updated toolbar item configuration.
    */
   update(item) {
-    const id = item.id || this._root.id;
+    const id = item.id || this.rootId;
     const itemNew = _.defaults({ id }, item, this.get(id));
 
-    if (id === this._root.id) {
-      if (!itemNew.type !== 'toolbar') {
+    if (id === this.rootId) {
+      if (itemNew.type !== 'toolbar') {
         throw new Error('The root item must be a toolbar');
       }
       this._root = itemNew;
@@ -142,7 +166,7 @@ export class ToolbarView extends Backbone.View {
   render() {
     this._isRendered = true;
     this.undelegateEvents();
-    this.$el.html(this._contexts[this._root.id].html);
+    this.$el.html(this._contexts[this.rootId].html);
     this.delegateEvents();
     return this;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "main": "dist/backbone-toolbar.js",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "files": [
     "dist"
   ],

spec/index.js

@@ -1,4 +1,4 @@
-var expect = require('chai').expect;
+// var expect = require('chai').expect;
 
 describe('backbone-toolbar', function () {
 });