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

@@ -23,7 +23,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 8,
-    .Patch = 20
+    .Patch = 21
 };
 
 #include <stdarg.h> // 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);

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);
+}

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%)");
-    }
-}

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%)");
+    }
+}

cinera/cinera_search_post.js

@@ -45,6 +45,7 @@ InitPrototypes(Search.ResultsContainer);
 prepareProjects();
 
 SyncNavState();
+FlipClear();
 //
 ////