JS Ninja #6

by Anupama

HTML

<!DOCTYPE html>
<html>
<head>
    <title>TGIF Contest #6</title>
    
    <style>
        #elHeader {
            display: inline;
        }
        
        #elSpan {
            display: block;
            margin: 10px 0;
        }
    </style>
    <script type="text/javascript">
        var idCount = 0,
            eventsMap = {};
        var getId = function () {
            return idCount++;
        };
        var oldAddEventListener = EventTarget.prototype.addEventListener;
        EventTarget.prototype.addEventListener = function(){
            var id = this.getAttribute("data-id"),
                eventName = arguments[0],
                handler = arguments[1];
            if(!id) {
                /* generate an id */
                id = getId();
                /* initialize eventsMap for id */
                eventsMap[id] = {};
                this.setAttribute("data-id", id);
            }
            eventsMap[id][eventName] = handler;
            oldAddEventListener.apply(this, arguments);
        };
    </script>
</head>
<body>
    <h1>TGIF Contest #6</h1>
    
    <p>Replace all &lt;span&gt; with &lt;div style=&quot;display: inline;&quot;&gt;</p>
    
    <span>This is the first span element</span>
    
    <div>
        <span>This is another <span>nested</span> span element</span>
        <span id="elSpan"><h2 id="elHeader">Header inside a span</h2> Some plain text</span>
    </div>
    
    <p>
    <span><img alt="Earth" id="elImage"
        src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" /></span>
    </p>
    
<script type="text/javascript">
    var elHeader = document.getElementById("elHeader"),
        elImage = document.getElementById("elImage"),
        elSpan = document.getElementById("elSpan");
    
    elHeader.addEventListener("mouseover", function() {
        elHeader.style.color = "blue";
    });
    
    elImage.addEventListener("click", function() {
        elImage.style.display = "none";
   ...

CSS

.inline {
    display:inline;
}

JavaScript

try {
    var cloneEvents = function(src, dest) {
        var srcId = src.getAttribute("data-id");
        if(srcId && eventsMap && eventsMap[srcId]) {
            var srcEventsMap = eventsMap[srcId];
            for(var event in srcEventsMap) {
                if(srcEventsMap.hasOwnProperty(event)) {
                    dest.addEventListener(event, srcEventsMap[event]);
                }
            }
        }
    };
    
    var replace = function(spanElement) {
        var spanAttributes = spanElement.attributes;
        var divElement = document.createElement("div");
        var name, value;
        
        /* copy attributes from span to div */
        for(var i=0; i<spanAttributes.length; i++) {
            name = spanAttributes[i].name;
            value = spanAttributes[i].value;
            divElement.setAttribute(name, value);
        }
        /* set inline class */
        divElement.className = "inline " + divElement.className;
        /* copy html content from span to div */
        while(spanElement.childNodes.length > 0) {
            divElement.appendChild(spanElement.childNodes[0]);
        }
        /* copy events from span to div */
        cloneEvents(spanElement, divElement);
        /* replace span with div element */
        spanElement.parentNode.replaceChild(divElement, spanElement);
    };
    
    var init = function() {
        var spanElements = document.getElementsByTagName("span");
        spanElements = [].slice.call(spanElements);
        for(var i=0, len=spanElements.length; i<len; i++) {
            replace(spanElements[i]);
        }
    };
    
    init();
} catch (e) {
    console.log("Looks like something went wrong !");
}