valitydev/redash
14
0
Fork 0
mirror of https://github.com/valitydev/redash.git synced 2024-11-07 01:25:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix bug: query editor did not restore its size after toggle

Browse Source
This commit is contained in:
Levko Kravets 2018-01-29 16:39:58 +02:00
parent 7fa765911f
commit 6839976312
1 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/app/directives/resizable-toggle.js
View File

@ -12,6 +12,8 @@ function resizableToggle() {
link($scope, $element, $attrs) {
if ($attrs.resizable === 'false') return;
let ignoreResizeEvents = false;
let resizeStartInfo = null;
let allowHClick = true;
let allowVClick = true;
@ -21,20 +23,38 @@ function resizableToggle() {
const isFlex = $scope.$eval($attrs.rFlex);
$scope.$on('angular-resizable.resizeStart', ($event, info) => {
resizeStartInfo = Object.assign({}, info);
if (!ignoreResizeEvents) {
resizeStartInfo = Object.assign({}, info);
}
});
$scope.$on('angular-resizable.resizeEnd', ($event, info) => {
allowHClick = true;
if (info.width !== false) {
allowHClick = sameNumber(info.width, resizeStartInfo.width);
}
allowVClick = true;
if (info.height !== false) {
allowVClick = sameNumber(info.height, resizeStartInfo.height);
if (!ignoreResizeEvents) {
allowHClick = true;
if (info.width !== false) {
allowHClick = sameNumber(info.width, resizeStartInfo.width);
}
allowVClick = true;
if (info.height !== false) {
allowVClick = sameNumber(info.height, resizeStartInfo.height);
}
}
});
function emulateAngularResizableEvents(width, height) {
ignoreResizeEvents = true;
const info = {
width,
height,
id: $element.attr('id'),
evt: null,
};
$scope.$emit('angular-resizable.resizeStart', info);
$scope.$emit('angular-resizable.resizing', info);
$scope.$emit('angular-resizable.resizeEnd', info);
ignoreResizeEvents = false;
}
$element.on('click', '.rg-left, .rg-right', () => {
if (allowHClick) {
const minSize = parseFloat($element.css('min-width')) + threshold;
@ -42,12 +62,16 @@ function resizableToggle() {
const isCollapsed = currentSize <= minSize;
const animateProp = isFlex ? flexBasis : 'width';
if (isCollapsed) {
$element.animate({ [animateProp]: lastWidth + 'px' }, 300);
$element.animate({ [animateProp]: lastWidth + 'px' }, 300, () => {
emulateAngularResizableEvents(lastWidth, false);
});
} else {
lastWidth = currentSize;
$element
.css({ [animateProp]: currentSize + 'px' })
.animate({ [animateProp]: 0 }, 300);
.animate({ [animateProp]: 0 }, 300, () => {
emulateAngularResizableEvents(0, false);
});
}
}
});
@ -59,12 +83,16 @@ function resizableToggle() {
const isCollapsed = currentSize <= minSize;
const animateProp = isFlex ? flexBasis : 'height';
if (isCollapsed) {
$element.animate({ [animateProp]: lastHeight + 'px' }, 300);
$element.animate({ [animateProp]: lastHeight + 'px' }, 300, () => {
emulateAngularResizableEvents(false, lastHeight);
});
} else {
lastHeight = currentSize;
$element
.css({ [animateProp]: currentSize + 'px' })
.animate({ [animateProp]: 0 }, 300);
.animate({ [animateProp]: 0 }, 300, () => {
emulateAngularResizableEvents(false, 0);
});
}
}
});