Altering input field width

Question

This gets every form element and calculates its width, then changes the input fields depending on the parent-form width:

$ ->
 # Alter 'input' Width
  inputResize = -> 
   $('form').each ->
    tF = $(this)
    formWidth = tF.width()
    tF.find('input').each ->
     tE = $(this)
     inputBorder = (tE.outerWidth() - tE.innerWidth())
     inputPadding = parseInt(tE.css('padding-left')) + parseInt(tE.css('padding-right'))
     tE.css 'width', ->
      (formWidth - inputBorder - inputPadding)
 # on Resize
 $(window).resize ->
  inputResize()
 # on Init
  inputResize()

It works as intended, but to learn a bit more I just want to know if there is a smarter way to write this little code in CoffeeScript.

Answer 1

Here are a few tips:

1) Use standard naming convention.

tE and tF sound like booleans and not a refence to an element. Try names like el, $this or that instead.

2) Separate complex logic into smaller functions.

There's too much going on here.

 inputResize = -> 
   $('form').each ->
    tF = $(this)
    formWidth = tF.width()
    tF.find('input').each ->
     tE = $(this)
     inputBorder = (tE.outerWidth() - tE.innerWidth())
     inputPadding = parseInt(tE.css('padding-left')) + parseInt(tE.css('padding-right'))
     tE.css 'width', ->
      (formWidth - inputBorder - inputPadding)
      

Since tF is only used then you can get rid of it and use $(this) directly. Next, extract the input width size calculation to one function and you get something like this.

  getNewInputSize = (el, formWidth) ->
    inputBorder = el.outerWidth() - el.innerWidth()
    inputPadding = parseInt( el.css("padding-left"), 10) + parseInt(el.css("padding-right"), 10)
    formWidth - inputBorder - inputPadding

  resizeFormInputs = ->
    $("form").each ->
      formWidth = $(this).width()
      $(this).find("input").each ->
        $(this).css "width", getNewInputSize($(this), formWidth)

Final Code:

$ ->
  getNewInputSize = (el, formWidth) ->
    inputBorder = el.outerWidth() - el.innerWidth()
    inputPadding = parseInt( el.css("padding-left"), 10) + parseInt(el.css("padding-right"), 10)
    formWidth - inputBorder - inputPadding

  resizeFormInputs = ->
    $("form").each ->
      formWidth = $(this).width()
      $(this).find("input").each ->
        $(this).css "width", getNewInputSize($(this), formWidth)
        
  $(window).resize(resizeFormInputs).triggerHandler "resize"

Answer 2

This is pretty good, you could do that, don't know if you find it much more readable:

$ ->
  # Alter 'input' Width
  inputResize = -> 
    $('form').each ->
      tF = $ @
      formWidth = tF.width()
      tF.find('input').each ->
        tE = $ @
        inputBorder = (tE.outerWidth() - tE.innerWidth())
        inputPadding = parseInt(tE.css 'padding-left') + parseInt(tE.css 'padding-right')
        tE.css 'width', -> (formWidth - inputBorder - inputPadding)
  # on Resize
  $(window).resize -> inputResize()
   # on Init
  inputResize()