define([ "../lib/object", "./LineWithActionsWidget", "dijit/_Container", "dijit/_TemplatedMixin", "dijit/_WidgetBase", "dijit/_WidgetsInTemplateMixin", "dijit/registry", "dojo/_base/array", "dojo/_base/declare", "dojo/_base/event", "dojo/_base/lang", "dojo/dnd/Source", "dojo/dom-class", "dojo/dom-construct", "dojo/fx", "dojo/query", "dojo/text!./templates/Selector.html" ], function(objectFuns, LineWithActionsWidget, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, registry, baseArray, declare, event, lang, Source, domClass, domConstruct, fx, query, templateString) { function get(selector, item) { if ( lang.isFunction(selector) ) { return selector(item); } else { return item[selector || 'title']; } } return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{ templateString: templateString, baseClass: 'rftSelector', title: "", selectedActions: null, itemActions: null, itemTitle: 'title', // main selector action: Object // title: // description: // icon: dndType: null, _source: null, _folded: true, _titleLine: null, _selectorLine: null, _selectedItem: null, startup: function() { if ( this._started ){ return; } this.inherited(arguments); domClass.add(this.selectedColorNode, "pending"); this._createTitleLine(); this._createSelectorLine(); if (this.dndType) { this._createSource(); } fx.wipeOut({ node: this.optionsNode }).play(); }, _createTitleLine: function() { var userActions = lang.isFunction(this.selectedActions) ? this.selectedActions() : this.selectedActions; var actions = objectFuns.map(userActions||{},function(action,actionName){ return { callback: action.callback && lang.hitch(this,this._onSelectedAction, action.callback), properties: { blockButton: true, label: action.title || actionName, icon: action.icon, tooltip: action.description } }; }, this); this._titleLine = new LineWithActionsWidget({ title: this.title, actions: actions },this.titleNode); this._titleLine.startup(); }, _createSelectorLine: function() { this._selectorLine = new LineWithActionsWidget({ title: 'None', actions: { "Toggle dropdown" : { callback: lang.hitch(this, this.onToggle), properties: { blockButton: true, showLabel: false, icon: "HalfArrowDown" } } } },this.selectedItemNode); this._selectorLine.startup(); this.own(this._selectorLine.on('click',lang.hitch(this, 'onToggle'))); }, _createSource: function() { this._source = new Source(this.optionsNode, { singular: true, delay: 5, selfAccept: false, copyOnly: true, withHandles: this.withHandles, creator: lang.hitch(this, "_createNode") }); }, _onSelect: function(item, widget) { this._selectedItem = item; this.onToggle(); this._selectorLine.set("title", get(this.itemTitle,item)); baseArray.forEach(this.optionsNode.childNodes, function(node){ var line = registry.byNode(node); if (line) { if (line === widget) { domClass.add(line.domNode, "inheritBgColor light"); } else { domClass.remove(line.domNode, "inheritBgColor light"); } } }, this); this.onSelect(item); }, _onSelectedAction: function(callback) { if (this._selectedItem && callback) { callback(this._selectedItem,this); } }, onToggle: function(evt) { if (this._folded) { var downArrowIcon = query(".rftBlockButton .rftIconHalfArrowDown", this._selectorLine.buttonsNode)[0]; if (downArrowIcon){ domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown"); } fx.wipeIn({ node: this.optionsNode }).play(); this._folded = false; } else { var upArrowIcon = query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0]; if (upArrowIcon){ domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp"); } fx.wipeOut({ node: this.optionsNode }).play(); this._folded = true; } if ( evt ) { event.stop(evt); } return false; }, addItem: function(item) { if ( this._source ) { this._source.insertNodes(false,[item]); } else { var node = this._createLineNode(item); domConstruct.place(node, this.optionsNode, "last"); } }, removeItem: function(item) { var nodes = this._source ? this._source.getAllNodes() : this.optionsNode.childNodes; baseArray.forEach(nodes, function(node) { var widget = registry.byNode(node); if ( widget && this.itemEquals ? this.itemEquals(widget.__item,item) : widget.__item === item ) { widget.destroyRecursive(); if ( this._source ) { this._source.delItem(widget.id); } } }, this); }, _createNode: function(item, hint) { var node = hint === "avatar" ? this._createAvatarNode(item) : this._createLineNode(item); return node && { node: node, data: lang.clone(item), type: [this.dndType] }; }, _createAvatarNode: function(item) { return domConstruct.create("div",{ 'class': 'dragAvatar', innerHTML: get(this.itemTitle,item) }); }, _createLineNode: function(item) { var userActions = lang.isFunction(this.itemActions) ? this.itemActions(item) : this.itemActions; var actions = objectFuns.map(userActions||{},function(action,actionName){ return { callback: action.callback && lang.partial(action.callback,item,this), properties: { blockButton: false, showLabel: false, icon: action.icon + " black", tooltip: action.description } }; }, this); var w = new LineWithActionsWidget({ title: get(this.itemTitle,item), actions: actions, __item: item }); w.startup(); this.own(w.on("click", lang.hitch(this, '_onSelect', item, w))); return w.domNode; }, onSelect: function(/*item*/) {}, destroy: function() { if ( this._source ) { this._source.destroy(); } this.inherited(arguments); } }); });