Share popup modal separation

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

assets/js/components/ButtonClipboard.js

@@ -0,0 +1,22 @@
+'use strict';
+
+module.exports = class Modal {
+  constructor($elm) {
+    if (!$elm) {
+      return;
+    }
+
+    this.$elm = $elm;
+
+    this.$elm.addEventListener('click', () => {
+      this.copyToClipboard(this.$elm.getAttribute('data-clipboard'), () => {
+        this.$elm.classList.add('button--success', 'button--fixed-width');
+        this.$elm.textContent = 'Copied!';
+      });
+    });
+  }
+
+  copyToClipboard(text, onSuccess) {
+    navigator.clipboard.writeText(text).then(onSuccess);
+  }
+};

assets/js/components/Modal.js

@@ -0,0 +1,50 @@
+'use strict';
+
+module.exports = class Modal {
+
+  constructor($elm, _window = window, doc = document) {
+    if (!$elm) {
+      return;
+    }
+
+    this.$elm = $elm;
+    this.window = _window;
+    this.doc = doc;
+
+    const $triggerId = this.$elm.getAttribute('data-trigger-id');
+    let $trigger;
+
+    if (!$triggerId || !this.doc.getElementById($triggerId)) {
+      $trigger = this.$elm.querySelector('.modal-click');
+    } else {
+      $trigger = this.doc.getElementById($triggerId);
+    }
+
+    this.modalWindow = this.$elm.querySelector('.modal-container');
+    $trigger.addEventListener('click', (event) => this.modalToggle(event));
+    this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event));
+    this.window.addEventListener('click', (event) => this.windowOnClick(event));
+
+    this.window.addEventListener('resize', () => {
+      this.modalWindow.classList.remove('modal-content__show');
+    });
+
+    this.modalSetup();
+  }
+
+  modalToggle(event) {
+    this.modalWindow.classList.toggle('modal-content__show');
+    event.preventDefault();
+  }
+
+  windowOnClick(event) {
+    if (event.target === this.modalWindow) {
+      this.modalToggle(event);
+    }
+  }
+
+  modalSetup() {
+    this.$elm.classList.remove('modal-nojs');
+  }
+
+};

assets/js/main.js

@@ -14,6 +14,7 @@ Components.ArticleSection = require('./components/ArticleSection');
 Components.AssetNavigation = require('./components/AssetNavigation');
 Components.AssetViewer = require('./components/AssetViewer');
 Components.AudioPlayer = require('./components/AudioPlayer');
+Components.ButtonClipboard = require('./components/ButtonClipboard');
 Components.CallToAction = require('./components/CallToAction');
 Components.CarouselItem = require('./components/CarouselItem');
 Components.Carousel = require('./components/Carousel');
@@ -31,6 +32,7 @@ Components.MainMenu = require('./components/MainMenu');
 Components.Math = require('./components/Math');
 Components.MediaChapterListingItem = require('./components/MediaChapterListingItem');
 Components.Metrics = require('./components/Metrics');
+Components.Modal = require('./components/Modal');
 Components.Pager = require('./components/Pager');
 Components.PersonalisedCoverDownload = require('./components/PersonalisedCoverDownload');
 Components.Popup = require('./components/Popup');

assets/sass/_variables.scss

@@ -13,6 +13,7 @@ $color-text-secondary-dark: #6e6e6e;
 $color-text-placeholder: #bdbdbd;
 $color-text-dividers: #e0e0e0;
 $color-text-ui-background: #fff;
+$color-text-ui-background-secondary: #f7f7f7;
 $color-text-ui-background-hue: #f5f5f5;
 $color-text-ui-code: #f7f7f7;
 

assets/sass/patterns/atoms/buttons.scss

@@ -26,6 +26,10 @@
   text-transform: uppercase;
 }
 
+.button--fixed-width {
+  min-width: 189px;
+}
+
 .button--default {
   @include colors($color-primary);
   @include padding(15 36 14);
@@ -35,6 +39,15 @@
   }
 }
 
+.button--secondary {
+  @include colors($color-text-ui-background-secondary, $color-text-dividers, $color-text);
+  @include padding(15 36 14);
+
+  &:hover {
+    @include colors($color-text-dividers, $color-text-dividers, $color-text);
+  }
+}
+
 .button--outline {
   @include colors($color-text--reverse, $color-primary, $color-primary);
   @include padding(15 36 14);
@@ -97,3 +110,13 @@
 
   cursor: not-allowed;
 }
+
+.button--success {
+  background: $color-success;
+  border: 1px solid $color-success;
+
+  &:hover {
+    background-color: #2b7306;
+    border: 1px solid #2b7306;
+  }
+}

assets/sass/patterns/atoms/modal-window.scss

@@ -0,0 +1,138 @@
+.modal-container {
+  background-color: rgba(255,255,255,0.5);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  visibility: hidden;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.22);
+  display: grid;
+  margin: 0;
+  padding: 36px;
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--small)}em) {
+    margin: 24px;
+  }
+
+  @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium + 48)}em) {
+    margin: 24px auto;
+    max-width: 730px;
+  }
+
+  h6 {
+    @include font-size-and-vertical-height($font-size-h6-in-px);
+    grid-column: 1/3;
+    grid-row: 1;
+    justify-self: start;
+    padding-top: 0;
+  }
+
+  .social-media-sharers {
+    @media only all and (max-width: #{get-rem-from-px($bkpt-site--small - 1)}em) {
+      @include padding(24, "top");
+      display: flex;
+      grid-column: 1/3;
+      grid-row: 4;
+      justify-content: center;
+    }
+  }
+
+  .reference {
+    font-family: $font-secondary;
+    grid-column: 1/3;
+
+    .doi {
+      @include margin(12, "top");
+      @include margin(36, "bottom");
+      display: flex;
+    }
+  }
+
+  .button-collection {
+    display: unset;
+    flex-direction: column;
+    grid-column: 1/3;
+
+    .button-collection__item {
+      float: none;
+    }
+
+    .button {
+      @include margin(12, "bottom");
+      width: 100%;
+    }
+
+    @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) {
+      grid-column: 1/3;
+
+      .button-collection__item {
+        float: left;
+      }
+
+      .button {
+        @include margin(12, "bottom");
+        line-height: 1.5;
+        padding: 15px 24px 14px;
+        text-decoration: none;
+        width: auto;
+      }
+    }
+  }
+}
+
+.modal-content__body {
+  display: grid;
+  grid-column: 1/3;
+
+  .button {
+    justify-self: center;
+    margin-bottom: 24px;
+  }
+}
+
+.modal-content__show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal-content__close-button {
+  @include padding(0 25 0 0);
+  background: url(../img/icons/close.svg) right 4px no-repeat;
+  color: $color-text;
+  font-family: $font-secondary;
+  font-weight: bold;
+  grid-column: 2/3;
+  grid-row: 1;
+  justify-self: end;
+}
+
+.modal-nojs {
+  visibility: hidden;
+}
+
+.modal-content__clipboard {
+  @include margin(24, "bottom");
+  @include padding(12);
+  border: 1px solid $color-text-dividers;
+  font-family: $font-secondary;
+  grid-column: 1/3;
+  grid-row: 2;
+  justify-self: initial;
+  word-break: break-word;
+
+  &.reference {
+    @include margin(0, "bottom");
+    border: none;
+    padding: 0;
+  }
+}
+
+.social-media-sharers {
+  display: flex;
+}

assets/sass/patterns/atoms/reference.scss

@@ -187,5 +187,4 @@ a.reference__authors_link:hover {
     }
 
   }
-
 }

assets/sass/patterns/atoms/social-media-sharers.scss

@@ -11,8 +11,20 @@
 //  Fill: solid
 
 .social-media-sharers {
-  flex-grow: 0;
-  flex-basis: 24px;
+  @include margin(0);
+  @include padding(0);
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+
+  li {
+    list-style: none;
+    margin-right: 6px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .social-media-sharer,
@@ -65,3 +77,28 @@
   fill: #fff;
   stroke: none;
 }
+
+.email {
+  background: url("../img/icons/email-default.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.facebook {
+  background: url("../img/icons/facebook.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.twitter {
+  background: url("../img/icons/twitter.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.linkedin {
+  background: url("../img/icons/linkedin.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}
+
+.reddit {
+  background: url("../img/icons/reddit.svg") no-repeat 0 0;
+  text-indent: -5000px;
+}