Skip to content

Commit 1e1a273

Browse files
committed
Implement IFrames.
1 parent 64564af commit 1e1a273

File tree

12 files changed

+592
-190
lines changed

12 files changed

+592
-190
lines changed

packages/webio/dist/blink.bundle.js

Lines changed: 223 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12554,25 +12554,165 @@ function (_WebIONode) {
1255412554

1255512555
/***/ }),
1255612556

12557-
/***/ "./Node.ts":
12558-
/*!*****************!*\
12559-
!*** ./Node.ts ***!
12560-
\*****************/
12557+
/***/ "./IFrame.ts":
12558+
/*!*******************!*\
12559+
!*** ./IFrame.ts ***!
12560+
\*******************/
1256112561
/*! exports provided: default */
1256212562
/***/ (function(module, __webpack_exports__, __webpack_require__) {
1256312563

1256412564
"use strict";
1256512565
__webpack_require__.r(__webpack_exports__);
1256612566
/* harmony import */ var debug__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! debug */ "../node_modules/debug/src/browser.js");
1256712567
/* harmony import */ var debug__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(debug__WEBPACK_IMPORTED_MODULE_0__);
12568-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
12568+
/* harmony import */ var _Node__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Node */ "./Node.ts");
12569+
/* harmony import */ var _setInnerHTML__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./setInnerHTML */ "./setInnerHTML.ts");
12570+
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
1256912571

12570-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
12572+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1257112573

12572-
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
12574+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
1257312575

12574-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
12576+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
12577+
12578+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
12579+
12580+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
12581+
12582+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
12583+
12584+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
12585+
12586+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
12587+
12588+
var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
12589+
return new (P || (P = Promise))(function (resolve, reject) {
12590+
function fulfilled(value) {
12591+
try {
12592+
step(generator.next(value));
12593+
} catch (e) {
12594+
reject(e);
12595+
}
12596+
}
12597+
12598+
function rejected(value) {
12599+
try {
12600+
step(generator["throw"](value));
12601+
} catch (e) {
12602+
reject(e);
12603+
}
12604+
}
12605+
12606+
function step(result) {
12607+
result.done ? resolve(result.value) : new P(function (resolve) {
12608+
resolve(result.value);
12609+
}).then(fulfilled, rejected);
12610+
}
12611+
12612+
step((generator = generator.apply(thisArg, _arguments || [])).next());
12613+
});
12614+
};
12615+
12616+
12617+
var debug = debug__WEBPACK_IMPORTED_MODULE_0___default()("WebIO:IFrame");
12618+
12619+
12620+
12621+
var WebIOIFrame =
12622+
/*#__PURE__*/
12623+
function (_WebIONode) {
12624+
_inherits(WebIOIFrame, _WebIONode);
12625+
12626+
function WebIOIFrame(iframeData, options) {
12627+
var _this;
12628+
12629+
_classCallCheck(this, WebIOIFrame);
12630+
12631+
_this = _possibleConstructorReturn(this, _getPrototypeOf(WebIOIFrame).call(this, iframeData, options));
12632+
_this.children = null;
12633+
debug("Creating new WebIOIFrame.", iframeData);
12634+
var iframe = _this.element = document.createElement("iframe");
12635+
iframe.className = "webio-iframe";
12636+
iframe.src = "about:blank";
12637+
iframe.frameBorder = "0";
12638+
iframe.scrolling = "no";
12639+
iframe.height = "100%";
12640+
iframe.width = "100%";
12641+
iframe.style.display = "block";
12642+
var innerHTML = iframeData.instanceArgs.innerHTML;
12643+
12644+
iframe.onload = function () {
12645+
return _this.initializeIFrame(innerHTML);
12646+
};
12647+
12648+
return _this;
12649+
}
12650+
/**
12651+
* Initialize the IFrame after the onload event has been fired.
12652+
* @param innerHTML
12653+
*/
12654+
12655+
12656+
_createClass(WebIOIFrame, [{
12657+
key: "initializeIFrame",
12658+
value: function initializeIFrame(innerHTML) {
12659+
return __awaiter(this, void 0, void 0,
12660+
/*#__PURE__*/
12661+
regeneratorRuntime.mark(function _callee() {
12662+
var iframe, iframeWindow, iframeDocument, baseTag;
12663+
return regeneratorRuntime.wrap(function _callee$(_context) {
12664+
while (1) {
12665+
switch (_context.prev = _context.next) {
12666+
case 0:
12667+
iframe = this.element; // This method requires that onload has been fired which means that window
12668+
// and document are defined (hence the `!` operator).
12669+
12670+
iframeWindow = iframe.contentWindow;
12671+
iframeDocument = iframe.contentDocument; // Set WebIO window global.
12672+
12673+
iframeWindow.WebIO = this.webIO; // Add <base> tag to tell IFrame to load relative resources from the same
12674+
// place that the current page is.
12675+
12676+
baseTag = document.createElement("base");
12677+
baseTag.href = document.baseURI;
12678+
iframeDocument.head.appendChild(baseTag); // Apply some styling.
12679+
// It seems that there's not an easy way to get the iframe to have the
12680+
// "correct" size (i.e. exactly the size of its contents, as if it were
12681+
// just a normal <div> element). This currently doesn't really work.
1257512682

12683+
iframeDocument.body.style.cssText = "\n margin: 0;\n padding: 0;\n height: 100%;\n "; // Set inner html of body.
12684+
12685+
Object(_setInnerHTML__WEBPACK_IMPORTED_MODULE_2__["default"])(iframeDocument.body, innerHTML);
12686+
12687+
case 9:
12688+
case "end":
12689+
return _context.stop();
12690+
}
12691+
}
12692+
}, _callee, this);
12693+
}));
12694+
}
12695+
}]);
12696+
12697+
return WebIOIFrame;
12698+
}(_Node__WEBPACK_IMPORTED_MODULE_1__["default"]);
12699+
12700+
/* harmony default export */ __webpack_exports__["default"] = (WebIOIFrame);
12701+
12702+
/***/ }),
12703+
12704+
/***/ "./Node.ts":
12705+
/*!*****************!*\
12706+
!*** ./Node.ts ***!
12707+
\*****************/
12708+
/*! exports provided: default */
12709+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
12710+
12711+
"use strict";
12712+
__webpack_require__.r(__webpack_exports__);
12713+
/* harmony import */ var debug__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! debug */ "../node_modules/debug/src/browser.js");
12714+
/* harmony import */ var debug__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(debug__WEBPACK_IMPORTED_MODULE_0__);
12715+
/* harmony import */ var _setInnerHTML__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./setInnerHTML */ "./setInnerHTML.ts");
1257612716
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1257712717

1257812718
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -12581,6 +12721,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
1258112721

1258212722

1258312723
var log = debug__WEBPACK_IMPORTED_MODULE_0___default()("WebIO:Node");
12724+
1258412725
/**
1258512726
* A high-level "point-of-entry" under which WebIO "things" are rendered.
1258612727
*
@@ -12602,49 +12743,14 @@ function () {
1260212743
this.webIO = webIO;
1260312744
}
1260412745
/**
12605-
* Set the `innerHTML` attribute of the node's element.
12606-
*
12607-
* This method will guarantee the execution of `<script />`s which is not done
12608-
* by simply setting `element.innerHTML = ...`.
12609-
*
12610-
* @param html - The HTML string to use; any special HTML characters (`<`, `>`, `&`, etc.)
12611-
* should be &-escaped as appropriate (e.g. to set the displayed text to "foo&bar",
12612-
* `html` should be `foo&amp;bar`).
12746+
* Set the innerHTML of the node's DOM element.
1261312747
*/
1261412748

1261512749

1261612750
_createClass(WebIONode, [{
1261712751
key: "setInnerHTML",
1261812752
value: function setInnerHTML(html) {
12619-
// In the original WebIO, we like to replace </script> with </_script> because the whole shebang
12620-
// is executed inside a <script></script> block (and we don't want to close it too early).
12621-
html = html.replace(/<\/_script>/g, "</script>");
12622-
log("setInnerHTML", html);
12623-
this.element.innerHTML = html; // If the HTML contained any <script> tags, these are NOT executed when we assign the DOM
12624-
// innerHTML attribute, so we have to find-and-replace them to force them to execute.
12625-
// We do this weird array coercion because getElementsByTagName returns a
12626-
// HTMLCollection object, which updates as the contents of element update
12627-
// (creating an infinite loop).
12628-
12629-
var scripts = _toConsumableArray(this.element.getElementsByTagName("script"));
12630-
12631-
scripts.forEach(function (oldScript) {
12632-
var newScript = document.createElement("script"); // Copy all attributes.
12633-
// Unfortunately, attributes is a NamedNodeMap which doesn't have very
12634-
// ES6-like methods of manipulation
12635-
12636-
for (var i = 0; i < oldScript.attributes.length; ++i) {
12637-
var _oldScript$attributes = oldScript.attributes[i],
12638-
name = _oldScript$attributes.name,
12639-
value = _oldScript$attributes.value;
12640-
newScript.setAttribute(name, value);
12641-
} // Copy script content
12642-
12643-
12644-
newScript.appendChild(document.createTextNode(oldScript.innerHTML)); // Replace inside DOM
12645-
12646-
oldScript.parentNode.replaceChild(oldScript, newScript);
12647-
});
12753+
Object(_setInnerHTML__WEBPACK_IMPORTED_MODULE_1__["default"])(this.element, html);
1264812754
}
1264912755
}]);
1265012756

@@ -13316,14 +13422,13 @@ function () {
1331613422
throw new Error("WebIO cannot mount node into element.");
1331713423
}
1331813424

13319-
var node = Object(_createNode__WEBPACK_IMPORTED_MODULE_1__["default"])(nodeData, {
13320-
webIO: this
13321-
});
13322-
1332313425
if (!element.parentElement) {
1332413426
throw new Error("Cannot mount WebIO node into HTMLElement that isn't mounted in DOM.");
1332513427
}
1332613428

13429+
var node = Object(_createNode__WEBPACK_IMPORTED_MODULE_1__["default"])(nodeData, {
13430+
webIO: this
13431+
});
1332713432
element.parentElement.replaceChild(node.element, element);
1332813433
}
1332913434
}]);
@@ -13346,6 +13451,8 @@ function () {
1334613451
__webpack_require__.r(__webpack_exports__);
1334713452
/* harmony import */ var _DomNode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DomNode */ "./DomNode.ts");
1334813453
/* harmony import */ var _Scope__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Scope */ "./Scope.ts");
13454+
/* harmony import */ var _IFrame__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./IFrame */ "./IFrame.ts");
13455+
1334913456

1335013457

1335113458
/**
@@ -13368,6 +13475,10 @@ var createNode = function createNode(nodeData, options) {
1336813475
/* SCOPE */
1336913476
) {
1337013477
return new _Scope__WEBPACK_IMPORTED_MODULE_1__["default"](nodeData, options);
13478+
} else if (nodeData.nodeType === "IFrame"
13479+
/* IFRAME */
13480+
) {
13481+
return new _IFrame__WEBPACK_IMPORTED_MODULE_2__["default"](nodeData, options);
1337113482
} else {
1337213483
console.error("Unable to generate WebIONode from nodeData:", nodeData);
1337313484
throw new Error("Unknown WebIO nodeType: ".concat(nodeData.nodeType, "."));
@@ -13693,6 +13804,69 @@ if (Blink && Blink.sock) {
1369313804

1369413805
/***/ }),
1369513806

13807+
/***/ "./setInnerHTML.ts":
13808+
/*!*************************!*\
13809+
!*** ./setInnerHTML.ts ***!
13810+
\*************************/
13811+
/*! exports provided: default */
13812+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
13813+
13814+
"use strict";
13815+
__webpack_require__.r(__webpack_exports__);
13816+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
13817+
13818+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
13819+
13820+
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
13821+
13822+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
13823+
13824+
/**
13825+
* Set the `innerHTML` attribute of a DOM element.
13826+
*
13827+
* This method will guarantee the execution of `<script />`s which is not done
13828+
* by simply setting `element.innerHTML = ...`.
13829+
*
13830+
* @param element - The DOM element whose `innerHTML` will be set.
13831+
* @param html - The HTML string to use; any special HTML characters (`<`, `>`, `&`, etc.)
13832+
* should be &-escaped as appropriate (e.g. to set the displayed text to "foo&bar",
13833+
* `html` should be `foo&amp;bar`).
13834+
*/
13835+
var setInnerHTML = function setInnerHTML(element, html) {
13836+
// In the original WebIO, we like to replace </script> with </_script> because the whole shebang
13837+
// is executed inside a <script></script> block (and we don't want to close it too early).
13838+
html = html.replace(/<\/_script>/g, "</script>");
13839+
element.innerHTML = html; // If the HTML contained any <script> tags, these are NOT executed when we assign the DOM
13840+
// innerHTML attribute, so we have to find-and-replace them to force them to execute.
13841+
// We do this weird array coercion because getElementsByTagName returns a
13842+
// HTMLCollection object, which updates as the contents of element update
13843+
// (creating an infinite loop).
13844+
13845+
var scripts = _toConsumableArray(element.getElementsByTagName("script"));
13846+
13847+
scripts.forEach(function (oldScript) {
13848+
var newScript = document.createElement("script"); // Copy all attributes.
13849+
// Unfortunately, attributes is a NamedNodeMap which doesn't have very
13850+
// ES6-like methods of manipulation
13851+
13852+
for (var i = 0; i < oldScript.attributes.length; ++i) {
13853+
var _oldScript$attributes = oldScript.attributes[i],
13854+
name = _oldScript$attributes.name,
13855+
value = _oldScript$attributes.value;
13856+
newScript.setAttribute(name, value);
13857+
} // Copy script content
13858+
13859+
13860+
newScript.appendChild(document.createTextNode(oldScript.innerHTML)); // Replace inside DOM
13861+
13862+
oldScript.parentNode.replaceChild(newScript, oldScript);
13863+
});
13864+
};
13865+
13866+
/* harmony default export */ __webpack_exports__["default"] = (setInnerHTML);
13867+
13868+
/***/ }),
13869+
1369613870
/***/ "./utils.ts":
1369713871
/*!******************!*\
1369813872
!*** ./utils.ts ***!

packages/webio/dist/blink.bundle.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)