setBootstrapTooltip

function

setBootstrapTooltip()

set tooltip by bootstrap

function setBootstrapTooltip() {
  if ( $.fn.tooltip ) {
    $( '[data-toggle="tooltip"]' ).tooltip();
  }
}

setRippleEffect

function

setRippleEffect()

set ripple effect by Waves
work on chrome only

function setRippleEffect() {
  if ( Waves.displayEffect() ) {
    Waves.displayEffect();  
  }
}

setLightbox

function

setLightbox()

set lightbox by MagnificPopup

function setLightbox() {
  if ( $.fn.magnificPopup ) {
    $( '.mfp-zoom' ).magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      closeBtnInside: false,
      mainClass: 'mfp-with-zoom',
      image: {
        verticalFit: true
      }
    });
  }
}

setFormValidationNotifyByModal

function

setFormValidationNotifyByModal()

Option name	Type	Description
formSelector	Selector	form selector that you want to check

set form validation by validate
notify with modal
require bootstrap modal

function setFormValidationNotifyByModal( formSelector ) {
  if ( $.fn.validate ) {
    var requiredFieldMsg = 'field is required';
    var validEmailMsg = 'email is invalid';

    $( formSelector ).validate({
      errorClass: 'error-msg',
      rules: {
        name2:     { required: true },
        email2:    { required: true, email: true },
        subject2:  { required: true },
        message2:  { required: true }
      },
      messages: {
        name2:     { required: requiredFieldMsg },
        email2:    { required: requiredFieldMsg, email: validEmailMsg },
        subject2:  { required: requiredFieldMsg },
        message2:  { required: requiredFieldMsg }
      },
      submitHandler: function( form ) {

        // random result of form submit
        var isError = Math.random() >= 0.5;

        // bootstrap modal
        if ( isError ) {
          $( '#form-error-modal' ).modal();
        } else {
          $( '#form-success-modal' ).modal();
        }
      }
    });
  }
}

setFormValidationNotifyByAlert

function

setFormValidationNotifyByAlert()

set form validation by validate
notify with alert
require bootstrap alert

function setFormValidationNotifyByAlert() {
  var $formSelector = $( '#contact-form' );
  var $formErrorSelector = $( '.contact-panel .panel-heading' );

  if ( $.fn.validate ) {
    var requiredFieldMsg = 'field is required';
    var validEmailMsg = 'email is invalid';

    $formSelector.validate({
      errorClass: 'error-msg',
      rules: {
        name:     { required: true },
        email:    { required: true, email: true },
        subject:  { required: true },
        message:  { required: true }
      },
      messages: {
        name:     { required: requiredFieldMsg },
        email:    { required: requiredFieldMsg, email: validEmailMsg },
        subject:  { required: requiredFieldMsg },
        message:  { required: requiredFieldMsg }
      },
      submitHandler: function( form ) {

        // random result of form submit
        var isError = Math.random() >= 0.5;

        // boostrap alert
        if ( isError ) {
          $formErrorSelector.after(
            '<div id="form-error-alert" class="alert alert-danger alert-dismissible fade in" role="alert"> \
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> \
              <p>Error, try again.</p> \
            </div>'
          );
          setAutoClosingAlert( '#form-error-alert', 2400 );
        } else {
          $formErrorSelector.after(
            '<div id="form-success-alert" class="alert alert-success alert-dismissible fade in" role="alert"> \
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> \
              <p>Thank you, :)</p> \
            </div>'
          );
          setAutoClosingAlert( '#form-success-alert', 2400 );
        }
      }
    });
  }
}

setAutoClosingAlert

function

setAutoClosingAlert()

Option name	Type	Description
selector	Selector	selector of alert box
delay	Number	delay time (ms)

set auto closing alert for boostrap alert

function setAutoClosingAlert( selector, delay ) {
  var alert = $( selector ).alert();
  window.setTimeout(function() { alert.alert( 'close' ) }, delay );
}

setGoogleMap

function

setGoogleMap()

Option name	Type	Description
la	Number	latitude
ln	Number	longitude

set google map

function setGoogleMap( la, ln ) {
  var map;
  map = new GMaps({
    el: '#gmap',
    lat: la,
    lng: ln,
    zoom: 13,
    zoomControl : true,
    zoomControlOpt: {
      style : 'SMALL',
      position: 'TOP_LEFT'
    },
    panControl : false,
    streetViewControl : false,
    scrollwheel: false,
    mapTypeControl: false,
    overviewMapControl: false
  });
}

setPieChart

function

setPieChart()

Option name	Type	Description
selector	Selector	selector of pie chart element

set easy pie chart

function setPieChart( selector ) {
  $( selector ).easyPieChart({
    barColor: '#6AC293',
    trackColor: '#ededed',
    lineCap: 'square',
    lineWidth: '4',
    scaleColor: '#fff',
    onStep: function( from, to, percent ) {
      $( this.el ).find( '.percent' ).text( Math.round( percent ) );
    }
  });
}

initialVendorScript

function

initialVendorScript

initial all vendor functions

var initialVendorScript = new function () {
  
  setBootstrapTooltip();
  setPieChart( '.pie-chart' );
  setRippleEffect();
  setLightbox();
  setFormValidationNotifyByModal( '#contact-form-second' );
  setFormValidationNotifyByAlert();
  setGoogleMap( 40.712784, -74.005941);
}