Skip to content

Instantly share code, notes, and snippets.

@MrSaints

MrSaints/demo.html

Last active December 3, 2017 21:22
Show Gist options
  • Save MrSaints/7e84c68c086d5a6a3ee2 to your computer and use it in GitHub Desktop.
Save MrSaints/7e84c68c086d5a6a3ee2 to your computer and use it in GitHub Desktop.
Download ZIP
Native ports of Morphext in React and Polymer (JavaScript frameworks). They're a work in progress. Use them at your own risk. Original: https://github.com/MrSaints/Morphext
Raw
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>
Raw
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>
Raw
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"));
Raw
morphext.css
.morphext > span {
display: none;
}
.morphext > .animated {
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment