feat: add copy to clipboard

Closes #54

static/css/base.css

@@ -7,7 +7,9 @@
   --ui-gray-1-color: #C6C6C7;
   --ui-gray-3-color: #8E8E93;
   --red-0-color: #FF3B30;
+  --green-0-color: #06EC01;
   --special-0-color: #E70078;
+
   --font-h1-size: 24px;
   --font-h2-size: 18px;
   --font-body-size: 18px;

static/css/promo.css

@@ -1,3 +1,6 @@
+.action-icon-done { color: var(--green-0-color); }
+.action-icon-error { color: var(--red-0-color); }
+
 .gift-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -45,12 +48,18 @@
   background: var(--ui-gray-m1-color);
 }
 
-.cp-btn-cp-action:hover { background: var(--ui-gray-0-color); }
+.cp-btn-cp-action:hover {
+  background: var(--ui-gray-0-color);
+  cursor: pointer;
+}
+
 .cp-btn-cp-action:active { background: var(--ui-gray-1-color); }
 
-.cp-btn-cp-action > svg {
+.icon-holder > svg {
   width: var(--ui-icon-size);
   height: var(--ui-icon-size);
+  /*  Centering of icon, based on button size.  */
+  padding: 6px;
 }
 
 .gift-img {

static/js/promo.js

@@ -0,0 +1,101 @@
+function copyToClipboard(text, onSuccess = undefined, onFailure = undefined) {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      if (onSuccess === undefined){
+        console.log('clipboard success');
+        return;
+      }
+      onSuccess();
+    })
+    .catch((e) => {
+      if (onFailure === undefined){
+        console.log('clipboard failed\n' + e);
+        return;
+      }
+      onFailure(e);
+    });
+}
+
+function getFirstClassElement(root, class_name){
+  let elements = root.getElementsByClassName(class_name);
+  if (elements.length != 1){
+    return undefined;
+  }
+  return elements[0];
+}
+
+function attachCopyEvent(copy_button){
+  let input = getFirstClassElement(copy_button, 'cp-btn-text-to-copy');
+  if (input === undefined){
+    console.error('Exactly one input required. Check HTML/CSS.');
+    return false;
+  }
+  let text_to_copy = input.value;
+
+  let action_copy = getFirstClassElement(copy_button, 'cp-btn-cp-action');
+  if (action_copy === undefined){
+    console.error('Exactly one copy button required. Check HTML/CSS.');
+    return false;
+  }
+
+  let icon_act = getFirstClassElement(action_copy, 'action-icon-act');
+  if (icon_act === undefined){
+    console.error('Exactly one act icon required. Check HTML/CSS.');
+    return false;
+  }
+
+  let icon_done = getFirstClassElement(action_copy, 'action-icon-done');
+  if (icon_done === undefined){
+    console.error('Exactly one done icon required. Check HTML/CSS.');
+    return false;
+  }
+
+  let icon_error = getFirstClassElement(action_copy, 'action-icon-error');
+  if (icon_error === undefined){
+    console.error('Exactly one error icon required. Check HTML/CSS.');
+    return false;
+  }
+
+  action_copy.addEventListener('click', function (){
+    let show = (x) => { x.style.display = 'inline' };
+    let hide = (x) => { x.style.display = 'none' };
+
+    let show_time_milliseconds = 3000;
+    copyToClipboard(text_to_copy,
+      function(){
+        console.debug('Successfull copy.');
+
+        hide(icon_act);
+        show(icon_done);
+
+        setTimeout(() => {
+          show(icon_act);
+          hide(icon_done);
+        }, show_time_milliseconds);
+      },
+      function(){
+        console.debug('Error during copy.');
+
+        hide(icon_act);
+        show(icon_error);
+
+        setTimeout(() => {
+          show(icon_act);
+          hide(icon_error);
+        }, show_time_milliseconds);
+      }
+    );
+  });
+
+  return true;
+}
+
+function main(){
+  var copy_buttons = document.getElementsByClassName('cp-btn');
+  for (var i = 0; i < copy_buttons.length; i++){
+    attachCopyEvent(copy_buttons[i]);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', main);

templates/base.html

@@ -16,7 +16,11 @@
 {% macro copybutton(texttocopy) -%}
 <span class='cp-btn'>
   <input class='cp-btn-text-to-copy' type='text' value='{{ texttocopy }}' size='{{ texttocopy|length }}' readonly />
-  <button class='cp-btn-cp-action'>{{ icons.clipboard }}</button>
+  <span class='cp-btn-cp-action'>
+    <span class='icon-holder action-icon-act'>{{ icons.clipboard }}</span>
+    <span class='icon-holder action-icon-done' style='display:none'>{{ icons.check }}</span>
+    <span class='icon-holder action-icon-error' style='display:none'>{{ icons.x_mark }}</span>
+  </span>
 </span>
 {%- endmacro %}
 
@@ -106,4 +110,7 @@
     </div>
   </div>
   {% endblock %}
+
+  {% block page_just_before_end %}
+  {% endblock %}
 </body>

templates/promo.html

@@ -34,3 +34,7 @@ <h2>Промокод на подарок</h2>
   </section>
 </div>
 {% endblock %}
+
+{% block page_just_before_end %}
+<script type="text/javascript" src="js/promo.js"></script>
+{% endblock %}