Chapter 20: Some JavaScript Magic (v0.20)

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():

app/templates/_post.html

@@ -7,7 +7,7 @@
             </td>
             <td>
                 {% set user_link %}
-                    <a href="{{ url_for('main.user', username=post.author.username) }}">
+                    <a class="user_popup" href="{{ url_for('main.user', username=post.author.username) }}">
                         {{ post.author.username }}
                     </a>
                 {% endset %}

app/templates/base.html

@@ -79,6 +79,36 @@
         const data = await response.json();
         document.getElementById(destElem).innerText = data.text;
       }
+
+      function initialize_popovers() {
+        const popups = document.getElementsByClassName('user_popup');
+        for (let i = 0; i < popups.length; i++) {
+          const popover = new bootstrap.Popover(popups[i], {
+            content: 'Loading...',
+            trigger: 'hover focus',
+            placement: 'right',
+            html: true,
+            sanitize: false,
+            delay: {show: 500, hide: 0},
+            container: popups[i],
+            customClass: 'd-inline',
+          });
+          popups[i].addEventListener('show.bs.popover', async (ev) => {
+            if (ev.target.popupLoaded) {
+              return;
+            }
+            const response = await fetch('/user/' + ev.target.innerText.trim() + '/popup');
+            const data = await response.text();
+            const popover = bootstrap.Popover.getInstance(ev.target);
+            if (popover && data) {
+              ev.target.popupLoaded = true;
+              popover.setContent({'.popover-body': data});
+              flask_moment_render_all();
+            }
+          });
+        }
+      }
+      document.addEventListener('DOMContentLoaded', initialize_popovers);
     </script>
   </body>
 </html>

app/templates/user_popup.html

@@ -0,0 +1,27 @@
+<div>
+  <img src="{{ user.avatar(64) }}" style="margin: 5px; float: left">
+  <p><a href="{{ url_for('main.user', username=user.username) }}">{{ user.username }}</a></p>
+  {% if user.about_me %}<p>{{ user.about_me }}</p>{% endif %}
+  <div class="clearfix"></div>
+  {% 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.following.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-outline-primary 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-outline-primary btn-sm') }}
+      </form>
+    </p>
+    {% endif %}
+  {% endif %}
+</div>