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()
This commit is contained in:
Matt Mascarenhas 2021-06-11 16:38:38 +01:00
parent 12b06812bf
commit 209979f63a
5 changed files with 129 additions and 78 deletions

View File

@ -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);

16
cinera/cinera_clear.js Normal file
View File

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

View File

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

View File

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

View File

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