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
| $(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var tmp;
$('.note').each(function(){
/* Finding the biggest z-index value of the notes */
tmp = $(this).css('z-index');
if(tmp>zIndex) zIndex = tmp;
})
/* A helper function for converting a set of elements to draggables: */
make_draggable($('.note'));
/* Configuring the fancybox plugin for the "Add a note" button: */
$("#addButton").fancybox({
'zoomSpeedIn' : 60,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'hideOnContentClick': false,
'padding' : 15
});
/* Listening for keyup events on fields of the "Add a note" form: */
$('.pr-body,.pr-author').live('keyup',function(e){
if(!this.preview)
this.preview=$('#fancy_ajax .note');
/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
});
/* Changing the color of the preview note: */
$('.color').live('click',function(){
$('#fancy_ajax .note').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));
});
/* The submit button: */
$('#note-submit').live('click',function(e){
if($('.pr-body').val().length<4)
{
alert("The note text is too short!")
return false;
}
if($('.pr-author').val().length<1)
{
alert("You haven't entered your name!")
return false;
}
$(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');
var data = {
'zindex' : ++zIndex,
'body' : $('.pr-body').val(),
'author' : $('.pr-author').val(),
'color' : $.trim($('#fancy_ajax .note').attr('class').replace('note',''))
};
/* Sending an AJAX POST request: */
$.post('ajax/post.php',data,function(msg){
if(parseInt(msg))
{
/* msg contains the ID of the note, assigned by MySQL's auto increment: */
var tmp = $('#fancy_ajax .note').clone();
tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});
tmp.appendTo($('#main'));
make_draggable(tmp)
}
$("#addButton").fancybox.close();
});
e.preventDefault();
})
$('.note-form').live('submit',function(e){e.preventDefault();});
});
var zIndex = 0;
function make_draggable(elements)
{
/* Elements is a jquery object: */
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
/* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
$.get('ajax/update_position.php',{
x : ui.position.left,
y : ui.position.top,
z : zIndex,
id : parseInt(ui.helper.find('span.data').html())
});
}
});
}
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
this.bind("touchend", end);
};
$(".draggable").draggable(); |
