Commit 8303a88d authored by gijs's avatar gijs

Started integration of the attachment into the interface

parent a6e73cd2
......@@ -85,11 +85,27 @@ window.W = window.W || {};
},
];
/**
* The queue stores a list of callbacks to be processed at a later time.
* Entries in the queue can have four states:
* unprocessed, processing, done, failed
*
* It is for now only used to handle the file uploads on a save.
*/
var Queue = function () {
this.queue = [];
this.states = { unprocessed: 0, processing: 1, done: 2, failed: 3 };
}
/**
* Adds an entry to the queue, the callback should expect two arguments, like
* a promise: accept and reject. Where accept should be called on succesfull
* excecution and reject when the action failed.
*
* @param {function} callback
* @param {*} id (unique) identifier, used on removing entries from the queue
*/
Queue.prototype.add = function (callback, id) {
this.queue.push({
id: id,
......@@ -98,10 +114,17 @@ window.W = window.W || {};
});
}
/**
* Returns unprocessed items from the queue
*/
Queue.prototype.unprocessed = function () {
return _.where(this.queue, { state: this.states.unprocessed });
};
/**
* Starts processing the queue
* @param {function} callback to be called when all items where processed
*/
Queue.prototype.process = function (callback) {
var unprocessed = this.unprocessed(),
ready = _.after(unprocessed.length, callback);
......@@ -117,6 +140,10 @@ window.W = window.W || {};
}, this);
};
/**
* Removes an entry with the given id from the queue
* @param {*} id identifier of the entry
*/
Queue.prototype.cancel = function (id) {
var key = _.findIndex(this.queue, { id: id });
if (key > -1) {
......@@ -126,13 +153,21 @@ window.W = window.W || {};
var queue = new Queue();
/**
* Creates attachment model and queues the upload
* To hace data on the model the file is directly read as a data url,
* this url is set on the model to be replaced with a proper URL once
* the model is created/stored on the server.
*
* @param {string} title name of the file / attachment
* @param {File} file file to upload
* @param {function} callback called when entry is succesfully excecuted
*/
function queuedAttachmentUpload(title, file, callback) {
var model = new W.AttachmentModel({
title: title,
});
// Implement read file to dataurl
var reader = new FileReader();
reader.addEventListener('load', function () {
if (!model.get('attachment')) {
......@@ -171,6 +206,11 @@ window.W = window.W || {};
return model;
}
/**
* Removes attachment model when queue is excecuted
* @param {BackboneModel} model model to remove
* @param {function} callback [optional] function to excecute when the model is removed
*/
function queuedAttachmentRemove(model, callback) {
queue.add((function (accept, reject) {
var success = function () {
......@@ -192,12 +232,22 @@ window.W = window.W || {};
}), model.cid);
}
/**
* Queued creation of the model on the server.
* @param {BackboneModel} model
* @param {function} callback
*/
function queuedAttachmentSave(model, callback) {
queue.add(function (accept, reject) {
model.save(model.pick('title'), {
success: accept,
success: function () {
if (callback) {
callback();
}
accept();
},
error: reject,
patch: true // necessary to only send the title chaneg on save
patch: true // necessary to only send the title change on save
});
}, model.cid);
}
......@@ -363,12 +413,10 @@ window.W = window.W || {};
e.stopImmediatePropagation();
}
var min = parseInt(this.ui.rangeMin.val());
var max = parseInt(this.ui.rangeMax.val());
var min = parseInt(this.ui.rangeMin.val()),
max = parseInt(this.ui.rangeMax.val());
if (max < min) {
this.ui.rangeMin.val(max);
}
this.ui.rangeMin.val(Math.min(min, max));
},
/**
......@@ -379,12 +427,10 @@ window.W = window.W || {};
e.stopImmediatePropagation();
}
var min = parseInt(this.ui.rangeMin.val());
var max = parseInt(this.ui.rangeMax.val());
var min = parseInt(this.ui.rangeMin.val()),
max = parseInt(this.ui.rangeMax.val());
if (min > max) {
this.ui.rangeMax.val(min);
}
this.ui.rangeMax.val(Math.max(min, max));
},
value: function () {
......@@ -476,6 +522,14 @@ window.W = window.W || {};
});
W.Attachment = Backbone.Marionette.View.extend({
template: '#attachment-template',
triggers: {
'click .btn-close': 'attachment:close'
}
});
/**
* Node editing form
*/
......@@ -752,6 +806,11 @@ window.W = window.W || {};
inlineTitleForm: {
el: '.axis-inline-title-form',
replaceElement: true
},
attachment: {
el: '.attachment-view',
replaceElement: true
}
},
......@@ -762,6 +821,7 @@ window.W = window.W || {};
'click [name="edit"]': 'toggleForm',
'click [name="add"]': 'addLine',
'click [name="delete"]': 'delete',
'click .btn-attachment': 'showAttachment',
'change #tag': 'editSiblings',
'relocate': 'relocate',
'relocateChild': 'relocateChild'
......@@ -771,7 +831,8 @@ window.W = window.W || {};
'form:submit': 'update',
'form:close': 'toggleForm',
'inlinetitleform:submit': 'updateTitle',
'inlinetitleform:close': 'closeInlineForm'
'inlinetitleform:close': 'closeInlineForm',
'attachment:close': 'hideAttachment'
},
childViewTriggers: {
......@@ -995,7 +1056,7 @@ window.W = window.W || {};
},
closeInlineForm: function () {
this.getRegion('inlineTitleForm').reset();
this.detachChildView('inlineTitleForm');
this.ui.titleSpan.show();
},
......@@ -1182,6 +1243,18 @@ window.W = window.W || {};
this.$el.attr("data-sublines", "true");
this.showChildView('tree', sublinesView);
}
},
showAttachment: function (e) {
if (e) {
e.preventDefault();
e.stopImmediatePropagation();
}
this.showChildView('attachment', (new W.Attachment({model: this.model.get('attachment')} )));
},
hideAttachment: function() {
this.detachChildView('attachment');
}
});
......
......@@ -19,6 +19,10 @@
{% include "playground/underscore/about.mtpl" %}
</script>
<script id="attachment-template" type="text/template">
{% include "playground/underscore/attachment.mtpl" %}
</script>
<script id="base-template" type="text/template">
{% include "playground/underscore/base.mtpl" %}
</script>
......
<a class="btn-close" href="#close">x</a>
<h6><%= title %></h6>
<img src="<%= attachment %>" />
\ No newline at end of file
......@@ -102,7 +102,12 @@
<% } %>
</span> -->
</span>
<% if (attachment) { %>
<section class="attachment">
<a class="btn-attachment" href="#attachment">📎</a>
<div class="attachment-view"></div>
</section>
<% } %>
<section class="axis-actions">
<button name="edit" title="Modifier cet axe">éditer</button>
<button name="add" title="Ajoute un sous-axe">+</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment