avoid full page load for /topics/

save bytes
This commit is contained in:
Azareal 2020-04-11 18:12:37 +10:00
parent 3d87ad8895
commit d1506d8567
11 changed files with 152 additions and 136 deletions

View File

@ -791,12 +791,12 @@ function mainInit(){
// The time range selector for the time graphs in the Control Panel
$(".autoSubmitRedirect").change(function(){
let elems = this.form.elements;
let els = this.form.elements;
let s = "";
for(let i=0; i<elems.length; i++) {
let elem = elems[i];
if(elem.nodeName=="SELECT") {
s += elem.name+"="+elem.options[elem.selectedIndex].getAttribute("value")+"&";
for(let i=0; i<els.length; i++) {
let el = els[i];
if(el.nodeName=="SELECT") {
s += el.name+"="+el.options[el.selectedIndex].getAttribute("value")+"&";
}
// TODO: Implement other element types...
}
@ -809,8 +809,8 @@ function mainInit(){
let unixTime = this.innerText;
let date = new Date(unixTime*1000);
console.log("date",date);
let minutes = "0"+date.getMinutes();
let formattedTime = date.getHours()+":"+minutes.substr(-2);
let mins = "0"+date.getMinutes();
let formattedTime = date.getHours()+":"+mins.substr(-2);
console.log("formattedTime",formattedTime);
this.innerText = formattedTime;
});
@ -884,8 +884,7 @@ function mainInit(){
else pro = asyncGetScript("/s/"+res)
pro.then(() => console.log("Loaded "+res))
.catch(e => {
console.log("Unable to get '"+res+"'");
console.log("e",e);
console.log("Unable to get '"+res+"'",e);
console.trace();
});
}
@ -899,8 +898,7 @@ function mainInit(){
let obj = {Title:document.title,Url:base};
history.pushState(obj,obj.Title,obj.Url);
}).catch(e => {
console.log("Unable to get script '"+href+""+"'");
console.log("e",e);
console.log("Unable to get script '"+href+""+"'",e);
console.trace();
});
}
@ -911,6 +909,13 @@ function mainInit(){
ev.stopPropagation();
ev.preventDefault();
})
$("a").click(function(ev) {
let base = this.getAttribute("href");
if(base!="/topics/") return;
loadArb(base,base+"?i=1");
ev.stopPropagation();
ev.preventDefault();
})
runInitHook("almost_end_init");
runInitHook("end_init");

View File

@ -19,16 +19,16 @@ func wsTopicList(topicList []*c.TopicsRow, lastPage int) *c.WsTopicList {
return &c.WsTopicList{wsTopicList, lastPage, 0}
}
func TopicList(w http.ResponseWriter, r *http.Request, user *c.User, h *c.Header) c.RouteError {
skip, rerr := h.Hooks.VhookSkippable("route_topic_list_start", w, r, user, h)
func TopicList(w http.ResponseWriter, r *http.Request, u *c.User, h *c.Header) c.RouteError {
skip, rerr := h.Hooks.VhookSkippable("route_topic_list_start", w, r, u, h)
if skip || rerr != nil {
return rerr
}
return TopicListCommon(w, r, user, h, "lastupdated", 0)
return TopicListCommon(w, r, u, h, "lastupdated", 0)
}
func TopicListMostViewed(w http.ResponseWriter, r *http.Request, user *c.User, h *c.Header) c.RouteError {
return TopicListCommon(w, r, user, h, "mostviewed", c.TopicListMostViewed)
func TopicListMostViewed(w http.ResponseWriter, r *http.Request, u *c.User, h *c.Header) c.RouteError {
return TopicListCommon(w, r, u, h, "mostviewed", c.TopicListMostViewed)
}
// TODO: Implement search
@ -191,5 +191,8 @@ func TopicListCommon(w http.ResponseWriter, r *http.Request, user *c.User, h *c.
}
pi := c.TopicListPage{h, topicList, forumList, c.Config.DefaultForum, c.TopicListSort{torder, false}, pagi}
if r.FormValue("i") == "1" {
return renderTemplate("topics_mini", w, r, h, pi)
}
return renderTemplate("topics", w, r, h, pi)
}

View File

@ -1,85 +1,3 @@
{{template "header.html" . }}
<main id="topicsItemList" itemscope itemtype="http://schema.org/ItemList">
{{if not .CurrentUser.Loggedin}}<link rel="canonical"href="//{{.Site.URL}}/topics/{{if eq .Sort.SortBy "mostviewed"}}most-viewed/{{end}}{{if gt .Page 1}}?page={{.Page}}{{end}}">{{end}}
<div class="rowblock rowhead topic_list_title_block{{if .CurrentUser.Loggedin}} has_opt{{end}}">
<div class="rowitem topic_list_title"><h1 itemprop="name">{{.Title}}</h1></div>
{{if .CurrentUser.Loggedin}}
<div class="optbox">
{{if .ForumList}}
<div class="opt filter_opt">
<a class="filter_opt_sep"> - </a>
<a href="#" class="filter_opt_label link_label" data-for="topic_list_filter_select">{{if eq .Sort.SortBy "mostviewed"}}{{lang "topic_list.most_viewed_filter"}}{{else}}{{lang "topic_list.most_recent_filter"}}{{end}} <span class="filter_opt_pointy"></span></a>
<div id="topic_list_filter_select" class="link_select">
<div class="link_option link_selected">
<a href="/topics/">{{lang "topic_list.most_recent_filter"}}</a>
</div>
<div class="link_option">
<a href="/topics/most-viewed/">{{lang "topic_list.most_viewed_filter"}}</a>
</div>
</div>
</div>
<div class="pre_opt auto_hide"></div>
<div class="opt create_topic_opt" title="{{lang "topic_list.create_topic_tooltip"}}" aria-label="{{lang "topic_list.create_topic_aria"}}"><a class="create_topic_link" href="/topics/create/"></a></div>
{{/** TODO: Add a permissions check for this **/}}
<div class="opt mod_opt" title="{{lang "topic_list.moderate_tooltip"}}">
<a class="moderate_link" href="#" aria-label="{{lang "topic_list.moderate_aria"}}"></a>
</div>
{{else}}<div class="opt locked_opt"title="{{lang "topics_locked_tooltip"}}" aria-label="{{lang "topics_locked_aria"}}"><a></a></div>{{end}}
</div><div style="clear:both;"></div>
{{end}}
</div>
{{if .CurrentUser.Loggedin}}
{{template "topics_mod_floater.html"}}
{{if .ForumList}}
{{/** TODO: Have a seperate forum list for moving topics? Maybe an AJAX forum search compatible with plugin_guilds? **/}}
{{/** TODO: Add ARIA attributes for this **/}}
<div id="mod_topic_mover" class="modal_pane auto_hide">
<form action="/topic/move/submit/?s={{.CurrentUser.Session}}" method="post">
<input id="mover_fid"name="fid"value=0 type="hidden">
<div class="pane_header">
<h3>{{lang "topic_list.move_head"}}</h3>
</div>
<div class="pane_body">
<div class="pane_table">
{{range .ForumList}}<div id="mover_fid_{{.ID}}"data-fid="{{.ID}}"class="pane_row">{{.Name}}</div>{{end}}
</div>
</div>
<div class="pane_buttons">
<button id="mover_submit">{{lang "topic_list.move_button"}}</button>
</div>
</form>
</div>
<div class="rowblock topic_create_form quick_create_form auto_hide" aria-label="{{lang "quick_topic.aria"}}">
<form name="topic_create_form_form"id="quick_post_form" enctype="multipart/form-data"action="/topic/create/submit/?s={{.CurrentUser.Session}}" method="post"></form>
<img class="little_row_avatar"src="{{.CurrentUser.MicroAvatar}}" height=64 alt="{{lang "quick_topic.avatar_alt"}}" title="{{lang "quick_topic.avatar_tooltip"}}">
<div class="main_form">
<div class="topic_meta">
<div class="formrow topic_board_row real_first_child">
<div class="formitem"><select form="quick_post_form" id="topic_board_input" name="board">
{{range .ForumList}}<option value="{{.ID}}"{{if eq .ID $.DefaultForum}}selected{{end}}>{{.Name}}</option>{{end}}
</select></div>
</div>
<div class="formrow topic_name_row">
<div class="formitem">
<input form="quick_post_form" name="name" placeholder="{{lang "quick_topic.whatsup"}}" required>
</div>
</div>
</div>
{{template "topics_quick_topic.html" . }}
</div>
</div>
{{end}}
{{end}}
<div class="rowblock more_topic_block more_topic_block_initial">
<div class="rowitem rowmsg"><a href=""class="more_topics"></a></div>
</div>
<div id="topic_list"class="rowblock topic_list topic_list_{{.Sort.SortBy}}"aria-label="{{lang "topics_list_aria"}}">
{{range .TopicList}}{{template "topics_topic.html" . }}{{else}}<div class="rowitem passive rowmsg">{{lang "topics_no_topics"}}{{if .CurrentUser.Loggedin}}{{if .CurrentUser.Perms.CreateTopic}}&nbsp;<a href="/topics/create/">{{lang "topics_start_one"}}</a>{{end}}{{end}}</div>{{end}}
</div>
{{template "paginator.html" . }}
</main>
{{template "topics_inner.html" . }}
{{template "footer.html" . }}

View File

@ -0,0 +1,83 @@
<main id="topicsItemList"itemscope itemtype="http://schema.org/ItemList">
{{if not .CurrentUser.Loggedin}}<link rel="canonical"href="//{{.Site.URL}}/topics/{{if eq .Sort.SortBy "mostviewed"}}most-viewed/{{end}}{{if gt .Page 1}}?page={{.Page}}{{end}}">{{end}}
<div class="rowblock rowhead topic_list_title_block{{if .CurrentUser.Loggedin}} has_opt{{end}}">
<div class="rowitem topic_list_title"><h1 itemprop="name">{{.Title}}</h1></div>
{{if .CurrentUser.Loggedin}}
<div class="optbox">
{{if .ForumList}}
<div class="opt filter_opt">
<a class="filter_opt_sep"> - </a>
<a href="#"class="filter_opt_label link_label"data-for="topic_list_filter_select">{{if eq .Sort.SortBy "mostviewed"}}{{lang "topic_list.most_viewed_filter"}}{{else}}{{lang "topic_list.most_recent_filter"}}{{end}} <span class="filter_opt_pointy"></span></a>
<div id="topic_list_filter_select"class="link_select">
<div class="link_option link_selected">
<a href="/topics/">{{lang "topic_list.most_recent_filter"}}</a>
</div>
<div class="link_option">
<a href="/topics/most-viewed/">{{lang "topic_list.most_viewed_filter"}}</a>
</div>
</div>
</div>
<div class="pre_opt auto_hide"></div>
<div class="opt create_topic_opt"title="{{lang "topic_list.create_topic_tooltip"}}"aria-label="{{lang "topic_list.create_topic_aria"}}"><a class="create_topic_link"href="/topics/create/"></a></div>
{{/** TODO: Add a permissions check for this **/}}
<div class="opt mod_opt"title="{{lang "topic_list.moderate_tooltip"}}">
<a class="moderate_link"href="#"aria-label="{{lang "topic_list.moderate_aria"}}"></a>
</div>
{{else}}<div class="opt locked_opt"title="{{lang "topics_locked_tooltip"}}"aria-label="{{lang "topics_locked_aria"}}"><a></a></div>{{end}}
</div><div style="clear:both;"></div>
{{end}}
</div>
{{if .CurrentUser.Loggedin}}
{{template "topics_mod_floater.html"}}
{{if .ForumList}}
{{/** TODO: Have a seperate forum list for moving topics? Maybe an AJAX forum search compatible with plugin_guilds? **/}}
{{/** TODO: Add ARIA attributes for this **/}}
<div id="mod_topic_mover" class="modal_pane auto_hide">
<form action="/topic/move/submit/?s={{.CurrentUser.Session}}" method="post">
<input id="mover_fid"name="fid"value=0 type="hidden">
<div class="pane_header">
<h3>{{lang "topic_list.move_head"}}</h3>
</div>
<div class="pane_body">
<div class="pane_table">
{{range .ForumList}}<div id="mover_fid_{{.ID}}"data-fid="{{.ID}}"class="pane_row">{{.Name}}</div>{{end}}
</div>
</div>
<div class="pane_buttons">
<button id="mover_submit">{{lang "topic_list.move_button"}}</button>
</div>
</form>
</div>
<div class="rowblock topic_create_form quick_create_form auto_hide" aria-label="{{lang "quick_topic.aria"}}">
<form name="topic_create_form_form"id="quick_post_form" enctype="multipart/form-data"action="/topic/create/submit/?s={{.CurrentUser.Session}}" method="post"></form>
<img class="little_row_avatar"src="{{.CurrentUser.MicroAvatar}}" height=64 alt="{{lang "quick_topic.avatar_alt"}}" title="{{lang "quick_topic.avatar_tooltip"}}">
<div class="main_form">
<div class="topic_meta">
<div class="formrow topic_board_row real_first_child">
<div class="formitem"><select form="quick_post_form"id="topic_board_input"name="board">
{{range .ForumList}}<option value="{{.ID}}"{{if eq .ID $.DefaultForum}}selected{{end}}>{{.Name}}</option>{{end}}
</select></div>
</div>
<div class="formrow topic_name_row">
<div class="formitem">
<input form="quick_post_form"name="name"placeholder="{{lang "quick_topic.whatsup"}}"required>
</div>
</div>
</div>
{{template "topics_quick_topic.html" . }}
</div>
</div>
{{end}}
{{end}}
<div class="rowblock more_topic_block more_topic_block_initial">
<div class="rowitem rowmsg"><a href=""class="more_topics"></a></div>
</div>
<div id="topic_list"class="rowblock topic_list topic_list_{{.Sort.SortBy}}"aria-label="{{lang "topics_list_aria"}}">
{{range .TopicList}}{{template "topics_topic.html" . }}{{else}}<div class="rowitem passive rowmsg">{{lang "topics_no_topics"}}{{if .CurrentUser.Loggedin}}{{if .CurrentUser.Perms.CreateTopic}}&nbsp;<a href="/topics/create/">{{lang "topics_start_one"}}</a>{{end}}{{end}}</div>{{end}}
</div>
{{template "paginator.html" . }}
</main>

View File

@ -0,0 +1,7 @@
<div id="back"class="zone_{{.Header.Zone}}{{if hasWidgets "rightSidebar" .Header }} shrink_main{{end}}">
<div id="main">
<div class="alertbox initial_alertbox">{{range .Header.NoticeList}}{{template "notice.html" . }}{{end}}</div>
{{template "topics_inner.html" . }}
</div>
<aside class="midRight sidebar">{{dock "rightSidebar" .Header}}</aside>
</div>