WebSplicer Bookmarklet

websplicer.js

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method, url, async);
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};

getElementsWithNoChildren = function(target){
    withoutChildren = []
    elements = target.querySelectorAll('*')
    for (var i = elements.length - 1; i >= 0; i--) {
        if( elements[i].childNodes.length == 0 ){
            withoutChildren.push(elements[i])
        }
        if( elements[i].nodeType == 3 ){
            withoutChildren.push(elements[i]) 
        }
    }
    return withoutChildren
};

function createEl(nodeType,innerHTML,attrObj){
  var _el = document.createElement(nodeType)
  _el.innerHTML = innerHTML
  if( attrObj ){
    Object.keys(attrObj).forEach(function(key){
      _el.setAttribute(key,attrObj[key])
    })  
  }
  return _el
}

fetchURL = function(url){
    var proxyURL = 'https://proxy.donaldhanson.net?url='+url
    ajax.get( proxyURL, null, function(response){
        page2JSON = JSON.parse(response)
        page2HTML = document.createElement('html')
        page2HTML.innerHTML = page2JSON.contents
        doSplice()
    })    
}

function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
}

doSplice = function(){

    var page2 = page2HTML.querySelectorAll('*')
    var page1 = document.querySelectorAll('body *')

    var p1i = 0
    var p2i = 0

    var p1looped = false
    var p2looped = false
    
    var splice = setInterval(function(){

        p1El = page1[p1i]
        p2El = page2[p2i]

        if( p2El == undefined ){
            p2i = 0
            p2El = page2[0]
            if( p2El == undefined ) return
        }

        while( p2El.childElementCount > 0 ){
            p2i++
            if( p2i > page2.length) p2i = 0
            p2El = page2[p2i]
        }

        if( 
            p2El.nodeName == 'TITLE' ||
            p2El.nodeName == 'LINK' ||
            p2El.nodeName == 'META' ||
            p2El.nodeName == 'SCRIPT'
        ){
            document.getElementsByTagName('head')[0].appendChild(p2El)
            p1i--
        }else{
            if( p1El.style.display == 'none' ){
                p1El.style.display = 'block'
            }
            p1El.parentNode.insertBefore(p2El,p1El)
        }

        p1i++
        p2i++

        if( p1looped && p2looped ){
            clearTimeout(splice)    
        }

        if( !page1[p1i] ){
            p1i = 0
            p1looped = true
            page1 = getElementsWithNoChildren( document.getElementsByTagName('body')[0] )
        }

        if( !page2[p2i] ){
            p2i = 0
            p2looped = true
            page2 = getElementsWithNoChildren(page2HTML)
        }
        
    },0)
}

_instructions = createEl('div','Select a site to splice into this one.<div style="color:#999;margin-top:5px">Choices are randomized.</div>',{
    style:'margin-bottom:20px;'
})

_menu = createEl('div','',{
    style:"position:fixed;top:0px;left:50%;transform:translateX(-175px);width:350px;background-color:#fff;box-shadow:4px 4px 10px rgba(0,0,0,.5);padding:20px;border:1px solid #ccc;"
})
_menu.appendChild(_instructions)

var choices = [
    ['Electronic Frontier Foundation','https://www.eff.org/'],
    ['Bing','https://www.bing.com/'],
    ['Wired','https://www.wired.com/'],
    ['Mozilla','https://www.mozilla.org/'],
    ['Rhizome','http://rhizome.org/'],
    ['Internet Archive','https://archive.org/'],
    ['Yandex','https://yandex.ru/'],
    ['Time','https://time.com'],
    ['eBay','https://ebay.com'],
    ['Reddit','https://reddit.com'],
    ['Facebook','https://facebook.com'],
    ['Google','https://google.com'],
    ['Amazon','https://amazon.com'],
    ['Netflix','https://netflix.com'],
    ['Craigslist','https://craigslist.com'],
    ['Random Wikipedia','https://en.wikipedia.org/wiki/Special:Random'],
    ['Yahoo','https://yahoo.com'],
    ['CNN','https://www.cnn.com/'],
    ['Baidu','https://www.baidu.com/'],
    ['Buzzfeed','https://www.buzzfeed.com/'],
    ['New York Times','https://www.nytimes.com/'],
    ['Fox News','http://www.foxnews.com/'],
    ['MSN','https://www.msn.com/'],
]

shuffle(choices)
choices = choices.slice(0, 8)


for (var i = 0; i < choices.length; i++) {
    _choice = createEl('div',choices[i][0],{
        style:'padding:10px;border:1px solid #ccc;cursor:pointer;border-radius:4px;margin-bottom:5px;',
        url: choices[i][1]
    })
    url = choices[i][1]
    _choice.onclick = function(){
        url = this.getAttribute('url')
        _menuOverlay.remove()
        fetchURL(url)
    }
    _menu.appendChild(_choice)   
}

_menuOverlay = createEl('div','',{
    style:'text-align:center;font:12px sans-serif;position:fixed;top:0px;left:0px;height:100vh;width:100vw;background-color:rgba(0,0,0,.8);z-index:999999999999'
})
_menuOverlay.appendChild(_menu)
document.querySelectorAll('body')[0].appendChild(_menuOverlay)