', {class: 'igv-logo'})
@@ -105,39 +108,39 @@ class ResponsiveNavbar {
const $navbarRightContainer = $('
', {class: 'igv-navbar-right-container'})
$navBar.append($navbarRightContainer)
+ this.navbarRightContainer = $navbarRightContainer.get(0)
const $toggle_button_container = $('
')
$navbarRightContainer.append($toggle_button_container)
- this.$toggle_button_container = $toggle_button_container
+ const toggleButtonContainer = $toggle_button_container.get(0)
+ this.toggle_button_container = toggleButtonContainer // TODO -- for circular view , refactor this
- this.overlayTrackButton = new OverlayTrackButton(browser, $toggle_button_container.get(0))
+ this.overlayTrackButton = new OverlayTrackButton(toggleButtonContainer, browser)
this.overlayTrackButton.setVisibility(false)
const showMultiSelect = config.showMultiSelectButton !== false
- this.multiTrackSelectButton = new MultiTrackSelectButton(browser, $toggle_button_container.get(0), this, showMultiSelect)
+ this.multiTrackSelectButton = new MultiTrackSelectButton(toggleButtonContainer, browser, this, showMultiSelect)
- this.cursorGuide = new CursorGuide(browser.columnContainer, browser)
+ this.cursorGuideButton = new CursorGuideButton(toggleButtonContainer, browser)
- this.cursorGuideButton = new CursorGuideButton(browser, $toggle_button_container.get(0))
+ this.centerLineButton = new CenterLineButton(toggleButtonContainer, browser)
- this.centerLineButton = new CenterLineButton(browser, $toggle_button_container.get(0))
-
- this.trackLabelControl = new TrackLabelControl($toggle_button_container.get(0), browser)
+ this.trackLabelControl = new TrackLabelControl(toggleButtonContainer, browser)
// ROI Control
- this.roiTableControl = new ROITableControl($toggle_button_container.get(0), browser)
+ this.roiTableControl = new ROITableControl(toggleButtonContainer, browser)
- this.sampleInfoControl = new SampleInfoControl($toggle_button_container.get(0), browser)
+ this.sampleInfoControl = new SampleInfoControl(toggleButtonContainer, browser)
- this.sampleNameControl = new SampleNameControl($toggle_button_container.get(0), browser)
+ this.sampleNameControl = new SampleNameControl(toggleButtonContainer, browser)
if (true === config.showSVGButton) {
- this.saveImageControl = new SaveImageControl($toggle_button_container.get(0), browser)
+ this.saveImageControl = new SaveImageControl(toggleButtonContainer, browser)
}
if (config.customButtons) {
for (let b of config.customButtons) {
- new CustomButton($toggle_button_container.get(0), browser, b)
+ new CustomButton(toggleButtonContainer, browser, b)
}
}
@@ -147,18 +150,18 @@ class ResponsiveNavbar {
this.$navigation.hide()
}
- this.navbarRightContainer = $navbarRightContainer.get(0)
- this.navbarLeftContainer = $navbarLeftContainer.get(0)
+
+
}
navbarDidResize() {
+
const navbarWidth = this.$navigation.width()
const currentClass = this.currentNavbarButtonClass()
if ('igv-navbar-text-button' === currentClass) {
this.textButtonContainerWidth = this.navbarRightContainer.getBoundingClientRect().width
}
-
const browser = this.browser
const isWGV =
(browser.isMultiLocusWholeGenomeView()) ||
@@ -175,8 +178,6 @@ class ResponsiveNavbar {
const delta = rightContainerX - leftContainerExtent
- // console.log(`Current class ${ currentClass } Delta: ${ StringUtils.numberFormatter(Math.floor(delta))}`)
-
let navbarButtonClass
const threshold = 8
if ('igv-navbar-text-button' === currentClass && delta < threshold) {
@@ -188,7 +189,8 @@ class ResponsiveNavbar {
}
}
// Update all the buttons (buttons are listeners)
- if(currentClass !== navbarButtonClass) {
+ if(navbarButtonClass && currentClass !== navbarButtonClass) {
+ this.currentClass = navbarButtonClass
this.browser.fireEvent('navbar-resize', [navbarButtonClass])
}
@@ -250,8 +252,9 @@ class ResponsiveNavbar {
}
currentNavbarButtonClass() {
- const el = this.$navigation.get(0).querySelector('.igv-navbar-text-button')
- return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
+ return this.currentClass
+ //const el = this.$navigation.get(0).querySelector('.igv-navbar-text-button')
+ //return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
}
setEnableTrackSelection(b) {
diff --git a/js/roi/roiTableControl.js b/js/roi/roiTableControl.js
index 07170660c..877281e72 100644
--- a/js/roi/roiTableControl.js
+++ b/js/roi/roiTableControl.js
@@ -32,7 +32,7 @@ class ROITableControl extends NavbarButton {
constructor(parent, browser) {
- super(browser, parent, [ 'ROI', 'Regions of Interest Table' ], buttonLabel, roiImage, roiImageHover, false)
+ super(parent, browser, ['ROI', 'Regions of Interest Table'], buttonLabel, roiImage, roiImageHover, false)
this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowROITable) {
diff --git a/js/sample/sampleInfoControl.js b/js/sample/sampleInfoControl.js
index 0163f4e71..d737e8c3a 100644
--- a/js/sample/sampleInfoControl.js
+++ b/js/sample/sampleInfoControl.js
@@ -32,7 +32,7 @@ class SampleInfoControl extends NavbarButton {
constructor(parent, browser) {
- super(browser, parent, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false)
+ super(parent, browser, 'Sample Info', buttonLabel, sampleInfoImage, sampleInfoImageHover, false)
this.showSampleInfo = false
diff --git a/js/sample/sampleNameControl.js b/js/sample/sampleNameControl.js
index 9e5a8fbdb..5b006b4db 100644
--- a/js/sample/sampleNameControl.js
+++ b/js/sample/sampleNameControl.js
@@ -32,7 +32,7 @@ class SampleNameControl extends NavbarButton {
constructor(parent, browser) {
- super(browser, parent, 'Sample Names', sampleNameButtonLabel, sampleNameImage, sampleNameImageHover, browser.config.showSampleNames)
+ super(parent, browser, 'Sample Names', sampleNameButtonLabel, sampleNameImage, sampleNameImageHover, browser.config.showSampleNames)
this.button.addEventListener('mouseenter', () => {
if (false === browser.showSampleNames) {
diff --git a/js/ui/centerLineButton.js b/js/ui/centerLineButton.js
index 925c9bd90..c0bd0acd6 100644
--- a/js/ui/centerLineButton.js
+++ b/js/ui/centerLineButton.js
@@ -31,9 +31,9 @@ import { buttonLabel } from "./navbarIcons/buttonLabel.js"
class CenterLineButton extends NavbarButton {
- constructor(browser, parent) {
+ constructor(parent, browser) {
- super(browser, parent, 'Center Line', buttonLabel, centerlineImage, centerlineImageHover, browser.config.showCenterGuide)
+ super(parent, browser, 'Center Line', buttonLabel, centerlineImage, centerlineImageHover, browser.config.showCenterGuide)
this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowCenterLine) {
diff --git a/js/ui/cursorGuideButton.js b/js/ui/cursorGuideButton.js
index 623a5a0c6..cd4824290 100644
--- a/js/ui/cursorGuideButton.js
+++ b/js/ui/cursorGuideButton.js
@@ -31,9 +31,9 @@ import { buttonLabel } from "./navbarIcons/buttonLabel.js"
class CursorGuideButton extends NavbarButton {
- constructor(browser, parent) {
+ constructor(parent, browser) {
- super(browser, parent, 'Crosshairs', buttonLabel, cursorImage, cursorImageHover, browser.doShowCursorGuide)
+ super(parent, browser, 'Crosshairs', buttonLabel, cursorImage, cursorImageHover, browser.doShowCursorGuide)
this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowCursorGuide) {
diff --git a/js/ui/multiTrackSelectButton.js b/js/ui/multiTrackSelectButton.js
index c304e3ef0..285136378 100644
--- a/js/ui/multiTrackSelectButton.js
+++ b/js/ui/multiTrackSelectButton.js
@@ -5,9 +5,9 @@ import {multiTrackSelectExclusionTypes} from './menuUtils.js'
class MultiTrackSelectButton extends NavbarButton {
- constructor(browser, parent, navbar, enableMultiTrackSelection, visibility = true) {
+ constructor(parent, browser, navbar, enableMultiTrackSelection, visibility = true) {
- super(browser, parent, 'Select Tracks', buttonLabel, multiSelectImage, multiSelectImageHover, false)
+ super(parent, browser, 'Select Tracks', buttonLabel, multiSelectImage, multiSelectImageHover, false)
this.navbar = navbar
this.enableMultiTrackSelection = false // Initial state
diff --git a/js/ui/navbarButton.js b/js/ui/navbarButton.js
index 28c00fa7f..29218b883 100644
--- a/js/ui/navbarButton.js
+++ b/js/ui/navbarButton.js
@@ -28,7 +28,7 @@ import * as DOMUtils from "../ui/utils/dom-utils.js"
class NavbarButton {
- constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
+ constructor(parent, browser, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
this.browser = browser
@@ -85,7 +85,7 @@ class NavbarButton {
}
configureTextButton(textContent) {
-
+ console.log(`text ${this.title}`)
this.button.classList.add('igv-navbar-text-button')
const tempDiv = document.createElement('div')
@@ -100,6 +100,7 @@ class NavbarButton {
}
configureIconButton() {
+ console.log(`icon ${this.title}`)
this.button.classList.add('igv-navbar-icon-button')
}
diff --git a/js/ui/overlayTrackButton.js b/js/ui/overlayTrackButton.js
index 3be638d96..31a909ef3 100644
--- a/js/ui/overlayTrackButton.js
+++ b/js/ui/overlayTrackButton.js
@@ -5,9 +5,9 @@ import MergedTrack from "../feature/mergedTrack.js"
class OverlayTrackButton extends NavbarButton {
- constructor(browser, parent) {
+ constructor(parent, browser) {
- super(browser, parent, 'Overlay Tracks', buttonLabel, overlayTrackImage, overlayTrackImageHover, false)
+ super(parent, browser, 'Overlay Tracks', buttonLabel, overlayTrackImage, overlayTrackImageHover, false)
this.button.addEventListener('mouseenter', () => this.setState(true))
this.button.addEventListener('mouseleave', () => this.setState(false))
diff --git a/js/ui/saveImageControl.js b/js/ui/saveImageControl.js
index 785040a82..fd31ad5ee 100644
--- a/js/ui/saveImageControl.js
+++ b/js/ui/saveImageControl.js
@@ -33,7 +33,7 @@ import { buttonLabel } from "./navbarIcons/buttonLabel.js"
class SaveImageControl extends NavbarButton {
constructor(parent, browser) {
- super(browser, parent, 'Save Image', buttonLabel, imageSaveImageSVG, imageSaveImageHoverSVG, false)
+ super(parent, browser, 'Save Image', buttonLabel, imageSaveImageSVG, imageSaveImageHoverSVG, false)
this.button.addEventListener('mouseenter', () => this.setState(true))
diff --git a/js/ui/trackLabelControl.js b/js/ui/trackLabelControl.js
index adc43cfab..e98973fd7 100644
--- a/js/ui/trackLabelControl.js
+++ b/js/ui/trackLabelControl.js
@@ -32,7 +32,7 @@ class TrackLabelControl extends NavbarButton {
constructor(parent, browser) {
- super(browser, parent, 'Track Labels', buttonLabel, trackLabelsImage, trackLabelsImageHover, browser.config.showTrackLabels)
+ super(parent, browser, 'Track Labels', buttonLabel, trackLabelsImage, trackLabelsImageHover, browser.config.showTrackLabels)
this.button.addEventListener('mouseenter', () => {
if (false === browser.doShowTrackLabels) {