From 2e5b6f59e29f72ae04f06e502cdbf9d0a2fe1f9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felipe=20Mart=C3=ADn?= Date: Fri, 11 Sep 2015 19:27:13 +0200 Subject: [PATCH] AJAX relation handling from detail view --- amiibofindr/apps/amiibo/views.py | 12 ++++- amiibofindr/static/app/relation.js | 50 +++++++++++++++++++ .../templates/amiibo/amiibo-figure.html | 37 ++------------ .../widgets/relation_header_buttons.html | 42 ++++++++++++++++ gulpfile.js | 33 ++++++------ 5 files changed, 123 insertions(+), 51 deletions(-) create mode 100644 amiibofindr/static/app/relation.js create mode 100644 amiibofindr/templates/amiibo/widgets/relation_header_buttons.html diff --git a/amiibofindr/apps/amiibo/views.py b/amiibofindr/apps/amiibo/views.py index 4b2f365..80e9541 100644 --- a/amiibofindr/apps/amiibo/views.py +++ b/amiibofindr/apps/amiibo/views.py @@ -84,7 +84,7 @@ class UserAmiiboView(View): '-wishlist': 'remove_wishlist', '+trade': 'add_trade', '-trade': 'remove_trade', - '=trade': 'toggle_trade', + '+-trade': 'toggle_trade', } def get(self, request, amiibo, action): @@ -97,6 +97,16 @@ class UserAmiiboView(View): if result: return result + # Handle templating + request_from = request.GET.get('from', None) + if request_from == 'detail': + return render(request, + 'amiibo/widgets/relation_header_buttons.html', + { + 'amiibo': amiibo, + 'item': amiibo + }) + return HttpResponseRedirect(amiibo.as_type().get_absolute_url()) def add_wishlist(self, request, amiibo): diff --git a/amiibofindr/static/app/relation.js b/amiibofindr/static/app/relation.js new file mode 100644 index 0000000..da6ab2a --- /dev/null +++ b/amiibofindr/static/app/relation.js @@ -0,0 +1,50 @@ +(function() { + var RelationComponent = function() { + this.relations = document.querySelectorAll('[data-handle="relation"]'); + this.initialize(); + }; + + RelationComponent.prototype.initialize = function() { + var self = this; + + // Prepare handlers + var linkHandler = function(event) { + event.preventDefault(); + self.click(event.target); + }; + + [].forEach.call(this.relations, function(buttons) { + $(buttons).on('click', 'a', linkHandler); + }); + }; + + RelationComponent.prototype.click = function(element) { + var $link = element; + var href = $link.href; + var $buttons = $(element).closest('[data-amiibo]'); + var from = $buttons.attr('data-from'); + var amiiboId = $buttons.attr('data-amiibo'); + var loader = $buttons.closest('[data-loader="' + amiiboId + '"]'); + this.doGet(href, from, loader, $buttons); + }; + + RelationComponent.prototype.doGet = function(href, from, loader, container) { + var self = this; + // loader.addClass('loading'); + + $.ajax({ + url: href, + data: { from: from }, + success: function(result) { + self.handleResult(loader, container, result); + } + }); + }; + + RelationComponent.prototype.handleResult = function(loader, container, result) { + container.html(result) + // loader.removeClass('loading'); + }; + + SimpleViews.register('relation', RelationComponent); +})(); diff --git a/amiibofindr/templates/amiibo/amiibo-figure.html b/amiibofindr/templates/amiibo/amiibo-figure.html index 542d501..fcc1caa 100644 --- a/amiibofindr/templates/amiibo/amiibo-figure.html +++ b/amiibofindr/templates/amiibo/amiibo-figure.html @@ -17,7 +17,7 @@ AMIIBO FIGURE {% block meta_twitter_url %}{{ amiibo.get_absolute_url }}{% endblock %} {% block meta_og_url %}{{ amiibo.get_absolute_url }}{% endblock %} -{% block js_views %}money,time{% endblock %} +{% block js_views %}money,time,relation{% endblock %} {% block breadcrumb %} {{ block.super }} @@ -30,7 +30,7 @@ AMIIBO FIGURE {% block main_content %}
-
+
{% block amiibo_header %} @@ -40,38 +40,7 @@ AMIIBO FIGURE {% endblock %}
- {% if user.is_authenticated %} - {% if amiibo.pk in USER_AMIIBO_OWNED %} - - {% trans 'Available for trade' %} - - {% trans 'I do not have it' %} - {% else %} -
- {% if amiibo.pk in USER_AMIIBO_WISHLIST %} - {% trans 'I do not want this' %} - {% else %} - {% trans 'I want this' %} - {% endif %} -
- {% trans 'I have this' %} - {% endif %} -
- {% else %} -
- - -
- {% endif %} + {% include 'amiibo/widgets/relation_header_buttons.html' %}
diff --git a/amiibofindr/templates/amiibo/widgets/relation_header_buttons.html b/amiibofindr/templates/amiibo/widgets/relation_header_buttons.html new file mode 100644 index 0000000..f4a4870 --- /dev/null +++ b/amiibofindr/templates/amiibo/widgets/relation_header_buttons.html @@ -0,0 +1,42 @@ +{% load i18n %} + +
+ {% if user.is_authenticated %} + {% if amiibo.pk in USER_AMIIBO_OWNED %} + + {% trans 'Available for trade' %} + + {% trans 'I do not have it' %} + {% else %} +
+ {% if amiibo.pk in USER_AMIIBO_WISHLIST %} + {% trans 'I do not want this' %} + {% else %} + {% trans 'I want this' %} + {% endif %} +
+ {% trans 'I have this' %} + {% endif %} +
+ {% else %} +
+ + +
+ {% endif %} +
diff --git a/gulpfile.js b/gulpfile.js index 0a3bd5f..45a5ef4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,26 +6,27 @@ var gulp = require('gulp'), gulp.task('scripts', function() { return gulp.src([ - 'bower_components/jquery/dist/jquery.js', - 'bower_components/money/money.js', - 'bower_components/moment/moment.js', - 'bower_components/moment/locale/es.js', - 'amiibofindr/static/semantic/semantic.js', - 'amiibofindr/static/app/simpleViews.js', - 'amiibofindr/static/app/global.js', - 'amiibofindr/static/app/money.js', - 'amiibofindr/static/app/collectionSearch.js', - 'amiibofindr/static/app/time.js' - ]) - .pipe(concat('app.js')) - .pipe(gulp.dest('amiibofindr/static/dist')); + 'bower_components/jquery/dist/jquery.js', + 'bower_components/money/money.js', + 'bower_components/moment/moment.js', + 'bower_components/moment/locale/es.js', + 'amiibofindr/static/semantic/semantic.js', + 'amiibofindr/static/app/simpleViews.js', + 'amiibofindr/static/app/global.js', + 'amiibofindr/static/app/money.js', + 'amiibofindr/static/app/relation.js', + 'amiibofindr/static/app/collectionSearch.js', + 'amiibofindr/static/app/time.js' + ]) + .pipe(concat('app.js')) + .pipe(gulp.dest('amiibofindr/static/dist')); }); gulp.task('less', function() { gulp.src('amiibofindr/static/less/**/*.less') - .pipe(less()) - .pipe(gulp.dest('amiibofindr/static/css')) - .pipe(livereload()); + .pipe(less()) + .pipe(gulp.dest('amiibofindr/static/css')) + .pipe(livereload()); }); gulp.task('watch', function() {