Initial import

This commit is contained in:
Glenn Y. Rolland 2018-06-11 22:57:39 +02:00
commit 57278adf12
6 changed files with 225 additions and 0 deletions

0
README.md Normal file
View file

139
dist/fluidtype-jquery.js vendored Normal file
View file

@ -0,0 +1,139 @@
/*jslint browser:true */
/*global $*/
$(function() {
var ACTION_FILL = 1,
ACTION_ERASE = 2;
var defaultOptions = {
strings: [
"Hello!",
"How are you?"
],
waitFillDuration: 200,
waitEraseDuration: 2000,
animateDuration: 400,
easing: 'swing'
};
function FluidType ($userElem, userOptions) {
var _$other,
_$elem = $userElem,
_pauseRequested = false,
_currentAction = ACTION_ERASE,
_currentString = 0,
_options = $.extend({}, defaultOptions, userOptions),
_self = this;
this.animateFill = function() {
var str = _options.strings[_currentString];
_$elem.html(str);
_$elem.parent().find(_$other).remove();
_$other = _$elem.clone();
_$other.css({
width: '',
position: 'absolute',
visibility: 'hidden',
display: 'block',
left: '-300%',
});
_$elem.parent().append(_$other);
_$elem.velocity(
{
width: _$other.width()
},
{
duration: _options.animateDuration,
easing: _options.easing,
complete: _self.next
}
);
};
/*
* Erase
*/
this.animateErase = function() {
_$elem.velocity(
{
width: 0 //'= ' + _$other.width()
},
{
duration: _options.animateDuration,
easing: _options.easing,
complete: _self.next
}
);
};
/*
* Switch to the next action.
* Pause request does not affect Erase => Fill switch
*/
this.next = function() {
_currentString = (_currentString + 1) % _options.strings.length;
switch (_currentAction) {
case ACTION_ERASE:
_currentAction = ACTION_FILL;
setTimeout(
_self.animateFill.bind(_self),
_options.waitFillDuration
);
break;
case ACTION_FILL:
if (!_pauseRequested) {
_currentAction = ACTION_ERASE;
setTimeout(
_self.animateErase.bind(_self),
_options.waitEraseDuration
);
}
break;
}
};
/*
* Start animation (again)
*/
this.start = function() {
// choose next string
_pauseRequested = false;
_self.next();
};
/*
* Request animation stop
*/
this.stop = function() {
_pauseRequested = true;
};
/*
* Set up element properties
*/
function initialize() {
_$elem.css({
boxSizing: 'border-box',
display: 'inline-block',
overflow: 'hidden',
whiteSpace: 'nowrap',
verticalAlign: 'bottom',
width: 0
});
_self.start();
}
initialize();
}
$.fn.fluidType = function(userOptions) {
var $target = $(this);
var fluidType = new FluidType($target, userOptions);
return fluidType;
};
});

1
dist/fluidtype-jquery.min.js vendored Normal file
View file

@ -0,0 +1 @@
$(function(){var u={strings:["Hello!","How are you?"],waitFillDuration:200,waitEraseDuration:2e3,animateDuration:400,easing:"swing"};function t(i,t){var n,e=i,a=!1,o=2,s=0,r=$.extend({},u,t),l=this;this.animateFill=function(){var i=r.strings[s];e.html(i),e.parent().find(n).remove(),(n=e.clone()).css({width:"",position:"absolute",visibility:"hidden",display:"block",left:"-300%"}),e.parent().append(n),e.velocity({width:n.width()},{duration:r.animateDuration,easing:r.easing,complete:l.next})},this.animateErase=function(){e.velocity({width:0},{duration:r.animateDuration,easing:r.easing,complete:l.next})},this.next=function(){switch(s=(s+1)%r.strings.length,o){case 2:o=1,setTimeout(l.animateFill.bind(l),r.waitFillDuration);break;case 1:a||(o=2,setTimeout(l.animateErase.bind(l),r.waitEraseDuration))}},this.start=function(){a=!1,l.next()},this.stop=function(){a=!0},e.css({boxSizing:"border-box",display:"inline-block",overflow:"hidden",whiteSpace:"nowrap",verticalAlign:"bottom",width:0}),l.start()}$.fn.fluidType=function(i){return new t($(this),i)}});

26
example/app.css Normal file
View file

@ -0,0 +1,26 @@
h1 { color: red; }
#text {
font-family: Arial, sans-serif;
font-size: 40px;
font-weight: bold;
line-height: 1.3;
padding: 60px;
border: 1px solid black;
}
#text .red {
padding: 0 0.25em;
background-color: #fee;
}
#text .green {
padding: 0 0.25em;
background-color: #efe;
}
#text .blue {
padding: 0 0.25em;
background-color: #eef;
}

31
example/app.js Normal file
View file

@ -0,0 +1,31 @@
/*jslint browser: true */
/*global $*/
$(function () {
// prepare fluidType initialization parameters
var options = {
strings: [
"<span class='red'>a technologist.</span>",
"<span class='green'>an entrepreneur.</span>",
"<span class='blue'>a humanist.</span>"
],
waitFillDuration: 200,
waitEraseDuration: 2000,
animateDuration: 400,
};
// get fluidType object to make it controllable by a button
var fluidType = $('#dynamic').fluidType(options);
$('input[type=button]').click(function(ev) {
var $this = $(this);
ev.preventDefault();
if ($this.val() === 'Play') {
$this.val('Pause');
fluidType.start();
} else {
$this.val('Play');
fluidType.stop();
}
});
});

28
example/index.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
<h1>FluidType jQuery Plugin</h1>
<div id="text">
Hello!<br/>
My name is Glenn,<br/>
Im <span id="dynamic"></span>
</div>
<input type="button" value="Pause" />
<!-- external libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.js"></script>
<script src="js/fluidtype-jquery.js"></script>
<!-- page specific settings -->
<script src="js/app.js"></script>
</body>
</html>