From 209979f63a3e45aecf51aa97fbc0a9c2e4d4f02f Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Fri, 11 Jun 2021 16:38:38 +0100 Subject: [PATCH] cinera.js: Add a "Clear" element To use it, source the cinera_clear.js file at the position in the HTML file to be obscured while further processing occurs. (Make sure not to "defer" it.) After processing is complete, call FlipClear() --- cinera/cinera.c | 30 +++++++++++-- cinera/cinera_clear.js | 16 +++++++ cinera/cinera_player_pre.js | 75 ------------------------------- cinera/cinera_pre.js | 85 ++++++++++++++++++++++++++++++++++++ cinera/cinera_search_post.js | 1 + 5 files changed, 129 insertions(+), 78 deletions(-) create mode 100644 cinera/cinera_clear.js diff --git a/cinera/cinera.c b/cinera/cinera.c index 223852b..dbf5948 100644 --- a/cinera/cinera.c +++ b/cinera/cinera.c @@ -23,7 +23,7 @@ typedef struct version CINERA_APP_VERSION = { .Major = 0, .Minor = 8, - .Patch = 20 + .Patch = 21 }; #include // NOTE(matt): varargs @@ -2703,6 +2703,7 @@ asset BuiltinAssets[] = { ASSET_IMG, "cinera_icon_filter.png" }, { ASSET_JS, "cinera_pre.js" }, { ASSET_JS, "cinera_post.js" }, + { ASSET_JS, "cinera_clear.js" }, { ASSET_JS, "cinera_search_pre.js" }, { ASSET_JS, "cinera_search_post.js" }, { ASSET_JS, "cinera_player_pre.js" }, @@ -2716,6 +2717,7 @@ typedef enum ASSET_IMG_FILTER, ASSET_JS_CINERA_PRE, ASSET_JS_CINERA_POST, + ASSET_JS_CLEAR, ASSET_JS_SEARCH_PRE, ASSET_JS_SEARCH_POST, ASSET_JS_PLAYER_PRE, @@ -6025,7 +6027,7 @@ InitAssets(void) } void -ConstructResolvedAssetURL(buffer *Buffer, asset *Asset, enum8(pages) PageType) +ConstructResolvedAssetURL(buffer *Buffer, asset *Asset, page_type PageType) { ClaimBuffer(Buffer, BID_URL_ASSET, (MAX_ROOT_URL_LENGTH + 1 + MAX_RELATIVE_ASSET_LOCATION_LENGTH + 1) * 2); ConstructURLPrefix(Buffer, Asset->Type, PageType); @@ -11284,6 +11286,7 @@ typedef enum void OpenNode(buffer *B, uint32_t *IndentationLevel, html_element_id Element, char *ID) { + // NOTE(matt): Leaves the node open for further additions, e.g. attributes, classes AppendStringToBuffer(B, Wrap0("<")); AppendStringToBuffer(B, Wrap0(HTMLElements[Element].String)); if(ID) @@ -11302,6 +11305,7 @@ OpenNode(buffer *B, uint32_t *IndentationLevel, html_element_id Element, char *I void OpenNodeC(buffer *B, uint32_t *IndentationLevel, html_element_id Element, char *ID) { + // NOTE(matt): Closes the node AppendStringToBuffer(B, Wrap0("<")); AppendStringToBuffer(B, Wrap0(HTMLElements[Element].String)); if(ID) @@ -11354,6 +11358,24 @@ CloseNodeNewLine(buffer *B, uint32_t *IndentationLevel, html_element_id Element) AppendStringToBuffer(B, Wrap0(">")); } +void +AppendScriptNode(buffer *B, buffer *URL, uint32_t *IndentationLevel, asset *Asset, bool Defer, page_type PageType) +{ + OpenNodeNewLine(B, IndentationLevel, NODE_SCRIPT, 0); + AppendStringToBuffer(B, Wrap0(" src=\"")); + ConstructResolvedAssetURL(URL, Asset, PageType); + AppendStringToBuffer(B, Wrap0(URL->Location)); + DeclaimBuffer(URL); + PushAssetLandmark(B, Asset, PageType, TRUE); + AppendStringToBuffer(B, Wrap0("\"")); + if(Defer) + { + AppendStringToBuffer(B, Wrap0(" defer")); + } + AppendStringToBuffer(B, Wrap0(">")); + CloseNode(B, IndentationLevel, NODE_SCRIPT); +} + void GenerateNavigationRecursively(project *Current, project *Target, navigation_buffer *NavBuffer, uint32_t *IndentationLevel) { @@ -14198,8 +14220,10 @@ SearchToBuffer(buffers *CollationBuffers, db_header_project *StoredP, project *P AppendStringToBuffer(B, Wrap0("\n")); - OpenNodeCNewLine(B, &IndentationLevel, NODE_DIV, "cineraIndexList"); + asset *JSClear = GetAsset(Wrap0(BuiltinAssets[ASSET_JS_CLEAR].Filename), ASSET_JS); + AppendScriptNode(B, &URL, &IndentationLevel, JSClear, FALSE, PAGE_SEARCH); + OpenNodeCNewLine(B, &IndentationLevel, NODE_DIV, "cineraIndexList"); AppendLandmarkedBuffer(B, &Index, PAGE_SEARCH); FreeBuffer(&Index); diff --git a/cinera/cinera_clear.js b/cinera/cinera_clear.js new file mode 100644 index 0000000..d019143 --- /dev/null +++ b/cinera/cinera_clear.js @@ -0,0 +1,16 @@ +var CineraClearElement = document.createElement("DIV"); +CineraClearElement.style.position = "fixed"; +CineraClearElement.style.height = "100%"; +CineraClearElement.style.width = "100%"; +CineraClearElement.style.zIndex = 64; +var CineraPlacedClear = document.body.appendChild(CineraClearElement); +var Col = getBackgroundColourRGB(CineraPlacedClear); +CineraPlacedClear.style.background = "rgb(" + Col.R + ", " + Col.G + ", " + Col.B + ")" +document.body.style.overflowY = "hidden"; + +function +FlipClear() +{ + document.body.style.overflowY = null; + document.body.removeChild(CineraPlacedClear); +} diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js index 8b3578a..0a21815 100644 --- a/cinera/cinera_player_pre.js +++ b/cinera/cinera_player_pre.js @@ -1915,78 +1915,3 @@ function handleMenuTogglerInteraction(menu, eventType) } } } - -function RGBtoHSL(colour) -{ - var rgb = colour.slice(4, -1).split(", "); - var red = rgb[0]; - var green = rgb[1]; - var blue = rgb[2]; - var min = Math.min(red, green, blue); - var max = Math.max(red, green, blue); - var chroma = max - min; - var hue = 0; - if(max == red) - { - hue = ((green - blue) / chroma) % 6; - } - else if(max == green) - { - hue = ((blue - red) / chroma) + 2; - } - else if(max == blue) - { - hue = ((red - green) / chroma) + 4; - } - - var saturation = chroma / 255 * 100; - hue = (hue * 60) < 0 ? 360 + (hue * 60) : (hue * 60); - - return [hue, saturation] -} - -function getBackgroundBrightness(element) { - var colour = getComputedStyle(element).getPropertyValue("background-color"); - var depth = 0; - while((colour == "transparent" || colour == "rgba(0, 0, 0, 0)") && depth <= 4) - { - element = element.parentNode; - colour = getComputedStyle(element).getPropertyValue("background-color"); - ++depth; - } - var rgb = colour.slice(4, -1).split(", "); - var result = Math.sqrt(rgb[0] * rgb[0] * .241 + - rgb[1] * rgb[1] * .691 + - rgb[2] * rgb[2] * .068); - return result; -} - -function setTextLightness(textElement) -{ - var textHue = textElement.getAttribute("data-hue"); - var textSaturation = textElement.getAttribute("data-saturation"); - if(getBackgroundBrightness(textElement.parentNode) < 127) - { - textElement.style.color = ("hsl(" + textHue + ", " + textSaturation + ", 76%)"); - } - else - { - textElement.style.color = ("hsl(" + textHue + ", " + textSaturation + ", 24%)"); - } -} - -function setDotLightness(topicDot) -{ - var Hue = RGBtoHSL(getComputedStyle(topicDot).getPropertyValue("background-color"))[0]; - var Saturation = RGBtoHSL(getComputedStyle(topicDot).getPropertyValue("background-color"))[1]; - if(getBackgroundBrightness(topicDot.parentNode) < 127) - { - topicDot.style.backgroundColor = ("hsl(" + Hue + ", " + Saturation + "%, 76%)"); - topicDot.style.borderColor = ("hsl(" + Hue + ", " + Saturation + "%, 76%)"); - } - else - { - topicDot.style.backgroundColor = ("hsl(" + Hue + ", " + Saturation + "%, 47%)"); - topicDot.style.borderColor = ("hsl(" + Hue + ", " + Saturation + "%, 47%)"); - } -} diff --git a/cinera/cinera_pre.js b/cinera/cinera_pre.js index 13a9250..1827d90 100644 --- a/cinera/cinera_pre.js +++ b/cinera/cinera_pre.js @@ -520,3 +520,88 @@ BindHelp(Button, DocumentationContainer) DocumentationContainer.classList.toggle("visible"); }) } + +function RGBtoHSL(colour) +{ + var rgb = colour.slice(4, -1).split(", "); + var red = rgb[0]; + var green = rgb[1]; + var blue = rgb[2]; + var min = Math.min(red, green, blue); + var max = Math.max(red, green, blue); + var chroma = max - min; + var hue = 0; + if(max == red) + { + hue = ((green - blue) / chroma) % 6; + } + else if(max == green) + { + hue = ((blue - red) / chroma) + 2; + } + else if(max == blue) + { + hue = ((red - green) / chroma) + 4; + } + + var saturation = chroma / 255 * 100; + hue = (hue * 60) < 0 ? 360 + (hue * 60) : (hue * 60); + + return [hue, saturation] +} + +function getBackgroundColourRGB(element) { + var Colour = getComputedStyle(element).getPropertyValue("background-color"); + var depth = 0; + while((Colour == "transparent" || Colour == "rgba(0, 0, 0, 0)") && depth <= 4) + { + element = element.parentNode; + Colour = getComputedStyle(element).getPropertyValue("background-color"); + ++depth; + } + var Staging = Colour.slice(4, -1).split(", "); + var Result = { + R: parseInt(Staging[0]), + G: parseInt(Staging[1]), + B: parseInt(Staging[2]), + }; + return Result; +} + +function getBackgroundBrightness(element) { + var Colour = getBackgroundColourRGB(element); + var Result = Math.sqrt(Colour.R * Colour.R * .241 + + Colour.G * Colour.G * .691 + + Colour.B * Colour.B * .068); + return Result; +} + +function setTextLightness(textElement) +{ + var textHue = textElement.getAttribute("data-hue"); + var textSaturation = textElement.getAttribute("data-saturation"); + if(getBackgroundBrightness(textElement.parentNode) < 127) + { + textElement.style.color = ("hsl(" + textHue + ", " + textSaturation + ", 76%)"); + } + else + { + textElement.style.color = ("hsl(" + textHue + ", " + textSaturation + ", 24%)"); + } +} + +function setDotLightness(topicDot) +{ + var Hue = RGBtoHSL(getComputedStyle(topicDot).getPropertyValue("background-color"))[0]; + var Saturation = RGBtoHSL(getComputedStyle(topicDot).getPropertyValue("background-color"))[1]; + if(getBackgroundBrightness(topicDot.parentNode) < 127) + { + topicDot.style.backgroundColor = ("hsl(" + Hue + ", " + Saturation + "%, 76%)"); + topicDot.style.borderColor = ("hsl(" + Hue + ", " + Saturation + "%, 76%)"); + } + else + { + topicDot.style.backgroundColor = ("hsl(" + Hue + ", " + Saturation + "%, 47%)"); + topicDot.style.borderColor = ("hsl(" + Hue + ", " + Saturation + "%, 47%)"); + } +} diff --git a/cinera/cinera_search_post.js b/cinera/cinera_search_post.js index 5698e72..4202ed6 100644 --- a/cinera/cinera_search_post.js +++ b/cinera/cinera_search_post.js @@ -45,6 +45,7 @@ InitPrototypes(Search.ResultsContainer); prepareProjects(); SyncNavState(); +FlipClear(); // ////