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
+28 -20
View File
@@ -1,25 +1,33 @@
/** /**
* Created by Simon on 09.05.2017. * Created by Simon on 09.05.2017.
*/ */
function hasClass( el, className ) {
function hasClass(el, className) { "use strict";
if (el.classList) /*Check if it has a certain class*/
return el.classList.contains(className); if ( el.classList ) {
else /*Get all classes and check for the given one*/
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')) return el.classList.contains( className );
} } else {
/**/
function addClass(el, className) { return !! el.className.match( new RegExp( "(\\s|^)" + className + "(\\s|$)" ) );
if (el.classList) }
el.classList.add(className); }
else if (!hasClass(el, className)) el.className += " " + className
} function addClass( el, className ) {
"use strict";
function removeClass(el, className) { if ( el.classList ) {
if (el.classList) el.classList.add( className );
el.classList.remove(className); } else if ( ! hasClass( el, className ) ) {
else if (hasClass(el, className)) { el.className += " " + className;
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); }
el.className = el.className.replace(reg, ' ') }
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
+33 -83
View File
@@ -7,108 +7,63 @@
// variables curleft and curtop to 0: // variables curleft and curtop to 0:
function findPos(obj) { function findPos(obj) {
var curleft = curtop = 0; "use strict";
var curleft = 0;
var curtop = 0;
if (obj.offsetParent) { if (obj.offsetParent) {
do { do {
curleft += obj.offsetLeft; curleft += obj.offsetLeft;
curtop += obj.offsetTop; curtop += obj.offsetTop;
} while (obj === obj.offsetParent);
} while (obj = obj.offsetParent);
return [curleft, curtop]; 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) { function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset) {
// "use strict";
// Default values // Default values
$startoffset = (typeof $startoffset !== 'undefined') ? $startoffset : 0; $startoffset = ( "undefined" !== typeof $startoffset ) ? $startoffset : 0;
$endoffset = (typeof $endoffset !== 'undefined') ? $endoffset : 0; $endoffset = ( "undefined" !== typeof $endoffset ) ? $endoffset : 0;
$activeclass = (typeof $activeclass !== 'undefined') ? $activeclass : 'active'; $activeclass = ( "undefined" !== typeof $activeclass ) ? $activeclass : "active";
$inactiveclass = (typeof $inactiveclass !== 'undefined') ? $inactiveclass : 'inactive'; $inactiveclass = ( "undefined" !== typeof $inactiveclass ) ? $inactiveclass : "inactive";
$absoluteoffset = (typeof $absoluteoffset !== 'undefined') ? $absoluteoffset : false; $absoluteoffset = ( "undefined" !== typeof $absoluteoffset ) ? $absoluteoffset : false;
// Variables // Variables
var $elementtop, var $elementtop;
// Get element // Get element
$el = document.getElementById($id), var $el = document.getElementById($id);
// Get Start & End Pixel From Top // Get Start & End Pixel From Top
$start = 0, var $start = 0;
$end = 0, var $end = 0;
// get el position
$elementtop = findPos($el)[1];
pos = function () {
// Get el position
var $elementtop = findPos($el)[1];
var pos = function () {
console.log("el pos: " + $elementtop); console.log("el pos: " + $elementtop);
};
}, $start = $elementtop + $startoffset;
// what should we do when scrolling occurs
runOnScroll = function () { // What should we do when scrolling occurs
var runOnScroll = function () {
var $scrollpos = window.scrollY; 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 // Check if we are beyond the startpoint
if ($scrollpos > $start) { if ($scrollpos > $start) {
// Now Check if it has an end // Now Check if it has an end
if ( if (
$endoffset != 0 && // if endposition is set $endoffset != 0 && // If endposition is set
$scrollpos > ($end)// and we are beyond that point $scrollpos > ( $end )// And we are beyond that point
) { ) {
//remove the class //Remove the class
addClass($el, $inactiveclass) addClass($el, $inactiveclass);
removeClass($el, $activeclass); removeClass($el, $activeclass);
//Scroll back the amount of end positioning to avoid jumps //Scroll back the amount of end positioning to avoid jumps
@@ -117,7 +72,7 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e
} }
// in any other case add it // In any other case add it
else { else {
removeClass($el, $inactiveclass); removeClass($el, $inactiveclass);
removeClass($el, 'before'); removeClass($el, 'before');
@@ -143,18 +98,15 @@ function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $e
$start = $startoffset; $start = $startoffset;
$end = $endoffset; $end = $endoffset;
console.log("Start" + $start);
break; break;
case false: case false:
$start = ($elementtop + $startoffset); $start = ( $elementtop + $startoffset );
$end = ($elementtop + $endoffset); $end = ( $elementtop + $endoffset );
console.log("Start" + $start);
break; break;
} }
// And then make each element do something on scroll
// and then make each element do something on scroll
// Trigger events // Trigger events
window.addEventListener("load", pos); window.addEventListener("load", pos);
@@ -172,12 +124,10 @@ function getheight($selector) {
if ($identifier === ".") { if ($identifier === ".") {
return $element = document.getElementsByClassName( return $element = document.getElementsByClassName(
$selector.substr(1))[0].getBoundingClientRect().height; $selector.substr(1))[0].getBoundingClientRect().height;
} } else if ($identifier === "#") {
else if ($identifier === "#") {
return $element = document.getElementById( return $element = document.getElementById(
$selector.substr(1)).getBoundingClientRect().height; $selector.substr(1)).getBoundingClientRect().height;
} } else {
else { console.log("Error identifying selector type!");
console.log("Error identifying selector type!")
} }
} }