orbit4-5/app/assets/javascripts/group.js

79 lines
3.1 KiB
JavaScript

(function() {
"use strict";
// Commonly use variables
var doc = document;
var group = {
// Detect and change the top position of the cycle navs
cycleFix: function() {
if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) {
var imgs = doc.querySelectorAll( ".group-post-banner-image" ),
cycleNav = doc.querySelectorAll( ".cycle-nav" ),
len = cycleNav.length,
i = -1;
// Hide the navs when there's noly one slide
if( imgs.length <= 1 ) {
for( i = 0; i < len; i++ ) {
cycleNav[ i ].classList.add( "hide" );
}
}
} else if ( doc.querySelectorAll( ".group-post-banner-image").length === 0 && doc.querySelector( ".group-post-image-wrap" ) ) {
doc.querySelector( ".group-post-image-wrap").classList.add( "hide" );
}
},
// Create the tool tip wrap and get the seen counts and then inject them into DOM
createToolTip: function( container, names, cls1, cls2, wrapEl ) {
if( doc.querySelectorAll( names ).length >= 1 ) {
var container = doc.querySelector( container ),
names = doc.querySelectorAll( names ),
span = doc.createElement( "span" ),
wrap = doc.createElement( "div" ),
frag = document.createDocumentFragment();
// Get the seen counts and append them
span.className = cls1;
names[ 0 ].parentNode.appendChild( span );
// Create the tool tip and save them in the document fragment
wrap.className = cls2 + " tool-tip";
Array.prototype.slice.call( names ).forEach( function( el ) {
frag.appendChild( el );
});
// Append the final result to DOM
wrap.appendChild( frag );
container.appendChild( wrap );
}
},
// Create scroll effect (with css)
scrollEffect: function() {
if( doc.querySelector( ".group-page") ) {
var page = doc.querySelector( ".group-page" ),
wrap = doc.querySelector( ".group-page-banner-image-wrap" ),
scrollClass = "scroll";
// Use pageYOffset to get the Y positoin and add scroll on it, the animation
// is done by css transition
window.addEventListener( "scroll", function() {
if( window.pageYOffset !== 0 ) {
page.classList.add( scrollClass );
} else {
page.classList.remove( scrollClass );
}
}, false);
}
}
}
// When DOM is completely loaded, execute these functions
document.addEventListener( "DOMContentLoaded", function( event ) {
group.cycleFix();
group.createToolTip( ".group-post-seen-by", ".group-post-seen-by-name", "group-post-seen-by-count", "group-post-seen-by-names" );
group.scrollEffect();
});
})();