-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (151 loc) · 5.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="./counter.js"></script>
<script type="text/javascript">
/*
(function($){
$.fn.counter = function() {
var cnt = 0;
var counter = function(){};
return function(){
$(this)
};
this.hover(
function() { $(this).toggleClass(c); }
);
};
})(jQuery);*/
// creamos un array vacio
localStorage["ranking"] = JSON.stringify([]);
$(document).ready(function() {
// creamos una instancia :D
var counter = createCounter($("#displayCounter"));
$("#start_counter").click(function(e){
console.log("start");
counter.start();
});
$("#stop_counter").click(function(e){
console.log("stop");
counter.stop(true);
});
$("#showResults").click(function(e){
var diplay = $("#displayResult");
console.log("show");
diplay.html("");
var str = localStorage["ranking"];
var ranking = JSON.parse(str);
console.log(ranking);
for (var i=0; i < ranking.length; i++){
diplay.append("<p> user: " + ranking[i].user +"<br/>tiempo: " + ranking[i].time + "</p>" );
}
});
});
</script>
<script type="text/javascript">
// http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
// hojas de margarita
//
$(function() {
rotate($("#leaf_daisy"), 10);
// TODO: para que funcione http://stackoverflow.com/questions/1108480/svg-draggable-using-jquery-and-jquery-svg
$( ".hoja" ).draggable();
// evento para empezar
$( ".hoja" ).bind( "dragstart", function(event, ui) {
console.log("start dragable para la hoja");
// comenzamos un counter y cuando acabe lo hacemos
// desaparecer
// a los 3 segundos lo hacemos desaparecer
// TODO: añadir control: si no arrastra durante dos segundos: que vuelva a su posición
// original
var time = 2;
var self = this;
var counter = setInterval(function() {
if ( time < 0){
console.log("se acabo el drag para el elemento:")
console.log(self);
clearInterval(counter);
// ejecutamos el desaparecer de la hoja
// no funciona:
$(self).fadeOut('slow', function() {
// Animation complete.
// TODO: añadir al contador de hojas, para que cuando
// se quiten todas, pare el tiempo.
console.log("fadeout complete");
});
// este si funciona!
//fade($(self));
}
else{
time--;
}
}, 1000);
});
});
// fade para svg
// http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
// TODO: añadir callback de eventos como oncomplete.
function fade (target) {
// create the fade animation
var animation = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
animation.setAttributeNS(null, 'attributeName', 'fill-opacity');
animation.setAttributeNS(null, 'begin', 'indefinite');
animation.setAttributeNS(null, 'to', 0);
animation.setAttributeNS(null, 'dur', 0.25);
animation.setAttributeNS(null, 'fill', 'freeze');
var animationStroke = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
animationStroke.setAttributeNS(null, 'attributeName', 'stroke-opacity');
animationStroke.setAttributeNS(null, 'begin', 'indefinite');
animationStroke.setAttributeNS(null, 'to', 0);
animationStroke.setAttributeNS(null, 'dur', 0.25);
animationStroke.setAttributeNS(null, 'fill', 'freeze');
// link the animation to the target
target.append(animation);
target.append(animationStroke);
// start the animation
animation.beginElement();
animationStroke.beginElement();
}
/**
*
*/
function rotate(target, grade) {
// 50 y 50 es el x e y desde donde se quiere rotar relativo al elemento
// TODO: calcular este x e y automáticamente
target.attr("transform", "rotate(" + grade + " 50 50)");
}
</script>
<style type="text/css">
#displayCounter{
font-size:42px;
font-family:Georgia;
}
</style>
</head>
<body>
<a id="start_counter" href="#">Empezar</a>
<a id="stop_counter" href="#">Stop</a>
<div class="margarita">
<div class="hoja">
<p>Drag me around</p>
</div>
<svg id="draw" height="400" xmlns="http://www.w3.org/2000/svg">
<circle id="core_daisy" cx="50" cy="50" stroke="#000000" r="50" stroke-width="2" fill="yellow" stroke-opacity="1"/>
<path fill="#FF0000" stroke="#000000" stroke-width="2"
stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null"
style="pointer-events:inherit"
d="M349,231.72269C407.66666,207.81512 453.33334,167.90756 525,160C634.69006,162 622.38013,284 517.07019,280C451.04678,275.90756 405.02341,247.81512 349,231.72269z"
id="leaf_daisy" fill-opacity="1" stroke-opacity="1">
</path>
</svg>
</div><!-- End demo -->
<a id="showResults" href="#">Mostrar tiempos</a>
<div id="displayCounter"></div>
<div id="displayResult"></div>
</body>
</html>