added first three mockups
This commit is contained in:
+17
File diff suppressed because one or more lines are too long
Executable
+151
@@ -0,0 +1,151 @@
|
||||
/*
|
||||
* jQuery.appear
|
||||
* https://github.com/bas2k/jquery.appear/
|
||||
* http://code.google.com/p/jquery-appear/
|
||||
* http://bas2k.ru/
|
||||
*
|
||||
* Copyright (c) 2009 Michael Hixson
|
||||
* Copyright (c) 2012-2014 Alexander Brovikov
|
||||
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.appear = function(fn, options) {
|
||||
|
||||
var settings = $.extend({
|
||||
|
||||
//arbitrary data to pass to fn
|
||||
data: undefined,
|
||||
|
||||
//call fn only on the first appear?
|
||||
one: true,
|
||||
|
||||
// X & Y accuracy
|
||||
accX: 0,
|
||||
accY: 0
|
||||
|
||||
}, options);
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var t = $(this);
|
||||
|
||||
//whether the element is currently visible
|
||||
t.appeared = false;
|
||||
|
||||
if (!fn) {
|
||||
|
||||
//trigger the custom event
|
||||
t.trigger('appear', settings.data);
|
||||
return;
|
||||
}
|
||||
|
||||
var w = $(window);
|
||||
|
||||
//fires the appear event when appropriate
|
||||
var check = function() {
|
||||
|
||||
//is the element hidden?
|
||||
if (!t.is(':visible')) {
|
||||
|
||||
//it became hidden
|
||||
t.appeared = false;
|
||||
return;
|
||||
}
|
||||
|
||||
//is the element inside the visible window?
|
||||
var a = w.scrollLeft();
|
||||
var b = w.scrollTop();
|
||||
var o = t.offset();
|
||||
var x = o.left;
|
||||
var y = o.top;
|
||||
|
||||
var ax = settings.accX;
|
||||
var ay = settings.accY;
|
||||
var th = t.height();
|
||||
var wh = w.height();
|
||||
var tw = t.width();
|
||||
var ww = w.width();
|
||||
|
||||
if (y + th + ay >= b &&
|
||||
y <= b + wh + ay &&
|
||||
x + tw + ax >= a &&
|
||||
x <= a + ww + ax) {
|
||||
|
||||
//trigger the custom event
|
||||
if (!t.appeared) t.trigger('appear', settings.data);
|
||||
|
||||
} else {
|
||||
|
||||
//it scrolled out of view
|
||||
t.appeared = false;
|
||||
}
|
||||
};
|
||||
|
||||
//create a modified fn with some additional logic
|
||||
var modifiedFn = function() {
|
||||
|
||||
//mark the element as visible
|
||||
t.appeared = true;
|
||||
|
||||
//is this supposed to happen only once?
|
||||
if (settings.one) {
|
||||
|
||||
//remove the check
|
||||
w.unbind('scroll', check);
|
||||
var i = $.inArray(check, $.fn.appear.checks);
|
||||
if (i >= 0) $.fn.appear.checks.splice(i, 1);
|
||||
}
|
||||
|
||||
//trigger the original fn
|
||||
fn.apply(this, arguments);
|
||||
};
|
||||
|
||||
//bind the modified fn to the element
|
||||
if (settings.one) t.one('appear', settings.data, modifiedFn);
|
||||
else t.bind('appear', settings.data, modifiedFn);
|
||||
|
||||
//check whenever the window scrolls
|
||||
w.scroll(check);
|
||||
|
||||
//check whenever the dom changes
|
||||
$.fn.appear.checks.push(check);
|
||||
|
||||
//check now
|
||||
(check)();
|
||||
});
|
||||
};
|
||||
|
||||
//keep a queue of appearance checks
|
||||
$.extend($.fn.appear, {
|
||||
|
||||
checks: [],
|
||||
timeout: null,
|
||||
|
||||
//process the queue
|
||||
checkAll: function() {
|
||||
var length = $.fn.appear.checks.length;
|
||||
if (length > 0) while (length--) ($.fn.appear.checks[length])();
|
||||
},
|
||||
|
||||
//check the queue asynchronously
|
||||
run: function() {
|
||||
if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
|
||||
$.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
|
||||
}
|
||||
});
|
||||
|
||||
//run checks when these methods are called
|
||||
$.each(['append', 'prepend', 'after', 'before', 'attr',
|
||||
'removeAttr', 'addClass', 'removeClass', 'toggleClass',
|
||||
'remove', 'css', 'show', 'hide'], function(i, n) {
|
||||
var old = $.fn[n];
|
||||
if (old) {
|
||||
$.fn[n] = function() {
|
||||
var r = old.apply(this, arguments);
|
||||
$.fn.appear.run();
|
||||
return r;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
+9
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
Executable
+4
@@ -0,0 +1,4 @@
|
||||
// JavaScript to update the year
|
||||
const copyrightYearElement = document.getElementById("copyright-year");
|
||||
const currentYear = new Date().getFullYear();
|
||||
copyrightYearElement.textContent = currentYear;
|
||||
Executable
+8
File diff suppressed because one or more lines are too long
+5238
File diff suppressed because it is too large
Load Diff
+4
File diff suppressed because one or more lines are too long
Executable
+491
@@ -0,0 +1,491 @@
|
||||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
||||
|
||||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||
|
||||
(function (global, factory) {
|
||||
(typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.LazyLoad = factory();
|
||||
})(this, function () {
|
||||
'use strict';
|
||||
|
||||
var runningOnBrowser = typeof window !== "undefined";
|
||||
var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
|
||||
var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
|
||||
var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
|
||||
var defaultSettings = {
|
||||
elements_selector: "img",
|
||||
container: isBot || runningOnBrowser ? document : null,
|
||||
threshold: 300,
|
||||
thresholds: null,
|
||||
data_src: "src",
|
||||
data_srcset: "srcset",
|
||||
data_sizes: "sizes",
|
||||
data_bg: "bg",
|
||||
class_loading: "loading",
|
||||
class_loaded: "loaded",
|
||||
class_error: "error",
|
||||
load_delay: 0,
|
||||
auto_unobserve: true,
|
||||
callback_enter: null,
|
||||
callback_exit: null,
|
||||
callback_reveal: null,
|
||||
callback_loaded: null,
|
||||
callback_error: null,
|
||||
callback_finish: null,
|
||||
use_native: false
|
||||
};
|
||||
|
||||
var getInstanceSettings = function getInstanceSettings(customSettings) {
|
||||
return _extends({}, defaultSettings, customSettings);
|
||||
};
|
||||
/* Creates instance and notifies it through the window element */
|
||||
|
||||
|
||||
var createInstance = function createInstance(classObj, options) {
|
||||
var event;
|
||||
var eventString = "LazyLoad::Initialized";
|
||||
var instance = new classObj(options);
|
||||
|
||||
try {
|
||||
// Works in modern browsers
|
||||
event = new CustomEvent(eventString, {
|
||||
detail: {
|
||||
instance: instance
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
// Works in Internet Explorer (all versions)
|
||||
event = document.createEvent("CustomEvent");
|
||||
event.initCustomEvent(eventString, false, false, {
|
||||
instance: instance
|
||||
});
|
||||
}
|
||||
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
/* Auto initialization of one or more instances of lazyload, depending on the
|
||||
options passed in (plain object or an array) */
|
||||
|
||||
|
||||
function autoInitialize(classObj, options) {
|
||||
if (!options) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!options.length) {
|
||||
// Plain object
|
||||
createInstance(classObj, options);
|
||||
} else {
|
||||
// Array of objects
|
||||
for (var i = 0, optionsItem; optionsItem = options[i]; i += 1) {
|
||||
createInstance(classObj, optionsItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var dataPrefix = "data-";
|
||||
var processedDataName = "was-processed";
|
||||
var timeoutDataName = "ll-timeout";
|
||||
var trueString = "true";
|
||||
|
||||
var getData = function getData(element, attribute) {
|
||||
return element.getAttribute(dataPrefix + attribute);
|
||||
};
|
||||
|
||||
var setData = function setData(element, attribute, value) {
|
||||
var attrName = dataPrefix + attribute;
|
||||
|
||||
if (value === null) {
|
||||
element.removeAttribute(attrName);
|
||||
return;
|
||||
}
|
||||
|
||||
element.setAttribute(attrName, value);
|
||||
};
|
||||
|
||||
var setWasProcessedData = function setWasProcessedData(element) {
|
||||
return setData(element, processedDataName, trueString);
|
||||
};
|
||||
|
||||
var getWasProcessedData = function getWasProcessedData(element) {
|
||||
return getData(element, processedDataName) === trueString;
|
||||
};
|
||||
|
||||
var setTimeoutData = function setTimeoutData(element, value) {
|
||||
return setData(element, timeoutDataName, value);
|
||||
};
|
||||
|
||||
var getTimeoutData = function getTimeoutData(element) {
|
||||
return getData(element, timeoutDataName);
|
||||
};
|
||||
|
||||
var purgeProcessedElements = function purgeProcessedElements(elements) {
|
||||
return elements.filter(function (element) {
|
||||
return !getWasProcessedData(element);
|
||||
});
|
||||
};
|
||||
|
||||
var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
|
||||
return elements.filter(function (element) {
|
||||
return element !== elementToPurge;
|
||||
});
|
||||
};
|
||||
|
||||
var callbackIfSet = function callbackIfSet(callback, argument) {
|
||||
if (callback) {
|
||||
callback(argument);
|
||||
}
|
||||
};
|
||||
|
||||
var updateLoadingCount = function updateLoadingCount(instance, plusMinus) {
|
||||
instance._loadingCount += plusMinus;
|
||||
|
||||
if (instance._elements.length === 0 && instance._loadingCount === 0) {
|
||||
callbackIfSet(instance._settings.callback_finish);
|
||||
}
|
||||
};
|
||||
|
||||
var getSourceTags = function getSourceTags(parentTag) {
|
||||
var sourceTags = [];
|
||||
|
||||
for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
|
||||
if (childTag.tagName === "SOURCE") {
|
||||
sourceTags.push(childTag);
|
||||
}
|
||||
}
|
||||
|
||||
return sourceTags;
|
||||
};
|
||||
|
||||
var setAttributeIfValue = function setAttributeIfValue(element, attrName, value) {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.setAttribute(attrName, value);
|
||||
};
|
||||
|
||||
var setImageAttributes = function setImageAttributes(element, settings) {
|
||||
setAttributeIfValue(element, "sizes", getData(element, settings.data_sizes));
|
||||
setAttributeIfValue(element, "srcset", getData(element, settings.data_srcset));
|
||||
setAttributeIfValue(element, "src", getData(element, settings.data_src));
|
||||
};
|
||||
|
||||
var setSourcesImg = function setSourcesImg(element, settings) {
|
||||
var parent = element.parentNode;
|
||||
|
||||
if (parent && parent.tagName === "PICTURE") {
|
||||
var sourceTags = getSourceTags(parent);
|
||||
sourceTags.forEach(function (sourceTag) {
|
||||
setImageAttributes(sourceTag, settings);
|
||||
});
|
||||
}
|
||||
|
||||
setImageAttributes(element, settings);
|
||||
};
|
||||
|
||||
var setSourcesIframe = function setSourcesIframe(element, settings) {
|
||||
setAttributeIfValue(element, "src", getData(element, settings.data_src));
|
||||
};
|
||||
|
||||
var setSourcesVideo = function setSourcesVideo(element, settings) {
|
||||
var sourceTags = getSourceTags(element);
|
||||
sourceTags.forEach(function (sourceTag) {
|
||||
setAttributeIfValue(sourceTag, "src", getData(sourceTag, settings.data_src));
|
||||
});
|
||||
setAttributeIfValue(element, "src", getData(element, settings.data_src));
|
||||
element.load();
|
||||
};
|
||||
|
||||
var setSourcesBgImage = function setSourcesBgImage(element, settings) {
|
||||
var srcDataValue = getData(element, settings.data_src);
|
||||
var bgDataValue = getData(element, settings.data_bg);
|
||||
|
||||
if (srcDataValue) {
|
||||
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
|
||||
}
|
||||
|
||||
if (bgDataValue) {
|
||||
element.style.backgroundImage = bgDataValue;
|
||||
}
|
||||
};
|
||||
|
||||
var setSourcesFunctions = {
|
||||
IMG: setSourcesImg,
|
||||
IFRAME: setSourcesIframe,
|
||||
VIDEO: setSourcesVideo
|
||||
};
|
||||
|
||||
var setSources = function setSources(element, instance) {
|
||||
var settings = instance._settings;
|
||||
var tagName = element.tagName;
|
||||
var setSourcesFunction = setSourcesFunctions[tagName];
|
||||
|
||||
if (setSourcesFunction) {
|
||||
setSourcesFunction(element, settings);
|
||||
updateLoadingCount(instance, 1);
|
||||
instance._elements = purgeOneElement(instance._elements, element);
|
||||
return;
|
||||
}
|
||||
|
||||
setSourcesBgImage(element, settings);
|
||||
};
|
||||
|
||||
var addClass = function addClass(element, className) {
|
||||
if (supportsClassList) {
|
||||
element.classList.add(className);
|
||||
return;
|
||||
}
|
||||
|
||||
element.className += (element.className ? " " : "") + className;
|
||||
};
|
||||
|
||||
var removeClass = function removeClass(element, className) {
|
||||
if (supportsClassList) {
|
||||
element.classList.remove(className);
|
||||
return;
|
||||
}
|
||||
|
||||
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
|
||||
};
|
||||
|
||||
var genericLoadEventName = "load";
|
||||
var mediaLoadEventName = "loadeddata";
|
||||
var errorEventName = "error";
|
||||
|
||||
var addEventListener = function addEventListener(element, eventName, handler) {
|
||||
element.addEventListener(eventName, handler);
|
||||
};
|
||||
|
||||
var removeEventListener = function removeEventListener(element, eventName, handler) {
|
||||
element.removeEventListener(eventName, handler);
|
||||
};
|
||||
|
||||
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
|
||||
addEventListener(element, genericLoadEventName, loadHandler);
|
||||
addEventListener(element, mediaLoadEventName, loadHandler);
|
||||
addEventListener(element, errorEventName, errorHandler);
|
||||
};
|
||||
|
||||
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
|
||||
removeEventListener(element, genericLoadEventName, loadHandler);
|
||||
removeEventListener(element, mediaLoadEventName, loadHandler);
|
||||
removeEventListener(element, errorEventName, errorHandler);
|
||||
};
|
||||
|
||||
var eventHandler = function eventHandler(event, success, instance) {
|
||||
var settings = instance._settings;
|
||||
var className = success ? settings.class_loaded : settings.class_error;
|
||||
var callback = success ? settings.callback_loaded : settings.callback_error;
|
||||
var element = event.target;
|
||||
removeClass(element, settings.class_loading);
|
||||
addClass(element, className);
|
||||
callbackIfSet(callback, element);
|
||||
updateLoadingCount(instance, -1);
|
||||
};
|
||||
|
||||
var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
|
||||
var loadHandler = function loadHandler(event) {
|
||||
eventHandler(event, true, instance);
|
||||
removeEventListeners(element, loadHandler, errorHandler);
|
||||
};
|
||||
|
||||
var errorHandler = function errorHandler(event) {
|
||||
eventHandler(event, false, instance);
|
||||
removeEventListeners(element, loadHandler, errorHandler);
|
||||
};
|
||||
|
||||
addEventListeners(element, loadHandler, errorHandler);
|
||||
};
|
||||
|
||||
var managedTags = ["IMG", "IFRAME", "VIDEO"];
|
||||
|
||||
var onEnter = function onEnter(element, instance) {
|
||||
var settings = instance._settings;
|
||||
callbackIfSet(settings.callback_enter, element);
|
||||
|
||||
if (!settings.load_delay) {
|
||||
revealAndUnobserve(element, instance);
|
||||
return;
|
||||
}
|
||||
|
||||
delayLoad(element, instance);
|
||||
};
|
||||
|
||||
var revealAndUnobserve = function revealAndUnobserve(element, instance) {
|
||||
var observer = instance._observer;
|
||||
revealElement(element, instance);
|
||||
|
||||
if (observer && instance._settings.auto_unobserve) {
|
||||
observer.unobserve(element);
|
||||
}
|
||||
};
|
||||
|
||||
var onExit = function onExit(element, instance) {
|
||||
var settings = instance._settings;
|
||||
callbackIfSet(settings.callback_exit, element);
|
||||
|
||||
if (!settings.load_delay) {
|
||||
return;
|
||||
}
|
||||
|
||||
cancelDelayLoad(element);
|
||||
};
|
||||
|
||||
var cancelDelayLoad = function cancelDelayLoad(element) {
|
||||
var timeoutId = getTimeoutData(element);
|
||||
|
||||
if (!timeoutId) {
|
||||
return; // do nothing if timeout doesn't exist
|
||||
}
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
setTimeoutData(element, null);
|
||||
};
|
||||
|
||||
var delayLoad = function delayLoad(element, instance) {
|
||||
var loadDelay = instance._settings.load_delay;
|
||||
var timeoutId = getTimeoutData(element);
|
||||
|
||||
if (timeoutId) {
|
||||
return; // do nothing if timeout already set
|
||||
}
|
||||
|
||||
timeoutId = setTimeout(function () {
|
||||
revealAndUnobserve(element, instance);
|
||||
cancelDelayLoad(element);
|
||||
}, loadDelay);
|
||||
setTimeoutData(element, timeoutId);
|
||||
};
|
||||
|
||||
var revealElement = function revealElement(element, instance, force) {
|
||||
var settings = instance._settings;
|
||||
|
||||
if (!force && getWasProcessedData(element)) {
|
||||
return; // element has already been processed and force wasn't true
|
||||
}
|
||||
|
||||
if (managedTags.indexOf(element.tagName) > -1) {
|
||||
addOneShotEventListeners(element, instance);
|
||||
addClass(element, settings.class_loading);
|
||||
}
|
||||
|
||||
setSources(element, instance);
|
||||
setWasProcessedData(element);
|
||||
callbackIfSet(settings.callback_reveal, element);
|
||||
callbackIfSet(settings.callback_set, element);
|
||||
};
|
||||
|
||||
var isIntersecting = function isIntersecting(entry) {
|
||||
return entry.isIntersecting || entry.intersectionRatio > 0;
|
||||
};
|
||||
|
||||
var getObserverSettings = function getObserverSettings(settings) {
|
||||
return {
|
||||
root: settings.container === document ? null : settings.container,
|
||||
rootMargin: settings.thresholds || settings.threshold + "px"
|
||||
};
|
||||
};
|
||||
|
||||
var setObserver = function setObserver(instance) {
|
||||
if (!supportsIntersectionObserver) {
|
||||
return false;
|
||||
}
|
||||
|
||||
instance._observer = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
return isIntersecting(entry) ? onEnter(entry.target, instance) : onExit(entry.target, instance);
|
||||
});
|
||||
}, getObserverSettings(instance._settings));
|
||||
return true;
|
||||
};
|
||||
|
||||
var nativeLazyTags = ["IMG", "IFRAME"];
|
||||
|
||||
var shouldUseNative = function shouldUseNative(settings) {
|
||||
return settings.use_native && "loading" in HTMLImageElement.prototype;
|
||||
};
|
||||
|
||||
var loadAllNative = function loadAllNative(instance) {
|
||||
instance._elements.forEach(function (element) {
|
||||
if (nativeLazyTags.indexOf(element.tagName) === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.setAttribute("loading", "lazy");
|
||||
revealElement(element, instance);
|
||||
});
|
||||
};
|
||||
|
||||
var nodeSetToArray = function nodeSetToArray(nodeSet) {
|
||||
return Array.prototype.slice.call(nodeSet);
|
||||
};
|
||||
|
||||
var queryElements = function queryElements(settings) {
|
||||
return settings.container.querySelectorAll(settings.elements_selector);
|
||||
};
|
||||
|
||||
var getElements = function getElements(elements, settings) {
|
||||
return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
|
||||
};
|
||||
|
||||
var LazyLoad = function LazyLoad(customSettings, elements) {
|
||||
this._settings = getInstanceSettings(customSettings);
|
||||
this._loadingCount = 0;
|
||||
setObserver(this);
|
||||
this.update(elements);
|
||||
};
|
||||
|
||||
LazyLoad.prototype = {
|
||||
update: function update(elements) {
|
||||
var _this = this;
|
||||
|
||||
var settings = this._settings;
|
||||
this._elements = getElements(elements, settings);
|
||||
|
||||
if (isBot || !this._observer) {
|
||||
this.loadAll();
|
||||
return;
|
||||
}
|
||||
|
||||
if (shouldUseNative(settings)) {
|
||||
loadAllNative(this);
|
||||
this._elements = getElements(elements, settings);
|
||||
}
|
||||
|
||||
this._elements.forEach(function (element) {
|
||||
_this._observer.observe(element);
|
||||
});
|
||||
},
|
||||
destroy: function destroy() {
|
||||
var _this2 = this;
|
||||
|
||||
if (this._observer) {
|
||||
this._elements.forEach(function (element) {
|
||||
_this2._observer.unobserve(element);
|
||||
});
|
||||
|
||||
this._observer = null;
|
||||
}
|
||||
|
||||
this._elements = null;
|
||||
this._settings = null;
|
||||
},
|
||||
load: function load(element, force) {
|
||||
revealElement(element, this, force);
|
||||
},
|
||||
loadAll: function loadAll() {
|
||||
var _this3 = this;
|
||||
|
||||
this._elements.forEach(function (element) {
|
||||
revealAndUnobserve(element, _this3);
|
||||
});
|
||||
}
|
||||
};
|
||||
/* Automatic instances creation if required (useful for async script loading) */
|
||||
|
||||
if (runningOnBrowser) {
|
||||
autoInitialize(LazyLoad, window.lazyLoadOptions);
|
||||
}
|
||||
|
||||
return LazyLoad;
|
||||
});
|
||||
Executable
+3448
File diff suppressed because it is too large
Load Diff
+5
File diff suppressed because one or more lines are too long
Executable
+610
@@ -0,0 +1,610 @@
|
||||
(function($) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
//Hide Loading Box (Preloader)
|
||||
function handlePreloader() {
|
||||
if($('.loader-wrap').length){
|
||||
$('.loader-wrap').delay(1000).fadeOut(500);
|
||||
}
|
||||
TweenMax.to($(".loader-wrap .overlay"), 1.2, {
|
||||
force3D: true,
|
||||
left: "100%",
|
||||
ease: Expo.easeInOut,
|
||||
});
|
||||
}
|
||||
|
||||
if ($(".preloader-close").length) {
|
||||
$(".preloader-close").on("click", function(){
|
||||
$('.loader-wrap').delay(200).fadeOut(500);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function dynamicCurrentMenuClass(selector) {
|
||||
let FileName = window.location.href.split('/').reverse()[0];
|
||||
|
||||
selector.find('li').each(function () {
|
||||
let anchor = $(this).find('a');
|
||||
if ($(anchor).attr('href') == FileName) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
// if any li has .current elmnt add class
|
||||
selector.children('li').each(function () {
|
||||
if ($(this).find('.current').length) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
// if no file name return
|
||||
if ('' == FileName) {
|
||||
selector.find('li').eq(0).addClass('current');
|
||||
}
|
||||
}
|
||||
|
||||
// dynamic current class
|
||||
let mainNavUL = $('.main-menu').find('.navigation');
|
||||
dynamicCurrentMenuClass(mainNavUL);
|
||||
|
||||
//Update Header Style and Scroll to Top
|
||||
function headerStyle() {
|
||||
if($('.main-header').length){
|
||||
var windowpos = $(window).scrollTop();
|
||||
var siteHeader = $('.main-header');
|
||||
var scrollLink = $('.scroll-to-top');
|
||||
var sticky_header = $('.main-header .sticky-header');
|
||||
if (windowpos > 100) {
|
||||
siteHeader.addClass('fixed-header');
|
||||
sticky_header.addClass("animated slideInDown");
|
||||
scrollLink.fadeIn(300);
|
||||
} else {
|
||||
siteHeader.removeClass('fixed-header');
|
||||
sticky_header.removeClass("animated slideInDown");
|
||||
scrollLink.fadeOut(300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
headerStyle();
|
||||
|
||||
//Submenu Dropdown Toggle
|
||||
if($('.main-header li.dropdown ul').length){
|
||||
$('.main-header .navigation li.dropdown').append('<div class="dropdown-btn"><span class="fa fa-angle-right"></span></div>');
|
||||
}
|
||||
|
||||
//Hidden Sidebar
|
||||
if($('.hidden-sidebar').length){
|
||||
|
||||
var animButton = $(".sidemenu-nav-toggler"),
|
||||
hiddenBar = $(".hidden-sidebar"),
|
||||
navOverlay = $(".nav-overlay"),
|
||||
hiddenBarClose = $(".hidden-sidebar-close");
|
||||
|
||||
function showMenu() {
|
||||
TweenMax.to(hiddenBar, 0.6, {
|
||||
force3D: false,
|
||||
right: "0",
|
||||
ease: Expo.easeInOut
|
||||
});
|
||||
hiddenBar.removeClass("close-sidebar");
|
||||
navOverlay.fadeIn(500);
|
||||
}
|
||||
|
||||
function hideMenu() {
|
||||
TweenMax.to(hiddenBar, 0.6, {
|
||||
force3D: false,
|
||||
right: "-480px",
|
||||
ease: Expo.easeInOut
|
||||
});
|
||||
hiddenBar.addClass("close-sidebar");
|
||||
navOverlay.fadeOut(500);
|
||||
}
|
||||
animButton.on("click", function() {
|
||||
if (hiddenBar.hasClass("close-sidebar")) showMenu();
|
||||
else hideMenu();
|
||||
});
|
||||
navOverlay.on("click", function() {
|
||||
hideMenu();
|
||||
});
|
||||
hiddenBarClose.on("click", function() {
|
||||
hideMenu();
|
||||
});
|
||||
}
|
||||
|
||||
if ($('.nav-overlay').length) {
|
||||
// / cursor /
|
||||
var cursor = $(".nav-overlay .cursor"),
|
||||
follower = $(".nav-overlay .cursor-follower");
|
||||
|
||||
var posX = 0,
|
||||
posY = 0;
|
||||
|
||||
var mouseX = 0,
|
||||
mouseY = 0;
|
||||
|
||||
TweenMax.to({}, 0.016, {
|
||||
repeat: -1,
|
||||
onRepeat: function() {
|
||||
posX += (mouseX - posX) / 9;
|
||||
posY += (mouseY - posY) / 9;
|
||||
|
||||
TweenMax.set(follower, {
|
||||
css: {
|
||||
left: posX - 22,
|
||||
top: posY - 22
|
||||
}
|
||||
});
|
||||
|
||||
TweenMax.set(cursor, {
|
||||
css: {
|
||||
left: mouseX,
|
||||
top: mouseY
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("mousemove", function(e) {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
mouseX = e.pageX;
|
||||
mouseY = e.pageY - scrollTop;
|
||||
});
|
||||
$("button, a").on("mouseenter", function() {
|
||||
cursor.addClass("active");
|
||||
follower.addClass("active");
|
||||
});
|
||||
$("button, a").on("mouseleave", function() {
|
||||
cursor.removeClass("active");
|
||||
follower.removeClass("active");
|
||||
});
|
||||
$(".nav-overlay").on("mouseenter", function() {
|
||||
cursor.addClass("close-cursor");
|
||||
follower.addClass("close-cursor");
|
||||
});
|
||||
$(".nav-overlay").on("mouseleave", function() {
|
||||
cursor.removeClass("close-cursor");
|
||||
follower.removeClass("close-cursor");
|
||||
});
|
||||
}
|
||||
|
||||
//Mobile Nav Hide Show
|
||||
if($('.mobile-menu').length){
|
||||
|
||||
$('.mobile-menu .menu-box').mCustomScrollbar();
|
||||
|
||||
var mobileMenuContent = $('.main-header .nav-outer .main-menu').html();
|
||||
$('.mobile-menu .menu-box .menu-outer').append(mobileMenuContent);
|
||||
$('.sticky-header .main-menu').append(mobileMenuContent);
|
||||
|
||||
//Dropdown Button
|
||||
$('.mobile-menu li.dropdown .dropdown-btn').on('click', function() {
|
||||
$(this).toggleClass('open');
|
||||
$(this).prev('ul').slideToggle(500);
|
||||
});
|
||||
//Menu Toggle Btn
|
||||
$('.mobile-nav-toggler').on('click', function() {
|
||||
$('body').addClass('mobile-menu-visible');
|
||||
});
|
||||
|
||||
//Menu Toggle Btn
|
||||
$('.mobile-menu .menu-backdrop,.mobile-menu .close-btn,.scroll-nav li a').on('click', function() {
|
||||
$('body').removeClass('mobile-menu-visible');
|
||||
});
|
||||
}
|
||||
|
||||
//Sidemenu Nav Hide Show
|
||||
if($('.side-menu').length){
|
||||
|
||||
$('.side-menu .menu-box').mCustomScrollbar();
|
||||
|
||||
//Dropdown Button
|
||||
$('.side-menu li.dropdown .dropdown-btn').on('click', function() {
|
||||
$(this).toggleClass('open');
|
||||
$(this).prev('ul').slideToggle(500);
|
||||
});
|
||||
|
||||
$('body').addClass('side-menu-visible');
|
||||
//Menu Toggle Btn
|
||||
$('.side-nav-toggler').on('click', function() {
|
||||
$('body').addClass('side-menu-visible');
|
||||
});
|
||||
|
||||
//Menu Toggle Btn
|
||||
$('.side-menu .side-menu-resize').on('click', function() {
|
||||
$('body').toggleClass('side-menu-visible');
|
||||
});
|
||||
|
||||
//Menu Toggle Btn
|
||||
$('.main-header .mobile-nav-toggler-two').on('click', function() {
|
||||
$('body').addClass('side-menu-visible-s2');
|
||||
});
|
||||
|
||||
//Menu Overlay
|
||||
$('.main-header .side-menu-overlay').on('click', function() {
|
||||
$('body').removeClass('side-menu-visible-s2');
|
||||
});
|
||||
}
|
||||
|
||||
//Search Popup
|
||||
if($('#search-popup').length){
|
||||
|
||||
//Show Popup
|
||||
$('.search-toggler').on('click', function() {
|
||||
$('#search-popup').addClass('popup-visible');
|
||||
});
|
||||
$(document).keydown(function(e){
|
||||
if(e.keyCode === 27) {
|
||||
$('#search-popup').removeClass('popup-visible');
|
||||
}
|
||||
});
|
||||
//Hide Popup
|
||||
$('.close-search,.search-popup .overlay-layer').on('click', function() {
|
||||
$('#search-popup').removeClass('popup-visible');
|
||||
});
|
||||
}
|
||||
|
||||
function bannerSlider() {
|
||||
if ($(".banner-slider").length > 0) {
|
||||
|
||||
// Banner Slider
|
||||
var bannerSlider = new Swiper('.banner-slider', {
|
||||
preloadImages: false,
|
||||
loop: true,
|
||||
grabCursor: true,
|
||||
centeredSlides: false,
|
||||
resistance: true,
|
||||
resistanceRatio: 0.6,
|
||||
speed: 1400,
|
||||
spaceBetween: 0,
|
||||
parallax: false,
|
||||
effect: "slide",
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.banner-slider-button-next',
|
||||
prevEl: '.banner-slider-button-prev',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
//Price Range Slider
|
||||
if($('.price-range-slider').length){
|
||||
$( ".price-range-slider" ).slider({
|
||||
range: true,
|
||||
min: 10,
|
||||
max: 200,
|
||||
values: [ 10, 99 ],
|
||||
slide: function( event, ui ) {
|
||||
$( "input.property-amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
|
||||
}
|
||||
});
|
||||
|
||||
$( "input.property-amount" ).val( $( ".price-range-slider" ).slider( "values", 0 ) + " - $" + $( ".price-range-slider" ).slider( "values", 1 ) );
|
||||
}
|
||||
|
||||
// Lazyload Images
|
||||
if($('.lazy-image').length){
|
||||
new LazyLoad({
|
||||
elements_selector: ".lazy-image",
|
||||
load_delay: 0,
|
||||
threshold: 300
|
||||
});
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
//Universal Code for All Owl Carousel Sliders
|
||||
/////////////////////////////
|
||||
|
||||
if ($('.theme_carousel').length) {
|
||||
$(".theme_carousel").each(function (index) {
|
||||
var $owlAttr = {},
|
||||
$extraAttr = $(this).data("options");
|
||||
$.extend($owlAttr, $extraAttr);
|
||||
$(this).owlCarousel($owlAttr);
|
||||
});
|
||||
}
|
||||
|
||||
// Donation Progress Bar
|
||||
if ($('.count-bar').length) {
|
||||
$('.count-bar').appear(function(){
|
||||
var el = $(this);
|
||||
var percent = el.data('percent');
|
||||
$(el).css('width',percent).addClass('counted');
|
||||
},{accY: -50});
|
||||
|
||||
}
|
||||
|
||||
//Jquery Spinner / Quantity Spinner
|
||||
if($('.quantity-spinner').length){
|
||||
$("input.quantity-spinner").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
}
|
||||
|
||||
//Fact Counter + Text Count
|
||||
if($('.count-box').length){
|
||||
$('.count-box').appear(function(){
|
||||
|
||||
var $t = $(this),
|
||||
n = $t.find(".count-text").attr("data-stop"),
|
||||
r = parseInt($t.find(".count-text").attr("data-speed"), 10);
|
||||
|
||||
if (!$t.hasClass("counted")) {
|
||||
$t.addClass("counted");
|
||||
$({
|
||||
countNum: $t.find(".count-text").text()
|
||||
}).animate({
|
||||
countNum: n
|
||||
}, {
|
||||
duration: r,
|
||||
easing: "linear",
|
||||
step: function() {
|
||||
$t.find(".count-text").text(Math.floor(this.countNum));
|
||||
},
|
||||
complete: function() {
|
||||
$t.find(".count-text").text(this.countNum);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},{accY: 0});
|
||||
}
|
||||
|
||||
//Tabs Box
|
||||
if($('.tabs-box').length){
|
||||
$('.tabs-box .tab-buttons .tab-btn').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var target = $($(this).attr('data-tab'));
|
||||
|
||||
if ($(target).is(':visible')){
|
||||
return false;
|
||||
}else{
|
||||
target.parents('.tabs-box').find('.tab-buttons').find('.tab-btn').removeClass('active-btn');
|
||||
$(this).addClass('active-btn');
|
||||
target.parents('.tabs-box').find('.tabs-content').find('.tab').fadeOut(0);
|
||||
target.parents('.tabs-box').find('.tabs-content').find('.tab').removeClass('active-tab');
|
||||
$(target).fadeIn(300);
|
||||
$(target).addClass('active-tab');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Accordion Box
|
||||
if($('.accordion-box').length){
|
||||
$(".accordion-box").on('click', '.acc-btn', function() {
|
||||
|
||||
var outerBox = $(this).parents('.accordion-box');
|
||||
var target = $(this).parents('.accordion');
|
||||
|
||||
if($(this).hasClass('active')!==true){
|
||||
$(outerBox).find('.accordion .acc-btn').removeClass('active');
|
||||
}
|
||||
|
||||
if ($(this).next('.acc-content').is(':visible')){
|
||||
return false;
|
||||
}else{
|
||||
$(this).addClass('active');
|
||||
$(outerBox).children('.accordion').removeClass('active-block');
|
||||
$(outerBox).find('.accordion').children('.acc-content').slideUp(300);
|
||||
target.addClass('active-block');
|
||||
$(this).next('.acc-content').slideDown(300);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//LightBox / Fancybox
|
||||
if($('.lightbox-image').length) {
|
||||
$('.lightbox-image').fancybox({
|
||||
openEffect : 'fade',
|
||||
closeEffect : 'fade',
|
||||
helpers : {
|
||||
media : {}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Sortable Masonary with Filters
|
||||
function sortableMasonry() {
|
||||
if ($('.sortable-masonry').length) {
|
||||
var winDow = $(window);
|
||||
// Needed variables
|
||||
var $container = $('.sortable-masonry .items-container');
|
||||
var $filter = $('.filter-btns');
|
||||
$container.isotope({
|
||||
filter: '.all',
|
||||
animationOptions: {
|
||||
duration: 500,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
// Isotope Filter
|
||||
$filter.find('li').on('click', function() {
|
||||
var selector = $(this).attr('data-filter');
|
||||
try {
|
||||
$container.isotope({
|
||||
filter: selector,
|
||||
animationOptions: {
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
queue: false
|
||||
}
|
||||
});
|
||||
} catch (err) {}
|
||||
return false;
|
||||
});
|
||||
winDow.on('resize', function() {
|
||||
var selector = $filter.find('li.active').attr('data-filter');
|
||||
$container.isotope({
|
||||
filter: selector,
|
||||
animationOptions: {
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
queue: false
|
||||
}
|
||||
});
|
||||
$container.isotope()
|
||||
});
|
||||
var filterItemA = $('.filter-btns li');
|
||||
filterItemA.on('click', function() {
|
||||
var $this = $(this);
|
||||
if (!$this.hasClass('active')) {
|
||||
filterItemA.removeClass('active');
|
||||
$this.addClass('active');
|
||||
}
|
||||
});
|
||||
$container.isotope("on", "layoutComplete", function(a, b) {
|
||||
var a = b.length,
|
||||
pcn = $(".filters .count");
|
||||
pcn.html(a);
|
||||
});
|
||||
}
|
||||
}
|
||||
sortableMasonry();
|
||||
|
||||
|
||||
// Testimonial
|
||||
if ($('.testimonial-carousel').length) {
|
||||
var testimonialThumb = new Swiper('.testimonial-thumbs', {
|
||||
preloadImages: false,
|
||||
loop: true,
|
||||
speed: 2400,
|
||||
slidesPerView: 3,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 0,
|
||||
effect: "slide",
|
||||
});
|
||||
var totalSlides = $(".swiper-container").length;
|
||||
var testimonialContent = new Swiper('.testimonial-content', {
|
||||
preloadImages: false,
|
||||
loop: true,
|
||||
speed: 2400,
|
||||
spaceBetween: 0,
|
||||
effect: "slide",
|
||||
thumbs: {
|
||||
swiper: testimonialThumb
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Single Image Carousel
|
||||
if ($('.single-image-carousel').length) {
|
||||
var productThumbs = new Swiper('.single-image-carousel', {
|
||||
preloadImages: false,
|
||||
loop: true,
|
||||
speed: 1400,
|
||||
spaceBetween: 0,
|
||||
effect: "fade",
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
|
||||
navigation: {
|
||||
nextEl: '.slider-button-next',
|
||||
prevEl: '.slider-button-prev',
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//Projects Tabs
|
||||
if($('.project-tab').length){
|
||||
$('.project-tab .project-tab-btns .p-tab-btn').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var target = $($(this).attr('data-tab'));
|
||||
|
||||
if ($(target).hasClass('actve-tab')){
|
||||
return false;
|
||||
}else{
|
||||
$('.project-tab .project-tab-btns .p-tab-btn').removeClass('active-btn');
|
||||
$(this).addClass('active-btn');
|
||||
$('.project-tab .p-tabs-content .p-tab').removeClass('active-tab');
|
||||
$(target).addClass('active-tab');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Isotop Layout
|
||||
function isotopeBlock() {
|
||||
if($(".isotope-block").length){
|
||||
var $grid = $('.isotope-block').isotope();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
isotopeBlock();
|
||||
|
||||
//Progress Bar / Levels
|
||||
if ($('.progress-levels .progress-box .bar-fill').length) {
|
||||
$(".progress-box .bar-fill").each(function() {
|
||||
var progressWidth = $(this).attr('data-percent');
|
||||
$(this).css('width', progressWidth + '%');
|
||||
$(this).children('.percent').html(progressWidth + '%');
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll to a Specific Div
|
||||
if($('.scroll-to-target').length){
|
||||
$(".scroll-to-target").on('click', function() {
|
||||
var target = $(this).attr('data-target');
|
||||
// animate
|
||||
$('html, body').animate({
|
||||
scrollTop: $(target).offset().top
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Elements Animation
|
||||
if($('.wow').length){
|
||||
var wow = new WOW(
|
||||
{
|
||||
boxClass: 'wow', // animated element css class (default is wow)
|
||||
animateClass: 'animated', // animation css class (default is animated)
|
||||
offset: 0, // distance to the element when triggering the animation (default is 0)
|
||||
mobile: true, // trigger animations on mobile devices (default is true)
|
||||
live: true // act on asynchronously loaded content (default is true)
|
||||
}
|
||||
);
|
||||
wow.init();
|
||||
}
|
||||
|
||||
//Add One Page nav
|
||||
if($('.scroll-nav').length) {
|
||||
$('.scroll-nav ul').onePageNav();
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
When document is Scrollig, do
|
||||
========================================================================== */
|
||||
|
||||
$(window).on('scroll', function() {
|
||||
headerStyle();
|
||||
});
|
||||
|
||||
/* ==========================================================================
|
||||
When document is loading, do
|
||||
========================================================================== */
|
||||
|
||||
$(window).on('load', function() {
|
||||
handlePreloader();
|
||||
sortableMasonry();
|
||||
isotopeBlock();
|
||||
bannerSlider();
|
||||
});
|
||||
|
||||
})(window.jQuery);
|
||||
Executable
+5
File diff suppressed because one or more lines are too long
+13
File diff suppressed because one or more lines are too long
Executable
+47
File diff suppressed because one or more lines are too long
Executable
+2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user