MrSaints/demo.html

## demo.html
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>Morphext Web Components (v2.0.0)</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="//cdn.jsdelivr.net/modernizr/2.8.3/modernizr.min.js"></script>

        <!--
            <head> stylesheets are only for Morphext React (global).
            Each Polymer web component may load its own stylesheets (shadow DOM).
        -->
        <link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
        <link rel="stylesheet" href="dist/morphext.css">

        <style>
            #morphext-react-container {
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <h1>Morphext React</h1>
        I am a <div id="morphext-react-container"></div> Text Rotator

        <h1>Morphext Polymer</h1>
        I am a <morphext-element animation="rotateIn">So Simple, Very Doge, Much Wow, Such Cool</morphext-element> Text Rotator

        <!-- React -->
        <script src="bower_components/react/react-with-addons.js"></script>
        <script src="dist/morphext-react.js"></script>

        <!-- Polymer -->
        <script src="bower_components/platform/platform.js"></script>
        <link rel="import" href="dist/morphext-polymer.html">
    </body>
</html>

## morphext-polymer.html
<!--
    Morphext Polymer (v1.0.0-ALPHA)

    Usage example

    ## Default component

        I am a <morphext-element>So Simple, Very Doge, Much Wow, Such Cool</morphext-element> Text Rotator

    ## Customised component

        I am a <morphext-element animation="fadeIn" separator="|" speed="3000">So Simple | Very Doge | Much Wow | Such Cool</morphext-element> Text Rotator

    ## Options

    https://github.com/MrSaints/Morphext#options
-->

<!-- Core -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- Morphext component -->
<polymer-element name="morphext-element" attributes="animation separator speed">
    <!-- Template -->
    <template>
        <!-- Dependencies: Animate.css, Morphext.css -->
        <link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
        <link rel="stylesheet" href="morphext.css">

        <span class="morphext">
            <!-- Phrases -->
            <template repeat="{{ phrase in phrases }}">
                <span class="{{index === phrase.index && 'animated ' + animation || ''}}">{{ phrase.value }}</span>
            </template>
        </span>
    </template>

    <script>
        Polymer("morphext-element", {
            animation: "bounceIn",
            separator: ",",
            speed: 2000,
            phrases: [],
            ready: function () {
                this.index = 0;
                this.textContent.split(this.separator).forEach(function (phrase, index) {
                    this.phrases.push({ value: phrase.trim() , index: index });
                }.bind(this));

                this.loop = setInterval(this.cycle.bind(this), this.speed);
            },
            cycle: function () {
                ++this.index;
                if (this.index === this.phrases.length) {
                    this.index = 0;
                }
            }
        });
    </script>
</polymer-element>

## morphext-react.jsx
/** @jsx React.DOM */

/*
 * Morphext React (v1.0.0-ALPHA)
 * There does not appear to be a more idiomatic approach to achieve the desired effect.
 */

// Interval manager
var SetIntervalMixin = {
    componentWillMount: function () {
        this.intervals = [];
    },
    setInterval: function () {
        this.intervals.push(setInterval.apply(null, arguments));
    },
    componentWillUnmount: function () {
        this.intervals.map(clearInterval);
    }
};

// Phrase component
var MXPhrase = React.createClass({
    render: function () {
        var $classes = {
            animated: this.props.active /*|| this.props.lastActive*/
        };
        $classes[this.props.animation] = this.props.active;
        var $classSet = React.addons.classSet($classes);
        return <span className={$classSet}>{this.props.phrase}</span>;
    }
});

// Morphext component
var Morphext = React.createClass({
    mixins: [SetIntervalMixin],
    getDefaultProps: function () {
        return {
            "animation": "bounceIn",
            "speed": 2000
        };
    },
    getInitialState: function () {
        return {
            index: 0,
            activePhrase: this.props.phrases[0]
        };
    },
    componentDidMount: function () {
        if (this.props.phrases.length < 2) {
            return false;
        }
        this.setInterval(this.tick, this.props.speed);
    },
    tick: function () {
        if (this.state.index + 1 === this.props.phrases.length) {
            this.setState({index: -1});
        }
        this.setState({index: this.state.index + 1});
    },
    render: function () {
        /*var lastIndex = this.state.index - 1;
        if (lastIndex === -1) {
            lastIndex = this.props.phrases.length - 1;
        }*/
        var renderPhrases = this.props.phrases.map(function (text, id) {
            return <MXPhrase phrase={text} animation={this.props.animation} active={id === this.state.index} /*lastActive={id === lastIndex}*/ />
        }.bind(this));

        return (
            <div className="morphext">
                {renderPhrases}
            </div>
        );
    }
});

/*
 * Usage example
 *
 * ## Default component (bare minimum)
 *
 * Mount Morphext component onto #morphext-react-container via React.renderComponent.
 *  <Morphext phrases={$phrases} />
 *
 * ## Customised component
 *
 *  <Morphext animation="fadeIn" speed="3000" phrases={$phrases} />
 *
 * ## Options
 *
 * phrases: text phrases to cycle through (array). Mandatory.
 * https://github.com/MrSaints/Morphext#options
 */
var $phrases = ["So Simple", "Very Doge", "Much Wow", "Such Cool"];
React.renderComponent(<Morphext animation="rotateIn" speed="2000" phrases={$phrases} />, document.getElementById("morphext-react-container"));

## morphext.css
.morphext > span {
    display: none;
}

.morphext > .animated {
    display: inline-block;
}
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>Morphext Web Components (v2.0.0)</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="//cdn.jsdelivr.net/modernizr/2.8.3/modernizr.min.js"></script>

	<!--
	<head> stylesheets are only for Morphext React (global).
	Each Polymer web component may load its own stylesheets (shadow DOM).
	-->
	<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
	<link rel="stylesheet" href="dist/morphext.css">

	<style>
	#morphext-react-container {
	display: inline-block;
	}
	</style>
	</head>

	<body>
	<h1>Morphext React</h1>
	I am a <div id="morphext-react-container"></div> Text Rotator

	<h1>Morphext Polymer</h1>
	I am a <morphext-element animation="rotateIn">So Simple, Very Doge, Much Wow, Such Cool</morphext-element> Text Rotator

	<!-- React -->
	<script src="bower_components/react/react-with-addons.js"></script>
	<script src="dist/morphext-react.js"></script>

	<!-- Polymer -->
	<script src="bower_components/platform/platform.js"></script>
	<link rel="import" href="dist/morphext-polymer.html">
	</body>
	</html>
	<!--
	Morphext Polymer (v1.0.0-ALPHA)

	Usage example

	## Default component

	I am a <morphext-element>So Simple, Very Doge, Much Wow, Such Cool</morphext-element> Text Rotator

	## Customised component

	I am a <morphext-element animation="fadeIn" separator="\|" speed="3000">So Simple \| Very Doge \| Much Wow \| Such Cool</morphext-element> Text Rotator

	## Options

	https://github.com/MrSaints/Morphext#options
	-->

	<!-- Core -->
	<link rel="import" href="../bower_components/polymer/polymer.html">

	<!-- Morphext component -->
	<polymer-element name="morphext-element" attributes="animation separator speed">
	<!-- Template -->
	<template>
	<!-- Dependencies: Animate.css, Morphext.css -->
	<link rel="stylesheet" href="../bower_components/animate.css/animate.min.css">
	<link rel="stylesheet" href="morphext.css">

	<span class="morphext">
	<!-- Phrases -->
	<template repeat="{{ phrase in phrases }}">
	<span class="{{index === phrase.index && 'animated ' + animation \|\| ''}}">{{ phrase.value }}</span>
	</template>
	</span>
	</template>

	<script>
	Polymer("morphext-element", {
	animation: "bounceIn",
	separator: ",",
	speed: 2000,
	phrases: [],
	ready: function () {
	this.index = 0;
	this.textContent.split(this.separator).forEach(function (phrase, index) {
	this.phrases.push({ value: phrase.trim() , index: index });
	}.bind(this));

	this.loop = setInterval(this.cycle.bind(this), this.speed);
	},
	cycle: function () {
	++this.index;
	if (this.index === this.phrases.length) {
	this.index = 0;
	}
	}
	});
	</script>
	</polymer-element>
	/** @jsx React.DOM */

	/*
	* Morphext React (v1.0.0-ALPHA)
	* There does not appear to be a more idiomatic approach to achieve the desired effect.
	*/

	// Interval manager
	var SetIntervalMixin = {
	componentWillMount: function () {
	this.intervals = [];
	},
	setInterval: function () {
	this.intervals.push(setInterval.apply(null, arguments));
	},
	componentWillUnmount: function () {
	this.intervals.map(clearInterval);
	}
	};

	// Phrase component
	var MXPhrase = React.createClass({
	render: function () {
	var $classes = {
	animated: this.props.active /\|\| this.props.lastActive/
	};
	$classes[this.props.animation] = this.props.active;
	var $classSet = React.addons.classSet($classes);
	return <span className={$classSet}>{this.props.phrase}</span>;
	}
	});

	// Morphext component
	var Morphext = React.createClass({
	mixins: [SetIntervalMixin],
	getDefaultProps: function () {
	return {
	"animation": "bounceIn",
	"speed": 2000
	};
	},
	getInitialState: function () {
	return {
	index: 0,
	activePhrase: this.props.phrases[0]
	};
	},
	componentDidMount: function () {
	if (this.props.phrases.length < 2) {
	return false;
	}
	this.setInterval(this.tick, this.props.speed);
	},
	tick: function () {
	if (this.state.index + 1 === this.props.phrases.length) {
	this.setState({index: -1});
	}
	this.setState({index: this.state.index + 1});
	},
	render: function () {
	/*var lastIndex = this.state.index - 1;
	if (lastIndex === -1) {
	lastIndex = this.props.phrases.length - 1;
	}*/
	var renderPhrases = this.props.phrases.map(function (text, id) {
	return <MXPhrase phrase={text} animation={this.props.animation} active={id === this.state.index} /lastActive={id === lastIndex}/ />
	}.bind(this));

	return (
	<div className="morphext">
	{renderPhrases}
	</div>
	);
	}
	});

	/*
	* Usage example
	*
	* ## Default component (bare minimum)
	*
	* Mount Morphext component onto #morphext-react-container via React.renderComponent.
	* <Morphext phrases={$phrases} />
	*
	* ## Customised component
	*
	* <Morphext animation="fadeIn" speed="3000" phrases={$phrases} />
	*
	* ## Options
	*
	* phrases: text phrases to cycle through (array). Mandatory.
	* https://github.com/MrSaints/Morphext#options
	*/
	var $phrases = ["So Simple", "Very Doge", "Much Wow", "Such Cool"];
	React.renderComponent(<Morphext animation="rotateIn" speed="2000" phrases={$phrases} />, document.getElementById("morphext-react-container"));
	.morphext > span {
	display: none;
	}

	.morphext > .animated {
	display: inline-block;
	}