From c2f382aba86aaebb9806ff1b43c1af69992e9a10 Mon Sep 17 00:00:00 2001
From: Evgeny Zinoviev <me@ch1p.io>
Date: Mon, 11 Jul 2022 15:01:02 +0300
Subject: support dark mode for images with alpha channel

---
 skin/admin.skin.php    |  8 ++++----
 skin/main.skin.php     | 33 +++++++++++++++++++++++++++++++--
 skin/markdown.skin.php |  6 +++---
 3 files changed, 38 insertions(+), 9 deletions(-)

(limited to 'skin')
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, 
-- 
cgit v1.2.3

