Button

buttons = document.querySelectorAll("[data-toggle='button']")
for btn in buttons
	btn.button()
buttons = document.querySelectorAll("[data-toggle='button']")
for btn in buttons
	btn.button
		beforeactive: ->
			d = $.Deferred()
			button = @data['kitButton']
			button.el.innerHTML = 'Loading...'
			button._addClass '_disabled_'
			setTimeout ->
				d.resolve()
			,2000
			d.promise()

		onactive: ->
			button = @data['kitButton']
			button.el._removeClass '_disabled_'
			button.el.innerHTML = 'Checked'

		ondeactive: ->
			button = @data['kitButton']
			button.el.innerHTML = 'Checkbox'
buttons = document.querySelectorAll(".radio-with-before")
for btn in buttons
	beforeactive: ->
		d = $.Deferred()
		button = @data['kitButton']
		button.el.innerHTML = 'Loading...'
		button._addClass '_disabled_'
		setTimeout ->
			d.resolve()
		,2000
		d.promise()

	onactive: ->
		button = @data['kitButton']
		button.el.innerHTML = 'Checked'
		button._removeClass '_disabled_'

	beforedeactive: ->
		d = $.Deferred()
		button = @data['kitButton']
		button.el.innerHTML = 'Unchecking...'
		button._addClass '_disabled_'
		setTimeout ->
			d.resolve()
		,3000
		d.promise()

	ondeactive: ->
		button = @data['kitButton']
		button._removeClass '_disabled_'
		button.el.innerHTML = 'Radio'

Properties

Name Default Description
toggle @el.getAttribute( 'data-toggle' ) or 'button' Set toggle type of the element.
type @el.getAttribute( 'data-type' ) or 'button' button, radio, checkbox. Define button's behaviour. If radio, then will uncheck all buttons from it's group.
group @el.getAttribute( 'data-group' ) or no String. Uses for type: radio, just type any name for group of radiobuttons or checkboxes.
event @el.getAttribute( 'data-event' ) or "click" This event will be used to activate/deactivate button.
selfish @el.getAttribute( 'data-selfish' ) or no Deactivate all instances of Button when current instance activated.

Methods

Method Description
activate

Activate button.

deactivate

Deactivate button.

enable

Enable button, events will work.

disable

Disable button, events will not work.

Events

Inside each method to get button use @ or this in js. Class instance always stores in data attribute of the button element @data['kitButton'] or this.data['kitButton'] in js.
Event Description
beforeactive

Set a function to call it before activate button. If it returns deferred.promise(), then button will not activate till deferred.resolve(), and woun't activate at all if deferred.reject(). You can just get data with ajax instead of using deferred.

buttons = document.querySelectorAll(".radio-with-before")
for btn in buttons
	beforeactive: ->
		d = $.Deferred()
		button = @data['kitButton']
		button.el.innerHTML = 'Loading...'
		button._addClass '_disabled_'
		setTimeout ->
			d.resolve()
		,2000
		d.promise()

	onactive: ->
		button = @data['kitButton']
		button.el.innerHTML = 'Checked'
		button._removeClass '_disabled_'

	beforedeactive: ->
		d = $.Deferred()
		button = @data['kitButton']
		button.el.innerHTML = 'Unchecking...'
		button._addClass '_disabled_'
		setTimeout ->
			d.resolve()
		,3000
		d.promise()

	ondeactive: ->
		button = @data['kitButton']
		button._removeClass '_disabled_'
		button.el.innerHTML = 'Radio'

onactive

Set a function to call it after button activation.

failactive

Set a function to call it if activation failed.

beforedeactive

Call this function before deactivate button.

ondeactive

Call this function after deactivate button.

faildeactive

Set a function to call it if deactivation failed.