I am working with a lot of DOM manipulation and need to know several values of an element to determine its position within the DOM and I have written the following to help scrape several of the bits of information I need to proceed.
To me this looks very heavy and there might be some room to help improve the speed / accuracy of returning this information.
Any help in speeding this up or helping with the redundancy issues would be most helpful.
https://jsfiddle.net/googabeast/h8rqnh83/
$.fn.info = function(){
var $el = this,
obj = {
_css: {},
$win: $(window),
$doc: $(document),
x: Math.floor($el.offset().left),
y: Math.floor($el.offset().top),
w: Math.floor($el.width()),
h: Math.floor($el.height()),
tag: $el.prop("tagName").toLowerCase(),
computedCss: function(){
var css = ["width", "height", "float", "color", "font-size", "position", "top", "right", "bottom", "left", "margin-top", "margin-right", "margin-bottom", "margin-left", "color", "display", "visibility"];
for(var i = 0; i < css.length; i++){
if(css[i].indexOf("-") > -1){
var temp = css[i].replace("-", "_");
this._css[temp] = $el.css(css[i]);
}else{
this._css[css[i]] = $el.css(css[i]);
};
};
return this;
},
checkVisibility: function(){
this.visible = (((this.y + this.h) <= (this.top + this.winH)) && (this.y >= this.top));
this.partial = ((this.y <= (this.top + this.winH)) && ((this.y + this.h) >= this.top));
return this;
},
init: function(){
this.winH = Math.floor(this.$win.height());
this.winW = Math.floor(this.$win.width());
this.docH = Math.floor(this.$doc.height());
this.docW = Math.floor(this.$doc.width());
this.top = this.$win.scrollTop();
/* :compute the box-modal a,b,c,d with {x,y} values: */
/* a----b */ this.a = { x:this.x, y:this.y };
/* | | */ this.b = { x:this.x+this.w, y:this.y };
/* | | */ this.c = { x:this.x, y:this.y+this.h };
/* c----d */ this.d = { x:this.x+this.w, y:this.y+this.h };
this.computedCss();
this.checkVisibility();
return this;
}
}.init();
return obj;
};