5 |

6 |

7 |

8 |

9 | `; 10 | -------------------------------------------------------------------------------- /test/AnimakitRotator.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | 3 | import { render } from 'enzyme'; 4 | 5 | import React from 'react'; 6 | import AnimakitRotator from '../lib/AnimakitRotator.js'; 7 | 8 | describe('', () => { 9 | it('should render', () => { 10 | const component = render(); 11 | 12 | expect(component).toMatchSnapshot(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | const jsdom = require('jsdom'); 2 | const Enzyme = require('enzyme'); 3 | const Adapter = require('enzyme-adapter-react-16'); 4 | 5 | Enzyme.configure({ adapter: new Adapter() }); 6 | 7 | const { JSDOM } = jsdom; 8 | 9 | const { document: doc } = (new JSDOM('')).window; 10 | 11 | const win = doc.defaultView; 12 | 13 | global.document = doc; 14 | global.window = win; 15 | 16 | console.error = message => { 17 | if (!/(React.createElement: type should not be null)/.test(message)) { 18 | throw new Error(message); 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | This project adheres to [Semantic Versioning](http://semver.org/). 4 | 5 | ## 2.1.3 6 | * Minor perf improvement 7 | 8 | ## 2.1.2 9 | * Upgrade to React 16.0.0 10 | * Move React to peerDependencies 11 | 12 | ## 2.1.1 13 | * Upgrade to React 15.5.0 14 | 15 | ## 2.1.0 16 | * Drop core dependency 17 | * Refactoring 18 | 19 | ## 2.0.0 20 | * Use AnimakitBase component from animakit-core 21 | 22 | ## 1.0.11 23 | * Refactor refs 24 | * Upgrade animakit-core 25 | 26 | ## 1.0.10 27 | * Add homepage https://animakit.github.io 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Anna Selezniova 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/styles.es6: -------------------------------------------------------------------------------- 1 | export default { 2 | scene: { 3 | position: 'relative', 4 | display: 'block', 5 | }, 6 | container: { 7 | position: 'absolute', 8 | top: 0, 9 | left: 0, 10 | display: 'block', 11 | width: '100%', 12 | height: '100%', 13 | transformStyle: 'preserve-3d', 14 | }, 15 | figure: { 16 | position: 'absolute', 17 | top: 0, 18 | left: 0, 19 | display: 'block', 20 | width: '100%', 21 | height: '100%', 22 | transformStyle: 'preserve-3d', 23 | }, 24 | side: { 25 | position: 'absolute', 26 | top: 0, 27 | left: 0, 28 | display: 'block', 29 | width: '100%', 30 | height: '100%', 31 | WebkitBackfaceVisibility: 'hidden', 32 | backfaceVisibility: 'hidden', 33 | }, 34 | sideShadow: { 35 | position: 'absolute', 36 | top: 0, 37 | left: 0, 38 | display: 'block', 39 | width: '100%', 40 | height: '100%', 41 | background: '#000', 42 | WebkitBackfaceVisibility: 'hidden', 43 | backfaceVisibility: 'hidden', 44 | pointerEvents: 'none', 45 | }, 46 | sideWrapper: { 47 | position: 'absolute', 48 | top: '50%', 49 | left: '50%', 50 | transform: 'translate(-50%, -50%)', 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /lib/utils.es6: -------------------------------------------------------------------------------- 1 | import isEqual from 'lodash.isequal'; 2 | 3 | /* 4 | * Check whether the CSS property supported 5 | */ 6 | function isPropertySupported(name, value) { 7 | const propName = name; 8 | 9 | const element = document.createElement('p'); 10 | document.body.insertBefore(element, null); 11 | 12 | element.style[propName] = value; 13 | 14 | const propValue = window 15 | .getComputedStyle(element, null) 16 | .getPropertyValue(propName); 17 | 18 | document.body.removeChild(element); 19 | 20 | return propValue === value; 21 | } 22 | 23 | /* 24 | * Check whether the CSS 3D properties supported 25 | */ 26 | function is3DSupported() { 27 | return isPropertySupported('perspective', '1px') && 28 | isPropertySupported('transform-style', 'preserve-3d'); 29 | } 30 | 31 | /* 32 | * Get CSS transitionend event name 33 | */ 34 | function transitionEventName() { 35 | if (isPropertySupported('transition', 'opacity 1s')) { 36 | return 'transitionend'; 37 | } 38 | 39 | return 'webkitTransitionEnd'; 40 | } 41 | 42 | /* 43 | * Get neighbor numbers 44 | */ 45 | function getNeighbors(num, max) { 46 | let neighbor1 = num - 1; 47 | let neighbor2 = num + 1; 48 | 49 | if (neighbor1 < 0) neighbor1 = max; 50 | if (neighbor2 > max) neighbor2 = 0; 51 | 52 | return [neighbor1, neighbor2]; 53 | } 54 | 55 | export { 56 | isEqual, 57 | is3DSupported, 58 | transitionEventName, 59 | getNeighbors, 60 | }; 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AnimakitRotator 2 | 3 | **WARNING:** Currently unmaintained because of lack of interest, activity and resources 4 | 5 | 6 | React component for the 3D rotation of the blocks. 7 | Supports up to 6 blocks, different sizes, and X/Y axis. 8 | 9 | ## Usage 10 | 11 | ```javascript 12 | 13 |