global linking blocks: bug fix and new option (#347)

* global linking blocks: fix wrong appending

* global linking blocks: option: show the page link button

* global linking blocks: color changes, new icon, new button text

mods/admiraldus-global-linking-blocks/app.css

@@ -36,9 +36,9 @@
   display: block;
   flex-shrink: 0;
   margin-right: 6px;
-  height: 14px;
-  width: 14px;
-  fill: var(--theme--text);
+  height: 16px;
+  width: 16px;
+  fill: var(--theme--text_ui);
 }
 
 .admiraldus-glb-page-button > span {
@@ -81,7 +81,7 @@
   margin-left: 14px;
   height: 17px;
   width: 17px;
-  fill: inherit;
+  fill: var(--theme--text);
 }
 
 .admiraldus-glb-block-button > span {

mods/admiraldus-global-linking-blocks/icons/chain.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 30 30">
+    <path d="M2,12c0-3.309,2.691-6,6-6h8c3.309,0,6,2.691,6,6s-2.691,6-6,6h-6c0,0.736,0.223,1.41,0.574,2H16c4.418,0,8-3.582,8-8 c0-4.418-3.582-8-8-8H8c-4.418,0-8,3.582-8,8c0,2.98,1.634,5.575,4.051,6.951C4.021,18.638,4,18.321,4,18 c0-0.488,0.046-0.967,0.115-1.436C2.823,15.462,2,13.827,2,12z M25.953,11.051C25.984,11.363,26,11.68,26,12 c0,0.489-0.047,0.965-0.117,1.434C27.176,14.536,28,16.172,28,18c0,3.309-2.691,6-6,6h-8c-3.309,0-6-2.691-6-6s2.691-6,6-6h6 c0-0.731-0.199-1.413-0.545-2H14c-4.418,0-8,3.582-8,8c0,4.418,3.582,8,8,8h8c4.418,0,8-3.582,8-8 C30,15.021,28.368,12.428,25.953,11.051z"></path>
+</svg>

mods/admiraldus-global-linking-blocks/mod.js

@@ -19,6 +19,14 @@ module.exports = {
     link: 'https://github.com/admiraldus',
     avatar: 'https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif',
   },
+  options: [
+    {
+      key: 'hidePageButton',
+      label: 'show the page link button',
+      type: 'toggle',
+      value: true,
+    },
+  ],
   hacks: {
     'renderer/preload.js'(store, __exports) {
       document.addEventListener('readystatechange', () => {
@@ -39,31 +47,50 @@ module.exports = {
          * Everything happens here. ¯\_(ツ)_/¯
          */
         async function main() {
-          const icon = await x$.svg('/icons/link.svg');
+          const icons = {
+            globe: await x$.svg('/icons/globe.svg'),
+            chain: await x$.svg('/icons/chain.svg'),
+          };
           const pageClass = 'admiraldus-glb-page-button';
           const blockClass = 'admiraldus-glb-block-button';
           const spanClass = 'admiraldus-glb-span-hide';
-          /**
-           * Create the page link button and append it to the topbar.
-           *
-           * @return  {create}  Returns "create()" if not appended.
-           */
-          const pageButton = !function create() {
-            const target = x$.sel('.notion-topbar-share-menu');
-            const attr = [
-              `class="${pageClass}" role="button" tabindex="0"`,
-              `class="${spanClass}"`,
-            ];
-            const html = x$.el(
-                `<div ${attr[0]}>
-                  ${icon}
-                  <span>Global Link</span>
-                  <span ${attr[1]}>Link copied!</span
-                </div>`);
 
-            target.before(html);
-            if (html === null) return create();
-          }();
+          if (store().hidePageButton) {
+            /**
+             * Create the page link button and append it to the topbar.
+             *
+             * @return  {create}  Returns "create()" if not appended.
+             */
+            const pageButton = function create() {
+              const target = x$.sel('.notion-topbar-share-menu');
+              if (target === null) return;
+
+              const attr = [
+                `class="${pageClass}" role="button" tabindex="0"`,
+                `class="${spanClass}"`,
+              ];
+              const html = x$.el(
+                  `<div ${attr[0]}>
+                    ${icons.chain}
+                    <span>Copy link</span>
+                    <span ${attr[1]}>Link copied!</span
+                  </div>`);
+
+              target.before(html);
+              if (html === null) return create();
+            };
+            pageButton();
+
+            /**
+             * Observer for the topbar.
+             */
+            x$.obs(() => {
+              if (x$.sel(`.${pageClass}`) !== null) return;
+              pageButton();
+            }, x$.sel('.notion-topbar'), {
+              subtree: true, childList: true,
+            });
+          }
 
           /**
            * Create the block link button and append it to the block menu.
@@ -77,7 +104,7 @@ module.exports = {
             const attr = `class="${blockClass}" role="button" tabindex="0"`;
             const html = x$.el(
                 `<div ${attr}>
-                ${icon}
+                ${icons.globe}
                 <span>Global link</span>
                 </div>`);
 
@@ -151,6 +178,7 @@ module.exports = {
                   (div) => lang.some((text) => div.textContent === text));
             }
             if (x$.sel(`.${blockClass}`) !== null ||
+                x$.sel('.notion-selectable-halo') === null ||
                 getLinkButton() === undefined) return;
             blockButton(getLinkButton().closest('[role="button"]'));
           }, x$.sel('.notion-overlay-container'), {