Fix: style -> gutterStyle

This commit is contained in:
eight 2017-11-09 06:05:22 +08:00
parent f70cf01155
commit 285f3144ca

View File

@ -10,7 +10,7 @@ function createAppliesToLineWidget(cm) {
]; ];
const THROTTLE_DELAY = 400; const THROTTLE_DELAY = 400;
let widgets = []; let widgets = [];
let timer, fromLine, toLine, style, isInit; let timer, fromLine, toLine, gutterStyle, isInit;
return {toggle}; return {toggle};
@ -25,7 +25,7 @@ function createAppliesToLineWidget(cm) {
function init() { function init() {
isInit = true; isInit = true;
style = getComputedStyle(cm.getGutterElement()); gutterStyle = getComputedStyle(cm.getGutterElement());
fromLine = null; fromLine = null;
toLine = null; toLine = null;
@ -33,7 +33,7 @@ function createAppliesToLineWidget(cm) {
cm.on('optionChange', onOptionChange); cm.on('optionChange', onOptionChange);
// is it possible to avoid flickering? // is it possible to avoid flickering?
window.addEventListener('load', updateStyle); window.addEventListener('load', updateWidgetStyle);
update(); update();
} }
@ -45,7 +45,7 @@ function createAppliesToLineWidget(cm) {
widgets.length = 0; widgets.length = 0;
cm.off('change', onChange); cm.off('change', onChange);
cm.off('optionChange', onOptionChange); cm.off('optionChange', onOptionChange);
window.removeEventListener('load', updateStyle); window.removeEventListener('load', updateWidgetStyle);
} }
function onChange(cm, {from, to, origin}) { function onChange(cm, {from, to, origin}) {
@ -65,7 +65,7 @@ function createAppliesToLineWidget(cm) {
function onOptionChange(cm, option) { function onOptionChange(cm, option) {
if (option === 'theme') { if (option === 'theme') {
updateStyle(); updateWidgetStyle();
} }
} }
@ -73,19 +73,19 @@ function createAppliesToLineWidget(cm) {
cm.operation(doUpdate); cm.operation(doUpdate);
} }
function updateStyle() { function updateWidgetStyle() {
style = getComputedStyle(cm.getGutterElement()); gutterStyle = getComputedStyle(cm.getGutterElement());
widgets.forEach(setWidgetStyle); widgets.forEach(setWidgetStyle);
} }
function setWidgetStyle(widget) { function setWidgetStyle(widget) {
let borderStyle = ''; let borderStyle = '';
if (style.borderRightWidth !== '0px') { if (gutterStyle.borderRightWidth !== '0px') {
borderStyle = `${style.borderRightWidth} ${style.borderRightStyle} ${style.borderRightColor}`; borderStyle = `${gutterStyle.borderRightWidth} ${gutterStyle.borderRightStyle} ${gutterStyle.borderRightColor}`;
} else { } else {
borderStyle = `1px solid ${style.color}`; borderStyle = `1px solid ${gutterStyle.color}`;
} }
widget.node.style.backgroundColor = style.backgroundColor; widget.node.style.backgroundColor = gutterStyle.backgroundColor;
widget.node.style.borderTop = borderStyle; widget.node.style.borderTop = borderStyle;
widget.node.style.borderBottom = borderStyle; widget.node.style.borderBottom = borderStyle;
} }