Skip to content
This repository has been archived by the owner on Aug 26, 2021. It is now read-only.

Commit

Permalink
(#98) added some code
Browse files Browse the repository at this point in the history 
Signed-off-by: Dominik Wilkowski <Hi@Dominik-Wilkowski.com>
  • Loading branch information
@dominikwilkowski
dominikwilkowski committed Apr 10, 2017
1 parent 0a307a3 commit 5981373
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 96 deletions.
258 changes: 177 additions & 81 deletions packages/open-close/src/js/module.js
View file
Expand Up @@ -19,7 +19,7 @@ var UIKIT = UIKIT || {};
* Calculate the size of the element when it's dimension(height or width) is set to auto
*
* @param {object} el - The element to animate
* @param {string} dimension - The dimenstion the animation moves in (either height or width)
* @param {string} dimension - The dimension the animation moves in (either height or width)
*
* @return {integer} - the size of the element when at dimension(height or width)='auto'
*/
Expand All @@ -46,10 +46,10 @@ var UIKIT = UIKIT || {};


/**
* Get inital size of element to animate
* Get initial size of element to animate
*
* @param {object} el - The element to animate
* @param {string} dimension - The dimenstion the animation moves in (either height or width)
* @param {string} dimension - The dimension the animation moves in (either height or width)
*
* @return {object} - initial and end sizes of the element to animate
*/
Expand Down Expand Up @@ -124,22 +124,23 @@ var UIKIT = UIKIT || {};
/**
* The magical animation function
*
* @param {object} el - Element/s we are animating
* @param {integer} endSize - The size the element should animate to
* @param {integer} initialSize - The initial size of the element
* @param {integer} dimesnion - The dimenstion the animation moves in (either height or width)
* @param {integer} stepSize - The amount of pixels the element needs to move for each setInterval
* @param {integer} steps - The amount of steps the element needs to take
* @param {integer} intervalTime - The time taken for each iteration of setInterval in milliseconds
* @param {object} el - Element/s we are animating
* @param {integer} endSize - The size the element should animate to
* @param {integer} initialSize - The initial size of the element
* @param {integer} dimesnion - The dimension the animation moves in (either height or width)
* @param {integer} stepSize - The amount of pixels the element needs to move for each setInterval
* @param {integer} steps - The amount of steps the element needs to take
* @param {integer} intervalTime - The time taken for each iteration of setInterval in milliseconds
* @param {function} callback - A function to be executed after the animation ends
*
*/

function animate( el, endSize, initialSize, dimension, stepSize, steps, intervalTime ) {
function animate( el, endSize, initialSize, dimension, stepSize, steps, intervalTime, callback, iterations ) {

UIKIT.openclose.animation = setInterval ( function() {
el.UIKITanimation = setInterval ( function() {

var iterateCounter; // this variable will hold the current size of the element
var iterateSize; // this variable will hold the the
var iterateCounter; // this variable will hold the current size of the element
var iterateSize; // this variable will hold the the

// check the current animation state of the element
if (endSize > initialSize) {
Expand All @@ -162,25 +163,44 @@ var UIKIT = UIKIT || {};
iterateSize = el.style.width = initialSize + 'px';
}

// we dont run function if dropwdown is already closed or opened
if ( initialSize === endSize ) {
clearInterval(UIKIT.openclose.animation);
}
else if ( steps === 0 && dimension == 'width' ) {
el.style.width = endSize + 'px';
clearInterval(UIKIT.openclose.animation);
}
else if ( steps === 0 && dimension == 'height' ) {
el.style.height = endSize + 'px';
clearInterval(UIKIT.openclose.animation);
}
else {
iterateCounter
iterateSize
steps--
}

}, intervalTime )
if (typeof callback !== 'function') {
callback = function() {};
}

// we don't run function if dropwdown is already closed or opened
if ( initialSize === endSize ) {
clearInterval( el.UIKITanimation );

iterations.UIKITinteration ++;
if( iterations.UIKITinteration >= iterations.UIKITinterations ) {
callback();
}
}
else if ( steps === 0 && dimension == 'width' ) {
el.style.width = endSize + 'px';
clearInterval( el.UIKITanimation );

iterations.UIKITinteration ++;
if( iterations.UIKITinteration >= iterations.UIKITinterations ) {
callback();
}
}
else if ( steps === 0 && dimension == 'height' ) {
el.style.height = endSize + 'px';
clearInterval( el.UIKITanimation );

iterations.UIKITinteration ++;
if( iterations.UIKITinteration >= iterations.UIKITinterations ) {
callback();
}
}
else {
iterateCounter
iterateSize
steps--
}

}, intervalTime )

}

Expand All @@ -190,23 +210,48 @@ var UIKIT = UIKIT || {};
*
* @param {object} el - The element to animate
* @param {string} closeSize - The direction of the animation (either height or width)
* @param {string} dimension - The dimenstion the animation moves in (either height or width)
* @param {string} dimension - The dimension the animation moves in (either height or width)
* @param {integer} speed - The speed of the animation in ms
* @param {function} callback - The callback to run after the animation has completed
*
*/

openclose.close = function (el, closeSize, dimension, speed, callback) {
clearInterval(UIKIT.openclose.animation);

var initialSize = getInitialSize ( el, dimension, closeSize )
var animationSpecs = calculateAnimationSpecs (initialSize.initialSize, closeSize, speed)

animate( el, closeSize, initialSize.initialSize, dimension, animationSpecs.stepSize, animationSpecs.steps, animationSpecs.intervalTime )

if (typeof callback === 'function') {
callback();
//make iteratable
if( el.length === undefined ) {
el = [ el ];
}

//adding iteration counts
el[ 0 ].UIKITinteration = 0;
el[ 0 ].UIKITinterations = el.length;

//iterate over all DOM nodes
for(var i = 0; i < el.length; i++) {
var element = el[ i ];

clearInterval( element.UIKITanimation );

var initialSize = getInitialSize ( element, dimension, closeSize )
var animationSpecs = calculateAnimationSpecs (initialSize.initialSize, closeSize, speed)

animate(
element,
closeSize,
initialSize.initialSize,
dimension,
animationSpecs.stepSize,
animationSpecs.steps,
animationSpecs.intervalTime,
callback,
el[ 0 ]
);
};

// if (typeof callback === 'function') {
// callback();
// }
};


Expand All @@ -215,21 +260,47 @@ var UIKIT = UIKIT || {};
*
* @param {object} el - The element to animate
* @param {string} closeSize - The direction of the animation (either height or width)
* @param {string} dimension - The dimenstion the animation moves in (either height or width)
* @param {string} dimension - The dimension the animation moves in (either height or width)
* @param {integer} speed - The speed of the animation in ms
* @param {function} callback - The callback to run after the animation has completed
*
*/
openclose.open = function (el, openSize, dimension, speed, callback) {
clearInterval(UIKIT.openclose.animation);
openclose.open = function( el, openSize, dimension, speed, callback ) {

var initialSize = getInitialSize (el, dimension, openSize )
var animationSpecs = calculateAnimationSpecs (initialSize.initialSize, initialSize.endSize, speed)
animate( el, initialSize.endSize, initialSize.initialSize, dimension, animationSpecs.stepSize, animationSpecs.steps, animationSpecs.intervalTime )
//make iteratable
if( el.length === undefined ) {
el = [ el ];
}

if (typeof callback === 'function') {
callback();
//adding iteration counts
el[ 0 ].UIKITinteration = 0;
el[ 0 ].UIKITinterations = el.length;

//iterate over all DOM nodes
for(var i = 0; i < el.length; i++) {
var element = el[ i ];

clearInterval( element.UIKITanimation );

var initialSize = getInitialSize( element, dimension, openSize )
var animationSpecs = calculateAnimationSpecs( initialSize.initialSize, initialSize.endSize, speed )

animate(
element,
initialSize.endSize,
initialSize.initialSize,
dimension,
animationSpecs.stepSize,
animationSpecs.steps,
animationSpecs.intervalTime,
callback,
el[ 0 ]
);
}

// if (typeof callback === 'function') {
// callback();
// }
};


Expand All @@ -238,47 +309,72 @@ var UIKIT = UIKIT || {};
*
* @param {object} el - The element to animate
* @param {string} closeSize - The direction of the animation (either height or width)
* @param {string} dimension - The dimenstion the animation moves in (either height or width)
* @param {string} dimension - The dimension the animation moves in (either height or width)
* @param {integer} speed - The speed of the animation in ms
* @param {function} callback - The callback to run after the animation has completed
*
*/
openclose.toggle = function(el, closeSize, openSize, dimension, speed, callback) {
clearInterval(UIKIT.openclose.animation);
openclose.toggle = function( el, closeSize, openSize, dimension, speed, callback ) {

var closeSize = parseInt( closeSize ) || 0;
var openSize = openSize || 'auto';
var initialSize = getInitialSize( el, dimension, openSize );
var targetSize; // the size the element should open/close to after toggle is clicked
//make iteratable
if( el.length === undefined ) {
el = [ el ];
}

// check the state of the element and determine whether the element should close or open
//adding iteration counts
el[ 0 ].UIKITinteration = 0;
el[ 0 ].UIKITinterations = el.length;

// is the accordion closed?
if ( initialSize.initialSize === parseInt( closeSize ) ) {
targetSize = initialSize.endSize;
}
// is the accordion open?
else if ( initialSize.initialSize === initialSize.endSize ) {
targetSize = closeSize;
}
// is the accordion opening?
else if ( el.UIKITtoggleState === 'opening' ) {
targetSize = closeSize;
}
// is the accordion closing?
else if ( el.UIKITtoggleState === 'closing' ) {
targetSize = initialSize.endSize;
}
else {
throw new Error('Uhoh: Something went wrong with UIKIT.openclose.toggle animation');
}
//iterate over all DOM nodes
for(var i = 0; i < el.length; i++) {
var element = el[ i ];

clearInterval( element.UIKITanimation );

var animationSpecs = calculateAnimationSpecs (initialSize.initialSize, targetSize, speed)
var closeSize = parseInt( closeSize ) || 0;
var openSize = openSize || 'auto';
var initialSize = getInitialSize( element, dimension, openSize );
var targetSize; // the size the element should open/close to after toggle is clicked

animate( el, targetSize, initialSize.initialSize, dimension, animationSpecs.stepSize, animationSpecs.steps, animationSpecs.intervalTime )
// check the state of the element and determine whether the element should close or open

// is the accordion closed?
if ( initialSize.initialSize === parseInt( closeSize ) ) {
targetSize = initialSize.endSize;
}
// is the accordion open?
else if ( initialSize.initialSize === initialSize.endSize ) {
targetSize = closeSize;
}
// is the accordion opening?
else if ( element.UIKITtoggleState === 'opening' ) {
targetSize = closeSize;
}
// is the accordion closing?
else if ( element.UIKITtoggleState === 'closing' ) {
targetSize = initialSize.endSize;
}
else {
throw new Error('Uhoh: Something went wrong with UIKIT.openclose.toggle animation');
}

if (typeof callback === 'function') {
callback();
var animationSpecs = calculateAnimationSpecs (initialSize.initialSize, targetSize, speed)

animate(
element,
targetSize,
initialSize.initialSize,
dimension,
animationSpecs.stepSize,
animationSpecs.steps,
animationSpecs.intervalTime,
callback,
el[ 0 ]
);

// if (typeof callback === 'function') {
// callback();
// }
}
};

Expand Down

0 comments on commit 5981373

Please sign in to comment.