Skip to content

Instantly share code, notes, and snippets.

@wezell wezell/index.html
Last active Oct 30, 2017

Embed
What would you like to do?
<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
You can’t perform that action at this time.