#84 coreos-download: fix inconsistent button and tab view
Merged 9 months ago by rfairley. Opened 9 months ago by abai.
fedora-web/ abai/websites coreos-download  into  master

@@ -35,6 +35,12 @@ 

    "metal_virt": "Bare Metal & Virtualized",

    "cloud_operator": "For Cloud Operators"

  }

+ // frequently used IDs

+ const IdPool = {

+   "cloud_launchable": "cloud-launchable",

+   "metal_virt": "metal-virt",

+   "cloud_operator": "cloud-operator"

+ }

  function getMember(obj, member) {

    return (member in obj) ? obj[member] : null;

  }
@@ -76,6 +82,8 @@ 

    el: '#coreos-download-app',

    created: function() { this.refreshStream() },

    data: {

+     // currently shown tab

+     shownId: IdPool.cloud_launchable,

      // currently selected stream

      stream: 'testing',

      // currently selected architecture
@@ -128,21 +136,16 @@ 

        }

      },

      toggleHidden: function(e) {

-       const id_list = ['cloud-launchable', 'metal-virt', 'cloud-operator'];

-       switch(e.target.innerText) {

-         case tabInnerText.cloud_launchable:

-           show_id = 'cloud-launchable';

-           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

-           break;

-         case tabInnerText.metal_virt:

-           show_id = 'metal-virt';

-           id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

-           break;

-         case tabInnerText.cloud_operator:

-           show_id = 'cloud-operator';

+       const id_list = Object.values(IdPool);

+       Object.entries(tabInnerText).map(pair => {

+         const key = pair[0];

+         const val = pair[1];

+         if (val === e.target.innerText) {

+           const show_id = IdPool[key];

            id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

-           break;

-       }

+           this.shownId = show_id;

+         }

+       });

      },

      getNavbar: function(h) {

        cloud_icon = h('i', { class: "fas fa-cloud mr-2" })
@@ -488,9 +491,9 @@ 

        let bare_metal_container = h('div', { class: "col-6" }, [ bareMetalTitle, verifyBlurb, bareMetal ]);

        let virtualized_container = h('div', { class: "col-6" }, [ virtualizedTitle, verifyBlurb, virtualized ]);

  

-       let cloud_launchable_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: "cloud-launchable", hidden: false} }, [ cloudLaunchableTitle, cloudLaunchable ]);

-       let metal_virt_container = h('div', { class: "row col-12 py-2 my-2", attrs: { id: "metal-virt", hidden: true } }, [ bare_metal_container, virtualized_container ]);

-       let cloud_operators_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: "cloud-operator", hidden: true } }, [ cloudTitle, verifyBlurb, cloud ]);

+       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 ]);

  

        return h('div', {}, [

          stream_select_container,

Fixes a bug that when users select a stream, the div section will be re-rendered into
default "Cloud Launchable" instead of the tab users selected, creating inconsistency
between tab button and tab view.

To reproduce, select a tab other than "Cloud Launchable", say "For Cloud Operators".
If we now select another stream, the div section below will be re-rendered with the
default "Cloud Launchable".

Also factors out the frequently used div IDs and deduplicates "toggleHidden" function.

Signed-off-by: Allen Bai abai@redhat.com

LGTM! Tested locally and this works well.

Pull-Request has been merged by rfairley

9 months ago
Metadata