commit 57278adf122ddcacedb7e2cf1332c441febe4918 Author: Glenn Y. Rolland Date: Mon Jun 11 22:57:39 2018 +0200 Initial import diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/dist/fluidtype-jquery.js b/dist/fluidtype-jquery.js new file mode 100644 index 0000000..0ee3814 --- /dev/null +++ b/dist/fluidtype-jquery.js @@ -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; + }; +}); + diff --git a/dist/fluidtype-jquery.min.js b/dist/fluidtype-jquery.min.js new file mode 100644 index 0000000..d316a85 --- /dev/null +++ b/dist/fluidtype-jquery.min.js @@ -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)}}); diff --git a/example/app.css b/example/app.css new file mode 100644 index 0000000..8f21dee --- /dev/null +++ b/example/app.css @@ -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; +} diff --git a/example/app.js b/example/app.js new file mode 100644 index 0000000..d6dfefa --- /dev/null +++ b/example/app.js @@ -0,0 +1,31 @@ +/*jslint browser: true */ +/*global $*/ +$(function () { + + // prepare fluidType initialization parameters + var options = { + strings: [ + "a technologist.", + "an entrepreneur.", + "a humanist." + ], + 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(); + } + }); +}); diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..2455ebf --- /dev/null +++ b/example/index.html @@ -0,0 +1,28 @@ + + + + + Demo + + + + +

FluidType jQuery Plugin

+ +
+ Hello!
+ My name is Glenn,
+ I’m +
+ + + + + + + + + + + +