mirror of
https://github.com/scratchfoundation/scratchjr.git
synced 2024-11-28 18:15:37 -05:00
Switching lib to use function exports
This commit is contained in:
Tim Mickel
parent
f324617672
commit
f16a22c346
1 changed files with 600 additions and 601 deletions
133
src/utils/lib.js
133
src/utils/lib.js
|
|
@ -10,14 +10,13 @@ export const scaleMultiplier = WINDOW_INNER_HEIGHT / 768.0;
|
|||
export const isiOS = (typeof AndroidInterface == 'undefined');
|
||||
export const isAndroid = (typeof AndroidInterface != 'undefined');
|
||||
|
||||
export default class Lib {
|
||||
static libInit () {
|
||||
export function libInit () {
|
||||
frame = document.getElementById('frame');
|
||||
}
|
||||
/**
|
||||
* Takes a string and evaluates all ${} as JavaScript and returns the resulting string.
|
||||
*/
|
||||
static preprocess (s) {
|
||||
export function preprocess (s) {
|
||||
var result = '';
|
||||
var len = s.length;
|
||||
var i = 0;
|
||||
|
|
@ -48,32 +47,32 @@ export default class Lib {
|
|||
/**
|
||||
* Load the URL synchronously (fine because it's file://), preprocess the result and return the string.
|
||||
*/
|
||||
static preprocessAndLoad (url) {
|
||||
export function preprocessAndLoad (url) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', url, false);
|
||||
xmlhttp.send();
|
||||
return this.preprocess(xmlhttp.responseText);
|
||||
return preprocess(xmlhttp.responseText);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load a CSS file, preprocess it using preprocessAndLoad() and then returns it as a style tag.
|
||||
* Also rewrites all instances of url() with a different base
|
||||
*/
|
||||
static preprocessAndLoadCss (baseUrl, url) {
|
||||
export function preprocessAndLoadCss (baseUrl, url) {
|
||||
document.write('<!-- ' + url + '-->\n');
|
||||
document.write('<style type=\'text/css\'>\n');
|
||||
var cssData = this.preprocessAndLoad(url);
|
||||
var cssData = preprocessAndLoad(url);
|
||||
cssData = cssData.replace(/url\('/g, 'url(\'' + baseUrl + '/');
|
||||
cssData = cssData.replace(/url\(([^'])/g, 'url(' + baseUrl + '/$1');
|
||||
document.write(cssData);
|
||||
document.write('\n</style>\n');
|
||||
}
|
||||
|
||||
static rl () {
|
||||
export function rl () {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
static newDiv (parent, x, y, w, h, styles) {
|
||||
export function newDiv (parent, x, y, w, h, styles) {
|
||||
var el = document.createElement('div');
|
||||
el.style.position = 'absolute';
|
||||
el.style.top = y + 'px';
|
||||
|
|
@ -84,33 +83,33 @@ export default class Lib {
|
|||
if (h) {
|
||||
el.style.height = h + 'px';
|
||||
}
|
||||
this.setProps(el.style, styles);
|
||||
setProps(el.style, styles);
|
||||
parent.appendChild(el);
|
||||
return el;
|
||||
}
|
||||
|
||||
static newImage (parent, src, styles) {
|
||||
export function newImage (parent, src, styles) {
|
||||
var img = document.createElement('img');
|
||||
img.src = src;
|
||||
this.setProps(img.style, styles);
|
||||
setProps(img.style, styles);
|
||||
if (parent) {
|
||||
parent.appendChild(img);
|
||||
}
|
||||
return img;
|
||||
}
|
||||
|
||||
static newCanvas (parent, x, y, w, h, styles) {
|
||||
export function newCanvas (parent, x, y, w, h, styles) {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = y + 'px';
|
||||
canvas.style.left = x + 'px';
|
||||
this.setCanvasSize(canvas, w, h);
|
||||
this.setProps(canvas.style, styles);
|
||||
setCanvasSize(canvas, w, h);
|
||||
setProps(canvas.style, styles);
|
||||
parent.appendChild(canvas);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
static newHTML (type, c, p) {
|
||||
export function newHTML (type, c, p) {
|
||||
var e = document.createElement(type);
|
||||
if (c) {
|
||||
e.setAttribute('class', c);
|
||||
|
|
@ -121,15 +120,15 @@ export default class Lib {
|
|||
return e;
|
||||
}
|
||||
|
||||
static newP (parent, text, styles) {
|
||||
export function newP (parent, text, styles) {
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(document.createTextNode(text));
|
||||
this.setProps(p.style, styles);
|
||||
setProps(p.style, styles);
|
||||
parent.appendChild(p);
|
||||
return p;
|
||||
}
|
||||
|
||||
static hitRect (c, pt) {
|
||||
export function hitRect (c, pt) {
|
||||
if (!pt) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -159,7 +158,7 @@ export default class Lib {
|
|||
return true;
|
||||
}
|
||||
|
||||
static hit3DRect (c, pt) {
|
||||
export function hit3DRect (c, pt) {
|
||||
if (!pt) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -187,7 +186,7 @@ export default class Lib {
|
|||
return true;
|
||||
}
|
||||
|
||||
static hitTest (c, pt) {
|
||||
export function hitTest (c, pt) {
|
||||
if (!pt) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -215,14 +214,14 @@ export default class Lib {
|
|||
return true;
|
||||
}
|
||||
|
||||
static setCanvasSize (c, w, h) {
|
||||
export function setCanvasSize (c, w, h) {
|
||||
c.width = w;
|
||||
c.height = h;
|
||||
c.style.width = w + 'px';
|
||||
c.style.height = h + 'px';
|
||||
}
|
||||
|
||||
static setCanvasSizeScaledToWindowDocumentHeight (c, w, h) {
|
||||
export function setCanvasSizeScaledToWindowDocumentHeight (c, w, h) {
|
||||
var multiplier = window.devicePixelRatio * scaleMultiplier;
|
||||
var scaledWidth = Math.floor(w * multiplier);
|
||||
var scaledHeight = Math.floor(h * multiplier);
|
||||
|
|
@ -233,7 +232,7 @@ export default class Lib {
|
|||
c.style.zoom = scaleMultiplier / multiplier;
|
||||
}
|
||||
|
||||
static localx (el, gx) {
|
||||
export function localx (el, gx) {
|
||||
var lx = gx;
|
||||
while (el && el.offsetTop != undefined) {
|
||||
lx -= el.offsetLeft + el.clientLeft +
|
||||
|
|
@ -243,7 +242,7 @@ export default class Lib {
|
|||
return lx;
|
||||
}
|
||||
|
||||
static globalx (el) {
|
||||
export function globalx (el) {
|
||||
var lx = 0;
|
||||
while (el && el.offsetLeft != undefined) {
|
||||
var webkitTransform = new WebKitCSSMatrix(window.getComputedStyle(el).webkitTransform);
|
||||
|
|
@ -257,7 +256,7 @@ export default class Lib {
|
|||
return lx;
|
||||
}
|
||||
|
||||
static localy (el, gy) {
|
||||
export function localy (el, gy) {
|
||||
var ly = gy;
|
||||
while (el && el.offsetTop != undefined) {
|
||||
ly -= el.offsetTop + el.clientTop + (new WebKitCSSMatrix(window.getComputedStyle(el).webkitTransform)).m42;
|
||||
|
|
@ -266,7 +265,7 @@ export default class Lib {
|
|||
return ly;
|
||||
}
|
||||
|
||||
static globaly (el) {
|
||||
export function globaly (el) {
|
||||
var ly = 0;
|
||||
while (el && el.offsetTop != undefined) {
|
||||
var webkitTransform = new WebKitCSSMatrix(window.getComputedStyle(el).webkitTransform);
|
||||
|
|
@ -280,14 +279,14 @@ export default class Lib {
|
|||
return ly;
|
||||
}
|
||||
|
||||
static setProps (object, props) {
|
||||
export function setProps (object, props) {
|
||||
for (var i in props) {
|
||||
object[i] = props[i];
|
||||
}
|
||||
}
|
||||
|
||||
// ["ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
|
||||
static CSSTransition (el, obj) {
|
||||
export function CSSTransition (el, obj) {
|
||||
// default
|
||||
var duration = 1;
|
||||
var transition = 'ease';
|
||||
|
|
@ -311,7 +310,7 @@ export default class Lib {
|
|||
items = items.substring(0, items.length - 2);
|
||||
el.style.webkitTransition = items;
|
||||
el.addEventListener('webkitTransitionEnd', transitionDene, true);
|
||||
this.setProps(el.style, style);
|
||||
setProps(el.style, style);
|
||||
function transitionDene () {
|
||||
el.style.webkitTransition = '';
|
||||
if (obj.onComplete) {
|
||||
|
|
@ -320,7 +319,7 @@ export default class Lib {
|
|||
}
|
||||
}
|
||||
|
||||
static CSSTransition3D (el, obj) {
|
||||
export function CSSTransition3D (el, obj) {
|
||||
// default
|
||||
var duration = 1;
|
||||
var transition = 'ease';
|
||||
|
|
@ -355,7 +354,7 @@ export default class Lib {
|
|||
}
|
||||
}
|
||||
|
||||
static drawThumbnail (img, c) {
|
||||
export function drawThumbnail (img, c) {
|
||||
// naturalWidth Height it gets the zoom scaling properly
|
||||
var w = img.naturalWidth ? img.naturalWidth : img.width;
|
||||
var h = img.naturalHeight ? img.naturalHeight : img.height;
|
||||
|
|
@ -365,7 +364,7 @@ export default class Lib {
|
|||
var dh = c.height / h;
|
||||
var wi = w;
|
||||
var he = h;
|
||||
switch (this.getFit(dw, dh)) {
|
||||
switch (getFit(dw, dh)) {
|
||||
case 'noscale':
|
||||
break;
|
||||
case 'scaleh':
|
||||
|
|
@ -386,7 +385,7 @@ export default class Lib {
|
|||
}
|
||||
|
||||
// Like drawThumbnail, but scales up if needed
|
||||
static drawScaled (img, c) {
|
||||
export function drawScaled (img, c) {
|
||||
var imgWidth = img.naturalWidth ? img.naturalWidth : img.width;
|
||||
var imgHeight = img.naturalHeight ? img.naturalHeight : img.height;
|
||||
var boxWidth = c.width;
|
||||
|
|
@ -405,14 +404,14 @@ export default class Lib {
|
|||
ctx.drawImage(img, x0, y0, w, h);
|
||||
}
|
||||
|
||||
static fitInRect (srcw, srch, destw, desth) {
|
||||
export function fitInRect (srcw, srch, destw, desth) {
|
||||
var dx = (destw - srcw) / 2;
|
||||
var dy = (desth - srch) / 2;
|
||||
var dw = destw / srcw;
|
||||
var dh = desth / srch;
|
||||
var wi = srcw;
|
||||
var he = srch;
|
||||
switch (this.getFit(dw, dh)) {
|
||||
switch (getFit(dw, dh)) {
|
||||
case 'noscale':
|
||||
break;
|
||||
case 'scaleh':
|
||||
|
|
@ -431,7 +430,7 @@ export default class Lib {
|
|||
return [dx, dy, wi, he];
|
||||
}
|
||||
|
||||
static getFit (dw, dh) {
|
||||
export function getFit (dw, dh) {
|
||||
if ((dw >= 1) && (dh >= 1)) {
|
||||
return 'noscale';
|
||||
}
|
||||
|
|
@ -447,20 +446,20 @@ export default class Lib {
|
|||
return 'scaleh';
|
||||
}
|
||||
|
||||
static getDocumentHeight () {
|
||||
export function getDocumentHeight () {
|
||||
return Math.max(document.body.clientHeight, document.documentElement.clientHeight);
|
||||
}
|
||||
|
||||
static getDocumentWidth () {
|
||||
export function getDocumentWidth () {
|
||||
return Math.max(document.body.clientWidth, document.documentElement.clientWidth);
|
||||
}
|
||||
|
||||
static getStringSize (ctx, f, label) {
|
||||
export function getStringSize (ctx, f, label) {
|
||||
ctx.font = f;
|
||||
return ctx.measureText(label);
|
||||
}
|
||||
|
||||
static writeText (ctx, f, c, label, dy, dx) {
|
||||
export function writeText (ctx, f, c, label, dy, dx) {
|
||||
dx = (dx == undefined) ? 0 : dx;
|
||||
ctx.font = f;
|
||||
ctx.fillStyle = c;
|
||||
|
|
@ -469,11 +468,11 @@ export default class Lib {
|
|||
ctx.fillText(label, dx, dy);
|
||||
}
|
||||
|
||||
static gn (str) {
|
||||
export function gn (str) {
|
||||
return document.getElementById(str);
|
||||
}
|
||||
|
||||
static newForm (parent, str, x, y, w, h, styles) {
|
||||
export function newForm (parent, str, x, y, w, h, styles) {
|
||||
var el = document.createElement('form');
|
||||
el.style.position = 'absolute';
|
||||
el.style.top = y + 'px';
|
||||
|
|
@ -484,22 +483,22 @@ export default class Lib {
|
|||
if (h) {
|
||||
el.style.height = h + 'px';
|
||||
}
|
||||
this.setProps(el.style, styles);
|
||||
setProps(el.style, styles);
|
||||
parent.appendChild(el);
|
||||
el.name = str;
|
||||
return el;
|
||||
}
|
||||
|
||||
static newTextInput (p, type, str, mstyle) {
|
||||
export function newTextInput (p, type, str, mstyle) {
|
||||
var input = document.createElement('input');
|
||||
input.value = str;
|
||||
this.setProps(input.style, mstyle);
|
||||
setProps(input.style, mstyle);
|
||||
input.type = type;
|
||||
p.appendChild(input);
|
||||
return input;
|
||||
}
|
||||
|
||||
static getUrlVars () {
|
||||
export function getUrlVars () {
|
||||
if (window.location.href.indexOf('?') < 0) {
|
||||
return [];
|
||||
}
|
||||
|
|
@ -514,18 +513,18 @@ export default class Lib {
|
|||
return vars;
|
||||
}
|
||||
|
||||
static getIdFor (name) {
|
||||
export function getIdFor (name) {
|
||||
var n = 1;
|
||||
while (this.gn(name + ' ' + n) != undefined) {
|
||||
while (gn(name + ' ' + n) != undefined) {
|
||||
n++;
|
||||
}
|
||||
return name + ' ' + n;
|
||||
}
|
||||
|
||||
|
||||
static getIdForCamera (name) {
|
||||
export function getIdForCamera (name) {
|
||||
var n = 1;
|
||||
while (this.gn(name + '_' + n) != undefined) {
|
||||
while (gn(name + '_' + n) != undefined) {
|
||||
n++;
|
||||
}
|
||||
return name + '_' + n;
|
||||
|
|
@ -535,14 +534,14 @@ export default class Lib {
|
|||
// Color
|
||||
/////////////////////
|
||||
|
||||
static rgb2hsb (str) {
|
||||
export function rgb2hsb (str) {
|
||||
if (str == null) {
|
||||
return [24, 1, 1];
|
||||
}
|
||||
var min, val, f, i, hue, sat;
|
||||
str = (str.indexOf('rgb') > -1) ? this.rgbToHex(str) : this.rgbaToHex(str);
|
||||
str = (str.indexOf('rgb') > -1) ? rgbToHex(str) : rgbaToHex(str);
|
||||
var num = parseInt(str.substring(1, str.length), 16);
|
||||
var rgb = this.getRGB(num);
|
||||
var rgb = getRGB(num);
|
||||
var red = rgb[0];
|
||||
red /= 255;
|
||||
var grn = rgb[1];
|
||||
|
|
@ -562,7 +561,7 @@ export default class Lib {
|
|||
return new Array(hue, sat / 100, val / 100);
|
||||
}
|
||||
|
||||
static rgbToHex (str) {
|
||||
export function rgbToHex (str) {
|
||||
if (str.indexOf('rgb') < 0) {
|
||||
return str;
|
||||
}
|
||||
|
|
@ -571,14 +570,14 @@ export default class Lib {
|
|||
var red = Number(a[0]);
|
||||
var grn = Number(a[1]);
|
||||
var blu = Number(a[2]);
|
||||
return this.rgbToString({
|
||||
return rgbToString({
|
||||
r: red,
|
||||
g: grn,
|
||||
b: blu
|
||||
});
|
||||
}
|
||||
|
||||
static rgbaToHex (str) {
|
||||
export function rgbaToHex (str) {
|
||||
if (str.indexOf('rgba') < 0) {
|
||||
return str;
|
||||
}
|
||||
|
|
@ -587,7 +586,7 @@ export default class Lib {
|
|||
var red = Number(a[0]);
|
||||
var grn = Number(a[1]);
|
||||
var blu = Number(a[2]);
|
||||
return this.rgbToString({
|
||||
return rgbToString({
|
||||
r: red,
|
||||
g: grn,
|
||||
b: blu
|
||||
|
|
@ -595,11 +594,11 @@ export default class Lib {
|
|||
}
|
||||
|
||||
|
||||
static rgbToString (obj) {
|
||||
return '#' + this.getHex(obj.r) + this.getHex(obj.g) + this.getHex(obj.b);
|
||||
export function rgbToString (obj) {
|
||||
return '#' + getHex(obj.r) + getHex(obj.g) + getHex(obj.b);
|
||||
}
|
||||
|
||||
static getRGB (color) {
|
||||
export function getRGB (color) {
|
||||
return [
|
||||
(Number((color >> 16) & 255)),
|
||||
(Number((color >> 8) & 255)),
|
||||
|
|
@ -607,7 +606,7 @@ export default class Lib {
|
|||
];
|
||||
}
|
||||
|
||||
static getHex (num) {
|
||||
export function getHex (num) {
|
||||
var hex = num.toString(16);
|
||||
if (hex.length == 1) {
|
||||
return '0' + hex;
|
||||
|
|
@ -617,7 +616,7 @@ export default class Lib {
|
|||
|
||||
// findKeyframesRule ("swing");
|
||||
|
||||
static findKeyframesRule (rule) {
|
||||
export function findKeyframesRule (rule) {
|
||||
var ss = document.styleSheets;
|
||||
for (var i = 0; i < ss.length; ++i) {
|
||||
for (var j = 0; j < ss[i].cssRules.length; ++j) {
|
||||
|
|
@ -632,7 +631,7 @@ export default class Lib {
|
|||
return null;
|
||||
}
|
||||
|
||||
static colorToRGBA (color, opacity) {
|
||||
export function colorToRGBA (color, opacity) {
|
||||
var val = parseInt('0x' + color.substr(1, color.length));
|
||||
return 'rgba(' + (val >> 16) % 256 + ',' + (val >> 8) % 256 + ',' + (val % 256) + ',' + opacity + ')';
|
||||
}
|
||||
|
|
@ -642,14 +641,14 @@ export default class Lib {
|
|||
* here we introduce functioncs (called from the preprocessed css) that emulate their behavior by
|
||||
* turning them into pixel values.
|
||||
*/
|
||||
static css_vh (y) {
|
||||
export function css_vh (y) {
|
||||
return (y * WINDOW_INNER_HEIGHT / 100.0) + 'px';
|
||||
}
|
||||
|
||||
static css_vw (x) {
|
||||
export function css_vw (x) {
|
||||
return (x * WINDOW_INNER_WIDTH / 100.0) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
Number.prototype.mod = function (n) {
|
||||
return ((this % n) + n) % n;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue