-
-
Save alanhogan/3935463 to your computer and use it in GitHub Desktop.
My Zepto Extras - more info @ http://blog.pamelafox.org/2011/11/porting-from-jquery-to-zepto.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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. |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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