******************************************** 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 %}
======================
No comments:
Post a Comment