Separate inline listeners (#303)

layout/_partials/post/post-reward.njk

@@ -1,6 +1,6 @@
 <div class="reward-container">
   <div>{{ page.reward_settings.comment }}</div>
-  <button onclick="document.querySelector('.post-reward').classList.toggle('active');">
+  <button>
     {{ __('reward.donate') }}
   </button>
   <div class="post-reward">

layout/_partials/sidebar/site-overview.njk

@@ -62,10 +62,8 @@
 
 {%- if theme.chat.enable and (theme.chatra.enable or theme.tidio.enable or theme.gitter.enable) %}
   <div class="sidebar-button site-overview-item animated">
-  {%- if theme.chatra.enable %}
-    <button onclick="Chatra('openChat', true);">
-  {%- elif theme.tidio.enable %}
-    <button onclick="tidioChatApi.open();">
+  {%- if theme.chatra.enable or theme.tidio.enable %}
+    <button>
   {%- elif theme.gitter.enable %}
     <button class="js-gitter-toggle-chat-button">
   {%- endif %}

layout/_third-party/chat/tidio.njk

@@ -1 +1,2 @@
 <script src="//code.tidio.co/{{ theme.tidio.key }}.js"></script>
+{{ next_js('third-party/chat/tidio.js') }}

source/js/next-boot.js

@@ -76,6 +76,7 @@ NexT.boot.refresh = function() {
   NexT.utils.registerActiveMenuItem();
   NexT.utils.registerLangSelect();
   NexT.utils.registerSidebarTOC();
+  NexT.utils.registerPostReward();
   NexT.utils.wrapTableWithBox();
   NexT.utils.registerVideoIframe();
 };

source/js/third-party/chat/chatra.js

@@ -1,10 +1,19 @@
-/* global CONFIG */
+/* global CONFIG, Chatra */
 
-if (CONFIG.chatra.embed) {
-  window.ChatraSetup = {
-    mode    : 'frame',
-    injectTo: CONFIG.chatra.embed
-  };
-}
+(function() {
+  if (CONFIG.chatra.embed) {
+    window.ChatraSetup = {
+      mode    : 'frame',
+      injectTo: CONFIG.chatra.embed
+    };
+  }
 
-window.ChatraID = CONFIG.chatra.id;
+  window.ChatraID = CONFIG.chatra.id;
+
+  const chatButton = document.querySelector('.sidebar-button button');
+  if (chatButton) {
+    chatButton.addEventListener('click', () => {
+      Chatra('openChat', true);
+    });
+  }
+})();

source/js/third-party/chat/tidio.js

@@ -0,0 +1,10 @@
+/* global tidioChatApi */
+
+(function() {
+  const chatButton = document.querySelector('.sidebar-button button');
+  if (chatButton) {
+    chatButton.addEventListener('click', () => {
+      tidioChatApi.open();
+    });
+  }
+})();

source/js/utils.js

@@ -282,6 +282,14 @@ NexT.utils = {
     });
   },
 
+  registerPostReward: function() {
+    const button = document.querySelector('.reward-container button');
+    if (!button) return;
+    button.addEventListener('click', () => {
+      document.querySelector('.post-reward').classList.toggle('active');
+    });
+  },
+
   activateNavByIndex: function(index) {
     const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
     if (!target || target.classList.contains('active-current')) return;