swapped out pdf for newer one, commented out GA events for now, adding GTM tag, calculator numbers updated

assets/js/calculator/carbon-calculator.js

@@ -1,8 +1,8 @@
-let arr = {
+let calculator_data = {
   'btc': {
     'kWh': 487.3687578,
     'tons': 0.0000002426743,
-    'gas': 38.7744
+    'gas': 38.77453
   },
   'eth': {
     'kWh': 42.86334969,
@@ -12,7 +12,7 @@ let arr = {
   'pap': {
     'kWh': 0.044,
     'tons': 0.0000000000232,
-    'gas': 0.00350
+    'gas': 0.0035
   },
   'xrp': {
     'kWh': 0.0079,
@@ -63,16 +63,20 @@ let slider = document.getElementById( 'myRange' ),
 // Update the current slider value (each time you drag the slider handle)
 function doCalculations(val){
 
+  // This loops through all the dataTypes returning the calculations for the selected one
   [].slice.call(dataTypes).forEach( function( dataType ){
 
+    // if 'active', do calculations
     if (dataType.classList.contains('active')){
 
+      // looping through the calculator data
       let data_type = dataType.getAttribute( 'data-type' ),
         data_comp = dataType.getAttribute( 'data-comp' ),
-        total =  val * 1000000 * arr[ data_type ][ data_comp ],
+        total =  val * 1000000 * calculator_data[ data_type ][ data_comp ],
         num = document.getElementById( data_comp + '-' + data_type ),
-        // comp = the number of kWh Portugal used in 2019
+
-        kwhComp = ( total / 50340000000 ).toFixed( 2 );
+        // kWhcomp = the number of kWh Portugal used in 2019
+        kWhComp = ( total / 50340000000 ).toFixed( 2 );
 
       if (data_comp === 'tons') {
         total = total * 1000000;
@@ -81,17 +85,19 @@ function doCalculations(val){
       num.innerHTML = total.commarize();
       num.style.transition = "all .2s ease-in-out";
 
-      if (data_comp === 'kWh' && kwhComp > .02){
+      // This is for the kWh comparison, it animates the transition/selection
+      if (data_comp === 'kWh' && kWhComp > .02){
         let dot = document.getElementById(data_comp + '-' + data_type + '-dot');
         dot.style.transition = "all .2s ease-in-out";
-        dot.style.transform = "scale(" + kwhComp * 100 + ")";
+        dot.style.transform = "scale(" + kWhComp * 100 + ")";
-        dot.style.webkitTransform = "scale(" + kwhComp * 100 + ")";
+        dot.style.webkitTransform = "scale(" + kWhComp * 100 + ")";
-        dot.style.msTransform = "scale(" + kwhComp * 100 + ")";
+        dot.style.msTransform = "scale(" + kWhComp * 100 + ")";
       }
     }
   })
 }
 
+// This function is for the slider to highlight the selected number
 function highlightNum(val){
   [].slice.call(dataTxns).forEach(function(dataTxn){
     dataTxn.classList.remove('active');
@@ -99,25 +105,25 @@ function highlightNum(val){
       dataTxn.classList.add('active')
     }
   });
-  // $('#myRange .dash').removeClass('active');
-  // $('#myRange .dash[data-num="' + val + '"]').addClass('active');
 }
 
+// Run animations if crypto is selected
 function cryptoSelected(){
   gasCryptoAnimation();
   co2CryptoAnimation();
 }
-
+// Run animations if cash is selected
 function cashSelected(){
   gasCashAnimation();
   co2CashAnimation();
 }
-
+// Run animations if credit is selected
 function creditSelected(){
   gasCreditAnimation();
   co2CreditAnimation();
 }
 
+// This is function to select the data type
 function changeDataType( type ){
 
   [].slice.call(dataTypes).forEach( function(dataType){
@@ -139,25 +145,30 @@ function changeDataType( type ){
     }
   });
 
+  // based on toggle, then to calculations + slider value
   doCalculations(slider.value);
 
 }
 
 $('.tab-link').on('click', function(e){
+  e.preventDefault();
   $('#data-selector li').removeClass('active');
   $(this).parent('li').addClass('active');
 
+  // Pass the type to the Change Data function
   let type = $(this).data("currencytype");
-
   changeDataType(type);
-  e.preventDefault();
+  // ga( 'send', 'event', 'Carbon Calculator', 'Toggle Data Type', type );
 })
 
+// This is main section that will run the functions once the page is ready
 $(document).ready(function(){
-   [].slice.call(txns).forEach(function(txn){
+  // gets the slider value
+  [].slice.call(txns).forEach(function(txn){
     txn.innerHTML = slider.value;
   })
 
+  // On the slider change, run the Calculator functions
   slider.oninput = function() {
     var val = this.value;
     [].slice.call(txns).forEach(function(txn){
@@ -165,11 +176,14 @@ $(document).ready(function(){
     });
     highlightNum(val);
     doCalculations(val);
+    // ga( 'send', 'event', 'Carbon Calculator', 'Slider Data Amount', val );
   }
 
+  // On page load, run default functions
   doCalculations(slider.value);
   cryptoSelected();
 
+  // For mobile, show or hide the button
   $(window).on('load resize scroll', function() {
     if ($(window).width() < 993) {
       let distance = $('#calculator-outputs').offset().top,
@@ -189,6 +203,7 @@ $(document).ready(function(){
     }
   });
 
+  // This is the mobile button
   $('#calculator-mobile-toggle').on( 'click', function(e){
     e.preventDefault();
 
@@ -201,14 +216,16 @@ $(document).ready(function(){
       inputs.removeClass('sticky');
       inputs_offset.removeClass('offset');
       $(this).text('Change Inputs');
+      // ga( 'send', 'event', 'Carbon Calculator', 'Mobile Toggle', 'Change Inputs' );
     } else {
       inputs.addClass('sticky show');
       inputs_offset.addClass('offset');
       $(this).text('Hide Inputs');
+      // ga( 'send', 'event', 'Carbon Calculator', 'Mobile Toggle', 'Hide Inputs' );
     }
   });
 
-  $(document).on('click', 'a[href^="#"]', function(event) {
+  $(document).on('click', 'a[href^="#calculator"]', function(event) {
     event.preventDefault();
 
     $('html, body').animate({

tool/template-base.html

@@ -20,6 +20,13 @@
     <!-- jQuery -->
     <script src="{{currentpage.prefix}}assets/vendor/jquery-1.11.1.min.js"></script>
 
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-KCQZ3L8');</script>
+
     <!-- Stylesheet -->
     <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
     {% if target.lang=="ja" %}
@@ -58,6 +65,11 @@
 
 <body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">
 
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+
   {% include 'template-top-nav.html' %}
 
   <div class="container-fluid" role="document" id="main_content_wrapper">

tool/template-calculator.html

@@ -284,18 +284,18 @@
               <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="assets/img/icons/bitcoin@2x.png"></div>Bitcoin</td>
               <td class="fs-6 text-right">487.3688<span class="ratio"> kWh/tx</span></td>
               <td class="fs-6 text-right">2.42<sup>-7</sup><span class="ratio"> Mt/tx</span></td>
-              <td class="fs-6 text-right">38.7744<span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 text-right">38.7745<span class="ratio"> gal/tx</span></td>
             </tr>
             <tr>
               <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="assets/img/icons/ethereum@2x.png"></div>Ethereum</td>
               <td class="fs-6 text-right">42.8633<span class="ratio"> kWh/tx</span></td>
-              <td class="fs-6 text-right">4.5<sup>-8</sup><span class="ratio"> Mt/tx</span></td>
+              <td class="fs-6 text-right">2.73<sup>-8</sup><span class="ratio"> Mt/tx</span></td>
-              <td class="fs-6 text-right">1.1311<span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 text-right">2.3867<span class="ratio"> gal/tx</span></td>
             </tr>
             <tr>
               <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="assets/img/icons/xrp@2x.png"></div>XRP</td>
               <td class="fs-6 text-right">0.0079<span class="ratio"> kWh/tx</span></td>
-              <td class="fs-6 text-right">3.7<sup>-12</sup><span class="ratio"> Mt/tx</span></td>
+              <td class="fs-6 text-right">4.5<sup>-12</sup><span class="ratio"> Mt/tx</span></td>
               <td class="fs-6 text-right">0.00063<span class="ratio"> gal/tx</span></td>
             </tr>
             <tr>
@@ -346,7 +346,6 @@
       animationData: coCash
     });
   };
-
   function co2CreditAnimation() {
     bodymovin.loadAnimation({
       container: document.getElementById('co2Animation'),
@@ -356,7 +355,6 @@
       animationData: coCredit
     });
   };
-
   function co2CryptoAnimation() {
     bodymovin.loadAnimation({
       container: document.getElementById('co2Animation'),
@@ -366,7 +364,6 @@
       animationData: coCrypto
     });
   };
-
   function gasCryptoAnimation() {
     bodymovin.loadAnimation({
       container: document.getElementById('gasAnimation'),
@@ -376,7 +373,6 @@
       animationData: gasCrypto
     });
   };
-
   function gasCashAnimation() {
     bodymovin.loadAnimation({
       container: document.getElementById('gasAnimation'),
@@ -386,7 +382,6 @@
       animationData: gasCash
     });
   };
-
   function gasCreditAnimation() {
     bodymovin.loadAnimation({
       container: document.getElementById('gasAnimation'),
@@ -396,8 +391,6 @@
       animationData: gasCredit
     });
   };
-
-
 </script>
 
 
@@ -405,6 +398,4 @@
   gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
 </script>
 
-
-
 {% endblock %}