Skip to content

Commit

Permalink
fix(core): skin preference support for Safari on iOS < 12.2 (#680)
Browse files Browse the repository at this point in the history 
* Update skins.citizen.preferences.js

* Update skins.citizen.preferences.js

* Update inline.js

* Update SkinHooks.php

* Update skins.citizen.preferences.less

* Update variables.less

* Update theme.less

* Update theme.less

* Update skins.citizen.preferences.js

* Update skins.citizen.preferences.js

* Update skins.citizen.preferences.js

* Update skin.js
  • Loading branch information
@Dringsim
Dringsim committed Jul 3, 2023
1 parent a1139e7 commit 2891d04
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 23 deletions.
2 changes: 1 addition & 1 deletion includes/Hooks/SkinHooks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ public function onBeforePageDisplay( $out, $skin ): void {
$script = sprintf(
'<script%s>%s</script>',
$nonce !== false ? sprintf( ' nonce="%s"', $nonce ) : '',
'window.applyPref=()=>{const a="skin-citizen-",b="skin-citizen-theme",c=a=>window.localStorage.getItem(a),d=c("skin-citizen-theme"),e=()=>{const d={fontsize:"font-size",pagewidth:"--width-layout",lineheight:"--line-height"},e=()=>["auto","dark","light"].map(b=>a+b),f=a=>{let b=document.getElementById("citizen-style");null===b&&(b=document.createElement("style"),b.setAttribute("id","citizen-style"),document.head.appendChild(b)),b.textContent=`:root{${a}}`};try{const g=c(b);let h="";if(null!==g){const b=document.documentElement;b.classList.remove(...e(a)),b.classList.add(a+g)}for(const[b,e]of Object.entries(d)){const d=c(a+b);null!==d&&(h+=`${e}:${d};`)}h&&f(h)}catch(a){}};if("auto"===d){const a=window.matchMedia("(prefers-color-scheme: dark)"),c=a.matches?"dark":"light",d=(a,b)=>window.localStorage.setItem(a,b);d(b,c),e(),a.addEventListener("change",()=>{e()}),d(b,"auto")}else e()},(()=>{window.applyPref()})();'
'window.applyPref=()=>{const a="skin-citizen-",b="skin-citizen-theme",c=a=>window.localStorage.getItem(a),d=c("skin-citizen-theme"),e=()=>{const d={fontsize:"font-size",pagewidth:"--width-layout",lineheight:"--line-height"},e=()=>["auto","dark","light"].map(b=>a+b),f=a=>{let b=document.getElementById("citizen-style");null===b&&(b=document.createElement("style"),b.setAttribute("id","citizen-style"),document.head.appendChild(b)),b.textContent=`:root{${a}}`};try{const g=c(b);let h="";if(null!==g){const b=document.documentElement;b.classList.remove(...e(a)),b.classList.add(a+g)}for(const[b,e]of Object.entries(d)){const d=c(a+b);null!==d&&(h+=`${e}:${d};`)}h&&f(h)}catch(a){}};if("auto"===d){const a=window.matchMedia("(prefers-color-scheme: dark)"),c=a.matches?"dark":"light",d=(a,b)=>window.localStorage.setItem(a,b);d(b,c),e(),a.addListener(()=>{e()}),d(b,"auto")}else e()},(()=>{window.applyPref()})();'
);
// phpcs:enable Generic.Files.LineLength.TooLong

Expand Down
18 changes: 16 additions & 2 deletions resources/skins.citizen.preferences/skins.citizen.preferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ function getPref() {
function setPref( event ) {
const
// eslint-disable-next-line compat/compat
formData = Object.fromEntries( new FormData( event.currentTarget ) ),
formData = Object.fromEntries( new FormData( document.getElementById( CLASS + '-form' ) ) ),
currentPref = convertForForm( getPref() ),
newPref = {
theme: formData[ CLASS + '-theme' ],
Expand Down Expand Up @@ -227,19 +227,23 @@ function togglePanel() {
toggle = document.getElementById( CLASS + '-toggle' ),
panel = document.getElementById( CLASS + '-panel' ),
form = document.getElementById( CLASS + '-form' ),
themeOption = document.getElementById( CLASS + '-theme' ),
resetButton = document.getElementById( CLASS + '-resetbutton' );

if ( !panel.classList.contains( CLASS_PANEL_ACTIVE ) ) {
panel.classList.add( CLASS_PANEL_ACTIVE );
toggle.setAttribute( 'aria-expanded', true );
form.addEventListener( 'input', setPref );
// Some browser doesn't fire input events when checking radio buttons
themeOption.addEventListener( 'click', setPref );
resetButton.addEventListener( 'click', resetPref );
window.addEventListener( 'click', dismissOnClickOutside );
window.addEventListener( 'keydown', dismissOnEscape );
} else {
panel.classList.remove( CLASS_PANEL_ACTIVE );
toggle.setAttribute( 'aria-expanded', false );
form.removeEventListener( 'input', setPref );
themeOption.removeEventListener( 'click', setPref );
resetButton.removeEventListener( 'click', resetPref );
window.removeEventListener( 'click', dismissOnClickOutside );
window.removeEventListener( 'keydown', dismissOnEscape );
Expand Down Expand Up @@ -317,6 +321,7 @@ function initPanel( event ) {

togglePanel();
event.currentTarget.addEventListener( 'click', togglePanel );
event.currentTarget.removeEventListener( 'click', initPanel );
}

/**
Expand Down Expand Up @@ -358,8 +363,17 @@ function storageAvailable( type ) {
* @return {void}
*/
function initPref( window ) {
// Object.fromEntries() polyfill https://github.com/feross/fromentries
// MIT. Copyright (c) Feross Aboukhadijeh.
if ( typeof Object.fromEntries !== 'function' ) {
return;
Object.defineProperty( Object, 'fromEntries', {
value( iterable ) {
return Array.from( iterable ).reduce( ( obj, [key, val] ) => {
obj[key] = val;
return obj;
}, {});
},
});
}

if ( storageAvailable( 'localStorage' ) ) {
Expand Down
4 changes: 2 additions & 2 deletions resources/skins.citizen.preferences/skins.citizen.preferences.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@
}

&-dark {
background: ~'hsl( var( --color-primary__h ) 20% 10% )';
color: ~'hsl( var( --color-primary__h ) 10% 75% )';
background: ~'hsl( var( --color-primary__h ), 20%, 10% )';
color: ~'hsl( var( --color-primary__h ), 10%, 75% )';
}
}

Expand Down
2 changes: 1 addition & 1 deletion resources/skins.citizen.scripts/inline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ window.applyPref = () => {
apply();

// Attach listener for future changes
prefersDark.addEventListener( 'change', () => {
prefersDark.addListener( () => {
apply();
} );

Expand Down
2 changes: 1 addition & 1 deletion resources/skins.citizen.scripts/skin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ function main( window ) {
} );

// Preference module
if ( config.wgCitizenEnablePreferences === true ) {
if ( config.wgCitizenEnablePreferences === true && typeof document.createElement( 'div' ).prepend === 'function' ) {
mw.loader.load( 'skins.citizen.preferences' );
}

Expand Down
28 changes: 14 additions & 14 deletions resources/skins.citizen.styles/common/theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
--box-shadow-card: @box-shadow-card;
--box-shadow-dialog: @box-shadow-dialog;

--surface-shadow: var( --color-primary__h ) 10% 20%;
--surface-shadow: var( --color-primary__h ), 10%, 20%;
--shadow-strength: 0.02;
}

Expand All @@ -54,26 +54,26 @@ a {
:root.skin-citizen-dark {
--color-primary__l: 60%;

--color-surface-0: ~'hsl( var( --color-primary__h ) 20% 10% )';
--color-surface-1: ~'hsl( var( --color-primary__h ) 25% 12% )';
--color-surface-2: ~'hsl( var( --color-primary__h ) 25% 15% )';
--color-surface-3: ~'hsl( var( --color-primary__h ) 15% 20% )';
--color-surface-4: ~'hsl( var( --color-primary__h ) 15% 25% )';
--color-surface-0: ~'hsl( var( --color-primary__h ), 20%, 10% )';
--color-surface-1: ~'hsl( var( --color-primary__h ), 25%, 12% )';
--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 15% )';
--color-surface-3: ~'hsl( var( --color-primary__h ), 15%, 20% )';
--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 25% )';

--color-base--emphasized: ~'hsl( var( --color-primary__h ) 80% 95% )';
--color-base: ~'hsl( var( --color-primary__h ) 25% 80% )';
--color-base--subtle: ~'hsl( var( --color-primary__h ) 25% 65% )';
--color-base--emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
--color-base--subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';

--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 20% )';

--background-color-overlay: ~'hsla( var( --color-primary__h ) 20% 10% / 95% )';
--background-color-overlay--lighter: ~'hsl( var( --color-primary__h ) 20% 10% / 60% )';
--background-color-overlay: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.95 )';
--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.6 )';

--color-surface-2--hover: ~'hsl( var( --color-primary__h ) 30% 19% )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ) 30% 11% )';
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 30%, 19% )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 11% )';

--surface-shadow: var( --color-primary__h ) 50% 3%;
--surface-shadow: var( --color-primary__h ), 50%, 3%;
--shadow-strength: 0.8;

// FIXME: Browsers seem to treat GRAD differently, disabling for now
Expand Down
4 changes: 2 additions & 2 deletions resources/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,8 +243,8 @@
/* Box shadow */
// Based on https://web.dev/building-a-color-scheme/#rad-shadow
// TODO: Refactor this to support filter drop-shadow
@box-shadow-card: 0 2.8px 2.2px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01))', 0 12.5px 10px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 100px 80px -4px ~'hsl(var(--surface-shadow) / var(--shadow-strength))';
@box-shadow-dialog: 0 2.8px 2.2px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01))', 0 12.5px 10px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 100px 80px ~'hsl(var(--surface-shadow) / var(--shadow-strength))';
@box-shadow-card: 0 2.8px 2.2px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px -4px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
@box-shadow-dialog: 0 2.8px 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';

@dark-background-color-icon: rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.8 );
Expand Down

0 comments on commit 2891d04

Please sign in to comment.