CODEWITHSUNDEEP
javascriptamcharts
user3062437
user3062437

Reputation: 357

Amchart Export button and menu do not disappear after click

I am using AmCharts' export plugin and I noticed that when I click on the export button or export drop down menus, it stays active and does not get hidden. The active class also does not change after clicking next menu.

You can see this in my attached screenshot where I clicked both "Download as" and "Save as".

enter image description here

  'export': {
                        'enabled': true,
                        'divId': 'amchart-export-wrapper',
                        // 'menu': ['JPG', 'PNG','PDF','SVG'],
                        'libs': {
                            'path': '../bower_components/amcharts-src/amcharts/plugins/export/libs/'
                        }
                    }

Upvotes: 1

Views: 1676

Answers (1)

user3062437
user3062437

Reputation: 357

I have fixed that issue using a directive 

<span id="amchart-export-wrapper" export-menu-class></span>

'export': {
                    'enabled': true,
                    'divId': 'amchart-export-wrapper',
                    // 'menu': ['JPG', 'PNG','PDF','SVG'],
                    'libs': {
                        'path': '../bower_components/amcharts-src/amcharts/plugins/export/libs/'
                    }
                }

exportMenuDirective:

angular.module('myapp').directive('exportMenuClass',
['$document',
function($document) {
  return {
    restrict: 'A',
    link: function($scope, $element) {
      function removeActiveClass() {
        $element.find('.export-main.active').removeClass('active');
        $element.find('.export-main li.active').removeClass('active');
      }
      $document.on('click', function() {
        removeActiveClass();
      });
      $element.on('click', '.export-main,.export-main li', function(event) {            
        event.stopPropagation();
        event.preventDefault();
        removeActiveClass();
        angular.element(event.currentTarget).addClass('active');
      });
      $element.bind('mouseleave', function() {
        removeActiveClass();
      });
    },
  };
}]
);

Upvotes: 1

Related Questions