add share modal

package-lock.json

@@ -6427,6 +6427,11 @@
         "to-regex": "^3.0.2"
       }
     },
+    "micromodal": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.2.tgz",
+      "integrity": "sha512-tL8Z6Vi72haNUNlkhLjJJv1Q16eqUWMPAGT4RF7mwDM5DNyJXC67Yj8jw/yVgGYdhnCEBBf3X5JM3d/MpXSEKg=="
+    },
     "miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "date-fns": "^2.9.0",
     "get-urls": "^9.2.0",
     "iter-tools": "^7.0.0-rc.0",
+    "micromodal": "^0.4.2",
     "route-parser": "0.0.5",
     "svelte-pipeable-store": "^1.0.3",
     "svelte-routing": "^1.4.0"

src/assets/scss/3-components/_forms.scss

@@ -8,8 +8,7 @@
 /* == configuration */
 /* ----------------------------------------------------------- */
 
-
-$input-border-radius: .4rem;
+$input-border-radius: .3rem;
 $input-border: .1rem solid #d8d8d8;
 $input-background-color: #fff;
 $input-hover: 5%;
@@ -104,13 +103,16 @@ textarea {
 }
 
 input {
-  padding: .8em;
+  padding: 1rem 2rem;
   max-width: 32rem;
   width: 100%;
   border: $input-border;
   border-radius: $input-border-radius;
   background: $input-background-color;
-  box-shadow: inset 0 1px 2px rgba(10, 10, 10, .08);
+}
+
+input[readonly] {
+  background: #f1f1f1;
 }
 
 textarea:active,
@@ -136,6 +138,23 @@ input[type="checkbox"] {
   width: inherit;
 }
 
+input[type="checkbox"] {
+  appearance: none;
+  margin-right: 1rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  border: .1rem solid $color-grey-2;
+  border-radius: .2rem;
+  background: no-repeat url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.452.833L3.75 5.653 1.548 3.565 0 5.113 3.75 8.75 10 2.381 8.452.833z' fill='%23635776'/%3E%3C/svg%3E%0A");
+  background-position: center;
+  background-size: 0 0;
+  transition: .2s background cubic-bezier(.64, 1.93, .55, 1.94);
+}
+
+input[type="checkbox"]:checked {
+  background-size: 1rem .8rem;
+}
+
 /* autogrid
 -------------------------------------------------------------- */
 

src/assets/scss/5-modules/modal-share.scss

@@ -0,0 +1,37 @@
+/* ----------------------------------------------------------- */
+/* == share modal module */
+/* ----------------------------------------------------------- */
+
+.modalShare__controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+}
+
+/* Input
+-------------------------------------------------------------- */
+
+.modalShare__input {
+  color: $color-secondary;
+}
+
+/* Big player checkbox
+-------------------------------------------------------------- */
+
+.modalShare__bigplayer label {
+  margin: 0;
+}
+
+/* copy button
+-------------------------------------------------------------- */
+
+.modalShare__copy {
+  margin-left: 1rem;
+  padding: .8rem 1.6rem;
+  border: none;
+  border-radius: .3rem;
+  background-color: rgba($color-primary, .15);
+  color: $color-primary;
+  font-size: 1.3rem;
+}

src/assets/scss/7-vendors/micromodal.scss

@@ -0,0 +1,115 @@
+/**************************\
+  Basic Modal Styles
+\**************************/
+
+.modal {
+  position: relative;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.modal[aria-hidden="true"] {
+  display: none;
+}
+
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+  background: rgba(0, 0, 0, .6);
+}
+
+.modal__container {
+  position: relative;
+  z-index: 21;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 3rem;
+  max-width: 50rem;
+  max-height: 100vh;
+  width: 100%;
+  border-radius: .5rem;
+  background-color: #fff;
+}
+
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal__title {
+  margin-bottom: 2rem;
+  color: $color-primary;
+  text-align: center;
+  font-weight: bold;
+  font-style: normal;
+  font-size: 1.8rem;
+  line-height: 1.6em;
+}
+
+.modal__close {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  border: 0;
+  background: transparent;
+  color: #fff;
+  font-size: 3rem;
+}
+
+.modal__close:before {
+  content: "\2715";
+}
+
+.modal__btn {
+  -webkit-appearance: button;
+  overflow: visible;
+  margin: 0;
+  padding-top: .5rem;
+  padding-right: 1rem;
+  padding-bottom: .5rem;
+  padding-left: 1rem;
+  border-width: 0;
+  border-style: none;
+  border-radius: .25rem;
+  background-color: #e6e6e6;
+  color: rgba(0, 0, 0, .8);
+  text-transform: none;
+  font-size: .875rem;
+  line-height: 1.15;
+  cursor: pointer;
+  transition: -webkit-transform .25s ease-out;
+  transition: transform .25s ease-out;
+  transition: transform .25s ease-out, -webkit-transform .25s ease-out;
+  transform: translateZ(0);
+
+  will-change: transform;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+}
+
+.modal__btn:focus,
+.modal__btn:hover {
+  transform: scale(1.05);
+
+  -webkit-transform: scale(1.05);
+}
+
+.modal__btn-primary {
+  background-color: #00449e;
+  color: #fff;
+}

src/assets/scss/_colors.scss

@@ -25,3 +25,4 @@ $color-link: $color-primary;
 // --------------------------------------------------------------
 
 $color-grey-1: #767676;
+$color-grey-2: #c4c4c4;

src/assets/scss/style.scss

@@ -70,6 +70,7 @@
 @import "5-modules/queue";
 @import "5-modules/track";
 @import "5-modules/context-menu";
+@import "5-modules/modal-share";
 
 
 // --------------------------------------------------------------
@@ -86,7 +87,7 @@
 // Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
 // In this context, "o" means "override" and you can use it as a convention.
 
-// @import '7-vendors/o-vendor.scss';
+@import "7-vendors/micromodal.scss";
 
 
 // --------------------------------------------------------------

src/components/ContextMenu.svelte

@@ -1,3 +1,16 @@
-<button class="contextMenu__item">Share the track</button>
+<button class="contextMenu__item" on:click={() => openShare()}>Share this song</button>
 <a class="contextMenu__item" href="" target="_blank">Link to toot</a>
-<a class="contextMenu__item" href="" target="_blank">Link to media</a>
+<a class="contextMenu__item" href="" target="_blank">Link to media</a>
+
+<script>
+import { onMount, getContext } from 'svelte';
+import MicroModal from 'micromodal'; 
+
+const closeMenu = getContext('closeMenu')
+
+function openShare () {
+    MicroModal.show('share-modal')
+    closeMenu()
+}
+
+</script>

src/components/PopperMenu.svelte

@@ -1,10 +1,10 @@
-<span bind:this={btn} on:click={() => openMenu()}>
+<span bind:this={btn} on:click={() => open()}>
     <slot name="btn">
         <button>button</button>
     </slot>
 </span>
 
-<div class="contextMenu__overlay" class:active={isActive} on:click={() => closeMenu()}></div>
+<div class="contextMenu__overlay" class:active={isActive} on:click={() => close()}></div>
 <div class="contextMenu" bind:this={content} class:active={isActive}>
     <slot name="content">
         No content
@@ -12,7 +12,7 @@
 </div>
 
 <script>
-import { onMount } from 'svelte';
+import { onMount, setContext } from 'svelte'
 import { createPopper } from '@popperjs/core';
 import detectOverflow from '@popperjs/core/lib/utils/detectOverflow.js';
 
@@ -20,14 +20,17 @@ let btn
 let content
 let isActive = false
 
-function openMenu () {
+export function open () {
     isActive = true
 }
 
-function closeMenu () {
+export function close () {
     isActive = false
 }
 
+setContext('openMenu', open)
+setContext('closeMenu', close)
+
 onMount(() => {
     createPopper(btn, content, {
     placement: 'left-start',

src/components/Radio.svelte

@@ -14,6 +14,8 @@
     </section>
 
     <Footer></Footer>
+
+    <ShareModal></ShareModal>
 </div>
 
 <script>
@@ -22,6 +24,7 @@
     import Footer from '/components/layout/Footer.svelte'
     import Queue from '/components/Queue.svelte'
     import Viewer from '/components/Viewer.svelte'
+    import ShareModal from '/components/ShareModal.svelte'
     import { get, writable, writableLocalStorage, derived, scan, wait, startWith, distinct } from '/services/store.js'
     import { radioIterator, radioShareIterator } from '/services/radio.js'
     import DeepSet from '/services/deep-set.js'

src/components/ShareModal.svelte

@@ -0,0 +1,32 @@
+
+<div class="modal" id="share-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" on:click={() => closeModal()}></div>
+
+    <div class="modal__container" role="dialog" aria-modal="true">
+        <button class="modal__close" aria-label="close" on:click={() => closeModal()}></button>
+        <div class="modal__title">Share this song</div>
+        <div class="modal__content">
+            <input class="modalShare__input f-size-full w100" readonly type="text" value="https://radio.eldritch.cafe/share/eldritch.cafe/1645635448?large">
+            <div class="modalShare__controls">
+                <div class="modalShare__bigplayer">
+                    <input type="checkbox" id="bigplayer_active">
+                    <label for="bigplayer_active">active big player</label>
+                </div>
+                <button class="modalShare__copy">copy</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+import MicroModal from 'micromodal';
+MicroModal.init();
+
+
+let closeModal = () => {
+    MicroModal.close('share-modal');
+}
+
+
+</script>