From 7f32336d210a0569cb00988ccae9ceafa229ea8d Mon Sep 17 00:00:00 2001
From: Miguel Grinberg <miguel.grinberg@gmail.com>
Date: Thu, 9 Nov 2017 19:20:27 -0800
Subject: [PATCH] Chapter 20: Some JavaScript Magic (v0.20)

---
 app/main/routes.py            |  8 +++++++
 app/templates/_post.html      |  8 ++++---
 app/templates/base.html       | 42 +++++++++++++++++++++++++++++++++++
 app/templates/user_popup.html | 32 ++++++++++++++++++++++++++
 4 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 app/templates/user_popup.html

diff --git a/app/main/routes.py b/app/main/routes.py
index 0c43a4f..e004e9e 100644
--- a/app/main/routes.py
+++ b/app/main/routes.py
@@ -82,6 +82,14 @@ def user(username):
                            next_url=next_url, prev_url=prev_url, form=form)
 
 
+@bp.route('/user/<username>/popup')
+@login_required
+def user_popup(username):
+    user = User.query.filter_by(username=username).first_or_404()
+    form = EmptyForm()
+    return render_template('user_popup.html', user=user, form=form)
+
+
 @bp.route('/edit_profile', methods=['GET', 'POST'])
 @login_required
 def edit_profile():
diff --git a/app/templates/_post.html b/app/templates/_post.html
index 895fd47..631bcb7 100644
--- a/app/templates/_post.html
+++ b/app/templates/_post.html
@@ -7,9 +7,11 @@
             </td>
             <td>
                 {% set user_link %}
-                    <a href="{{ url_for('main.user', username=post.author.username) }}">
-                        {{ post.author.username }}
-                    </a>
+                    <span class="user_popup">
+                        <a href="{{ url_for('main.user', username=post.author.username) }}">
+                            {{ post.author.username }}
+                        </a>
+                    </span>
                 {% endset %}
                 {{ _('%(username)s said %(when)s',
                     username=user_link, when=moment(post.timestamp).fromNow()) }}
diff --git a/app/templates/base.html b/app/templates/base.html
index a985a70..b5f970f 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -73,5 +73,47 @@
                 $(destElem).text("{{ _('Error: Could not contact server.') }}");
             });
         }
+        $(function () {
+            var timer = null;
+            var xhr = null;
+            $('.user_popup').hover(
+                function(event) {
+                    // mouse in event handler
+                    var elem = $(event.currentTarget);
+                    timer = setTimeout(function() {
+                        timer = null;
+                        xhr = $.ajax(
+                            '/user/' + elem.first().text().trim() + '/popup').done(
+                                function(data) {
+                                    xhr = null;
+                                    elem.popover({
+                                        trigger: 'manual',
+                                        html: true,
+                                        animation: false,
+                                        container: elem,
+                                        content: data
+                                    }).popover('show');
+                                    flask_moment_render_all();
+                                }
+                            );
+                    }, 1000);
+                },
+                function(event) {
+                    // mouse out event handler
+                    var elem = $(event.currentTarget);
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
+                    else if (xhr) {
+                        xhr.abort();
+                        xhr = null;
+                    }
+                    else {
+                        elem.popover('destroy');
+                    }
+                }
+            );
+        });
     </script>
 {% endblock %}
diff --git a/app/templates/user_popup.html b/app/templates/user_popup.html
new file mode 100644
index 0000000..4043e1b
--- /dev/null
+++ b/app/templates/user_popup.html
@@ -0,0 +1,32 @@
+<table class="table">
+    <tr>
+        <td width="64" style="border: 0px;"><img src="{{ user.avatar(64) }}"></td>
+        <td style="border: 0px;">
+            <p><a href="{{ url_for('main.user', username=user.username) }}">{{ user.username }}</a></p>
+            <small>
+                {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}
+                {% if user.last_seen %}
+                <p>{{ _('Last seen on') }}: {{ moment(user.last_seen).format('lll') }}</p>
+                {% endif %}
+                <p>{{ _('%(count)d followers', count=user.followers.count()) }}, {{ _('%(count)d following', count=user.followed.count()) }}</p>
+                {% if user != current_user %}
+                    {% if not current_user.is_following(user) %}
+                    <p>
+                        <form action="{{ url_for('main.follow', username=user.username) }}" method="post">
+                            {{ form.hidden_tag() }}
+                            {{ form.submit(value=_('Follow'), class_='btn btn-default btn-sm') }}
+                        </form>
+                    </p>
+                    {% else %}
+                    <p>
+                        <form action="{{ url_for('main.unfollow', username=user.username) }}" method="post">
+                            {{ form.hidden_tag() }}
+                            {{ form.submit(value=_('Unfollow'), class_='btn btn-default btm-sm') }}
+                        </form>
+                    </p>
+                    {% endif %}
+                {% endif %}
+            </small>
+        </td>
+    </tr>
+</table>