portico: Reimplement /apps routes using pushState.

This commit is contained in:
Jack Zhang 2017-07-27 19:29:37 -07:00 committed by Tim Abbott
parent b255949501
commit fc6c2b321b
5 changed files with 65 additions and 45 deletions

View File

@ -414,7 +414,6 @@ var hello_events = function () {
};
var apps_events = function () {
var version;
var info = {
windows: {
image: "/static/images/landing-page/microsoft.png",
@ -448,35 +447,33 @@ var apps_events = function () {
},
};
var nav_version = {
Win: "windows",
MacIntel: "mac",
Linux: "linux",
iP: "ios",
};
var version;
// if the hash is not a valid section, then identify it.
version = window.location.hash.replace(/^#/, "");
function get_version_from_path() {
var result;
var parts = path_parts();
if (info[version]) {
window.location.hash = version;
} else {
for (var x in nav_version) {
if (navigator.platform.indexOf(x) !== -1) {
window.location.hash = nav_version[x];
version = nav_version[x];
break;
Object.keys(info).forEach(function (version) {
if (parts.includes(version)) {
result = version;
}
}
});
if (!version || !info[version]) {
version = "mac";
}
window.location.hash = version;
// display Mac app by default
result = result || 'mac';
return result;
}
var update_version = function (version) {
function get_path_from_version() {
return '/apps/' + version;
}
function update_path() {
var next_path = get_path_from_version();
history.pushState(version, '', next_path);
}
var update_page = function () {
var version_info = info[version];
$(".info .platform").text(version_info.alt);
$(".info .description").text(version_info.description);
@ -484,16 +481,29 @@ var apps_events = function () {
$(".image img").attr("src", version_info.image);
};
window.onhashchange = function () {
update_version(window.location.hash.substr(1));
};
update_version(version);
$(".apps > .icon").click(function () {
$(window).on('popstate', function () {
version = get_version_from_path();
update_page();
$("body").animate({ scrollTop: 0 }, 200);
});
$(".apps a .icon").click(function (e) {
var next_version = $(e.target).closest('a')
.attr('href')
.replace('/apps/', '');
version = next_version;
update_path();
update_page();
$("body").animate({ scrollTop: 0 }, 200);
return false;
});
// init
version = get_version_from_path();
history.replaceState(version, '', get_path_from_version());
update_page();
};
var events = function () {

View File

@ -43,11 +43,21 @@
<h2>Apps for every platform.</h2>
<div class="apps">
<a class="icon fa fa-apple no-style" href="/apps/#mac" data-label="MacOS"></a>
<a class="icon fa fa-windows no-style" href="/apps/#windows" data-label="Windows"></a>
<a class="icon fa fa-linux no-style" href="/apps/#linux" data-label="Linux"></a>
<a class="icon fa fa-android no-style" href="/apps/#android" data-label="Android"></a>
<a class="icon fa fa-mobile-phone no-style" href="/apps/#ios" data-label="iOS"></a>
<a class="no-style" href="/apps/mac">
<i class="icon fa fa-apple" data-label="MacOS"></i>
</a>
<a class="no-style" href="/apps/windows">
<i class="icon fa fa-windows" data-label="Windows"></i>
</a>
<a class="no-style" href="/apps/linux">
<i class="icon fa fa-linux" data-label="Linux"></i>
</a>
<a class="no-style" href="/apps/android">
<i class="icon fa fa-android" data-label="Android"></i>
</a>
<a class="no-style" href="/apps/ios">
<i class="icon fa fa-mobile-phone" data-label="iOS"></i>
</a>
</div>
</div>
</div>

View File

@ -333,22 +333,22 @@
</div>
<div class="group">
<h2>Desktop</h2>
<a class="no-style" href="{{ apps_page_url }}#mac">
<a class="no-style" href="{{ apps_page_url }}mac">
<i class="icon-vector-apple platform-icon"></i>
</a>
<a class="no-style" href="{{ apps_page_url }}#windows">
<a class="no-style" href="{{ apps_page_url }}windows">
<i class="icon-vector-windows platform-icon"></i>
</a>
<a class="no-style" href="{{ apps_page_url }}#linux">
<a class="no-style" href="{{ apps_page_url }}linux">
<i class="icon-vector-linux platform-icon"></i>
</a>
</div>
<div class="group">
<h2>Mobile</h2>
<a class="no-style" href="{{ apps_page_url }}#ios">
<a class="no-style" href="{{ apps_page_url }}ios">
<i class="icon-vector-mobile-phone platform-icon"></i>
</a>
<a class="no-style" href="{{ apps_page_url }}#android">
<a class="no-style" href="{{ apps_page_url }}android">
<i class="icon-vector-android platform-icon"></i>
</a>
</div>

View File

@ -266,8 +266,8 @@ def desktop_home(request):
# type: (HttpRequest) -> HttpResponse
return HttpResponseRedirect(reverse('zerver.views.home.home'))
def apps_view(request):
# type: (HttpRequest) -> HttpResponse
def apps_view(request, _):
# type: (HttpRequest, Text) -> HttpResponse
if settings.ZILENCER_ENABLED:
return render(request, 'zerver/apps.html')
return HttpResponseRedirect('https://zulipchat.com/apps/', status=301)

View File

@ -143,7 +143,7 @@ i18n_urls = [
name="zerver.views.integrations.integration_doc"),
url(r'^integrations/(.*)', IntegrationView.as_view()),
url(r'^about/$', TemplateView.as_view(template_name='zerver/about.html')),
url(r'^apps/$', zerver.views.home.apps_view, name='zerver.views.home.apps_view'),
url(r'^apps/(.*)', zerver.views.home.apps_view, name='zerver.views.home.apps_view'),
url(r'^robots\.txt$', RedirectView.as_view(url='/static/robots.txt', permanent=True)),