4
\$\begingroup\$

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.

\$\endgroup\$

migrated from stackoverflow.com Sep 24 '12 at 22:11

This question came from our site for professional and enthusiast programmers.

  • 1
    \$\begingroup\$ There is no point in optimizing coffeescript. If you want to write optimal code, write it in native javascript (and that means - no jquery). \$\endgroup\$ – tereško Sep 25 '12 at 0:22
  • \$\begingroup\$ What's coffee script? \$\endgroup\$ – JustinKaz Sep 25 '12 at 0:36
  • \$\begingroup\$ Coffeescript is a little language that compiles to javascript: coffeescript.org \$\endgroup\$ – Rockbot Sep 25 '12 at 7:25
7
\$\begingroup\$

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"
\$\endgroup\$
2
\$\begingroup\$

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()
\$\endgroup\$
  • \$\begingroup\$ Thank you! I didn´t know the $ @ :) - learned something. \$\endgroup\$ – Rockbot Sep 25 '12 at 7:24
  • \$\begingroup\$ One last question: Would it be possible to use loops where i used each() ? \$\endgroup\$ – Rockbot Sep 25 '12 at 15:03
  • \$\begingroup\$ Yes, and the performance would be a little better. But I usually care more about readability. You could do: for input in tF.find('input'), then replace tE = $ @ by tE = $ input \$\endgroup\$ – standup75 Sep 25 '12 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.