diff --git a/classes/classes.js b/classes/classes.js index db86f28..e11e883 100644 --- a/classes/classes.js +++ b/classes/classes.js @@ -1,25 +1,33 @@ /** * Created by Simon on 09.05.2017. */ - -function hasClass(el, className) { - if (el.classList) - return el.classList.contains(className); - else - return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')) -} - -function addClass(el, className) { - if (el.classList) - el.classList.add(className); - else if (!hasClass(el, className)) el.className += " " + className -} - -function removeClass(el, className) { - if (el.classList) - el.classList.remove(className); - else if (hasClass(el, className)) { - var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); - el.className = el.className.replace(reg, ' ') +function hasClass( el, className ) { + "use strict"; + /*Check if it has a certain class*/ + if ( el.classList ) { + /*Get all classes and check for the given one*/ + return el.classList.contains( className ); + } else { + /**/ + return !! el.className.match( new RegExp( "(\\s|^)" + className + "(\\s|$)" ) ); } -} \ No newline at end of file +} + +function addClass( el, className ) { + "use strict"; + if ( el.classList ) { + el.classList.add( className ); + } else if ( ! hasClass( el, className ) ) { + el.className += " " + className; + } +} + +function removeClass( el, className ) { + "use strict"; + if ( el.classList ) { + el.classList.remove( className ); + } else if ( hasClass( el, className ) ) { + var reg = new RegExp( "(\\s|^)" + className + "(\\s|$)" ); + el.className = el.className.replace( reg, " " ); + } +} diff --git a/element-position/element-position.js b/element-position/element-position.js index d6096e1..b6fccdd 100644 --- a/element-position/element-position.js +++ b/element-position/element-position.js @@ -7,135 +7,90 @@ // variables curleft and curtop to 0: function findPos(obj) { - var curleft = curtop = 0; - + "use strict"; + var curleft = 0; + var curtop = 0; if (obj.offsetParent) { - do { curleft += obj.offsetLeft; curtop += obj.offsetTop; - - } while (obj = obj.offsetParent); - + } while (obj === obj.offsetParent); return [curleft, curtop]; } } -//function findPos2(element) { -// var bodyRect = document.body.getBoundingClientRect(), -// elemRect = element.getBoundingClientRect(), -// offset = elemRect.top - bodyRect.top; -// -// return [] -//} - -//function findPos3(el) { -// var _x = 0; -// var _y = 0; -// -// while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { -// -// _x += el.offsetLeft - el.scrollLeft; -// _y += el.offsetTop - el.scrollTop; -// -// el = el.offsetParent; -// } -// -// return {top: _y, left: _x}; -//} - -//var x = getOffset( document.getElementById('header') ).left; - - function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset) { - + // "use strict"; // Default values - $startoffset = (typeof $startoffset !== 'undefined') ? $startoffset : 0; - $endoffset = (typeof $endoffset !== 'undefined') ? $endoffset : 0; - $activeclass = (typeof $activeclass !== 'undefined') ? $activeclass : 'active'; - $inactiveclass = (typeof $inactiveclass !== 'undefined') ? $inactiveclass : 'inactive'; - $absoluteoffset = (typeof $absoluteoffset !== 'undefined') ? $absoluteoffset : false; + $startoffset = ( "undefined" !== typeof $startoffset ) ? $startoffset : 0; + $endoffset = ( "undefined" !== typeof $endoffset ) ? $endoffset : 0; + $activeclass = ( "undefined" !== typeof $activeclass ) ? $activeclass : "active"; + $inactiveclass = ( "undefined" !== typeof $inactiveclass ) ? $inactiveclass : "inactive"; + $absoluteoffset = ( "undefined" !== typeof $absoluteoffset ) ? $absoluteoffset : false; // Variables - var $elementtop, + var $elementtop; // Get element - $el = document.getElementById($id), + var $el = document.getElementById($id); // Get Start & End Pixel From Top - $start = 0, - $end = 0, - - // get el position - - $elementtop = findPos($el)[1]; - - - pos = function () { + var $start = 0; + var $end = 0; + // Get el position + var $elementtop = findPos($el)[1]; + var pos = function () { console.log("el pos: " + $elementtop); + }; - }, - - // what should we do when scrolling occurs - runOnScroll = function () { - var $scrollpos = window.scrollY; - - //console.log('scrollposition'); - // - // - //console.log($scrollpos); - // - //console.log('offsets'); - //console.log($startoffset); - //console.log($endoffset); - // - //console.log('calcpositions'); - //console.log($start); - //console.log($end); - // - //console.log('positions'); - - // Check if we are beyond the startpoint - if ($scrollpos > $start) { + $start = $elementtop + $startoffset; - // Now Check if it has an end - if ( - $endoffset != 0 && // if endposition is set - $scrollpos > ($end)// and we are beyond that point - ) { + // What should we do when scrolling occurs + var runOnScroll = function () { + var $scrollpos = window.scrollY; - //remove the class - addClass($el, $inactiveclass) - removeClass($el, $activeclass); + // Check if we are beyond the startpoint + if ($scrollpos > $start) { - //Scroll back the amount of end positioning to avoid jumps - // Todo maybe better to integrate in another function for scrolling/fixing etc. - //window.scrollTo(0, $end); - } + // Now Check if it has an end + if ( + $endoffset != 0 && // If endposition is set + $scrollpos > ( $end )// And we are beyond that point + ) { - // in any other case add it - else { - removeClass($el, $inactiveclass); - removeClass($el, 'before'); - - addClass($el, $activeclass); - addClass($el, 'after'); - } - } - - //In any other case than being beyond start, remove the class - else { + //Remove the class addClass($el, $inactiveclass); - addClass($el, 'before'); - removeClass($el, $activeclass); - removeClass($el, 'after'); + + //Scroll back the amount of end positioning to avoid jumps + // Todo maybe better to integrate in another function for scrolling/fixing etc. + //window.scrollTo(0, $end); + } - }; + + // In any other case add it + else { + removeClass($el, $inactiveclass); + removeClass($el, 'before'); + + addClass($el, $activeclass); + addClass($el, 'after'); + } + } + + //In any other case than being beyond start, remove the class + else { + addClass($el, $inactiveclass); + addClass($el, 'before'); + + removeClass($el, $activeclass); + removeClass($el, 'after'); + } + }; switch ($absoluteoffset) { case true: @@ -143,18 +98,15 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e $start = $startoffset; $end = $endoffset; - console.log("Start" + $start); break; case false: - $start = ($elementtop + $startoffset); - $end = ($elementtop + $endoffset); + $start = ( $elementtop + $startoffset ); + $end = ( $elementtop + $endoffset ); - console.log("Start" + $start); break; } - - // and then make each element do something on scroll + // And then make each element do something on scroll // Trigger events window.addEventListener("load", pos); @@ -172,12 +124,10 @@ function getheight($selector) { if ($identifier === ".") { return $element = document.getElementsByClassName( $selector.substr(1))[0].getBoundingClientRect().height; - } - else if ($identifier === "#") { + } else if ($identifier === "#") { return $element = document.getElementById( $selector.substr(1)).getBoundingClientRect().height; + } else { + console.log("Error identifying selector type!"); } - else { - console.log("Error identifying selector type!") - } -} \ No newline at end of file +}