const html = " \
\
\
\
\
\
Widget construido con HTML y CSS, en iOS, si. En tu cara Jobs.
\
\
";
const js = `(function (global) {
"use strict";
var util = newUtil();
// Default impl options
var defaultOptions = {
// Default is to fail on error, no placeholder
imagePlaceholder: undefined,
// Default cache bust is false, it will use the cache
cacheBust: false,
};
var domtoimage = {
toSvg: toSvg,
toPng: toPng,
toJpeg: toJpeg,
toBlob: toBlob,
toPixelData: toPixelData,
impl: {
options: {},
util: util,
},
};
if (typeof module !== "undefined") module.exports = domtoimage;
else global.domtoimage = domtoimage;
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options
* @param {Function} options.filter - Should return true if passed node should be included in the output
* (excluding node means excluding it's children as well). Not called on the root node.
* @param {String} options.bgcolor - color for the background, any valid CSS color value.
* @param {Number} options.width - width to be applied to node before rendering.
* @param {Number} options.height - height to be applied to node before rendering.
* @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
* @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
defaults to 1.0.
* @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
* @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
* @return {Promise} - A promise that is fulfilled with a SVG image data URL
* */
function toSvg(node, options) {
options = options || {};
copyOptions(options);
return (
Promise.resolve(node)
.then(function (node) {
return cloneNode(node, options.filter, true);
})
//.then(embedFonts)
//.then(inlineImages)
.then(applyOptions)
.then(function (clone) {
return makeSvgDataUri(
clone,
options.width || util.width(node),
options.height || util.height(node)
);
})
);
function applyOptions(clone) {
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
if (options.width) clone.style.width = options.width + "px";
if (options.height) clone.style.height = options.height + "px";
if (options.style)
Object.keys(options.style).forEach(function (property) {
clone.style[property] = options.style[property];
});
return clone;
}
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
* */
function toPixelData(node, options) {
return draw(node, options || {}).then(function (canvas) {
return canvas
.getContext("2d")
.getImageData(0, 0, util.width(node), util.height(node)).data;
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a PNG image data URL
* */
function toPng(node, options) {
return draw(node, options || {}).then(function (canvas) {
return canvas.toDataURL();
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a JPEG image data URL
* */
function toJpeg(node, options) {
options = options || {};
return draw(node, options).then(function (canvas) {
return canvas.toDataURL("image/jpeg", options.quality || 1.0);
});
}
/**
* @param {Node} node - The DOM Node object to render
* @param {Object} options - Rendering options, @see {@link toSvg}
* @return {Promise} - A promise that is fulfilled with a PNG image blob
* */
function toBlob(node, options) {
return draw(node, options || {}).then(util.canvasToBlob);
}
function copyOptions(options) {
// Copy options to impl options for use in impl
if (typeof options.imagePlaceholder === "undefined") {
domtoimage.impl.options.imagePlaceholder =
defaultOptions.imagePlaceholder;
} else {
domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
}
if (typeof options.cacheBust === "undefined") {
domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
} else {
domtoimage.impl.options.cacheBust = options.cacheBust;
}
}
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement("canvas");
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
if (options.bgcolor) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
function cloneNode(node, filter, root) {
if (!root && filter && !filter(node)) return Promise.resolve();
return Promise.resolve(node)
.then(makeNodeCopy)
.then(function (clone) {
return cloneChildren(node, clone, filter);
})
.then(function (clone) {
return processClone(node, clone);
});
function makeNodeCopy(node) {
if (node instanceof HTMLCanvasElement)
return util.makeImage(node.toDataURL());
return node.cloneNode(false);
}
function cloneChildren(original, clone, filter) {
var children = original.childNodes;
if (children.length === 0) return Promise.resolve(clone);
return cloneChildrenInOrder(
clone,
util.asArray(children),
filter
).then(function () {
return clone;
});
function cloneChildrenInOrder(parent, children, filter) {
var done = Promise.resolve();
children.forEach(function (child) {
done = done
.then(function () {
return cloneNode(child, filter);
})
.then(function (childClone) {
if (childClone) parent.appendChild(childClone);
});
});
return done;
}
}
function processClone(original, clone) {
if (!(clone instanceof Element)) return clone;
return Promise.resolve()
.then(cloneStyle)
.then(clonePseudoElements)
.then(copyUserInput)
.then(fixSvg)
.then(function () {
return clone;
});
function cloneStyle() {
copyStyle(window.getComputedStyle(original), clone.style);
function copyStyle(source, target) {
if (source.cssText) target.cssText = source.cssText;
else copyProperties(source, target);
function copyProperties(source, target) {
util.asArray(source).forEach(function (name) {
target.setProperty(
name,
source.getPropertyValue(name),
source.getPropertyPriority(name)
);
});
}
}
}
function clonePseudoElements() {
[":before", ":after"].forEach(function (element) {
clonePseudoElement(element);
});
function clonePseudoElement(element) {
var style = window.getComputedStyle(original, element);
var content = style.getPropertyValue("content");
if (content === "" || content === "none") return;
var className = util.uid();
clone.className = clone.className + " " + className;
var styleElement = document.createElement("style");
styleElement.appendChild(
formatPseudoElementStyle(className, element, style)
);
clone.appendChild(styleElement);
function formatPseudoElementStyle(
className,
element,
style
) {
var selector = "." + className + ":" + element;
var cssText = style.cssText
? formatCssText(style)
: formatCssProperties(style);
return document.createTextNode(
selector + "{" + cssText + "}"
);
function formatCssText(style) {
var content = style.getPropertyValue("content");
return style.cssText + " content: " + content + ";";
}
function formatCssProperties(style) {
return (
util
.asArray(style)
.map(formatProperty)
.join("; ") + ";"
);
function formatProperty(name) {
return (
name +
": " +
style.getPropertyValue(name) +
(style.getPropertyPriority(name)
? " !important"
: "")
);
}
}
}
}
}
function copyUserInput() {
if (original instanceof HTMLTextAreaElement)
clone.innerHTML = original.value;
if (original instanceof HTMLInputElement)
clone.setAttribute("value", original.value);
}
function fixSvg() {
if (!(clone instanceof SVGElement)) return;
clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
if (!(clone instanceof SVGRectElement)) return;
["width", "height"].forEach(function (attribute) {
var value = clone.getAttribute(attribute);
if (!value) return;
clone.style.setProperty(attribute, value);
});
}
}
}
function embedFonts(node) {
return fontFaces.resolveAll().then(function (cssText) {
var styleNode = document.createElement("style");
node.appendChild(styleNode);
styleNode.appendChild(document.createTextNode(cssText));
return node;
});
}
function inlineImages(node) {
return images.inlineAll(node).then(function () {
return node;
});
}
function makeSvgDataUri(node, width, height) {
return Promise.resolve(node)
.then(function (node) {
node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
return new XMLSerializer().serializeToString(node);
})
.then(util.escapeXhtml)
.then(function (xhtml) {
return (
'' +
xhtml +
""
);
})
.then(function (foreignObject) {
return (
'"
);
})
.then(function (svg) {
return "data:image/svg+xml;charset=utf-8," + svg;
});
}
function newUtil() {
return {
escape: escape,
parseExtension: parseExtension,
mimeType: mimeType,
dataAsUrl: dataAsUrl,
isDataUrl: isDataUrl,
canvasToBlob: canvasToBlob,
resolveUrl: resolveUrl,
getAndEncode: getAndEncode,
uid: uid(),
delay: delay,
asArray: asArray,
escapeXhtml: escapeXhtml,
makeImage: makeImage,
width: width,
height: height,
};
function mimes() {
/*
* Only WOFF and EOT mime types for fonts are 'real'
* see http://www.iana.org/assignments/media-types/media-types.xhtml
*/
var WOFF = "application/font-woff";
var JPEG = "image/jpeg";
return {
woff: WOFF,
woff2: WOFF,
ttf: "application/font-truetype",
eot: "application/vnd.ms-fontobject",
png: "image/png",
jpg: JPEG,
jpeg: JPEG,
gif: "image/gif",
tiff: "image/tiff",
svg: "image/svg+xml",
};
}
function parseExtension(url) {
return "png";
}
function mimeType(url) {
var extension = parseExtension(url).toLowerCase();
return mimes()[extension] || "";
}
function isDataUrl(url) {
return url.search(/^(data:)/) !== -1;
}
function toBlob(canvas) {
return new Promise(function (resolve) {
var binaryString = window.atob(
canvas.toDataURL().split(",")[1]
);
var length = binaryString.length;
var binaryArray = new Uint8Array(length);
for (var i = 0; i < length; i++)
binaryArray[i] = binaryString.charCodeAt(i);
resolve(
new Blob([binaryArray], {
type: "image/png",
})
);
});
}
function canvasToBlob(canvas) {
if (canvas.toBlob)
return new Promise(function (resolve) {
canvas.toBlob(resolve);
});
return toBlob(canvas);
}
function resolveUrl(url, baseUrl) {
var doc = document.implementation.createHTMLDocument();
var base = doc.createElement("base");
doc.head.appendChild(base);
var a = doc.createElement("a");
doc.body.appendChild(a);
base.href = baseUrl;
a.href = url;
return a.href;
}
function uid() {
var index = 0;
return function () {
return "u" + fourRandomChars() + index++;
function fourRandomChars() {
/* see http://stackoverflow.com/a/6248722/2519373 */
return (
"0000" +
((Math.random() * Math.pow(36, 4)) << 0).toString(36)
).slice(-4);
}
};
}
function makeImage(uri) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.onload = function () {
resolve(image);
};
image.onerror = reject;
image.src = uri;
});
}
function getAndEncode(url) {
var TIMEOUT = 30000;
return new Promise(function (resolve) {
var request = new XMLHttpRequest();
request.onreadystatechange = done;
request.ontimeout = timeout;
request.responseType = "blob";
request.timeout = TIMEOUT;
request.open("GET", url, true);
request.send();
var placeholder;
if (domtoimage.impl.options.imagePlaceholder) {
var split = domtoimage.impl.options.imagePlaceholder.split(
/,/
);
if (split && split[1]) {
placeholder = split[1];
}
}
function done() {
if (request.readyState !== 4) return;
if (request.status !== 200) {
if (placeholder) {
resolve(placeholder);
} else {
fail(
"cannot fetch resource: " +
url +
", status: " +
request.status
);
}
return;
}
var encoder = new FileReader();
encoder.onloadend = function () {
var content = encoder.result.split(/,/)[1];
resolve(content);
};
encoder.readAsDataURL(request.response);
}
function timeout() {
if (placeholder) {
resolve(placeholder);
} else {
fail(
"timeout of " +
TIMEOUT +
"ms occured while fetching resource: " +
url
);
}
}
function fail(message) {
console.error(message);
resolve("");
}
});
}
function dataAsUrl(content, type) {
return "data:" + type + ";base64," + content;
}
function escape(string) {
return "";
}
function delay(ms) {
return function (arg) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(arg);
}, ms);
});
};
}
function asArray(arrayLike) {
var array = [];
var length = arrayLike.length;
for (var i = 0; i < length; i++) array.push(arrayLike[i]);
return array;
}
function escapeXhtml(string) {
return string;
}
function width(node) {
var leftBorder = px(node, "border-left-width");
var rightBorder = px(node, "border-right-width");
return node.scrollWidth + leftBorder + rightBorder;
}
function height(node) {
var topBorder = px(node, "border-top-width");
var bottomBorder = px(node, "border-bottom-width");
return node.scrollHeight + topBorder + bottomBorder;
}
function px(node, styleProperty) {
var value = window
.getComputedStyle(node)
.getPropertyValue(styleProperty);
return parseFloat(value.replace("px", ""));
}
}
})(this);
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
const iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = "${html}";
const blobToBase64 = (blob) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
return new Promise((resolve) => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
setTimeout(function() {
domtoimage.toBlob(iframedoc.body).then(async (blob) => {
completion(await blobToBase64(blob));
});
}, 1)`;
const wv = new WebView();
const test = await wv.evaluateJavaScript(js, true);
const widget = new ListWidget();
const imgReqBq = await new Request(test);
const imgBq = await imgReqBq.loadImage();
widget.backgroundImage = imgBq;
if (config.runsInWidget) {
Script.setWidget(widget);
Script.complete();
} else {
widget.presentLarge();
}