add to the ontology viewer tabs a language selector pinned to the right

app/components/tabs_container_component/tabs_container_component_controller.js

@@ -1,39 +1,43 @@
-import { Controller } from "@hotwired/stimulus";
+import {Controller} from "@hotwired/stimulus";
 import {HistoryService} from "../../javascript/mixins/useHistory";
 
 export default class extends Controller {
 
-  connect() {
-    this.event = null
-  }
+    connect() {
+        this.event = null
+    }
 
 
-  selectTab(event) {
-    this.event = event
-    if(this.#parameter()){
-      this.#updateURL()
+    selectTab(event) {
+        this.event = event
+        if (this.#parameter()) {
+            this.#updateURL()
+        }
+        this.element.dispatchEvent(new CustomEvent("tab-selected", {
+            bubbles: true,
+            detail: {data: {selectedTab: this.#pageId()}}
+        }))
     }
-  }
 
-  #pageId(){
-    return this.event.currentTarget.getAttribute("data-tab-id")
-  }
+    #pageId() {
+        return this.event.currentTarget.getAttribute("data-tab-id")
+    }
 
-  #title(){
-    return this.event.currentTarget.getAttribute("data-tab-title")
-  }
+    #title() {
+        return this.event.currentTarget.getAttribute("data-tab-title")
+    }
 
-  #parameter(){
-    return this.event.currentTarget.getAttribute("data-url-parameter")
-  }
+    #parameter() {
+        return this.event.currentTarget.getAttribute("data-url-parameter")
+    }
 
 
-  #url(){
-    return `?${this.#parameter()}=${this.#pageId()}`
-  }
+    #url() {
+        return `?${this.#parameter()}=${this.#pageId()}`
+    }
 
-  #updateURL(){
-    (new HistoryService()).pushState({[this.#parameter()]: this.#pageId()}, this.#title(), this.#url());
-  }
+    #updateURL() {
+        (new HistoryService()).pushState({[this.#parameter()]: this.#pageId()}, this.#title(), this.#url());
+    }
 
 }

app/helpers/ontologies_helper.rb

@@ -457,7 +457,7 @@ def language_selector_tag(name)
         end
       end
     else
-      select_tag name, languages_options, class: 'custom-select', disabled: !ontology_data_section?, style: "visibility: #{ontology_data_section? ? 'visible' : 'hidden'}; margin-bottom: -10px;", data: {'ontology-viewer-tabs-target': 'languageSelector'}
+      select_tag name, languages_options, class: '', disabled: !ontology_data_section?, style: "visibility: #{ontology_data_section? ? 'visible' : 'hidden'}; border: none; outline: none;", data: {'ontology-viewer-tabs-target': 'languageSelector'}
     end
   end
 

app/javascript/controllers/ontology_viewer_tabs_controller.js

@@ -26,16 +26,9 @@ export default class extends Controller {
     this.changeEvent.removeEventListener()
   }
 
-  selectTab(event) {
-    this.#updateURL(event)
-  }
-
-  #updateURL(event){
-    const page = event.target.getAttribute("data-bp-ont-page");
-    const page_name = event.target.getAttribute("data-bp-ont-page-name");
-
-    (new HistoryService()).pushState({p: page}, page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site, "?p=" + page);
-
+  updateLanguageSelector(event) {
+    console.log('language selector update')
+    let page = event.detail.data.selectedTab
     this.#disableLanguageSelector(page)
   }
 

app/views/layouts/_ontology_viewer.html.haml

@@ -45,18 +45,21 @@
     %div.col
       = render partial: 'layouts/ontology_viewer/header'
 
-  %div.row.pb-4.p-2.bg-white{data: {controller: '', 'ontology-viewer-tabs-language-sections-value': ontology_data_sections }}
+  %div.row.pb-4.p-2.bg-white{data: {controller: 'ontology-viewer-tabs', 'ontology-viewer-tabs-language-sections-value': ontology_data_sections }}
     %div.col
       - sections = sections_to_show
-      %div.ontologies-tabs-container
-        = render TabsContainerComponent.new(url_parameter: 'p') do |t|
+      %div.ontologies-tabs-container{data:{action: 'tab-selected->ontology-viewer-tabs#updateLanguageSelector'}}
+        = render TabsContainerComponent.new(id: 'ontology_viewer', url_parameter: 'p') do |t|
           - sections.each do |section_title|
             - t.item(title: section_title,
                      path: ontology_path(@ontology.acronym, p: section_title),
                      selected: selected_section?(section_title),
                      page_name: ontology_viewer_page_name(@ontology.name, @concept&.prefLabel || '', section_title))
+            - t.pinned_right do
+              = language_selector_tag(:language_selector)
             - t.item_content do
-              %div.p-1
+              %div.p-1{data: section_data(section_title)}
+                = language_selector_hidden_tag(section_title) if ontology_data_section?(section_title)
                 = lazy_load_section(section_title) { yield }