Skip to content
Permalink
Browse files

13-Javascript-Magic add client popup ajax

  • Loading branch information...
bonfy committed Oct 19, 2018
1 parent f48f4a3 commit 8259a0b1347ea5aeab1b6b7351b88d147ce3c01b
Showing with 49 additions and 3 deletions.
  1. +46 −0 templates/_base.html
  2. +1 −1 templates/content/explore.html
  3. +1 −1 templates/content/index.html
  4. +1 −1 templates/content/profile.html
@@ -38,5 +38,51 @@ <h5 class="my-0 mr-md-auto font-weight-normal">Blog</h5>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(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');
}
);
}, 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('hide');
}
}
);
});
</script>

</body>
</html>
@@ -5,7 +5,7 @@ <h1>Hello, {{.CurrentUser}}!</h1>
<table class="table table-hover">
<tr valign="top">
<td width="36px"><img src="{{.User.Avatar}}&s=36"></td>
<td><a href="/user/{{.User.Username}}">{{ .User.Username }}</a> said {{.FormattedTimeAgo}}:<br>{{ .Body }}</td>
<td><span class="user_popup"><a href="/user/{{.User.Username}}">{{ .User.Username }}</a></span> said {{.FormattedTimeAgo}}:<br>{{ .Body }}</td>
</tr>
</table>
{{end}}
@@ -16,7 +16,7 @@ <h1>Hello, {{.CurrentUser}}!</h1>
<table class="table table-hover">
<tr valign="top">
<td width="36px"><img src="{{.User.Avatar}}&s=36"></td>
<td><a href="/user/{{.User.Username}}">{{ .User.Username }}</a> said {{.FormattedTimeAgo}}:<br>{{ .Body }}</td>
<td><span class="user_popup"><a href="/user/{{.User.Username}}">{{ .User.Username }}</a></span> said {{.FormattedTimeAgo}}:<br>{{ .Body }}</td>
</tr>
</table>
{{end}}
@@ -34,7 +34,7 @@ <h1>User: {{.ProfileUser.Username}}</h1>
<table class="table table-hover">
<tr valign="top">
<td width="36px"><img src="{{.User.Avatar}}&s=36"></td>
<td><a href="/user/{{.User.Username}}">{{ .User.Username }}</a> said {{.FormattedTimeAgo}}:<br>{{ .Body }}</td>
<td><span class="user_popup"><a href="/user/{{.User.Username}}">{{ .User.Username }}</a></span> said {{.FormattedTimeAgo}}:<br>{{ .Body }}</td>
</tr>
</table>
{{end}}

0 comments on commit 8259a0b

Please sign in to comment.
You can’t perform that action at this time.