SONEX Documentation

Javascript

All javascript files located in js directory. Sonex require 6 javascript plugins:

1. jquery-2.2.4.min.js
2. bootstrap.min.js
3. imagesloaded.pkgd.min.js
4. isotope.pkgd.min.js
5. jquery.magnific-popup.min.js
6. animsition.min.js

Also Sonex require 1 main javascript file with user's functions called functions.js.

jquery-2.2.4.min.js

jQuery library. See more on jquery.com.

bootstrap.min.js

Bootstrap javascript library. See more on getbootstrap.com.

imagesloaded.pkgd.min.js

Plugin which detect when images have been loaded on page. Used with Isotope on Gallery page. See more on imagesloaded.desandro.com.

isotope.pkgd.min.js

Filter and sort layout plugin which used on index pages with portfolio items. See more on isotope.metafizzy.co.

jquery.magnific-popup.min.js

Lightbox and gallery plugin used in gallery of project page. See more on dimsemenov.com/plugins/magnific-popup/.

animsition.min.js

Plugin for CSS animated page transitions. See more on git.blivesta.com/animsition/.

functions.js

This is a user's javascript file with main function like different calling plugins and some own scripts. File has 6 sections:

1. Dropdown Menu
2. Project Carousel
3. Project Gallery
4. Contact Form
5. Animsition
6. Isotope

Dropdown Menu

Script that responsible for open or close dropdown menu in sidebar.

var dropdownMenu = function() {
	$('#sidebar nav ul .dropdown > span').on('click', function() {
		var $parent = $(this).parent();
		if (!$parent.hasClass('expanded')) {
			$('#sidebar nav ul .dropdown').removeClass('expanded');
			$('#sidebar nav ul .dropdown > ul').slideUp(300);
			$parent.find('> ul').slideDown(300);
			$parent.addClass('expanded');
		} else {
			$parent.removeClass('expanded');
			$parent.find('> ul').slideUp(300);
		}
	});
}

It's just add or remove class .expanded to a parent element when user click.

Project Carousel

Call Boostrap carousel for project page. See more on getbootstrap.com/javascript/#carousel.

var projectCarousel = function() {
	$('#project-page #project-carousel').carousel();
}

Project Gallery

Call Magnific Popup gallery for project page alt. See more ondimsemenov.com/plugins/magnific-popup/.

var projectGallery = function() {
	$('#project-page .gallery').magnificPopup({
		delegate: 'a',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		mainClass: 'mfp-with-zoom mfp-img-mobile',
		image: {
			verticalFit: true
		},
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: true,
			duration: 300,
			opener: function(element) {
				return element.find('img');
			}
		}
	});
}

Contact Form

Function that responsible for the contact form. This function check if all fields of feedback form not empty. If not empty, function create variable called postData and send this data to php/mail.php file. Then this function wait for response and show message.

var contactForm = function() {
	var inputName = $('#contact-name');
	var inputEmail = $('#contact-email');
	var inputSubject = $('#contact-subject');
	var inputMessage = $('#contact-message');
	$('#contact-page #submit').on('click', function() {
		var name = inputName.val();
		var email = inputEmail.val();
		var subject = inputSubject.val();
		var message = inputMessage.val();
		var valid = true;

		if (name == '') {
			inputName.addClass('invalid');
			valid = false;
		}

		if (email == '') {
			inputEmail.addClass('invalid');
			valid = false;
		}

		if (message == '') {
			inputMessage.addClass('invalid');
			valid = false;
		}

		var postData = {
			'name': name,
			'email': email,
			'subject': subject,
			'message': message
		};

		if (valid) {
			$.post('php/mail.php', postData, function(response) {
				$('#contact-page #form-error, #contact-page #form-success').empty();
				for (var i = 0, n = response.length; i < n; i++) {
					if (response[i].status == 0) {
						$('#contact-page #message .error').append('<p>' + response[i].message + '</p>');
						$('#contact-' + response[i].field).addClass('invalid');
					}

					if (response[i].status == 1) {
						$('#contact-page #message .success').append('<p>' + response[i].message + '</p>');
					}
				}
			}, 'json');
		}
		return false;
	});

	$('#contact-page form input, #contact-page form textarea').on('keyup', function() {
		$(this).removeClass('invalid');
	});
}

Animsition

Call plugin for CSS animated page transitions. See more on git.blivesta.com/animsition/.

var animsition = function() {
	$('.global-outer').animsition({
		inClass: 'fade-in',
		outClass: 'fade-out',
		inDuration: 400,
		outDuration: 400,
		linkElement: '.smooth-leave',
		loading: true,
		loadingParentElement: 'body',
		loadingClass: 'animsition-loading',
		loadingInner: '',
		timeout: false,
		timeoutCountdown: 5000,
		onLoadEvent: true,
		browser: [
			'animation-duration',
			'-webkit-animation-duration'
		],
		overlay : false,
		overlayClass : 'animsition-overlay-slide',
		overlayParentElement : 'body',
		transition: function(url) {
			window.location.href = url;
		}
	});
}

Isotope

Call filter and sort layout plugin which used on index pages with portfolio items. See more on isotope.metafizzy.co.

var isotope = function() {
	var $grid = $('#works-grid');
	var $filter = $('#works-filter');

	$grid.imagesLoaded(function() {
		$grid.isotope({
			itemSelector: '.works-item',
			masonry: {
				gutter: '.gutter'
			}
		});
	});

	$filter.find('ul li').on('click', function() {
		$filter.find('ul li').removeClass('active');
		$(this).addClass('active');
		var category = $(this).attr('data-filter');
		$grid.isotope({
			filter: category
		});
		return false;
	});
}

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!