simongehrig.de/js-utilities
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

JS Utilities

Browse Source 
Minor Code Cleanup
This commit is contained in:
Simon Gehrig
2017-07-05 18:34:06 +02:00
parent 65551b563e
commit a8cfd05769
2 changed files with 91 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
classes/classes.js
+29 -21
View File
@@ -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|$)" ) );
}
}
}
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, " " );
}
}
element-position/element-position.js
+62 -112
View File
@@ -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!")
}
}
}