ray-blend-tools v1.0.2

ray-blend-tools

animate

author

ilex.h

install

npm install --save ray-blend-tools

Usage

<div id="dg-container" data-gallery="gallery" class="dg-container ">
  <div class="dg-wrapper">
    <div className="sub-system-item">
      <img src="" alt="" />
    </div>
  </div>
  <nav>
    <span class="dg-prev" />
    <span class="dg-next" />
  </nav>
</div>

import { Gallery } from 'ray-blend-tools';

const gallery = Gallery(document.getElementById('dg-container'));

// ...

use with react

entry index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App';
import './index.scss';

render(<App />, document.getElementById('app'));

// 开发模式下开启 热加载 (不需要开启时，屏蔽一下代码即可)
if (module.hot) {
  module.hot.accept();
}

app demo

import React, { Component } from 'react';
import SubSystem from './SubSystemGallery';
import PageNav from './PageNav';

const _sysList = [
  { key: 'onePage', index: 0, text: '模块1', url: '', isSelfPage: false },
  { key: 'digitalPlan', index: 1, text: '模块2', url: '', isSelfPage: false },
  { key: 'giot', index: 2, text: '物联网云平台', url: '', isSelfPage: false },
  { key: 'analysis', index: 3, text: '大数据分析平台', url: '', isSelfPage: false },
  { key: 'dispatch', index: 4, text: '模块3', url: '', isSelfPage: false }
];

class Content extends Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSys: 2
    };
  }

  onSysLineItemClick = ({ key, index }) => {
    this.setState({
      currentSys: index
    });
  }

  changeCurrentSys = ({ key, index }) => {
    this.setState({
      currentSys: index
    });
  }

  nextSys = (gallery = {}) => {
    this.setState({
      currentSys: gallery.current || 0
    });
  }

  prevSys = (gallery = {}) => {
    this.setState({
      currentSys: gallery.current || 0
    });
  }

  render() {

    const { currentSys } = this.state;

    return (
      <div className="ue-content">
        <SubSystem
          sysList={_sysList}
          currentSys={currentSys}
          changeCurrentSys={this.changeCurrentSys}
          nextSys={this.nextSys}
          prevSys={this.prevSys}
        />
        <PageNav onItemClick={this.onSysLineItemClick} sysList={_sysList} currentSys={currentSys} />
      </div>
    );
  }
}

Content.propTypes = {

};

export default Content;

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class PageNav extends Component {
  render() {
    const { sysList, onItemClick, currentSys } = this.props;
    return (
      <div className="page-nav">
        {sysList.map(d => {
          const cls = d.index === currentSys ? 'page-nav-item page-nav-item-active' : 'page-nav-item';
          return <span key={d.key} className={cls} onClick={() => onItemClick(d)}>{d.text}</span>;
        })}
      </div>
    );
  }
}

PageNav.propTypes = {
  sysList: PropTypes.array,
  onItemClick: PropTypes.func,
  currentSys: PropTypes.number
};

export default PageNav;


import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Gallery } from 'ray-blend-tools';

const completeSubImgIcon = (icon) => {
  return `/example/resources/${icon}.png`;
};

class SubSystemGallery extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { currentSys, nextSys, prevSys } = this.props;
    this.gallery = new Gallery(this.container, {
      current: currentSys, // index of current item
      autoplay: false, // slideshow on / off
      interval: 2000, // time between transitions
      next: nextSys,
      prev: prevSys
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.currentSys !== this.props.currentSys){
      this.gallery.goPage(this.props.currentSys);
    }
  }

  componentWillUnmount() {
    this.gallery.destroy();
  }

  onItemClick = (sysItem) => {
    const { changeCurrentSys, currentSys } = this.props;
    const { key, index, url, isSelfPage } = sysItem;
    if (currentSys === key || currentSys === index){
      // window.open(url, '_blank');
      // window.open(url);
      if (isSelfPage){
        window.open(url, '_self');
      } else {
        window.open(url);
      }
    } else {
      changeCurrentSys && changeCurrentSys(sysItem);
    }
  }

  renderItem = (sysItem) => {
    const { key } = sysItem;
    const imgSrc = completeSubImgIcon(key);
    return (
      <div key={key} className="sub-system-item sub-sys-right" onClick={() => this.onItemClick(sysItem)}>
        <img src={imgSrc} alt="" />
      </div>
    );
  }

  renderContent = () => {
    const { sysList } = this.props;
    return sysList.map(sl => this.renderItem(sl));
  }

  render() {

    return (
      <div id="dg-container" data-gallery="gallery" className="dg-container sub-system" ref={node => this.container = node}>
        <div className="dg-wrapper">
          {this.renderContent()}
        </div>
        <nav>
          <span className="dg-prev" />
          <span className="dg-next" />
        </nav>
      </div>
    );
  }
}

SubSystemGallery.propTypes = {
  sysList: PropTypes.array,
  currentSys: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  changeCurrentSys: PropTypes.func,
  nextSys: PropTypes.func,
  prevSys: PropTypes.func
};

export default SubSystemGallery;

scss index.scss gallery.scss

@import './gallery.scss';

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#app {
  width: 100%;
  height: 100%;
}

.ue-content {
  display: flex;
  height: 80%;
  flex: 1;
  background: #f6f6f6;
  flex-direction: column;

  .sub-system {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .sub-system-item {
      position: absolute;

      img {
        width: 50rem;
      }
    }
  }
}

.page-nav {
  font-size: 18px;
  text-align: center;

  &-item {
    display: inline-block;
    padding: 0.5rem;
    margin: 1rem;
    cursor: pointer;
    background: #bad8ff;

    &.page-nav-item-active {
      color: white;
      background: #2382fd;
    }
  }
}

// galleray.scss

.dg-container {
  position: relative;
  width: 100%;
  height: 450px;
}

.dg-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transform-style: preserve-3d;
  perspective: 1000px;
  align-items: center;
  justify-content: center;
}

.dg-wrapper div.dg-transition {
  transition: all 0.5s ease-in-out;
}

.dg-wrapper a.dg-transition {
  transition: all 0.5s ease-in-out;
}

.dg-wrapper a img {
  display: block;
  padding: 41px 0 0 1px;
}

.dg-container {
  nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 1000;
    width: 58px;
    margin-left: -29px;

    span {
      float: left;
      width: 26px;
      height: 26px;
      text-indent: -9000px;
      cursor: pointer;
      opacity: 0.8;

      &.dg-prev {
        background: transparent url('./resources/arrow-left.png') no-repeat;
      }

      &.dg-next {
        background: transparent url('./resources/arrow-right.png') no-repeat;
      }

      &:hover {
        opacity: 1;

        &.dg-prev {
          background: transparent url('./resources/arrow-left-active.png') no-repeat;
        }

        &.dg-next {
          background: transparent url('./resources/arrow-right-active.png') no-repeat;
        }
      }
    }
  }
}

api

options:

showTotal: 3,
current: 0, // index of current item
autoplay: false, // slideshow on / off
interval: 2000 // time between transitions
prev: func
next: func

method:

destroy
goPage

License

MIT