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

Commit

Permalink
(#98) fixed specs for super small edge cases
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 20, 2017
1 parent aabfeff commit 5333282
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 50 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -18,8 +18,8 @@
"bootstrap": "lerna bootstrap",
"build": "lerna run build",
"publish": "lerna publish --skip-git",
"test": "lerna run test:a11y --concurrency 1 && node scripts/helper.js test",
"test:unit-test": "jest"
"test:unit-test": "jest",
"test": "lerna run test:a11y --concurrency 1 && node scripts/helper.js test"
},
"jest": {
"testRegex": "\\.spec.js$",
Expand Down
40 changes: 21 additions & 19 deletions packages/animate/README.md
View file
Expand Up @@ -52,20 +52,20 @@ Animate has 3 functions:
The options settings are:

`element` - DOM node/s you want to animate
`property` - CSS property you want to animate (optional, defaults to `height`)
`endSize` - 'auto' or pixel size of the property after the animation has finished (optional)
`speed` - animation speed in milliseconds (optional, defaults to `250ms`)
`property` - CSS property you want to animate (optional, defaults to `height`)
`endSize` - 'auto' or pixel size of the property after the animation has finished (optional)
`speed` - animation speed in milliseconds (optional, defaults to `250ms`)
`callback` - callback function to run when the animation completes (optional)

Example:

```js
UIKIT.animate.Run(
element: document.getElementById('elementId'),
property: 'height',
endSize: 'auto',
speed: 1000,
callback: myFunction,
element: document.getElementById('elementId'),
property: 'height',
endSize: 'auto',
speed: 1000,
callback: myFunction,
)
```

Expand All @@ -81,7 +81,7 @@ Example:

```js
UIKIT.animate.Stop(
element: document.getElementById('elementId'),
element: document.getElementById('elementId'),
)
```

Expand All @@ -92,22 +92,22 @@ UIKIT.animate.Stop(
The options settings are:

`element` - DOM node/s you want to animate
`property` - CSS property you want to animate (optional, defaults to `height`)
`openSize` - pixel size of the property when the element is open (optional, defaults to `auto`)
`closeSize` - pixel size of the property when the element is closed (optional, defaults to `0`)
`speed` - animation speed in milliseconds (optional, defaults to `250ms`)
`property` - CSS property you want to animate (optional, defaults to `height`)
`openSize` - pixel size of the property when the element is open (optional, defaults to `auto`)
`closeSize` - pixel size of the property when the element is closed (optional, defaults to `0`)
`speed` - animation speed in milliseconds (optional, defaults to `250ms`)
`callback` - callback function to run when the animation completes (optional)

Example:

```js
UIKIT.animate.Toggle(
element: document.getElementById('elementId'),
property: 'height',
closeSize: 0,
openSize: 'auto',
speed: 1000,
callback: myFunction,
element: document.getElementById('elementId'),
property: 'height',
closeSize: 0,
openSize: 'auto',
speed: 1000,
callback: myFunction,
)
```

Expand Down Expand Up @@ -146,6 +146,8 @@ animate

The visual test: http://uikit.apps.staging.digital.gov.au/packages/animate/tests/site/

Run `jest` for the unit tests


**[⬆ back to top](#contents)**

Expand Down
15 changes: 15 additions & 0 deletions packages/animate/package.json
View file
Expand Up @@ -50,12 +50,27 @@
},
"devDependencies": {
"browser-sync": "^2.18.6",
"jest-cli": "^19.0.2",
"npm-run-all": "^4.0.1",
"onchange": "^3.2.1"
},
"files": [
"lib/*"
],
"jest": {
"testRegex": "\\.spec.js$",
"collectCoverageFrom": [
"lib/js/*.js"
],
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
}
},
"engines": {
"node": ">=0.12.0",
"npm": "^3.0.0"
Expand Down
15 changes: 7 additions & 8 deletions packages/animate/src/js/module.js
View file
Expand Up @@ -43,24 +43,24 @@ var UIKIT = UIKIT || {};
var distance = endSize - initialSize; // the overall distance the animation needs to travel
var intervalTime = ( speed / distance ); // the time each setInterval iteration will take
var stepSize = distance < 0 ? -1 : 1; // if distance is negative then we set stepSize to -1
var steps = Math.abs( distance / stepSize ); // the amount of steps required to achieve animation
var steps = Math.abs( distance / stepSize ); // the amount of steps required to get to endSize
intervalTime = speed / steps;

// we need to adjust our animation specs if interval time exceeds 60FPS eg intervalTime < 16.67ms
// we need to adjust our animation specs if interval time exceeds 60FPS eg intervalTime < 16.67ms (1000 / 60) = (50 / 3)
if( Math.abs( intervalTime ) < ( 50 / 3 ) ) {
stepSize = Math.round( ( 50 / 3 ) / intervalTime );
steps = Math.abs( Math.floor( distance / stepSize ) );
stepSize = distance < 0 ? -stepSize : stepSize;
intervalTime = speed / steps;
intervalTime = ( 50 / 3 ); // let’s not get lower that 60FPS
steps = Math.ceil( Math.abs( speed / intervalTime ) ); // we now need the steps and make sure we ceil them so -1 won't make them negative
stepSize = distance / steps; // last thing is step sizes which are derived from all of the above
}

return {
stepSize: stepSize,
steps: ( steps - 1 ), //TODO small distance with long time
steps: ( steps - 1 ),
intervalTime: intervalTime,
};
}

// export for node and babel environments
if( typeof module !== 'undefined' ) {
animate.CalculateAnimationSpecs = CalculateAnimationSpecs;
}
Expand Down Expand Up @@ -169,7 +169,6 @@ var UIKIT = UIKIT || {};
var element = elements[ i ]; // this element
UIKIT.animate.Stop( element ); // stop any previous animations
var initialSize = parseInt( GetCSSPropertyBecauseIE( element, options.property ) ); // the elements current size

var endSize = options.endSize; // the element end size

if( options.endSize === 'auto' ) { // calculate what 'auto' means in pixel
Expand Down
40 changes: 40 additions & 0 deletions packages/animate/tests/site/index.html
View file
Expand Up @@ -234,6 +234,46 @@ <h2>Open, close and toggle multiple items</h2>
</div>
</div>

<hr>

<div class="row">
<div class="col-sm-12">
<h2>Edge cases</h2>
</div>

<div class="grids col-sm-6">
<h2>less pixel than steps</h2>

<div>
<div>
<button aria-controls="open" onclick="UIKIT.animate.Run({ element: document.getElementById('edgecase1'), property: 'height', endSize: 3, speed: 4, callback: function() { console.log('end edgecase1!!'); } })">Open</button>
<button aria-controls="close" onclick="UIKIT.animate.Run({ element: document.getElementById('edgecase1'), property: 'height', endSize: 0, speed: 4, callback: function() { console.log('end edgecase2!!'); } })">Close</button>
<button aria-controls="toggle" onclick="UIKIT.animate.Toggle({ element: document.getElementById('edgecase1'), property: 'height', openSize: 3, closeSize: 0, speed: 4, callback: function() { console.log('end edgecase2!!'); } })">Toggle</button>
</div>
</div>

<div class="uikit-dropdown-example" id="edgecase1"></div>

</div>

<div class="grids col-sm-6">
<h2>Half pixel step size</h2>

<div>
<div>
<button aria-controls="open" onclick="UIKIT.animate.Run({ element: document.getElementById('edgecase2'), property: 'height', endSize: 200, speed: 473, callback: function() { console.log('end edgecase2!!'); } })">Open</button>
<button aria-controls="close" onclick="UIKIT.animate.Run({ element: document.getElementById('edgecase2'), property: 'height', endSize: 0, speed: 473, callback: function() { console.log('end edgecase2!!'); } })">Close</button>
<button aria-controls="toggle" onclick="UIKIT.animate.Toggle({ element: document.getElementById('edgecase2'), property: 'height', openSize: 200, closeSize: 0, speed: 473, callback: function() { console.log('end edgecase2!!'); } })">Toggle</button>
</div>
</div>

<div class="uikit-dropdown-example" id="edgecase2" style="height:0;">
&nbsp;<br><br><br>
</div>

</div>
</div>

</div>


Expand Down
40 changes: 19 additions & 21 deletions packages/animate/tests/unit/animate.spec.js
View file
Expand Up @@ -15,15 +15,15 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v
}

const result3 = {
"intervalTime": 12.5,
"stepSize": -1,
"steps": 19,
"intervalTime": 16.666666666666668,
"stepSize": -1.3333333333333333,
"steps": 14,
}

const result4 = {
"intervalTime": 15.625,
"stepSize": -27,
"steps": 15,
"intervalTime": 16.666666666666668,
"stepSize": -27.466666666666665,
"steps": 14,
}

const result5 = {
Expand Down Expand Up @@ -51,21 +51,21 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v
}

const result9 = {
"intervalTime": 14.586709886547812,
"stepSize": 2,
"steps": 616,
"intervalTime": 16.666666666666668,
"stepSize": 2.285185185185185,
"steps": 539,
}

const result10 = {
"intervalTime": 16,
"intervalTime": 16.666666666666668,
"stepSize": 2,
"steps": 4,
}

const result11 = {
"intervalTime": 14.285714285714286,
"stepSize": -128,
"steps": 6,
"intervalTime": 16.666666666666668,
"stepSize": -128.16666666666666,
"steps": 5,
}

const result12 = {
Expand All @@ -75,8 +75,8 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v
}

const result13 = {
"intervalTime": 0,
"stepSize": 0,
"intervalTime": 16.666666666666668,
"stepSize": 3,
"steps": 0,
}

Expand Down Expand Up @@ -110,23 +110,21 @@ test('UIKIT.animate.CalculateAnimationSpecs should calculate correct animation v
});



expect.extend({
toBeWholeNumber( received ) {

console.log(received.stepSize)

return {
message: () => (
`expected ${ received.stepSize } to be a whole number`
`expected ${ received.steps } to be a whole number`
),
pass: Math.round( received.stepSize ) === received.stepSize,
pass: Math.round( received.steps ) === received.steps,
};
},
});

test('UIKIT.animate.CalculateAnimationSpecs should only return whole number for steps', () => {

test('UIKIT.animate.CalculateAnimationSpecs should only return whole number for steps', () => {
expect( UIKIT.animate.CalculateAnimationSpecs( 162, 982, 350 ) ).toBeWholeNumber();
expect( UIKIT.animate.CalculateAnimationSpecs( 0, 3, 6 ) ).toBeWholeNumber();

});

0 comments on commit 5333282

Please sign in to comment.