letterfx 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 568a9bcea8a15b468e8fc376f3cf21f82f9d1f24
4
+ data.tar.gz: d94d75b2031a7daeb2a900b86ff8b88f8b5db581
5
+ SHA512:
6
+ metadata.gz: a7d0bd1cf1533bb465436735a824c964e115b62426e2e012ff998bf001ef181708d443500bbeb2dded5267eba5be0c6a026d32a91130f1d71957f4985cee49bc
7
+ data.tar.gz: 4959ac1b4f6dc830fd54ca325616fcd02b9fb8439497db2a6a3f94bf66973d7e6d079543c9b42a87b01248c8be566060d1e1cf6f4190faaa8b44f5876026ef8c
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in letterfx.gemspec
4
+ gemspec
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2014 TODO: Write your name
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,48 @@
1
+ # Letterfx
2
+
3
+ Gem to apply animated, visual effects to letters, words or other text patterns.
4
+
5
+ [Demo](http://tuxsudo.com/code/project/letterfx)
6
+
7
+ ## Installation
8
+
9
+ Add this line to your application's Gemfile:
10
+
11
+ gem 'letterfx'
12
+
13
+ And then execute:
14
+
15
+ $ bundle
16
+
17
+ Or install it yourself as:
18
+
19
+ $ gem install letterfx
20
+
21
+ ## Usage
22
+
23
+ In your application.js, include the following:
24
+
25
+ ```
26
+ //= require letterfx
27
+ ```
28
+
29
+ In your application.css, include the following:
30
+
31
+ ```
32
+ *= require letterfx
33
+ ```
34
+
35
+ The jQuery
36
+
37
+ ```
38
+ $(element).letterfx({"fx":"fly-right fly-bottom spin"})
39
+ ```
40
+
41
+
42
+ ## Contributing
43
+
44
+ 1. Fork it
45
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
46
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
47
+ 4. Push to the branch (`git push origin my-new-feature`)
48
+ 5. Create new Pull Request
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,23 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'letterfx/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "letterfx"
8
+ spec.version = Letterfx::VERSION
9
+ spec.authors = ["Pulkit Kathuria"]
10
+ spec.email = ["kevincobain2000@gmail.com"]
11
+ spec.description = %q{Wrapper for jquery-letterfx}
12
+ spec.summary = %q{For more details see http://tuxsudo.com/code/project/letterfx}
13
+ spec.homepage = "https://github.com/kevincobain2000/letterfx"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.3"
22
+ spec.add_development_dependency "rake"
23
+ end
@@ -0,0 +1,8 @@
1
+ require "letterfx/version"
2
+
3
+ module Letterfx
4
+ module Rails
5
+ class Engine < ::Rails::Engine
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,3 @@
1
+ module Letterfx
2
+ VERSION = "0.0.1"
3
+ end
Binary file
@@ -0,0 +1,332 @@
1
+ (function ($) {
2
+
3
+ "use strict";
4
+
5
+ var LetterFx = function (element, options) {
6
+
7
+ this.options = $.extend({}, $.fn.letterfx.defaults, options);
8
+
9
+ this.num_completed_fx = 0;
10
+
11
+ this.is_done = false;
12
+
13
+ this.monitor_timer = null;
14
+
15
+ this.killswitch=null;
16
+
17
+ this.$element = $(element);
18
+
19
+ if(this.options.restore)
20
+ this.original_html = this.$element.html();
21
+
22
+ this.init();
23
+
24
+ }
25
+
26
+ LetterFx.prototype.init = function(){
27
+
28
+ this.new_html = this.$element.text().replace( this.options.pattern, this.options.replacement );
29
+
30
+ this.$element.addClass(this.options.css.element.base).addClass( this.options.css.element.before );
31
+
32
+ this.$element.html( this.new_html );
33
+
34
+ this.$letters = this.$element.find(this.options.selector);
35
+
36
+ this.$letters
37
+ .css('transition-duration', this.options.fx_duration)
38
+ .addClass(this.options.css.letters.base)
39
+ .addClass(this.options.css.letters.before);
40
+
41
+ this.bindLetterFxEnd();
42
+
43
+ this.num_letters = this.$letters.length;
44
+
45
+
46
+ this.fx();
47
+
48
+ return this;
49
+ }
50
+
51
+ LetterFx.prototype.bindLetterFxEnd = function(){
52
+ var options = this.options;
53
+ var lfx = this;
54
+ this.$letters.bind("transitionend", function(){
55
+ options.onLetterComplete( $(this), lfx.$element, lfx );
56
+ lfx.notifyFXEnd( );
57
+
58
+ switch(options.letter_end){
59
+ case "destroy":
60
+ $(this).remove();
61
+ break;
62
+
63
+ case "rewind":
64
+ lfx.applyLetterFx( $(this), options.timing, options.css.letters.after, options.css.letters.before );
65
+ break;
66
+
67
+ case "stay":
68
+ break;
69
+
70
+ // restore
71
+ default:
72
+ $(this).replaceWith( $(this).text() );
73
+ }
74
+
75
+ });
76
+ return lfx;
77
+ }
78
+
79
+ LetterFx.prototype.terminate=function(){
80
+ this.is_done = true;
81
+ this.options.onElementComplete(this.$element, this);
82
+
83
+ clearTimeout(this.killswitch);
84
+
85
+ switch(this.options.element_end){
86
+ case "destroy":
87
+ this.$element.remove();
88
+ break;
89
+
90
+ case "stay":
91
+ break;
92
+
93
+ // restore
94
+ default:
95
+ this.$element.html( this.original_html );
96
+ this.$element.removeClass( this.options.css.element.base ).removeClass(this.options.css.element.after);
97
+ break;
98
+ }
99
+
100
+ }
101
+
102
+ LetterFx.prototype.notifyFXEnd=function(){
103
+ clearTimeout(this.monitor_timer);
104
+ this.num_completed_fx++;
105
+
106
+ var lfx = this;
107
+ this.monitor_timer = setTimeout(
108
+ function(){
109
+ if(lfx.num_completed_fx % lfx.num_letters===0){
110
+ lfx.terminate();
111
+ }
112
+ },
113
+ Math.max(this.options.timing+10, 50)
114
+ );
115
+
116
+ return this;
117
+ }
118
+
119
+ LetterFx.prototype.startKillWatch = function(){
120
+ var fx_duration = this.options.fx_duration.match(/\d+s/) ? parseInt(this.options.fx_duration) : 1;
121
+ var time = Math.ceil(1.5 * this.num_letters * this.options.timing * fx_duration );
122
+ var lfx = this;
123
+ this.killswitch = window.setTimeout(function(){
124
+ if(!lfx.isDone()){
125
+ lfx.terminate()
126
+ }
127
+ }, time)
128
+ }
129
+
130
+ LetterFx.prototype.fx = function(){
131
+ var lfx = this;
132
+ this.startKillWatch();
133
+ this.$element.removeClass(this.options.css.element.before).addClass(this.options.css.element.after);
134
+ var $letters = this.options.sort(this.$letters);
135
+ var options = this.options;
136
+
137
+
138
+
139
+ $letters.each(
140
+ function(i, letter){
141
+ lfx.applyLetterFx( $(letter), (i+1)*options.timing, options.css.letters.before, options.css.letters.after);
142
+ }
143
+ );
144
+ return this;
145
+ }
146
+
147
+ LetterFx.prototype.applyLetterFx = function($letter, timing, css_before, css_after){
148
+ var options = this.options;
149
+
150
+ window.setTimeout(
151
+ function(){
152
+ $letter.removeClass(css_before).addClass(css_after);
153
+ },
154
+ timing
155
+ );
156
+ return this
157
+ }
158
+
159
+ LetterFx.prototype.isDone = function(){
160
+ return this.is_done;
161
+ }
162
+
163
+
164
+
165
+
166
+ var LetterFxConfig = function(conf){
167
+ this.config = $.extend({}, $.fn.letterfx.defaults, conf);
168
+ this.buildCss(this.config.backwards);
169
+
170
+ // check & change to word pattern
171
+ if(this.config.words)
172
+ this.config.pattern=/(\S+)/g;
173
+
174
+
175
+ }
176
+
177
+
178
+ LetterFxConfig.prototype.buildCss = function(flip){
179
+ var options = this.config;
180
+ var before = flip ? 'after' : 'before';
181
+ var after = flip ? 'before' : 'after';
182
+
183
+
184
+ var css = { element:{}, letters:{} };
185
+
186
+ css.element.base=options.element_class+ "-container " + options.fx.replace(/(\S+)/g, options.element_class + "-$1-container");
187
+ css.element[before]=options.fx.replace(/(\S+)/g, options.element_class + "-$1-before-container");
188
+ css.element[after]=options.fx.replace(/(\S+)/g, options.element_class + "-$1-after-container");
189
+
190
+ css.letters.base = options.element_class;
191
+ css.letters[before] = options.fx.replace(/(\S+)/g, options.element_class + "-$1-before")
192
+ css.letters[after] = options.fx.replace(/(\S+)/g, options.element_class + "-$1-after")
193
+
194
+ this.config = $.extend( options, {'css':css} );
195
+ }
196
+
197
+ LetterFxConfig.prototype.getConfig = function(){
198
+ return this.config;
199
+ }
200
+
201
+ LetterFxConfig.parse=function(config){
202
+ return (new LetterFxConfig( config )).getConfig();
203
+ }
204
+
205
+
206
+
207
+
208
+ $.fn.letterfx=function(config){
209
+
210
+ config = LetterFxConfig.parse( config );
211
+
212
+ return $(this).each(function(){
213
+ var $element = $(this);
214
+ if (! $element.data('letterfx-obj') || $element.data('letterfx-obj').isDone() ){
215
+ $element.data('letterfx-obj', new LetterFx( $element, config ) );
216
+ }
217
+ });
218
+
219
+ };
220
+
221
+ $.fn.letterfx.sort={
222
+ random:function(array){
223
+ var currentIndex = array.length, temporaryValue, randomIndex;
224
+
225
+ // While there remain elements to shuffle...
226
+ while (0 !== currentIndex) {
227
+
228
+ // Pick a remaining element...
229
+ randomIndex = Math.floor(Math.random() * currentIndex);
230
+ currentIndex -= 1;
231
+
232
+ // And swap it with the current element.
233
+ temporaryValue = array[currentIndex];
234
+ array[currentIndex] = array[randomIndex];
235
+ array[randomIndex] = temporaryValue;
236
+ }
237
+
238
+ return array;
239
+ },
240
+ reverse:function($array){
241
+ return $array.toArray().reverse();
242
+ }
243
+ }
244
+
245
+ $.fn.letterfx.patterns={
246
+ letters:/(\S)/gi
247
+ }
248
+
249
+ // Plugin Configurables
250
+ $.fn.letterfx.defaults = {
251
+
252
+ // Default fx
253
+ fx:'spin fly-top',
254
+
255
+ // defaults to selecting all characters
256
+ pattern:/(\S)/gi,
257
+
258
+ // switch from letter FX to word FX.
259
+ word:false,
260
+
261
+ // fx, like fly or fade, can happen in (eg fade-in) or out (eg fade-out).
262
+ // The default is in; change backwards to true to reverse the order of the effects.
263
+ backwards:false,
264
+
265
+ // defaults to injecting spans, can be any inline element
266
+ replacement:"<span>$1</span>",
267
+
268
+ //selector -- should match replacement above
269
+ selector:'span',
270
+
271
+ // letter fx start sequentially: letters start their fx one after another.
272
+ // this sets time between the letters
273
+ timing:50,
274
+
275
+ //duration of each fx
276
+ // options the same as css property for transition-duration ("1ms", "1s", etc)
277
+ fx_duration:"1s",
278
+
279
+
280
+ // stabile dimensions
281
+ // stabilize:true,
282
+
283
+ // sort callback for custom sorting elements
284
+ sort:function($letters){ return $letters; },
285
+
286
+
287
+ // Callback when letter is done animating. Runs after each letter
288
+ onLetterComplete:function($letter, $element, LetterFXObj){},
289
+
290
+ // Runs after all are done.
291
+ onElementComplete:function($element, LetterFXObj){},
292
+
293
+
294
+ // what to do when a letter completes its animation.
295
+ // options include
296
+ // restore: return letter to plain text (default)
297
+ // destroy: get rid of the letter.
298
+ // stay: leave it as is.
299
+ // rewind: reverse the animation
300
+ letter_end:"restore",
301
+
302
+
303
+ // what to do when the entire element has completed all its letter effects
304
+ // options include:
305
+ // restore: return element to its pre-fx state (default)
306
+ // stay: do nothing
307
+ // destroy: get rid of the element... FOREVER
308
+ element_end:"restore",
309
+
310
+ // Restore container element back to original state.
311
+ // options: true, false, "element" ("element" waits until all letters complete fx before restoring)
312
+ restore:true,
313
+
314
+ // destroy element/letters after fx, useful on {out:true} fx
315
+ // options: true, false, "letters" ("letters" destroys each letter after fx, but elements original content may be restored after all letters complete fx)
316
+ destroy:false,
317
+
318
+ // default class for injected elements
319
+ element_class:'letterfx',
320
+
321
+ // placeholder values that are calculated on launch
322
+ css:{
323
+ element:{ base:'', before:'', after:''},
324
+ letters:{ base:'', before:'', after:''}
325
+ }
326
+
327
+
328
+
329
+ };
330
+
331
+ }(jQuery));
332
+
@@ -0,0 +1,111 @@
1
+ .letterfx-container{}
2
+
3
+ .letterfx{
4
+ display:inline-block;
5
+ margin:0;
6
+ padding:0;
7
+ transition: all 1s; -ms-transition: all 1s; -webkit-transition: all 1s;
8
+ }
9
+
10
+ /* Spin FX */
11
+ .letterfx-spin-before{
12
+ transform:rotate(3600deg); -ms-transform:rotate(3600deg); -webkit-transform:rotate(3600deg);
13
+ }
14
+
15
+ .letterfx-spin-after{
16
+ transform:none;
17
+ }
18
+
19
+ /* Fade FX */
20
+ .letterfx-fade-before{
21
+ opacity: 0;
22
+ }
23
+
24
+
25
+ /* Grow FX */
26
+ .letterfx-grow-before{
27
+ transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0);
28
+ }
29
+
30
+ .letterfx-grow-after{
31
+ transform:none;
32
+ }
33
+
34
+
35
+ /* Smear FX */
36
+ .letterfx-smear-before{
37
+ color: transparent;
38
+ text-shadow:-1px -1px 25px transparent;
39
+ }
40
+
41
+ .letterfx-smear-after{
42
+ color:inherit;
43
+ text-shadow:0 0 #333;
44
+
45
+ }
46
+
47
+ /* Fall FX */
48
+ .letterfx-fall-before
49
+ {
50
+ visibility: hidden;
51
+ transform:scale(3,3); -ms-transform:scale(3,3); -webkit-transform:scale(3,3);
52
+ }
53
+
54
+ .letterfx-fall-after{
55
+ transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1);
56
+ text-shadow:0;
57
+ }
58
+
59
+ /* Swirl FX */
60
+ .letterfx-swirl-before
61
+ {
62
+ visibility: hidden;
63
+ transform:scale(3,3) rotate(3600deg); -ms-transform:scale(3,3) rotate(3600deg); -webkit-transform:scale(3,3) rotate(3600deg);
64
+ }
65
+
66
+ .letterfx-swirl-after{
67
+ transform:none
68
+ text-shadow:0;
69
+ }
70
+
71
+
72
+ /* Wave FX */
73
+ .letterfx-wave-container .letterfx
74
+ {
75
+ position:relative;
76
+ }
77
+
78
+ .letterfx-wave-before
79
+ {
80
+ bottom:0;
81
+ }
82
+
83
+ .letterfx-wave-after{
84
+ bottom:15px;
85
+ }
86
+
87
+
88
+
89
+ /* FLY FX */
90
+ .letterfx-fly-left-container .letterfx,
91
+ .letterfx-fly-right-container .letterfx,
92
+ .letterfx-fly-top-container .letterfx,
93
+ .letterfx-fly-bottom-container .letterfx
94
+ {
95
+ position:relative;
96
+ }
97
+
98
+ .letterfx-fly-left-before{ left:-50em; }
99
+ .letterfx-fly-left-after{ left:0; }
100
+
101
+ .letterfx-fly-right-before{ right:-50em; }
102
+ .letterfx-fly-right-after{ right:0; }
103
+
104
+ .letterfx-fly-top-before{ top:-20em; }
105
+ .letterfx-fly-top-after{ top:0; }
106
+
107
+ .letterfx-fly-bottom-before{ bottom:-20em; }
108
+ .letterfx-fly-bottom-after{ bottom:0; }
109
+
110
+
111
+
metadata ADDED
@@ -0,0 +1,83 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: letterfx
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Pulkit Kathuria
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-07-21 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ~>
18
+ - !ruby/object:Gem::Version
19
+ version: '1.3'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ~>
25
+ - !ruby/object:Gem::Version
26
+ version: '1.3'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - '>='
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - '>='
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ description: Wrapper for jquery-letterfx
42
+ email:
43
+ - kevincobain2000@gmail.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - .gitignore
49
+ - Gemfile
50
+ - LICENSE.txt
51
+ - README.md
52
+ - Rakefile
53
+ - letterfx.gemspec
54
+ - lib/letterfx.rb
55
+ - lib/letterfx/version.rb
56
+ - vendor/.DS_Store
57
+ - vendor/assets/javascripts/letterfx.js
58
+ - vendor/assets/stylesheets/letterfx.css
59
+ homepage: https://github.com/kevincobain2000/letterfx
60
+ licenses:
61
+ - MIT
62
+ metadata: {}
63
+ post_install_message:
64
+ rdoc_options: []
65
+ require_paths:
66
+ - lib
67
+ required_ruby_version: !ruby/object:Gem::Requirement
68
+ requirements:
69
+ - - '>='
70
+ - !ruby/object:Gem::Version
71
+ version: '0'
72
+ required_rubygems_version: !ruby/object:Gem::Requirement
73
+ requirements:
74
+ - - '>='
75
+ - !ruby/object:Gem::Version
76
+ version: '0'
77
+ requirements: []
78
+ rubyforge_project:
79
+ rubygems_version: 2.0.3
80
+ signing_key:
81
+ specification_version: 4
82
+ summary: For more details see http://tuxsudo.com/code/project/letterfx
83
+ test_files: []