Repository: zeppelin Updated Branches: refs/heads/master d1606c248 -> 14534da9e
[ZEPPELIN-3616] fix editor sections auto-collapse This PR change logic of add new event listener on frontend. Now then add new event listener, also added destroy listener. Destroy listener attach to some DOM element and then this element destroyed listener drop event listener. Since the old listeners were not deleted when changing the size of the paragraph / window, an error occurred. Because of this error, updating the text in the paragraph did not happen until the end. <p align="center">before (77 lis.)</p>  <p align="center">after (16 lis.)</p>  * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: Savalek <def...@mail.ru> Closes #3113 from Savalek/ZEPPELIN-3616 and squashes the following commits: 259703e [Savalek] [ZEPPELIN-3616] remove event if dom's element destroy Change-Id: I35cadc40f152973d6a2d1e9b8f1a797f7ea08445 Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/14534da9 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/14534da9 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/14534da9 Branch: refs/heads/master Commit: 14534da9e064bf5926d2ec095c723f2107635eb9 Parents: d1606c2 Author: Savalek <def...@mail.ru> Authored: Mon Aug 6 16:29:22 2018 +0300 Committer: Prabhjyot Singh <prabhjyotsi...@gmail.com> Committed: Fri Nov 9 17:37:14 2018 +0530 ---------------------------------------------------------------------- .../src/app/notebook/notebook.controller.js | 34 ++++++++++++++++++-- .../notebook/paragraph/paragraph.controller.js | 7 ++-- .../notebook/paragraph/resizable.directive.js | 26 +++++++++++++-- .../paragraph/result/result.controller.js | 14 ++++++-- 4 files changed, 71 insertions(+), 10 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/14534da9/zeppelin-web/src/app/notebook/notebook.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/notebook.controller.js b/zeppelin-web/src/app/notebook/notebook.controller.js index bf4fea7..047b022 100644 --- a/zeppelin-web/src/app/notebook/notebook.controller.js +++ b/zeppelin-web/src/app/notebook/notebook.controller.js @@ -103,6 +103,27 @@ function NotebookCtrl($scope, $route, $routeParams, $location, $rootScope, connectedOnce = true; }); + $scope.addEvent = function(config) { + let removeEventByID = function(id) { + let events = jQuery._data(config.element, 'events')[config.eventType]; + if (!events) { + return; + } + for (let i=0; i < events.length; i++) { + if (events[i].data && events[i].data.eventID === id) { + events.splice(i, 1); + i--; + } + } + }; + + removeEventByID(config.eventID); + angular.element(config.element).bind(config.eventType, {eventID: config.eventID}, config.handler); + angular.element(config.onDestroyElement).scope().$on('$destroy', () => { + removeEventByID(config.eventID); + }); + }; + $scope.getCronOptionNameFromValue = function(value) { if (!value) { return ''; @@ -1564,8 +1585,15 @@ function NotebookCtrl($scope, $route, $routeParams, $location, $rootScope, document.removeEventListener('keydown', $scope.keyboardShortcut); }); - angular.element(window).bind('resize', function() { - const actionbarHeight = document.getElementById('actionbar').lastElementChild.clientHeight; - angular.element(document.getElementById('content')).css('padding-top', actionbarHeight - 20); + let content = document.getElementById('content'); + $scope.addEvent({ + eventID: content.id, + eventType: 'resize', + element: window, + onDestroyElement: content, + handler: () => { + const actionbarHeight = document.getElementById('actionbar').lastElementChild.clientHeight; + angular.element(document.getElementById('content')).css('padding-top', actionbarHeight - 20); + }, }); } http://git-wip-us.apache.org/repos/asf/zeppelin/blob/14534da9/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 1a1569a..b332b59 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -755,9 +755,10 @@ function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $locat } autoAdjustEditorHeight(_editor); - angular.element(window).resize(function() { - autoAdjustEditorHeight(_editor); - }); + + let adjustEditorListener = () => autoAdjustEditorHeight(_editor); + angular.element(window).resize(adjustEditorListener); + $scope.$on('$destroy', () => angular.element(window).unbind('resize', adjustEditorListener)); if (navigator.appVersion.indexOf('Mac') !== -1) { $scope.editor.setKeyboardHandler('ace/keyboard/emacs'); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/14534da9/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js b/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js index 874f9d8..d629f6e 100644 --- a/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js +++ b/zeppelin-web/src/app/notebook/paragraph/resizable.directive.js @@ -24,6 +24,23 @@ function ResizableDirective() { }, }; + let addEvent = function(config) { + let removeEventByID = function(id) { + let events = jQuery._data(config.element, 'events')[config.eventType]; + for (let i=0; i < events.length; i++) { + if (events[i].data && events[i].data.eventID === id) { + events.splice(i, 1); + i--; + } + } + }; + removeEventByID(config.eventID); + angular.element(config.element).bind(config.eventType, {eventID: config.eventID}, config.handler); + angular.element(config.onDestroyElement).scope().$on('$destroy', () => { + removeEventByID(config.eventID); + }); + }; + return { restrict: 'A', scope: { @@ -59,8 +76,13 @@ function ResizableDirective() { resize = JSON.parse(resize); if (resize.allowresize === 'true') { resetResize(elem, resize); - angular.element(window).resize(function() { - resetResize(elem, resize); + + addEvent({ + eventID: elem[0].id, + eventType: 'resize', + element: window, + onDestroyElement: elem[0], + handler: () => resetResize(elem, resize), }); } }); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/14534da9/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js index 98940ab..86f112b 100644 --- a/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/result/result.controller.js @@ -683,8 +683,18 @@ function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location builtInViz.instance.render(transformed); builtInViz.instance.renderSetting(visualizationSettingTargetEl); builtInViz.instance.activate(); - angular.element(window).resize(() => { - builtInViz.instance.resize(); + + let eventID = builtInViz.instance.targetEl.id; + if (!eventID) { + eventID = builtInViz.instance.targetEl[0].id; + } + + $scope.addEvent({ + eventID: eventID, + eventType: 'resize', + element: window, + onDestroyElement: builtInViz.instance.targetEl, + handler: () => builtInViz.instance.resize(), }); } catch (err) { console.error('Graph drawing error %o', err);
