OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
openproject/assets/javascripts/story.js

292 lines
7.9 KiB

/**************************************
STORY
***************************************/
RB.Story = RB.Object.create(RB.Model, {
initialize: function(el){
var j; // This ensures that we use a local 'j' variable, not a global one.
this.$ = j = $(el);
this.el = el;
// If node is based on #story_template, it doesn't have the story class yet
// The reason #story_template doesn't have the story class is because we don't
// want it accidentally included in $('.story') searches
j.addClass("story");
// Associate this object with the element for later retrieval
j.data('this', this);
// Observe click events in certain fields
j.find('.editable').live('mouseup', this.triggerEdit);
// Observe click event on any part of a story
j.bind('mouseup', this.handleSelect);
this.checkSubjectLength();
},
afterSaveEdits: function(){
},
cancelEdit: function(){
this.$.removeClass('editing');
this.checkSubjectLength();
if(this.isNew()){
this.$.hide('blind');
}
},
checkSubjectLength: function(){
if(this.$.find('div.subject').text().length>=60){
this.$.addClass('subject_over_sixty');
$("<div class='elipses'>...</div>").appendTo(this.$);
}else{
this.$.removeClass('subject_over_sixty');
}
},
close: function(){
this.$.addClass('closed');
},
edit: function(){
j = this.$;
j.addClass('editing');
j.find('.editable').each(function(index){
field = $(this);
fieldType = field.attr('fieldtype')!=null ? field.attr('fieldtype') : 'input';
fieldName = field.attr('fieldname');
input = j.find(fieldType + '.' + fieldName);
// Create the input element for the field if it does not yet exist
if(input.size()==0){
input = fieldType=='select' ? $('#' + fieldName + '_options').clone(true) : $(document.createElement(fieldType));
input.removeAttr('id');
input.attr('name', fieldName);
input.addClass(fieldName);
input.addClass('editor');
input.removeClass('template');
input.appendTo(j);
input.bind('keyup', j.data('this').handleKeyup);
input.focus(function(){ j.data('focus', $(this).attr('name')); }).blur(function(){ j.data('focus', ''); });
} else {
input = input.first();
}
// Copy the value in the field to the input element
value = ( fieldType=='select' ? field.children('.v').first().text() : field.text() );
input.val(value);
});
},
endEdit: function(){
this.$.removeClass('editing');
this.checkSubjectLength();
},
getID: function(){
return this.$.children('.id').children().first().text();
},
getParent: function(){
return this.$.parents('.backlog').first().data('this');
},
getPoints: function(){
points = parseInt(this.$.children('.story_points').text());
return ( isNaN(points) ? 0 : points );
},
handleKeyup: function(event){
j = $(this).parents('.story').first();
that = j.data('this');
switch(event.which){
case 13 : that.saveEdits(); // Enter
break;
case 27 : that.cancelEdit(); // ESC
break;
default : return true;
}
},
handleSelect: function(event){
var j = $(this);
var me = j.data('this');
if(!$(event.target).hasClass('editable') &&
!$(event.target).hasClass('checkbox') &&
!j.hasClass('editing') &&
!j.hasClass('dragging')){
me.setSelection(!me.isSelected());
}
},
isClosed: function(){
return this.$.hasClass('closed');
},
isNew: function(){
return this.$.children('.id').text()=="";
},
isSelected: function(){
var j = this.$;
var checkbox = j.find('.checkbox')
return checkbox.attr('checked');
},
markError: function(){
this.$.addClass('error');
},
markIfClosed: function(){
var j = this.$;
if(j.children("select.status_id").children(":selected").hasClass('closed')){
j.addClass('closed');
} else {
j.removeClass('closed');
}
},
markSaving: function(){
this.$.addClass('saving');
},
open: function(){
this.$.removeClass('closed');
},
refresh: function(obj){
this.$.html(obj.$.html());
if(obj.isClosed()){
this.close();
} else {
this.open();
}
},
// To be overriden by children objects such as RB.Task
saveDirectives: function(){
var j = this.$;
var prev = this.$.prev();
var sprint = this.$.parents('.backlog').hasClass('product') ? '' : this.$.parents('.backlog').data('this').getID();
var data = j.find('.editor').serialize() +
(this.isNew() ? "" : "&id=" + j.children('.id').text()) +
"&prev=" + (prev.length==1 ? this.$.prev().data('this').getID() : '') +
"&fixed_version_id=" + sprint;
var url = RB.urlFor[(this.isNew() ? 'create_story' : 'update_story')];
return {
url: url,
data: data
}
},
saveDragResult: function(){
if(!this.$.hasClass('editing')) this.saveEdits();
},
saveEdits: function(){
j = this.$;
var me = j.data('this');
editors = j.find('.editor');
// Copy the values from the fields to the proper html elements
editors.each(function(index){
editor = $(this);
fieldName = editor.attr('name');
if(this.type.match(/select/)){
j.children('div.' + fieldName).children('.v').text(editor.val())
j.children('div.' + fieldName).children('.t').text(editor.children(':selected').text());
// } else if(this.type.match(/textarea/)){
// this.setValue('div.' + fieldName + ' .textile', editors[ii].value);
// this.setValue('div.' + fieldName + ' .html', '-- will be displayed after save --');
} else {
j.children('div.' + fieldName).text(editor.val());
}
});
// Mark the story as closed if so
me.markIfClosed();
// Get the save directives. This should be overriden by descendant objects of RB.Story
var saveDir = this.saveDirectives();
// We will pop 'me' back when the the ajax call completes
// This is the only way to remember the RB.Story object since
// the story element doesn't have an ID yet.
if(RB.Story.newQueue==null) RB.Story.newQueue = [];
if(me.isNew()) RB.Story.newQueue.push(me);
me.markSaving();
RB.ajax({
type: "POST",
url: saveDir.url,
data: saveDir.data,
complete: (me.isNew() ? this.storyCreated : this.storyUpdated)
});
me.endEdit();
var sprint = j.parents('.sprint.backlog');
if(sprint.size()>0) sprint.data('this').recalcPoints();
this.afterSaveEdits();
},
setSelection: function(select){
this.$.find('.checkbox').attr('checked', select);
},
storyCreated: function(xhr, textStatus){
var me = RB.Story.newQueue.shift(); // Get the RB.Story object back
me.unmarkSaving();
if(xhr.status!=200){
me.markError();
} else {
var response = $(xhr.responseText);
me.$.find('.id').html(response.find('.id').html());
me.$.attr('id', response.attr('id'));
me.unmarkError();
}
},
storyUpdated: function(xhr, textStatus){
var me = $('#story_' + RB.Factory.initialize(RB.Story, xhr.responseText).getID()).data('this');
me.unmarkSaving();
if(xhr.status!=200){
me.markError();
} else {
me.unmarkError();
}
},
triggerEdit: function(event){
// Get the story since what was clicked was a field
var j = $(this).parents('.story').first();
if(!j.hasClass('editing') && !j.hasClass('dragging')){
j.data('this').edit();
// Focus on the input corresponding to the field clicked
j.find( '.' + $(event.currentTarget).attr('fieldname') + '.editor' ).focus();
}
},
unmarkError: function(){
this.$.removeClass('error');
},
unmarkSaving: function(){
this.$.removeClass('saving');
}
});