From 9fffc050b4d67188e03912b9e04baf3756e9c3d0 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Fri, 11 Dec 2020 20:35:22 +0900 Subject: [PATCH 01/11] Add rx_color_scheme cookie for detecting and setting color scheme --- classes/context/Context.class.php | 35 +++++++++++++++++++++++++++++++ common/css/rhymix.less | 11 ++++++++++ common/js/common.js | 10 +++++++++ common/tpl/common_layout.html | 1 + 4 files changed, 57 insertions(+) diff --git a/classes/context/Context.class.php b/classes/context/Context.class.php index fc7a580d2..a4096901e 100644 --- a/classes/context/Context.class.php +++ b/classes/context/Context.class.php @@ -2683,6 +2683,41 @@ class Context { return self::$_instance->canonical_url; } + + /** + * Get the current color scheme (none, light, dark) + * + * @return string + */ + public static function getColorScheme(): string + { + if (isset($_COOKIE['rx_color_scheme']) && in_array($_COOKIE['rx_color_scheme'], ['light', 'dark'])) + { + return strval($_COOKIE['rx_color_scheme']); + } + else + { + return 'none'; + } + } + + /** + * Set the color scheme (none, light, dark) + * + * @param string $color_scheme + * @return void + */ + public static function setColorScheme(string $color_scheme) + { + if (in_array($color_scheme, ['light', 'dark'])) + { + setcookie('rx_color_scheme', $color_scheme, time() + 86400 * 365, \RX_BASEURL, null, !!config('session.use_ssl_cookies')); + } + else + { + setcookie('rx_color_scheme', 'deleted', time() - 86400, \RX_BASEURL, null); + } + } } /* End of file Context.class.php */ /* Location: ./classes/context/Context.class.php */ diff --git a/common/css/rhymix.less b/common/css/rhymix.less index feb6f7eaf..845523071 100644 --- a/common/css/rhymix.less +++ b/common/css/rhymix.less @@ -368,6 +368,17 @@ a img { } } +/* Color scheme detection */ +#rhymix_color_scheme { + display: none; + @media (prefers-color-scheme: dark) { + display: block; + position: absolute; + bottom: 0; right: 0; + width: 1px; height: 1px; + } +} + /* Button (for XE compatibility) */ .btnArea_mixin(@enabled) when (@enabled = true) { clear: both; diff --git a/common/js/common.js b/common/js/common.js index f87a9815d..56832aa20 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -349,6 +349,16 @@ jQuery(function($) { } }); + /* Detect color scheme */ + var color_scheme_cookie = XE.cookie.get('rx_color_scheme'); + var color_scheme_check = $('#rhymix_color_scheme').is(':visible') ? 'dark' : 'light'; + if (color_scheme_cookie && color_scheme_cookie !== color_scheme_check) { + XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); + } else if (color_scheme_check === 'dark') { + XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); + $('#rhymix_color_scheme').hide(); + } + /* Editor preview replacement */ $(".editable_preview").addClass("rhymix_content xe_content").attr("tabindex", 0); $(".editable_preview").on("click", function() { diff --git a/common/tpl/common_layout.html b/common/tpl/common_layout.html index ae987c060..3d3eecbb2 100644 --- a/common/tpl/common_layout.html +++ b/common/tpl/common_layout.html @@ -74,6 +74,7 @@
+
From 79c10d0b23d1d6450d3b903383d712a8c9d5c1fc Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Fri, 11 Dec 2020 20:54:56 +0900 Subject: [PATCH 02/11] Add color_scheme_light/color_scheme_dark classes to body --- classes/context/Context.class.php | 8 ++++++-- common/js/common.js | 2 ++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/classes/context/Context.class.php b/classes/context/Context.class.php index a4096901e..0d6ca2cf9 100644 --- a/classes/context/Context.class.php +++ b/classes/context/Context.class.php @@ -2367,9 +2367,13 @@ class Context */ public static function getBodyClass() { - self::$_instance->body_class = array_unique(self::$_instance->body_class); + $class_list = self::$_instance->body_class; + if (($color_scheme = self::getColorScheme()) !== 'none') + { + $class_list[] = 'color_scheme_' . $color_scheme; + } - return (count(self::$_instance->body_class) > 0) ? sprintf(' class="%s"', join(' ', self::$_instance->body_class)) : ''; + return (count($class_list) > 0) ? sprintf(' class="%s"', implode(' ', array_unique($class_list))) : ''; } /** diff --git a/common/js/common.js b/common/js/common.js index 56832aa20..59374e574 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -354,8 +354,10 @@ jQuery(function($) { var color_scheme_check = $('#rhymix_color_scheme').is(':visible') ? 'dark' : 'light'; if (color_scheme_cookie && color_scheme_cookie !== color_scheme_check) { XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); + $('body').addClass('color_scheme_' + color_scheme_check); } else if (color_scheme_check === 'dark') { XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); + $('body').addClass('color_scheme_' + color_scheme_check); $('#rhymix_color_scheme').hide(); } From 96295edc7522c0f5816714d9278518b5f2e52856 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Fri, 11 Dec 2020 20:56:17 +0900 Subject: [PATCH 03/11] Update cookie value inside PHP if color scheme is changed manually --- classes/context/Context.class.php | 1 + 1 file changed, 1 insertion(+) diff --git a/classes/context/Context.class.php b/classes/context/Context.class.php index 0d6ca2cf9..4908b866b 100644 --- a/classes/context/Context.class.php +++ b/classes/context/Context.class.php @@ -2715,6 +2715,7 @@ class Context { if (in_array($color_scheme, ['light', 'dark'])) { + $_COOKIE['rx_color_scheme'] = $color_scheme; setcookie('rx_color_scheme', $color_scheme, time() + 86400 * 365, \RX_BASEURL, null, !!config('session.use_ssl_cookies')); } else From c0c6b4e2de629ed9e7fa651479fd7fd754b122e2 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Fri, 11 Dec 2020 20:58:13 +0900 Subject: [PATCH 04/11] Remove conflicting color scheme class from body --- common/js/common.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/js/common.js b/common/js/common.js index 59374e574..1804e40ec 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -354,10 +354,10 @@ jQuery(function($) { var color_scheme_check = $('#rhymix_color_scheme').is(':visible') ? 'dark' : 'light'; if (color_scheme_cookie && color_scheme_cookie !== color_scheme_check) { XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); - $('body').addClass('color_scheme_' + color_scheme_check); + $('body').addClass('color_scheme_' + color_scheme_check).removeClass('color_scheme_' + (color_scheme_check === 'dark' ? 'light' : 'dark')); } else if (color_scheme_check === 'dark') { XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); - $('body').addClass('color_scheme_' + color_scheme_check); + $('body').addClass('color_scheme_' + color_scheme_check).removeClass('color_scheme_' + (color_scheme_check === 'dark' ? 'light' : 'dark')); $('#rhymix_color_scheme').hide(); } From e3db1b7cd8ce43a34ba13c98a9e126d975d19514 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 13 Dec 2020 19:43:11 +0900 Subject: [PATCH 05/11] Replace CSS check with window.matchMedia --- common/css/rhymix.less | 11 ----------- common/js/common.js | 3 ++- common/tpl/common_layout.html | 1 - 3 files changed, 2 insertions(+), 13 deletions(-) diff --git a/common/css/rhymix.less b/common/css/rhymix.less index 845523071..feb6f7eaf 100644 --- a/common/css/rhymix.less +++ b/common/css/rhymix.less @@ -368,17 +368,6 @@ a img { } } -/* Color scheme detection */ -#rhymix_color_scheme { - display: none; - @media (prefers-color-scheme: dark) { - display: block; - position: absolute; - bottom: 0; right: 0; - width: 1px; height: 1px; - } -} - /* Button (for XE compatibility) */ .btnArea_mixin(@enabled) when (@enabled = true) { clear: both; diff --git a/common/js/common.js b/common/js/common.js index 4437b3be7..bd9d0cb0b 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -351,7 +351,8 @@ jQuery(function($) { /* Detect color scheme */ var color_scheme_cookie = XE.cookie.get('rx_color_scheme'); - var color_scheme_check = $('#rhymix_color_scheme').is(':visible') ? 'dark' : 'light'; + var color_scheme_check = (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) ? 'dark' : 'light'; + console.log(color_scheme_check); if (color_scheme_cookie && color_scheme_cookie !== color_scheme_check) { XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); $('body').addClass('color_scheme_' + color_scheme_check).removeClass('color_scheme_' + (color_scheme_check === 'dark' ? 'light' : 'dark')); diff --git a/common/tpl/common_layout.html b/common/tpl/common_layout.html index 3d3eecbb2..ae987c060 100644 --- a/common/tpl/common_layout.html +++ b/common/tpl/common_layout.html @@ -74,7 +74,6 @@
-
From 6200e8d4ae1bfa2145a902e0518be1916eca4a9a Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 13 Dec 2020 19:45:34 +0900 Subject: [PATCH 06/11] Move getColorScheme/setColorScheme methods to UA class --- classes/context/Context.class.php | 38 +------------------------------ common/framework/ua.php | 36 +++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/classes/context/Context.class.php b/classes/context/Context.class.php index 4908b866b..3975ac018 100644 --- a/classes/context/Context.class.php +++ b/classes/context/Context.class.php @@ -2368,7 +2368,7 @@ class Context public static function getBodyClass() { $class_list = self::$_instance->body_class; - if (($color_scheme = self::getColorScheme()) !== 'none') + if (($color_scheme = Rhymix\Framework\UA::getColorScheme()) !== 'none') { $class_list[] = 'color_scheme_' . $color_scheme; } @@ -2687,42 +2687,6 @@ class Context { return self::$_instance->canonical_url; } - - /** - * Get the current color scheme (none, light, dark) - * - * @return string - */ - public static function getColorScheme(): string - { - if (isset($_COOKIE['rx_color_scheme']) && in_array($_COOKIE['rx_color_scheme'], ['light', 'dark'])) - { - return strval($_COOKIE['rx_color_scheme']); - } - else - { - return 'none'; - } - } - - /** - * Set the color scheme (none, light, dark) - * - * @param string $color_scheme - * @return void - */ - public static function setColorScheme(string $color_scheme) - { - if (in_array($color_scheme, ['light', 'dark'])) - { - $_COOKIE['rx_color_scheme'] = $color_scheme; - setcookie('rx_color_scheme', $color_scheme, time() + 86400 * 365, \RX_BASEURL, null, !!config('session.use_ssl_cookies')); - } - else - { - setcookie('rx_color_scheme', 'deleted', time() - 86400, \RX_BASEURL, null); - } - } } /* End of file Context.class.php */ /* Location: ./classes/context/Context.class.php */ diff --git a/common/framework/ua.php b/common/framework/ua.php index 9172e93f7..556f9410e 100644 --- a/common/framework/ua.php +++ b/common/framework/ua.php @@ -439,4 +439,40 @@ class UA return 'filename="' . preg_replace('/\./', '%2e', $filename, substr_count($filename, '.') - 1) . '"'; } } + + /** + * Get the current color scheme (auto, light, dark) + * + * @return string + */ + public static function getColorScheme(): string + { + if (isset($_COOKIE['rx_color_scheme']) && in_array($_COOKIE['rx_color_scheme'], ['light', 'dark'])) + { + return strval($_COOKIE['rx_color_scheme']); + } + else + { + return 'auto'; + } + } + + /** + * Set the color scheme (auto, light, dark) + * + * @param string $color_scheme + * @return void + */ + public static function setColorScheme(string $color_scheme) + { + if (in_array($color_scheme, ['light', 'dark'])) + { + $_COOKIE['rx_color_scheme'] = $color_scheme; + setcookie('rx_color_scheme', $color_scheme, time() + 86400 * 365, \RX_BASEURL, null, !!config('session.use_ssl_cookies')); + } + else + { + setcookie('rx_color_scheme', 'deleted', time() - 86400, \RX_BASEURL, null); + } + } } From 0237d5c759eb435687fdbbc3d8b7f5c823af7d23 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 13 Dec 2020 19:55:37 +0900 Subject: [PATCH 07/11] Auto-detect color scheme first, then override with user preference --- classes/context/Context.class.php | 2 +- common/js/common.js | 29 ++++++++++++++++++++--------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/classes/context/Context.class.php b/classes/context/Context.class.php index 3975ac018..c3e4410d0 100644 --- a/classes/context/Context.class.php +++ b/classes/context/Context.class.php @@ -2368,7 +2368,7 @@ class Context public static function getBodyClass() { $class_list = self::$_instance->body_class; - if (($color_scheme = Rhymix\Framework\UA::getColorScheme()) !== 'none') + if (($color_scheme = Rhymix\Framework\UA::getColorScheme()) !== 'auto') { $class_list[] = 'color_scheme_' . $color_scheme; } diff --git a/common/js/common.js b/common/js/common.js index bd9d0cb0b..67099e8d8 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -350,16 +350,11 @@ jQuery(function($) { }); /* Detect color scheme */ + var body_element = $('body'); var color_scheme_cookie = XE.cookie.get('rx_color_scheme'); - var color_scheme_check = (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) ? 'dark' : 'light'; - console.log(color_scheme_check); - if (color_scheme_cookie && color_scheme_cookie !== color_scheme_check) { - XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); - $('body').addClass('color_scheme_' + color_scheme_check).removeClass('color_scheme_' + (color_scheme_check === 'dark' ? 'light' : 'dark')); - } else if (color_scheme_check === 'dark') { - XE.cookie.set('rx_color_scheme', color_scheme_check, { path: window.XE.URI(default_url).pathname(), expires: 365 }); - $('body').addClass('color_scheme_' + color_scheme_check).removeClass('color_scheme_' + (color_scheme_check === 'dark' ? 'light' : 'dark')); - $('#rhymix_color_scheme').hide(); + var color_scheme_detected = (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) ? 'dark' : 'light'; + if (!color_scheme_cookie || (!body_element.hasClass('color_scheme_light') && !body_element.hasClass('color_scheme_dark'))) { + body_element.addClass('color_scheme_' + color_scheme_detected).removeClass('color_scheme_' + (color_scheme_detected === 'dark' ? 'light' : 'dark')); } /* Editor preview replacement */ @@ -779,6 +774,22 @@ function setLangType(lang_type) { XE.cookie.set('lang_type', lang_type, { path: baseurl, expires: 365 }); } +/* 색상 테마 변경 */ +function getColorScheme() { + if ($('body').hasClass('color_scheme_light')) { + return 'light'; + } else { + return 'dark'; + } +} +function setColorScheme(color_scheme) { + if (color_scheme !== 'dark') { + color_scheme = 'light'; + } + $('body').addClass('color_scheme_' + color_scheme).removeClass('color_scheme_' + (color_scheme === 'dark' ? 'light' : 'dark')); + XE.cookie.set('rx_color_scheme', color_scheme, { path: window.XE.URI(default_url).pathname(), expires: 365 }); +} + /* 미리보기 */ function doDocumentPreview(obj) { var fo_obj = obj; From 237f3b295dafcb1381a3339b3b2332961e555ded Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 13 Dec 2020 19:57:52 +0900 Subject: [PATCH 08/11] Unset rx_color_scheme cookie if an invalid value is set --- common/framework/ua.php | 1 + 1 file changed, 1 insertion(+) diff --git a/common/framework/ua.php b/common/framework/ua.php index 556f9410e..45ffae7ec 100644 --- a/common/framework/ua.php +++ b/common/framework/ua.php @@ -472,6 +472,7 @@ class UA } else { + unset($_COOKIE['rx_color_scheme']); setcookie('rx_color_scheme', 'deleted', time() - 86400, \RX_BASEURL, null); } } From 64c9c5ba902b252680bb6d2fd30f17f5bf412cb4 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 13 Dec 2020 19:59:26 +0900 Subject: [PATCH 09/11] Unset rx_color_scheme cookie if an invalid value is set (JS equivalent) --- common/js/common.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/common/js/common.js b/common/js/common.js index 67099e8d8..1fe7670f4 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -783,11 +783,12 @@ function getColorScheme() { } } function setColorScheme(color_scheme) { - if (color_scheme !== 'dark') { - color_scheme = 'light'; + if (color_scheme === 'dark' || color_scheme === 'light') { + $('body').addClass('color_scheme_' + color_scheme).removeClass('color_scheme_' + (color_scheme === 'dark' ? 'light' : 'dark')); + XE.cookie.set('rx_color_scheme', color_scheme, { path: window.XE.URI(default_url).pathname(), expires: 365 }); + } else { + XE.cookie.remove('rx_color_scheme', { path: window.XE.URI(default_url).pathname() }); } - $('body').addClass('color_scheme_' + color_scheme).removeClass('color_scheme_' + (color_scheme === 'dark' ? 'light' : 'dark')); - XE.cookie.set('rx_color_scheme', color_scheme, { path: window.XE.URI(default_url).pathname(), expires: 365 }); } /* 미리보기 */ From 380f779301ff197561e3d723e260e12595ec4e8d Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sun, 13 Dec 2020 20:00:53 +0900 Subject: [PATCH 10/11] Add unit tests for UA::getColorScheme() and UA::setColorScheme() --- tests/unit/framework/UATest.php | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/tests/unit/framework/UATest.php b/tests/unit/framework/UATest.php index 9c42e98e9..b24b218e7 100644 --- a/tests/unit/framework/UATest.php +++ b/tests/unit/framework/UATest.php @@ -347,4 +347,25 @@ class UATest extends \Codeception\TestCase\Test $this->assertEquals('filename="한글 filename.jpg"', Rhymix\Framework\UA::encodeFilenameForDownload('한글 filename.jpg', 'Safari/5.0 Version/5.0')); $this->assertEquals('filename="한글 filename.jpg"', Rhymix\Framework\UA::encodeFilenameForDownload('한글 filename.jpg', 'Linux; Android 5.1.1; Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36')); } + + public function testGetSetColorScheme() + { + $_COOKIE['rx_color_scheme'] = 'light'; + $this->assertEquals('light', Rhymix\Framework\UA::getColorScheme()); + $_COOKIE['rx_color_scheme'] = 'dark'; + $this->assertEquals('dark', Rhymix\Framework\UA::getColorScheme()); + $_COOKIE['rx_color_scheme'] = 'none'; + $this->assertEquals('auto', Rhymix\Framework\UA::getColorScheme()); + $_COOKIE['rx_color_scheme'] = 'invalid'; + $this->assertEquals('auto', Rhymix\Framework\UA::getColorScheme()); + + Rhymix\Framework\UA::setColorScheme('light'); + $this->assertEquals('light', $_COOKIE['rx_color_scheme']); + Rhymix\Framework\UA::setColorScheme('dark'); + $this->assertEquals('dark', $_COOKIE['rx_color_scheme']); + Rhymix\Framework\UA::setColorScheme('auto'); + $this->assertNull($_COOKIE['rx_color_scheme'] ?? null); + Rhymix\Framework\UA::setColorScheme('invalid'); + $this->assertNull($_COOKIE['rx_color_scheme'] ?? null); + } } From a4f698c9c62c006fbb9b6dbdb0576ba316655d69 Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Mon, 14 Dec 2020 22:43:26 +0900 Subject: [PATCH 11/11] Return to auto-detected color scheme if manually set color scheme is removed --- common/js/common.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/common/js/common.js b/common/js/common.js index 1fe7670f4..df15e3adc 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -788,6 +788,8 @@ function setColorScheme(color_scheme) { XE.cookie.set('rx_color_scheme', color_scheme, { path: window.XE.URI(default_url).pathname(), expires: 365 }); } else { XE.cookie.remove('rx_color_scheme', { path: window.XE.URI(default_url).pathname() }); + color_scheme = (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) ? 'dark' : 'light'; + $('body').addClass('color_scheme_' + color_scheme).removeClass('color_scheme_' + (color_scheme === 'dark' ? 'light' : 'dark')); } }