AlxMedia/cardstyle
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/AlxMedia/cardstyle.git synced 2025-08-26 15:54:09 +08:00
Code Issues Projects Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
AlxMedia 2021-09-13 11:35:12 +02:00
commit 3d7805a214
351 changed files with 88344 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

214
js/jq-sticky-anything.js Normal file
View file

@ -0,0 +1,214 @@
/**
* @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
*/
(function ($) {
$.fn.stickThis = function(options) {
var settings = $.extend({
// Default
top: 0,
minscreenwidth: 0,
maxscreenwidth: 99999,
zindex: 1,
debugmode: false,
pushup: ''
}, options );
var numElements = $(this).length;
var numPushElements = $(settings.pushup).length;
if (numPushElements < 1) {
// There are no elements on the page with the called selector for the Push-up Element.
if((settings.debugmode == true) && (settings.pushup)) {
console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+settings.pushup+'").');
}
// Resetting it to NOTHING.
settings.pushup = '';
} else if (numPushElements > 1) {
// You can't use more than one element to push up the sticky element.
// Make sure that you use a selector that applies to only ONE SINGLE element on the page.
// Want to find out quickly where all the elements are that you targeted? Uncomment the next line to debug.
// $(settings.pushup).css('border','solid 3px #ff0000');
if(settings.debugmode == true) {
console.error('STICKY ANYTHING DEBUG: There are '+numPushElements+' elements on the page with the selector/class/ID you selected for the push-up element ("'+settings.pushup+'"). You can select only ONE element to push the sticky element up.');
}
// Resetting it to NOTHING.
settings.pushup = '';
}
if (numElements < 1) {
// There are no elements on the page with the called selector.
if(settings.debugmode == true) {
console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").');
}
} else if (numElements > 1) {
// This is not going to work either. You can't make more than one element sticky. They will only get in eachother's way.
// Make sure that you use a selector that applies to only ONE SINGLE element on the page.
// Want to find out quickly where all the elements are that you targeted? Uncomment the next line to debug.
// $(this).css('border','solid 3px #00ff00');
if(settings.debugmode == true) {
console.error('STICKY ANYTHING DEBUG: There There are '+numPushElements+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.');
}
} else {
// CALLING THE MAIN FUNCTION
$(this).addClass('sticky-element-original').addClass('sticky-element-not-sticky');
orgAssignedStyles = cssStyles($(this)); // All original element styles, assigned by CSS.
orgInlineStyles = $('.sticky-element-original').attr('style');
if (orgInlineStyles == null) {
orgInlineStyles = '';
}
createPlaceholder();
checkElement = setInterval(function(){stickIt(settings.top,settings.minscreenwidth,settings.maxscreenwidth,settings.zindex,settings.pushup,orgAssignedStyles,orgInlineStyles)},10);
}
return this;
};
function stickIt(stickyTop,minwidth,maxwidth,stickyZindex,pushup,originalAssignedStyles,originalInlineStyles) {
// We need to check the position of the ACTIVE element to determine if we've scrolled enough.
// This is the original one when it's not sticky, but when it's sticky, it's the placeholder.
$listenerElement = $('.sticky-element-active');
var orgElementPos = $listenerElement.offset();
orgElementTop = orgElementPos.top;
if(pushup) {
var pushElementPos = $(pushup).offset();
pushElementTop = pushElementPos.top;
}
// Calculating actual viewport width
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
viewport = e[ a+'Width' ];
if (($(window).scrollTop() >= (orgElementTop - stickyTop)) && (viewport >= minwidth) && (viewport <= maxwidth)) {
// We've scrolled PAST the original position; this is where we need to make the element sticky.
// Placeholder element should always have same left position as original element (see comment below).
// The sticky element will NOT have a TOP or the LEFT margin. This is because the left/top reference point of the original
// element does not consider the margin. So, we're checking the left/top point of the actual original element and then
// use that position for the sticky element.
// LEFT POSITION
coordsOrgElement = $listenerElement.offset();
leftOrgElement = coordsOrgElement.left; // This is the position REGARDLESS of the margin.
// WIDTH/HEIGHT
// The placeholder needs to have the width and height of the original element, WITHOUT the margins but WITH the padding and borders
// Whatever margins the original has, the placeholder needs to have that too.
widthPlaceholder = $listenerElement[0].getBoundingClientRect().width;
if (!widthPlaceholder) {
widthPlaceholder = $listenerElement.css('width'); // FALLBACK for subpixels
}
heightPlaceholder = $listenerElement[0].getBoundingClientRect().height;
if (!heightPlaceholder) {
heightPlaceholder = $listenerElement.css('height'); // FALLBACK for subpixels
}
// WIDTH/HEIGHT OF STICKY ELEMENT
// The original element though, needs to have the inner width and height of the original (non-sticky) element
// No padding, no borders, because that will be applied later anyway, regardless of box-sizing
widthSticky = $('.sticky-element-original').css('width');
if(widthSticky == '0px') {
widthSticky = ($('.sticky-element-original')[0].getBoundingClientRect().width);
}
heightSticky = $('.sticky-element-original').height();
// PADDING
// If padding is percentages, convert to pixels when it becomes sticky
// Just a leftover from the old method. We will not use padding for the placeholder
paddingOrgElement = [$('.sticky-element-original').css('padding-top'), $('.sticky-element-original').css('padding-right'), $('.sticky-element-original').css('padding-bottom'),$('.sticky-element-original').css('padding-left')];
paddingSticky = paddingOrgElement[0] + ' ' + paddingOrgElement[1] + ' ' + paddingOrgElement[2] + ' ' + paddingOrgElement[3];
// MARGIN
marginOrgElement = [$listenerElement.css('margin-top'), $listenerElement.css('margin-right'), $listenerElement.css('margin-bottom'),$listenerElement.css('margin-left')];
marginPlaceholder = marginOrgElement[0] + ' ' + marginOrgElement[1] + ' ' + marginOrgElement[2] + ' ' + marginOrgElement[3];
// OTHER ELEMENTS
// if original has float, display, etc., we need to assign that to the placeholder
// Though not as important as the width/height/margin/padding
assignedStyles = '';
for (var importantStyle in originalAssignedStyles) {
if (originalAssignedStyles[importantStyle] == 'inline') {
assignedStyles += importantStyle+':inline-block; ';
} else {
assignedStyles += importantStyle+':'+originalAssignedStyles[importantStyle]+'; ';
}
}
// Fixes bug where height of original element returns zero
// Is this still needed for the post-2.0 mode??
elementHeight = 0;
if (heightPlaceholder < 1) {
elementHeight = $('.sticky-element-cloned').outerHeight();
} else {
elementHeight = $('.sticky-element-original').outerHeight();
}
// If scrolled position = pushup-element (top coordinate) - space between top and element - element height
// In other words, if the pushup element hits the bottom of the sticky element
if (pushup && ($(window).scrollTop() > (pushElementTop-stickyTop-elementHeight))) {
stickyTopMargin = (pushElementTop-stickyTop-elementHeight-$(window).scrollTop());
} else {
stickyTopMargin = 0;
}
assignedStyles += 'width:'+widthPlaceholder+'px; height:'+heightPlaceholder+'px; margin:'+marginPlaceholder+';';
$('.sticky-element-original').removeClass('sticky-element-not-sticky').addClass('sticky-element-sticky').removeClass('sticky-element-active').css('position','fixed').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthSticky).css('margin-left',0).css('padding',paddingSticky).css('margin-top',stickyTopMargin).css('z-index',stickyZindex);
if(!$('.sticky-element-placeholder').hasClass('sticky-element-active')) {
$('.sticky-element-placeholder').addClass('sticky-element-active').attr('style',assignedStyles);
}
} else {
// not scrolled past the menu; only show the original element.
$('.sticky-element-original').addClass('sticky-element-not-sticky').removeClass('sticky-element-sticky').addClass('sticky-element-active').attr('style',originalInlineStyles);
if($('.sticky-element-placeholder').hasClass('sticky-element-active')) {
$('.sticky-element-placeholder').removeClass('sticky-element-active').removeAttr('style').css('width','0').css('height','0').css('margin','0').css('padding','0');
}
}
}
function createPlaceholder() {
$('.sticky-element-original').addClass('sticky-element-active').before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>');
}
// Helper function: get the important CSS rules from an element
function cssStyles(el) {
o = {};
o['display'] = el.css('display');
o['float'] = el.css('float');
o['flex'] = el.css('flex');
o['box-sizing'] = el.css('box-sizing');
o['clear'] = el.css('clear');
o['overflow'] = el.css('overflow');
o['transform'] = el.css('transform');
// For some reason, this original loop doesn't work with some themes/plugins.
// importantStyles = ['display','float','flex','box-sizing','clear','overflow','transform'];
// for(var styleProp in importantStyles) {
// o[importantStyles[styleProp]] = el.css(importantStyles[styleProp]);
// }
return o;
}
}(jQuery));

5
js/jq-sticky-anything.min.js vendored Normal file
View file

@ -0,0 +1,5 @@
/**
* @preserve Sticky Anything 2.0.1 | @senff | GPL2 Licensed
*/
!function(a){function b(b,c,d,e,f,g,h){$listenerElement=a(".sticky-element-active");var i=$listenerElement.offset();if(orgElementTop=i.top,f){var j=a(f).offset();pushElementTop=j.top}var k=window,l="inner";if("innerWidth"in window||(l="client",k=document.documentElement||document.body),viewport=k[l+"Width"],a(window).scrollTop()>=orgElementTop-b&&viewport>=c&&viewport<=d){coordsOrgElement=$listenerElement.offset(),leftOrgElement=coordsOrgElement.left,widthPlaceholder=$listenerElement[0].getBoundingClientRect().width,widthPlaceholder||(widthPlaceholder=$listenerElement.css("width")),heightPlaceholder=$listenerElement[0].getBoundingClientRect().height,heightPlaceholder||(heightPlaceholder=$listenerElement.css("height")),widthSticky=a(".sticky-element-original").css("width"),"0px"==widthSticky&&(widthSticky=a(".sticky-element-original")[0].getBoundingClientRect().width),heightSticky=a(".sticky-element-original").height(),paddingOrgElement=[a(".sticky-element-original").css("padding-top"),a(".sticky-element-original").css("padding-right"),a(".sticky-element-original").css("padding-bottom"),a(".sticky-element-original").css("padding-left")],paddingSticky=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],marginOrgElement=[$listenerElement.css("margin-top"),$listenerElement.css("margin-right"),$listenerElement.css("margin-bottom"),$listenerElement.css("margin-left")],marginPlaceholder=marginOrgElement[0]+" "+marginOrgElement[1]+" "+marginOrgElement[2]+" "+marginOrgElement[3],assignedStyles="";for(var m in g)"inline"==g[m]?assignedStyles+=m+":inline-block; ":assignedStyles+=m+":"+g[m]+"; ";elementHeight=0,heightPlaceholder<1?elementHeight=a(".sticky-element-cloned").outerHeight():elementHeight=a(".sticky-element-original").outerHeight(),f&&a(window).scrollTop()>pushElementTop-b-elementHeight?stickyTopMargin=pushElementTop-b-elementHeight-a(window).scrollTop():stickyTopMargin=0,assignedStyles+="width:"+widthPlaceholder+"px; height:"+heightPlaceholder+"px; margin:"+marginPlaceholder+";",a(".sticky-element-original").removeClass("sticky-element-not-sticky").addClass("sticky-element-sticky").removeClass("sticky-element-active").css("position","fixed").css("left",leftOrgElement+"px").css("top",b+"px").css("width",widthSticky).css("margin-left",0).css("padding",paddingSticky).css("margin-top",stickyTopMargin).css("z-index",e),a(".sticky-element-placeholder").hasClass("sticky-element-active")||a(".sticky-element-placeholder").addClass("sticky-element-active").attr("style",assignedStyles)}else a(".sticky-element-original").addClass("sticky-element-not-sticky").removeClass("sticky-element-sticky").addClass("sticky-element-active").attr("style",h),a(".sticky-element-placeholder").hasClass("sticky-element-active")&&a(".sticky-element-placeholder").removeClass("sticky-element-active").removeAttr("style").css("width","0").css("height","0").css("margin","0").css("padding","0")}function c(){a(".sticky-element-original").addClass("sticky-element-active").before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>')}function d(a){return o={},o.display=a.css("display"),o.float=a.css("float"),o.flex=a.css("flex"),o["box-sizing"]=a.css("box-sizing"),o.clear=a.css("clear"),o.overflow=a.css("overflow"),o.transform=a.css("transform"),o}a.fn.stickThis=function(e){var f=a.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,debugmode:!1,pushup:""},e),g=a(this).length,h=a(f.pushup).length;return h<1?(1==f.debugmode&&f.pushup&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+f.pushup+'").'),f.pushup=""):h>1&&(1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There are "+h+' elements on the page with the selector/class/ID you selected for the push-up element ("'+f.pushup+'"). You can select only ONE element to push the sticky element up.'),f.pushup=""),g<1?1==f.debugmode&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").'):g>1?1==f.debugmode&&console.error("STICKY ANYTHING DEBUG: There There are "+h+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.'):(a(this).addClass("sticky-element-original").addClass("sticky-element-not-sticky"),orgAssignedStyles=d(a(this)),orgInlineStyles=a(".sticky-element-original").attr("style"),null==orgInlineStyles&&(orgInlineStyles=""),c(),checkElement=setInterval(function(){b(f.top,f.minscreenwidth,f.maxscreenwidth,f.zindex,f.pushup,orgAssignedStyles,orgInlineStyles)},10)),this}}(jQuery);

82
js/jquery.fitvids.js Normal file
View file

@ -0,0 +1,82 @@
/*jshint browser:true */
/*!
* FitVids 1.1
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
*/
;(function( $ ){
'use strict';
$.fn.fitVids = function( options ) {
var settings = {
customSelector: null,
ignore: null
};
if(!document.getElementById('fit-vids-style')) {
// appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
var head = document.head || document.getElementsByTagName('head')[0];
var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
var div = document.createElement("div");
div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
head.appendChild(div.childNodes[1]);
}
if ( options ) {
$.extend( settings, options );
}
return this.each(function(){
var selectors = [
'iframe[src*="player.vimeo.com"]',
'iframe[src*="youtube.com"]',
'iframe[src*="youtube-nocookie.com"]',
'iframe[src*="kickstarter.com"][src*="video.html"]',
'object',
'embed'
];
if (settings.customSelector) {
selectors.push(settings.customSelector);
}
var ignoreList = '.fitvidsignore';
if(settings.ignore) {
ignoreList = ignoreList + ', ' + settings.ignore;
}
var $allVideos = $(this).find(selectors.join(','));
$allVideos = $allVideos.not('object object'); // SwfObj conflict patch
$allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
$allVideos.each(function(count){
var $this = $(this);
if($this.parents(ignoreList).length > 0) {
return; // Disable FitVids on this video.
}
if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
{
$this.attr('height', 9);
$this.attr('width', 16);
}
var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
aspectRatio = height / width;
if(!$this.attr('id')){
var videoID = 'fitvid' + count;
$this.attr('id', videoID);
}
$this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
$this.removeAttr('height').removeAttr('width');
});
});
};
// Works with either jQuery or Zepto
})( window.jQuery || window.Zepto );

319
js/nav.js Normal file
View file

@ -0,0 +1,319 @@
/**
* Polyfill for IE11 - adds NodeList.foreach().
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
*/
if ( window.NodeList && ! NodeList.prototype.forEach ) {
NodeList.prototype.forEach = function( callback, thisArg ) {
thisArg = thisArg || window;
for ( var i = 0; i < this.length; i++ ) { // eslint-disable-line vars-on-top
callback.call( thisArg, this[ i ], i, this );
}
};
}
window.alxMediaMenu = {
/**
*
* @param {Object} args - The arguments.
* @param {string} args.selector - The navigation selector.
* @param {int} args.breakpoint - The breakpoint in pixels.
*/
init: function( args ) {
var self = this,
navs = document.querySelectorAll( args.selector );
if ( ! navs.length ) {
return;
}
navs.forEach( function( nav ) {
var menuToggler = nav.querySelector( '.menu-toggle' );
// Hide menu toggle button if menu is empty and return early.
if ( ! nav.querySelector( 'ul' ) && nav.querySelector( '.menu-toggle' ) ) {
nav.querySelector( '.menu-toggle' ).style.display = 'none';
}
// Add nav-menu class.
if ( ! nav.classList.contains( 'nav-menu' ) ) {
nav.classList.add( 'nav-menu' );
}
// Toggle the hover event listeners.
self.toggleHoverEventListeners( nav );
// Toggle focus classes on links.
nav.querySelectorAll( 'a,button' ).forEach( function( link ) {
link.addEventListener( 'focus', window.alxMediaMenu.toggleFocus, true );
link.addEventListener( 'blur', window.alxMediaMenu.toggleFocus, true );
});
menuToggler.addEventListener( 'click', function() {
if ( nav.classList.contains( 'toggled' ) ) {
menuToggler.setAttribute( 'aria-expanded', 'false' );
nav.classList.remove( 'toggled' );
} else {
menuToggler.setAttribute( 'aria-expanded', 'true' );
nav.classList.add( 'toggled' );
}
});
// If on mobile nav, close it when clicking outside.
// If on desktop, close expanded submenus when clicking outside.
document.addEventListener( 'click', function( event ) {
if ( ! nav.contains( event.target ) ) {
// Mobile.
nav.classList.remove( 'toggled' );
// Desktop.
nav.querySelectorAll( 'button.active,.sub-menu.active' ).forEach( function( el ) {
el.classList.remove( 'active' );
});
menuToggler.setAttribute( 'aria-expanded', 'false' );
}
});
});
// Toggle mobile classes on initial load.
window.alxMediaMenu.toggleMobile( args.selector, args.breakpoint );
// Toggle mobile classes on resize.
window.addEventListener( 'resize', function() {
// If timer is null, reset it to our bounceDelay and run, otherwise wait until timer is cleared.
if ( ! window.resizeDebouncedTimeout ) {
window.resizeDebouncedTimeout = setTimeout( function() {
window.resizeDebouncedTimeout = null;
window.alxMediaMenu.toggleMobile( args.selector, args.breakpoint );
}, 250 );
}
});
// Toggle focus classes to allow submenu access on tables.
document.querySelectorAll( args.selector ).forEach( function( el ) {
window.alxMediaMenu.toggleFocusTouch( el );
});
},
/**
* Expand a menu item.
*
* @param {Element} - The menu item (DOM element).
* @return {void}
*/
toggleItem: function( el ) {
var parentLi = this.helper.firstAncestorMatch( el, 'li' ),
parentUl = this.helper.firstAncestorMatch( el, 'ul' ),
ul = parentLi.querySelector( 'ul.sub-menu' );
parentLi.classList.remove( 'hover' );
ul.setAttribute( 'tabindex', '-1' );
this.helper.toggleClass( ul, 'active' );
this.helper.toggleClass( el, 'active' );
// Go one level up in the list, and close other items that are already open.
parentUl.querySelectorAll( 'ul.sub-menu' ).forEach( function( subMenu ) {
var subMenuButton;
if ( ! parentLi.contains( subMenu ) ) {
subMenu.classList.remove( 'active' );
subMenuButton = subMenu.parentNode.querySelector( 'button.active' );
if ( subMenuButton ) {
subMenuButton.classList.remove( 'active' );
}
}
});
},
/**
* Toggles a mobile class to elements matching our selector,
* depending on the defined breakpoint.
*
* @param {string} selector - The elements where we want to toggle our mobile class.
* @param {string} className - The class-name we want to toggle.
* @param {int} breakpoint - The breakpoint.
* @return {void}
*/
toggleMobile: function( selector, breakpoint ) {
var self = this,
screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
navs = document.body.querySelectorAll( selector ),
isMobile;
breakpoint = breakpoint || 720;
isMobile = breakpoint > screenWidth;
if ( isMobile ) {
navs.forEach( function( nav ) {
if ( ! nav.classList.contains( 'mobile' ) ) {
nav.classList.add( 'mobile' );
self.toggleHoverEventListeners( nav );
}
});
} else {
navs.forEach( function( nav ) {
if ( nav.classList.contains( 'mobile' ) ) {
nav.classList.remove( 'mobile' );
self.toggleHoverEventListeners( nav );
}
});
}
},
/**
* Add a "hover" class.
*
* @return {void}
*/
liMouseEnterEvent: function() {
this.classList.add( 'hover' );
},
/**
* Remove the "hover" class.
*
* @return {void}
*/
liMouseLeaveEvent: function() {
this.classList.remove( 'hover' );
},
/**
*
* @param {Element} nav - The nav element.
* @return {void}
*/
toggleHoverEventListeners: function( nav ) {
if ( nav.classList.contains( 'mobile' ) ) {
this.removeHoverEventListeners( nav );
} else {
this.addHoverEventListeners( nav );
}
},
/**
* Add event-listeners for hover events.
*
* @param {Element} nav - The nav element.
* @return {void}
*/
addHoverEventListeners: function( nav ) {
nav.querySelectorAll( 'li' ).forEach( function( li ) {
li.addEventListener( 'mouseenter', window.alxMediaMenu.liMouseEnterEvent );
li.addEventListener( 'mouseleave', window.alxMediaMenu.liMouseLeaveEvent );
});
},
/**
* Remove event-listeners for hover events.
*
* @param {Element} nav - The nav element.
* @return {void}
*/
removeHoverEventListeners: function( nav ) {
nav.querySelectorAll( 'li' ).forEach( function( li ) {
li.removeEventListener( 'mouseenter', window.alxMediaMenu.liMouseEnterEvent );
li.removeEventListener( 'mouseleave', window.alxMediaMenu.liMouseLeaveEvent );
});
},
/**
* Sets or removes .focus class on an element.
*
* @return {void}
*/
toggleFocus: function() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
},
/**
* Toggle focus classes to allow submenu access on tables.
*
* @param {Element} el - The menu element.
* @return {void}
*/
toggleFocusTouch: function( el ) {
var touchStartFn,
parentLinks = el.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
if ( 'ontouchstart' in window ) {
touchStartFn = function( e ) {
var menuItem = this.parentNode;
if ( ! menuItem.classList.contains( 'focus' ) ) {
e.preventDefault();
menuItem.parentNode.children.forEach( function( child ) {
if ( menuItem !== child ) {
child.classList.remove( 'focus' );
}
});
menuItem.classList.add( 'focus' );
} else {
menuItem.classList.remove( 'focus' );
}
};
parentLinks.forEach( function( parentLink ) {
parentLink.addEventListener( 'touchstart', touchStartFn, false );
});
}
},
/**
* Helper methods.
*/
helper: {
/**
* Toggle a class to an element.
*
* @param {Element} el - The element.
* @param {string} className - The class we want to toggle.
* @return {void}
*/
toggleClass: function( el, className ) {
if ( el.classList.contains( className ) ) {
el.classList.remove( className );
} else {
el.classList.add( className );
}
},
/**
* Get the 1st ancestor of an element that matches our selector.
*
* @param {Element} el - The element.
* @param {string} selector - The class we want to toggle.
* @return {Element}
*/
firstAncestorMatch: function( el, selector ) {
if ( el.parentNode.matches( selector ) ) {
return el.parentNode;
}
return this.firstAncestorMatch( el.parentNode, selector );
}
}
};
window.alxMediaMenu.init({
selector: '.main-navigation.nav-menu',
breakpoint: 720
});

193
js/scripts.js Normal file
View file

@ -0,0 +1,193 @@
/*
scripts.js
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Copyright: (c) 2013 Alexander "Alx" Agnarson, http://alx.media
*/
"use strict";
jQuery(document).ready(function($) {
/* Toggle header search
/* ------------------------------------ */
$('.toggle-search').on('click', function() {
$('.toggle-search').toggleClass('active');
$('.search-expand').fadeToggle(250);
setTimeout(function(){
$('.search-expand input').focus();
}, 300);
});
/* Scroll to top
/* ------------------------------------ */
$('a#back-to-top').on('click', function() {
$('html, body').animate({scrollTop:0},'slow');
return false;
});
/* Tabs widget
/* ------------------------------------ */
(function() {
var $tabsNav = $('.alx-tabs-nav'),
$tabsNavLis = $tabsNav.children('li'),
$tabsContainer = $('.alx-tabs-container');
$tabsNav.each(function() {
var $this = $(this);
$this.next().children('.alx-tab').stop(true,true).hide()
.siblings( $this.find('a').attr('href') ).show();
$this.children('li').first().addClass('active').stop(true,true).show();
});
$tabsNavLis.on('click', function(e) {
var $this = $(this);
$this.siblings().removeClass('active').end()
.addClass('active');
$this.parent().next().children('.alx-tab').stop(true,true).hide()
.siblings( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
}).children( window.location.hash ? 'a[href="' + window.location.hash + '"]' : 'a:first' ).trigger('click');
})();
/* Comments / pingbacks tabs
/* ------------------------------------ */
$('.comment-tabs li').on('click', function() {
$('.comment-tabs li').removeClass('active');
$(this).addClass('active');
$('.comment-tab').hide();
var selected_tab = $(this).find('a').attr('href');
$(selected_tab).fadeIn();
return false;
});
/* Table odd row class
/* ------------------------------------ */
$('table tr:odd').addClass('alt');
/* Fitvids
/* ------------------------------------ */
function responsiveVideo() {
if ( $().fitVids ) {
$('#wrapper').fitVids();
}
}
responsiveVideo();
/* Header Sticky
/* ------------------------------------ */
$('.logged-out #header-sticky').stickThis({
top: 0,
minscreenwidth: 1081,
maxscreenwidth: 999999,
zindex: 99,
debugmode: false,
pushup: ''
});
$('.admin-bar #header-sticky').stickThis({
top: 32,
minscreenwidth: 1081,
maxscreenwidth: 999999,
zindex: 99,
debugmode: false,
pushup: ''
});
/* Jetpack infinite scroll
/* ------------------------------------ */
var infiniteCount = 2;
$( document.body ).on( 'post-load', function () {
var elements = $('.infinite-wrap.infinite-view-' + infiniteCount + ' article');
$('#masonry').imagesLoaded().done( function(){
$('#masonry').masonry( 'appended', elements );
infiniteCount++;
});
});
/* Hide on scroll down
/* ------------------------------------ */
var scrollTimeOut = true,
lastYPos = 0,
yPos = 0,
yPosDelta = 5,
nav = $('.hide-on-scroll-down'),
navHeight = nav.outerHeight(),
setNavClass = function() {
scrollTimeOut = false;
yPos = $(window).scrollTop();
if(Math.abs(lastYPos - yPos) >= yPosDelta) {
if (yPos > lastYPos && yPos > navHeight){
nav.addClass('hide-scroll');
} else {
nav.removeClass('hide-scroll');
}
lastYPos = yPos;
}
};
$(window).scroll(function(e){
scrollTimeOut = true;
});
setInterval(function() {
if (scrollTimeOut) {
setNavClass();
}
}, 250);
/* Slick image slide
/* ------------------------------------ */
$('.slick-image-slide').each( function() {
$( this ).slick( {
dots: false,
adaptiveHeight: true,
appendArrows: $(this).parents('.slick-image-slide-wrapper').find('.slick-image-slide-nav'),
appendDots: $(this).parents('.slick-image-slide-wrapper').find('.slick-image-slide-dots')
} );
} );
/* Trap focus
/* ------------------------------------ */
// add all the elements inside modal which you want to make focusable
const focusableElements =
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modal = document.querySelector('.search-trap-focus'); // select the modal by it's id
if ( modal ) {
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
document.addEventListener('keydown', function(e) {
let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
if (!isTabPressed) {
return;
}
if (e.shiftKey) { // if shift key pressed for shift + tab combination
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus(); // add focus for the last focusable element
e.preventDefault();
}
} else { // if tab key is pressed
if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
firstFocusableElement.focus(); // add focus for the first focusable element
e.preventDefault();
}
}
});
}
});

3037
js/slick.js Normal file
View file

File diff suppressed because it is too large Load diff

18
js/slick.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long