Skip to content

Commit 43567ae

Browse files
jayKayEssjayKayEss
committed
Words mode working now; may need tweaking
1 parent 013c52a commit 43567ae

3 files changed

Lines changed: 81 additions & 188 deletions

File tree

‎css/flapper.css‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -56,20 +56,19 @@
5656
border-radius: 6px;
5757
}
5858

59-
.flapper.XXL .digit,
60-
.flapper.XXL .digit div {
59+
.flapper.XXL .digit {
6160
height: 128px;
6261
width: 96px;
6362
font-size: inherit;
6463
line-height: inherit;
6564
}
6665

6766
.flapper.XXL .digit .top {
68-
clip: rect(0px, 96px, 64px, 0px);
67+
clip: rect(0px, auto, 64px, 0px);
6968
}
7069

7170
.flapper.XXL .digit .bottom {
72-
clip: rect(65px, 96px, 128px, 0px);
71+
clip: rect(65px, auto, 128px, 0px);
7372
}
7473

7574
/* XL 72x96 */
@@ -93,20 +92,19 @@
9392
border-radius: 5px;
9493
}
9594

96-
.flapper.XL .digit,
97-
.flapper.XL .digit div {
95+
.flapper.XL .digit {
9896
height: 96px;
9997
width: 72px;
10098
font-size: inherit;
10199
line-height: inherit;
102100
}
103101

104102
.flapper.XL .digit .top {
105-
clip: rect(0px, 72px, 47px, 0px);
103+
clip: rect(0px, auto, 47px, 0px);
106104
}
107105

108106
.flapper.XL .digit .bottom {
109-
clip: rect(48px, 72px, 96px, 0px);
107+
clip: rect(48px, auto, 96px, 0px);
110108
}
111109

112110
/* L 54x72 */
@@ -130,20 +128,19 @@
130128
border-radius: 4px;
131129
}
132130

133-
.flapper.L .digit,
134-
.flapper.L .digit div {
131+
.flapper.L .digit {
135132
height: 72px;
136133
width: 54px;
137134
font-size: inherit;
138135
line-height: inherit;
139136
}
140137

141138
.flapper.L .digit .top {
142-
clip: rect(0px, 54px, 35px, 0px);
139+
clip: rect(0px, auto, 35px, 0px);
143140
}
144141

145142
.flapper.L .digit .bottom {
146-
clip: rect(36px, 54px, 72px, 0px);
143+
clip: rect(36px, auto, 72px, 0px);
147144
}
148145

149146
/* M 40x54 (default) */
@@ -167,20 +164,27 @@
167164
border-radius: 3px;
168165
}
169166

170-
.flapper .digit,
171-
.flapper .digit div {
167+
.flapper .digit {
172168
height: 54px;
173169
width: 40px;
174170
font-size: inherit;
175171
line-height: inherit;
176172
}
177173

174+
.flapper .digit div {
175+
height: 100%;
176+
width: 100%;
177+
font-size: inherit;
178+
line-height: inherit;
179+
width: inherit;
180+
}
181+
178182
.flapper .digit .top {
179-
clip: rect(0px, 40px, 26px, 0px);
183+
clip: rect(0px, auto, 26px, 0px);
180184
}
181185

182186
.flapper .digit .bottom {
183-
clip: rect(27px, 40px, 54px, 0px);
187+
clip: rect(27px, auto, 54px, 0px);
184188
}
185189

186190
/* S 30x40 */
@@ -204,20 +208,19 @@
204208
border-radius: 2px;
205209
}
206210

207-
.flapper.S .digit,
208-
.flapper.S .digit div {
211+
.flapper.S .digit {
209212
height: 40px;
210213
width: 30px;
211214
font-size: inherit;
212215
line-height: inherit;
213216
}
214217

215218
.flapper.S .digit .top {
216-
clip: rect(0px, 30px, 19px, 0px);
219+
clip: rect(0px, auto, 19px, 0px);
217220
}
218221

219222
.flapper.S .digit .bottom {
220-
clip: rect(20px, 30px, 40px, 0px);
223+
clip: rect(20px, auto, 40px, 0px);
221224
}
222225

223226
/* XS 24x30 */
@@ -241,20 +244,25 @@
241244
border-radius: 1px;
242245
}
243246

244-
.flapper.XS .digit,
245-
.flapper.XS .digit div {
247+
.flapper.XS .digit {
246248
height: 30px;
247249
width: 24px;
248250
font-size: inherit;
249251
line-height: inherit;
250252
}
251253

252254
.flapper.XS .digit .top {
253-
clip: rect(0px, 24px, 14px, 0px);
255+
clip: rect(0px, auto, 14px, 0px);
254256
}
255257

256258
.flapper.XS .digit .bottom {
257-
clip: rect(15px, 24px, 30px, 0px);
259+
clip: rect(15px, auto, 30px, 0px);
260+
}
261+
262+
/* WORDS MODE OVERRIDE */
263+
264+
.flapper.words .digit {
265+
width: 100%;
258266
}
259267

260268
/* THEME STYLES */

‎src/jquery.flapper.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
threshhold: 100,
3434
transform: true,
3535
on_anim_start: null,
36-
on_anim_end: null
36+
on_anim_end: null,
37+
cycleInterval: null,
3738
},
3839

3940
init: function() {
@@ -58,6 +59,10 @@
5859
}
5960

6061
this.update();
62+
63+
if (this.options.cycleInterval) {
64+
this.startCycle();
65+
}
6166
},
6267

6368
update: function() {
@@ -108,6 +113,16 @@
108113

109114
return digits;
110115
},
116+
117+
startCycle: function() {
118+
var self = this;
119+
setInterval(function() {
120+
for (var i=0; i<self.digits.length; i++) {
121+
self.digits[i].goToNextPosition();
122+
}
123+
}, this.options.cycleInterval);
124+
},
125+
111126
}
112127

113128
FlapDigit = function($ele, opts) {
@@ -241,6 +256,15 @@
241256
frameFunc();
242257
},
243258

259+
goToNextPosition: function() {
260+
var next = this.pos + 1;
261+
if (next >= this.options.chars.length) {
262+
next = 0;
263+
}
264+
265+
this.goToPosition(next);
266+
},
267+
244268
goToChar: function(c) {
245269
var pos = $.inArray(c, this.options.chars);
246270

0 commit comments

Comments
 (0)