← Back to branch summary

~hannes-hochreiner/jessyink/effects-2

« back to all changes in this revision

Viewing changes to inkscapeExtensions/jessyInk.js

  • Committer: Hannes Hochreiner
  • Date: 2008-05-10 02:18:09 UTC
  • mfrom: (8.1.10 effects)
  • Revision ID: hannes@hochreiner.net-20080510021809-t39uge7j5uxgk7ae
Tags: version_0_2
Merging the "effects" branch.

Show diffs side-by-side

added added

removed removed

Lines of Context:
inkscapeExtensions/jessyInk.js
17
17
var NEXT_KEY = 39; //cursor right keycode
18
18
var DOWN_KEY = 40;
19
19
var INDEX_KEY = 73; // keycode for the index key (73 = "i")
20
 
var OTHER_EFFECT = 0;
21
 
var SLIDETRANS_EFFECT = 1;
22
20
var SLIDE_MODE = 1;
23
21
var INDEX_MODE = 2;
24
22
var ROOT_NODE = document.getElementsByTagName("svg")[0];;
26
24
var WIDTH = parseFloat(ROOT_NODE.getAttribute("width"));
27
25
var INDEX_COLUMNS = 3;
28
26
var INDEX_OFFSET = 0;
 
27
var STATE_START = -1;
 
28
var STATE_END = -2;
29
29
var slides = new Array();
30
30
 
31
31
var currentMode = SLIDE_MODE;
32
32
var activeSlide = 0;
 
33
var activeEffect = 0;
33
34
var timeStep = 25;
34
35
var processingEffect = false;
35
36
var transCounter = 0;
92
93
                {
93
94
                        document.getElementById(slides[counter]["objectId"]).style.display = "inherit";
94
95
                        document.getElementById(slides[counter]["objectId"]).setAttribute("opacity",1);
95
 
                        // var effects = getElementsByName(document.getElementById(slides[counter]["objectId"]),"effect");
96
 
                        // alert(effects.length);
97
96
                }
98
97
                else
99
98
                {
101
100
                        document.getElementById(slides[counter]["objectId"]).setAttribute("opacity",0);
102
101
                }
103
102
 
 
103
                var tempEffects = new Array();
 
104
                for (var IOCounter = 0; IOCounter <= 1; IOCounter++)
 
105
                {
 
106
                        var propName = "";
 
107
                        var dir = 0;
 
108
 
 
109
                        if (IOCounter == 0)
 
110
                        {
 
111
                                propName = "effectIn";
 
112
                                dir = 1;
 
113
                        }
 
114
                        else if (IOCounter == 1)
 
115
                        {
 
116
                                propName = "effectOut";
 
117
                                dir = -1;
 
118
                        }
 
119
                        var effects = getElementsByProperty(document.getElementById(slides[counter]["objectId"]),propName);
 
120
                        for (var effectCounter = 0; effectCounter < effects.length; effectCounter++)
 
121
                        {
 
122
                                var dict = propStrToDict(document.getElementById(effects[effectCounter]).getAttribute(propName));
 
123
                                var effectDict = new Object();
 
124
                                effectDict["effect"] = dict["name"];
 
125
                                effectDict["dir"] = dir;
 
126
                                effectDict["objectId"] = effects[effectCounter];
 
127
                                for (var option in dict)
 
128
                                {
 
129
                                        if ((option != "name") && (option != "order"))
 
130
                                        {
 
131
                                                if (!effectDict["options"])
 
132
                                                        effectDict["options"] = new Object();
 
133
 
 
134
                                                effectDict["options"][option] = dict[option];
 
135
                                        }
 
136
                                }
 
137
                                if (!tempEffects[dict["order"]])
 
138
                                        tempEffects[dict["order"]] = new Array();
 
139
                                tempEffects[dict["order"]][tempEffects[dict["order"]].length] = effectDict;
 
140
                        }
 
141
                }
 
142
                if (tempEffects.length > 0)
 
143
                {
 
144
                        slides[counter]["effects"] = new Array();
 
145
                        for (var effectCounter = 0; effectCounter < tempEffects.length; effectCounter++)
 
146
                        {
 
147
                                if (tempEffects[effectCounter])
 
148
                                        slides[counter]["effects"][slides[counter]["effects"].length] = tempEffects[effectCounter];
 
149
                        }
 
150
                }
 
151
 
104
152
                var texts = document.getElementById(slides[counter]["objectId"]).getElementsByTagName("tspan");
105
153
 
106
154
                for (var textCounter = 0; textCounter < texts.length; textCounter++)
111
159
                                texts[textCounter].firstChild.nodeValue = slides.length;
112
160
                }
113
161
        }
 
162
        
 
163
        setSlideToState(0, STATE_START);
114
164
}
115
165
 
116
 
function getElementsByName(node, name)
 
166
function getElementsByProperty(node, name)
117
167
{
118
168
        var elems = new Array();
119
169
 
120
 
        if (node.getAttribute("inkscape:label") == name)
 
170
        if (node.getAttribute(name))
121
171
                elems.push(node.getAttribute("id"));
122
172
 
123
173
        for (var counter = 0; counter < node.childNodes.length; counter++)
124
174
        {
125
175
                if (node.childNodes[counter].nodeType == 1)
126
 
                        elems = elems.concat(getElementsByName(node.childNodes[counter], name));
 
176
                        elems = elems.concat(getElementsByProperty(node.childNodes[counter], name));
127
177
        }
128
178
 
129
179
        return elems;
131
181
 
132
182
function dispatchEffects(dir)
133
183
{
134
 
        if ((dir == 1) && (activeSlide < (slides.length - 1)) || ((dir == -1) && (activeSlide > 0)))
 
184
        if (slides[activeSlide]["effects"] && (((dir == 1) && (activeEffect < slides[activeSlide]["effects"].length)) || ((dir == -1) && (activeEffect > 0))))
 
185
        {
 
186
                processingEffect = true;
 
187
                if (dir == 1)
 
188
                {
 
189
                        effectArray = slides[activeSlide]["effects"][activeEffect];
 
190
                        activeEffect += dir;
 
191
                }
 
192
                else if (dir == -1)
 
193
                {
 
194
                        activeEffect += dir;
 
195
                        effectArray = slides[activeSlide]["effects"][activeEffect];
 
196
                }
 
197
                transCounter = 0;
 
198
                effect(dir);
 
199
        }
 
200
        else if (((dir == 1) && (activeSlide < (slides.length - 1))) || (((dir == -1) && (activeSlide > 0))))
135
201
        {
136
202
                processingEffect = true;
137
203
                effectArray = new Array();
141
207
                {
142
208
                        effectArray[0]["effect"] = slides[activeSlide]["transitionOut"]["name"];
143
209
                        effectArray[0]["options"] = slides[activeSlide]["transitionOut"]["options"];
 
210
                        effectArray[0]["dir"] = -1;
144
211
                }
145
212
                else if (dir == -1)
146
213
                {
147
214
                        effectArray[0]["effect"] = slides[activeSlide]["transitionIn"]["name"];
148
215
                        effectArray[0]["options"] = slides[activeSlide]["transitionIn"]["options"];
 
216
                        effectArray[0]["dir"] = 1;
149
217
                }
150
 
                effectArray[0]["dir"] = -1;
151
218
                effectArray[0]["objectId"] = slides[activeSlide]["objectId"];
152
 
                effectArray[0]["effectType"] = SLIDETRANS_EFFECT;
153
219
 
154
220
                activeSlide += dir;
155
221
 
158
224
                {
159
225
                        effectArray[1]["effect"] = slides[activeSlide]["transitionIn"]["name"];
160
226
                        effectArray[1]["options"] = slides[activeSlide]["transitionIn"]["options"];
 
227
                        effectArray[1]["dir"] = 1;
161
228
                }
162
229
                else if (dir == -1)
163
230
                {
164
231
                        effectArray[1]["effect"] = slides[activeSlide]["transitionOut"]["name"];
165
232
                        effectArray[1]["options"] = slides[activeSlide]["transitionOut"]["options"];
 
233
                        effectArray[1]["dir"] = -1;
166
234
                }
167
 
                effectArray[1]["dir"] = 1;
168
235
                effectArray[1]["objectId"] = slides[activeSlide]["objectId"];
169
 
                effectArray[1]["effectType"] = SLIDETRANS_EFFECT;
 
236
 
 
237
                if (slides[activeSlide]["effects"] && (dir == -1))
 
238
                        activeEffect = slides[activeSlide]["effects"].length;
 
239
                else
 
240
                        activeEffect = 0;
 
241
 
 
242
                if (dir == -1)
 
243
                        setSlideToState(activeSlide, STATE_END);
 
244
                else
 
245
                        setSlideToState(activeSlide, STATE_START);
170
246
 
171
247
                transCounter = 0;
172
248
                effect(dir);
192
268
                        {
193
269
                                document.getElementById(slides[counter]["objectId"]).style.display = "inherit";
194
270
                                document.getElementById(slides[counter]["objectId"]).setAttribute("opacity",1);
 
271
                                activeEffect = 0;
195
272
                        }
196
273
                        else
197
274
                        {
200
277
                        }
201
278
                }
202
279
                currentMode = SLIDE_MODE;
 
280
                setSlideToState(activeSlide, STATE_START);
203
281
        }
204
282
}
205
283
 
210
288
        for (var counter = 0; counter < effectArray.length; counter++)
211
289
        {
212
290
                if (effectArray[counter]["effect"] == "fade")
213
 
                        done &= fade(effectArray[counter]["dir"], effectArray[counter]["effectType"], effectArray[counter]["objectId"], transCounter, effectArray[counter]["options"]);
 
291
                        done &= fade(parseInt(effectArray[counter]["dir"]) * dir, effectArray[counter]["objectId"], transCounter, effectArray[counter]["options"]);
214
292
                else if (effectArray[counter]["effect"] == "appear")
215
 
                        done &= appear(effectArray[counter]["dir"], effectArray[counter]["effectType"], effectArray[counter]["objectId"], transCounter, effectArray[counter]["options"]);
 
293
                        done &= appear(parseInt(effectArray[counter]["dir"]) * dir, effectArray[counter]["objectId"], transCounter, effectArray[counter]["options"]);
216
294
                else if (effectArray[counter]["effect"] == "pop")
217
 
                        done &= pop(effectArray[counter]["dir"], effectArray[counter]["effectType"], effectArray[counter]["objectId"], transCounter, effectArray[counter]["options"]);
 
295
                        done &= pop(parseInt(effectArray[counter]["dir"]) * dir, effectArray[counter]["objectId"], transCounter, effectArray[counter]["options"]);
218
296
        }
219
297
 
220
298
        if (!done)
221
299
        {
222
300
                transCounter += timeStep;
223
 
 
224
 
                if (dir == -1)
225
 
                        transCounter += timeStep;
226
 
 
227
301
                window.setTimeout("effect(" + dir + ")", timeStep);
228
302
        }
229
303
        else
256
330
                        else
257
331
                                offsetX += WIDTH;
258
332
                }
 
333
                setSlideToState(counter, STATE_END);
259
334
        }
260
335
}
261
336
 
328
403
}
329
404
document.onmousedown = mouseclick;
330
405
 
331
 
function fade(dir, effectType, objectId, time, options)
 
406
function fade(dir, objectId, time, options)
332
407
{
333
408
        var length = 250;
334
 
 
335
 
        if (options && options["length"])
336
 
                length = options["length"];
337
 
 
338
 
        var fraction = time / length;
 
409
        var fraction;
 
410
 
 
411
        if ((time == STATE_END) || (time == STATE_START))
 
412
                fraction = 1;
 
413
        else
 
414
        {
 
415
                if (options && options["length"])
 
416
                        length = options["length"];
 
417
 
 
418
                fraction = time / length;
 
419
        }
339
420
 
340
421
        if (dir == 1)
341
422
        {
342
423
                if (fraction <= 0)
343
424
                {
 
425
                        document.getElementById(objectId).style.display = "none";
344
426
                        document.getElementById(objectId).setAttribute("opacity", 0);
345
 
                        if (effectType == SLIDETRANS_EFFECT)
346
 
                                document.getElementById(objectId).style.display = "inherit";
347
 
                        else
348
 
                                document.getElementById(objectId).setAttribute("visibility", "inherit");
349
427
                }
350
428
                else if (fraction >= 1)
351
429
                {
 
430
                        document.getElementById(objectId).style.display = "inherit";
352
431
                        document.getElementById(objectId).setAttribute("opacity", 1);
353
432
                        return true;
354
433
                }
355
434
                else
356
435
                {
 
436
                        document.getElementById(objectId).style.display = "inherit";
357
437
                        document.getElementById(objectId).setAttribute("opacity", fraction);
358
438
                }
359
439
        }
360
440
        else if (dir == -1)
361
441
        {
362
442
                if (fraction <= 0)
 
443
                {
 
444
                        document.getElementById(objectId).style.display = "inherit";
363
445
                        document.getElementById(objectId).setAttribute("opacity", 1);
 
446
                }
364
447
                else if (fraction >= 1)
365
448
                {
366
449
                        document.getElementById(objectId).setAttribute("opacity", 0);
367
 
                        if (effectType == SLIDETRANS_EFFECT)
368
 
                                document.getElementById(objectId).style.display = "none";
369
 
                        else
370
 
                                document.getElementById(objectId).setAttribute("visibility", "hidden");
 
450
                        document.getElementById(objectId).style.display = "none";
371
451
                        return true;
372
452
                }
373
453
                else
 
454
                {
 
455
                        document.getElementById(objectId).style.display = "inherit";
374
456
                        document.getElementById(objectId).setAttribute("opacity", 1 - fraction);
 
457
                }
375
458
        }
376
459
        return false;
377
460
}
378
461
 
379
 
function appear(dir, effectType, objectId, time, options)
 
462
function appear(dir, objectId, time, options)
380
463
{
381
464
        if (dir == 1)
382
465
        {
383
 
                if (effectType == SLIDETRANS_EFFECT)
384
 
                {
385
 
                        document.getElementById(objectId).style.display = "inherit";
386
 
                        document.getElementById(objectId).setAttribute("opacity",1);
387
 
                }
388
 
                else
389
 
                        document.getElementById(objectId).setAttribute("visibility","inherit");
 
466
                document.getElementById(objectId).style.display = "inherit";
 
467
                document.getElementById(objectId).setAttribute("opacity",1);
390
468
        }
391
469
        else if (dir == -1)
392
470
        {
393
 
                if (effectType == SLIDETRANS_EFFECT)
394
 
                {
395
 
                        document.getElementById(objectId).style.display = "none";
396
 
                        document.getElementById(objectId).setAttribute("opacity",0);
397
 
                }
398
 
                else
399
 
                        document.getElementById(objectId).setAttribute("visibility","hidden");
 
471
                document.getElementById(objectId).style.display = "none";
 
472
                document.getElementById(objectId).setAttribute("opacity",0);
400
473
        }
401
474
        return true;
402
475
}
403
476
 
404
 
function pop(dir, effectType, objectId, time, options)
 
477
function pop(dir, objectId, time, options)
405
478
{
406
479
        var length = 250;
407
 
 
408
 
        if (options && options["length"])
409
 
                length = options["length"];
410
 
 
411
 
        var fraction = time / length;
 
480
        var fraction;
 
481
 
 
482
        if ((time == STATE_END) || (time == STATE_START))
 
483
                fraction = 1;
 
484
        else
 
485
        {
 
486
                if (options && options["length"])
 
487
                        length = options["length"];
 
488
 
 
489
                fraction = time / length;
 
490
        }
412
491
 
413
492
        if (dir == 1)
414
493
        {
416
495
                {
417
496
                        document.getElementById(objectId).setAttribute("opacity", 0);
418
497
                        document.getElementById(objectId).setAttribute("transform", "scale(0)");
419
 
                        if (effectType == SLIDETRANS_EFFECT)
420
 
                                document.getElementById(objectId).style.display = "inherit";
421
 
                        else
422
 
                                document.getElementById(objectId).setAttribute("visibility", "inherit");
 
498
                        document.getElementById(objectId).style.display = "none";
423
499
                }
424
500
                else if (fraction >= 1)
425
501
                {
426
502
                        document.getElementById(objectId).setAttribute("opacity", 1);
427
503
                        document.getElementById(objectId).setAttribute("transform", "scale(1)");
 
504
                        document.getElementById(objectId).style.display = "inherit";
428
505
                        return true;
429
506
                }
430
507
                else
431
508
                {
 
509
                        document.getElementById(objectId).style.display = "inherit";
432
510
                        document.getElementById(objectId).setAttribute("opacity", fraction);
433
511
                        if (fraction < 0.9)
434
512
                                document.getElementById(objectId).setAttribute("transform", "scale(" + fraction / 0.9 * 1.2 + ")");
442
520
                {
443
521
                        document.getElementById(objectId).setAttribute("opacity", 1);
444
522
                        document.getElementById(objectId).setAttribute("transform", "scale(1)");
 
523
                        document.getElementById(objectId).style.display = "inherit";
445
524
                }
446
525
                else if (fraction >= 1)
447
526
                {
448
527
                        document.getElementById(objectId).setAttribute("opacity", 0);
449
 
                        //document.getElementById(objectId).setAttribute("transform", "scale(0)");
450
 
                        if (effectType == SLIDETRANS_EFFECT)
451
 
                                document.getElementById(objectId).style.display = "none";
452
 
                        else
453
 
                                document.getElementById(objectId).setAttribute("visibility", "hidden");
 
528
                        document.getElementById(objectId).setAttribute("transform", "scale(0)");
 
529
                        document.getElementById(objectId).style.display = "none";
454
530
                        return true;
455
531
                }
456
532
                else
457
533
                {
458
534
                        document.getElementById(objectId).setAttribute("opacity", 1 - fraction);
459
535
                        document.getElementById(objectId).setAttribute("transform", "scale(" + 1 - fraction + ")");
 
536
                        document.getElementById(objectId).style.display = "inherit";
460
537
                }
461
538
        }
462
539
        return false;
463
540
}
464
541
 
 
542
function setSlideToState(slide, state)
 
543
{
 
544
        if (slides[slide]["effects"])
 
545
        {       
 
546
                if (state == STATE_END)
 
547
                {
 
548
                        for (var counter = 0; counter < slides[slide]["effects"].length; counter++)
 
549
                        {
 
550
                                for (var subCounter = 0; subCounter < slides[slide]["effects"][counter].length; subCounter++)
 
551
                                {
 
552
                                        var effect = slides[slide]["effects"][counter][subCounter];
 
553
                                        if (effect["effect"] == "fade")
 
554
                                                fade(effect["dir"], effect["objectId"], STATE_END, effect["options"]);  
 
555
                                        else if (effect["effect"] == "appear")
 
556
                                                appear(effect["dir"], effect["objectId"], STATE_END, effect["options"]);        
 
557
                                        else if (effect["effect"] == "pop")
 
558
                                                pop(effect["dir"], effect["objectId"], STATE_END, effect["options"]);   
 
559
                                }
 
560
                        }
 
561
                }
 
562
                else if (state == STATE_START)
 
563
                {
 
564
                        for (var counter = slides[slide]["effects"].length - 1; counter >= 0; counter--)
 
565
                        {
 
566
                                for (var subCounter = 0; subCounter < slides[slide]["effects"][counter].length; subCounter++)
 
567
                                {
 
568
                                        var effect = slides[slide]["effects"][counter][subCounter];
 
569
                                        if (effect["effect"] == "fade")
 
570
                                                fade(parseInt(effect["dir"]) * -1, effect["objectId"], STATE_START, effect["options"]); 
 
571
                                        else if (effect["effect"] == "appear")
 
572
                                                appear(parseInt(effect["dir"]) * -1, effect["objectId"], STATE_START, effect["options"]);       
 
573
                                        else if (effect["effect"] == "pop")
 
574
                                                pop(parseInt(effect["dir"]) * -1, effect["objectId"], STATE_START, effect["options"]);  
 
575
                                }
 
576
                        }
 
577
                }
 
578
        }
 
579
}
 
580
 
465
581
function propStrToDict(str)
466
582
{
467
583
        var list = str.split(";");