Skip to content

Instantly share code, notes, and snippets.

@funkatron
Created December 10, 2015 18:40
Show Gist options
  • Save funkatron/f0861de26cd24f59547b to your computer and use it in GitHub Desktop.
Save funkatron/f0861de26cd24f59547b to your computer and use it in GitHub Desktop.
<div id="invite-friends-component">
<div class="row">
<div class="col-md-8"><h3>Invite Friends</h3></div>
<div class="col-sm-4 col-xs-6">
<button class="btn btn-social btn-facebook btn-block"><i class="fa fa-facebook"></i>Insert contact using Facebook</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form action="{{ inviteFriendsActionUrl }}" method="POST">
<div class="row micit-row-invite-friends" v-for="invitationRow in invitationRows">
<div class="col-md-5 col-xs-5">
<div class="form-group">
<label class="sr-only" for="email-address-${$index}">Email address</label>
<input type="email" class="form-control" name="emails[]" id="email-address-${$index}" placeholder="Email" required>
</div>
</div>
<div class="col-md-5 col-xs-4">
<input type="text" class="form-control" name="names[]" placeholder="Name" required>
</div>
<div class="col-md-2 col-xs-3" v-if="isLastRow($index)">
<button v-on:click.prevent="addNewRow" class="btn btn-link btn-sm micit-btn-invite-friends-row"><i class="fa fa-2x fa-plus-circle"></i></button>
<button v-on:click.prevent="removeRow($index)" class="btn btn-link btn-sm micit-btn-invite-friends-row"><i class="fa fa-2x fa-minus-circle"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<input type="submit" class="btn btn-primary " value="Send Invitations">
</div>
</div>
</form>
</div>
</div>
</div>
{% block javascripts %}
<script>
$(document).ready(function() {
/**
* config stuff
* we have to change the delimiters so twig tags don't clash
*/
Vue.config.debug = true;
Vue.config.delimiters = ["${", "}"];
Vue.config.unsafeDelimiters = ['{!!', '!!}'];
var inviteFriends = new Vue({
el: '#invite-friends-component',
data: {
invitationRows: [
{
'name': '',
'email': ''
}
]
},
computed: {
'numberOfRows': function() {
return this.invitationRows.length;
}
},
methods: {
'addNewRow': function() {
this.invitationRows.push({
'name': '',
'email': ''
});
},
'removeRow': function(index) {
if (this.invitationRows.length > 1) {
this.invitationRows.splice(index, 1);
}
},
'isLastRow': function(index) {
return index+1 >= this.numberOfRows;
}
}
});
});
//# sourceURL=invite-friends.js
</script>
{% endblock %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment