{"size": 4316, "ext": "js", "max_stars_repo_path": "jupyter_datatables/js/toolbar.js", "max_stars_repo_name": "manuelkammermann/jupyter-datatables", "max_stars_repo_stars_event_min_datetime": "2019-04-11T21:39:54.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-04T23:14:47.000Z", "max_issues_repo_path": "jupyter_datatables/js/toolbar.js", "max_issues_repo_name": "manuelkammermann/jupyter-datatables", "max_issues_repo_issues_event_min_datetime": "2019-04-22T12:15:02.000Z", "max_issues_repo_issues_event_max_datetime": "2020-04-23T12:51:23.000Z", "max_forks_repo_path": "jupyter_datatables/js/toolbar.js", "max_forks_repo_name": "manuelkammermann/jupyter-datatables", "max_forks_repo_forks_event_min_datetime": "2019-08-06T03:54:35.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-16T04:16:12.000Z"}
{"max_stars_count": 145, "max_issues_count": 29, "max_forks_count": 18, "avg_line_length": 35.0894308943, "max_line_length": 130, "alphanum_fraction": 0.6285912882}
/**
 * Jupyter DataTables
 *
 * @module
 * @summary     Jupyter DataTables
 * @description Jupyter interactive pandas DataFrame representation leveraging pandas, DataTables and ChartJS.
 * @file        toolbar.js
 * @author      Marek Cermak
 * @contact     macermak@redhat.com
 * @copyright   Copyright 2019 Marek Cermak <macermak@redhat.com>
 *
 * This source file is free software, available under the following license:
 *   MIT license
 *
 * This source file is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 *
 * For details please refer to: https://github.com/CermakM/jupyter-datatables
 */

define('dt-toolbar', ['dt-components'], function (components) {

  const templates = components.templates

  return class Toolbar {
    constructor(chart, dtype) {
      this.chart = chart
      this.dtype = dtype

      this.settings = components.createElementFromTemplate(templates.DTSettingsComponentTemplate)
      this.settingsButton = components.createElementFromTemplate(templates.DTSettingsButtonComponentTemplate)

      $(this.settingsButton).click(() => {
        if (this.settingsContainer.style.display != 'none') {
          // settings already visible, just toggle
          $(this.settingsContainer).hide()
        } else {
          const offset = {}
          const margin = { top: 20, left: 0 }

          offset.top = $(this.settingsButton).offset().top - $(output_area.element).offset().top
          offset.top = offset.top + margin.top

          offset.left = $(this.settingsButton).offset().left - $(output_area.element).offset().left
          offset.left = offset.left + margin.left

          $(this.settingsContainer).css(offset).show()

          if (!_.isUndefined(this.dtype)) {
            const allowedChartTypes = $.fn.dataTable.defaults.chartMap[this.dtype]

            $(this.settings).find('.dt-chart-type').each((i, e) => {
              const chartName = e.dataset.chart_name

              // check active chart type
              $(e).toggleClass('is-active', chartName === chart.name)

              // check which chart types are not allowed for the current dtype and disable them
              if (!allowedChartTypes.includes(chartName)) {
                $(e).addClass('is-disabled')
                console.debug(`Chart type '${chartName}' is not allowed for dtype '${dtype}'`)
              } else {
                // in case dtype changes for some reason
                $(e).removeClass('is-disabled')
              }
            })
          }

          // click anywhere else hides the settings
          setTimeout(() => {
            $(document).one('click', () => $(this.settingsContainer).hide())
          }, 20)
        }
      })

      this.settingsContainer = document.createElement('div', { is: 'dt-container' })
      this.settingsContainer.classList.add('dt-chart-settings-container')

      $(this.settingsContainer).append(this.settings)
      $(this.settingsContainer).css({ position: 'absolute' })
      $(this.settingsContainer).hide()

      // Append to the output area to allow overlay
      const output_area = Jupyter.notebook.get_executed_cell().output_area
      $(output_area.element).append(this.settingsContainer)

      this.container = document.createElement('div', { is: 'dt-container' })
      this.container.classList.add('dt-chart-toolbar')

      $(this.container).append(this.settingsButton)
    }

    empty() {
      this.destroy(false)
    }

    destroy(container = true) {
      this.settings.remove()
      this.settingsButton.remove()
      this.settingsContainer.remove()

      // finally remove the toolbar container itself if `container` is specified
      if (container) { this.container.remove() } else { $(this.container).empty() } // remove all children but leave the container
    }

    onClick(callback, selector) {
      let selection = $(this.settings).find(selector)

      if (selection.length <= 0) { throw new Error(`Selector '${selector}' dit not match any elements.`) }

      selection.each((i, elt) => {
        $(elt).click(e => {
          e.preventDefault()

          callback.call(elt, e, this.chart)
        })
      })
    }
  }

})
