From d33cc055dd9d02c1e28ed0f08b3fcf6ba982cb24 Mon Sep 17 00:00:00 2001
From: Ben Halpern <ben@dev.to>
Date: Fri, 14 Jun 2019 18:54:42 -0400
Subject: [PATCH] Adjust notification subscriptions JS and css (#3165)

---
 app/assets/stylesheets/article-show.scss      |   4 +-
 .../packs/notificationSubscriptionHandler.js  | 143 +++++++++---------
 2 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index 1d34436a8..5baf6afb2 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -1159,7 +1159,7 @@ article {
       .dropdown-content {
         display: none;
         position: fixed;
-        bottom: 60px;
+        bottom: 55px;
         right: 0;
         left: 0;
         z-index: 100;
@@ -1307,6 +1307,8 @@ article {
             .selected-emoji {
               visibility: hidden;
               margin-left: 4px;
+              font-size: 1.2em;
+              vertical-align: -0.1em;
             }
             &.selected {
               .selected-emoji {
diff --git a/app/javascript/packs/notificationSubscriptionHandler.js b/app/javascript/packs/notificationSubscriptionHandler.js
index a356ca3a9..1b65f1be0 100644
--- a/app/javascript/packs/notificationSubscriptionHandler.js
+++ b/app/javascript/packs/notificationSubscriptionHandler.js
@@ -1,81 +1,88 @@
-const subscriptionStatusInput = document.getElementById(
-  'notification-subscription-status',
-);
-const {notifiableId} = document.getElementById(
-  'notification-subscriptions-area',
-).dataset;
-const {notifiableType} = document.getElementById(
-  'notification-subscriptions-area',
-).dataset;
-
-
-const userStatus = document
-  .getElementsByTagName('body')[0]
-  .getAttribute('data-user-status');
-
-if (userStatus === 'logged-in') {
-  fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
-    headers: {
-      Accept: 'application/json',
-      'X-CSRF-Token': window.csrfToken,
-      'Content-Type': 'application/json',
-    },
-    credentials: 'same-origin',
-  })
-    .then(response => response.json())
-    .then(result => {
-      document.getElementById(`notification-subscription-label_${result.config}`).classList.add('selected');
-      // checkbox.checked = result;
-    });
-}
-
-let updateStatus = () => {};
-
-if (userStatus === 'logged-out') {
-  updateStatus = () => {
-    // Disabled because showModal() is globally defined in asset pipeline
-    // eslint-disable-next-line no-undef
-    showModal('notification-subscription');
-  };
-} else {
-  updateStatus = (target) => {
-    const allButtons = document.getElementsByClassName('notification-subscription-label');
-    for(let i = 0; i < allButtons.length; i += 1) {
-      allButtons[i].classList.remove('selected')
-    }
-    target.classList.add('selected');
+function loadFunctionality() {
+  if (!document.getElementById(
+    'notification-subscriptions-area',
+  )) {
+    return;
+  }
+  const {notifiableId} = document.getElementById(
+    'notification-subscriptions-area',
+  ).dataset;
+  const {notifiableType} = document.getElementById(
+    'notification-subscriptions-area',
+  ).dataset;
+  
+  
+  const userStatus = document
+    .getElementsByTagName('body')[0]
+    .getAttribute('data-user-status');
+  
+  if (userStatus === 'logged-in') {
     fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
-      method: 'POST',
       headers: {
         Accept: 'application/json',
         'X-CSRF-Token': window.csrfToken,
         'Content-Type': 'application/json',
       },
       credentials: 'same-origin',
-      body: JSON.stringify({
-        config: target.dataset.payload,
-        // notifiable params are passed via URL
-      }),
     })
       .then(response => response.json())
       .then(result => {
+        document.getElementById(`notification-subscription-label_${result.config}`).classList.add('selected');
+        // checkbox.checked = result;
       });
-  };
-}
-
-const subscriptionButtons = document.getElementsByClassName('notification-subscription-label');
-
-for(let i = 0; i < subscriptionButtons.length; i += 1) {
-  subscriptionButtons[i].addEventListener('click', e => {
-    e.preventDefault();
-    updateStatus(e.target);
-    if (typeof sendHapticMessage !== "undefined") {
-      sendHapticMessage('medium');
-    }
-  });
-  subscriptionButtons[i].addEventListener('keydown', e => {
-    if (e.key === 'Enter') {
+  }
+  
+  let updateStatus = () => {};
+  
+  if (userStatus === 'logged-out') {
+    updateStatus = () => {
+      // Disabled because showModal() is globally defined in asset pipeline
+      // eslint-disable-next-line no-undef
+      showModal('notification-subscription');
+    };
+  } else {
+    updateStatus = (target) => {
+      const allButtons = document.getElementsByClassName('notification-subscription-label');
+      for(let i = 0; i < allButtons.length; i += 1) {
+        allButtons[i].classList.remove('selected')
+      }
+      target.classList.add('selected');
+      fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'X-CSRF-Token': window.csrfToken,
+          'Content-Type': 'application/json',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify({
+          config: target.dataset.payload,
+          // notifiable params are passed via URL
+        }),
+      })
+    };
+  }
+  
+  const subscriptionButtons = document.getElementsByClassName('notification-subscription-label');
+  
+  for(let i = 0; i < subscriptionButtons.length; i += 1) {
+    subscriptionButtons[i].addEventListener('click', e => {
+      e.preventDefault();
       updateStatus(e.target);
-    }
-  });  
+      if (typeof sendHapticMessage !== "undefined") {
+        sendHapticMessage('medium');
+      }
+    });
+    subscriptionButtons[i].addEventListener('keydown', e => {
+      if (e.key === 'Enter') {
+        updateStatus(e.target);
+      }
+    });  
+  }
 }
+
+window.InstantClick.on('change', () => {
+  loadFunctionality();
+});
+
+loadFunctionality();
\ No newline at end of file