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
|
# File 'lib/puzzlize/action_view_helpers.rb', line 3
def puzzlize_javascript_and_css(puzzle)
droppable_function = puzzle.puzzle_pieces_names.collect do |name|
"$('#i-#{name}').draggable({helper:'original', handle:'.drag'});
$('#s-#{name} > .sensible').droppable({
accept: '#i-#{name}',
tolerance: 'intersect',
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function() {
$('#s-#{name}').addClass('s-#{name}');
$('#s-#{name}').addClass('encastrada');
$('#i-#{name}').remove();
}
});"
end.join(" ")
droppable_css = ""
image_urls = puzzle.puzzle_images_urls
puzzle.puzzle_pieces_names.each_with_index do |name, index|
droppable_css += ".s-#{name} {
background-image:url(#{image_urls[index]});
background-repeat:no-repeat;
background-position:center center;
}"
end
"<script type='text/javascript'>
// Javascript library made by:
// Fernando.com.ar
// http://www.fernando.com.ar/jquery-puzzle/index.php
$(document).ready(function(){
#{droppable_function}
});
</script>
<style type='text/css'>
#{droppable_css}
.drag{
width:#{puzzle.horizontal_piece_size}px;
height:#{puzzle.vertical_piece_size}px;
}
.sensible{
width:#{puzzle.horizontal_piece_size}px;
height:#{puzzle.vertical_piece_size}px;
border:0px solid red;
}
#canvas{
width:#{puzzle.image_width}px;
height:#{puzzle.image_height}px;
background-color:#A5A5A5;
float:left;
}
#canvasFinal{
width:#{puzzle.image_width}px;
height:#{puzzle.image_height}px;
background-image:url(#{ puzzle.default_puzzle_image_url});
background-repeat:no-repeat;
background-position:center center;
float:left;
position:absolute;
display:none;
z-index:9;
}
</style>".html_safe
end
|