Change placeholder depending on metacategory.
authorAlexandre Segura <mex.zktk@gmail.com>
Fri, 17 Mar 2017 14:36:09 +0100
changeset 445 2bed73d26854
parent 444 d57f95ee9115
child 446 f6462c744978
Change placeholder depending on metacategory.
src/iconolab/templates/iconolab/detail_image.html
src/iconolab/templates/partials/comment_form.html
--- a/src/iconolab/templates/iconolab/detail_image.html	Fri Mar 17 14:01:36 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html	Fri Mar 17 14:36:09 2017 +0100
@@ -173,7 +173,8 @@
         template: template,
         data: function() {
           return {
-            active: null
+            active: null,
+            placeholder: 'Ajouter mon commentaire…'
           }
         },
         watch: {
@@ -195,6 +196,14 @@
 
             return classes;
           }
+        },
+        methods: {
+          setActive: function(active, placeholder) {
+            Object.assign(this, {
+              active: active,
+              placeholder: placeholder || 'Ajouter mon commentaire…'
+            });
+          }
         }
       });
     });
--- a/src/iconolab/templates/partials/comment_form.html	Fri Mar 17 14:01:36 2017 +0100
+++ b/src/iconolab/templates/partials/comment_form.html	Fri Mar 17 14:36:09 2017 +0100
@@ -18,7 +18,8 @@
       {% if 'request_for_contribution' in metacategories %}
       <label title="{{ metacategories.request_for_contribution.label }}"
         v-bind:class="{ active: active === 'request-for-contribution' }"
-        v-on:click.prevent="active = 'request-for-contribution'" class="btn btn-default btn-request-for-contribution">
+        v-on:click.prevent="setActive('request-for-contribution', 'Détailler mon appel à contribution…')"
+        class="btn btn-default btn-request-for-contribution">
         <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.request_for_contribution.id }}">
         <i class="fa fa-users"></i>
       </label>
@@ -26,7 +27,8 @@
       {% if 'reference' in metacategories %}
       <label title="{{ metacategories.reference.label }}"
         v-bind:class="{ active: active === 'reference' }"
-        v-on:click.prevent="active = 'reference'" class="btn btn-default btn-reference">
+        v-on:click.prevent="setActive('reference')"
+        class="btn btn-default btn-reference">
         <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.reference.id }}">
         <i class="fa fa-book"></i>
       </label>
@@ -34,14 +36,16 @@
 
       <label title="Commentaire"
         v-bind:class="{ active: active === 'comment' }"
-        v-on:click.prevent="active = 'comment'" class="btn btn-default btn-comment">
+        v-on:click.prevent="setActive('comment')"
+        class="btn btn-default btn-comment">
         <i class="fa fa-comment"></i>
       </label>
 
       {% if 'agree' in metacategories %}
       <label title="{{ metacategories.agree.label }}"
         v-bind:class="{ active: active === 'agree' }"
-        v-on:click.prevent="active = 'agree'" class="btn btn-default btn-agree">
+        v-on:click.prevent="setActive('agree', 'Expliquez pourquoi vous êtes d\'accord…')"
+        class="btn btn-default btn-agree">
         <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.agree.id }}">
         <i class="fa fa-thumbs-up"></i>
       </label>
@@ -49,7 +53,8 @@
       {% if 'disagree' in metacategories %}
       <label title="{{ metacategories.disagree.label }}"
         v-bind:class="{ active: active === 'disagree' }"
-        v-on:click.prevent="active = 'disagree'" class="btn btn-default btn-disagree">
+        v-on:click.prevent="setActive('disagree', 'Expliquez pourquoi vous n\'êtes pas d\'accord…')"
+        class="btn btn-default btn-disagree">
         <input type="radio" name="{{ comment_form.metacategories.name }}" value="{{ metacategories.disagree.id }}">
         <i class="fa fa-thumbs-down"></i>
       </label>
@@ -64,7 +69,7 @@
         <textarea class="form-control input-sm"
           name="{{ comment_form.comment.name }}"
           id="id_{{ comment_form.comment.name }}"
-          placeholder="Ajouter mon commentaire..."></textarea>
+          v-bind:placeholder="placeholder"></textarea>
       </fieldset>
 
       <button type="submit" class="btn btn-xs btn-primary">Commenter</button>