HiveBrain v1.2.0
Get Started
← Back to all entries
patternMinor

Altering input field width

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
inputfieldwidthaltering

Problem

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.

Solution

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"

Code Snippets

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)
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)
$ ->
  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"

Context

StackExchange Code Review Q#15890, answer score: 7

Revisions (0)

No revisions yet.