{"id":139,"date":"2011-07-21T17:07:49","date_gmt":"2011-07-21T17:07:49","guid":{"rendered":"http:\/\/patternweaver.com\/blog\/?p=139"},"modified":"2011-12-13T07:25:28","modified_gmt":"2011-12-13T07:25:28","slug":"dom-manipulation-additions","status":"publish","type":"post","link":"http:\/\/patternweaver.com\/blog\/2011\/07\/dom-manipulation-additions\/","title":{"rendered":"DOM Manipulation additions"},"content":{"rendered":"<p>So at times I find myself needing to do some simple neighbor selection and summing in the DOM and I don&#8217;t have the tools I need so I wind up doing tedious, repetitive logic in loops, so I built a few useful utility functions:<\/p>\n<p><strong>Element.siblingsBefore()<\/strong> and <strong>Element.siblingsAfter()<\/strong> return a new Elements instance containing all the neighbors on that side of the element in respect to it&#8217;s parent in the DOM.<\/p>\n<p><strong>Element.hasStyle(<\/strong>name, value<strong>)<\/strong> tests the element for a particular value and also supports >value and <value for range selection\n\n<strong>Elements.excludeStyles(<\/strong>styles<strong>)<\/strong> and <strong>Elements.includeStyles(<\/strong>styles<strong>)<\/strong> filter an element set based on their styles(also supports >,< via hasStyle)\n\n<strong>Elements.mergedStyles(<\/strong>commaDelimitedString or array<strong>)<\/strong> combines multiple style values from Elements.getStyle into a single array.<\/p>\n<p><strong>Array.sumStrings()<\/strong> can sum the mixed string\/units arrays returned by Elements.getStyle(name)<\/p>\n<p>So to take this out of the abstract say I want to see how much space is taken up above me inside the element selected, but I want to exclude absolute elements and anything that&#8217;s 0 height&#8230; normally a bunch of code and tedious, but now:<\/p>\n<script src=\"https:\/\/gist.github.com\/1471040.js?file=sample_usage.js\"><\/script><noscript><pre><code class=\"language-javascript javascript\">document.id('element_id').siblingsBefore().excludeStyles(\n    {position:'absolute', height:'0px'}\n).mergedStyles(\n    'height,margin-top,margin-bottom,padding-top,padding-bottom'\n).sumStrings()<\/code><\/pre><\/noscript>\n<p>Now That&#8217;s <b>way<\/b> better.<\/p>\n<script src=\"https:\/\/gist.github.com\/1471040.js?file=element_style_aggregation.js\"><\/script><noscript><pre><code class=\"language-javascript javascript\">if(!Element.siblingsBefore){\n    Element.implement({\n        siblingsBefore : function(){\n            var results = [];\n            var found = false;\n            this.getParent().getChildren().each(function(child){\n                if(this == child) found = true;\n                if(!found) results.push(child);\n            });\n            return new Elements(results);\n        }\n    });\n}\n\nif(!Element.siblingsAfter){\n    Element.implement({\n        siblingsAfter : function(){\n            var results = [];\n            var found = false;\n            this.getParent().getChildren().each(function(child){\n                if(found) results.push(child);\n                if(this == child) found = true;\n            });\n            return new Elements(results);\n        }\n    });\n}\n\nif(!Array.sumStrings){\n    Array.implement({\n        sumStrings : function(){\n            var result = 0;\n            this.each(function(child){\n                var val = parseInt(Number.from(child));\n                if(val) result += val;\n            });\n            return result;\n        }\n    });\n}\n\nif(!Element.hasStyle){\n    Element.implement({\n        hasStyle : function(name, style){\n            var result = false;\n            var num = Number.from(this.getStyle(name));\n            if(num != null){\n                switch(style.substring(0,1)){\n                    case '&gt;' :\n                        if(num &gt; Number.from(style.substring(1))) result = true;\n                        break;\n                    case '&lt;' :\n                        if(num &gt; Number.from(style.substring(1))) result = true;\n                        break;\n                    default:\n                        if(num == Number.from(style)) result = true;\n                }\n            }else{\n                switch(style.substring(0,1)){\n                    case '&gt;' :\n                        if(this.getStyle(name) &gt; style.substring(1)) result = true;\n                        break;\n                    case '&lt;' :\n                        if(this.getStyle(name) &gt; style.substring(1)) result = true;\n                        break;\n                    default:\n                        if(this.getStyle(name) == style) result = true;\n                }\n            }\n            return result;\n        }\n    })\n}\n\nif(!Elements.mergedStyles){\n    Elements.implement({\n        mergedStyles : function(styles){\n            results = [];\n            if(typeOf(styles) == 'string'){\n                styles = styles.split(',');\n            }\n            styles.each(function(style){\n                results = results.concat(this.getStyle(style));\n            }.bind(this));\n            return results;\n        }\n    });\n}\n\nif(!Elements.excludeStyles){\n    Elements.implement({\n        excludeStyles : function(styles){\n            var results = [];\n            this.each(function(element){\n                var found = false;\n                Object.each(styles, function(style, name){\n                    if(typeOf(style) == 'array'){\n                        style.each(function(thisStyle){\n                            found = found || element.hasStyle(name, thisStyle);\n                        }.bind(this));\n                    }else{\n                        found = found || element.hasStyle(name, style);\n                    }\n                }.bind(this));\n                if(!found) results.push(element);\n            }.bind(this));\n            return new Elements(results);\n        }\n    });\n}\n\nif(!Elements.includeStyles){\n    Elements.implement({\n        includeStyles : function(styles){\n            results = [];\n            this.each(function(element){\n                var found = false;\n                Object.each(styles, function(style, name){\n                    if(typeOf(style) == 'array'){\n                        style.each(function(thisStyle){\n                            found = found || element.hasStyle(name, thisStyle);\n                        }.bind(this));\n                    }else{\n                        found = found || element.hasStyle(name, style);\n                    }\n                }.bind(this));\n                if(found) results.push(element);\n            }.bind(this));\n            return new Elements(results);\n        }\n    });\n}<\/code><\/pre><\/noscript>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So at times I find myself needing to do some simple neighbor selection and summing in the DOM and I don&#8217;t have the tools I need so I wind up doing tedious, repetitive logic in loops, so I built a few useful utility functions: Element.siblingsBefore() and Element.siblingsAfter() return a new Elements instance containing all the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,11],"tags":[],"class_list":["post-139","post","type-post","status-publish","format-standard","hentry","category-js","category-mootools"],"_links":{"self":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":0,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"wp:attachment":[{"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/patternweaver.com\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}