mootools inject

******************************************** mootool inject 1

====================== js

var Milestone = new Class({
initialize: function(el) {
this.element = $(el);
// console.log(this.element)
this.checkbox = this.element.getElement('.is-completed');
// console.log("ccc",this.checkbox);
if (this.checkbox != null) {
this.checkbox.addEvent('click',this.submit.bindWithEvent(this));
this.url = this.element.getElement('a.hidden-link').get('href');
this.element.getElement('.title').addEvent('mouseover',this.operationShow.bindWithEvent(this));
this.element.getElement('.title').addEvent('mouseout',this.operationHide.bindWithEvent(this));
this.request = new Request({ url: this.url});
this.request.addEvent('success', this.success.bind(this));
}
},


submit: function(ev) {
ev.stop();
this.element.getElement('.request-progress').setStyle('display','');
this.request.post({value:this.checkbox.checked});
},


success: function(response) {
if (this.checkbox.checked == true) {
this.checkbox.checked = false;
}else {
this.checkbox.checked = true;
}
this.element.getElement('.request-progress').setStyle('display','none');

var d = new Element('div', { 'html': response });
var l = d.getElement('.late-block');
var u = d.getElement('.upcoming-block');
var c = d.getElement('.completed-block');
var late = l.getElement('.inner-block');
var upcoming = u.getElement('.inner-block');
var completed = c.getElement('.inner-block');

completed.inject(document.getElement('.completed-block'));
document.getElement('.completed-block').getElement('.inner-block').dispose();
late.inject(document.getElement('.late-block'));
document.getElement('.late-block').getElement('.inner-block').dispose();
upcoming.inject(document.getElement('.upcoming-block'));
document.getElement('.upcoming-block').getElement('.inner-block').dispose();

$$('.milestone',d).each(function(el) {
var x = new Milestone(el);
});

},

operationShow: function(ev) {
ev.stop();
this.element.getElement('.operations').setStyles({display:'block'});
},

operationHide: function(ev) {
ev.stop();
var e = this.element.getElement('.operations');
e.setStyle.delay(2500, e, ['display','none']);
}

});


window.addEvent('domready', function() {
$$('.milestone').each(function(el) {
var x = new Milestone(el);
});
});


====================== Template

{% extends "siren/base_project.html" %}
{% load siren %}
{% load humanize %}

{% block title %}List Milestone{% endblock %}

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="/media/css/milestone.css" />
<script type="text/javascript" src="/media/js/milestone.js"></script>
{% endblock %}

{% block content %}
<div class="title-block">
<h1>Milestones</h1><span class="date">(Today is {% now "jS F" %})</span>
<a href="{% url milestone_add project.id %}">New Milestone</a>
<br class="clear"/>
</div>

<div class="late-block">
<div class="inner-block">
{% if late_milestones %}
<h4>Late Milestones</h4>
{% for milestone in late_milestones %}
<span class="late-days">{{ milestone.due_date|num_days }} days late</span>
<span class="created-on">({{milestone.created_on|naturalday:"d M Y"|capfirst}})</span>
<span class="created-by">{{milestone.created_by}}</span>
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
{% endif %}
</div>
</div>


<div class="upcoming-block">
<div class="inner-block">
{% if milestones %}
<h4>Upcoming Milestones</h4>
{% for milestone in milestones %}
<span class="created-on">({{milestone.created_on|naturalday:"d M Y"|capfirst}})</span>
<span class="created-by">{{milestone.created_by}}</span>
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
{% endif %}
</div>
</div>


<div class="completed-block">
<div class="inner-block">
{% if completed_milestones %}
<h4>Completed Milestones</h4>
{% for milestone in completed_milestones %}
<span class="created-on">({{milestone.created_on|naturalday:"d M Y"|capfirst}})</span>
<span class="created-by">{{milestone.created_by}}</span>
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
{% endif %}
</div>
</div>


{% endblock %}

{% block rightsidebar %}<!--
<div class="current-time">{% now "M d, Y h:i A" %}</div>-->
{% endblock %}

======================

******************************************** mootool inject 2

var Milestone = new Class({
initialize: function(el) {
this.element = $(el);
// console.log(this.element)
this.checkbox = this.element.getElement('.is-completed');
// console.log("ccc",this.checkbox);
if (this.checkbox != null) {
this.checkbox.addEvent('click',this.submit.bindWithEvent(this));
this.url = this.element.getElement('a.hidden-link').get('href');
this.element.getElement('.title').addEvent('mouseover',this.operationShow.bindWithEvent(this));
this.element.getElement('.title').addEvent('mouseout',this.operationHide.bindWithEvent(this));
this.request = new Request({ url: this.url});
this.request.addEvent('success', this.success.bind(this));
}
},


submit: function(ev) {
ev.stop();
this.element.getElement('.request-progress').setStyle('display','');
this.request.post({value:this.checkbox.checked});
},


success: function(response) {
if (this.checkbox.checked == true) {
this.checkbox.checked = false;
}else {
this.checkbox.checked = true;
}
this.element.getElement('.request-progress').setStyle('display','none');

var d = new Element('div', { 'html': response });
var l = d.getElement('.late-block');
var u = d.getElement('.upcoming-block');
var c = d.getElement('.completed-block');

document.getElement('.late-block').dispose();
l.inject(document.getElement('.main-block'), 'bottom');
document.getElement('.upcoming-block').dispose();
u.inject(document.getElement('.main-block'), 'bottom');
document.getElement('.completed-block').dispose();
c.inject(document.getElement('.main-block'), 'bottom');

$$('.milestone').each(function(el) {
var x = new Milestone(el);
});

},

operationShow: function(ev) {
ev.stop();
this.element.getElement('.operations').setStyles({display:'block'});
},

operationHide: function(ev) {
ev.stop();
var e = this.element.getElement('.operations');
e.setStyle.delay(2500, e, ['display','none']);
}

});


window.addEvent('domready', function() {
$$('.milestone').each(function(el) {
var x = new Milestone(el);
});
});


======================


{% extends "siren/base_project.html" %}
{% load siren %}
{% load humanize %}

{% block title %}List Milestone{% endblock %}

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="/media/css/milestone.css" />
<script type="text/javascript" src="/media/js/milestone.js"></script>
{% endblock %}

{% block content %}
<div class="title-block">
<h1>Milestones</h1><span class="date">(Today is {% now "jS F" %})</span>
<a href="{% url milestone_add project.id %}">New Milestone</a>
<br class="clear"/>
</div>

<div class="main-block">
<div class="late-block">
<div class="inner-block">
{% if late_milestones %}
<h4>Late Milestones</h4>
{% for milestone in late_milestones %}
<span class="late-days">{{ milestone.due_date|num_days }} days late</span>
<span class="created-on">({{milestone.created_on|naturalday:"d M Y"|capfirst}})</span>
<span class="created-by">{{milestone.created_by}}</span>
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
{% endif %}
</div>
</div>


<div class="upcoming-block">
<div class="inner-block">
{% if milestones %}
<h4>Upcoming Milestones</h4>
{% for milestone in milestones %}
<span class="created-on">({{milestone.created_on|naturalday:"d M Y"|capfirst}})</span>
<span class="created-by">{{milestone.created_by}}</span>
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
{% endif %}
</div>
</div>


<div class="completed-block">
<div class="inner-block">
{% if completed_milestones %}
<h4>Completed Milestones</h4>
{% for milestone in completed_milestones %}
<span class="created-on">({{milestone.created_on|naturalday:"d M Y"|capfirst}})</span>
<span class="created-by">{{milestone.created_by}}</span>
{% include "siren/milestone/milestone_fragment.html" %}
{% endfor %}
{% endif %}
</div>
</div>
<div>

{% endblock %}

{% block rightsidebar %}<!--
<div class="current-time">{% now "M d, Y h:i A" %}</div>-->
{% endblock %}


======================

Timer Stopwatch using Mootools Django Ajax

***************************************

<script type="text/javascript">

var timerFunction = function(){

console.log(this.hour, this.minute);

var second = this.second++;

if(this.second == 60) {

this.second=0;

this.minute++;

}

if(this.minute == 60) {

this.minute=0;

this.hour++;

}

var currentTime = this.hour+':'+this.minute+':'+this.second;

this.field.set('text', currentTime);

}

window.addEvent('domready', function() {

$$('.timer_start').addEvent('click', function(){

var task_id = this.getParent('.task').get('rel');

var time = this.getParent('.task').getElement('.actual_time span').get('text');

// var myRequest = new Request({url: '{% url timer %}'}).send();

// console.log('dddd',this,task_id,time);

var x = time.split(':');

var hour = x[0].toInt();

var minute = x[1].toInt();

console.log(hour,minute);

var currentCounter = new Hash({

second: 0,

minute: minute,

hour: hour,

field: this.getParent('.task').getElement('.actual_time span')

});

var simpleTimer = timerFunction.periodical(1000, currentCounter);

// $clear(simpleTimer);

return false;

});

});

</script>

{% block content %}

<h3> PROJECT DETAILS </h3>

<h4> Proje Name: {{ project.name }}</h4>

Estinated Time : {{ project.estimated_time}}

<p>

<a href="{% url task_add project.id %}"> Add Task </a>

</p>

<h3> TASKS </h3>

{% for task in project.tasks %}

<div class="task" rel="{{ task.id }}">

<h4> Task : {{ task.task_name}} </h4>

<p> Estimated time: {{ task.estimated_time }} </p>

<p class="actual_time"> Actual Time: <span>{{ task.actual_time }}</span></p>

<p>

<a href="{% url task_edit task.project_id task.id %}">Edit</a>

<a href="{% url task_delete task.project_id task.id %}"> Delete </a>

<input type="submit" value="Start" class="timer_start" />

</p>

</div>

{% endfor %}

{% endblock %}

***************************************

Mootools in Django Introduction

**************************************
MooTools
========
--------------------------example-1
window.addEvent('domready', function() {


});

* This is needed for the working of MooTool.

-------------------------- example -2

<script type="text/javascript" src="/media/js/mootools-1.2.4-core-nc.js"></script>

<script type="text/javascript">

window.addEvent('domready', function() {

$('timer').addEvent('click', function(){
alert('clicked!');
});

});
</script>

-------------------------- example -3
Timer Stopwatch using Mootool Django Ajax

<script type="text/javascript">

var timerFunction = function(){
console.log(this.hour, this.minute);
var second = this.second++;
if(this.second == 60) {
this.second=0;
this.minute++;
}
if(this.minute == 60) {
this.minute=0;
this.hour++;
}

var currentTime = this.hour+':'+this.minute+':'+this.second;
this.field.set('text', currentTime);
}




window.addEvent('domready', function() {




$$('.timer_start').addEvent('click', function(){

var task_id = this.getParent('.task').get('rel');
var time = this.getParent('.task').getElement('.actual_time span').get('text');

// var myRequest = new Request({url: '{% url timer %}'}).send();
// console.log('dddd',this,task_id,time);
var x = time.split(':');
var hour = x[0].toInt();
var minute = x[1].toInt();
console.log(hour,minute);
var currentCounter = new Hash({
second: 0,
minute: minute,
hour: hour,
field: this.getParent('.task').getElement('.actual_time span')
});
var simpleTimer = timerFunction.periodical(1000, currentCounter);
// $clear(simpleTimer);
return false;
});

});
</script>



{% block content %}

<h3> PROJECT DETAILS </h3>
<h4> Proje Name: {{ project.name }}</h4>
Estinated Time : {{ project.estimated_time}}
<p>
<a href="{% url task_add project.id %}"> Add Task </a>
</p>

<h3> TASKS </h3>

{% for task in project.tasks %}
<div class="task" rel="{{ task.id }}">
<h4> Task : {{ task.task_name}} </h4>
<p> Estimated time: {{ task.estimated_time }} </p>
<p class="actual_time"> Actual Time: <span>{{ task.actual_time }}</span></p>
<p>
<a href="{% url task_edit task.project_id task.id %}">Edit</a>
<a href="{% url task_delete task.project_id task.id %}"> Delete </a>
<input type="submit" value="Start" class="timer_start" />
</p>
</div>
{% endfor %}

{% endblock %}


--------------------------

**************************************
AJAX using Mootool Django
--------------------------------------
<script type="text/javascript">
window.addEvent('domready', function() {

$('timer_start').addEvent('click', function(){
var myRequest = new Request({url: '{% url timer %}'}).send('name=saju');
alert (myRequest);
return false;
});


$('timer_stop').addEvent('click', function(){

return false;
});

});
</script>



def timer(request):
print request.POST['name']
return HttpResponse('Timer test')


--------------------------------

**************************************


**************************************