From f89039454b58b2723f5946d04429ea00c1b5d04e Mon Sep 17 00:00:00 2001
From: Ryan Carbotte
Date: Wed, 15 Apr 2020 21:32:59 -0500
Subject: [PATCH] feat: Add a flash message on permalink copy
---
css/styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 2 ++
js/scripts.js | 13 ++++++++++++-
3 files changed, 64 insertions(+), 1 deletion(-)
diff --git a/css/styles.css b/css/styles.css
index 60c9aa2..e50dc5f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -409,6 +409,56 @@ input[type=number] {
color: #0AB5CD;
}
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#snackbar {
+ visibility: hidden; /* Hidden by default. Visible on click */
+ min-width: 250px; /* Set a default minimum width */
+ background-color: #FFFAE5; /* Black background color */
+ font-family: 'Raleway', sans-serif;
+ font-weight: 800;
+ font-size: 1rem;
+ color: #837865;
+ letter-spacing: 0.2px;
+ line-height: 1.8rem;
+ text-align: center; /* Centered text */
+ border-radius: 40px; /* Rounded borders */
+ padding: 16px 24px; /* Padding */
+ position: fixed; /* Sit on top of the screen */
+ z-index: 1; /* Add a z-index if needed */
+ bottom: 30px; /* 30px from the bottom */
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#snackbar.show {
+ visibility: visible; /* Show the snackbar */
+ /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+ However, delay the fade out process for 2.5 seconds */
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
/* Animation */
.parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
diff --git a/index.html b/index.html
index d504ae0..72fe282 100644
--- a/index.html
+++ b/index.html
@@ -304,6 +304,8 @@
+ Some text some message...
+
diff --git a/js/scripts.js b/js/scripts.js
index 817ddfb..3438a3a 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -42,6 +42,7 @@ const first_buy_radios = getFirstBuyRadios()
const previous_pattern_radios = getPreviousPatternRadios()
const permalink_input = $('#permalink-input')
const permalink_button = $('#permalink-btn')
+const snackbar = $('#snackbar')
//Functions
const fillFields = function (prices, first_buy, previous_pattern) {
@@ -305,7 +306,17 @@ const copyPermalink = function () {
document.execCommand('copy');
permalink_input.hide();
- alert('Copied!');
+ flashMessage("Permalink copied!");
+}
+
+const flashMessage = function(message) {
+ snackbar.text(message);
+ snackbar.addClass('show');
+
+ setTimeout(function () {
+ snackbar.removeClass('show')
+ snackbar.text('');
+ }, 3000);
}
const update = function () {