diff --git a/api/_.mjs b/api/_.mjs index 8c879ca..d970444 100644 --- a/api/_.mjs +++ b/api/_.mjs @@ -1,5 +1,5 @@ /* - * notion-enhancer: api + * notion-enhancer core: api * (c) 2021 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ diff --git a/api/components/_.mjs b/api/components/_.mjs index 33cccb5..0446dfe 100644 --- a/api/components/_.mjs +++ b/api/components/_.mjs @@ -1,5 +1,5 @@ /* - * notion-enhancer: api + * notion-enhancer core: api * (c) 2021 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ @@ -16,7 +16,7 @@ * @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered * @param {string} text - the markdown content of the tooltip */ -export { tooltip } from './tooltip.mjs'; +export { setTooltip } from './tooltip.mjs'; /** * generate an icon from the feather icons set @@ -35,3 +35,11 @@ export { feather } from './feather.mjs'; * @param {Element} panel.$content - an element containing the content of the view */ export { addPanelView } from './panel.mjs'; + +/** + * adds a button to notion's bottom right corner + * @param {string} icon - an svg string + * @param {function} listener - the function to call when the button is clicked + * @returns {Element} the appended corner action element + */ +export { addCornerAction } from './corner-action.mjs'; diff --git a/api/components/corner-action.css b/api/components/corner-action.css new file mode 100644 index 0000000..5198f32 --- /dev/null +++ b/api/components/corner-action.css @@ -0,0 +1,53 @@ +/* + * notion-enhancer core: api + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (c) 2021 CloudHill (https://github.com/CloudHill) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +#enhancer--corner-actions { + position: absolute; + bottom: 26px; + right: 26px; + z-index: 101; + cursor: default; + pointer-events: none; + display: flex; + flex-direction: row-reverse; +} + +#enhancer--corner-actions > div { + position: static !important; + width: 36px; + height: 36px; + margin-left: 12px; + pointer-events: auto; + border-radius: 100%; + font-size: 20px; + + display: flex; + align-items: center; + justify-content: center; + background: var(--theme--bg_card); + box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px, + var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important; + + user-select: none; + cursor: pointer; +} +#enhancer--corner-actions > div:hover { + background: var(--theme--ui_interactive-hover); +} +#enhancer--corner-actions > div:active { + background: var(--theme--ui_interactive-active); +} +#enhancer--corner-actions > div.hidden { + display: none; +} + +#enhancer--corner-actions > div > svg { + width: 22px; + height: 22px; + color: var(--theme--icon); + fill: var(--theme--icon); +} diff --git a/api/components/corner-action.mjs b/api/components/corner-action.mjs new file mode 100644 index 0000000..a2fb276 --- /dev/null +++ b/api/components/corner-action.mjs @@ -0,0 +1,43 @@ +/* + * notion-enhancer core: api + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (c) 2021 CloudHill (https://github.com/CloudHill) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'use strict'; + +/** + * shared notion-style elements + * @module notion-enhancer/api/components/corner-action + */ + +import { web } from '../_.mjs'; + +web.loadStylesheet('api/components/corner-action.css'); + +const $cornerButtonsContainer = web.html`
`; + +/** + * adds a button to notion's bottom right corner + * @param {string} icon - an svg string + * @param {function} listener - the function to call when the button is clicked + * @returns {Element} the appended corner action element + */ +export const addCornerAction = async (icon, listener) => { + await web.whenReady(['.notion-help-button']); + const $helpButton = document.querySelector('.notion-help-button'), + $onboardingButton = document.querySelector('.onboarding-checklist-button'); + if ($onboardingButton) $cornerButtonsContainer.prepend($onboardingButton); + $cornerButtonsContainer.prepend($helpButton); + document + .querySelector('.notion-app-inner > .notion-cursor-listener') + .append($cornerButtonsContainer); + + const $actionButton = web.html`
${icon}
`; + $actionButton.addEventListener('click', listener); + + $cornerButtonsContainer.append($actionButton); + + return $actionButton; +}; diff --git a/api/components/feather.mjs b/api/components/feather.mjs index 3734bda..087b3da 100644 --- a/api/components/feather.mjs +++ b/api/components/feather.mjs @@ -1,5 +1,5 @@ /* - * notion-enhancer: api + * notion-enhancer core: api * (c) 2021 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ diff --git a/api/components/panel.css b/api/components/panel.css index ecd2715..c0fe792 100644 --- a/api/components/panel.css +++ b/api/components/panel.css @@ -1,5 +1,5 @@ /* - * notion-enhancer core: components + * notion-enhancer core: api * (c) 2021 dragonwocky (https://dragonwocky.me/) * (c) 2021 CloudHill (https://github.com/CloudHill) * (https://notion-enhancer.github.io/) under the MIT license diff --git a/api/components/panel.mjs b/api/components/panel.mjs index e90c5ab..32c5d03 100644 --- a/api/components/panel.mjs +++ b/api/components/panel.mjs @@ -1,6 +1,7 @@ /* - * notion-enhancer: api + * notion-enhancer core: api * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (c) 2021 CloudHill (https://github.com/CloudHill) * (https://notion-enhancer.github.io/) under the MIT license */ @@ -14,6 +15,8 @@ import { web, components, registry } from '../_.mjs'; const db = await registry.db('36a2ffc9-27ff-480e-84a7-c7700a7d232d'); +web.loadStylesheet('api/components/panel.css'); + const _views = [], svgExpand = web.raw`