From 678a2921b81c4c1384f69e63d8d100e71be1faed Mon Sep 17 00:00:00 2001 From: 14ROVI <29734170+14ROVI@users.noreply.github.com> Date: Wed, 21 Dec 2022 03:38:28 +0000 Subject: [PATCH] tried to make the text colour changer working but it just wont. changed to having dark backgrop + white text for everything. --- background-check-new.js | 122 ++++++ background-check.js | 878 ++++++++++++++++++++++++++++++++++++++++ background-check.min.js | 5 - index.css | 10 +- index.html | 2 +- index.js | 25 +- 6 files changed, 1019 insertions(+), 23 deletions(-) create mode 100644 background-check-new.js create mode 100644 background-check.js delete mode 100644 background-check.min.js diff --git a/background-check-new.js b/background-check-new.js new file mode 100644 index 0000000..c12e859 --- /dev/null +++ b/background-check-new.js @@ -0,0 +1,122 @@ +class BackgroundCheck { + constructor(targetClass, backgroundClass) { + this.targetClass = targetClass; + this.backgroundClass = backgroundClass; + + window.addEventListener("resize", () => { + this.check(); + }); + + window.addEventListener("scroll", () => { + this.check(); + }); + + this.check(); + } + + check() { + // load target elements + bounding area + // load background elements + // load background images + bounding areas + // create canvas the size of html element and draw images onto them in their bounding areas + // on each target check average background lightness + // add class to target based on lightness + + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d", {willReadFrequently: true}); + const body = document.body; + context.canvas.width = body.clientWidth; + context.canvas.height = body.clientHeight; + + let backgroundEls = document.getElementsByClassName(this.backgroundClass); + let backgroundImages = []; // {url, x, y, z} + for (let bgEl of backgroundEls) { + let img = this.getImg(bgEl); + let cssImg = this.getCssImg(bgEl); + if (img) backgroundImages.push(img); + if (cssImg) backgroundImages.push(cssImg); + } + backgroundImages.sort((a, b) => (a.z || 0) - (b.z || 0)) + let promises = [] + for (let bgImg of backgroundImages) { + let promise = new Promise((resolve, reject) => { + let img = new Image(); + img.onload = () => { + context.drawImage(img, bgImg.x, bgImg.y); + resolve(); + } + img.crossOrigin = "Anonymous"; + img.src = bgImg.url; + }); + promises.push(promise); + } + + Promise.all(promises).then(() => { + console.log(canvas.toDataURL()); + let targetEls = document.getElementsByClassName(this.targetClass); + for (let targetEl of targetEls) { + let rect = targetEl.getBoundingClientRect(); + + if (rect.width === 0 || rect.height === 0) { + continue; + } + + let x = rect.x + window.scrollX; + let y = rect.y + window.scrollY; + let imgd = context.getImageData(x, y, rect.width, rect.height); + let pix = imgd.data; + let totalRed = 0; + let totalGreen = 0; + let totalBlue = 0; + for (let i = 0, n = pix.length; i < n; i += 4) { + totalRed += pix[i]; // red + totalBlue += pix[i + 1]; // green + totalGreen += pix[i + 2]; // blue + // i+3 is alpha (the fourth element) + } + let brightness = totalRed * 0.299 + totalGreen * 0.587 + totalBlue * 0.114; + brightness /= rect.width * rect.height; + console.log(brightness) + + if (brightness > 100) { + targetEl.classList.add("light-background"); + } else { + targetEl.classList.add("dark-background"); + } + } + + }); + } + + getImg(element) { + if (element.tagName === "img") { + let rect = element.getBoundingClientRect(); + let x = rect.x + window.scrollX; + let y = rect.y + window.scrollY; + return { + url: element.src, + x: x, + y: y, + z: element.style.zIndex || 0, + } + } + + return null; + } + + getCssImg(element) { + let style = element.currentStyle || window.getComputedStyle(element, false); + let imageUrl = style.backgroundImage.substring(4).replaceAll('"', '').split(")")[0]; + // let px, py = window.getComputedStyle(temp1).backgroundPosition.split(); + // toPx(element, ) + let rect = element.getBoundingClientRect(); + let x = rect.x + window.scrollX; + let y = rect.y + window.scrollY; + return { + url: imageUrl, + x: x, + y: y, + z: element.style.zIndex || 0, + } + } +} \ No newline at end of file diff --git a/background-check.js b/background-check.js new file mode 100644 index 0000000..b132a21 --- /dev/null +++ b/background-check.js @@ -0,0 +1,878 @@ + +/* + * BackgroundCheck + * http://kennethcachia.com/background-check + * + * v1.2.2 + */ + +(function (root, factory) { + + if (typeof define === 'function' && define.amd) { + define(factory); + } else { + root.BackgroundCheck = factory(root); + } + + }(this, function () { + + 'use strict'; + + var resizeEvent = window.orientation !== undefined ? 'orientationchange' : 'resize'; + var supported; + var canvas; + var context; + var throttleDelay; + var viewport; + var attrs = {}; + + + /* + * Initializer + */ + function init(a) { + + if (a === undefined || a.targets === undefined) { + throw 'Missing attributes'; + } + + // Default values + attrs.debug = checkAttr(a.debug, false); + attrs.debugOverlay = checkAttr(a.debugOverlay, false); + attrs.targets = getElements(a.targets); + attrs.images = getElements(a.images || 'img', true); + attrs.changeParent = checkAttr(a.changeParent, false); + attrs.threshold = checkAttr(a.threshold, 50); + attrs.minComplexity = checkAttr(a.minComplexity, 30); + attrs.minOverlap = checkAttr(a.minOverlap, 50); + attrs.windowEvents = checkAttr(a.windowEvents, true); + attrs.maxDuration = checkAttr(a.maxDuration, 500); + + attrs.mask = checkAttr(a.mask, { + r: 0, + g: 255, + b: 0 + }); + + attrs.classes = checkAttr(a.classes, { + dark: 'background--dark', + light: 'background--light', + complex: 'background--complex' + }); + + if (supported === undefined) { + checkSupport(); + + if (supported) { + canvas.style.position = 'fixed'; + canvas.style.top = '0px'; + canvas.style.left = '0px'; + canvas.style.width = '100%'; + canvas.style.height = '100%'; + + window.addEventListener(resizeEvent, throttle.bind(null, function () { + resizeCanvas(); + check(); + })); + + window.addEventListener('scroll', throttle.bind(null, check)); + + resizeCanvas(); + check(); + } + } + } + + + /* + * Destructor + */ + function destroy() { + supported = null; + canvas = null; + context = null; + attrs = {}; + + if (throttleDelay) { + clearTimeout(throttleDelay); + } + } + + + /* + * Output debug logs + */ + function log(msg) { + + if (get('debug')) { + console.log(msg); + } + } + + + /* + * Get attribute value, use a default + * when undefined + */ + function checkAttr(value, def) { + checkType(value, typeof def); + return (value === undefined) ? def : value; + } + + + /* + * Reject unwanted types + */ + function checkType(value, type) { + + if (value !== undefined && typeof value !== type) { + throw 'Incorrect attribute type'; + } + } + + + /* + * Convert elements with background-image + * to Images + */ + function checkForCSSImages(els) { + var el; + var url; + var list = []; + + for (var e = 0; e < els.length; e++) { + el = els[e]; + list.push(el); + + if (el.tagName !== 'IMG') { + url = window.getComputedStyle(el).backgroundImage; + + // Ignore multiple backgrounds + if (url.split(/,url|, url/).length > 1) { + throw 'Multiple backgrounds are not supported'; + } + + if (url && url !== 'none') { + list[e] = { + img: new Image(), + el: list[e] + }; + + url = url.slice(4, -1); + url = url.replace(/"/g, ''); + + list[e].img.src = url; + log('CSS Image - ' + url); + } else { + throw 'Element is not an but does not have a background-image'; + } + } + } + + return list; + } + + + /* + * Check for String, Element or NodeList + */ + function getElements(selector, convertToImages) { + var els = selector; + + if (typeof selector === 'string') { + els = document.querySelectorAll(selector); + } else if (selector && selector.nodeType === 1) { + els = [selector]; + } + + if (!els || els.length === 0 || els.length === undefined) { + throw 'Elements not found'; + } else { + + if (convertToImages) { + els = checkForCSSImages(els); + } + + els = Array.prototype.slice.call(els); + } + + return els; + } + + + /* + * Check if browser supports + */ + function checkSupport() { + canvas = document.createElement('canvas'); + + if (canvas && canvas.getContext) { + context = canvas.getContext('2d'); + supported = true; + } else { + supported = false; + } + + showDebugOverlay(); + } + + + /* + * Show on top of page + */ + function showDebugOverlay() { + + if (get('debugOverlay')) { + canvas.style.opacity = 0.5; + canvas.style.pointerEvents = 'none'; + document.body.appendChild(canvas); + } else { + + // Check if it was previously added + if (canvas.parentNode) { + canvas.parentNode.removeChild(canvas); + } + } + } + + + /* + * Stop if it's slow + */ + function kill(start) { + var duration = new Date().getTime() - start; + + log('Duration: ' + duration + 'ms'); + + if (duration > get('maxDuration')) { + // Log a message even when debug is false + console.log('BackgroundCheck - Killed'); + removeClasses(); + destroy(); + } + } + + + /* + * Set width and height of + */ + function resizeCanvas() { + viewport = { + left: 0, + top: 0, + right: document.body.clientWidth, + bottom: window.innerHeight + }; + + canvas.width = document.body.clientWidth; + canvas.height = window.innerHeight; + } + + + /* + * Process px and %, discard anything else + */ + function getValue(css, parent, delta) { + var value; + var percentage; + + if (css.indexOf('px') !== -1) { + value = parseFloat(css); + } else if (css.indexOf('%') !== -1) { + value = parseFloat(css); + percentage = value / 100; + value = percentage * parent; + + if (delta) { + value -= delta * percentage; + } + } else { + value = parent; + } + + return value; + } + + + /* + * Calculate top, left, width and height + * using the object's CSS + */ + function calculateAreaFromCSS(obj) { + var css = window.getComputedStyle(obj.el); + + // Force no-repeat and padding-box + obj.el.style.backgroundRepeat = 'no-repeat'; + obj.el.style.backgroundOrigin = 'padding-box'; + + // Background Size + var size = css.backgroundSize.split(' '); + var width = size[0]; + var height = size[1] === undefined ? 'auto' : size[1]; + + var parentRatio = obj.el.clientWidth / obj.el.clientHeight; + var imgRatio = obj.img.naturalWidth / obj.img.naturalHeight; + + if (width === 'cover') { + + if (parentRatio >= imgRatio) { + width = '100%'; + height = 'auto'; + } else { + width = 'auto'; + size[0] = 'auto'; + height = '100%'; + } + + } else if (width === 'contain') { + + if (1 / parentRatio < 1 / imgRatio) { + width = 'auto'; + size[0] = 'auto'; + height = '100%'; + } else { + width = '100%'; + height = 'auto'; + } + } + + if (width === 'auto') { + width = obj.img.naturalWidth; + } else { + width = getValue(width, obj.el.clientWidth); + } + + if (height === 'auto') { + height = (width / obj.img.naturalWidth) * obj.img.naturalHeight; + } else { + height = getValue(height, obj.el.clientHeight); + } + + if (size[0] === 'auto' && size[1] !== 'auto') { + width = (height / obj.img.naturalHeight) * obj.img.naturalWidth; + } + + var position = css.backgroundPosition; + + // Fix inconsistencies between browsers + if (position === 'top') { + position = '50% 0%'; + } else if (position === 'left') { + position = '0% 50%'; + } else if (position === 'right') { + position = '100% 50%'; + } else if (position === 'bottom') { + position = '50% 100%'; + } else if (position === 'center') { + position = '50% 50%'; + } + + position = position.split(' '); + + var x; + var y; + + // Two-value syntax vs Four-value syntax + if (position.length === 4) { + x = position[1]; + y = position[3]; + } else { + x = position[0]; + y = position[1]; + } + + // Use a default value + y = y || '50%'; + + // Background Position + x = getValue(x, obj.el.clientWidth, width); + y = getValue(y, obj.el.clientHeight, height); + + // Take care of ex: background-position: right 20px bottom 20px; + if (position.length === 4) { + + if (position[0] === 'right') { + x = obj.el.clientWidth - obj.img.naturalWidth - x; + } + + if (position[2] === 'bottom') { + y = obj.el.clientHeight - obj.img.naturalHeight - y; + } + } + + x += obj.el.getBoundingClientRect().left; + y += obj.el.getBoundingClientRect().top; + + return { + left: Math.floor(x), + right: Math.floor(x + width), + top: Math.floor(y), + bottom: Math.floor(y + height), + width: Math.floor(width), + height: Math.floor(height) + }; + } + + + /* + * Get Bounding Client Rect + */ + function getArea(obj) { + var area; + var image; + var parent; + + if (obj.nodeType) { + var rect = obj.getBoundingClientRect(); + + // Clone ClientRect for modification purposes + area = { + left: rect.left, + right: rect.right, + top: rect.top, + bottom: rect.bottom, + width: rect.width, + height: rect.height + }; + + parent = obj.parentNode; + image = obj; + } else { + area = calculateAreaFromCSS(obj); + parent = obj.el; + image = obj.img; + } + + parent = parent.getBoundingClientRect(); + + area.imageTop = 0; + area.imageLeft = 0; + area.imageWidth = image.naturalWidth; + area.imageHeight = image.naturalHeight; + + var ratio = area.imageHeight / area.height; + var delta; + + // Stay within the parent's boundary + if (area.top < parent.top) { + delta = parent.top - area.top; + area.imageTop = ratio * delta; + area.imageHeight -= ratio * delta; + area.top += delta; + area.height -= delta; + } + + if (area.left < parent.left) { + delta = parent.left - area.left; + area.imageLeft += ratio * delta; + area.imageWidth -= ratio * delta; + area.width -= delta; + area.left += delta; + } + + if (area.bottom > parent.bottom) { + delta = area.bottom - parent.bottom; + area.imageHeight -= ratio * delta; + area.height -= delta; + } + + if (area.right > parent.right) { + delta = area.right - parent.right; + area.imageWidth -= ratio * delta; + area.width -= delta; + } + + area.imageTop = Math.floor(area.imageTop); + area.imageLeft = Math.floor(area.imageLeft); + area.imageHeight = Math.floor(area.imageHeight); + area.imageWidth = Math.floor(area.imageWidth); + + return area; + } + + + /* + * Render image on canvas + */ + function drawImage(image) { + var area = getArea(image); + + image = image.nodeType ? image : image.img; + + if (area.imageWidth > 0 && area.imageHeight > 0 && area.width > 0 && area.height > 0) { + context.drawImage(image, + area.imageLeft, area.imageTop, area.imageWidth, area.imageHeight, + area.left, area.top, area.width, area.height); + } else { + log('Skipping image - ' + image.src + ' - area too small'); + } + } + + + /* + * Add/remove classes + */ + function classList(node, name, mode) { + var className = node.className; + + switch (mode) { + case 'add': + className += ' ' + name; + break; + case 'remove': + var pattern = new RegExp('(?:^|\\s)' + name + '(?!\\S)', 'g'); + className = className.replace(pattern, ''); + break; + } + + node.className = className.trim(); + } + + + /* + * Remove classes from element or + * their parents, depending on checkParent + */ + function removeClasses(el) { + var targets = el ? [el] : get('targets'); + var target; + + for (var t = 0; t < targets.length; t++) { + target = targets[t]; + target = get('changeParent') ? target.parentNode : target; + + classList(target, get('classes').light, 'remove'); + classList(target, get('classes').dark, 'remove'); + classList(target, get('classes').complex, 'remove'); + } + } + + + /* + * Calculate average pixel brightness of a region + * and add 'light' or 'dark' accordingly + */ + function calculatePixelBrightness(target) { + var dims = target.getBoundingClientRect(); + var brightness; + var data; + var pixels = 0; + var delta; + var deltaSqr = 0; + var mean = 0; + var variance; + var minOverlap = 0; + var mask = get('mask'); + + if (dims.width > 0 && dims.height > 0) { + removeClasses(target); + + target = get('changeParent') ? target.parentNode : target; + data = context.getImageData(dims.left, dims.top, dims.width, dims.height).data; + + for (var p = 0; p < data.length; p += 4) { + + if (data[p] === mask.r && data[p + 1] === mask.g && data[p + 2] === mask.b) { + minOverlap++; + } else { + pixels++; + brightness = (0.2126 * data[p]) + (0.7152 * data[p + 1]) + (0.0722 * data[p + 2]); + delta = brightness - mean; + deltaSqr += delta * delta; + mean = mean + delta / pixels; + } + } + + if (minOverlap <= (data.length / 4) * (1 - (get('minOverlap') / 100))) { + variance = Math.sqrt(deltaSqr / pixels) / 255; + mean = mean / 255; + log('Target: ' + target.className + ' lum: ' + mean + ' var: ' + variance); + classList(target, mean <= (get('threshold') / 100) ? get('classes').dark : get('classes').light, 'add'); + + if (variance > get('minComplexity') / 100) { + classList(target, get('classes').complex, 'add'); + } + } + } + } + + + /* + * Test if a is within b's boundary + */ + function isInside(a, b) { + a = (a.nodeType ? a : a.el).getBoundingClientRect(); + b = b === viewport ? b : (b.nodeType ? b : b.el).getBoundingClientRect(); + + return !(a.right < b.left || a.left > b.right || a.top > b.bottom || a.bottom < b.top); + } + + + /* + * Process all targets (checkTarget is undefined) + * or a single target (checkTarget is a previously set target) + * + * When not all images are loaded, checkTarget is an image + * to avoid processing all targets multiple times + */ + function processTargets(checkTarget) { + var start = new Date().getTime(); + var mode = (checkTarget && (checkTarget.tagName === 'IMG' || checkTarget.img)) ? 'image' : 'targets'; + var found = checkTarget ? false : true; + var total = get('targets').length; + var target; + + for (var t = 0; t < total; t++) { + target = get('targets')[t]; + + if (isInside(target, viewport)) { + if (mode === 'targets' && (!checkTarget || checkTarget === target)) { + found = true; + calculatePixelBrightness(target); + } else if (mode === 'image' && isInside(target, checkTarget)) { + calculatePixelBrightness(target); + } + } + } + + if (mode === 'targets' && !found) { + throw checkTarget + ' is not a target'; + } + + kill(start); + } + + + /* + * Find the element's zIndex. Also checks + * the zIndex of its parent + */ + function getZIndex(el) { + var calculate = function (el) { + var zindex = 0; + + if (window.getComputedStyle(el).position !== 'static') { + zindex = parseInt(window.getComputedStyle(el).zIndex, 10) || 0; + + // Reserve zindex = 0 for elements with position: static; + if (zindex >= 0) { + zindex++; + } + } + + return zindex; + }; + + var parent = el.parentNode; + var zIndexParent = parent ? calculate(parent) : 0; + var zIndexEl = calculate(el); + + return (zIndexParent * 100000) + zIndexEl; + } + + + /* + * Check zIndexes + */ + function sortImagesByZIndex(images) { + var sorted = false; + + images.sort(function (a, b) { + a = a.nodeType ? a : a.el; + b = b.nodeType ? b : b.el; + + var pos = a.compareDocumentPosition(b); + var reverse = 0; + + a = getZIndex(a); + b = getZIndex(b); + + if (a > b) { + sorted = true; + } + + // Reposition if zIndex is the same but the elements are not + // sorted according to their document position + if (a === b && pos === 2) { + reverse = 1; + } else if (a === b && pos === 4) { + reverse = -1; + } + + return reverse || a - b; + }); + + log('Sorted: ' + sorted); + + if (sorted) { + log(images); + } + + return sorted; + } + + + /* + * Main function + */ + function check(target, avoidClear, imageLoaded) { + + if (supported) { + var mask = get('mask'); + + log('--- BackgroundCheck ---'); + log('onLoad event: ' + (imageLoaded && imageLoaded.src)); + + if (avoidClear !== true) { + context.clearRect(0, 0, canvas.width, canvas.height); + context.fillStyle = 'rgb(' + mask.r + ', ' + mask.g + ', ' + mask.b + ')'; + context.fillRect(0, 0, canvas.width, canvas.height); + } + + var processImages = imageLoaded ? [imageLoaded] : get('images'); + var sorted = sortImagesByZIndex(processImages); + + var image; + var imageNode; + var loading = false; + + for (var i = 0; i < processImages.length; i++) { + image = processImages[i]; + + if (isInside(image, viewport)) { + imageNode = image.nodeType ? image : image.img; + + if (imageNode.naturalWidth === 0) { + loading = true; + log('Loading... ' + image.src); + + imageNode.removeEventListener('load', check); + + if (sorted) { + // Sorted -- redraw all images + imageNode.addEventListener('load', check.bind(null, null, false, null)); + } else { + // Not sorted -- just draw one image + imageNode.addEventListener('load', check.bind(null, target, true, image)); + } + } else { + log('Drawing: ' + image.src); + drawImage(image); + } + } + } + + if (!imageLoaded && !loading) { + processTargets(target); + } else if (imageLoaded) { + processTargets(imageLoaded); + } + } + } + + + /* + * Throttle events + */ + function throttle(callback) { + + if (get('windowEvents') === true) { + + if (throttleDelay) { + clearTimeout(throttleDelay); + } + + throttleDelay = setTimeout(callback, 200); + } + } + + + /* + * Setter + */ + function set(property, newValue) { + + if (attrs[property] === undefined) { + throw 'Unknown property - ' + property; + } else if (newValue === undefined) { + throw 'Missing value for ' + property; + } + + if (property === 'targets' || property === 'images') { + + try { + newValue = getElements(property === 'images' && !newValue ? 'img' : newValue, property === 'images' ? true : false); + } catch (err) { + newValue = []; + throw err; + } + } else { + checkType(newValue, typeof attrs[property]); + } + + removeClasses(); + attrs[property] = newValue; + check(); + + if (property === 'debugOverlay') { + showDebugOverlay(); + } + } + + + /* + * Getter + */ + function get(property) { + + if (attrs[property] === undefined) { + throw 'Unknown property - ' + property; + } + + return attrs[property]; + } + + + /* + * Get position and size of all images. + * Used for testing purposes + */ + function getImageData() { + var images = get('images'); + var area; + var data = []; + + for (var i = 0; i < images.length; i++) { + area = getArea(images[i]); + data.push(area); + } + + return data; + } + + + return { + /* + * Init and destroy + */ + init: init, + destroy: destroy, + + /* + * Expose main function + */ + refresh: check, + + /* + * Setters and getters + */ + set: set, + get: get, + + /* + * Return image data + */ + getImageData: getImageData + }; + + })); \ No newline at end of file diff --git a/background-check.min.js b/background-check.min.js deleted file mode 100644 index a1dafcb..0000000 --- a/background-check.min.js +++ /dev/null @@ -1,5 +0,0 @@ -/* BackgroundCheck - http://kennethcachia.com/background-check - v1.2.2 */ - -!function(a,b){"function"==typeof define&&define.amd?define(b):a.BackgroundCheck=b(a)}(this,function(){"use strict";function a(a){if(void 0===a||void 0===a.targets)throw"Missing attributes";H.debug=d(a.debug,!1),H.debugOverlay=d(a.debugOverlay,!1),H.targets=g(a.targets),H.images=g(a.images||"img",!0),H.changeParent=d(a.changeParent,!1),H.threshold=d(a.threshold,50),H.minComplexity=d(a.minComplexity,30),H.minOverlap=d(a.minOverlap,50),H.windowEvents=d(a.windowEvents,!0),H.maxDuration=d(a.maxDuration,500),H.mask=d(a.mask,{r:0,g:255,b:0}),H.classes=d(a.classes,{dark:"background--dark",light:"background--light",complex:"background--complex"}),void 0===B&&(h(),B&&(C.style.position="fixed",C.style.top="0px",C.style.left="0px",C.style.width="100%",C.style.height="100%",window.addEventListener(G,x.bind(null,function(){k(),w()})),window.addEventListener("scroll",x.bind(null,w)),k(),w()))}function b(){B=null,C=null,D=null,H={},E&&clearTimeout(E)}function c(a){z("debug")&&console.log(a)}function d(a,b){return e(a,typeof b),void 0===a?b:a}function e(a,b){if(void 0!==a&&typeof a!==b)throw"Incorrect attribute type"}function f(a){for(var b,d,e=[],f=0;f1)throw"Multiple backgrounds are not supported";if(!d||"none"===d)throw"Element is not an but does not have a background-image";e[f]={img:new Image,el:e[f]},d=d.slice(4,-1),d=d.replace(/"/g,""),e[f].img.src=d,c("CSS Image - "+d)}return e}function g(a,b){var c=a;if("string"==typeof a?c=document.querySelectorAll(a):a&&1===a.nodeType&&(c=[a]),!c||0===c.length||void 0===c.length)throw"Elements not found";return b&&(c=f(c)),c=Array.prototype.slice.call(c)}function h(){C=document.createElement("canvas"),C&&C.getContext?(D=C.getContext("2d"),B=!0):B=!1,i()}function i(){z("debugOverlay")?(C.style.opacity=.5,C.style.pointerEvents="none",document.body.appendChild(C)):C.parentNode&&C.parentNode.removeChild(C)}function j(a){var d=(new Date).getTime()-a;c("Duration: "+d+"ms"),d>z("maxDuration")&&(console.log("BackgroundCheck - Killed"),q(),b())}function k(){F={left:0,top:0,right:document.body.clientWidth,bottom:window.innerHeight},C.width=document.body.clientWidth,C.height=window.innerHeight}function l(a,b,c){var d,e;return-1!==a.indexOf("px")?d=parseFloat(a):-1!==a.indexOf("%")?(d=parseFloat(a),e=d/100,d=e*b,c&&(d-=c*e)):d=b,d}function m(a){var b=window.getComputedStyle(a.el);a.el.style.backgroundRepeat="no-repeat",a.el.style.backgroundOrigin="padding-box";var c=b.backgroundSize.split(" "),d=c[0],e=void 0===c[1]?"auto":c[1],f=a.el.clientWidth/a.el.clientHeight,g=a.img.naturalWidth/a.img.naturalHeight;"cover"===d?f>=g?(d="100%",e="auto"):(d="auto",c[0]="auto",e="100%"):"contain"===d&&(1/g>1/f?(d="auto",c[0]="auto",e="100%"):(d="100%",e="auto")),d="auto"===d?a.img.naturalWidth:l(d,a.el.clientWidth),e="auto"===e?d/a.img.naturalWidth*a.img.naturalHeight:l(e,a.el.clientHeight),"auto"===c[0]&&"auto"!==c[1]&&(d=e/a.img.naturalHeight*a.img.naturalWidth);var h=b.backgroundPosition;"top"===h?h="50% 0%":"left"===h?h="0% 50%":"right"===h?h="100% 50%":"bottom"===h?h="50% 100%":"center"===h&&(h="50% 50%"),h=h.split(" ");var i,j;return 4===h.length?(i=h[1],j=h[3]):(i=h[0],j=h[1]),j=j||"50%",i=l(i,a.el.clientWidth,d),j=l(j,a.el.clientHeight,e),4===h.length&&("right"===h[0]&&(i=a.el.clientWidth-a.img.naturalWidth-i),"bottom"===h[2]&&(j=a.el.clientHeight-a.img.naturalHeight-j)),i+=a.el.getBoundingClientRect().left,j+=a.el.getBoundingClientRect().top,{left:Math.floor(i),right:Math.floor(i+d),top:Math.floor(j),bottom:Math.floor(j+e),width:Math.floor(d),height:Math.floor(e)}}function n(a){var b,c,d;if(a.nodeType){var e=a.getBoundingClientRect();b={left:e.left,right:e.right,top:e.top,bottom:e.bottom,width:e.width,height:e.height},d=a.parentNode,c=a}else b=m(a),d=a.el,c=a.img;d=d.getBoundingClientRect(),b.imageTop=0,b.imageLeft=0,b.imageWidth=c.naturalWidth,b.imageHeight=c.naturalHeight;var f,g=b.imageHeight/b.height;return b.topd.bottom&&(f=b.bottom-d.bottom,b.imageHeight-=g*f,b.height-=f),b.right>d.right&&(f=b.right-d.right,b.imageWidth-=g*f,b.width-=f),b.imageTop=Math.floor(b.imageTop),b.imageLeft=Math.floor(b.imageLeft),b.imageHeight=Math.floor(b.imageHeight),b.imageWidth=Math.floor(b.imageWidth),b}function o(a){var b=n(a);a=a.nodeType?a:a.img,b.imageWidth>0&&b.imageHeight>0&&b.width>0&&b.height>0?D.drawImage(a,b.imageLeft,b.imageTop,b.imageWidth,b.imageHeight,b.left,b.top,b.width,b.height):c("Skipping image - "+a.src+" - area too small")}function p(a,b,c){var d=a.className;switch(c){case"add":d+=" "+b;break;case"remove":var e=new RegExp("(?:^|\\s)"+b+"(?!\\S)","g");d=d.replace(e,"")}a.className=d.trim()}function q(a){for(var b,c=a?[a]:z("targets"),d=0;d0&&g.height>0){q(a),a=z("changeParent")?a.parentNode:a,d=D.getImageData(g.left,g.top,g.width,g.height).data;for(var m=0;mz("minComplexity")/100&&p(a,z("classes").complex,"add"))}}function s(a,b){return a=(a.nodeType?a:a.el).getBoundingClientRect(),b=b===F?b:(b.nodeType?b:b.el).getBoundingClientRect(),!(a.rightb.right||a.top>b.bottom||a.bottomg;g++)b=z("targets")[g],s(b,F)&&("targets"!==d||a&&a!==b?"image"===d&&s(b,a)&&r(b):(e=!0,r(b)));if("targets"===d&&!e)throw a+" is not a target";j(c)}function u(a){var b=function(a){var b=0;return"static"!==window.getComputedStyle(a).position&&(b=parseInt(window.getComputedStyle(a).zIndex,10)||0,b>=0&&b++),b},c=a.parentNode,d=c?b(c):0,e=b(a);return 1e5*d+e}function v(a){var b=!1;return a.sort(function(a,c){a=a.nodeType?a:a.el,c=c.nodeType?c:c.el;var d=a.compareDocumentPosition(c),e=0;return a=u(a),c=u(c),a>c&&(b=!0),a===c&&2===d?e=1:a===c&&4===d&&(e=-1),e||a-c}),c("Sorted: "+b),b&&c(a),b}function w(a,b,d){if(B){var e=z("mask");c("--- BackgroundCheck ---"),c("onLoad event: "+(d&&d.src)),b!==!0&&(D.clearRect(0,0,C.width,C.height),D.fillStyle="rgb("+e.r+", "+e.g+", "+e.b+")",D.fillRect(0,0,C.width,C.height));for(var f,g,h=d?[d]:z("images"),i=v(h),j=!1,k=0;k * { margin-top: auto; @@ -71,9 +75,11 @@ h1 { border-radius: 10px; } -.background--light { +.light-background { color: #101010; + text-shadow: #F0F0F0 0px 0px 7px;; } -.background--dark { +.dark-background { color: #F0F0F0; + text-shadow: #101010 0px 0px 7px;; } \ No newline at end of file diff --git a/index.html b/index.html index 009c7fb..5c246b3 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + diff --git a/index.js b/index.js index ac8fa02..21886d0 100644 --- a/index.js +++ b/index.js @@ -1,15 +1,12 @@ let events = []; let eventsToDisplay = []; let companies = []; +let bgCheck = null; const delay = ms => new Promise(res => setTimeout(res, ms)); window.addEventListener("load", () => { - BackgroundCheck.init({ - targets: ".bg-check-target", - images: ".background" - }); - + // bgCheck = new BackgroundCheck("bg-check-target", "background"); main() }); @@ -101,9 +98,7 @@ async function displayEvents() { while (yetToDisplay.length > 0) { let event = yetToDisplay.pop(); displayEvent(event); - await delay(1000); - BackgroundCheck.refresh(); - await delay(14 * 1000); + await delay(15 * 1000); } } @@ -130,7 +125,7 @@ function displayEvent(event) { show_sponsors: true, show_date: true } - let kioskOptions = {...event.attributes.kiosk, ...kioskDefault}; + let kioskOptions = {...kioskDefault, ...event.attributes.kiosk}; if (kioskOptions.background === undefined) { kioskOptions.background = "default_background.png"; @@ -203,10 +198,10 @@ function displayEvent(event) { height: 220, }); - let img = new Image(); - img.src = kioskOptions.background; - img.onload = () => { - BackgroundCheck.refresh(); - } - if (img.complete) img.onload(); + // let img = new Image(); + // img.src = kioskOptions.background; + // img.onload = () => { + // bgCheck.check(); + // } + // if (img.complete) img.onload(); } \ No newline at end of file