| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.js | -0% | -0/50 | -0% | -0/28 | -0% | -0/10 | -0% | -0/50 | -
| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | export default class ImageControllerCreator {
- state = {
- scale: 1,
- lastScale: 1,
- offsetX: 0,
- offsetY: 0,
- lastOffsetX: 0,
- lastOffsetY: 0,
- };
-
- constructor(element, option = {}) {
- this.target = element;
- this.originalWidth = element.clientWidth;
- this.viewPortWidth = option.viewPortWidth;
- this.viewPortHeight = option.viewPortHeight;
- this.onGetControl = option.onGetControl;
- this.onLoseControl = option.onLoseControl;
- }
-
- changeTarget(newEle) {
- this.target = newEle;
- this.originalWidth = newEle.clientWidth;
- }
-
- set(newState) {
- this.preProcess(newState);
- const { style } = this.target;
- const {
- offsetX,
- offsetY,
- lastOffsetX,
- lastOffsetY,
- scaleMultiples,
- } = this.state;
- style.transform = `translate3d(calc(${offsetX +
- lastOffsetX}px - 50%), calc(${offsetY +
- lastOffsetY}px - 50%), 0) scale(${scaleMultiples})`;
- if (this.onChange) {
- this.onChange(this.state);
- }
- this.state.lastOffsetX = offsetX + lastOffsetX;
- this.state.lastOffsetY = offsetY + lastOffsetY;
- }
-
- preProcess(newState) {
- this.state = {
- ...this.state,
- ...newState,
- };
- this.state.scaleMultiples = this.state.scale;
- const { clientWidth, clientHeight } = this.target;
- const { lastOffsetX, lastOffsetY, scaleMultiples } = this.state;
- if (scaleMultiples <= 1 && (lastOffsetX || lastOffsetY)) {
- this.reset();
- }
- this.restrictMovement(
- (clientWidth * scaleMultiples - this.viewPortWidth) / 2,
- (clientHeight * scaleMultiples - this.viewPortHeight) / 2,
- );
- }
-
- restrictMovement(xRange, yRange) {
- let isInLimit = true;
- const result = {};
- const { offsetX, offsetY, lastOffsetX, lastOffsetY } = this.state;
- if (
- Math.abs(lastOffsetX + offsetX) > xRange &&
- Math.abs(lastOffsetX + offsetX) > Math.abs(lastOffsetX)
- ) {
- result.offsetX = 0;
- result.lastOffsetX = lastOffsetX;
- isInLimit = false;
- }
- if (
- Math.abs(lastOffsetY + offsetY) > yRange &&
- Math.abs(lastOffsetY + offsetY) > Math.abs(lastOffsetY)
- ) {
- result.offsetY = 0;
- result.lastOffsetY = lastOffsetY;
- }
- if (!isInLimit && this.onLoseControl && Math.abs(offsetY) < 5) {
- this.onGetControl();
- this.onLoseControl();
- } else {
- this.onGetControl();
- }
- this.state = {
- ...this.state,
- ...result,
- };
- }
-
- reset() {
- this.target.style.transition = 'transform 0.1s';
- this.set({
- scale: 1,
- offsetX: 0,
- offsetY: 0,
- lastOffsetX: 0,
- lastOffsetY: 0,
- lastScale: 1,
- });
- this.target.style.transition = 'transform 0.1s';
- }
-
- enlargeBytimes(times) {
- const { lastScale = 1 } = this.state;
- const newScale = times * lastScale;
- if (newScale < 3.5 && newScale > 1) {
- this.set({ scale: newScale });
- } else if (newScale <= 1) {
- this.set({ scale: 1 });
- }
- }
-
- recordScale() {
- this.set({
- lastScale: this.state.scale,
- });
- }
-
- move(offset) {
- this.set({
- offsetX: parseInt(offset.deltaX, 10),
- offsetY: parseInt(offset.deltaY, 10),
- });
- }
-
- record(offset) {
- this.set({
- lastOffsetX: offset.deltaX + this.state.lastOffsetX,
- lastOffsetY: offset.deltaY + this.state.lastOffsetY,
- offsetX: 0,
- offsetY: 0,
- });
- }
-}
- |
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.jsx | -25.45% | -28/110 | -31.08% | -23/74 | -28% | -7/25 | -25.69% | -28/109 | -
| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 | - - - - - - - -1x - - - - - - - - - - - - - - - - - -3x -3x - - - -3x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -4x -4x -4x -4x -4x -4x -2x -2x - - -4x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -3x -1x -1x -1x -1x -1x - -1x -1x - - - - - - - - - - - - - - - - - - - -4x -4x -4x -4x - -4x - - - - - - - -4x - - - - - - - - - - - - - - - - - - - - - -10x - - - - - - - - - - - - - - - - - - - - - - - | import React, { PureComponent } from 'react';
-import AlloyFinger from 'alloyfinger';
-import ImageControllerCreator from '../ImageControllerCreator';
-import touchEmulator from '../utils/touchEmulator';
-import resizeImage from '../utils/resizeImage';
-import Overlay from '../Overlay';
-import './style.css';
-
-const GUTTER_WIDTH = 10;
-export default class ImageSlides extends PureComponent {
- static defaultProps = {
- images: [],
- index: 0,
- isOpen: false,
- };
- state = {
- index: 0,
- loaded: {},
- isOpen: false,
- };
-
- lastContainerOffsetX = 0;
- initialStyle = {};
- imageController = {};
-
- componentWillMount() {
- const { index, images, isOpen } = this.props;
- this.setState({
- index: index || this.state.index,
- isOpen,
- });
- this.preload(images[index || this.state.index]);
- }
-
- componentWillReceiveProps(newProps) {
- const { index, isOpen } = this.props;
- const { index: newIndex, isOpen: newIsOpen } = newProps;
- if (isOpen !== newIsOpen) {
- this.setState({
- isOpen: newIsOpen,
- });
- }
- if (newIndex && index !== newIndex) {
- this.setState({
- index: newIndex,
- });
- }
- }
-
- getContainer = el => {
- if (el) {
- const { useTouchEmulator } = this.props;
- const gesturesManager = new AlloyFinger(el, {});
- this.containerEl = el;
- this.containerController = gesturesManager;
- const style = this.containerEl.style;
- if (useTouchEmulator) {
- touchEmulator(el);
- }
- gesturesManager.on('touchStart', () => {
- style.transition = '';
- });
- gesturesManager.on('pressMove', this.containerOnMove);
- gesturesManager.on('touchEnd', () => {
- const swipeTrigger = this.viewPortEl.clientWidth * 0.2;
- if (this.lastContainerOffsetX > swipeTrigger) {
- if (this.getMedianIndex() > 0 && this.state.index !== 1) {
- style.transform = `translate3d(${this.lastContainerOffsetX -
- (GUTTER_WIDTH + this.viewPortEl.clientWidth) * 2}px, 0, 0)`;
- } else if (this.state.index === 1) {
- style.transform = `translate3d(${this.lastContainerOffsetX -
- (GUTTER_WIDTH + this.viewPortEl.clientWidth)}px, 0, 0)`;
- }
- this.last();
- } else if (this.lastContainerOffsetX < -swipeTrigger) {
- style.transform = `translate3d(${this.lastContainerOffsetX}px, 0, 0)`;
- if (this.state.index === 0) {
- style.transition = 'all 0.3s';
- }
- this.next();
- }
- style.transition = 'all 0.3s';
- style.transform = `translate3d(${-(
- GUTTER_WIDTH + this.viewPortEl.clientWidth
- ) * this.getMedianIndex()}px, 0, 0)`;
- this.lastContainerOffsetX = 0;
- this.isMoving = false;
- });
- }
- };
-
- getImageEl = el => {
- if (el) {
- this.gesturesHandler(el);
- }
- };
-
- getViewPort = el => {
- this.viewPortEl = el;
- };
-
- getMedianIndex() {
- const { index } = this.state;
- const { images } = this.props;
- const displayMax = index + 2 > images.length ? images.length : index + 2;
- const displayMin = index - 1 < 0 ? 0 : index - 1;
- let center = parseInt((displayMax - displayMin) / 2, 10);
- if (index < 1) {
- center = index;
- } else Iif (index > images.length - 2) {
- center = images.length - index;
- }
- return center;
- }
-
- containerOnMove = offset => {
- this.isMoving = true;
- const deltaX = parseInt(offset.deltaX, 10);
- const style = this.containerEl ? this.containerEl.style : {};
- this.lastContainerOffsetX = deltaX + this.lastContainerOffsetX;
- const offsetX =
- this.lastContainerOffsetX -
- (GUTTER_WIDTH + this.viewPortEl.clientWidth) * this.getMedianIndex();
- style.transform = `translate3d(${offsetX}px, 0, 0)`;
- };
-
- gesturesHandler(el) {
- const { useTouchEmulator } = this.props;
- if (useTouchEmulator) {
- touchEmulator(el.parentElement);
- }
- const imageController = new ImageControllerCreator(el, {
- viewPortWidth: this.viewPortEl.clientWidth,
- viewPortHeight: this.viewPortEl.clientHeight,
- onGetControl: () => {
- if (this.containerController && !this.isMoving) {
- this.containerController.off('pressMove', this.containerOnMove);
- }
- },
- onLoseControl: () => {
- if (this.containerController && !this.isMoving) {
- this.containerController.on('pressMove', this.containerOnMove);
- }
- },
- });
- const gesturesManager = new AlloyFinger(el.parentElement, {});
- gesturesManager.on('pressMove', offset => {
- imageController.move(offset);
- });
- gesturesManager.on('pinch', event => {
- imageController.enlargeBytimes(event.zoom);
- });
- gesturesManager.on('doubleTap', () => {
- if (imageController.state.scale > 1) {
- imageController.reset();
- } else {
- imageController.enlargeBytimes(1.8);
- imageController.recordScale();
- }
- });
- gesturesManager.on('touchEnd', () => {
- imageController.recordScale();
- });
- }
-
- next = () => {
- const { index } = this.state;
- const { images } = this.props;
- if (index < images.length - 1) {
- this.setState(
- {
- index: index + 1,
- },
- this.ignore,
- );
- this.preload(images[index + 1]);
- }
- };
-
- last = () => {
- const { index } = this.state;
- const { images } = this.props;
- if (index > 0) {
- this.setState(
- {
- index: index - 1,
- },
- this.ignore,
- );
- this.preload(images[index - 1]);
- }
- };
-
- ignore = () => {
- if (this.containerController) {
- this.containerController.off('pressMove', this.containerOnMove);
- this.containerController.on('pressMove', this.containerOnMove);
- }
- };
-
- preload(url) {
- if (url && !this.state.loaded[url]) {
- const loader = new Image();
- new Promise((resolve, reject) => {
- loader.onload = resolve;
- loader.onerror = reject;
- loader.src = url;
- }).then(() => {
- this.initialStyle[url] = resizeImage(loader.width, loader.height);
- this.setState({
- loaded: {
- ...this.state.loaded,
- [url]: true,
- },
- });
- });
- }
- }
-
- onCloseViewer = event => {
- const { index } = this.state;
- const { onClose } = this.props;
- this.setState({
- isOpen: false,
- });
- if (onClose) onClose(event, index);
- };
-
- render() {
- const { loaded, index, isOpen } = this.state;
- const { images } = this.props;
- const displayMax = index + 2 > images.length ? images.length : index + 2;
- const displayMin = index - 1 < 0 ? 0 : index - 1;
- const Loading = (
- <div className="image-slides-loading" key="loading">
- <div />
- <div />
- <div />
- <div />
- <div />
- </div>
- );
- return isOpen ? (
- <Overlay
- lock
- onClose={this.onCloseViewer}>
- <div
- className="image-slides-view-port"
- ref={this.getViewPort} >
- {images.length > 0 && (
- <div
- className="image-slides-index" >
- {`${index + 1} / ${images.length}`}
- </div>
- )}
- <div
- className="image-slides-container"
- ref={this.getContainer}
- style={{
- transform: `translate3d(${-this.getMedianIndex() *
- ((this.viewPortEl ? this.viewPortEl.clientWidth : 0) +
- GUTTER_WIDTH)}px, 0, 0)`,
- }} >
- {images.slice(displayMin, displayMax).map((url, ind) => (
- <div
- /* eslint-disable */
- key={url + (ind + index - (index - displayMin))}
- /* eslint-enable */
- className="image-slides-blackboard">
- {loaded[url] ? (
- <img
- className="image-slides-content"
- src={url}
- alt="图片"
- ref={this.getImageEl}
- style={{
- ...this.initialStyle[url],
- }} />
- ) : Loading}
- </div>
- ))}
- </div>
- </div>
- </Overlay>
- ) : null;
- }
-}
- |
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| index.jsx | -5.41% | -2/37 | -0% | -0/24 | -0% | -0/6 | -5.56% | -2/36 | -
| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 | - - - -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | import React, { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-import './style.css';
-
-let originalBodyOverflow = null;
-let lockingCounter = 0;
-
-export default class Overlay extends PureComponent {
- static defaultProps = {
- lock: false,
- parentSelector() {
- return document.body;
- },
- };
- locked = false;
- node = document.createElement('div');
- componentDidMount() {
- if (this.props.lock === true) {
- this.preventScrolling();
- }
- const parent = this.props.parentSelector();
- parent.appendChild(this.node);
- }
-
- componentWillReceiveProps(newProps) {
- if (this.props.lock !== newProps.lock) {
- if (newProps.lock) {
- this.preventScrolling();
- } else {
- this.allowScrolling();
- }
- }
- const currentParent = this.props.parentSelector();
- const newParent = newProps.parentSelector();
-
- if (newParent !== currentParent) {
- currentParent.removeChild(this.node);
- newParent.appendChild(this.node);
- }
- }
-
- componentWillUnmount() {
- const parent = this.props.parentSelector();
- if (!this.node || !this.content) return;
- parent.removeChild(this.node);
- this.allowScrolling();
- }
-
- preventScrolling() {
- if (this.locked === true) {
- return;
- }
- lockingCounter += 1;
- if (lockingCounter === 1) {
- const body = document.body;
- originalBodyOverflow = body.style.overflow;
- body.style.overflow = 'hidden';
- }
- }
-
- allowScrolling() {
- if (this.locked === true) {
- lockingCounter -= 1;
- this.locked = false;
- }
-
- if (lockingCounter === 0 && originalBodyOverflow !== null) {
- const body = document.body;
- body.style.overflow = originalBodyOverflow || '';
- originalBodyOverflow = null;
- }
- }
-
- render() {
- const {
- onClose,
- } = this.props;
- return ReactDOM.createPortal(
- <div className="image-slides-overlay">
- <button
- className="image-slides-close"
- onClick={onClose} >
- <svg
- fill="#fff"
- height="24"
- viewBox="0 0 24 24"
- width="24"
- transform="scale(1.5)">
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
- <path d="M0 0h24v24H0z" fill="none" />
- </svg>
- </button>
- {this.props.children}
- </div>,
- this.node,
- );
- }
-}
- |
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| ImageControllerCreator | -0% | -0/50 | -0% | -0/28 | -0% | -0/10 | -0% | -0/50 | -|
| ImageSlides | -25.45% | -28/110 | -31.08% | -23/74 | -28% | -7/25 | -25.69% | -28/109 | -|
| Overlay | -5.41% | -2/37 | -0% | -0/24 | -0% | -0/6 | -5.56% | -2/36 | -|
| utils | -20.69% | -6/29 | -16.67% | -2/12 | -20% | -1/5 | -20.69% | -6/29 | -
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| resizeImage.js | -85.71% | -6/7 | -33.33% | -2/6 | -100% | -1/1 | -85.71% | -6/7 | -|
| touchEmulator.js | -0% | -0/22 | -0% | -0/6 | -0% | -0/4 | -0% | -0/22 | -
| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 | -1x -1x -1x -1x -1x - - - - - -1x - - - - - | export default function resizeImage(imageWidth, imageHeight) {
- const screenWidth = window.innerWidth;
- const screenHeight = window.innerHeight;
- const screenRadio = screenWidth / screenHeight;
- const imageRadio = imageWidth / imageHeight;
- Iif (imageRadio > screenRadio) {
- return {
- width: screenWidth < imageWidth ? '100%' : `${imageWidth}px`,
- height: 'auto',
- };
- }
- return {
- width: 'auto',
- height: screenHeight < imageHeight ? '100%' : `${imageWidth}px`,
- };
-}
- |
| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | export default function touchEmulator(el) { - let down = false; - function preventMouseEvents(event) { - event.preventDefault(); - event.stopPropagation(); - } - function trigger(mouseEvent, touchEvent, downState) { - el.addEventListener(mouseEvent, event => { - if (touchEvent === 'touchstart' || down) { - const touch = { - pageX: event.pageX, - pageY: event.pageY, - type: touchEvent, - }; - const newEvent = new CustomEvent(touchEvent); - newEvent.touches = [touch]; - newEvent.changedTouches = [touch]; - event.preventDefault(); - el.dispatchEvent(newEvent); - } - if (touchEvent !== 'touchmove') { - down = downState; - } - }); - } - trigger('mousedown', 'touchstart', true); - trigger('mousemove', 'touchmove', true); - trigger('mouseup', 'touchend', false); - trigger('mouseout', 'touchend', false); - trigger('mouseleave', 'touchend', false); - el.addEventListener('mouseenter', preventMouseEvents, true); - el.addEventListener('mouseleave', preventMouseEvents, true); - el.addEventListener('mouseout', preventMouseEvents, true); - el.addEventListener('mouseover', preventMouseEvents, true); -} - |