Commit a1ba4d22 authored by gijs's avatar gijs

Added form for score meta-data

parent 81677018
......@@ -18,6 +18,7 @@ body {
header {
position: relative;
flex: 1;
padding-left: 2em;
}
......@@ -400,4 +401,31 @@ textarea {
section.hidden {
display: none;
}
.score-actions {
margin-top: 2em;
margin-bottom: 1em;
padding-top: 1em;
border-top: 2px solid black;
}
.score-actions button {
margin: .25em;
}
.score-form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background:rgba(255,255,255,.95);
z-index: 1;
padding: 2em;
}
.score-form .label-text {
display: block;
}
\ No newline at end of file
......@@ -9,8 +9,15 @@ window.W = window.W || {};
W.ScoreModel = Backbone.RelationalModel.extend({
defaults: {
title: "Untitled",
mainline: {},
stage_set: "Here comes the initial set",
mainline: {}
setting: '',
author: '',
performers: '',
duration: '',
creation: Date.now(),
genre: '',
tags: '',
},
urlRoot: '/api/scores/',
......
......@@ -376,6 +376,7 @@ window.W = window.W || {};
/**
* Adapter function between old and new boucle field
* temporary
*/
getBoucle: function () {
const boucle = this.model.get('boucle');
......@@ -407,6 +408,7 @@ window.W = window.W || {};
/**
* Adapter function between old and new alternative field
* temporary
*/
getAlternative: function () {
const alternative = this.model.get('alternative');
......@@ -659,27 +661,109 @@ window.W = window.W || {};
});
W.ScoreForm = Backbone.Marionette.View.extend({
template: '#score-template-form',
tagName: 'form',
className: 'score-form',
ui: {
'submit': '[data-name="submit"]',
'close': '[data-name="close"]',
},
events: {
'click @ui.submit': 'submit'
},
triggers: {
'click @ui.close': 'form:close'
},
/**
* Return input field with name
*/
field: function (name) {
return this.$el.find('[name="' + name + '"]');
},
/**
* Return value for field with name.
* Integer fields are converted to numbers
* All other fields are trimmed.
*/
fieldVal: function (name) {
const field = this.field(name);
if (!field) {
consoles.warn("Can't find field " + name);
} else {
if (!field.prop('disabled')) {
const value = field.val();
if (field.attr('type') == 'number') {
return parseInt(value);
} else if (value) {
return value.trim();
} else {
return null;
}
}
}
return null;
},
submit: function (e) {
e.stopImmediatePropagation();
e.preventDefault();
// Todo: merge boucle and alternative into one value / datatype:
// null | [number, number]
const data = {
title: this.fieldVal('title'),
stage_set: this.fieldVal('stage_set'),
author: this.fieldVal('author'),
performers: this.fieldVal('performers'),
duration: this.fieldVal('duration'),
genre: this.fieldVal('genre'),
};
this.trigger('form:submit', data);
}
});
W.ScoreView = Backbone.Marionette.View.extend({
// Conditionnal rendering according we are in edit mode or not
template: '#score-template-vue',
regions: {
firstRegion: 'ol'
firstRegion: 'ol',
form: {
el: 'form',
replaceElement: true
}
},
ui: {
'save': '.save'
'save': '.save',
'edit': '.edit'
},
events: {
'click @ui.save': 'save',
'click @ui.edit': 'toggleForm',
'click .delete': 'delete',
'click .duplicate': 'duplicate',
'click .unfold': 'unfold',
},
childViewEvents: {
'change': 'childChange'
'change': 'childChange',
'form:close': 'toggleForm',
'form:submit': 'update'
},
templateContext: function () {
......@@ -688,6 +772,30 @@ window.W = window.W || {};
};
},
toggleForm: function (e) {
if (e && e.stopImmediatePropagation) {
e.stopImmediatePropagation();
}
let form = this.getChildView('form');
if (form) {
this.getRegion('form').reset();
} else {
form = new W.ScoreForm({ model: this.model });
this.showChildView('form', form);
}
},
update: function (data) {
if (this.model.changedAttributes(data)) {
this.childChange();
this.model.set(data);
} else {
this.toggleForm();
}
},
childChange: function () {
this.ui.save.prop('disabled', false);
this.hasChanges = true;
......@@ -787,6 +895,7 @@ window.W = window.W || {};
initialize: function () {
this.hasChanges = false;
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'sync', this.render);
$(window).on('beforeunload', (function (e) {
......
......@@ -31,6 +31,10 @@
{% include "playground/underscore/score-vue.mtpl" %}
</script>
<script id="score-template-form" type="text/template">
{% include "playground/underscore/score-form.mtpl" %}
</script>
<script id="node-template" type="text/template">
{% include "playground/underscore/node.mtpl" %}
</script>
......
<!-- Title -->
<label>
<span class="label-text">Titre:</span>
<input type="text" name="title" value="<%= title %>">
</label>
<!-- description
<label>
<span class="label-text">Présentation: </span>
<textarea name="description">< %= description %></textarea>
</label> -->
<!-- Setting -->
<label>
<span class="label-text">Mise:</span>
<textarea name="stage_set"><%= stage_set %></textarea>
</label>
<!-- Author
<label>
<span class="label-text">Auteur</span>
<input type="text" name="author" value="< %= author %>">
</label> -->
<!-- Duration --
<label>
<span class="label-text">Durée</span>
<input type="text" name="duration" value="< %= duration %>">
</label> -->
<!-- Genre --
<label>
<span class="label-text">Genre: </span>
<input type="text" name="genre" value="< %= genre %>">
</label> -->
<button data-name="close">Annuler</button>
<button data-name="submit">OK</button>
\ No newline at end of file
<header>
<button class="edit">🖉</button>
<div class="home"><a href="../../">index</a></div>
<h1 id="title"><%- title %></h1>
<div id="stage_set">
<%= stage_set %>
</div>
<div class="author"><%= author %></div>
<div class="score-actions">
<button class="unfold">Tout déplier</button>
<button class="save" data-label-progress="Saving..." data-label="Enregistrer" <% if (!hasChanges) { %>disabled<% } %>>Enregistrer</button>
<button class="duplicate">Dupliquer</button>
<button class="delete">Supprimer</button>
<div class="choix_mode">
</div>
<div>
<form></form>
</header>
<ol></ol>
<header>
<div class="home"><a href="../../">index</a></div>
<h1 contenteditable="true" id="title"><%- title %></h1>
<div contenteditable="true" id="stage_set">
<h1 id="title"><%- title %></h1>
<div id="stage_set">
<%= stage_set %>
</div>
<div class="author">
<%= author %>
</div>
<button class="save">Enregistrer</button>
<button class="delete">Supprimer</button>
<button class="duplicate">Dupliquer</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