open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rewrite colorpicker popup positioning to prevent occlusion

Browse Source
This commit is contained in:
tophf 2017-12-22 09:31:28 +03:00
parent d0380f76c3
commit d82efe37b5
1 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
vendor-overwrites/colorpicker/colorpicker.js
View File

@ -356,7 +356,13 @@ const NAMED_COLORS = new Map([
' ' + CSS_PREFIX + 'theme-' + ' ' + CSS_PREFIX + 'theme-' +
(opt.theme === 'dark' || opt.theme === 'light' ? opt.theme : (opt.theme === 'dark' || opt.theme === 'light' ? opt.theme :
guessTheme()); guessTheme());
document.body.appendChild($root); document.body.appendChild($root);
shown = true;
registerEvents();
setFromColor(opt.color);
setFromHexLettercaseElement();
if (!isNaN(options.left) && !isNaN(options.top)) { if (!isNaN(options.left) && !isNaN(options.top)) {
$root.style = ` $root.style = `
@ -365,12 +371,6 @@ const NAMED_COLORS = new Map([
`.replace(/;/g, '!important;'); `.replace(/;/g, '!important;');
reposition(); reposition();
} }
shown = true;
registerEvents();
setFromColor(opt.color);
setFromHexLettercaseElement();
} }
function hide({notify = true} = {}) { function hide({notify = true} = {}) {
@ -1048,32 +1048,14 @@ const NAMED_COLORS = new Map([
function reposition() { function reposition() {
const width = $root.offsetWidth; const width = $root.offsetWidth;
const height = $root.offsetHeight; const height = $root.offsetHeight;
const maxTop = window.innerHeight - height;
// set left position for color picker const maxTopUnobscured = options.top <= maxTop ? maxTop : options.top - height - 20;
let elementScreenLeft = options.left - document.scrollingElement.scrollLeft; const maxRight = window.innerWidth - width;
const bodyWidth = document.scrollingElement.scrollWidth; const maxRightUnobscured = options.left <= maxRight ? maxRight : options.left - width;
if (width + elementScreenLeft > bodyWidth) { const left = constrain(0, maxRightUnobscured, options.left);
elementScreenLeft -= (width + elementScreenLeft) - bodyWidth; const top = constrain(0, maxTopUnobscured, options.top);
} $root.style.setProperty('left', left + 'px', 'important');
if (elementScreenLeft < 0) { $root.style.setProperty('top', top + 'px', 'important');
elementScreenLeft = 0;
}
// set top position for color picker
let elementScreenTop = options.top - document.scrollingElement.scrollTop;
if (height + elementScreenTop > window.innerHeight) {
elementScreenTop = window.innerHeight - height;
}
if (elementScreenTop < options.top) {
elementScreenTop = options.top - height - 20;
}
if (elementScreenTop < 0) {
elementScreenTop = 0;
}
// set position
$root.style.left = elementScreenLeft + 'px';
$root.style.top = elementScreenTop + 'px';
} }
function fade({fadingStage = 1} = {}) { function fade({fadingStage = 1} = {}) {