dna-engine ~~ Data click

An uncomplicated user interface library

by pilafmon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.css">
<script src="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.min.js"></script>
<h2>🎟️ Action Icons</h2>
<h3>up, down, delete</h3>

<div class=actions>
   <i class="fas fa-arrow-up"   data-on-click=doAction data-action=up></i>
   <i class="fas fa-arrow-down" data-on-click=doAction data-action=down></i>
   <i class="fas fa-times icon-popup-anchor"></i>
   <div>
      <b>Delete?</b>
      <button data-on-click=doAction data-action=delete>Yes</button>
   </div>
</div>

<p>
   Action: <b id=message>No action taken yet</b>
</p>

CSS

body {
   font-family: system-ui, sans-serif;
   color: dimgray;
   background-color: lightblue;
   margin: 30px;
   }
.actions {
   display: inline-block;
   position: relative;
   background-color: goldenrod;
   padding: 10px;
   margin-right: 30px;
   }
.actions i.fas {
   display: block;
   font-size: 1.6rem;
   text-align: center;
   margin: 5px;
   transition: all 400ms;
   }
.actions i.fas:hover {
   color: black;
   }

/* Icon pop-up */
i.fas.icon-popup-anchor + div {
   position: absolute;
   bottom: 15px;
   left: 20px;
   visibility: hidden;
   opacity: 0;
   white-space: nowrap;
   background-color: white;
   border: 3px solid steelblue;
   border-radius: 10px;
   padding: 0.8em 1.6em;
   transition: all 400ms;
   }
i.fas.icon-popup-anchor:hover + div,
i.fas.icon-popup-anchor + div:hover {
   visibility: visible;
   opacity: 1;
   }

JavaScript

// dna-engine.org

const doAction = (elem) => {
   const action =  elem.dataset.action;
   const message = document.getElementById('message');
   dna.ui.pulse(message, { text: action });
   };