Updated steps.js

Improved copy to clipboard functionality
Added dynamic footerLinks
Added console logging

includes/js/steps.js

@@ -1,15 +1,22 @@
 $(function(){
+  stepCount = 0;
+  console.log('%ci12bretro', 'font-weight: 900; font-size: 40px; color: #f00; text-shadow: 3px 3px 0 #000, 4px 4px 0 #fff; border-bottom: 8px double #f00; padding: 0 8px;');
+  console.log('%chttps://youtube.com/c/i12bretro', 'font-size: 9px; margin-left: 60px;');
+  stepsText = [];
   $('textarea').each(function(i,e){
     theTextarea = $(this);
     theTextarea.height((theTextarea[0].scrollHeight-5) +'px');
   });
 
   $('li').each(function(i,e){
+    pi = 0;
     if(!$(this).hasClass('noCheckbox')){
-      var uuid = 'li_' + Math.floor(Math.random() * Math.floor(1000000)).toString() + '_' + i.toString();
-      $(this).contents().wrap('<span id="'+ uuid +'"><label for="cb_'+ uuid +'"></label></span>');
-      $(this).prepend('<input type="checkbox" class="completeBox" id="cb_' + uuid +'" rel="'+ uuid +'" />')
+      var uuid = `li_${(Math.floor(Math.random() * Math.floor(1000000))).toString()}_${i.toString()}`;
+      $(this).contents().wrap(`<span id="${uuid}"><label for="cb_${uuid}"></label></span>`);
+      $(this).prepend(`<input type="checkbox" class="completeBox" id="cb_${uuid}" rel="${uuid}" data-pi="${pi}" />`);
+      pi++;
     }
+    stepCount = pi;
   });
 
   $('code,div.codeBlock,textarea.codeBlock').each(function(i,e){
@@ -18,7 +25,8 @@ $(function(){
     theElement.empty();
     for(l=0;l<lines.length;l++){
       if($.trim(lines[l]) != '' && $.trim(lines[l]).substr(0,1) != '#' && $.trim(lines[l]).indexOf(' #') == -1 && lines[l].substr(0, 4).toUpperCase() != 'REM '){
-        theElement.append('<input type="image" src="images/clipboard.png" value="" class="copy-text" rel="copy_'+ i +'_'+ l +'" data-clipboard-text="'+ $.trim(lines[l].replace(/"/g, '&quot;')) +'" /><span id="copy_'+ i +'_'+ l +'">'+ lines[l] +'</span>');
+        stepsText.push($('<p/>').html($.trim(lines[l]).replace(/<br \/>$|<br\/>$|<br>$/g,'')).text());
+        theElement.append(`<input type="image" src="images/clipboard.png" value="" class="copy-text" data-step-index="${(stepsText.length-1)}" rel="copy_${i}_${l}" /><span id="copy_${i}_${l}">${lines[l]}</span>`);
       } else {
         theElement.append(lines[l]);
       }
@@ -28,7 +36,7 @@ $(function(){
   $(document).on('click','input.copy-text',function(){
     theButton = $(this);
     $('input.copy-text').attr('src','images/clipboard.png');
-    $('span.copy-animation,span.copy-animation-ps').removeClass('copy-animation copy-animation-ps');
+    $('span.copy-animation,span.copy-animation-ps,span.copy-animation-cmd').removeClass('copy-animation copy-animation-ps copy-animation-cmd');
     try {
       if($('#'+ theButton.attr('rel')).parent('div').hasClass('PS')){
         $('#'+ theButton.attr('rel')).addClass('copy-animation-ps');
@@ -37,7 +45,9 @@ $(function(){
       } else {
         $('#'+ theButton.attr('rel')).addClass('copy-animation');
       }
-      navigator.clipboard.writeText(theButton.data('clipboard-text').replace(/<[^>]*>?/gm, ''));
+      console.log('%cCopied:', 'font-style: italic; color: #0f0;');
+      console.log(`%c${stepsText[theButton.data('step-index')]}`, 'margin-left: 25px;');
+      navigator.clipboard.writeText(stepsText[theButton.data('step-index')]);
       theButton.attr('src','images/clipboard_active.png');
     } catch(err) {
     }
@@ -56,4 +66,12 @@ $(function(){
       }
     });
   });
+
+  $('#gridContainer').append('<div /><div id="footerLinks"/>');
+  $.ajax({ url: './includes/sites.json', type: 'get', dataType: 'json', success: function(r){
+      $.each(r, function(k,v){
+        $('#footerLinks').append(`<a href="${r[k].url}" target="_blank"><img src="${r[k].icon}" alt="${r[k].text}" title="${r[k].text}" /></a>`);
+      });
+    }
+  });
 });