Source: timeline/visualisation/bsDropdown.js

  1. /**
  2.  * @module meteoJS/timeline/visualisation/bsDropdown
  3.  */
  4. import $ from 'jquery';
  5. import Visualisation from '../Visualisation.js';
  6. import Text from './Text.js';
  8. /**
  9.  * Options for constructor.
  10.  * 
  11.  * @typedef {module:meteoJS/timeline/visualisation~options}
  12.  *   module:meteoJS/timeline/visualisation/bsDropdown~options
  13.  * @param {string|undefined} format
  14.  *   Format string for dropdown items, used for 'getTimeText'.
  15.  * @param {string|undefined} buttonFormat
  16.  *   Format string for dropdown button, used for 'getTimeText'.
  17.  * @param {string} grouping
  18.  *   'daily', 'hourly' or a format string. Defines if items will be grouped and
  19.  *   be title depending on groupingDivider and groupingFormat.
  20.  * @param {boolean} groupingDivider Show dropdown divider above an item group.
  21.  * @param {undefined|string} groupingFormat
  22.  *   Format string for a dropdown header above an item group.
  23.  * @param {undefined|string} classMain Class for the main node.
  24.  * @param {undefined|string} classDropdownMenu Class for the dropdown node.
  25.  * @param {undefined|string} classDropdownItem Class for a dropdown item.
  26.  * @param {undefined|string} classItemActive Class for an active item.
  27.  * @param {undefined|string} classItemNotEnabled Class for a not enabled item.
  28.  * @param {undefined|string} classItemEnabled Class for an enabled item.
  29.  * @param {undefined|string} classItemAllEnabled Class for an all enabled item.
  30.  * @param {undefined|string} classDropdownHeader Class for dropdown header.
  31.  * @param {undefined|string} classDropdownDivider Class for dropdown divider.
  32.  * @param {undefined|string} classDropdownButton Class for the dropdown button.
  33.  * @param {undefined|string} classButtonNotEnabled
  34.  *   Class for the dropdown button if the selected time is not enabled.
  35.  * @param {undefined|string} classButtonEnabled
  36.  *   Class for the dropdown button if the selected time is enabled.
  37.  * @param {undefined|string} classButtonAllEnabled
  38.  *   Class for the dropdown button if the selected time is all enabled.
  39.  */
  41. /**
  42.  * Show timeline in a dropdown menu. The menu will be build according to
  43.  * bootstrap.
  44.  * 
  45.  * <pre><code>import bsDropdown from 'meteojs/timeline/visualisation/bsDropdown';</code></pre>
  46.  * 
  47.  * @extends module:meteoJS/timeline/visualisation.Visualisation
  48.  */
  49. export class bsDropdown extends Visualisation {
  50.   
  51.   /**
  52.    * @param {module:meteoJS/timeline/visualisation/bsDropdown~options} options - Options.
  53.    */
  54.   constructor({
  55.     format = 'HH:mm',
  56.     buttonFormat = 'DD. MMMM YYYY HH:mm',
  57.     grouping = 'daily',
  58.     groupingDivider = true,
  59.     groupingFormat = 'ddd, DD. MMMM YYYY',
  60.     classMain = 'dropdown',
  61.     classDropdownMenu = 'dropdown-menu',
  62.     classDropdownItem = 'dropdown-item',
  63.     classItemActive = 'active',
  64.     classItemNotEnabled = 'disabled',
  65.     classItemEnabled = undefined,
  66.     classItemAllEnabled = undefined,
  67.     classDropdownHeader = 'dropdown-header',
  68.     classDropdownDivider = 'dropdown-divider',
  69.     classDropdownButton = 'btn dropdown-toggle',
  70.     classButtonNotEnabled = undefined,
  71.     classButtonEnabled = undefined,
  72.     classButtonAllEnabled = undefined,
  73.     ...rest
  74.   } = {}) {
  75.     super(rest);
  76.     
  77.     this.options.format = format;
  78.     this.options.buttonFormat = buttonFormat;
  79.     this.options.grouping = grouping;
  80.     this.options.groupingDivider = groupingDivider;
  81.     this.options.groupingFormat = groupingFormat;
  82.     this.options.classMain = classMain;
  83.     this.options.classDropdownMenu = classDropdownMenu;
  84.     this.options.classDropdownItem = classDropdownItem;
  85.     this.options.classItemActive = classItemActive;
  86.     this.options.classItemNotEnabled = classItemNotEnabled;
  87.     this.options.classItemEnabled = classItemEnabled;
  88.     this.options.classItemAllEnabled = classItemAllEnabled;
  89.     this.options.classDropdownHeader = classDropdownHeader;
  90.     this.options.classDropdownDivider = classDropdownDivider;
  91.     this.options.classDropdownButton = classDropdownButton;
  92.     this.options.classButtonNotEnabled = classButtonNotEnabled;
  93.     this.options.classButtonEnabled = classButtonEnabled;
  94.     this.options.classButtonAllEnabled = classButtonAllEnabled;
  95.     
  96.     /**
  97.      * @member {module:meteoJS/timeline/visualisation/text.Text}
  98.      * @private
  99.      */
  100.     this.visualisationButtonText = new Text({
  101.       timeline: this.options.timeline,
  102.       format: this.options.buttonFormat,
  103.       textInvalid: this.options.textInvalid,
  104.       outputTimezone: this.options.outputTimezone,
  105.       getTimeText: this.options.getTimeText
  106.     });
  107.     /**
  108.      * @member {external:jQuery|undefined}
  109.      * @private
  110.      */
  111.     this.dropdownNode = undefined;
  112.     
  113.     this.setNode(this.options.node);
  114.   }
  115.   
  116.   /**
  117.    * @inheritdoc
  118.    */
  119.   setOutputTimezone(outputTimezone) {
  120.     super.setOutputTimezone(outputTimezone);
  121.     this.visualisationButtonText.setOutputTimezone(outputTimezone);
  122.     return this;
  123.   }
  124.   
  125.   /**
  126.    * @inheritdoc
  127.    */
  128.   onChangeTime() {
  129.     if (this.dropdownNode === undefined)
  130.       return;
  131.     
  132.     var time = this.options.timeline.getSelectedTime();
  133.     this.options.node.children('li').children('button')
  134.       .removeClass(this.options.classButtonActive)
  135.       .removeClass(this.options.classButtonNotEnabled)
  136.       .removeClass(this.options.classButtonEnabled)
  137.       .removeClass(this.options.classButtonAllEnabled);
  138.     if (this.options.timeline.isTimeAllEnabled(time))
  139.       this.options.node.children('button')
  140.         .addClass(this.options.classButtonAllEnabled);
  141.     else if (this.options.timeline.isTimeEnabled(time))
  142.       this.options.node.children('button')
  143.         .addClass(this.options.classButtonEnabled);
  144.     else
  145.       this.options.node.children('button')
  146.         .addClass(this.options.classButtonNotEnabled);
  147.     var that = this;
  148.     this.dropdownNode
  149.       .children('li')
  150.       .children('button.'+this.options.classDropdownItem)
  151.       .each(function () {
  152.         var t = new Date(+$(this).data('time'));
  153.         $(this)
  154.           .removeClass(that.options.classItemActive)
  155.           .removeClass(that.options.classItemNotEnabled)
  156.           .removeClass(that.options.classItemEnabled)
  157.           .removeClass(that.options.classItemAllEnabled);
  158.         if (time.valueOf() == t.valueOf())
  159.           $(this).addClass(that.options.classItemActive);
  160.         else if (that.options.timeline.isTimeAllEnabled(t))
  161.           $(this).addClass(that.options.classItemAllEnabled);
  162.         else if (that.options.timeline.isTimeEnabled(t))
  163.           $(this).addClass(that.options.classItemEnabled);
  164.         else
  165.           $(this).addClass(that.options.classItemNotEnabled);
  166.       });
  167.   }
  168.   
  169.   /**
  170.    * @inheritdoc
  171.    */
  172.   onChangeTimes() {
  173.     if (this.dropdownNode === undefined)
  174.       this.dropdownNode = $('<div>');
  175.     this.dropdownNode.empty();
  176.     
  177.     var groupingFormat =
  178.             (this.options.grouping == 'daily') ? 'YYYY-MM-DD' :
  179.               (this.options.grouping == 'hourly') ? 'YYYY-MM-DD HH' :
  180.                 this.options.grouping;
  181.     var lastGroupTimeStr = undefined;
  182.     this.getTimelineTimes().forEach(function (time) {
  183.       if (lastGroupTimeStr === undefined ||
  184.                     lastGroupTimeStr != this.timeToText(time, groupingFormat)) {
  185.         if (lastGroupTimeStr !== undefined && // No divider at the beginning
  186.                         this.options.groupingDivider)
  187.           this.dropdownNode
  188.             .append($('<div>')
  189.               .addClass(this.options.classDropdownDivider));
  190.         if (this.options.groupingFormat !== undefined)
  191.           this.dropdownNode
  192.             .append($('<h6>')
  193.               .addClass(this.options.classDropdownHeader)
  194.               .text(this.timeToText(time, this.options.groupingFormat)));
  195.         lastGroupTimeStr = this.timeToText(time, groupingFormat);
  196.       }
  197.       var btn = $('<button>')
  198.         .addClass(this.options.classDropdownItem)
  199.         .attr('type', 'button')
  200.         .text(this.timeToText(time, this.options.format))
  201.         .data('time', time.valueOf());
  202.       var that = this;
  203.       btn.click(function () {
  204.         that.options.timeline.setSelectedTime(new Date(+$(this).data('time')));
  205.         that.trigger('input');
  206.       });
  207.       this.dropdownNode.append($('<li>').append(btn));
  208.     }, this);
  209.   }
  210.   
  211.   /**
  212.    * @inheritdoc
  213.    */
  214.   emptyNode() {
  215.     if (this.visualisationButtonText !== undefined)
  216.       this.visualisationButtonText.setNode(undefined);
  217.     this.dropdownNode = undefined;
  218.     this.options.node.empty();
  219.   }
  220.   
  221.   /**
  222.    * @inheritdoc
  223.    */
  224.   onInitNode() {
  225.     var id = 'dropdownMenuButton';
  226.     var i=0;
  227.     while (document.getElementById(id) != null) {
  228.       id = 'dropdownMenuButton'+(++i);
  229.     }
  230.     
  231.     var button = $('<button>')
  232.       .addClass(this.options.classDropdownButton)
  233.       .attr('type', 'button')
  234.       .attr('id', id)
  235.       .attr('data-bs-toggle', 'dropdown')
  236.       .attr('aria-haspopup', true)
  237.       .attr('aria-expanded', false);
  238.     this.visualisationButtonText.setNode(button);
  239.     this.dropdownNode = $('<ul>')
  240.       .addClass(this.options.classDropdownMenu)
  241.       .attr('aria-labelledby', id);
  242.     this.options.node
  243.       .addClass(this.options.classMain)
  244.       .append(button)
  245.       .append(this.dropdownNode);
  246.   }
  247.   
  248. }
  249. export default bsDropdown;