Merge pull request #128 from theRTC204/permalink-copy-button

feat: Permalink copy button

css/styles.css

@@ -267,10 +267,10 @@ input[type=number] {
   color: #FFF;
 }
 
-.reset-button {
+.button {
+  color: #686868;
   font-family: inherit;
   font-weight: bold;
-  color: #FFBABA;
   padding: 8px 16px;
   border-width: 0px;
   border-radius: 40px;
@@ -281,13 +281,16 @@ input[type=number] {
   margin: 16px auto;
 }
 
-.reset-button:hover {
+.button:hover {
   transform: scale(1.1);
   cursor: pointer;
   opacity: 1;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
 }
 
+.button.button--reset {
+  color: #E45B5B;
+}
 
 .table-wrapper {
   display: inline-block;
@@ -378,7 +381,6 @@ input[type=number] {
   justify-content: center;
 }
 
-
 .waves {
   position: relative;
   width: 100%;
@@ -388,6 +390,74 @@ input[type=number] {
   max-height: 150px;
 }
 
+#permalink-input {
+  display: none;
+  position: fixed;
+}
+
+.permalink {
+  display: none;
+  white-space: nowrap;
+  font-size: 18px;
+  user-select: none;
+  cursor: pointer;
+}
+
+.permalink .fa-copy {
+  margin: 0 8px;
+  height: 20px;
+  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 {

index.html

@@ -194,7 +194,14 @@
             </div>
           </div>
         </div>
-        <button type="button" id="reset" class="reset-button" name="action">
+        <input id="permalink-input" type="text" />
+        <div id="permalink-btn" class="button permalink">
+          <span>Copy permalink</span>
+          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path fill="currentColor" d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path>
+          </svg>
+        </div>
+        <button type="button" id="reset" class="button button--reset" name="action">
           Reset Turnip Prophet
         </button>
       </form>
@@ -309,6 +316,8 @@
     </p>
   </div>
 
+  <div id="snackbar">Some text some message...</div>
+
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
   <script src="js/chart.js"></script>

js/scripts.js

@@ -40,6 +40,9 @@ const sell_inputs = getSellFields()
 const buy_input = $("#buy")
 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) {
@@ -79,6 +82,8 @@ const initialize = function () {
     console.error(e);
   }
 
+  $("#permalink-btn").on("click", copyPermalink)
+
   $("#reset").on("click", function () {
     sell_inputs.forEach(input => input.value = '')
     fillFields([], false, -1)
@@ -267,6 +272,53 @@ const calculateOutput = function (data, first_buy, previous_pattern) {
   update_chart(data, analyzed_possibilities);
 }
 
+const generatePermalink = function (buy_price, sell_prices, first_buy, previous_pattern) {
+  let searchParams = new URLSearchParams();
+  let pricesParam = buy_price ? buy_price.toString() : '';
+
+  if (!isEmpty(sell_prices)) {
+    const filtered = sell_prices.map(price => isNaN(price) ? '' : price).join('.');
+    pricesParam = pricesParam.concat('.', filtered);
+  }
+
+  if (pricesParam) {
+    searchParams.append('prices', pricesParam);
+  }
+
+  if (first_buy) {
+    searchParams.append('first', true);
+  }
+
+  if (previous_pattern !== -1) {
+    searchParams.append('pattern', previous_pattern);
+  }
+
+  return searchParams.toString() && window.location.origin.concat('?', searchParams.toString());
+}
+
+const copyPermalink = function () {
+  let text = permalink_input[0];
+
+  permalink_input.show();
+  text.select();
+  text.setSelectionRange(0, 99999); /* for mobile devices */
+
+  document.execCommand('copy');
+  permalink_input.hide();
+
+  flashMessage("Permalink copied!");
+}
+
+const flashMessage = function(message) {
+  snackbar.text(message);
+  snackbar.addClass('show');
+
+  setTimeout(function () {
+    snackbar.removeClass('show')
+    snackbar.text('');
+  }, 3000);
+}
+
 const update = function () {
   const sell_prices = getSellPrices();
   const buy_price = parseInt(buy_input.val());
@@ -276,6 +328,14 @@ const update = function () {
   buy_input[0].disabled = first_buy;
   buy_input[0].placeholder = first_buy ? '—' : '...'
 
+  const permalink = generatePermalink(buy_price, sell_prices, first_buy, previous_pattern);
+  if (permalink) {
+    permalink_button.show();
+  } else {
+    permalink_button.hide();
+  }
+  permalink_input.val(permalink);
+
   const prices = [buy_price, buy_price, ...sell_prices];
 
   if (!window.populated_from_query) {