kdf

KDView = require './../../core/view.coffee' KDLoaderView = require './../loader/loaderview.coffee' ###* * KDButtonView implements a `<button>` DOM element, with the ability to subscribe * to click events. * * ## Usage * * ```coffee * view = new KDButtonView * title: 'Click me!' * cssClass: 'cupid-green' * callback: -> * alert 'I got clicked!' * * appView.addSubView view * ``` * * This example will render a green button, with the text `"Click me!"`. When the * button is pressed by the user, an alert will pop up with the message `"I got * clicked!"` * * While this example is fine for an immediate action, what if we wanted our * button to load a project? For that, we tell the button to use a * [KDLoaderView](./kdloaderview.md). Lets see how this looks. * * ```coffee * view = new KDButtonView * title: 'Take a long time.' * cssClass: 'clean-red' * loader: {} * callback: -> * longTimeDone = => * @hideLoader() * setTimeout longTimeDone, 2000 * * appView.addSubView view * ``` * * In this example, a couple things are different. First, we define a loader * object. This is an object full of options that are passed to a * [KDLoaderView](./kdloaderview.md) instance. You'll note that we don't actually * define any options, but the empty object will cause a loader to be used with * the default options. * * Secondly, in our callback we turn the loader off with the * [hideLoader](#hideloader) method, after a `setTimeout` of 2000. * * The end result of these changes is that when our button is clicked, it starts * the loader *(with the options we define)*. When we want to turn it off, we call * the `@hideLoader()` method. Easy! * * ## Styling * * While not complete, the following list contains some useful built-in * css classes to style your button with. * * - **small-gray**: A small, gray button. * - **small-blue**: A small, blue button. * - **clean-gray**: A clean gray button, the default button style. * - **clean-red**: A clean red button. * - **cupid-green**: A green button. * - **transparent**: And no surprise, a transparent button. ### module.exports = class KDButtonView extends KDView ###* * Options supports the following keys: * - **options.title**: The title of the button. * - **options.callback**: The function to be called when the button is pressed. * - **options.loader**: The options to use for a loader on this button. If * false, this button will not use a loader by default. See * KDLoaderView for the supported options. * * @param {Object} options * @param {Object} data ### constructor:(options = {}, data)-> options.callback or= noop # a Function options.title or= "" # a String # options.style or= "clean-gray" # a String of one of button styles ==> DEPRECATE THIS options.type or= "button" # a String of submit, reset, button options.cssClass or= options.style or= "clean-gray" # a String options.icon ?= no # a Boolean value options.iconOnly ?= no # a Boolean value options.iconClass or= "" # a String options.disabled ?= no # a Boolean value options.hint or= null # a String of HTML ---> not yet implemented options.loader ?= no super options,data @setClass options.style @setCallback options.callback @setTitle options.title @setIconClass options.iconClass if options.iconClass @showIcon() if options.icon or options.iconOnly @setIconOnly options.iconOnly if options.iconOnly @disable() if options.disabled if options.focus @once "viewAppended", @bound "setFocus" if options.loader @once "viewAppended", @bound "setLoader" setFocus:-> @$().trigger 'focus' setDomElement:(cssClass)-> {lazyDomId, tagName} = @getOptions() if lazyDomId el = document.getElementById lazyDomId for klass in "kdview #{cssClass}".split ' ' when klass.length el.classList.add klass unless el? warn "No lazy DOM Element found with given id #{lazyDomId}." if lazyDomId el = """ <button type='#{@getOptions().type}' class='kdbutton #{cssClass}' id='#{@getId()}'> <span class='icon hidden'></span> <span class='button-title'>Title</span> </button> """ @domElement = $ el setTitle:(title)-> @buttonTitle = title @$('.button-title').html title getTitle:-> @buttonTitle setCallback:(callback)-> @buttonCallback = callback getCallback:-> @buttonCallback showIcon:-> @setClass "with-icon" @$('span.icon').removeClass 'hidden' hideIcon:-> @unsetClass "with-icon" @$('span.icon').addClass 'hidden' setIconClass:(iconClass)-> @$('.icon').attr 'class','icon' @$('.icon').addClass iconClass # @setClass iconClass setIconOnly:-> @unsetClass "with-icon" @$().addClass('icon-only') $icon = @$('span.icon') @$().html $icon setLoader:-> @setClass "w-loader" {loader} = @getOptions() loaderSize = @getHeight()/2 @loader = new KDLoaderView size : width : loader.diameter ? loaderSize loaderOptions : color : loader.color or "#ffffff" shape : loader.shape or "spiral" diameter : loader.diameter ? loaderSize density : loader.density ? 30 range : loader.range ? 0.4 speed : loader.speed ? 1.5 FPS : loader.FPS ? 24 @addSubView @loader, null, yes @loader.$().css position : "absolute" left : loader.left or "50%" top : loader.top or "50%" marginTop : -(loader.diameter/2) marginLeft : -(loader.diameter/2) @loader.hide() @showLoader() if loader.show ###* * Show the KDLoaderView on this button, if any. Note that the loader is * shown by default when the button is clicked. ### showLoader:-> unless @loader return warn 'KDButtonView::showLoader is called where no loader is set' {icon, iconOnly} = @getOptions() @setClass "loading" @loader.show() @hideIcon() if icon and not iconOnly ###* * Hide the KDLoaderView on this button, if any. ### hideLoader:-> unless @loader return warn 'KDButtonView::hideLoader is called where no loader is set' {icon, iconOnly} = @getOptions() @unsetClass "loading" @loader.hide() @showIcon() if icon and not iconOnly disable:-> @$().attr "disabled", yes enable:-> @$().attr "disabled", no focus:-> @$().trigger "focus" blur:-> @$().trigger "blur" click:(event)-> return @utils.stopDOMEvent() if @loader?.active @showLoader() if @loader and not @loader.active @utils.stopDOMEvent() if @getOption('type') is "button" @getCallback().call @, event return no triggerClick:-> @doOnSubmit()