alpheios-project / embed-lib

Alpheios Embedded Library
Other
6 stars 0 forks source link

add ability to hide toolbar entirely #118

Open balmas opened 4 years ago

balmas commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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