# button config accepts the following paramters: # # label what should the button say # eventId what event should the button trigger # dropdown an array of arrays: [eventId, label] # group an array of button configs # wrapper a css class, in addition to btn-group # icon which icon do you want to use on this button? # white true or false: is it a white colored text? # color options are primary, info, success, warning, danger, inverse make = Backbone.View::make buildButton = (config, wrap=true)-> if config.ctype? config.className ||= "" config.className += 'toolbar-component' object = Luca(config).render() if Luca.isBackboneView(object) console.log "Adding toolbar component", object return object.el if config.spacer return make "div", class: "spacer #{ config.spacer }" if config.text return make "div", {class: "toolbar-text"}, config.text wrapper = 'btn-group' wrapper += " #{ config.wrapper }" if config.wrapper? wrapper += " align-#{ config.align }" if config.align? # if we're passed a group, then we need to just # wrap the contents of the buttons property in that group # skipping the btn-group wrapping that takes place for # individual buttons if config.group? and config.buttons? buttons = prepareButtons( config.buttons, false ) return make "div", class: wrapper, buttons # if it is a normal button, and not a button group else label = config.label ||= "" config.eventId ||= _.string.dasherize( config.label.toLowerCase() ) if config.icon label = " " if _.string.isBlank( label ) white = "icon-white" if config.white label = " #{ label }" buttonAttributes = class: _.compact(["btn",config.classes,config.className]).join(" ") "data-eventId" : config.eventId title: config.title || config.description buttonAttributes["class"] += " btn-#{ config.color }" if config.color? if config.dropdown label = "#{ label } " buttonAttributes["class"] += " dropdown-toggle" buttonAttributes["data-toggle"] = "dropdown" dropdownItems = _(config.dropdown).map (dropdownItem)=> link = make "a", {}, dropdownItem[1] make "li", {"data-eventId": dropdownItem[0]}, link dropdownEl = make "ul", {class:"dropdown-menu"}, dropdownItems buttonEl = make "a", buttonAttributes, label # needs to be wrapped for proper rendering, but not # if it already is part of a group autoWrapClass = "btn-group" autoWrapClass += " align-#{ config.align }" if config.align? if wrap is true return make "div", {class: autoWrapClass}, [buttonEl,dropdownEl] else # for buttons which are already part f a group buttonEl prepareButtons = (buttons, wrap=true)-> _( buttons ).map (button)-> buildButton(button, wrap) #### Panel Toolbar Component # # The Panel Toolbar is a collection of buttons and / or dropdowns # which are automatically created by BasicPanel classes, or can be # added to any other view component. _.def("Luca.containers.PanelToolbar").extends("Luca.View").with className: "luca-ui-toolbar btn-toolbar" # @buttons is an array of button config objects buttons:[] well: true orientation: 'top' autoBindEventHandlers: true events: "click a.btn, click .dropdown-menu li" : "clickHandler" #autoBindEventHandlers: true # The Toolbar behaves by triggering events on the components which they # belong to. Combined with Luca.View::setupHooks it is a clean way # to organize actions clickHandler: (e)-> me = my = $( e.target ) if me.is('i') me = my = $( e.target ).parent() eventId = my.data('eventid') return unless eventId? hook = Luca.util.hook( eventId ) source = @parent || @ if _.isFunction( source[hook] ) source[ hook ].call(@, me, e) else source.trigger(eventId, me, e) beforeRender:()-> @_super("beforeRender", @, arguments) if @well is true @$el.addClass 'well' @$el.addClass "toolbar-#{ @orientation }" @applyStyles( @styles ) if @styles? render: ()-> @$el.empty() elements = prepareButtons(@buttons) _( elements ).each (element)=> @$el.append( element )