JS

Philosophy

To limit bugs and to make maintaining sites more efficient, we separate HTML classes for CSS and JS.

Syntax & Formatting

Syntax and formatting are keys to a maintainable project. By keeping our code style consistent, we not only help ourselves debug faster but we’re also lessening the burden on those who will have to maintain our code (maybe ourselves too!).

Use js- class names

One way to mitigate such bugs is to use a js-* class name to denote a relationship with the DOM element in question.

For example:

<div class="site-navigation js-site-navigation">

</div>

And in the JavaScript code:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

As a convention, anyone who sees the js-site-navigation class name would understand that there is a relationship with that DOM element in the JavaScript code.

Javascript Functions

Here are some javascript functions to assist you in your engineering feat.

Detect IE

  /**
   * Detect if IE
   *
   * @return {Boolean}
   */
  function isIE() {

    var undef,rv = -1; // Return value assumes failure.
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');

    if (msie > 0) {
      // IE 10 or older => return version number
      rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
      console.log( rv )
    } else if (trident > 0) {
      // IE 11 (or newer) => return version number
      var rvNum = ua.indexOf('rv:');
      rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
      console.log( rv )
    } else {
      return false;
    }

    return ((rv > -1) ? rv : undef);
  }

Replace inline image with background image

This function is usually used with inline images that are set with object-fit: cover. This function takes all of the inline images that have a class of background-image and sets the parent element to have that image src as a background image while hiding the original inline image. Since IE does not support object-fit this function is called only when isIE() returns true.

Dependency:

This function requires Detect IE

//Takes all inline images with class of background-image and sets the parent div with img src background image on ie and edge
  if (isIE() ) {
   setBackgroundImage();
  }


function setBackgroundImage(){
     var images = document.getElementsByClassName("background-image");
      for(var i = 0; i < images.length; i++) {
         var image_src = images[i].src;
         images[i].parentNode.setAttribute("style", "background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;");
         images[i].parentNode.style.backgroundImage = 'url('+ image_src +')';
         images[i].style.display = "none";
      }

  }

Get Donately Campaigns

This function is usually used when you want to pass Donately Campaigns to the original Donately form that loads onto the page. This is not to be used when you have a pre-form that passes data to Donately before loading the Donately form on the page.

Dependency:

This function requires jQuery and babel to compile es6

//Get Donately campaigns and load them into the drop down before loading Donately form
function generateCustomFields(elements) {
  const defaultOption = { value: " ", label: "Please select an option" };
  const generatedOptions = elements.map(element => ({
    value: element.id,
    label: element.title
  }));
  return {
    fields: [
      {
        type: "select",
        id : "campaign_select",
        value: "0",
        after: "amount",
        label: "Please specify where you would like your donation to go:",
        options: [defaultOption, ...generatedOptions]
      }
    ]
  };
}

$.ajax({
  url: "https://api.donately.com/v2/campaigns.json",
  type: "GET",
  data: {
    account_id: "act_ba7d12ab27bb",
    order_by: "desc"
  }
})
  .done(function(result, textStatus, jqXHR) {
    var campaignId = "";
    const customFields = generateCustomFields(result.data);
    Donately.init({
      // Make sure selector exists on page
      selector: "#donation-form",
      options: {
        "donately-id": "act_ba7d12ab27bb",
        "stripe-publishable-key": "pk_test_d3yr4pprarMlwNJjQmlF2eGD",
        "donately-amount": "50",
        "donately-custom-fields": customFields,
        'donately-campaign-id': campaignId,
        'donately-address':'true',
        'donately-amount':'100',
        'donately-phone':'true',
        'donately-comment':'true',
        'donately-custom-fields': customFields,
        'donately-custom-css': JSON.stringify({
        ".donately-stripe-card-element--focused":{"outline-color":"#de7b27","outline-style":"solid","outline-width":"2px"},
         ".donately-stripe-card-element":{"background-color":"#FFFFFF"},
         ".donately-donation-form .donately-btn":{"background-color":"#de7b27"},
         ".donately-donation-form .donately-btn:hover":{"background-color":"#b6631c","color":"#FFFFFF"}})
      },
      afterFormLoad: function() {
        $(".donately-btn").val("Donate")
        $("#campaign_select").change(function() {
          campaignId = $("#campaign_select").val();
        })
      },
      onSuccess: function() {
        // console.log('Success')
      }
    });
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    alert("HTTP Request Failed");
  });

# JS

# Philosophy

# Syntax & Formatting

# Use js- class names

# Javascript Functions

# Detect IE

# Replace inline image with background image

# Get Donately Campaigns