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 | |
| parent | 24982a48f570b89e537850dda4a4d1ac33ea919f (diff) | |
support dark mode for images with alpha channel
Diffstat (limited to 'skin')
| -rw-r--r-- | skin/admin.skin.php | 8 | ||||
| -rw-r--r-- | skin/main.skin.php | 33 | ||||
| -rw-r--r-- | skin/markdown.skin.php | 6 |
3 files changed, 38 insertions, 9 deletions
diff --git a/skin/admin.skin.php b/skin/admin.skin.php index f03d7ce..5619dd0 100644 --- a/skin/admin.skin.php +++ b/skin/admin.skin.php @@ -26,9 +26,9 @@ $html = <<<HTML </form> HTML; -$js = <<<JAVASCRIPT +$js = <<<JS ge('as_password').focus(); -JAVASCRIPT; +JS; return [$html, $js]; } @@ -264,9 +264,9 @@ $html = <<<HTML HTML; $js_params = json_encode(['pages' => true, 'edit' => $is_edit]); -$js = <<<JAVASCRIPT +$js = <<<JS AdminWriteForm.init({$js_params}); -JAVASCRIPT; +JS; return [$html, $js]; } 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; } diff --git a/skin/markdown.skin.php b/skin/markdown.skin.php index 02d3a0f..58801f5 100644 --- a/skin/markdown.skin.php +++ b/skin/markdown.skin.php @@ -14,14 +14,14 @@ HTML; function image($ctx, // options - $align, $nolabel, $w, $padding_top, + $align, $nolabel, $w, $padding_top, $may_have_alpha, // image data $direct_url, $url, $note) { return <<<HTML <div class="md-image align-{$align}"> - <div class="md-image-wrap"> + <div class="md-image-wrap" data-alpha="{$ctx->if_then_else($may_have_alpha, '1', '0')}"> <a href="{$direct_url}"> - <div style="background: #f2f2f2 url('{$url}') no-repeat; background-size: contain; width: {$w}px; padding-top: {$padding_top}%;"></div> + <div style="background: url('{$url}') no-repeat; background-size: contain; width: {$w}px; padding-top: {$padding_top}%;"></div> </a> {$ctx->if_true( $note != '' && !$nolabel, |