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

use CSS variables for applies-to line widgets

Browse Source
This commit is contained in:
tophf 2017-11-15 09:04:09 +03:00
parent 14dbfdd915
commit 06cc703887
1 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
edit/applies-to-line-widget.js
View File

@ -10,7 +10,7 @@ function createAppliesToLineWidget(cm) {
]; ];
const THROTTLE_DELAY = 400; const THROTTLE_DELAY = 400;
let widgets = []; let widgets = [];
let fromLine, toLine, gutterStyle; let fromLine, toLine, styleVariables;
let initialized = false; let initialized = false;
return {toggle}; return {toggle};
@ -29,7 +29,7 @@ function createAppliesToLineWidget(cm) {
function init() { function init() {
initialized = true; initialized = true;
gutterStyle = getComputedStyle(cm.getGutterElement()); styleVariables = $element({tag: 'style'});
fromLine = null; fromLine = null;
toLine = null; toLine = null;
@ -40,6 +40,7 @@ function createAppliesToLineWidget(cm) {
window.addEventListener('load', updateWidgetStyle); window.addEventListener('load', updateWidgetStyle);
chrome.runtime.onMessage.addListener(onRuntimeMessage); chrome.runtime.onMessage.addListener(onRuntimeMessage);
updateWidgetStyle();
update(); update();
} }
@ -52,6 +53,7 @@ function createAppliesToLineWidget(cm) {
cm.off('optionChange', onOptionChange); cm.off('optionChange', onOptionChange);
window.removeEventListener('load', updateWidgetStyle); window.removeEventListener('load', updateWidgetStyle);
chrome.runtime.onMessage.removeListener(onRuntimeMessage); chrome.runtime.onMessage.removeListener(onRuntimeMessage);
styleVariables.remove();
} }
function onChange(cm, {from, to, origin}) { function onChange(cm, {from, to, origin}) {
@ -87,20 +89,24 @@ function createAppliesToLineWidget(cm) {
} }
function updateWidgetStyle() { function updateWidgetStyle() {
gutterStyle = getComputedStyle(cm.getGutterElement()); const gutterStyle = getComputedStyle(cm.getGutterElement());
widgets.forEach(setWidgetStyle); const borderStyle = gutterStyle.borderRightWidth !== '0px' ?
`${gutterStyle.borderRightWidth} ${gutterStyle.borderRightStyle} ${gutterStyle.borderRightColor}` :
`1px solid ${gutterStyle.color}`;
const id = Date.now();
styleVariables.textContent = `
.single-editor {
--at-background-color-${id}: ${gutterStyle.backgroundColor};
--at-border-top-${id}: ${borderStyle};
--at-border-bottom-${id}: ${borderStyle};
} }
.applies-to {
function setWidgetStyle(widget) { background-color: var(--at-background-color-${id});
let borderStyle = ''; border-top: var(--at-border-top-${id});
if (gutterStyle.borderRightWidth !== '0px') { border-bottom: var(--at-border-bottom-${id});
borderStyle = `${gutterStyle.borderRightWidth} ${gutterStyle.borderRightStyle} ${gutterStyle.borderRightColor}`;
} else {
borderStyle = `1px solid ${gutterStyle.color}`;
} }
widget.node.style.backgroundColor = gutterStyle.backgroundColor; `;
widget.node.style.borderTop = borderStyle; document.documentElement.appendChild(styleVariables);
widget.node.style.borderBottom = borderStyle;
} }
function doUpdate() { function doUpdate() {
@ -145,7 +151,6 @@ function createAppliesToLineWidget(cm) {
const newNode = buildElement(section); const newNode = buildElement(section);
removed[i].node.parentNode.replaceChild(newNode, removed[i].node); removed[i].node.parentNode.replaceChild(newNode, removed[i].node);
removed[i].node = newNode; removed[i].node = newNode;
setWidgetStyle(removed[i]);
removed[i].changed(); removed[i].changed();
yield removed[i]; yield removed[i];
i++; i++;
@ -158,7 +163,6 @@ function createAppliesToLineWidget(cm) {
above: true above: true
}); });
widget.section = section; widget.section = section;
setWidgetStyle(widget);
yield widget; yield widget;
} }
removed.slice(i).forEach(clearWidget); removed.slice(i).forEach(clearWidget);