--- /dev/null
+
+var defaultSlideData = [{"id":1,"group-tag":"Group1-0","units":"packets","name":"ping-request-rx-count","value-type":"INT","http-endpoint-ref":"api/v1/pong/stats","widget-type":"COUNTER","description":"no of ping requests","value-integer":2538459,"json-query-method":"NAMEKEY","vnfr-id":"39b56173-be82-4f87-872a-eaa761b36281","mp-id":"1-39b56173-be82-4f87-872a-eaa761b36281","vnfr-name":"pong_vnfd"},{"id":2,"group-tag":"Group1-0","units":"packets","name":"ping-response-tx-count","value-type":"INT","http-endpoint-ref":"api/v1/pong/stats","widget-type":"COUNTER","description":"no of ping responses","value-integer":2538459,"json-query-method":"NAMEKEY","vnfr-id":"39b56173-be82-4f87-872a-eaa761b36281","mp-id":"2-39b56173-be82-4f87-872a-eaa761b36281","vnfr-name":"pong_vnfd"},{"id":1,"group-tag":"Group1-1","units":"packets","name":"ping-request-tx-count","value-type":"INT","http-endpoint-ref":"api/v1/ping/stats","widget-type":"COUNTER","description":"no of ping requests","value-integer":2538460,"json-query-method":"NAMEKEY","vnfr-id":"9f0c4f07-f5e2-4189-aa25-acee550eb02b","mp-id":"1-9f0c4f07-f5e2-4189-aa25-acee550eb02b","vnfr-name":"ping_vnfd"},{"id":2,"group-tag":"Group1-1","units":"packets","name":"ping-response-rx-count","value-type":"INT","http-endpoint-ref":"api/v1/ping/stats","widget-type":"COUNTER","description":"no of ping responses","value-integer":2538455,"json-query-method":"NAMEKEY","vnfr-id":"9f0c4f07-f5e2-4189-aa25-acee550eb02b","mp-id":"2-9f0c4f07-f5e2-4189-aa25-acee550eb02b","vnfr-name":"ping_vnfd"}];
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+require('./skyquakeCarousel.scss');
+
+export default class SkyquakeCarousel extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {};
+ this.state.slides = this.constructSlides(props.slides);
+ //current slide number. can eventually be used with initial construct slides function to specify initial slide. construct slides currently defaults to slide 1 as initial.
+ this.state.currentSlide = props.currentSlide;
+ //Ref handles. Index coresponds to slide position. Last slide is overflowed left in dom with an order of 1;
+ this.state.refsArray = this.state.slides.map(function(v, i) {
+ return v.ref
+ });
+ }
+ componentWillReceiveProps(props) {
+ console.log(props);
+ let slides = this.constructSlides(props.slides);
+ console.log('refs', this.refs);
+ this.setState({
+ slides: slides
+ });
+
+ }
+ constructSlides(data){
+ let slides = [];
+ let len = data.length;
+ let classItems = 'slide';
+ return data.map(function(v, i) {
+ let slideOrder = i + 2;
+ let isRef = '';
+ let ref;
+ if (slideOrder > len) {
+ isRef = ' is-ref';
+ slideOrder = 1;
+ }
+ ref = 'slide-' + (i+1);
+ // return (<div key={i} ref={ref} className={classItems + isRef} style={{order: slideOrder}}>{v}</div>);
+ return (<div key={i} className={classItems + isRef} style={{order: slideOrder}}>{v}</div>);
+ });
+ }
+ reorderSlides(activeSlideNo) {
+ let self = this;
+ let newSlideRefs = [];
+ let newSlideRefsLen;
+ let containerNode = ReactDOM.findDOMNode(self.refs['container']);
+ newSlideRefs = reorder(this.state.refsArray, activeSlideNo - 1);
+ newSlideRefsLen = newSlideRefs.length;
+ //updates Dom via ref hanldes to the individual slides.
+ newSlideRefs.map(function(v, i) {
+ let element = ReactDOM.findDOMNode(containerNode.refs[v]);
+ if (newSlideRefsLen > (i + 1)) {
+ element.style.order = i + 2;
+ //class handles. currently no purpose
+ element.classList.remove('is-ref');
+ } else {
+ element.style.order = 1;
+ //class handles. currently no purpose
+ element.classList.add('is-ref');
+ }
+ })
+
+ function reorder(data, index) {
+ return data.slice(index).concat(data.slice(0, index))
+ };
+ }
+ changeSlide(dir, e) {
+ let self = this;
+ let containerNode = ReactDOM.findDOMNode(self.refs['container']);
+ let total_len = this.props.slides.length;
+ switch(dir) {
+ case 'previous': prev.call(this); break;
+ case 'next': next.call(this); break;
+ }
+ containerNode.classList.remove('is-set');
+ setTimeout(function() {
+ containerNode.classList.add('is-set');
+ }, 100)
+ function prev() {
+ let nextSlide;
+ let currentSlide = self.state.currentSlide;
+ containerNode.classList.add('is-reversing');
+ if(currentSlide == 1) {
+ nextSlide = total_len
+ } else {
+ nextSlide = currentSlide - 1;
+ }
+ updateSlide(nextSlide);
+ }
+ function next() {
+ let nextSlide;
+ let currentSlide = self.state.currentSlide;
+ containerNode.classList.remove('is-reversing');
+ if(currentSlide == total_len) {
+ nextSlide = 1
+ } else {
+ nextSlide = currentSlide + 1;
+ }
+ updateSlide(nextSlide);
+
+ }
+ function updateSlide(slide) {
+ self.reorderSlides(slide)
+ self.setState({
+ currentSlide: slide
+ });
+ }
+ }
+ render() {
+ // console.log('this', this);
+ // console.log('refs', this.refs);
+ // console.log('props',this.props);
+ // console.log('state',this.state);
+ return (
+ <div className="carousel-component">
+ <div>{this.state.currentSlide}</div>
+ <button onClick={this.changeSlide.bind(this, 'previous')}>Prev</button>
+ <button onClick={this.changeSlide.bind(this, 'next')}>Next</button>
+ <div className="carousel-container is-set">
+ {this.state.slides}
+ </div>
+ </div>
+ );
+ }
+}
+
+SkyquakeCarousel.defaultProps = {
+ slides: [],
+ // slides: [(<div className="slide">slide 1</div>),(<div className="slide">slide 2</div>),(<div className="slide">slide 3</div>),(<div className="slide is-ref" ref="last">slide 4</div>)],
+ currentSlide: 1
+}
+
+SkyquakeCarousel.displayName = 'SkyquakeCarousel';
+
+/*
+
+<div className="carousel-container is-set" ref="container">
+ {this.state.slides}
+ </div>
+
+ */
+
+// Uncomment properties you need
+// CarouselComponent.propTypes = {};
+// CarouselComponent.defaultProps = {};
+
projects / osm / UI.git / blobdiff