diff options
3 files changed, 42 insertions, 20 deletions
diff --git a/src/content/dependencies/generateAbsoluteDatetimestamp.js b/src/content/dependencies/generateAbsoluteDatetimestamp.js index 63acecf2..930b6f13 100644 --- a/src/content/dependencies/generateAbsoluteDatetimestamp.js +++ b/src/content/dependencies/generateAbsoluteDatetimestamp.js @@ -1,12 +1,21 @@ export default { - contentDependencies: ['generateDatetimestampTemplate'], + contentDependencies: [ + 'generateDatetimestampTemplate', + 'generateTooltip', + ], + extraDependencies: ['html', 'language'], data: (date) => ({date}), - relations: (relation) => - ({template: relation('generateDatetimestampTemplate')}), + relations: (relation) => ({ + template: + relation('generateDatetimestampTemplate'), + + tooltip: + relation('generateTooltip'), + }), slots: { style: { @@ -30,10 +39,13 @@ export default { ? data.date.getFullYear().toString() : null), - tooltipContent: + tooltip: slots.tooltip && slots.style === 'year' && - language.formatDate(data.date), + relations.tooltip.slots({ + content: + language.formatDate(data.date), + }), datetime: data.date.toISOString(), diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js index 29c81572..9b1d7aa8 100644 --- a/src/content/dependencies/generateDatetimestampTemplate.js +++ b/src/content/dependencies/generateDatetimestampTemplate.js @@ -7,9 +7,9 @@ export default { mutable: false, }, - tooltipContent: { + tooltip: { type: 'html', - mutable: false, + mutable: true, }, datetime: {type: 'string'}, @@ -19,7 +19,7 @@ export default { html.tag('span', {class: 'datetimestamp'}, {[html.joinChildren]: ''}, - slots.tooltipContent && + !html.isBlank(slots.tooltip) && {class: 'has-tooltip'}, [ @@ -27,9 +27,8 @@ export default { {datetime: slots.datetime}, slots.mainContent), - slots.tooltipContent && - html.tag('span', {class: ['tooltip', 'datetimestamp-tooltip']}, - html.tag('span', {class: 'tooltip-content'}, - slots.tooltipContent)), + slots.tooltip?.slots({ + attributes: [{class: 'datetimestamp-tooltip'}], + }), ]), }; diff --git a/src/content/dependencies/generateRelativeDatetimestamp.js b/src/content/dependencies/generateRelativeDatetimestamp.js index 7b7a28de..a997de0e 100644 --- a/src/content/dependencies/generateRelativeDatetimestamp.js +++ b/src/content/dependencies/generateRelativeDatetimestamp.js @@ -2,6 +2,7 @@ export default { contentDependencies: [ 'generateAbsoluteDatetimestamp', 'generateDatetimestampTemplate', + 'generateTooltip', ], extraDependencies: ['html', 'language'], @@ -11,9 +12,16 @@ export default { ? {equal: true, date: currentDate} : {equal: false, currentDate, referenceDate}), - relations: (relation, currentDate) => - ({template: relation('generateDatetimestampTemplate'), - fallback: relation('generateAbsoluteDatetimestamp', currentDate)}), + relations: (relation, currentDate) => ({ + template: + relation('generateDatetimestampTemplate'), + + fallback: + relation('generateAbsoluteDatetimestamp', currentDate), + + tooltip: + relation('generateTooltip'), + }), slots: { style: { @@ -43,12 +51,15 @@ export default { ? data.currentDate.getFullYear().toString() : null), - tooltipContent: + tooltip: slots.tooltip && - language.formatRelativeDate(data.currentDate, data.referenceDate, { - considerRoundingDays: true, - approximate: true, - absolute: slots.style === 'year', + relations.tooltip.slots({ + content: + language.formatRelativeDate(data.currentDate, data.referenceDate, { + considerRoundingDays: true, + approximate: true, + absolute: slots.style === 'year', + }), }), datetime: |