Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add ability to hide toolbar entirely #118

Open
balmas opened this issue Jul 20, 2020 · 2 comments
Open

add ability to hide toolbar entirely #118

balmas opened this issue Jul 20, 2020 · 2 comments

Comments

@balmas
Copy link
Member

balmas commented Jul 20, 2020

in @zfletch 's Stoic Commentaries he has done this via overriding the css to hide the toolbar:

#alpheios-toolbar-inner {
  display: none;
}

@PietroLiuzzo has also expressed interest in this feature and it might be nice to add it as an option in the embed-lib api

@zfletch
Copy link
Contributor

zfletch commented Jul 22, 2020

For Stoic Commentary, I think what we would want to do eventually is have a button with the Alpheios logo that toggles the toolbar.

@balmas
Copy link
Member Author

balmas commented Jul 22, 2020

For Stoic Commentary, I think what we would want to do eventually is have a button with the Alpheios logo that toggles the toolbar.

This is partially possible now, but only on mobile and it's not really documented.

Currently the embed-lib api has a layoutType parameter with two supported values default and readingTools. If set to readingTools it the plaform is a mobile device, it doesn't add the toolbar to the page. Instead the embedding page can use the following api methods to open the toolbar and/or lookup features of the actionPanel, attaching them to its own UI elements in the page.

Embedded.openActionPanel() (opens the default actionPanel)
Embedded.openActionPanelToolbar() (opens the toolbar component of the actionPanel)
Embedded.openActionPanelLookup() (opens the lookup component of the actionPanel)

An example of how these are used (from https://github.com/alpheios-project/alpheios_nemo_ui/blob/master/alpheios_nemo_ui/data/assets/js/alpheios-embed-support.js) :

...
embedded.activate().then(function () {
  import (embedUrl)
  .then(m => embedPostActivation(embedded))
  .catch(e => console.error(`There is an error importing alpheios-embed-support.js:`, e))
})

let embedPostActivation = function (embedded) {
  if (embedded.platform.isMobile) {
    let lookupEl = document.querySelector('#alph-lookup-ctrl')
    if (lookupEl) {
      lookupEl.addEventListener('click', function () {
        embedded.openActionPanelLookup()
      }, { passive: true })
    }
    let toolsEl = document.querySelector('#alph-tools-ctrl')
    if (toolsEl) {
      toolsEl.addEventListener('click', function () {
        embedded.openActionPanelToolbar()
      }, { passive: true })
    }
  } else {
    let helpControl = document.querySelector(".alpheios-toolbar__help-control")
    if (helpControl) {
      helpControl.setAttribute('data-toggle','modal')
      helpControl.setAttribute('data-target',"#helpPopup")
    }
  }
}

I think maybe we would want to add some new layoutTypes that support a variety of different configurations

zfletch added a commit to perseids-project/stoic-commentary that referenced this issue Jul 27, 2020
Temporarily turn off Alpheios Tools due to performance issues in
Firefox. When enabled, it causes the browser to lock up for 200-500ms
for some reason.

Possibly re-enable it with a later version of configure it to activate
when a user clicks a button (see
alpheios-project/embed-lib#118 (comment))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants