Skip to content

Commit

Permalink
New font size settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmertes
gmertes committed Mar 7, 2024
1 parent 67bf9b9 commit 830426b
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 95 deletions.
32 changes: 19 additions & 13 deletions src/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,28 +141,40 @@ footer {

.font-size {
position: relative;
height: 30px;
width: 30px;
height: 25px;
width: 25px;
border: 2px solid hsl(0, 0%, 70%);
color: hsl(0, 0%, 30%);
border-radius: 21px;
font-weight: bold;
background-color: hsl(0, 0%, 98%);
border-radius: 25px;
font-size: 25px;
font-weight: normal;
align-items: stretch;
display: inline-flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.font-size-indicator {
height: 35px;
width: 35px;
border: 1px solid hsl(0, 0%, 70%);
background-color: hsl(0, 0%, 100%);
border-radius: 10px;
}
.font-size + .font-size {
margin-left: 10px;
margin-left: 7px;
}

.font-size:hover,
.font-size.active {
.action:hover{
border-color: hsl(0, 70%, 50%);
color: hsl(0, 70%, 50%);
cursor: pointer;
}
.action:active {
border-color: hsl(0, 84%, 80%);
color: hsl(0, 91%, 86%);
}

.settings-secondary-lang div span {
visibility: hidden;
Expand Down Expand Up @@ -264,9 +276,3 @@ footer {
#secondary-color-ff .picker_wrapper.popup {
box-shadow: 0 0 10px 1px rgb(0 0 0 / 80%);
}

.font-size-xs { font-size: 9px; }
.font-size-s { font-size: 11px; }
.font-size-m { font-size: 13px; }
.font-size-l { font-size: 15px; }
.font-size-xl { font-size: 17px; }
16 changes: 6 additions & 10 deletions src/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,9 @@ <h2>Layout</h2>
<h2>Primary Subtitles</h2>
<p>Size</p>
<div class="font-size-list">
<div data-id="0" class="font-size font-size-xs">字</div>
<div data-id="1" class="font-size font-size-s">字</div>
<div data-id="2" class="font-size font-size-m">字</div>
<div data-id="3" class="font-size font-size-l">字</div>
<div data-id="4" class="font-size font-size-xl">字</div>
<div id="primary-minus" class="action font-size">－</div>
<div class="font-size-indicator font-size"><div id="primary-font-indicator">A</div></div>
<div id="primary-plus" class="action font-size">＋</div>
</div>
<p>Text color</p>
<div class="tooltip">
Expand All @@ -58,11 +56,9 @@ <h2>Primary Subtitles</h2>
<h2>Secondary Subtitles</h2>
<p>Size</p>
<div class="font-size-list">
<div data-id="0" class="font-size font-size-xs">A</div>
<div data-id="1" class="font-size font-size-s">A</div>
<div data-id="2" class="font-size font-size-m">A</div>
<div data-id="3" class="font-size font-size-l">A</div>
<div data-id="4" class="font-size font-size-xl">A</div>
<div id="secondary-minus" class="action font-size">－</div>
<div class="font-size-indicator font-size"><div id="secondary-font-indicator">A</div></div>
<div id="secondary-plus" class="action font-size">＋</div>
</div>
<p>Text color</p>
<div class="tooltip">
Expand Down
96 changes: 24 additions & 72 deletions src/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ port.onMessage.addListener((msg) => {

// -----------------------------------------------------------------------------

const minimumFontScale = 0.3;
const maximumFontScale = 2.5;

const layoutPresets = [
{ // compact
upperBaselinePos: 0.20,
Expand All @@ -45,52 +48,6 @@ const layoutPresets = [
},
];

const primarySizePresets = [
{ // x-small
primaryImageScale: 0.55,
primaryTextScale: 0.75,
},
{ // small
primaryImageScale: 0.65,
primaryTextScale: 0.85,
},
{ // medium (default)
primaryImageScale: 0.75,
primaryTextScale: 0.95,
},
{ // large
primaryImageScale: 0.85,
primaryTextScale: 1.05,
},
{ // x-large
primaryImageScale: 0.95,
primaryTextScale: 1.10,
},
];

const secondarySizePresets = [
{ // x-small
secondaryImageScale: 0.35,
secondaryTextScale: 0.85,
},
{ // small
secondaryImageScale: 0.42,
secondaryTextScale: 0.92,
},
{ // medium (default)
secondaryImageScale: 0.50,
secondaryTextScale: 1.00,
},
{ // large
secondaryImageScale: 0.60,
secondaryTextScale: 1.10,
},
{ // x-large
secondaryImageScale: 0.80,
secondaryTextScale: 1.30,
},
];

const secondaryLanguagePresets = [
{
secondaryLanguageMode: 'disabled',
Expand Down Expand Up @@ -129,21 +86,13 @@ function renderActiveSettings() {
elem && elem.classList.add('active');
}
// primary font size
const primaryFontSizeId = primarySizePresets.findIndex(k => (k.primaryImageScale === settings.primaryImageScale));
if (primaryFontSizeId !== -1) {
elem = document.querySelector(`.settings-primary-font-size div.font-size[data-id="${primaryFontSizeId}"]`);
elem && elem.classList.add('active');
}
document.getElementById('primary-font-indicator').style.scale = settings.primaryTextScale * 0.8;

// primary font color
document.getElementById('primary-color').value = settings.primaryTextColor || "#ffffff";

// secondary font size
const secondaryFontSizeId = secondarySizePresets.findIndex(k => (k.secondaryImageScale === settings.secondaryImageScale));
if (secondaryFontSizeId !== -1) {
elem = document.querySelector(`.settings-secondary-font-size div.font-size[data-id="${secondaryFontSizeId}"]`);
elem && elem.classList.add('active');
}
document.getElementById('secondary-font-indicator').style.scale = settings.secondaryTextScale * 0.8;

// secondary font color
document.getElementById('secondary-color').value = settings.secondaryTextColor || "#ffffff";
Expand All @@ -167,18 +116,27 @@ function updateLayout(layoutId) {
renderActiveSettings();
}

function updatePrimaryFontSize(fontSizeId) {
if (fontSizeId < 0 || fontSizeId >= primarySizePresets.length) return;
function updatePrimaryFontSize(action) {
if (action === "+") {
settings.primaryTextScale = Math.min(maximumFontScale, settings.primaryTextScale + 0.1);
} else if (action === "-"){
settings.primaryTextScale = Math.max(minimumFontScale, settings.primaryTextScale - 0.1);
} else return;

settings = Object.assign(settings, primarySizePresets[fontSizeId]);
settings.primaryImageScale = 0.6 * settings.primaryTextScale;
uploadSettings();
renderActiveSettings();
}

function updateSecondaryFontSize(fontSizeId) {
if (fontSizeId < 0 || fontSizeId >= secondarySizePresets.length) return;
function updateSecondaryFontSize(action) {
if (action === "+") {
settings.secondaryTextScale = Math.min(maximumFontScale, settings.secondaryTextScale + 0.1);
} else if (action === "-"){
settings.secondaryTextScale = Math.max(minimumFontScale, settings.secondaryTextScale - 0.1);
} else return;

settings.secondaryImageScale = 0.6 * settings.secondaryTextScale;

settings = Object.assign(settings, secondarySizePresets[fontSizeId]);
uploadSettings();
renderActiveSettings();
}
Expand Down Expand Up @@ -224,17 +182,11 @@ window.addEventListener('load', evt => {
div.addEventListener('click', evt => updateLayout(layoutId), false);
});

const primarySizes = document.querySelectorAll('.settings-primary-font-size div.font-size');
[].forEach.call(primarySizes, div => {
const fontSizeId = parseInt(div.getAttribute('data-id'));
div.addEventListener('click', evt => updatePrimaryFontSize(fontSizeId), false);
});
document.getElementById("primary-plus").addEventListener('click', () => updatePrimaryFontSize("+"));
document.getElementById("primary-minus").addEventListener('click', () => updatePrimaryFontSize("-"));

const secondarySizes = document.querySelectorAll('.settings-secondary-font-size div.font-size');
[].forEach.call(secondarySizes, div => {
const fontSizeId = parseInt(div.getAttribute('data-id'));
div.addEventListener('click', evt => updateSecondaryFontSize(fontSizeId), false);
});
document.getElementById("secondary-plus").addEventListener('click', () => updateSecondaryFontSize("+"));
document.getElementById("secondary-minus").addEventListener('click', () => updateSecondaryFontSize("-"));

const primaryColorField = document.getElementById('primary-color');
primaryColorField.onchange = evt => {
Expand Down

0 comments on commit 830426b

Please sign in to comment.