Add dynamic anchors

Author: sdelquin

apps/about/templates/about/allies.html

@@ -15,8 +15,11 @@ <h1>Aliados</h1>
 </p>
 
 {% for ally in allies %}
-  <div class="ally-block">
-    <h2><img src="{{ ally.logo.url }}"> {{ ally.name }}</h2>
+  <div class="ally-block" id="{{ ally.name|slugify }}">
+    <h2 class="dyn-anchor-heading">
+      <img src="{{ ally.logo.url }}"> {{ ally.name }}
+      <a class="dyn-anchor-link" href="#{{ ally.name|slugify }}"><i class="fas fa-link"></i></a>
+    </h2>
     <p class="description"><i class="fas fa-quote-left quote"></i> {{ ally.description }} <i class="fas fa-quote-right quote"></i></p>
     <ul>
       {% if ally.url %}

apps/commons/static/commons/css/base.scss

@@ -1,6 +1,7 @@
 @import './variables';
 @import '~bulma/bulma.sass';
 @import './override';
+@import './dyn-anchors';
 
 html {
   // source: https://stackoverflow.com/q/46463338
@@ -122,4 +123,4 @@ body {
   border-radius: 22.5px;
   border-color: $header-bg;
   background-color: whitesmoke;
-}
+}

apps/commons/static/commons/css/dyn-anchors.scss

@@ -0,0 +1,15 @@
+.dyn-anchor-heading {
+  a.dyn-anchor-link {
+    font-size: 14pt;
+    color: skyblue;
+    margin-bottom: 5px;
+    vertical-align: middle;
+    opacity: 0;
+    &:hover {
+      color: darken(skyblue, 40%);
+    }
+    &.show-it {
+      opacity: 1;
+    }
+  }
+}

apps/commons/static/commons/js/general/dyn-anchors.js

@@ -0,0 +1,18 @@
+function init() {
+    document.querySelectorAll('.dyn-anchor-heading').forEach((item) => {
+        item.addEventListener('mouseenter', function(event) {
+            event.preventDefault()
+            let anchor = event.target.querySelector('.dyn-anchor-link')
+            anchor.classList.add('show-it')
+        })
+        item.addEventListener('mouseleave', function(event) {
+            event.preventDefault()
+            let anchor = event.target.querySelector('.dyn-anchor-link')
+            anchor.classList.remove('show-it')
+        })
+    })
+}
+
+export default {
+    init
+}

apps/commons/static/commons/js/general/index.js

@@ -2,12 +2,14 @@ import NavbarBurger from './navbar-burger'
 import Notifications from './notifications'
 import Collapsable from './collapsable'
 import ScrollUpButton from './scrollUpButton'
+import DynAnchors from './dyn-anchors'
 
 export default {
   init: () => {
     NavbarBurger.init()
     Notifications.init()
     Collapsable.init()
     ScrollUpButton.init()
+    DynAnchors.init()
   },
 }