malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Refactor chapter font colors

Browse Source
This commit is contained in:
Tetrakern 2023-02-23 18:41:14 +01:00
parent a7906828a4
commit aca556262a
6 changed files with 63 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
FILTERS.md
View File

@ -278,6 +278,14 @@ Filters the return array of the `fictioneer_get_fonts()` function, used to set u
---
### `apply_filters( 'fictioneer_filter_font_colors', $colors )`
Filters the return array of the `fictioneer_get_font_colors()` function, used to set up the chapter font color options.
**Parameters:**
* $fonts (array) – Numeric array of color items with CSS name (`css`) and display name (`name`).
---
### `apply_filters( 'fictioneer_filter_header_image', $header_image_url, $post_id )`
Filters the URL of the header image in the `header.php` template.

3
includes/functions/_theme_setup.php
View File

@ -567,14 +567,15 @@ function fictioneer_add_custom_scripts() {
// Enqueue application
wp_enqueue_script( 'fictioneer-application-scripts' );
// Localize application
wp_localize_script( 'fictioneer-application-scripts', 'fictioneer_ajax', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'ttl' => FICTIONEER_AJAX_TTL,
'login_ttl' => FICTIONEER_AJAX_LOGIN_TTL,
'post_debounce_rate' => FICTIONEER_AJAX_POST_DEBOUNCE_RATE
));
wp_localize_script( 'fictioneer-application-scripts', 'fictioneer_fonts', fictioneer_get_fonts() );
wp_localize_script( 'fictioneer-application-scripts', 'fictioneer_font_colors', fictioneer_get_font_colors() );
// Enqueue mobile menu
wp_enqueue_script( 'fictioneer-mobile-menu-scripts' );

34
includes/functions/_utility.php
View File

@ -1491,4 +1491,38 @@ if ( ! function_exists( 'fictioneer_get_fonts' ) ) {
}
}
// =============================================================================
// GET FONT COLORS
// =============================================================================
if ( ! function_exists( 'fictioneer_get_font_colors' ) ) {
/**
* Returns array of font color items
*
* @since 5.1.1
*
* @return array Font items (css and name).
*/
function fictioneer_get_font_colors() {
// Setup default font colors
$colors = array(
['css' => 'var(--fg-tinted)', 'name' => _x( 'Tinted', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-500)', 'name' => _x( 'Baseline', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-600)', 'name' => _x( 'Low', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-700)', 'name' => _x( 'Lower', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-800)', 'name' => _x( 'Lowest', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-400)', 'name' => _x( 'High', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-300)', 'name' => _x( 'Higher', 'Chapter font color name.', 'fictioneer' )],
['css' => 'var(--fg-200)', 'name' => _x( 'Highest', 'Chapter font color name.', 'fictioneer' )],
['css' => '#fff', 'name' => _x( 'White', 'Chapter font color name.', 'fictioneer' )],
['css' => '#999', 'name' => _x( 'Gray', 'Chapter font color name.', 'fictioneer' )],
['css' => '#000', 'name' => _x( 'Black', 'Chapter font color name.', 'fictioneer' )]
);
// Apply filters and return
return apply_filters( 'fictioneer_filter_font_colors', $colors );
}
}
?>

2
js/chapter.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
partials/_modal-formatting.php
View File

@ -87,12 +87,11 @@
<div class="select-wrapper">
<select id="reader-settings-font-color-select" name="colors">
<?php
$colors = ['Tinted', 'Baseline', 'Low', 'Lower', 'Lowest', 'High', 'Higher', 'Highest', 'White', 'Gray', 'Black'];
$color_names = [__( 'Tinted', 'fictioneer' ), __( 'Baseline', 'fictioneer' ), __( 'Low', 'fictioneer' ), __( 'Lower', 'fictioneer' ), __( 'Lowest', 'fictioneer' ), __( 'High', 'fictioneer' ), __( 'Higher', 'fictioneer' ), __( 'Highest', 'fictioneer' ), __( 'White', 'fictioneer' ), __( 'Gray', 'fictioneer' ), __( 'Black', 'fictioneer' )];
$colors = fictioneer_get_font_colors();
$length = count( $colors );
for ( $i = 0; $i < $length; $i++ ) {
echo '<option value="' . $i . '">' . $color_names[ $i ] . '</option>';
echo '<option value="' . $i . '">' . $colors[ $i ]['name'] . '</option>';
}
?>
</select>

59
src/js/chapter.js
View File

@ -2,38 +2,11 @@
// SETUP
// =============================================================================
const /** @const {String[]} */ fcn_fontAlternatives = { 'Helvetica Neue': 'Arial', 'Cormorant Garamond': 'Garamond' },
/** @const {Number} */ fcn_letterSpacingDefault = 0.0,
const /** @const {Number} */ fcn_letterSpacingDefault = 0.0,
/** @const {Number} */ fcn_paragraphSpacingDefault = 1.5,
/** @const {Number} */ fcn_lineHeightDefault = 1.7,
/** @const {Number} */ fcn_siteWidthDefault = fcn_theRoot.dataset.siteWidthDefault ?? '960',
/** @const {HTMLElement} */ fcn_chapterFormatting = _$('.chapter-formatting'),
/** @const {String[]} */ fcn_colorList = [
'var(--fg-tinted)',
'var(--fg-500)',
'var(--fg-600)',
'var(--fg-700)',
'var(--fg-800)',
'var(--fg-400)',
'var(--fg-300)',
'var(--fg-200)',
'#fff',
'#999',
'#000'
],
/** @const {String[]} */ fcn_colorNames = [
'Tinted',
'Baseline',
'Low',
'Lower',
'Lowest',
'High',
'Higher',
'Highest',
'White',
'Gray',
'Black'
];
/** @const {HTMLElement} */ fcn_chapterFormatting = _$('.chapter-formatting');
// Initialize
var /** @type {Object} */ fcn_formatting = fcn_getFormatting();
@ -350,8 +323,8 @@ function fcn_getFormatting() {
function fcn_defaultFormatting() {
return {
'font-saturation': 0,
'font-color': fcn_colorList[0],
'font-color-name': fcn_colorNames[0],
'font-color': fictioneer_font_colors[0].css,
'font-color-name': fictioneer_font_colors[0].name,
'font-name': fictioneer_fonts[0].css,
'font-size': 100,
'letter-spacing': fcn_letterSpacingDefault,
@ -487,15 +460,15 @@ const /** @const {HTMLElement} */ fcn_fontColorReset = _$$$('reader-settings-fon
function fcn_updateFontColor(color, name, save = true) {
// Update associated elements
fcn_fontColorReset.classList.toggle('_modified', name != fcn_colorNames[0]);
fcn_fontColorSelect.value = fcn_colorList.indexOf(color);
fcn_fontColorReset.classList.toggle('_modified', color > 0);
fcn_fontColorSelect.value = color;
// Update inline style
fcn_chapterFormatting.style.setProperty('--text-chapter', color);
fcn_chapterFormatting.style.setProperty('--text-chapter', fictioneer_font_colors[color].css);
// Update local storage
fcn_formatting['font-color'] = color;
fcn_formatting['font-color-name'] = name;
fcn_formatting['font-color'] = fictioneer_font_colors[color].css;
fcn_formatting['font-color-name'] = fictioneer_font_colors[color].name;
if (save) fcn_setFormatting(fcn_formatting);
}
@ -507,16 +480,16 @@ function fcn_updateFontColor(color, name, save = true) {
*/
function fcn_setFontColor(step = 1) {
let index = (fcn_fontColorSelect.selectedIndex + parseInt(step)) % fcn_colorNames.length;
index = index < 0 ? fcn_colorNames.length - 1 : index;
fcn_updateFontColor(fcn_colorList[index], fcn_colorNames[index]);
let index = (fcn_fontColorSelect.selectedIndex + parseInt(step)) % fictioneer_font_colors.length;
index = index < 0 ? fictioneer_font_colors.length - 1 : index;
fcn_updateFontColor(index);
}
// Listen for click on font color reset button
fcn_fontColorReset.onclick = () => { fcn_updateFontColor(fcn_colorList[0], fcn_colorNames[0]) }
fcn_fontColorReset.onclick = () => { fcn_updateFontColor(0) }
// Listen for font color select input
fcn_fontColorSelect.onchange = (e) => { fcn_updateFontColor(fcn_colorList[e.target.value], fcn_colorNames[e.target.value]); }
fcn_fontColorSelect.onchange = (e) => { fcn_updateFontColor(e.target.value); }
// Listen for font color step buttons
_$$('.font-color-stepper').forEach(element => {
@ -525,8 +498,8 @@ _$$('.font-color-stepper').forEach(element => {
});
});
// Initialize
fcn_updateFontColor(fcn_formatting['font-color'], fcn_formatting['font-color-name'], false);
// Initialize (using the CSS name makes it independent from the array position)
fcn_updateFontColor(fictioneer_font_colors.findIndex((item) => { return item.css == fcn_formatting['font-color'] }), false);
// =============================================================================
// CHAPTER FORMATTING: FONT FAMILY