Add i18n support to form saving code (#52)

This commit is contained in:
Anna Sidwell 2018-04-16 10:52:18 +10:00
parent 4390edde03
commit 054668e1e8

View File

@ -46,15 +46,18 @@
{% block inner %}
<div class="draftprompt alert alert-info">
<div>
<b class="lead">You have a saved draft.</b>
<p>Do you want to restore it? Restoring the draft will overwrite any other data you have input into the form below.</p>
<b class="lead">{% trans "You have a saved draft." %}</b>
<p>{% trans "Do you want to restore it? Restoring the draft will overwrite any other data you have input into the form below." %}</p>
</div>
<button class="draftprompt--restore btn btn-success">Restore draft</button>
<button class="draftprompt--delete btn btn-default">Delete draft</button>
<button class="draftprompt--restore btn btn-success">{% trans "Restore draft" %}</button>
<button class="draftprompt--delete btn btn-default">{% trans "Delete draft" %}</button>
<span class="draftprompt--details"></span>
</div>
<div class="savebutton"></div>
<div class="savebutton" style="display: none">
<button class="savebutton--button btn btn-success">{% trans "Save" %}</button>
<i class="savebutton--icon"></i> <span class="savebutton--details"></span>
</div>
<input type="hidden" id="form_errors" value="{% if form.errors %}true{% else %}false{% endif %}">
@ -301,9 +304,7 @@ class SaveButton {
constructor(div) {
this.root = div
this.root.className = "savebutton"
this.root.innerHTML =
'<button class="savebutton--button btn btn-success">Save</button>' +
'<i class="savebutton--icon"></i> <span class="savebutton--details"></span>'
this.root.style.display = "block"
this.element = {
root: this.root,
@ -331,21 +332,21 @@ class SaveButton {
switchStateUnsaved() {
this.changeState({
detailsText: "You have unsaved changes. Click here to save a draft, which you can access next time you are here."
detailsText: "{% trans "You have unsaved changes. Click here to save a draft, which you can access next time you are here." %}"
})
}
switchStateSaving() {
this.changeState({
buttonText: "Saving...",
buttonText: "{% trans "Saving..." %}",
iconClasses: "fa fa-spinner fa-spin"
})
}
switchStateSaveSuccess() {
this.changeState({
buttonText: "Saved",
detailsText: "Saved successfully.",
buttonText: "{% trans "Saved" %}",
detailsText: "{% trans "Saved successfully." %}",
iconClasses: "fa fa-check",
buttonClickable: false
})
@ -353,7 +354,7 @@ class SaveButton {
switchStateSaveFailed(reason = "") {
this.changeState({
detailsText: "Save failed! " + reason,
detailsText: "{% trans "Save failed! " %}" + reason,
iconClasses: "fa fa-exclamation-triangle savebutton--icon-failed"
})
}
@ -381,7 +382,7 @@ class DraftPrompt {
// Delete button will delete the draft
this.element.delete.addEventListener('click', () => {
if (window.confirm('Are you sure you want to delete your draft?')) {
if (window.confirm("{% trans 'Are you sure you want to delete your draft?' %}")) {
this.switchStateDeleting()
this.deleteDraft().then(ok => ok ?
this.switchStateHidden() :
@ -420,7 +421,7 @@ class DraftPrompt {
switchStateDeleteFailed() {
this.changeState({
details: 'Delete failed!'
details: '{% trans "Delete failed!" %}'
})
}
}