define(["jquery", "underscore", "backbone", "localforage", "clipboard", "text!templates/draftsTemplate.html"],
function($, _, Backbone, LocalForage, Clipboard, draftsTemplate){
/**
* @class DraftsView
* @classdesc A view that lists the local submission drafts for this user
* @classcategory Views
*/
var view = Backbone.View.extend(
/** @lends DraftsView.prototype */{
type: "DraftsView",
el: "#Content",
className: "div",
template: _.template(draftsTemplate),
initialize: function() {
return this;
},
render: function() {
var view = this;
var drafts = [];
LocalForage.iterate(function(value, key, iterationNumber) {
// Extract each draft
drafts.push({
key: key,
value: value,
fileName: (typeof value.title === "string") ?
value.title.substr(0, 50).replace(/[^a-zA-Z0-9_]/, "_") : "draft",
friendlyTimeDiff: view.friendlyTimeDiff(value.datetime)
});
}).then(function(){
// Sort by datetime
drafts = _.sortBy(drafts, function(draft) {
return draft.value.datetime.toString();
}).reverse();
}).then(function() {
// Render
view.$el.html(
view.template({
drafts: drafts
})
);
// Insert downloadables
view.insertDownloadables();
// Insert copiables
view.insertCopiables();
}).catch(function(err) {
console.log(err);
view.$el.html("<div>There was an error listing drafts.</div>");
});
return this;
},
/** Attach a click handler for download buttons that triggers a draft
* or all drafts to be downloaded
*/
insertDownloadables: function() {
var view = this;
// Build handlers for single downloaders
_.each(this.$el.find(".draft-download"), function(el) {
var a = $(el).find("a.download");
var text = $(el).find("textarea")[0].value;
var fileName = a.data("filename") || "draft.xml";
$(a).on("click", view.createDownloader(text, fileName));
});
// Build handler for Download All button
this.$el.find(".download-all").on("click", this.createDownloadAll());
},
/** Creates a function for use as an event handler in insertDownloadables
* that creates a closure around the content (text) and filename and
* causes the browser to download the draft when clicked
*/
createDownloader: function(text, fileName) {
return function() {
var blob = new Blob([text], { type: "application/xml" })
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none;";
a.href = url;
a.download = fileName;
a.click();
a.remove();
}
},
createDownloadAll: function() {
var drafts = [];
_.each(this.$el.find("textarea"), function(textarea) {
drafts.push(textarea.value);
});
var doc = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<drafts>\n" +
_.map(drafts, function(draft) {
return "\t<draft>\n\t\t" +
draft +
"\n\t</draft>\n"
}).join("") +
"</drafts>";
return function() {
var blob = new Blob([doc], { type: "application/xml" })
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none;";
a.href = url;
a.download = "drafts.xml";
a.click();
a.remove();
}
},
insertCopiables: function() {
var copiables = $(".copy-to-clipboard");
_.each(copiables, function(copiable, i) {
var clipboard = new Clipboard(copiable,
{
text: function(trigger) {
return $("#draft-" + i).text()
}
});
clipboard.on("success", function(e) {
var el = $(e.trigger);
$(el).html( $(document.createElement("span")).addClass("icon icon-ok success") );
// Use setTimeout instead of jQuery's built-in Events system because
// it didn't look flexible enough to allow me update innerHTML in
// a chain
setTimeout(function() {
$(el).html('<i class="icon icon-copy"></i> Copy to Clipboard');
}, 500)
});
});
},
/**
* Formats a time difference, in milliseconds, in a human-friendly way
* @param {string} datetime: A datetime as a string which needs to be
* parsed before working with
*/
friendlyTimeDiff: function(datetime) {
var friendly,
now = new Date(),
then = new Date(datetime),
diff = now - then;
// Fall through from largest to smallest, finding the largest unit
// that describes the difference with a unit value of one or greater
if (diff > 2678400000) {
friendly = {
value: Math.round(diff / 2678400000) ,
unit: "month"
}
} else if (diff > 604800000) {
friendly = {
value: Math.round(diff / 604800000),
unit: "week"
}
} else if (diff > 86400000) {
friendly = {
value: Math.round(diff / 86400000),
unit: "day"
}
} else if (diff > 3600000) {
friendly = {
value: Math.round(diff / 3600000),
unit: "hour"
}
} else if (diff > 60000) {
friendly = {
value: Math.round(diff / 60000),
unit: "minute"
}
} else if (diff > 1000) {
friendly = {
value: Math.round(diff / 1000),
unit: "second"
}
} else {
// Shortcircuit if really small and return...
return "just now";
}
// Pluralize
if (friendly.value !== 1) {
friendly.unit = friendly.unit + "s"
}
return friendly.value + " " + friendly.unit + " ago";
}
})
return view;
});