diff options
| author | Evgeny Zinoviev <me@ch1p.io> | 2022-07-11 15:01:02 +0300 |
|---|---|---|
| committer | Evgeny Zinoviev <me@ch1p.io> | 2022-07-11 15:01:02 +0300 |
| commit | c2f382aba86aaebb9806ff1b43c1af69992e9a10 (patch) | |
| tree | aee205721fd675926c5e7163eec0dddc448f7813 /skin/main.skin.php | |
| parent | 24982a48f570b89e537850dda4a4d1ac33ea919f (diff) | |
support dark mode for images with alpha channel
Diffstat (limited to 'skin/main.skin.php')
| -rw-r--r-- | skin/main.skin.php | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/skin/main.skin.php b/skin/main.skin.php index 5236bf0..552c61f 100644 --- a/skin/main.skin.php +++ b/skin/main.skin.php @@ -116,12 +116,14 @@ HTML; // -------- function page($ctx, $page_url, $short_name, $unsafe_html) { -return <<<HTML +$html = <<<HTML <div class="page"> {$ctx->if_admin($ctx->pageAdminLinks, $page_url, $short_name)} <div class="blog-post-text">{$unsafe_html}</div> </div> HTML; + +return [$html, markdownThemeChangeListener()]; } function pageAdminLinks($ctx, $url, $short_name) { @@ -139,7 +141,7 @@ HTML; // --------- function post($ctx, $id, $title, $unsafe_html, $date, $visible, $url, $tags, $email, $urlencoded_reply_subject) { -return <<<HTML +$html = <<<HTML <div class="blog-post"> <div class="blog-post-title"> <h1>{$title}</h1> @@ -158,6 +160,8 @@ return <<<HTML {$ctx->langRaw('blog_comments_text', $email, $urlencoded_reply_subject)} </div> HTML; + +return [$html, markdownThemeChangeListener()]; } function postAdminLinks($ctx, $url, $id) { @@ -171,7 +175,32 @@ function postTag($ctx, $url, $name) { return <<<HTML <a href="{$url}"><span>#</span>{$name}</a> HTML; +} +function markdownThemeChangeListener() { +return <<<JS +ThemeSwitcher.addOnChangeListener(function(isDark) { + var nodes = document.querySelectorAll('.md-image-wrap'); + for (var i = 0; i < nodes.length; i++) { + var node = nodes[i]; + var alpha = parseInt(node.getAttribute('data-alpha'), 10); + if (!alpha) + continue; + var div = node.querySelector('a > div'); + if (!div) { + console.warn('could not found a>div on this node:', node); + continue; + } + var style = div.getAttribute('style'); + if (isDark) { + style = style.replace(/(a[\d]+x[\d]+)\.jpg/, '$1_dark.jpg'); + } else { + style = style.replace(/(a[\d]+x[\d]+)_dark\.jpg/, '$1.jpg'); + } + div.setAttribute('style', style); + } +}); +JS; } |