Last active
January 10, 2018 21:35
-
-
Save th3hunt/4342f60b027b213a755cc2f2bdd2cd50 to your computer and use it in GitHub Desktop.
Inject jsondiffpatch + HTML formatter into your page and expose it as diff(obj1, obj2)
This file contains hidden or 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
if (!window.jsondiffpatch) { | |
fetch('https://raw.githubusercontent.com/benjamine/jsondiffpatch/master/public/formatters-styles/html.css').then((response) => { | |
return response.text(); | |
}).then((styles) => { | |
var css = document.createElement('style'); | |
css.innerText = styles; | |
document.head.appendChild(css); | |
}); | |
var script = document.createElement('script'); | |
script.src ='https://cdnjs.cloudflare.com/ajax/libs/jsondiffpatch/0.2.4/jsondiffpatch-full.min.js'; | |
document.head.appendChild(script); | |
script = document.createElement('script'); | |
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jsondiffpatch/0.2.4/jsondiffpatch-formatters.js'; | |
document.head.appendChild(script); | |
} | |
function diff(object1, object2) { | |
var delta = jsondiffpatch.diff(object1, object2); | |
console.log(delta); | |
var container = document.createElement('div'); | |
container.style = 'color: #000; background-color: #fff; z-index: 999999; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;'; | |
container.innerHTML = jsondiffpatch.formatters.html.format(delta); | |
var closeHandle = document.createElement('a'); | |
closeHandle.innerText = "[x] close"; | |
closeHandle.style = 'position: absolute; top: 10px; right: 10px;' | |
closeHandle.addEventListener('click', () => container.parentElement.removeChild(container)); | |
container.appendChild(closeHandle); | |
document.body.appendChild(container); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment