adjust export button position

dabeng · Feb 20, 2021 · ead138f · ead138f
1 parent aab9621
commit ead138f
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 31 deletions.
diff --git a/demo/edit-chart.html b/demo/edit-chart.html
@@ -77,9 +77,6 @@
 
     var oc = $('#chart-container').orgchart({
       'data' : datascource,
-      'chartClass': 'edit-state',
-      'exportButton': true,
-      'exportFilename': 'SportsChart',
       'createNode': function($node, data) {
         $node[0].id = getId();
       }

diff --git a/demo/edit-hybrid-chart.html b/demo/edit-hybrid-chart.html
@@ -78,9 +78,6 @@
 
     var oc = $('#chart-container').orgchart({
       'data' : datascource,
-      'chartClass': 'edit-state',
-      'exportButton': true,
-      'exportFilename': 'SportsChart',
       'verticalLevel': 3,
       'createNode': function($node, data) {
         $node[0].id = getId();

diff --git a/dist/css/jquery.orgchart.css b/dist/css/jquery.orgchart.css
@@ -413,9 +413,7 @@
 }
 
 .oc-export-btn {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  margin-left: 0.5rem;
   padding: 0.5rem 1rem;
 }
 

diff --git a/dist/css/jquery.orgchart.min.css b/dist/css/jquery.orgchart.min.css
diff --git a/dist/js/jquery.orgchart.js b/dist/js/jquery.orgchart.js
@@ -89,7 +89,7 @@
       $chartContainer.append($chart);
 
       // append the export button
-      if (this.options.exportButton && !$chartContainer.find('.oc-export-btn').length) {
+      if (this.options.exportButton && !$('.oc-export-btn').length) {
         this.attachExportButton();
       }
 
@@ -136,18 +136,18 @@
       var initEvent = $.Event('hide-' + rel + '.orgchart');
       $target.trigger(initEvent);
     },
-    //
+    // add export button for orgchart
     attachExportButton: function () {
       var that = this;
       var $exportBtn = $('<button>', {
-        'class': 'oc-export-btn' + (this.options.chartClass !== '' ? ' ' + this.options.chartClass : ''),
+        'class': 'oc-export-btn',
         'text': this.options.exportButtonName,
         'click': function(e) {
           e.preventDefault();
           that.export();
         }
       });
-      this.$chartContainer.append($exportBtn);
+      this.$chartContainer.after($exportBtn);
     },
     setOptions: function (opts, val) {
       if (typeof opts === 'string') {
@@ -693,7 +693,7 @@
       $edge.parent().append('<i class="oci oci-spinner spinner"></i>')
         .children().not('.spinner').css('opacity', 0.2);
       $chart.data('inAjax', true);
-      $('.oc-export-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '')).prop('disabled', true);
+      $('.oc-export-btn').prop('disabled', true);
       return true;
     },
     // terminate loading status for requesting new nodes
@@ -703,7 +703,7 @@
       $node.find('.spinner').remove();
       $node.children().removeAttr('style');
       this.$chart.data('inAjax', false);
-      $('.oc-export-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '')).prop('disabled', false);
+      $('.oc-export-btn').prop('disabled', false);
     },
     // whether the cursor is hovering over the node
     isInAction: function ($node) {
@@ -1461,7 +1461,7 @@
             .end().end().remove();
         }
       } else { // if $node is root node
-        $wrapper.closest('.orgchart').siblings('.oc-export-btn').addBack().remove();
+        $wrapper.closest('.orgchart').remove();
       }
     },
     //

diff --git a/dist/js/jquery.orgchart.min.js b/dist/js/jquery.orgchart.min.js
diff --git a/dist/js/jquery.orgchart.min.js.map b/dist/js/jquery.orgchart.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.min.js",
   "style": [

diff --git a/src/css/jquery.orgchart.css b/src/css/jquery.orgchart.css
@@ -413,9 +413,7 @@
 }
 
 .oc-export-btn {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  margin-left: 0.5rem;
   padding: 0.5rem 1rem;
 }
 

diff --git a/src/js/jquery.orgchart.js b/src/js/jquery.orgchart.js
@@ -89,7 +89,7 @@
       $chartContainer.append($chart);
 
       // append the export button
-      if (this.options.exportButton && !$chartContainer.find('.oc-export-btn').length) {
+      if (this.options.exportButton && !$('.oc-export-btn').length) {
         this.attachExportButton();
       }
 
@@ -136,18 +136,18 @@
       var initEvent = $.Event('hide-' + rel + '.orgchart');
       $target.trigger(initEvent);
     },
-    //
+    // add export button for orgchart
     attachExportButton: function () {
       var that = this;
       var $exportBtn = $('<button>', {
-        'class': 'oc-export-btn' + (this.options.chartClass !== '' ? ' ' + this.options.chartClass : ''),
+        'class': 'oc-export-btn',
         'text': this.options.exportButtonName,
         'click': function(e) {
           e.preventDefault();
           that.export();
         }
       });
-      this.$chartContainer.append($exportBtn);
+      this.$chartContainer.after($exportBtn);
     },
     setOptions: function (opts, val) {
       if (typeof opts === 'string') {
@@ -693,7 +693,7 @@
       $edge.parent().append('<i class="oci oci-spinner spinner"></i>')
         .children().not('.spinner').css('opacity', 0.2);
       $chart.data('inAjax', true);
-      $('.oc-export-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '')).prop('disabled', true);
+      $('.oc-export-btn').prop('disabled', true);
       return true;
     },
     // terminate loading status for requesting new nodes
@@ -703,7 +703,7 @@
       $node.find('.spinner').remove();
       $node.children().removeAttr('style');
       this.$chart.data('inAjax', false);
-      $('.oc-export-btn' + (this.options.chartClass !== '' ? '.' + this.options.chartClass : '')).prop('disabled', false);
+      $('.oc-export-btn').prop('disabled', false);
     },
     // whether the cursor is hovering over the node
     isInAction: function ($node) {
@@ -1461,7 +1461,7 @@
             .end().end().remove();
         }
       } else { // if $node is root node
-        $wrapper.closest('.orgchart').siblings('.oc-export-btn').addBack().remove();
+        $wrapper.closest('.orgchart').remove();
       }
     },
     //

diff --git a/test/integration/init-tests.js b/test/integration/init-tests.js
@@ -181,7 +181,7 @@ describe('orgchart -- integration tests', function () {
         'data': ds,
         'exportButton': true
       });
-      $container.children('button').prop('outerHTML').should.equal('<button class="oc-export-btn">Export</button>');
+      $('.oc-export-btn').prop('outerHTML').should.equal('<button class="oc-export-btn">Export</button>');
     });
 
     it('initialize chart with "bottom to top" direction', function () {