Last active
October 30, 2017 23:14
-
-
Save wezell/afede08d0fa0c7436d41555eda05185a to your computer and use it in GitHub Desktop.
This file contains 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
<html> | |
<head> | |
<script> | |
function getUrl(){ | |
var url = (window.location.hash.length==0) | |
? "/about-us/index" | |
: window.location.hash.substr(1); | |
if(!url.startsWith("/")){ | |
url = "/" + url; | |
} | |
if(url.endsWith("/")){ | |
url = url + "index"; | |
} | |
window.location.hash = url; | |
// HERE IS THE API ENDPOINT TO GET THE LAYOUT as a SERVICE back, | |
// e.g. https://demo.dotcms.com/api/v1/page/render/about-us/index | |
return "https://demo.dotcms.com/api/v1/page/render" + url; | |
} | |
var url = getUrl(); | |
console.log("reading:"+url); | |
function readJson(url, callback) { | |
var req = new XMLHttpRequest(); | |
req.open("GET", url, true); | |
req.setRequestHeader("Authorization", "Basic " + btoa("admin@dotcms.com:admin")); | |
req.onreadystatechange = function() { | |
if (req.readyState === 4 && req.status == "200") { | |
callback(req.responseText); | |
} | |
} | |
req.send(); | |
} | |
window.onload = | |
readJson(url, function(text){ | |
var data = JSON.parse(text); | |
if(window.location.search.indexOf("raw=")>-1){ | |
document.body.innerHTML=text; | |
} | |
else if(data.layout){ | |
writeLayoutDocument(data); | |
} | |
else{ | |
writeRawDocument(data); | |
} | |
}); | |
function writeRawDocument(data){ | |
document.body.innerHTML=data.page.map.rendered; | |
} | |
function writeLayoutDocument(data){ | |
var rows = data.layout.body.rows; | |
var myPage = document.createElement('div'); | |
document.body.appendChild(myPage); | |
myPage.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6'; | |
myPage.innerHTML="reading from : <a href='" + url + "'>" + url + "</a>"; | |
if(data.layout.header){ | |
var header = document.createElement('div'); | |
header.innerHTML="<h1>Including Header</h1>"; | |
header.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6'; | |
document.body.appendChild(header); | |
} | |
for(i=0;i<rows.length;i++){ | |
var row = rows[i]; | |
var columns = row.columns; | |
var thisRow = document.createElement('div'); | |
thisRow.style.cssText = 'display:flex;flex-direction:row;justify-content:space-between'; | |
document.body.appendChild(thisRow); | |
for(j=0;j<columns.length;j++){ | |
var column = columns[j]; | |
var containers = column.containers; | |
var thisColumn = document.createElement('div'); | |
thisColumn.style.cssText = 'flex-basis:' + (column.widthPercent-0) + '%;border:2px solid #9AB3CE;margin:10px;padding:10px;background:#EEF5F9'; | |
thisRow.appendChild(thisColumn); | |
for(k=0;k<containers.length;k++){ | |
var containerId = containers[k]; | |
var thisContainerInfo = document.createElement('div'); | |
thisContainerInfo.style.cssText = "color:gray;text-align:right;" | |
thisColumn.appendChild(thisContainerInfo); | |
thisContainerInfo.innerHTML="{row:" + (i+1) + ",column:" + (j+1)+ ",width:" + column.widthPercent + "%}"; | |
var thisContainer = document.createElement('div'); | |
thisContainer.style.cssText = 'border:3px solid #9AB3CE;background:#ffffff;margin:10px;padding:10px;'; | |
thisColumn.appendChild(thisContainer); | |
// add in the pre-rendered container content | |
thisContainer.innerHTML=data.containers[ containerId ].rendered; | |
} | |
} | |
} | |
if(data.layout.footer){ | |
var footer = document.createElement('div'); | |
footer.innerHTML="<h1>Including Footer</h1>"; | |
footer.style.cssText = 'border:2px solid #9AB3CE;margin:10px;padding:10px;background:#E0E9F6'; | |
document.body.appendChild(footer); | |
} | |
} | |
</script> | |
<base href="https://demo.dotcms.com"> | |
</head> | |
<body></body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment