public
Last active — forked from pamelafox/zepto-extras.js

  • Download Gist
zepto-extras.js.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
# This file only contains additions to Zepto to add lesser-used functions
# from jQuery that we do actually need.
 
if this.Zepto
do ($ = Zepto) ->
 
# innerHeight & outerHeight are needed by <a plugin we use>
#
# outerHeight is documented at http://api.jquery.com/outerHeight/
#
# The below code based upon https://gist.github.com/1379704 by pamelafox.
ioDim = (elem, Dimension, dimension, includeBorder, includeMargin) ->
if elem
# "Note that .height() will always return the content height,
# regardless of the value of the CSS box-sizing property."
# -- http://api.jquery.com/height/
size = elem[dimension]()
# Thus, `size` is now our contentHeight; no matter our box-sizing
# mode, we need to add padding and border width to our size.
 
sides =
width: ["left", "right"]
height: ["top", "bottom"]
 
sides[dimension].forEach (side) ->
size += parseInt(elem.css("padding-#{side}"), 10)
size += parseInt(elem.css("border-#{side}-width"), 10) if includeBorder
size += parseInt(elem.css("margin-#{side}"), 10) if includeMargin
 
size
else
null
["width", "height"].forEach (dimension) ->
Dimension = dimension.replace(/./, (m) ->
m[0].toUpperCase()
)
 
$.fn["inner" + Dimension] ||= (includeMargin) ->
ioDim(this, Dimension, dimension, false, includeMargin)
 
$.fn["outer" + Dimension] ||= (includeMargin) ->
ioDim(this, Dimension, dimension, true, includeMargin)
 
# .detach() is like .remove() but it keeps data & events intact;
# it lets you move something in the dom.
# On http://api.jquery.com/detach/ someone indicates that this is
# basically a .clone(true) follewed by a .remove.
$.fn.detach ||= (selector) ->
set = this
if selector?
set = set.filter selector
cloned = set.clone(true)
set.remove()
return cloned
 
# More missing functions could be added here.

Thanks for sharing this. I just compiled to javascript and put just the width and height methods here https://gist.github.com/wheresrhys/5823198.

I also included some changes to utilise currying - not sure how to do this in coffeescript or I'd make a pull request. Anyway, take a look at my code if you like the idea

Hi, I noted an issue with the border.

Currently, the code adds the width of the border if the flag "includeBorder" is set. However this is done automatically by Zepto's width() or height() functions. So it adds extra width/height to the actual size.

For example, if my element is 100px wide, and it has a 5px wide border, the actual size is 110px, but your plugin returns 120px.

Instead, you should subtract the width of the border if the flag is NOT set.

Please let me know what you think about this.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.