Webpage Contact Details Encryption (with **HTML**, **Vanilla JavaScript** and/or **jQuery**)

webpage_contact_encryption.md

Webpage Contact Details Encryption

Encrypted tel: / mailto: action for contact to work on click:

• HTML implementation:

  <a class="cryptedphone" href="#" data-area="0123" data-line="456 789" target="_blank" title="Contact by phone">Phone</a>
  <a class="cryptedmail" href="#" data-name="info" data-domain="example" data-tld="com" target="_blank" title="Contact by email">Email</a>

  Where the contact details are to be added in a splitted way like:

  • data-area="<PREFIX_NUMBER>" and data-line="<NUMBER> for phone / fax / mobile
  • data-name="<NAME>", data-domain="<DOMAIN>" and data-tld="<TOP_LEVEL_DOMAIN> for mail

• Vanilla Javascript implementation:

  // Load encrypted mail and phone after click event
  var siteContactClickEncryption = function () {
    // Add click handler for encrypted mail to update href to send mail
    var mails = document.querySelectorAll('.cryptedmail');
    mails.forEach(elem => {
      elem.addEventListener("click", event => {
        elem.href = 'mailto:' + elem.dataset.name + '@' + elem.dataset.domain + '.' + elem.dataset.tld + '?subject=' + encodeURIComponent('SUBJECT TITLE with DATE - ' + new Date().toLocaleDateString()) + '&body=' + encodeURIComponent('BODY CONTENT with ENTRIES in newlines \n\t\nFirst Name:\t\nSurname:\t\n');
      })
    });
  
    // Add click handler for encrypted phone to update href to dial phone number
    var phones = document.querySelectorAll('.cryptedphone');
    phones.forEach(elem => {
      elem.addEventListener("click", event => {
        elem.href = ('tel:' + elem.dataset.area + ' - ' + elem.dataset.line).replace(/\s/g, '');
      })
    });
  };
  siteContactClickEncryption();

• jQuery implementation:

  // Load encrypted mail and phone after click event
  var siteContactClickEncryption = function () {
    // Add click handler for encrypted mail to update href to send mail
    $('.cryptedmail').on('click', function () {
      let data = $(this)[0].dataset;
      this.href = 'mailto:' + data.name + '@' + data.domain + '.' + data.tld + '?subject=' + encodeURIComponent('SUBJECT TITLE with DATE - ' + new Date().toLocaleDateString()) + '&body=' + encodeURIComponent('BODY CONTENT with ENTRIES in newlines \n\t\nFirst Name:\t\nSurname:\t\n');
    });
    
    // Add click handler for encrypted phone to update href to dial phone number
    $('.cryptedphone').on('click', function () {
      let data = $(this)[0].dataset;
      this.href = ('tel:' + data.area + ' - ' + data.line).replace(/\s/g, '');
    });
  };
  siteContactClickEncryption();

Encrypted phone / fax / mobile / mail contact to display after page load:

• HTML implementation:

  <p>Mobile: <a class="cryptedphone" href="#" data-area="0123" data-line="456 789" target="_blank" title="Contact by phone"><!----></a></p>
  <p>Email: <a class="cryptedmail" href="#" data-name="info" data-domain="example" data-tld="com" target="_blank" title="Contact by mail"><!----></a></p>

  Where the contact details are to be added in a splitted way like:

  • data-area="<PREFIX_NUMBER>" and data-line="<NUMBER> for phone / fax / mobile
  • data-name="<NAME>", data-domain="<DOMAIN>" and data-tld="<TOP_LEVEL_DOMAIN> for mail

• Vanilla JavaScript implementation:

  // Load encrypted mail and phone after page load
  var siteContactDisplay = function () {
    window.onload = function(event) {
      // Get nodes with encrypted mail and update text from comment to mail
      var mails = document.querySelectorAll('footer .cryptedmail');
      mails.forEach(function (elem) {
        elem.innerHTML = elem.dataset.name + '@' + elem.dataset.domain + '.' + elem.dataset.tld;
      });
  
      // Get nodes with encrypted phone and update text from comment to phone number
      var phones = document.querySelectorAll('footer .cryptedphone');
      phones.forEach(function (elem) {
        elem.innerHTML = elem.dataset.area + ' - ' + elem.dataset.line;
      });
    };
  };
  siteContactDisplay();

• jQuery implementation:

  // Load encrypted mail and phone after page load
  var siteContactDisplay = function () {
    $(window).on('load', function () {
      // Get nodes with encrypted mail and update text from comment to mail
      $('footer .cryptedmail').each(function () {
        $(this).html($(this)[0].dataset.name + '@' + $(this)[0].dataset.domain + '.' + $(this)[0].dataset.tld);
      });
  
      // Get nodes with encrypted phone and update text from comment to phone number
      $('footer .cryptedphone').each(function () {
        $(this).html($(this)[0].dataset.area + ' - ' + $(this)[0].dataset.line);
      });
    });
  };
  siteContactDisplay();