external link with icon

marcodpt · Aug 19, 2024 · 89717b7 · 89717b7
1 parent 7a096c7
commit 89717b7
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -116,11 +116,10 @@ so I created it.
 
 ## 🔧 TODO
  - put a hello world in the documentation and in the generated index.html
- - external links simbol and remove data-paw-path
  - dynamic title on route change
+
  - completely remove functions assign to DOM, table.read, table.setData,
 fieldset.setProp, etc
-
  - dynamic tests implementation
  - highlightjs as a component
  - tests as a route and qunit as a component

diff --git a/src/ctrl/link/index.js b/src/ctrl/link/index.js
@@ -36,8 +36,21 @@ export default ({
       (typeof X[b] == 'string' || typeof X[b] == 'number') ? X[b] : a
     )
   }
-  const target = typeof href == 'string' && href.indexOf('://') > 0 ?
-    '_blank' : null
+  const setTarget = href =>
+    typeof href == 'string' && href.indexOf('://') > 0 ? '_blank' : null
+  const ext = target => !target ? '' : node(({
+    sup, i, text
+  }) =>
+    sup({}, [
+      text(' '),
+      i({
+        class: [
+          'small',
+          'fa-solid fa-arrow-up-right-from-square'
+        ]
+      })
+    ])
+  )
 
   const spinner = !run ? null : node(({span}) =>
     span({
@@ -80,6 +93,7 @@ export default ({
     })
   }
 
+  const target = setTarget(href)
   const btn = node(({button, a, span}) => (isBtn ? button : a)({
     class: [
       context ? 'btn btn-'+context : '',
@@ -96,6 +110,7 @@ export default ({
     ariaExpanded: hasDrop && !hasSplit ? 'false' : null
   }, [
     ctrl(extra),
+    ext(target),
     !download || !mime ? null : a({
       class: 'd-none',
       href: `data:${mime},`,
@@ -127,18 +142,23 @@ export default ({
       }),
       ul({
         class: 'dropdown-menu'
-      }, links.map(({href, ...extra}) => 
+      }, links.map(link => ({
+        target: setTarget(link.href),
+        ...link
+      })).map(({href, target, ...extra}) => 
         li({}, [
           a({
             class: [
               'dropdown-item',
               !href ? 'disabled' : ''
             ],
             href: href && typeof href == 'string' ? href : 'javascript:;',
+            target,
             onclick: typeof href != 'function' ? null : href,
             ariaDisabled: !href ? 'true' : null
           }, [
-            ctrl(extra)
+            ctrl(extra),
+            ext(target)
           ])
         ])
       ))

diff --git a/src/ctrl/link/spec.js b/src/ctrl/link/spec.js
@@ -93,6 +93,7 @@ export default ({
         a,
         span,
         i,
+        sup,
         text
       }) => 
         a({
@@ -107,6 +108,16 @@ export default ({
               ]
             }),
             text(' Repository')
+          ]),
+          sup({}, [
+            text(' '),
+            i({
+              class: [
+                'small',
+                'fa-solid',
+                'fa-arrow-up-right-from-square'
+              ]
+            })
           ])
         ])
       )
@@ -357,6 +368,10 @@ export default ({
               icon: 'home',
               title: 'Go Home!',
               href: '#/'
+            }, {
+              icon: '@github',
+              title: ' Repository',
+              href: 'https://github.com/marcodpt/paw'
             }, {
               icon: 'times',
               title: 'No Action!'
@@ -369,6 +384,7 @@ export default ({
         button,
         span,
         i,
+        sup,
         text,
         ul,
         li,
@@ -432,6 +448,33 @@ export default ({
                 ])
               ])
             ]),
+            li({}, [
+              a({
+                class: 'dropdown-item',
+                href: 'https://github.com/marcodpt/paw',
+                target: '_blank'
+              }, [
+                span({}, [
+                  i({
+                    class: [
+                      'fa-brands',
+                      'fa-github'
+                    ]
+                  }),
+                  text(' Repository')
+                ]),
+                sup({}, [
+                  text(' '),
+                  i({
+                    class: [
+                      'small',
+                      'fa-solid',
+                      'fa-arrow-up-right-from-square'
+                    ]
+                  })
+                ])
+              ])
+            ]),
             li({}, [
               a({
                 class: [

diff --git a/src/ctrl/output/spec.js b/src/ctrl/output/spec.js
@@ -258,13 +258,25 @@ export default ({
       ],
       html: html(({
         a,
+        sup,
+        i,
         text
       }) => 
         a({
           href: 'https://www.google.com',
           target: '_blank'
         }, [
-          text('google')
+          text('google'),
+          sup({}, [
+            text(' '),
+            i({
+              class: [
+                'small',
+                'fa-solid',
+                'fa-arrow-up-right-from-square'
+              ]
+            })
+          ])
         ])
       )
     }, {

diff --git a/src/tests.js b/src/tests.js
@@ -5,6 +5,7 @@ const text = str => str.trim()
     .replace(/\s+</g, () => '<')
     .replace(/"\s+>/g, () => '">')
     .replace(/\s+/g, () => ' ')
+    .replace(/> /g, () => '>')
     .replace(/"(#?)app_([a-z]+?)_[0-9]{6}"/g, '$1app_$2_000000')
 
 const runner = ({title, examples, modules, component}) => {