Skip to content

R
renderjs
Commit 1f0e5ce0 authored by Sven Franck's avatar Sven Franck
Browse files
Options

revert to previous version, add cross domain iFrame service request

parent dad0737c
Hide whitespace changes
Inline Side-by-side
Showing with 1051 additions and 53 deletions
renderjs.js
View file @ 1f0e5ce0
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>plaintext</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../renderjs.js"></script>
</head>
<body>
<table style="border: 1px solid black; font-size: 9px">
<tr>
<td colspan="2" style="text-align:center;"><b>plaintext.html</b></td>
<tr>
<td><b>Loaded</b></td>
<td>Ajax (from addGadget())</td>
</tr>
<tr>
<td><b>Location</b></td>
<td>inside index.html</td>
</tr>
<tr>
<td><b>Service</b></td>
<td>None</td>
</tr>
<tr>
<td><b>Domain</b></td>
<td>same</td>
</tr>
</table>
<p>We try to calculate!</p>
<div>
<input style="width: 20px;" type="number" value="2" name="a" id="a" />
<input style="width: 20px;" type="number" value="2" name="b" id="b" />
<input style="width: 50px;" type="number" value="" name="c" id="c" />
<button id="multiply">Multiply</button>
<button id="subtract">Subtract</button>
</div>
<div data-gadget="gadgets/nestedplaintext.html"></div>
<script type="text/javascript">
$(this.document).find('button').on('click', function(e, target) {
var options = {
"service" : $(this).attr('id'),
"parameters": [$('#a').val(), $('#b').val()]
};
// this is not perfect, because I cannot call $("button").requestService...
renderJs.requestService(options, function (response) {
$("#c").val(response);
// TODOS:
// -> remove wrapping elements on hardcoded gadgets
// -> JQM needs trigger("create") on parent, easy to call on wrapper
// -> enhance before replace?
// -> does a sandbox need a wrapper?
// -> addGadget
// -> add callbacks
// -> allow to load remote src files, which should only have <link> elements
// to publish their services
// -> find a way to prevent a gadget from reloading a plugin that's already
// active on the page
// DISCUSSION POINTS:
// (1)
// (2) If not used for interactions or routing, what's the purpose of
// gadgetIndex?
// (3) Do we dumb-store in the index or perform some sort of validation
// before adding a gadget to an index?
// (4)
// (5) Should findGadget() = find recursive gadgets, also work with a single
// gadget id, like findGadget({"id":"1ewnel73"}), I guess not as we
// are using random uuids internally only
// (6)
// (7)
// (8)
// (9) When hard-coding services (see content.html), the "url" parameter can
// be omitted which would default to current iFrame (window) or root?
// (10)
// (11)is passing the root URL through the URL a security vulnerablity?
// (12)should findGadget and findService be API methods? They will scan the
// DOM for services/gadgets, but this should actually be done (and is done)
// automatically
// (13)we need to use an id to identify <frames> on a page, currently set as
// uuid by renderJs. We could also use data-id or remove the id and try
// to match by src (url), but this will be worse in terms of performance
// (14)what do to about service parameters. A service that requires parameters
// a and b passed to return c should somewhere also specify this. Do we
// need a service JSON/HAL API? or where should this information be made
// availabel
// Info:
// iframe communication:
// http://bit.ly/11gjl1e
// http://bit.ly/1434ZSV
// custom URI schemes:
// http://bit.ly/11tn2MJ
// validate URL:
// http://bit.ly/2Ol4gj
// deferred explanation:
// http://bit.ly/WH2TRI
// http://bit.ly/zm0Csi
/*jslint indent: 2, maxlen: 80, nomen: true */
/*global window: true, $: true, undefined: true, console: true,
document: true, require: true*/
(function ($, window) {
"use strict";
var priv = {},
that = {};
// ================== utility methods ==================
// extend $.deferred to allow multiple calls and resolves
// thx router.js
$.extend({
StatelessDeferred: function () {
var doneList = $.Callbacks("memory"),
promise = {
done: doneList.add,
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function (obj) {
var i,
keys = ['done', 'promise'];
if (obj === undefined) {
obj = promise;
} else {
for (i = 0; i < keys.length; i += 1) {
obj[keys[i]] = promise[keys[i]];
}
}
return obj;
}
},
deferred = promise.promise({});
deferred.resolveWith = doneList.fireWith;
deferred.resolve = doneList.fire;
// All done!
return deferred;
}
});
// => cross-browser reduce (no support in ie8-, opera 12-)
// http://mzl.la/11tnDy1
if ('function' !== typeof Array.prototype.reduce) {
Array.prototype.reduce = function (callback, opt_initialValue) {
if (null === this || 'undefined' === typeof this) {
// At the moment all modern browsers, that support strict mode, have
// native implementation of Array.prototype.reduce. For instance, IE8
// does not support strict mode, so this check is actually useless.
throw new TypeError(
'Array.prototype.reduce called on null or undefined'
);
}
if ('function' !== typeof callback) {
throw new TypeError(callback + ' is not a function');
}
var index = 0, length = this.length >>> 0, value, isValueSet = false;
if (1 < arguments.length) {
value = opt_initialValue;
isValueSet = true;
}
for ( ; length > index; ++index) {
if (!this.hasOwnProperty(index)) continue;
if (isValueSet) {
value = callback(value, this[index], index, this);
} else {
value = this[index];
isValueSet = true;
}
}
if (!isValueSet) {
throw new TypeError('Reduce of empty array with no initial value');
}
return value;
};
}
// => regexes used to convert Ajax response string into HTML element list
// thx require: http://requirejs.org/docs/release/2.1.6/comments/require.js
priv.removeJSComments = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg;
priv.removeHTMLComments = /<!--[\s\S]*?-->/mg;
priv.removeLineBreaks = /(\r\n|\n|\r)/mg;
priv.removeWhiteSpace = /\s+/mg;
priv.removeWhiteSpaceBetweenElements = />\s+</mg;
// => convert all URLs to absolute URLs
// thx JQM - http://code.jquery.com/mobile/latest/jquery.mobile.js
// URL regexp
// [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
// [1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
// [2]: http://jblas:password@mycompany.com:8080/mail/inbox
// [3]: http://jblas:password@mycompany.com:8080
// [4]: http:
// [5]: //
// [6]: jblas:password@mycompany.com:8080
// [7]: jblas:password
// [8]: jblas
// [9]: password
// [10]: mycompany.com:8080
// [11]: mycompany.com
// [12]: 8080
// [13]: /mail/inbox
// [14]: /mail/
// [15]: inbox
// [16]: ?msg=1234&type=unread
// [17]: #msg-content
priv.urlParser = /^\s*(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/
// parse a URL
priv.parseUrl = function( url ) {
if ( $.type( url ) === "object" ) {
return url;
}
var matches = priv.urlParser.exec( url || "" ) || [];
return {
href: matches[ 0 ] || "",
hrefNoHash: matches[ 1 ] || "",
hrefNoSearch: matches[ 2 ] || "",
domain: matches[ 3 ] || "",
protocol: matches[ 4 ] || "",
doubleSlash: matches[ 5 ] || "",
authority: matches[ 6 ] || "",
username: matches[ 8 ] || "",
password: matches[ 9 ] || "",
host: matches[ 10 ] || "",
hostname: matches[ 11 ] || "",
port: matches[ 12 ] || "",
pathname: matches[ 13 ] || "",
directory: matches[ 14 ] || "",
filename: matches[ 15 ] || "",
search: matches[ 16 ] || "",
hash: matches[ 17 ] || ""
};
};
priv.isForeignUrl = function (url) {
var host = priv.parseUrl(url).hostname,
foreign = true;
if (host === "" || host === window.location.hostname) {
foreign = false;
}
return foreign;
};
// is relateive URl (check protocol)
priv.isRelativeUrl = function (url ) {
return priv.parseUrl( url ).protocol === "";
};
// get location
priv.getLocation = function (url) {
var uri = url ? priv.parseUrl( url ) : location,
hash = priv.parseUrl( url || location.href ).hash;
// mimic the browser with an empty string when the hash is empty
hash = hash === "#" ? "" : hash;
// Make sure to parse the url or the location object for the hash because using location.hash
// is autodecoded in firefox, the rest of the url should be from the object (location unless
// we're testing) to avoid the inclusion of the authority
return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash;
};
// make PATH absolute
priv.makePathAbsolute = function (relPath, absPath) {
var absStack, relStack, i, d;
if ( relPath && relPath.charAt( 0 ) === "/" ) {
return relPath;
}
relPath = relPath || "";
absPath = absPath ? absPath.replace( /^\/|(\/[^\/]*|[^\/]+)$/g, "" ) : "";
absStack = absPath ? absPath.split( "/" ) : [];
relStack = relPath.split( "/" );
for ( i = 0; i < relStack.length; i++ ) {
d = relStack[ i ];
switch ( d ) {
case ".":
break;
case "..":
if ( absStack.length ) {
absStack.pop();
}
break;
default:
absStack.push( d );
break;
}
}
return "/" + absStack.join( "/" );
};
// make URL absolute
priv.makeUrlAbsolute = function (relUrl, absUrl) {
if ( !priv.isRelativeUrl( relUrl ) ) {
return relUrl;
}
if ( absUrl === undefined ) {
absUrl = priv.parseUrl(priv.getLocation());
}
var relObj = priv.parseUrl( relUrl ),
absObj = priv.parseUrl( absUrl ),
protocol = relObj.protocol || absObj.protocol,
doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash ),
authority = relObj.authority || absObj.authority,
hasPath = relObj.pathname !== "",
pathname = priv.makePathAbsolute( relObj.pathname || absObj.filename, absObj.pathname ),
search = relObj.search || ( !hasPath && absObj.search ) || "",
hash = relObj.hash;
return protocol + doubleSlash + authority + pathname + search + hash;
};
// => generate unique identifier
priv.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();
};
// extract module name from path
priv.extractModuleName = function (src) {
var re = /([\w\d_-]*)\.?[^\\\/]*$/i;
return src.match(re)[1];
};
// => safe getAttribute for data-*
// thx JQM - http://code.jquery.com/mobile/latest/jquery.mobile.js
priv.getAttribute = function (element, attribute, json) {
var value;
value = element.getAttribute("data-" + attribute);
return value === "true" ? true :
value === "false" ? false :
value === null ? (json ? "" : undefined) : value;
};
// => URI methods
// decode URI
priv.decodeURI = function (string) {
return decodeURIComponent(string);
};
// encode URI
priv.encodeURI = function (string) {
return encodeURIComponent(string);
};
// decode URI array
priv.decodeURIArray = function (array) {
var i, newArray = [];
for (i = 0; i < array.length; i += 1) {
newArray.push(priv.decodeURI(array[i]));
}
return newArray;
};
// ================== internal methods ==================
// => keep service callbacks available until a postMessage returns response
priv.trackCallback = function (id, callback, callbackFunction) {
if (priv.callbackTracker === undefined) {
priv.callbackTracker = [];
}
priv.callbackTracker.push({
"id": id,
"callback": callback,
"callbackFunction": callbackFunction
});
};
// => keep track of service requesters to reply to
priv.trackRequest = function (id, respondTo) {
if (priv.serviceTracker === undefined) {
priv.serviceTracker = [];
}
priv.serviceTracker.push({"id": id, "respondTo": respondTo});
};
// => retrieve callback for a specific service call
priv.retrieveCallback = function (id) {
var i, callback;
for (i = 0; i < priv.callbackTracker.length; i += 1) {
callback = priv.callbackTracker[i];
if (callback.id = id) {
return [callback.callback, callback.callbackFunction];
}
}
};
// => retrieve window which called a specific service
priv.retrieveCallingWindow = function (id) {
var i, service, callee;
for (i = 0; i < priv.serviceTracker.length; i += 1) {
service = priv.serviceTracker[i];
if (service.id === id) {
callee = service.respondTo;
priv.serviceTracker.splice(i, 1);
return callee;
}
}
};
// => mapping URL query-string (configuration
priv.mapUrlString = function (spec) {
var key, obj, parsedJSON, config = {};
if (spec !== undefined && spec !== "") {
obj = spec.slice(1).split("=");
key = obj[0];
switch (key) {
case "string":
case "url":
config.root = priv.decodeURI(obj[1]);
break;
case "json":
parsedJSON = JSON.parse(priv.decodeURI(obj[1]));
config.root = parsedJSON.root || window.location.pathname;
config.src = priv.decodeURIArray(parsedJSON.src) || [];
break;
case "hal":
parsedJSON = JSON.parse(priv.decodeURI(obj[1]));
config.root = parsedJSON._links.self || window.location.pathname;
config.src = priv.decodeURIArray(parsedJSON.src) || [];
break;
case "data":
break;
default:
// no allowable-type - ignore config-parameter!
config.root = window.location.href;
config.src = [];
break;
}
} else {
config = {"root": window.location.href};
}
return config;
};
// => create Index of gadgets on page (excluding gadgets in iFrame/Sandbox)
priv.createGadgetIndex = function () {
that.gadgetIndex = [];
};
// => create gadget reference tree (includes gadgets in iFrame/Sandbox)
priv.createGadgetTree = function () {
that.gadgetTree = {
"id": "root",
"src": window.location.href,
"children": []
};
};
// => add gadget to index
priv.addGadgetToIndex = function (data, options) {
that.gadgetIndex.unshift({
"id": options.id,
"options": options,
"data": data
});
};
// => add gadget to tree
priv.addGadgetToTree = function (options, treeNode) {
var i, newNode;
// recursive add
if (options.parentFrame === undefined) {
treeNode.children.unshift({
"id": options.id,
"src": options.src,
"foreign" : priv.isForeignUrl(options.src),
"children": []
});
} else {
for (i = 0; i < treeNode.children.length; i += 1) {
newNode = treeNode.children[i];
if (options.parentFrame === newNode.id) {
delete options.parentFrame;
priv.addGadgetToTree(options, newNode);
break;
}
if (newNode.children.length > 0) {
priv.addGadgetToTree(options, newNode);
}
}
}
// if we are in a renderJs instance other than the root-instance
// (e.g. inside an iFrame) we also need to tell the root how this
// gadget can be accessed in case we want to call it's services
if (window.top !== window) {
window.top.postMessage({
// this will trigger addGagdetToTree() on root-in
"type": "tree/update",
"options": {
// passing "options":options will procude a DataCloneError, so
// this is the only way (it seems) to pass the options object.
"parentFrame": window.frameElement.getAttribute("id"),
"id": options.id,
"src": options.src,
"children": []
}
}, window.location.href.split("?")[0]);
}
};
// => loop the gadgetTree to construct a selector to call a service
priv.constructSelectorForService = function (src, node, selector) {
var i, result;
selector = selector || [];
// we must not push "root" into the array to make reduce work
if (node.id !== "root") {
selector.push([node.id, node.foreign]);
}
if (node.src === src) {
return selector;
}
for (i = 0; i < node.children.length; i += 1) {
result = priv.constructSelectorForService(
src,
node.children[i],
selector
);
if (result !== undefined) {
return result;
}
selector.pop();
}
};
// => interaction gadget and listener
// if initializing config is provided in the URL, we may have an src=[]
// of links to additional functional libraries (?), which should be
// available here. So we should load them.
priv.createServiceMap = function (spec) {
that.gadgetService = {
"root": spec.root || window.location.href,
"directories": spec.src || [],
"map": []
};
// listen for service postings to THIS renderJs instance
if (window.addEventListener){
window.addEventListener("message", priv.serviceHandler, false)
} else {
window.attachEvent("onmessage", priv.serviceHandler)
}
};
// => manages all interactions (listens to incoming postMessages)
// need a switch, because only one "message" listener can be set
priv.serviceHandler = function (event) {
var route = event.data.type.split("/"),
trackingId;
// authenticate all message senders
// basic "authentication" is done through the switch, which requires
// a matching type to be passed - still the incoming URL should be
// authenticated, too, plus preferably another ticket-authentication.
// route
switch (route[0]) {
case "service":
priv.registerNewService(event);
break;
case "request":
trackingId = priv.generateUuid();
// track this request, so we know where to send the response
priv.trackRequest(trackingId, event.originalTarget);
// request the service
priv.requestServiceFromGadget(event, trackingId);
break;
case "tree":
if (route[1] === "update") {
priv.addGadgetToTree(event.data.options, that.gadgetTree);
}
break;
case "run":
priv.runService(event);
break;
case "result":
priv.sendServiceReply(event);
break;
case "reply":
priv.returnResult(event);
break;
}
};
// => return the result to the function call
priv.returnResult = function (event) {
var callback = priv.retrieveCallback(event.data.callback);
// resolve the deferred, which includes the requestService callback
callback[0].resolve(event.data.result, callback[1]);
};
// => sends a response message after a service has been run
priv.sendServiceReply = function (event) {
var targetWindow = priv.retrieveCallingWindow(event.data.trackingId);
targetWindow.postMessage({
"type": "reply",
"result": event.data.result,
"callback": event.data.callbackId,
}, window.location.href.split("?")[0]);
};
// => run a service and post the result
priv.runService = function (event) {
var result = window[event.data.service].apply(this, event.data.parameters),
foreign = priv.isForeignUrl(event.origin);
window.top.postMessage({
"type": "result",
"result": result,
"trackingId" : event.data.trackingId,
"callbackId": event.data.callbackId,
// "*" is not recommended, but when using localhost, this seems
// to be the only way to get the message to domain1...?
// make sure this works with window.location.href in production
}, foreign ? "*" : window.location.href.split("?")[0]);
};
// => request a service provided by a gadget
priv.requestServiceFromGadget = function (event, trackingId) {
var callService = priv.findServiceInMap(
event.data.service,
event.data.type.split("/")[1]
),
selector,
targetWindow,
foreign;
if (callService) {
// services are stored by URL (not id), so we need to find the service
// in our gadget tree by using the URL provided by the service...
// and return an id path, so we can create a selector
selector = priv.constructSelectorForService(
callService.src,
that.gadgetTree,
[]
);
// for plain nested gadgets (no iFrame/sandbox) this will return
// only an empty array
// for iFrames/sandbox, selector will be an array of ids from
// which we have to construct our window element like so:
// http://bit.ly/12m3wJD
// http://mzl.la/17EeDiN
// final selector should look like this:
// window.frames["3a6b8d97"].contentWindow
// .frames["d63aca68"].contentWindow
// .frames["foo"].contentWindow
if (selector.length === 0) {
targetWindow = window;
} else {
foreign = selector[selector.length-1][1];
try {
targetWindow = selector.reduce(function(tgt, o) {
return tgt && o[1] ?
tgt.frames[0] :
tgt.frames[o[0]].contentWindow || tgt.frames[o[0]];
}, window);
} catch (error) {
console.log(error);
}
}
// and request the service
targetWindow.postMessage({
"type": "run",
"trackingId": trackingId,
"callbackId": event.data.callbackId,
"service": event.data.service,
"parameters": event.data.parameters
// "*" is not recommended, but when using localhost, this seems
// to be the only way to get the message to domain1...?
// make sure this works with window.location.href in production
}, foreign ? "*" : window.location.href);
}
};
// => check whether a service is available
priv.findServiceInMap = function (requestedService, scope) {
// scope... use for ???
var i,
service,
passback = null;
for (i = 0; i < that.gadgetService.map.length; i += 1) {
service = that.gadgetService.map[i];
if (service.rel === requestedService) {
passback = service;
}
}
return passback;
};
// => register a new Service to the root
priv.registerNewService = function (event) {
var i, check, addInteraction = true;
// prevent duplicate entrys of same service
for (i = 0; i < that.gadgetService.map.length; i += 1) {
check = that.gadgetService.map[i];
if (event.data.rel === check.rel) {
if (event.data.src === check.src) {
addInteraction = false;
}
}
}
if (addInteraction) {
that.gadgetService.map.push(event.data);
}
};
// => register gadget in index and tree
priv.registerGadget = function (data, options) {
// create index
if (that.gadgetIndex === undefined) {
priv.createGadgetIndex();
}
// create tree
if (that.gadgetTree === undefined) {
priv.createGadgetTree();
}
// index ~ cache
priv.addGadgetToIndex(data, options);
// tree ~ lookup reference
priv.addGadgetToTree(options, that.gadgetTree);
};
// => find hardcoded services in source HTML
priv.findServiceInHTML = function (spec, sentRoot) {
var root = sentRoot || document,
services,
service,
options,
i,
j;
try {
services = root.querySelectorAll('[data-service], link[type^=service]');
for (i = 0; i < services.length; i += 1) {
service = JSON.parse(priv.getAttribute(services[i], 'service'));
for (j = 0; j < service.length; j += 1) {
options = {
"rel": service[j].rel,
"type": service[j].type,
"src": service[j].src || window.location.href.split("?")[0]
};
$(root).addService(options);
}
}
} catch (error) {
console.log(error);
}
};
// => find hardcoded gadgets in source HTML
priv.findGadgetinHTML = function (spec, sentRoot) {
var root = sentRoot || document,
gadgets,
gadget,
options,
i;
// need to try/catch because cross domain will not permit qsa
// > so any cross domain gadgets have to be self-sufficient
// > have renderJs and load their own gadgets!
try {
gadgets = root.querySelectorAll('[data-gadget]');
// gadget options
for (i = 0; i < gadgets.length; i += 1) {
gadget = gadgets[i];
options = {
"src" : priv.makeUrlAbsolute(priv.getAttribute(gadget, 'gadget')),
"id": priv.generateUuid(),
"param" : JSON.parse(
priv.getAttribute(gadget, 'param', true) || null
),
"sandbox" : priv.getAttribute(gadget, 'sandbox') || false,
"iframe" : priv.getAttribute(gadget, 'iframe') || false,
"wrapper": gadget,
"directory": spec
};
// add gadget
$(root).addGadget(options);
}
} catch (error) {
console.log(error);
}
};
// => insert a gadget into the DOM
priv.appendGadget = function (gadgetData, options) {
var newHTML = [],
newParentElement,
newRootElement,
callback,
cleanedString,
content,
i,
element;
// update gadgetIndex
priv.registerGadget(gadgetData, options);
// MODULE, DEFAULT handler
if (gadgetData !== undefined) {
if (typeof gadgetData === "object") {
newHTML = gadgetData.data;
callback = gadgetData.callback;
} else {
// extract relevant page elements here!
cleanedString = gadgetData
.replace(priv.removeJSComments, "")
.replace(priv.removeHTMLComments, "")
.replace(priv.removeLineBreaks, "")
.replace(priv.removeWhiteSpace, " ")
.replace(priv.removeWhiteSpaceBetweenElements, "><");
// this will return a nodeList with head and body elements
// e.g. [meta, title, link, p, div]
content = $.parseHTML(cleanedString, true);
for (i = 0; i < content.length; i += 1) {
element = content[i];
switch (element.tagName) {
case "LINK":
if (element.getAttribute("type").split("/")[0] === "service") {
$(element).addService({
"src": element.getAttribute("src") ||
window.location.href.split("?")[0],
"type": element.getAttribute("type"),
"rel": element.getAttribute("rel")
});
}
break;
case "META":
case "TITLE":
break;
case "SCRIPT":
// TODOS: this is bad, problem is gadgets being injected into
// the DOM without iFrame, will also have all script tags
// inserted, so if they share any plugins (like renderJs), they
// will be re-requested and end up as additional instances
// in the same scope, so renderJs.addGadget() will trigger x-times
if (!content[i].getAttribute("src")) {
newHTML.push(content[i]);
}
break;
default:
// create a collection to append
newHTML.push(content[i]);
break;
}
}
}
// append or replace (as below, remove duplicate code later)
if (options.wrapper) {
newParentElement = options.parent[0] || options.parent;
$(options.wrapper).replaceWith(newHTML);
} else if (options.replaceParent) {
newParentElement = options.parent.parent()[0];
options.parent.replaceWith(newHTML);
} else {
newParentElement = options.parent;
$(newHTML).prependTo(options.parent);
}
if (callback) {
callback();
}
// find recursive gadgets
$(newParentElement).findGadget();
// find recursive services
$(newParentElement).findService();
} else {
// IFRAME handler
newHTML = document.createElement("iframe");
newHTML.setAttribute(
"src",
options.src + "?base=" + priv.encodeURI(options.directory.root)
);
newHTML.setAttribute("frameborder", 0);
newHTML.setAttribute("seamless", "seamless");
newHTML.setAttribute("id", options.id);
// append or replace
if (options.wrapper) {
newParentElement = options.parent[0] || options.parent;
$(options.wrapper).replaceWith(newHTML);
} else if (options.replaceParent) {
newParentElement = options.parent.parent()[0];
options.parent.replaceWith(newHTML);
} else {
newParentElement = options.parent;
$(newHTML).prependTo(options.parent);
}
// select iframe
newRootElement = newParentElement.querySelectorAll(
'[id="' + options.id + '"]'
);
// add configuration and find recursive gadgets
$(newRootElement[0]).load(function () {
var newElement = $(this);
// pass parameters to nested iFrame by setting on <iframe> body
// if (options.param) {
// newElement.contents().find("body")[0].config = options.param;
// }
// find recursive gadgets
newElement.findGadget();
// find services to publish
newElement.findService();
});
}
};
// => initialize
priv.initialize = function () {
// both root and iFrame try to map location.search, either for initial
// configuration or to retrieve the root when inside an iFrame
var spec = priv.mapUrlString(window.location.search);
// all instances of renderJs should have an serviceMap
priv.createServiceMap(spec);
// trigger => find HTML gadgets in root document
priv.findGadgetinHTML(spec);
// trigger => find HTML coded interactions in root document
priv.findServiceInHTML(spec);
// expose API
window.renderJs = that;
};
// ================ public API (call on renderJs and $(elem) ===========
// => publish a service to this instance (and root instance)
that.addService = $.fn.addService = function (options) {
var adressArray = window.location.href.split("?"), targetUrl;
options.src = options.src || adressArray[0];
// posts to URL passed (need for CORS?)
// otherwise window.top.location.href) would also work
if (adressArray.length === 1) {
targetUrl = priv.decodeURI(adressArray[0]);
} else {
targetUrl = priv.decodeURI(adressArray[1].split("=")[1]);
}
window.top.postMessage(options, targetUrl);
};
// => request a service to be run
that.requestService = $.fn.requestService = function (options, callbackFunction) {
var deferred = new $.StatelessDeferred(),
callbackId = priv.generateUuid(),
callback = deferred;
// store callback to be retrieved by response handler
priv.trackCallback(callbackId, callback, callbackFunction);
// set type
if (options.type === undefined) {
options.type = "request/any";
}
deferred.done(function(result, callbackFunction) {
if (callbackFunction) {
callbackFunction(result);
}
});
</script>
</body>
</html>
\ No newline at end of file
options.callbackId = callbackId;
window.top.postMessage(options, window.location.href);
};
// => load gadget
that.addGadget = $.fn.addGadget = function (options) {
var adressArray = window.location.href.split("?");
// set parent
if (this[0] === document || this[0] === window) {
options.parent = document.body;
options.replaceParent = false;
} else {
options.parent = this;
options.replaceParent = true;
}
// set uuid
if (options.id === undefined) {
options.id = priv.generateUuid();
}
// set directory (root)
// if no ?-param is available, we can only set to href
if (options.directory === undefined) {
if (adressArray.length > 1) {
options.directory = {
"root": priv.decodeURI(adressArray[1].split("=")[1])
};
} else {
options.directory = {
"root": that.gadgetService ?
that.gadgetService.root :
window.location.href
};
}
}
// set offline
// set cors
// LOADING
// module
if (options.module && require !== undefined) {
require([priv.extractModuleName(options.src)], function (response) {
priv.appendGadget(response, options);
});
// iFrame
} else if (options.iframe) {
priv.appendGadget(undefined, options);
// via Ajax (default)
} else {
$.ajax({
url: options.src,
// not sure this is helpful or not
cache: true,
method: options.method || "GET",
success: function (data) {
priv.appendGadget(data, options);
},
error: function (error) {
console.log(error);
}
});
}
};
// => find gadgets inside a newly added gadget
that.findGadget = $.fn.findGadget = function (sentRoot) {
var root = sentRoot || this,
spec = {};
if (root[0].tagName === "IFRAME") {
// will not be possible in external iframe, because of cors!
root = root[0].contentDocument || root[0].contentWindow.document;
} else {
root = root[0];
}
priv.findGadgetinHTML(spec, root);
};
// => recursive call - find services inside newly added gadget
that.findService = $.fn.findService = function (sentRoot) {
var root = sentRoot || this,
spec = {};
if (root[0].tagName === "IFRAME") {
// will not be possible in external iframe, because of cors!
root = root[0].contentDocument || root[0].contentWindow.document;
} else {
root = root[0];
}
priv.findServiceInHTML(spec, root);
};
// ================== ENTRY =============
// => start here
// don't use doc.ready, but otherwise cannot load references to elements in
// body from <SCRIPT> in <HEAD>
$(document).ready(function() {
// prevent renderJs reloads from different URLs!
// this does not solve the problem of re-requesting dependencies
// with ?timestamp=_123241231231 when injecting elements into a page
// without iFrame
if (window.renderJs === undefined) {
priv.initialize();
}
});
}(jQuery, window));
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