Skip to content

R
renderjs
Commit 8a1e595d authored by Sven Franck's avatar Sven Franck
Browse files
Options

reworked 2nd instance in example to only using ajax links

parent 77fdb96b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 695 additions and 319 deletions
gadget/filebrowser.js
View file @ 8a1e595d
/*global document, jQuery */ /*global document, jQuery */
// filebrowser.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
"use strict";
(function (document, $) { (function (document, $) {
"use strict";
var getParameter = function(searchString, paramName) { var getParameter = function(searchString, paramName) {
var i, val, params = searchString.split("&"); var i, val, params = searchString.split("&");
...@@ -15,76 +14,108 @@ ...@@ -15,76 +14,108 @@
return null; return null;
}; };
var mapUrl = function (url) { var mapUrl = function (searchString) {
var searchString = url.href.split("?")[1], var fileToDisplay = getParameter(searchString, "file"),
fileToDisplay; scope,
register,
service;
if (searchString) { if (fileToDisplay) {
fileToDisplay = getParameter(searchString, "file"); $.ajax({
if (fileToDisplay) { method: 'GET',
url: fileToDisplay,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value, textStatus, jqXHR) {
$.ajax({ scope = value._links.scope.href.slice(0,-1).split(/[/]+/).pop();
method: 'GET', register = value._links.call.href
// XXX Hardcoded .replace("{method}", "register")
url: fileToDisplay, .replace("{scope}", scope )
context: $('body'), .replace("{interaction}", "");
error: function (jqXHR, textStatus, errorThrown) { service = {
$(this).text(errorThrown); "type": "service/test",
}, "src": encodeURIComponent(window.location.href),
success: function (value, textStatus, jqXHR) { "rel": "browse",
$.ajax({ "self": window.frameElement.id
method: 'GET', };
// XXX Hardcoded
url: value._links.storage.href,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value2, textStatus, jqXHR) {
var content_type = jqXHR.getResponseHeader("Content-Type") || "";
// XXX Hardcoded mime type
if (content_type.split(';')[0] === "application/hal+json") {
// XXX Will fail if response does not send expected links...
$(this).html("<ul>");
for (var i in value2._links.contents){
$(this).append("<li><button id='" + i + "'>" +
value2._links.contents[i].href + "</button></li>");
$(this).find("#" + i.toString()).on('click', function(e, target) {
$.ajax({
// XXX Hardcoded post and url
// Why using postMessage?
method: "POST",
url: value._links.display.href,
context: $(this),
data: $(this).text(),
error: function (jqXHR, textStatus, errorThrown) {
console.log("Plumbing failed: " + errorThrown);
},
// success: function (value, textStatus, jqXHR) {
// console.log(value);
// },
});
});
}
$(this).append("</ul>");
} else {
$(this).text("Unsupported content type " + content_type);
};
},
});
},
});
} else { $.ajax({
$("body").text("No parameter found in url"); method: 'POST',
} url: register,
context: $(this),
data: JSON.stringify(service),
error: function (jqXHR, textStatus, errorThrown) {
console.log("registration failed: " + errorThrown);
},
success: function (value, textStatus, jqXHR) {
// console.log("registration successful");
}
});
// HACK: this is hacking the functionality provided by the
// filebrowser!
// 'browser://call/browse/' should be called by the interactor
// instead of hardcoding it here
$.ajax({
method: 'GET',
url: value._links.scope.href,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value2, textStatus, jqXHR) {
var content_type = jqXHR.getResponseHeader("Content-Type") || "",
request = value._links.call.href
.replace("{method}", "service")
.replace("{scope}", scope )
.replace("{interaction}", "preview");
// XXX Hardcoded mime type
if (content_type.split(';')[0] === "application/hal+json") {
// XXX Will fail if response does not send expected links...
$(this).html("<ul>");
for (var i in value2._links.contents){
$(this).append("<li><button id='" + i + "'>" +
value2._links.contents[i].href + "</button></li>");
$(this).find("#" + i.toString()).on('click', function(e, target) {
$.ajax({
method: "POST",
url: request,
context: $(this),
data: $(this).text(),
error: function (jqXHR, textStatus, errorThrown) {
console.log("request failed: " + errorThrown);
},
// success: function (value, textStatus, jqXHR) {
// console.log("request sent");
// }
});
});
}
$(this).append("</ul>");
} else {
$(this).text("Unsupported content type " + content_type);
};
}
});
},
});
} else { } else {
$("body").text("No parameter found in url (2)"); $("body").text("No parameter found in url");
} }
}; };
$(document).ready(function () { $(document).ready(function () {
mapUrl(window.location); var search = window.location.search;
if (search) {
mapUrl(search.slice(1));
} else {
$("body").text("No parameter found in url");
}
}); });
}(document, jQuery)); }(document, jQuery));
gadget/filebrowser_and_preview.js
View file @ 8a1e595d
/*global document, jQuery */ /*global document, jQuery */
// filebrowser.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
"use strict"; "use strict";
(function (document, $) { (function (document, $) {
...@@ -20,6 +19,20 @@ ...@@ -20,6 +19,20 @@
return -1; return -1;
}; };
var generateUuid = function () {
var S4 = function () {
/* 65536 */
var i, string = Math.floor(
Math.random() * 0x10000
).toString(16);
for (i = string.length; i < 4; i += 1) {
string = "0" + string;
}
return string;
};
return S4() + S4();
};
var getParameter = function(searchString, paramName) { var getParameter = function(searchString, paramName) {
var i, val, params = searchString.split("&"); var i, val, params = searchString.split("&");
...@@ -32,29 +45,69 @@ ...@@ -32,29 +45,69 @@
return null; return null;
}; };
// this is our "interactor", it only knows one other iFrame
// so we post to this one!
var handler = function (event) { var handler = function (event) {
var frames = document.getElementsByTagName("iframe"), frame, i; // prevent registrations to renderJs from triggering here
for (i = 0; i < frames.length; i += 1) { var type = event.data.type,
frame = frames[i]; service,
if (myIndexOf( scope,
event.source.location.pathname, request;
frame.getAttribute("src").split("?")[0]
) < 0) { if (type === undefined) {
frame.contentWindow.postMessage(event.data, "*"); $.ajax({
// frame.contentWindow.postMessage(event.data, window.location.href); method: "GET",
} url: event.data,
error: function (jqXHR, textStatus, errorThrown) {
console.log("request failed: " + errorThrown);
},
success: function (value, textStatus, jqXHR) {
// we now have the URL to handle and the method
// to request. We need to POST this, because
// we can't access renderJS.gadgetService from here...
// when optimizing all the secondary ajax calls should be removed
// question also is, whether we need POST at all, if we could
// pass everything through the URL?
scope = value._links.self.href.split("/").slice(0,-1).pop();
service = {
"service" : value._links.self.href.split(/[/]+/).pop(),
"parameters" : [value._links.request.href],
"scope" : scope
}
request = 'browser://request/' + scope + '/';
$.ajax({
method: "POST",
url: request,
context: $(this),
data: JSON.stringify(service),
error: function (jqXHR, textStatus, errorThrown) {
console.log("request for service failed");
},
// success: function () {
// console.log("service requested from renderJS");
// }
});
}
});
// var frames = document.getElementsByTagName("iframe"), frame, i;
// for (i = 0; i < frames.length; i += 1) {
// frame = frames[i];
// if (myIndexOf(
// event.source.location.pathname,
// frame.getAttribute("src").split("?")[0]
// ) < 0) {
// frame.contentWindow.postMessage(event.data, "*");
// }
// }
} }
}; };
var mapUrl = function (url) { var mapUrl = function (searchString) {
var searchString = url.href.split("?")[1], var fileToDisplay = getParameter(searchString, "file"),
fileToDisplay, fileToDisplayData; browserAPI,
previewAPI;
if (searchString) {
fileToDisplay = getParameter(searchString, "file");
if (fileToDisplay) {
$.ajax({ $.ajax({
method: 'GET', method: 'GET',
// XXX Hardcoded // XXX Hardcoded
...@@ -64,45 +117,65 @@ ...@@ -64,45 +117,65 @@
$(this).text(errorThrown); $(this).text(errorThrown);
}, },
success: function (value, textStatus, jqXHR) { success: function (value, textStatus, jqXHR) {
fileToDisplayData = "data://application/hal+json;base64," + var access;
// detour to request, while working on the 2nd preview window
if (value._links.target.href === "preview_by_postmessage.html") {
access = "request";
} else {
access = "plumb";
}
// merge again once working!
browserAPI = "data://application/hal+json;base64," +
window.btoa(JSON.stringify({ window.btoa(JSON.stringify({
_links: { _links: {
self: {href: value._links.storage.href}, self: {href: value._links.scope.href},
storage: {href: value._links.storage.href}, scope: {href: value._links.scope.href},
display: {href: 'browser://plumb/parentwindow/'}, display: {href: 'browser://' + access + '/parentwindow/'},
// pass API-url so child can call parent
call: {href:'browser://call/{method}/{scope}/{interaction}'}
}})); }}));
if (fileToDisplay) { previewAPI = "data://application/hal+json;base64," +
window.btoa(JSON.stringify({
$("body").html( _links: {
'<iframe src="' + self: {href:''},
// XXX Hardcoded gadget to load scope: {href: value._links.scope.href},
'filebrowser.html?file=' + fileToDisplayData + display: {href: ''},
'">' + call: {href:'browser://call/{method}/{scope}/{interaction}'}
'<p>Your browser does not support iframes.</p>' + }}));
'</iframe">');
$("body").append( $("body").html(
'<iframe src="' + '<iframe src="' +
// XXX Hardcoded gadget to load // XXX Hardcoded gadget to load
value._links.preview.href + 'filebrowser.html?file=' + browserAPI +
'">' + '" id="' + generateUuid() +
'<p>Your browser does not support iframes.</p>' + '">' +
'</iframe">'); '<p>Your browser does not support iframes.</p>' +
'</iframe">');
} else { $("body").append(
$("body").text("No parameter found in url"); '<iframe src="' +
} // XXX Hardcoded gadget to load
}, value._links.target.href + '?file=' + previewAPI +
'" id="' + generateUuid() +
'">' +
'<p>Your browser does not support iframes.</p>' +
'</iframe">');
}
}); });
} else { } else {
$("body").text("No parameter found in url (2)"); $("body").text("No parameter found in url");
} }
}; };
$(document).ready(function () { $(document).ready(function () {
mapUrl(window.location); var search = window.location.search;
if (search) {
mapUrl(search.slice(1));
} else {
$("body").text("No parameter found in url");
}
if (window.addEventListener){ if (window.addEventListener){
window.addEventListener("message", handler, false) window.addEventListener("message", handler, false)
......
gadget/filecontent.js
View file @ 8a1e595d
/*global document, jQuery */ /*global document, jQuery */
// filebrowser.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
// filebrowser_and_preview.html?file=browser%3A%2F%2Fbrowse%2Fls%2F
"use strict"; "use strict";
(function (document, $) { (function (document, $) {
// sample contents
localStorage.setItem("foo", "bar");
localStorage.setItem("baz", "bam");
sessionStorage.setItem("cous", "cous");
sessionStorage.setItem("schnick", "schnack");
// contents var generateUuid = function () {
localStorage.setItem("foo", "bar"); var S4 = function () {
localStorage.setItem("baz", "bam"); var i, string = Math.floor(
sessionStorage.setItem("cous", "cous"); Math.random() * 0x10000
sessionStorage.setItem("schnick", "schnack"); ).toString(16);
// var myIndexOf = function (path, contains) { for (i = string.length; i < 4; i += 1) {
// var len = path.length; string = "0" + string;
// var wordLen = contains.length; }
// for(var i = 0; i < len; i++) { return string;
// var j = 0; };
// for(j = 0; j < wordLen; j++) { return S4() + S4();
// if(path[i+j] != contains[j]) { };
// break;
// }
// }
// if(j == wordLen) {
// return i;
// }
// }
// return -1;
// };
//
// var getParameter = function(searchString, paramName) {
// var i, val, params = searchString.split("&");
//
// for (i=0;i<params.length;i++) {
// val = params[i].split("=");
// if (val[0] == paramName) {
// return decodeURIComponent(val[1]);
// }
// }
// return null;
// };
//
// // this is our "interactor", it only knows one other iFrame
// // so we post to this one!
// var handler = function (event) {
// var frames = document.getElementsByTagName("iframe"), frame, i;
// for (i = 0; i < frames.length; i += 1) {
// frame = frames[i];
// if (myIndexOf(
// event.source.location.pathname,
// frame.getAttribute("src").split("?")[0]
// ) < 0) {
// frame.contentWindow.postMessage(event.data, "*");
// }
// }
// };
//
var mapUrl = function (url) {
// var searchString = url.href.split("?")[1],
// fileToDisplay;
//
// if (searchString) {
// fileToDisplay = getParameter(searchString, "file");
//
// if (fileToDisplay) {
var param1 = "data://application/hal+json;base64," +
window.btoa(JSON.stringify({
_links: {
self: {href: ""},
storage: {href: 'browser://browse/ls/'},
preview: {href: 'preview_by_hash_change.html'},
}}));
var param2 = "data://application/hal+json;base64," + var setup = function () {
window.btoa(JSON.stringify({ // this will have to run automatically should renderJs have an easy API
_links: { var instance1 = "data://application/hal+json;base64," +
self: {href: ""}, window.btoa(JSON.stringify({
storage: {href: 'browser://browse/ss/'}, _links: {
preview: {href: 'preview_by_postmessage.html'}, self: {href: ''},
}})); // not sure if scope should be passed as a link or JSON parameter
scope: {href: 'browser://browse/ls/'},
target: {href: 'preview_by_hash_change.html'},
call: {href: ''}
}}));
$("body").append( var instance2 = "data://application/hal+json;base64," +
'<iframe src="' + window.btoa(JSON.stringify({
// XXX Hardcoded gadget to load _links: {
'filebrowser_and_preview.html' + "?file=" + param1 + self: {href: ''},
'">' + scope: {href: 'browser://browse/ss/'},
'<p>Your browser does not support iframes.</p>' + target: {href: 'preview_by_postmessage.html'},
'</iframe">'); call: {href: ''}
}}));
$("body").append( $("body").append(
'<iframe src="' + '<iframe src="' +
// XXX Hardcoded gadget to load // XXX Hardcoded gadget to load
'filebrowser_and_preview.html' + "?file=" + param2 + 'filebrowser_and_preview.html' + "?file=" + instance1 +
'">' + '" id="' + generateUuid() +
'<p>Your browser does not support iframes.</p>' + '">' +
'</iframe">'); '<p>Your browser does not support iframes.</p>' +
'</iframe">');
// } else { $("body").append(
// $("body").text("No parameter found in url"); '<iframe src="' +
// } // XXX Hardcoded gadget to load
// } else { 'filebrowser_and_preview.html' + "?file=" + instance2 +
// $("body").text("No parameter found in url (2)"); '" id="' + generateUuid() +
// } '">' +
'<p>Your browser does not support iframes.</p>' +
'</iframe">');
}; };
$(document).ready(function () { $(document).ready(function () {
mapUrl(window.location); setup();
// if (window.addEventListener){
// window.addEventListener("message", handler, false)
// } else {
// window.attachEvent("onmessage", handler)
// }
}); });
}(document, jQuery)); }(document, jQuery));
gadget/preview.html 0 → 100644
View file @ 8a1e595d
<!DOCTYPE html>
<html>
<head>
<title>Preview</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../hyperbrowser.js"></script>
<script type="text/javascript" src="../renderjs.js"></script>
<script type="text/javascript" src="preview.js"></script>
</head>
<body>
<noscript>
Please enable Javascript
</noscript>
</body>
</html>
\ No newline at end of file
gadget/preview.js 0 → 100644
View file @ 8a1e595d
// > grab URL with parameters of file to open
// > call addGadget with those parameters?
// > display a file from some storage (local/session)
// > storage type will also be a parameter in the url?
// return "browser://localstorage/foo"
// file=browser%3A%2F%2Flocalstorage%2Ffoo
/*global document, jQuery */
"use strict";
(function (document, $) {
var ajaxGet = function (src, cb) {
$.ajax({
method: 'GET',
url: src,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value, textStatus, jqXHR) {
cb(value, textStatus, jqXHR);
}
});
};
var handler = function (event) {
ajaxGet(event.data, function(value, status, jqXHR) {
ajaxGet(value._links.enclosure.href, function(value, status, jqXHR) {
if (value === "") {
window.document.body.innerHTML = "file not found";
} else {
window.document.body.innerHTML = value;
}
});
});
}
var mapUrl = function (url) {
var searchString = url.href.split("?")[1],
fileToDisplay;
if (searchString) {
fileToDisplay = getParameter(searchString, "file");
if (fileToDisplay) {
$.ajax({
method: 'GET',
url: fileToDisplay,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value, textStatus, jqXHR) {
if (value === "") {
$(this).text("file not found");
} else {
$(this).text(value);
}
},
});
}
} else {
$(this).text("no file to display");
}
};
var getParameter = function(searchString, paramName) {
var i, val, params = searchString.split("&");
for (i=0;i<params.length;i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return decodeURIComponent(val[1]);
}
}
return null;
};
$(document).ready(function () {
// mapUrl(window.location);
if (window.addEventListener){
window.addEventListener("message", handler, false)
} else {
window.attachEvent("onmessage", handler)
}
});
}(document, jQuery));
\ No newline at end of file
gadget/preview_by_hash_change.js
View file @ 8a1e595d
...@@ -83,6 +83,10 @@ ...@@ -83,6 +83,10 @@
} else { } else {
window.attachEvent("onmessage", handler) window.attachEvent("onmessage", handler)
} }
// $(window).on('hashchange', function() {
// console.log("LE HASH CHANGED");
// });
// $(window).trigger("hashchange");
}); });
}(document, jQuery)); }(document, jQuery));
\ No newline at end of file
gadget/preview_by_postmessage.js
View file @ 8a1e595d
// > grab URL with parameters of file to open
// > call addGadget with those parameters?
// > display a file from some storage (local/session)
// > storage type will also be a parameter in the url?
// return "browser://localstorage/foo"
// file=browser%3A%2F%2Flocalstorage%2Ffoo
/*global document, jQuery */ /*global document, jQuery */
"use strict"; "use strict";
(function (document, $) { (function (document, $) {
...@@ -24,44 +17,21 @@ ...@@ -24,44 +17,21 @@
}; };
var handler = function (event) { var handler = function (event) {
ajaxGet(event.data, function(value, status, jqXHR) { var type = event.data.type,
ajaxGet(value._links.enclosure.href, function(value, status, jqXHR) { method = type ? type.split("/")[0] : undefined;
if (value === "") { // prevent both renderJs and page events triggering on "run"
window.document.body.innerHTML = "file not found"; if (type === undefined || method !== "run") {
} else { ajaxGet(event.data, function(value, status, jqXHR) {
window.document.body.innerHTML = value; ajaxGet(value._links.enclosure.href, function(value, status, jqXHR) {
} if (value === "") {
}); window.document.body.innerHTML = "file not found";
}); } else {
} window.document.body.innerHTML = value;
}
var mapUrl = function (url) {
var searchString = url.href.split("?")[1],
fileToDisplay;
if (searchString) {
fileToDisplay = getParameter(searchString, "file");
if (fileToDisplay) {
$.ajax({
method: 'GET',
url: fileToDisplay,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value, textStatus, jqXHR) {
if (value === "") {
$(this).text("file not found");
} else {
$(this).text(value);
}
},
}); });
} });
} else {
$(this).text("no file to display");
} }
}; }
var getParameter = function(searchString, paramName) { var getParameter = function(searchString, paramName) {
var i, val, params = searchString.split("&"); var i, val, params = searchString.split("&");
...@@ -75,8 +45,58 @@ ...@@ -75,8 +45,58 @@
return null; return null;
}; };
$(document).ready(function () { var mapUrl = function (searchString) {
// mapUrl(window.location); var fileToDisplay = getParameter(searchString, "file"),
scope,
register,
service;
if (fileToDisplay) {
$.ajax({
method: 'GET',
url: fileToDisplay,
context: $('body'),
error: function (jqXHR, textStatus, errorThrown) {
$(this).text(errorThrown);
},
success: function (value, textStatus, jqXHR) {
scope = value._links.scope.href.slice(0,-1).split(/[/]+/).pop();
register = value._links.call.href
.replace("{method}", "register")
.replace("{scope}", scope )
.replace("{interaction}", "");
service = {
"type": "service/test",
"src": encodeURIComponent(window.location.href),
"rel": "preview",
"self": window.frameElement.id
};
$.ajax({
method: 'POST',
url: register,
context: $(this),
data: JSON.stringify(service),
error: function (jqXHR, textStatus, errorThrown) {
console.log("registration failed: " + errorThrown);
},
success: function (value, textStatus, jqXHR) {
// console.log("registration successful");
}
});
}
});
}
}
$(document).ready(function () {
var search = window.location.search;
if (search) {
mapUrl(search.slice(1));
} else {
$("body").text("No parameter found in url");
}
if (window.addEventListener){ if (window.addEventListener){
window.addEventListener("message", handler, false) window.addEventListener("message", handler, false)
......
renderjs.js
View file @ 8a1e595d
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7