https://sourceable.net/wp-content/themes/sourceable/js/main.js

1jQuery(document).ready(function($){
2	
3	 
4	//check if a .cd-tour-wrapper exists in the DOM - if yes, initialize it
5	$('.cd-tour-wrapper').exists() && initTour();
6
7	function initTour() {
8		var tourWrapper = $('.cd-tour-wrapper'),
9			tourSteps = tourWrapper.children('li'),
10			stepsNumber = tourSteps.length,
11			coverLayer = $('.cd-cover-layer'),
12			tourStepInfo = $('.cd-more-info'),
13			tourTrigger = $('#cd-tour-trigger');
14
15		//create the navigation for each step of the tour
16		createNavigation(tourSteps, stepsNumber);
17	
18			//start tour
19			if(!tourWrapper.hasClass('active')) {
20				//in that case, the tour has not been started yet
21				tourWrapper.addClass('active');
22				showStep(tourSteps.eq(0), coverLayer);
23			}
24		
25
26		//change visible step
27		tourStepInfo.on('click', '.cd-prev', function(event){
28			//go to prev step - if available
29			( !$(event.target).hasClass('inactive') ) && changeStep(tourSteps, coverLayer, 'prev');
30		});
31		
32		tourStepInfo.on('click', '.cd-next', function(event){
33			//go to next step - if available
34			( !$(event.target).hasClass('inactive') ) && changeStep(tourSteps, coverLayer, 'next');
35		});
36
37		//close tour
38		tourStepInfo.on('click', '.cd-close', function(event){
39			closeTour(tourSteps, tourWrapper, coverLayer);
40		});
41
42		//detect swipe event on mobile - change visible step
43		tourStepInfo.on('swiperight', function(event){
44			//go to prev step - if available
45			if( !$(this).find('.cd-prev').hasClass('inactive') && viewportSize() == 'mobile' ) changeStep(tourSteps, coverLayer, 'prev');
46		});
47		tourStepInfo.on('swipeleft', function(event){
48			//go to next step - if available
49			if( !$(this).find('.cd-next').hasClass('inactive') && viewportSize() == 'mobile' ) changeStep(tourSteps, coverLayer, 'next');
50		});
51
52		//keyboard navigation
53		$(document).keyup(function(event){
54			if( event.which=='37' && !tourSteps.filter('.is-selected').find('.cd-prev').hasClass('inactive') ) {
55				changeStep(tourSteps, coverLayer, 'prev');
56			} else if( event.which=='39' && !tourSteps.filter('.is-selected').find('.cd-next').hasClass('inactive') ) {
57				changeStep(tourSteps, coverLayer, 'next');
58			} else if( event.which=='27' ) {
59				closeTour(tourSteps, tourWrapper, coverLayer);
60			}
61		});
62	}
63
64	function createNavigation(steps, n) {
65		var tourNavigationHtml = '<div class="cd-nav"><span><b class="cd-actual-step">1</b> of '+n+'</span><ul class="cd-tour-nav"><li><a href="javascript:void(0)" class="cd-prev">&#171; Previous</a></li><li><a href="javascript:void(0)" class="cd-next">Next &#187;</a></li></ul></div><a href="javascript:void(0)" class="cd-close">Close</a>';
66
67		steps.each(function(index){
68			var step = $(this),
69				stepNumber = index + 1,
70				nextClass = ( stepNumber < n ) ? '' : 'inactive',
71				prevClass = ( stepNumber == 1 ) ? 'inactive' : '';
72			var nav = $(tourNavigationHtml).find('.cd-next').addClass(nextClass).end().find('.cd-prev').addClass(prevClass).end().find('.cd-actual-step').html(stepNumber).end().appendTo(step.children('.cd-more-info'));
73		});
74	}
75
76	function showStep(step, layer) {
77		step.addClass('is-selected').removeClass('move-left');
78		smoothScroll(step.children('.cd-more-info'));
79		showLayer(layer);
80	}
81
82	function smoothScroll(element) {
83		(element.offset().top < $(window).scrollTop()) && $('body,html').animate({'scrollTop': element.offset().top}, 100);
84		(element.offset().top + element.height() > $(window).scrollTop() + $(window).height() ) && $('body,html').animate({'scrollTop': element.offset().top + element.height() - $(window).height()}, 100); 
85	}
86
87	function showLayer(layer) {
88		layer.addClass('is-visible').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
89			layer.removeClass('is-visible');
90		});
91	}
92
93	function changeStep(steps, layer, bool) {
94		var visibleStep = steps.filter('.is-selected'),
95			delay = (viewportSize() == 'desktop') ? 300: 0; 
96		visibleStep.removeClass('is-selected');
97
98		(bool == 'next') && visibleStep.addClass('move-left');
99
100		setTimeout(function(){
101			( bool == 'next' )
102				? showStep(visibleStep.next(), layer)
103				: showStep(visibleStep.prev(), layer);
104		}, delay);
105	}
106
107	function closeTour(steps, wrapper, layer) {
108		steps.removeClass('is-selected move-left');
109		wrapper.removeClass('active');
110		layer.removeClass('is-visible');
111	}
112
113	function viewportSize() {
114		/* retrieve the content value of .cd-main::before to check the actua mq */
115		return window.getComputedStyle(document.querySelector('.cd-tour-wrapper'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
116	}
117});
118
119//check if an element exists in the DOM
120jQuery.fn.exists = function(){ return this.length > 0; }