From c94520be139b4e6e39b4a8c6778ee3182821b570 Mon Sep 17 00:00:00 2001 From: Allen Bai Date: Mar 18 2020 13:45:31 +0000 Subject: coreos-download: add routing under /coreos/download Adds three routes under /coreos/download: - /coreos/download/cloud_launchable/ - /coreos/download/metal_virtualized/ - /coreos/download/cloud_operators/ All of the three subroutes render with /coreos/download/index.html but preserves the url. The frontend will then render with different tab view according to the requested url. This change makes sharing fedora coreos download page more convenient by going to the target platform tab directly instead of additional clicks. Closes: https://github.com/coreos/fedora-coreos-tracker/issues/417 https://pagure.io/fedora-web/websites/issue/98 Signed-off-by: Allen Bai --- diff --git a/sites/getfedora.org/main.py b/sites/getfedora.org/main.py index 8e59d0b..4f4dba5 100644 --- a/sites/getfedora.org/main.py +++ b/sites/getfedora.org/main.py @@ -8,6 +8,7 @@ from flask_htmlmin import HTMLMIN import jinja2 import os import yaml +import re #FEDORA_LANGUAGES = { 'en' : 'English' , 'de': 'Deutsch'} @@ -177,6 +178,11 @@ def export_route(name, path, template=None): global freeze_indexes freeze_indexes.add(name) def r(): + # If requested routing under '/coreos/download/', render with '/coreos/download/index.html' + # and handle the requested tab view in frontend (sites/static/js/coreos-download.js) + # using the request url. + if (re.search("^coreos_download_.*$", name)): + return render_template(template or '/coreos/download/index.html') return render_template(template or path.strip('/') + '/index.html') r.__name__ = name if freezing: @@ -206,6 +212,9 @@ export_route('server', '/server/') export_route('server_download', '/server/download/') export_route('coreos', '/coreos/') export_route('coreos_download', '/coreos/download/') +export_route('coreos_download_cloud_launchable', '/coreos/download/cloud_launchable/') +export_route('coreos_download_metal_virtualized', '/coreos/download/metal_virtualized/') +export_route('coreos_download_cloud_operators', '/coreos/download/cloud_operators/') export_route('silverblue', '/silverblue/') export_route('silverblue_download', '/silverblue/download/') export_route('iot', '/iot/') diff --git a/sites/static/js/coreos-download.js b/sites/static/js/coreos-download.js index 91d86ed..ac61c1a 100644 --- a/sites/static/js/coreos-download.js +++ b/sites/static/js/coreos-download.js @@ -34,13 +34,13 @@ const prettyPlatforms = { const tabInnerText = { "cloud_launchable": "Cloud Launchable", "metal_virt": "Bare Metal & Virtualized", - "cloud_operator": "For Cloud Operators" + "cloud_operators": "For Cloud Operators" } // frequently used IDs const IdPool = { "cloud_launchable": "cloud-launchable", "metal_virt": "metal-virt", - "cloud_operator": "cloud-operator" + "cloud_operators": "cloud-operator" } function getMember(obj, member) { return (member in obj) ? obj[member] : null; @@ -158,10 +158,10 @@ var coreos_download_app = new Vue({ nav_metal_virt = h('li', { class: "nav-item col-4" }, [ nav_metal_virt_btn ]); cloud_upload_icon = h('i', { class: "fas fa-cloud-upload-alt mr-2" }) - nav_cloud_operator_btn = h('button', { class: "nav-link col-12 h-100 overflow-hidden".concat(this.shownId === IdPool.cloud_operator ? " active" : ""), attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, [ cloud_upload_icon, tabInnerText.cloud_operator ]); - nav_cloud_operator = h('li', { class: "nav-item col-4" }, [ nav_cloud_operator_btn ]); + nav_cloud_operators_btn = h('button', { class: "nav-link col-12 h-100 overflow-hidden".concat(this.shownId === IdPool.cloud_operators ? " active" : ""), attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, [ cloud_upload_icon, tabInnerText.cloud_operators ]); + nav_cloud_operators = h('li', { class: "nav-item col-4" }, [ nav_cloud_operators_btn ]); - navbar = h('ul', { class: "nav nav-tabs" }, [ nav_cloud_launchable, nav_metal_virt, nav_cloud_operator ]); + navbar = h('ul', { class: "nav nav-tabs" }, [ nav_cloud_launchable, nav_metal_virt, nav_cloud_operators ]); return navbar; }, // Add dropdown options of streams @@ -332,6 +332,24 @@ var coreos_download_app = new Vue({ } }, render: function(h) { + // Extracts the route under `/coreos/download/` + const route = window.location.pathname.replace(/\/.*\/coreos\/download\//, '').replace(/\/+$/, ''); + if (route !== '') { + switch(route) { + case 'cloud_launchable': + this.shownId = IdPool.cloud_launchable; + break; + case 'metal_virtualized': + this.shownId = IdPool.metal_virt; + break; + case 'cloud_operators': + this.shownId = IdPool.cloud_operators; + break; + default: + // we shouldn't hit this since the routes are safe-guarded by `sites/getfedora.org/main.py` + this.shownId = IdPool.cloud_launchable; + } + } var signature_sha256_verification_modal = this.getSignatureAndShaModal(h); var stream_select_container = h('div', { class: "pb-0 pt-3 mb-3" }, [ h('div', { class: "container" }, [ this.getStreamName(h), this.getNavbar(h) ]) ]); if (this.loading) { @@ -547,7 +565,7 @@ var coreos_download_app = new Vue({ let cloud_launchable_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: IdPool.cloud_launchable, hidden: this.shownId !== IdPool.cloud_launchable } }, [ cloudLaunchableTitle, cloudLaunchable ]); let metal_virt_container = h('div', { class: "row col-12 py-2 my-2", attrs: { id: IdPool.metal_virt, hidden: this.shownId !== IdPool.metal_virt } }, [ bare_metal_container, virtualized_container ]); - let cloud_operators_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: IdPool.cloud_operator, hidden: this.shownId !== IdPool.cloud_operator } }, [ cloudTitle, verifyBlurb, cloud ]); + let cloud_operators_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: IdPool.cloud_operators, hidden: this.shownId !== IdPool.cloud_operators } }, [ cloudTitle, verifyBlurb, cloud ]); return h('div', {}, [ signature_sha256_verification_modal,