Ho do i dısable a button by changing css class?


#1

Hello,
I want to dynamically enable/disable commit button when there is no commit message in it.
I am working with other people. and I want to intervene them to make commits without a message.

Here you see the edited code of commit-dialog.coffee file.

I added the css features of ‘inactive class’ to button in dialog.less file as well.

And when I change the class of button down there in this commit-dialog code to “inactive” by myself, it looks like just how i want it, when it is disabled.

But I want to dynamically enable/disable that button, depending on if there is an entry on commit line.

I tried to add some noMessage function as you can see down there in order to change in dynamically, but some how it didn’t work. I think, I either don’t know how to refer to that button in my noMessage function (which I tried by adding an outlet to the button), or need a javascript function to check if the text area in the upper part is filled.

Can anybody help me about it?
Thanks in advance


Dialog = require './dialog'
module.exports =
class CommitDialog extends Dialog
  @content: ->
    @div class: 'dialog', =>
      @div class: 'heading', =>
        @i class: 'icon x clickable', click: 'cancel'
        @strong 'Commit'
      @div class: 'body', =>
        @label 'Commit Message'
        @textarea class: 'native-key-bindings', outlet: 'msg', keyUp: 'colorLength'
      @div class: 'buttons', =>
        @button class: 'active', outlet:'enabling', click: 'commit', =>
          @i class: 'icon commit'
          @span 'Commit'
        @button click: 'cancel', =>
          @i class: 'icon x'
          @span 'Cancel'

  activate: ->
    @msg.val('')
    return super()

  colorLength: ->
    too_long = false
    for line, i in @msg.val().split("\n")
      if (i == 0 && line.length > 50) || (i > 0 && line.length > 80)
        too_long = true
        break

    if too_long
      @msg.addClass('over-fifty')
    else
      @msg.removeClass('over-fifty')
    return

  noMessage: ->
    no_message = false
    for line, i in @msg.val().split("\n")
      if (line.length < 1)
        no_message = true
        break

    if no_message
      @enabling.removeClass('active')
      @enabling.addClass('inactive')
    else
      @enabling.removeClass('active')
      @enabling.addClass('inactive')
    return;

  commit: ->
    @deactivate()
    @parentView.commit()
    return

  getMessage: ->
    return "#{@msg.val()} "