dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-04 20:59:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

extension: truncated table titles (#292)

Browse Source
This commit is contained in:
Emir 2020-12-02 15:09:31 +03:00 committed by GitHub
parent 0beebe8052
commit 039670e639
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 294 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
mods/admiraldus-truncated-table-titles/app.css Normal file
View File

@ -0,0 +1,43 @@
/*
* truncated table titles
* (c) 2020 admiraldus (https://github.com/admiraldus)
* under the MIT license
*/
/* target tooltip */
.admiraldus-truncated-table-titles-tooltip
{
position: fixed;
}
.admiraldus-truncated-table-titles-tooltip > div {
display: flex;
align-items: center;
border-radius: 3px;
background: var(--theme--card);
padding: 4px 8px;
box-shadow: var(--theme--box-shadow);
}
/* target tooltip icon */
.admiraldus-truncated-table-titles-tooltip-svg {
display: flex;
align-items: center;
}
.admiraldus-truncated-table-titles-tooltip-svg > svg {
margin-right: 0.25em;
height: 1em;
width: 1em;
fill: var(--theme--text_ui_info);
}
/* target tooltip text */
.admiraldus-truncated-table-titles-tooltip-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 500;
color: var(--theme--text_ui);
}

44
mods/admiraldus-truncated-table-titles/icons/eye.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 296.639 296.639" style="enable-background:new 0 0 296.639 296.639;" xml:space="preserve">
<g>
<path d="M293.357,138.957c-2.621-3.28-65.112-80.336-145.038-80.336c-79.927,0-142.417,77.056-145.038,80.336
c-4.375,5.476-4.375,13.251,0,18.727c2.621,3.28,65.111,80.335,145.038,80.335c79.926,0,142.417-77.055,145.038-80.334
C297.732,152.207,297.732,144.432,293.357,138.957z M148.319,208.018c-50.516,0-95.235-40.82-113.213-59.698
c17.985-18.886,62.701-59.699,113.213-59.699c50.511,0,95.227,40.812,113.212,59.699
C243.546,167.206,198.83,208.018,148.319,208.018z"/>
<circle cx="146.955" cy="148.319" r="42.948"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

207
mods/admiraldus-truncated-table-titles/mod.js Normal file
View File

@ -0,0 +1,207 @@
/*
* truncated table titles
* (c) 2020 admiraldus (https://github.com/admiraldus)
* under the MIT license
*/
'use strict';
const PATH = require('path');
const FS = require('fs-extra');
module.exports = {
id: '1794c0bd-7b96-46ad-aa0b-fc4bd76fc7fb',
name: 'truncated table titles',
tags: ['extension', 'admiraldus'],
desc: 'see the full text of the truncated table titles on hover over.',
version: '0.1.0',
author: {
name: 'admiraldus',
link: 'https://github.com/admiraldus',
avatar: 'enhancement://admiraldus-cosmos/img/avatar.jpg',
},
hacks: {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', () => {
if (document.readyState !== 'complete') return false;
/**
* Wait until frame exists to avoid "cannot read property" error.
*/
function wait() {
const frame = document.querySelector('.notion-frame');
if (frame !== null) {
(async () => {
const notionOverlayContainer = document.querySelector('.notion-overlay-container');
const createSvgContainer = document.createElement('div');
const svgContainerHtml = await FS.readFile(PATH.resolve(`${__dirname}/icons/eye.svg`));
createSvgContainer.innerHTML = svgContainerHtml;
createSvgContainer.setAttribute('style', 'display: none;');
createSvgContainer.classList.add('admiraldus-truncated-table-titles-rendered-svg');
notionOverlayContainer.append(createSvgContainer);
})();
} else {
setTimeout(wait, 500);
}
}
wait();
/**
* Set the offset values of the created tooltip.
*
* @param {HTMLDivElement} cell Target the table header cell.
* @param {HTMLDivElement} tooltip Target the created tooltip.
*
* @return {string} Return the offset values.
*/
function setTooltipOffset(cell, tooltip) {
const body = document.querySelector('body');
const sidebar = document.querySelector('.notion-sidebar:not([style*="transform"])');
Object.defineProperty(Object.prototype, 'offset', {
get: function() {
return {
left: this.getBoundingClientRect().left + window.scrollX,
top: this.getBoundingClientRect().top + window.scrollY,
};
},
configurable: true,
});
if (body.offsetWidth < tooltip.offsetWidth + cell.offset.left) {
if (body.offsetWidth > cell.offsetWidth + cell.offset.left) {
const horizontalOffset = `right: ${body.offsetWidth - cell.offsetWidth - cell.offset.left}px;`;
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
} else {
const horizontalOffset = 'right: 8px;';
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
}
} else if (sidebar == null && cell.offset.left <= 0) {
const horizontalOffset = 'left: 8px;';
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
} else if (sidebar !== null && sidebar.offsetWidth >= cell.offset.left) {
const horizontalOffset = `left: ${sidebar.offsetWidth + 8}px;`;
console.warn('4');
return `top: ${cell.offset.top + 40}px; ${horizontalOffset}`;
} else {
const horizontalOffset = `left: ${cell.offset.left}px;`;
return `top: ${cell.offset.top + 40}px;${horizontalOffset}`;
}
}
/**
* Create and append tooltip HTML.
*
* @param {HTMLDivElement} cell Target the table header cell.
* @param {string} text Get the title of the table header cell.
* @param {string} icon Get the HTML of the rendered svg.
*/
function createTooltip(cell, text, icon) {
const frame = document.querySelector('.notion-frame');
const notionOverlayContainer = document.querySelector('.notion-overlay-container');
const createTooltipContainer = document.createElement('div');
const tooltipText = text.innerText;
const tooltipIcon = icon;
const tooltipContainerHtml =
`<div>
<div class="admiraldus-truncated-table-titles-tooltip-svg">
${tooltipIcon}
</div>
<div class="admiraldus-truncated-table-titles-tooltip-text">
${tooltipText}
</div>
</div>`;
createTooltipContainer.innerHTML = tooltipContainerHtml;
createTooltipContainer.classList.add('admiraldus-truncated-table-titles-tooltip');
createTooltipContainer.setAttribute('style', `max-width: ${cell.offsetWidth >= 450 ? cell.offsetWidth / 2 + 450 >= frame.offsetWidth ? frame.offsetWidth - 16 : cell.offsetWidth / 2 + 450 : 450}px;`);
notionOverlayContainer.append(createTooltipContainer);
const tooltipOffset = setTooltipOffset(cell, document.querySelector('.admiraldus-truncated-table-titles-tooltip'));
createTooltipContainer.setAttribute('style', createTooltipContainer.getAttribute('style') + tooltipOffset);
}
/**
* Remove all tooltips from the DOM.
*/
function removeTooltip() {
if (document.querySelector('.admiraldus-truncated-table-titles-tooltip')) {
while (document.querySelectorAll('.admiraldus-truncated-table-titles-tooltip').length !== 0) {
document.querySelectorAll('.admiraldus-truncated-table-titles-tooltip').forEach((tooltip) => tooltip.remove());
}
}
}
const BODY = document.querySelector('body');
let tooltipDelay = null;
BODY.addEventListener('mousedown', () => {
/**
* When the drag is detected, set the global variable to true and remove all tooltips.
*/
const dragStart = function() {
window.isCellDragging = true;
window.clearTimeout(tooltipDelay);
removeTooltip();
};
/**
* When the drag is over, set the global variable to false and remove the relevant event listeners.
*/
const dragEnd = function() {
window.isCellDragging = false;
window.removeEventListener('mousemove', dragStart);
window.removeEventListener('mouseup', dragEnd);
};
window.addEventListener('mousemove', dragStart);
window.addEventListener('mouseup', dragEnd);
});
BODY.addEventListener('mouseenter', (event) => {
const el = event.target;
if (window.isCellDragging !== true) {
if (el.classList.contains('notion-table-view-header-cell')) {
if (el.querySelector('div[style*="text-overflow"]').scrollWidth > el.querySelector('div[style*="text-overflow"]').clientWidth) {
tooltipDelay = window.setTimeout(function() {
createTooltip(el, el.querySelector('div[style*="text-overflow"]'), document.querySelector('.admiraldus-truncated-table-titles-rendered-svg').innerHTML);
}, 1000);
}
}
}
}, true);
BODY.addEventListener('mouseleave', (event) => {
const el = event.target;
if (el.classList.contains('notion-table-view-header-cell')) {
if (el.querySelector('div[style*="text-overflow"]').scrollWidth > el.querySelector('div[style*="text-overflow"]').clientWidth) {
window.clearTimeout(tooltipDelay);
removeTooltip();
}
}
}, true);
console.info(
'%cextension: ' +
`%c${module.exports.name} ` +
`%cfrom ${module.exports.author.name} ` +
'%c(operational)', 'font-weight: bold;',
'font-weight: normal',
'font-style: italic;',
'color: #a5d6a7;');
});
},
},
};