aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/css/display.css204
-rw-r--r--ext/data/schemas/options-schema.json5
-rw-r--r--ext/display-templates.html36
-rw-r--r--ext/js/data/options-util.js12
-rw-r--r--ext/js/display/display-generator.js20
-rw-r--r--ext/js/display/display.js1
-rw-r--r--ext/settings.html16
7 files changed, 225 insertions, 69 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index 053e457c..148200b2 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -683,7 +683,6 @@ button.action-button[data-icon=source-term]::before {
border: none;
border-right: none;
font-size: 1em;
- vertical-align: middle;
margin: calc(1em / var(--font-size-no-units)) 0.375em calc(1em / var(--font-size-no-units)) 0;
}
.tag-label {
@@ -702,9 +701,14 @@ button.action-button[data-icon=source-term]::before {
font-weight: var(--tag-font-weight);
}
.tag-body {
- display: block;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
position: relative;
padding: 0 0.375em 0 0.375em;
+ border-radius: var(--tag-border-radius);
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
.tag-body::before {
content: '';
@@ -715,10 +719,10 @@ button.action-button[data-icon=source-term]::before {
bottom: 0;
right: 0;
border-radius: var(--tag-border-radius);
- border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
- border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
+ border: var(--tag-border-size) var(--tag-border-style) var(--tag-color);
+ border-left: none;
pointer-events: none;
}
.tag-body-content {
@@ -1069,37 +1073,16 @@ button.action-button[data-icon=source-term]::before {
/* Frequencies */
-.frequency-group-list {
- margin: 0;
- padding: 0 0 0 var(--list-padding1);
- list-style-type: decimal;
-}
-.frequency-group-list[data-count='0'],
-.frequency-group-list[data-count='1'] {
- padding-left: 0;
- list-style-type: none;
-}
-.frequency-list {
- margin: 0;
- padding: 0 0 0 var(--list-padding2);
- list-style-type: circle;
-}
-.frequency-list[data-count='0'],
-.frequency-list[data-count='1'] {
- padding-left: 0;
- list-style-type: none;
+.frequency-group-item {
+ display: inline;
}
-.frequency-group-item::marker,
-.frequency-item::marker {
- color: var(--text-color-light3);
+.frequency-item {
+ display: inline;
}
.frequency-disambiguation {
color: var(--text-color-light3);
padding-right: 0.25em;
}
-.frequency-separator::before {
- content: '';
-}
.frequency-disambiguation-separator::before {
content: ':';
}
@@ -1113,6 +1096,11 @@ button.action-button[data-icon=source-term]::before {
display: inline;
font-size: 1em;
}
+.frequency-body::after {
+ white-space: pre-wrap;
+ display: inline;
+ color: var(--text-color-light3);
+}
.entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
.entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation,
.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
@@ -1125,33 +1113,155 @@ button.action-button[data-icon=source-term]::before {
.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
display: none;
}
-:root[data-glossary-layout-mode=compact] .frequency-group-list,
-:root[data-glossary-layout-mode=compact] .frequency-list,
-.frequency-list[data-count='1'] {
+:root[data-frequency-display-mode=tags] .frequency-group-tag,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag {
+ margin: 0;
display: inline;
- list-style: none;
- padding-left: 0;
}
-:root[data-glossary-layout-mode=compact] .frequency-group-item {
- display: inline-block;
- margin-right: 1em;
+:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-label,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-label {
+ display: none;
}
-:root[data-glossary-layout-mode=compact] .entry-body-section[data-section-type=frequencies] {
- margin-right: -1em;
+:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body {
+ display: inline;
+ padding: 0;
}
-:root[data-glossary-layout-mode=compact] .frequency-item,
-.frequency-list[data-count='1'] .frequency-item {
+:root[data-frequency-display-mode=tags] .frequency-group-tag>.tag-body::before,
+:root[data-frequency-display-mode=split-tags] .frequency-group-tag>.tag-body::before {
+ display: none;
+}
+:root[data-frequency-display-mode=tags] .frequency-list,
+:root[data-frequency-display-mode=split-tags] .frequency-list {
+ display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-tag,
+:root[data-frequency-display-mode=inline-list] .frequency-tag,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag {
+ margin: 0;
+ display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-tag>.tag-label,
+:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-label,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-label,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-label {
+ display: none;
+}
+:root[data-frequency-display-mode=list] .frequency-tag>.tag-body,
+:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body {
+ display: inline;
+ padding: 0;
+}
+:root[data-frequency-display-mode=list] .frequency-tag>.tag-body::before,
+:root[data-frequency-display-mode=inline-list] .frequency-tag>.tag-body::before,
+:root[data-frequency-display-mode=tags-grouped] .frequency-tag>.tag-body::before,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-tag>.tag-body::before {
+ display: none;
+}
+:root[data-frequency-display-mode=list] .frequency-body,
+:root[data-frequency-display-mode=inline-list] .frequency-body,
+:root[data-frequency-display-mode=tags-grouped] .frequency-body,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-body {
display: inline-block;
}
-:root[data-glossary-layout-mode=compact] .frequency-item:not(:first-child)::before,
-.frequency-list[data-count='1'] .frequency-item:not(:first-child)::before {
- white-space: pre-wrap;
+:root[data-frequency-display-mode=inline-list] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
+:root[data-frequency-display-mode=tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after,
+:root[data-frequency-display-mode=split-tags-grouped] .frequency-item:not(:last-child)>.frequency-tag>.tag-body>.frequency-body::after {
content: var(--compact-list-separator);
- display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-body::before,
+:root[data-frequency-display-mode=inline-list] .frequency-group-tag>.tag-body::before {
+ display: none;
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag.tag.tag-has-body>.tag-label,
+:root[data-frequency-display-mode=inline-list] .frequency-group-tag.tag.tag-has-body>.tag-label {
+ border-radius: var(--tag-border-radius);
+}
+:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body::before {
+ display: none;
+}
+:root[data-frequency-display-mode=tags] .frequency-tag>.tag-body {
+ background-color: var(--tag-color);
+ padding-left: 0;
+}
+:root[data-frequency-display-mode=tags] .frequency-body {
+ font-size: var(--tag-font-size);
+ font-weight: var(--tag-font-weight);
+ color: var(--tag-text-color);
+}
+:root[data-frequency-display-mode=tags] .frequency-tag>.tag-label>.tag-label-content::after {
+ content: ':';
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body::before {
+ display: none;
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-body {
+ background-color: var(--tag-color);
+ padding-left: 0;
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-list {
+ font-size: var(--tag-font-size);
+ font-weight: var(--tag-font-weight);
+ color: var(--tag-text-color);
+}
+:root[data-frequency-display-mode=tags-grouped] .frequency-group-tag>.tag-label>.tag-label-content::after {
+ content: ':';
+}
+:root[data-frequency-display-mode=tags] .frequency-disambiguation,
+:root[data-frequency-display-mode=tags-grouped] .frequency-disambiguation,
+:root[data-frequency-display-mode=tags] .frequency-body::after,
+:root[data-frequency-display-mode=tags-grouped] .frequency-body::after {
+ color: inherit;
+ font-weight: normal;
+ opacity: 0.75;
+}
+:root[data-frequency-display-mode=list] .frequency-group-list {
+ list-style-type: decimal;
+ padding: 0 0 0 var(--list-padding1);
+}
+:root[data-frequency-display-mode=list] .frequency-group-item {
+ display: list-item;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item::marker {
+ color: var(--text-color-light3);
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag {
+ display: block;
+}
+:root[data-frequency-display-mode=list] .frequency-group-tag>.tag-label {
+ display: inline-flex;
+}
+:root[data-frequency-display-mode=list] .frequency-list {
+ list-style-type: circle;
+ padding: 0 0 0 var(--list-padding2);
+}
+:root[data-frequency-display-mode=list] .frequency-item {
+ display: list-item;
+}
+:root[data-frequency-display-mode=list] .frequency-item::marker {
color: var(--text-color-light3);
}
-:root[data-glossary-layout-mode=compact] .frequency-tag-list,
-.frequency-group-item[data-count='1'] .frequency-tag-list {
+:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1'] {
+ list-style-type: none;
+ padding-left: 0;
+}
+:root[data-frequency-display-mode=list] .frequency-group-list[data-count='1']>.frequency-group-item {
+ display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body {
+ display: inline-flex;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1']>.frequency-group-tag>.tag-body>.frequency-body {
+ display: inline;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-list {
+ list-style-type: none;
+ padding-left: 0;
+}
+:root[data-frequency-display-mode=list] .frequency-group-item[data-count='1'] .frequency-item {
display: inline;
}
diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
index f4f5d0ca..6d6c8536 100644
--- a/ext/data/schemas/options-schema.json
+++ b/ext/data/schemas/options-schema.json
@@ -271,6 +271,11 @@
"type": "string",
"enum": ["left", "right", "top", "bottom"],
"default": "top"
+ },
+ "frequencyDisplayMode": {
+ "type": "string",
+ "enum": ["tags", "tags-grouped", "split-tags", "split-tags-grouped", "inline-list", "list"],
+ "default": "split-tags-grouped"
}
}
},
diff --git a/ext/display-templates.html b/ext/display-templates.html
index bb89ceaa..d188cfd6 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -23,7 +23,7 @@
</div>
<div class="entry-body">
<div class="entry-body-section" data-section-type="frequencies">
- <ol class="entry-body-section-content frequency-group-list"></ol>
+ <div class="entry-body-section-content frequency-group-list"></div>
</div>
<div class="entry-body-section" data-section-type="pitch-accents">
<ol class="entry-body-section-content term-pitch-accent-group-list"></ol>
@@ -52,19 +52,25 @@
<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
<!-- Frequency templates -->
-<template id="frequency-group-item-template"><li class="frequency-group-item"><div class="frequency-tag-list tag-list"></div><ul class="frequency-list"></ul></li></template>
-<template id="term-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="term">
- <ruby class="frequency-disambiguation">
- <span class="frequency-disambiguation-expression"></span>
- <span class="frequency-disambiguation-separator"></span>
- <rt class="frequency-disambiguation-reading"></rt>
- </ruby>
- <span class="frequency-separator"></span>
- <span class="frequency-value"></span>
-</li></template>
-<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="kanji">
- <span class="frequency-value"></span>
-</li></template>
+<template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template>
+<template id="term-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="term">
+ <span class="tag-label"><span class="tag-label-content"></span></span>
+ <span class="tag-body"><span class="tag-body-content frequency-body">
+ <ruby class="frequency-disambiguation">
+ <span class="frequency-disambiguation-expression"></span>
+ <span class="frequency-disambiguation-separator"></span>
+ <rt class="frequency-disambiguation-reading"></rt>
+ </ruby>
+ <span class="frequency-separator"></span>
+ <span class="frequency-value"></span>
+ </span></span>
+</span></span></template>
+<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><span class="frequency-item"><span class="tag tag-has-body frequency-tag" data-category="frequency" data-frequency-type="kanji">
+ <span class="tag-label"><span class="tag-label-content"></span></span>
+ <span class="tag-body"><span class="tag-body-content frequency-body">
+ <span class="frequency-value"></span>
+ </span></span>
+</span></span></template>
<!-- Pitch accent templates -->
<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false">
@@ -100,7 +106,7 @@
<div class="tags tag-list"></div>
<div class="entry-body">
<div class="entry-body-section" data-section-type="frequencies">
- <ol class="entry-body-section-content frequency-group-list"></ol>
+ <div class="entry-body-section-content frequency-group-list"></div>
</div>
</div>
<table class="kanji-glyph-data"><tbody>
diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index 1105dfed..d7f09135 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -457,7 +457,8 @@ class OptionsUtil {
{async: false, update: this._updateVersion5.bind(this)},
{async: true, update: this._updateVersion6.bind(this)},
{async: false, update: this._updateVersion7.bind(this)},
- {async: true, update: this._updateVersion8.bind(this)}
+ {async: true, update: this._updateVersion8.bind(this)},
+ {async: false, update: this._updateVersion9.bind(this)}
];
}
@@ -736,4 +737,13 @@ class OptionsUtil {
}
return options;
}
+
+ _updateVersion9(options) {
+ // Version 9 changes:
+ // Added general.frequencyDisplayMode.
+ for (const profile of options.profiles) {
+ profile.options.general.frequencyDisplayMode = 'split-tags-grouped';
+ }
+ return options;
+ }
}
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 9b451995..da1b053a 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -581,16 +581,21 @@ class DisplayGenerator {
_createFrequencyGroup(details, kanji) {
const {dictionary, frequencyData} = details;
+
const node = this._templates.instantiate('frequency-group-item');
+ const body = node.querySelector('.tag-body-content');
- const tagList = node.querySelector('.frequency-tag-list');
- const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
- tagList.appendChild(tag);
+ this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+ node.dataset.details = dictionary;
- const frequencyListContainer = node.querySelector('.frequency-list');
- const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
- this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
+ for (let i = 0, ii = frequencyData.length; i < ii; ++i) {
+ const item = frequencyData[i];
+ const itemNode = (kanji ? this._createKanjiFrequency(item, dictionary) : this._createTermFrequency(item, dictionary));
+ itemNode.dataset.index = `${i}`;
+ body.appendChild(itemNode);
+ }
+ body.dataset.count = `${frequencyData.length}`;
node.dataset.count = `${frequencyData.length}`;
return node;
@@ -600,6 +605,8 @@ class DisplayGenerator {
const {expression, reading, frequencies} = details;
const node = this._templates.instantiate('term-frequency-item');
+ this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+
const frequency = frequencies.join(', ');
this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), expression, 'ja');
@@ -622,6 +629,7 @@ class DisplayGenerator {
const frequency = frequencies.join(', ');
+ this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
node.dataset.character = character;
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 30a8e294..be402ec3 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -812,6 +812,7 @@ class Display extends EventDispatcher {
data.ankiEnabled = `${options.anki.enable}`;
data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
data.compactTags = `${options.general.compactTags}`;
+ data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
data.enableSearchTags = `${options.scanning.enableSearchTags}`;
data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;
diff --git a/ext/settings.html b/ext/settings.html
index 54ee7d6d..62117c3c 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -677,6 +677,22 @@
<label class="toggle"><input type="checkbox" data-setting="general.debugInfo"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div>
</div></div>
+ <div class="settings-item advanced-only"><div class="settings-item-inner">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Frequency display style</div>
+ <div class="settings-item-description">Change how frequency information is presented.</div>
+ </div>
+ <div class="settings-item-right">
+ <select data-setting="general.frequencyDisplayMode">
+ <option value="tags">Tags</option>
+ <option value="tags-grouped">Tags, grouped content</option>
+ <option value="split-tags">Split tags</option>
+ <option value="split-tags-grouped">Split tags, grouped content</option>
+ <option value="inline-list">Inline list</option>
+ <option value="list">List</option>
+ </select>
+ </div>
+ </div></div>
<div class="settings-item advanced-only">
<div class="settings-item-inner settings-item-inner-wrappable">
<div class="settings-item-left">