commit a71026991db0cf6520b030fb7d98e28b130de632
parent ed0255d51c675c8c1ee669acee69914d1109930b
Author: tongong <tongong@gmx.net>
Date: Thu, 26 Nov 2020 21:22:04 +0100
added actual implementation
Diffstat:
| M | README.md | | | 15 | ++++++++------- |
| A | rama.js | | | 67 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 75 insertions(+), 7 deletions(-)
diff --git a/README.md b/README.md
@@ -99,6 +99,13 @@ await client.waitForSelector("#some-div-somewhere");
// do something on the new page
```
+#### rama.clearpage()
+Clears the current window by setting the `<body>` to `display: none`. Changes the standard parent for new iframes to the `<html>`-tag to keep them visible.
+
+```javascript
+rama.clearpage();
+```
+
#### custom styling
All frames can be accessed with the css selector/class `rama-frame`. Additionally every single frame has its id/name also as id on the iframe tag.
@@ -114,7 +121,7 @@ All frames can be accessed with the css selector/class `rama-frame`. Additionall
Creates a new script tag with the specified url. Useful for loading external libraries.
```javascript
-rama.loadjs("https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js");
+await rama.loadjs("https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js");
```
#### rama.loadcss(csstext)
@@ -133,12 +140,6 @@ NOTICE: inline styles given to specific elements stay!
rama.clearcss();
```
-#### rama.clearScreen()
-Sets all currently existing elements to `display: none`.
-
-```javascript
-rama.clearScreen();
-```
diff --git a/rama.js b/rama.js
@@ -0,0 +1,67 @@
+// no "let" or "var" here so that pasting updated versions of the code
+// to the developer console does not fire redeclaration-errors
+rama = {
+ // #################### iframe functions ####################
+ number: 0, // for ids -> no id gets used twice
+ stdparent: document.querySelector("body"), // to globally change this setting
+
+ new: function (config) {
+ // parse the settings object
+ const defaultConfig = {
+ url: window.location.href,
+ parent: this.stdparent,
+ name: "rama-" + this.number
+ };
+ this.number++;
+ if (typeof config !== "object") config = {};
+ if (!config.hasOwnProperty("url")) config.url = defaultConfig.url;
+ if (!config.hasOwnProperty("parent"))
+ config.parent = defaultConfig.parent;
+ if (!config.hasOwnProperty("name")) config.name = defaultConfig.name;
+ if (config.hasOwnProperty("id")) config.name = config.id;
+ console.log(config);
+
+ // create the iframe
+ let iframeTag = document.createElement("iframe");
+ iframeTag.name = config.name;
+ iframeTag.src = config.url;
+ iframeTag.id = config.name;
+ iframeTag.classList.add("rama-frame");
+ config.parent.appendChild(iframeTag);
+ },
+
+ clearpage: function () {
+ // Not the best practice to put content outside the <body> tag
+ // but it enables us in this case to completely switch to the iframe window
+ this.stdparent = document.querySelector("html");
+ this.loadcss(
+ ".rama-frame { width: 100vw; height: 100vh; postion: fixed; top: 0; left: 0; } " +
+ "body { display: none; } " +
+ "html { overflow: hidden; } "
+ );
+ },
+
+ // #################### non-iframe functions ####################
+ loadjs: function (url) {
+ // modified version of script by Frank Gambino on https://stackoverflow.com/a/39008859
+ return new Promise((resolve, reject) => {
+ let scriptTag = document.createElement("script");
+ scriptTag.src = url;
+ scriptTag.addEventListener("load", resolve);
+ scriptTag.addEventListener("error", (e) => reject(e.error));
+ document.head.appendChild(scriptTag);
+ });
+ },
+
+ loadcss: function (csstext) {
+ let styleTag = document.createElement("style");
+ styleTag.innerHTML = csstext;
+ document.head.appendChild(styleTag);
+ },
+
+ clearcss: function () {
+ Array.from(
+ document.querySelectorAll("style, link[rel='stylesheet']")
+ ).forEach((e) => e.parentElement.removeChild(e));
+ }
+};