fix/rewrite/integrate colorpicker
* full rewrite of colorview.js to make it 10-100 times faster (render on demand via extendMode) * full rewrite of colorpicker.js to simplify CSS * automatic light/dark theme based on current color of the editor * fixes, tweaks, speedups * color spot will always be on the left of its text i.e. no line break on wrapping * support #RRGGBBAA and #RGBA hex colors * support "transparent" as rgba(0, 0, 0, 0) * HEX/hex toggle * fix HSLA regexp * Esc/Enter key to close * innerHTML -> textContent * toggle the feature correctly * fade out before autohiding * always show alpha 1 like devtools does * set cursor:pointer only on the clickable part of the sliders * bigger color format switcher with a tooltip * autofocus input on open, disable spellcheck * try not to obscure the source color spot & text * restore focus without scrolling
This commit is contained in:
tophf
parent
c50b251ae4
commit
37a62b0407
|
|
@ -1,2 +1,3 @@
|
||||||
vendor/
|
vendor/
|
||||||
vendor-overwrites/
|
vendor-overwrites/*
|
||||||
|
!vendor-overwrites/colorpicker
|
||||||
|
|
|
||||||
|
|
@ -127,6 +127,10 @@
|
||||||
"message": "Autocomplete on typing",
|
"message": "Autocomplete on typing",
|
||||||
"description": "Label for the checkbox in the style editor."
|
"description": "Label for the checkbox in the style editor."
|
||||||
},
|
},
|
||||||
|
"cm_colorpicker": {
|
||||||
|
"message": "Colorpickers for CSS colors",
|
||||||
|
"description": "Label for the checkbox controlling colorpicker option for the style editor."
|
||||||
|
},
|
||||||
"cm_indentWithTabs": {
|
"cm_indentWithTabs": {
|
||||||
"message": "Use tabs with smart indentation",
|
"message": "Use tabs with smart indentation",
|
||||||
"description": "Label for the checkbox controlling tabs with smart indentation option for the style editor."
|
"description": "Label for the checkbox controlling tabs with smart indentation option for the style editor."
|
||||||
|
|
@ -171,6 +175,14 @@
|
||||||
"message": "Theme",
|
"message": "Theme",
|
||||||
"description": "Label for the style editor's CSS theme."
|
"description": "Label for the style editor's CSS theme."
|
||||||
},
|
},
|
||||||
|
"colorpickerSwitchFormatTooltip": {
|
||||||
|
"message": "Switch formats: HEX -> RGB -> HSL",
|
||||||
|
"description": "Tooltip for the switch button in the color picker popup in the style editor."
|
||||||
|
},
|
||||||
|
"colorpickerTooltip": {
|
||||||
|
"message": "Open color picker",
|
||||||
|
"description": "Tooltip for the colored squares shown before CSS colors in the style editor."
|
||||||
|
},
|
||||||
"dysfunctional": {
|
"dysfunctional": {
|
||||||
"message": "Stylus cannot function in private windows because Firefox disallows direct connection to the internal background page context of the extension.",
|
"message": "Stylus cannot function in private windows because Firefox disallows direct connection to the internal background page context of the extension.",
|
||||||
"description": "Displayed in Firefox when its settings make Stylus dysfunctional"
|
"description": "Displayed in Firefox when its settings make Stylus dysfunctional"
|
||||||
|
|
|
||||||
|
|
@ -190,6 +190,10 @@
|
||||||
<input id="editor.autocompleteOnTyping" type="checkbox">
|
<input id="editor.autocompleteOnTyping" type="checkbox">
|
||||||
<label for="editor.autocompleteOnTyping" i18n-text="cm_autocompleteOnTyping"></label>
|
<label for="editor.autocompleteOnTyping" i18n-text="cm_autocompleteOnTyping"></label>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<input id="editor.colorpicker" type="checkbox">
|
||||||
|
<label for="editor.colorpicker" i18n-text="cm_colorpicker"></label>
|
||||||
|
</div>
|
||||||
<div class="option aligned">
|
<div class="option aligned">
|
||||||
<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
|
<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
|
||||||
<input id="editor.tabSize" type="number" min="0">
|
<input id="editor.tabSize" type="number" min="0">
|
||||||
|
|
|
||||||
44
edit/edit.js
44
edit/edit.js
|
|
@ -7,6 +7,12 @@
|
||||||
/* global closeCurrentTab regExpTester messageBox */
|
/* global closeCurrentTab regExpTester messageBox */
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
onDOMready()
|
||||||
|
.then(() => Promise.all([
|
||||||
|
onColorpickerReady(),
|
||||||
|
]))
|
||||||
|
.then(init);
|
||||||
|
|
||||||
let styleId = null;
|
let styleId = null;
|
||||||
// only the actually dirty items here
|
// only the actually dirty items here
|
||||||
let dirty = {};
|
let dirty = {};
|
||||||
|
|
@ -362,6 +368,8 @@ function acmeEventListener(event) {
|
||||||
}
|
}
|
||||||
option = 'highlightSelectionMatches';
|
option = 'highlightSelectionMatches';
|
||||||
break;
|
break;
|
||||||
|
case 'colorpicker':
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
CodeMirror.setOption(option, value);
|
CodeMirror.setOption(option, value);
|
||||||
}
|
}
|
||||||
|
|
@ -1298,8 +1306,6 @@ function beautify(event) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onDOMready().then(init);
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
initCodeMirror();
|
initCodeMirror();
|
||||||
getStyle().then(style => {
|
getStyle().then(style => {
|
||||||
|
|
@ -2065,3 +2071,37 @@ function setGlobalProgress(done, total) {
|
||||||
progressElement.remove();
|
progressElement.remove();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onColorpickerReady() {
|
||||||
|
const scripts = [
|
||||||
|
'/vendor-overwrites/colorpicker/colorpicker.css',
|
||||||
|
'/vendor-overwrites/colorpicker/colorpicker.js',
|
||||||
|
'/vendor-overwrites/colorpicker/colorview.js',
|
||||||
|
];
|
||||||
|
prefs.subscribe(['editor.colorpicker'], colorpickerOnDemand);
|
||||||
|
return prefs.get('editor.colorpicker') && colorpickerOnDemand(null, true);
|
||||||
|
|
||||||
|
function colorpickerOnDemand(id, enabled) {
|
||||||
|
return loadScript(enabled && scripts)
|
||||||
|
.then(() => setColorpickerOption(id, enabled));
|
||||||
|
}
|
||||||
|
|
||||||
|
function setColorpickerOption(id, enabled) {
|
||||||
|
CodeMirror.defaults.colorpicker = enabled && {
|
||||||
|
forceUpdate: editors.length > 0,
|
||||||
|
tooltip: t('colorpickerTooltip'),
|
||||||
|
popupOptions: {
|
||||||
|
tooltipForSwitcher: t('colorpickerSwitchFormatTooltip'),
|
||||||
|
hexUppercase: prefs.get('editor.colorpicker.hexUppercase'),
|
||||||
|
hideDelay: 5000,
|
||||||
|
embedderCallback: state => {
|
||||||
|
if (state && state.hexUppercase !== prefs.get('editor.colorpicker.hexUppercase')) {
|
||||||
|
prefs.set('editor.colorpicker.hexUppercase', state.hexUppercase);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
// on page load runs before CodeMirror.setOption is defined
|
||||||
|
editors.forEach(cm => cm.setOption('colorpicker', CodeMirror.defaults.colorpicker));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,11 @@ var prefs = new function Prefs() {
|
||||||
|
|
||||||
'editor.appliesToLineWidget': true, // show applies-to line widget on the editor
|
'editor.appliesToLineWidget': true, // show applies-to line widget on the editor
|
||||||
|
|
||||||
|
// show CSS colors as clickable colored rectangles
|
||||||
|
'editor.colorpicker': true,
|
||||||
|
// #DEAD or #beef
|
||||||
|
'editor.colorpicker.hexUppercase': false,
|
||||||
|
|
||||||
'iconset': 0, // 0 = dark-themed icon
|
'iconset': 0, // 0 = dark-themed icon
|
||||||
// 1 = light-themed icon
|
// 1 = light-themed icon
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,151 @@
|
||||||
|
|
||||||
/* codemirror colorview */
|
/* codemirror colorview */
|
||||||
|
|
||||||
.codemirror-colorview {
|
.cm-colorview {
|
||||||
border : 1px solid #8e8e8e;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display : inline-block;
|
white-space: nowrap;
|
||||||
box-sizing : border-box;
|
}
|
||||||
margin : 0px 2px;
|
|
||||||
width : 10px;
|
.cm-colorview::before {
|
||||||
height : 10px;
|
content: "";
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
|
display: inline-block;
|
||||||
|
box-sizing: content-box;
|
||||||
|
margin: 0 3px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorview .codemirror-colorview-background {
|
.cm-colorview + .cm-colorview.cm-overlay::before,
|
||||||
content: "";
|
.cm-colorview.cm-overlay + .cm-colorview::before {
|
||||||
position: absolute;
|
content: none;
|
||||||
left:0px;
|
|
||||||
right:0px;
|
|
||||||
bottom:0px;
|
|
||||||
top:0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorview:hover {
|
.codemirror-colorview-background {
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
top: 2px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #8e8e8e;
|
||||||
|
content: "";
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codemirror-colorview-background:hover {
|
||||||
border-color: #494949;
|
border-color: #494949;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* colorpicker */
|
||||||
|
|
||||||
/* codemirror-colorpicker */
|
.colorpicker-theme-light {
|
||||||
|
--main-background-color: #fff;
|
||||||
|
--main-border-color: #ccc;
|
||||||
|
|
||||||
.codemirror-colorpicker {
|
--label-color: #666;
|
||||||
position: relative;
|
--label-color-hover: #000;
|
||||||
width: 226px;
|
|
||||||
z-index: 1000;
|
--input-background-color: #fff;
|
||||||
|
--input-background-color-hover: #ddd;
|
||||||
|
--input-background-color-focus: #fff;
|
||||||
|
|
||||||
|
--input-color: #444;
|
||||||
|
--input-color-focus: #000;
|
||||||
|
|
||||||
|
--input-border-color: #bbb;
|
||||||
|
--input-border-color-focus: #888;
|
||||||
|
--input-border-color-hover: #444;
|
||||||
|
|
||||||
|
--invalid-border-color: hsl(0, 100%, 50%);
|
||||||
|
--invalid-background-color: hsla(0, 100%, 50%, 0.15);
|
||||||
|
--invalid-color: hsl(0, 100%, 40%);
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .color {
|
|
||||||
|
.colorpicker-theme-dark {
|
||||||
|
--main-background-color: #242424;
|
||||||
|
--main-border-color: #888;
|
||||||
|
|
||||||
|
--label-color: #aaa;
|
||||||
|
--label-color-hover: #eee;
|
||||||
|
|
||||||
|
--input-background-color: #222;
|
||||||
|
--input-background-color-hover: #222;
|
||||||
|
--input-background-color-focus: #383838;
|
||||||
|
|
||||||
|
--input-color: #ddd;
|
||||||
|
--input-color-focus: #fff;
|
||||||
|
|
||||||
|
--input-border-color: #505050;
|
||||||
|
--input-border-color-focus: #777;
|
||||||
|
--input-border-color-hover: #888;
|
||||||
|
|
||||||
|
--invalid-border-color: hsl(0, 100%, 27%);
|
||||||
|
--invalid-background-color: hsla(0, 100%, 50%, 0.3);
|
||||||
|
--invalid-color: hsl(0, 100%, 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-popup {
|
||||||
|
--switcher-width: 30px;
|
||||||
|
position: relative;
|
||||||
|
width: 350px;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: opacity .5s;
|
||||||
|
color: var(--label-color);
|
||||||
|
border: 1px solid var(--main-border-color);
|
||||||
|
background-color: var(--main-background-color);
|
||||||
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-popup[data-fading="1"] {
|
||||||
|
opacity: .75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-popup[data-fading="2"] {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-saturation-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .color > .saturation {
|
|
||||||
|
.colorpicker-opacity-bar {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(to right, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-saturation {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: rgba(204, 154, 129, 0);
|
||||||
|
background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
|
||||||
|
background-repeat: repeat-x;
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .color > .saturation > .value {
|
|
||||||
|
.colorpicker-value {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .color > .saturation > .value > .drag-pointer {
|
|
||||||
|
.colorpicker-drag-pointer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
|
|
@ -60,21 +154,25 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
left: -5px;
|
left: -5px;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control {
|
|
||||||
|
.colorpicker-sliders {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 18px 0px 14px 0px;
|
padding: 10px 0 6px 0;
|
||||||
-webkit-user-select: none;
|
border-top: 1px solid transparent;
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
-o-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control > .color,
|
|
||||||
.codemirror-colorpicker > .control > .empty {
|
.colorpicker-theme-dark .colorpicker-sliders {
|
||||||
|
border-color: var(--input-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-swatch,
|
||||||
|
.colorpicker-empty {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 11px;
|
left: 11px;
|
||||||
top: 24px;
|
top: 17px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
-webkit-border-radius: 50%;
|
-webkit-border-radius: 50%;
|
||||||
|
|
@ -84,33 +182,41 @@
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control > .hue {
|
|
||||||
|
.colorpicker-empty {
|
||||||
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-hue {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
margin: 0px 0px 0px 45px;
|
margin: 0 0 0 45px;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control > .hue > .hue-container {
|
|
||||||
|
.colorpicker-hue-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control > .opacity {
|
|
||||||
|
.colorpicker-opacity {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 3px 12px;
|
padding: 3px 12px;
|
||||||
margin: 0px 0px 0px 45px;
|
margin: 0 0 0 45px;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control > .opacity > .opacity-container {
|
|
||||||
|
.colorpicker-opacity-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
|
|
@ -118,10 +224,13 @@
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
|
||||||
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .control .drag-bar,
|
.colorpicker-hue-knob,
|
||||||
.codemirror-colorpicker > .control .drag-bar2 {
|
.colorpicker-opacity-knob {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
top: 50% !important;
|
top: 50% !important;
|
||||||
|
|
@ -132,179 +241,148 @@
|
||||||
-webkit-border-radius: 50px;
|
-webkit-border-radius: 50px;
|
||||||
-moz-border-radius: 50px;
|
-moz-border-radius: 50px;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .information {
|
|
||||||
|
.colorpicker-input-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-box-sizing: padding-box;
|
-webkit-box-sizing: padding-box;
|
||||||
-moz-box-sizing: padding-box;
|
-moz-box-sizing: padding-box;
|
||||||
box-sizing: padding-box;
|
box-sizing: padding-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .information.hex > .information-item.hex {
|
.colorpicker-input-group {
|
||||||
display: flex;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-colorpicker > .information.rgb > .information-item.rgb {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-colorpicker > .information.hsl > .information-item.hsl {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > .information-item {
|
|
||||||
display:none;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0px 5px;
|
padding: 0 5px;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-right:40px;
|
margin-right: calc(var(--switcher-width) - 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > .information-change {
|
.colorpicker-input-group[data-active] {
|
||||||
position:absolute;
|
display: flex;
|
||||||
display:block;
|
|
||||||
width:40px;
|
|
||||||
top:0px;
|
|
||||||
right:0px;
|
|
||||||
bottom:0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > .information-change > .format-change-button {
|
.colorpicker-input-field {
|
||||||
width:100%;
|
display: block;
|
||||||
height:100%;
|
position: relative;
|
||||||
background:transparent;
|
flex: 1;
|
||||||
border:0px;
|
|
||||||
cursor:pointer;
|
|
||||||
outline:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > .information-item > .input-field {
|
|
||||||
display:block;
|
|
||||||
flex:1;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > .information-item > .input-field > input {
|
.colorpicker-input-field[class$="-a"] {
|
||||||
text-align: center;
|
flex-grow: 1.5;
|
||||||
width:100%;
|
|
||||||
padding:3px 5px;
|
|
||||||
font-size:11px;
|
|
||||||
color: #333;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
-moz-user-select: text;
|
|
||||||
-ms-user-select: text;
|
|
||||||
-o-user-select: text;
|
|
||||||
user-select: text;
|
|
||||||
border: 1px solid #cbcbcb;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > .information-item > .input-field > .title {
|
.colorpicker-hsl-h::before {
|
||||||
text-align:center;
|
content: "\b0"; /* degree */
|
||||||
font-size:12px;
|
|
||||||
color:#a9a9a9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-colorpicker > .information > input {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
right: -2px;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-hsl-s::before,
|
||||||
|
.colorpicker-hsl-l::before {
|
||||||
|
content: "%";
|
||||||
|
position: absolute;
|
||||||
|
right: -1ex;
|
||||||
|
top: 8px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
height: 20px;
|
}
|
||||||
bottom: 20px;
|
|
||||||
padding: 0 0 0 2px;
|
.colorpicker-input {
|
||||||
-webkit-box-sizing: border-box;
|
text-align: center;
|
||||||
-moz-box-sizing: border-box;
|
width: 100%;
|
||||||
|
padding: 3px 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-user-select: text;
|
-webkit-user-select: text;
|
||||||
-moz-user-select: text;
|
-moz-user-select: text;
|
||||||
-ms-user-select: text;
|
-ms-user-select: text;
|
||||||
-o-user-select: text;
|
-o-user-select: text;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
|
border: 1px solid var(--input-border-color);
|
||||||
|
background-color: var(--input-background-color);
|
||||||
|
color: var(--input-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.colorpicker-theme-dark .colorpicker-input::-webkit-inner-spin-button {
|
||||||
.codemirror-colorpicker {
|
-webkit-filter: invert(1);
|
||||||
border: 1px solid #ececec;
|
filter: invert(1);
|
||||||
background-color: #fff;
|
|
||||||
-webkit-box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.12);
|
|
||||||
-moz-box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.12);
|
|
||||||
box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
.codemirror-colorpicker > .color > .saturation {
|
|
||||||
background-color: rgba(204, 154, 129, 0);
|
|
||||||
background-image: -moz-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
|
||||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
|
||||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
|
||||||
background-image: -o-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
|
||||||
background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00cc9a81', GradientType=1);
|
|
||||||
}
|
|
||||||
.codemirror-colorpicker > .color > .saturation > .value {
|
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
|
||||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
|
||||||
background-image: -moz-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
|
||||||
background-image: -o-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
|
||||||
background-image: -ms-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
|
||||||
background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0));
|
|
||||||
}
|
|
||||||
.codemirror-colorpicker > .color > .saturation > .value > .drag-pointer {
|
|
||||||
border: 1px solid #fff;
|
|
||||||
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.codemirror-colorpicker > .control > .hue > .hue-container {
|
|
||||||
background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
|
||||||
background: -ms-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
|
||||||
background: -o-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
|
||||||
background: -webkit-gradient(linear, left top, right top, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
|
||||||
background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
|
||||||
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
|
||||||
}
|
|
||||||
.codemirror-colorpicker > .control > .opacity > .opacity-container > .color-bar {
|
|
||||||
position:absolute;
|
|
||||||
display:block;
|
|
||||||
content:"";
|
|
||||||
left:0px;
|
|
||||||
right:0px;
|
|
||||||
bottom:0px;
|
|
||||||
top:0px;
|
|
||||||
background: -moz-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1));
|
|
||||||
background: -ms-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1));
|
|
||||||
background: -o-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1));
|
|
||||||
background: -webkit-gradient(linear, left top, right top, from(rgba(232, 232, 232, 0)), to(rgba(232, 232, 232, 1)));
|
|
||||||
background: -webkit-linear-gradient(left, rgba(232, 232, 232, 0), rgba(232, 232, 232, 1));
|
|
||||||
background: linear-gradient(to right, rgba(232, 232, 232, 0) , rgba(232, 232, 232, 1) );
|
|
||||||
}
|
|
||||||
.codemirror-colorpicker > .control > .opacity > .opacity-container {
|
|
||||||
background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
|
|
||||||
background-repeat: repeat;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-colorpicker > .control > .empty {
|
.colorpicker-input:hover {
|
||||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat;
|
border-color: var(--input-border-color-hover);
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .control .drag-bar,
|
|
||||||
.codemirror-colorpicker > .control .drag-bar2 {
|
.colorpicker-input:focus {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
color: var(--input-color-focus);
|
||||||
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
border-color: var(--input-border-color-focus);
|
||||||
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
background-color: var(--input-background-color-focus);
|
||||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .information {
|
|
||||||
/*border-top: 1px solid #e8e8e8;*/
|
.colorpicker-theme-dark input:focus {
|
||||||
|
outline: none !important;
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .information > .title {
|
|
||||||
color: #a3a3a3;
|
.colorpicker-input:invalid {
|
||||||
|
border-color: var(--invalid-border-color);
|
||||||
|
background-color: var(--invalid-background-color);
|
||||||
|
color: var(--invalid-color);
|
||||||
}
|
}
|
||||||
.codemirror-colorpicker > .information > .input {
|
|
||||||
color: #333;
|
.colorpicker-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: monospace;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--label-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-title-action {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-title-action[data-active] {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--input-color);
|
||||||
|
cursor: default;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-format-change {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: var(--switcher-width);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-format-change-button {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
font-family: monospace !important;
|
||||||
|
font-size: var(--switcher-width) !important;
|
||||||
|
margin-top: -5px;
|
||||||
|
color: var(--label-color);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorpicker-format-change-button:hover {
|
||||||
|
color: var(--label-color-hover);
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,434 +1,457 @@
|
||||||
(function(mod) {
|
/* global CodeMirror */
|
||||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
'use strict';
|
||||||
mod(require("codemirror"));
|
|
||||||
else if (typeof define == "function" && define.amd) // AMD
|
|
||||||
define(["codemirror"], mod);
|
|
||||||
else // Plain browser env
|
|
||||||
mod(CodeMirror);
|
|
||||||
})(function(CodeMirror) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// color names
|
(() => {
|
||||||
var color_names={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)"};
|
const OWN_TOKEN_NAME = 'colorview';
|
||||||
|
const OWN_DOM_CLASS = 'cm-' + OWN_TOKEN_NAME;
|
||||||
|
const OWN_BACKGROUND_CLASS = 'codemirror-colorview-background';
|
||||||
|
const HOOKED_TOKEN = new Map([
|
||||||
|
['atom', colorizeAtom],
|
||||||
|
['keyword', colorizeKeyword],
|
||||||
|
].map(([name, fn]) => [name, {override: name + ' ' + OWN_TOKEN_NAME, process: fn}]));
|
||||||
|
|
||||||
var colorpicker_class = 'codemirror-colorview';
|
const NAMED_COLORS = getNamedColorsMap();
|
||||||
var colorpicker_background_class = 'codemirror-colorview-background';
|
const TRANSPARENT = {
|
||||||
|
color: 'transparent',
|
||||||
// Excluded tokens do not show color views..
|
colorValue: 'rgba(0, 0, 0, 0)', // as per the CSS spec
|
||||||
var excluded_token = ['comment'];
|
};
|
||||||
|
const RX_COLOR = {
|
||||||
CodeMirror.defineOption("colorpicker", false, function (cm, val, old) {
|
hex: /#(?:[a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})\b/yi,
|
||||||
|
rgb: /rgb\((?:\s*\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/yi,
|
||||||
if (old && old != CodeMirror.Init) {
|
rgba: /rgba\((?:\s*\d{1,3}\s*,\s*){3}\d*\.?\d+\s*\)/yi,
|
||||||
|
hsl: /hsl\(\s*(?:-?\d+|-?\d*\.\d+)\s*(?:,\s*(?:-?\d+|-?\d*\.\d+)%\s*){2}\)/yi,
|
||||||
if (cm.state.colorpicker)
|
hsla: /hsla\(\s*(?:-?\d+|-?\d*\.\d+)\s*(?:,\s*(?:-?\d+|-?\d*\.\d+)%\s*){2},\s*(?:-?\d+|-?\d*\.\d+)\s*\)/yi,
|
||||||
{
|
named: new RegExp([...NAMED_COLORS.keys()].join('|'), 'i'),
|
||||||
cm.state.colorpicker.destroy();
|
|
||||||
cm.state.colorpicker = null;
|
|
||||||
|
|
||||||
}
|
|
||||||
// remove event listener
|
|
||||||
}
|
|
||||||
|
|
||||||
if (val)
|
|
||||||
{
|
|
||||||
cm.state.colorpicker = new codemirror_colorpicker(cm, val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function onChange(cm, evt) {
|
|
||||||
if (evt.origin == 'setValue') { // if content is changed by setValue method, it initialize markers
|
|
||||||
cm.state.colorpicker.close_color_picker();
|
|
||||||
cm.state.colorpicker.init_color_update();
|
|
||||||
cm.state.colorpicker.style_color_update();
|
|
||||||
} else {
|
|
||||||
cm.state.colorpicker.style_color_update(cm.getCursor().line);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function onUpdate(cm, evt) {
|
|
||||||
if (!cm.state.colorpicker.isUpdate) {
|
|
||||||
cm.state.colorpicker.isUpdate = true;
|
|
||||||
cm.state.colorpicker.close_color_picker();
|
|
||||||
cm.state.colorpicker.init_color_update();
|
|
||||||
cm.state.colorpicker.style_color_update();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onRefresh(cm, evt) {
|
|
||||||
onChange(cm, { origin : 'setValue'});
|
|
||||||
}
|
|
||||||
|
|
||||||
function onKeyup(cm, evt) {
|
|
||||||
cm.state.colorpicker.keyup(evt);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMousedown(cm, evt) {
|
|
||||||
if (cm.state.colorpicker.is_edit_mode())
|
|
||||||
{
|
|
||||||
cm.state.colorpicker.check_mousedown(evt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onPaste (cm, evt) {
|
|
||||||
onChange(cm, { origin : 'setValue'});
|
|
||||||
}
|
|
||||||
|
|
||||||
function onScroll (cm) {
|
|
||||||
cm.state.colorpicker.close_color_picker();
|
|
||||||
}
|
|
||||||
|
|
||||||
function debounce (callback, delay) {
|
|
||||||
|
|
||||||
var t = undefined;
|
|
||||||
|
|
||||||
return function (cm, e) {
|
|
||||||
if (t) {
|
|
||||||
clearTimeout(t);
|
|
||||||
}
|
|
||||||
|
|
||||||
t = setTimeout(function () {
|
|
||||||
callback(cm, e);
|
|
||||||
}, delay || 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function has_class(el, cls) {
|
|
||||||
if (!el || !el.className) {
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
var newClass = ' ' + el.className + ' ';
|
|
||||||
return newClass.indexOf(' ' + cls + ' ') > -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function codemirror_colorpicker (cm, opt) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
if (typeof opt == 'boolean')
|
|
||||||
{
|
|
||||||
opt = { mode : 'view' };
|
|
||||||
} else {
|
|
||||||
opt = Object.assign({ mode: 'view' }, opt || {});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.opt = opt;
|
|
||||||
this.cm = cm;
|
|
||||||
this.markers = {};
|
|
||||||
|
|
||||||
// set excluded token
|
|
||||||
excluded_token = this.opt.excluded_token || excluded_token;
|
|
||||||
|
|
||||||
if (this.cm.colorpicker) {
|
|
||||||
this.colorpicker = this.cm.colorpicker();
|
|
||||||
} else if (this.opt.colorpicker) {
|
|
||||||
this.colorpicker = this.opt.colorpicker;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.init_event();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.init_event = function () {
|
|
||||||
|
|
||||||
this.cm.on('mousedown', onMousedown);
|
|
||||||
this.cm.on('keyup', onKeyup);
|
|
||||||
this.cm.on('change', onChange);
|
|
||||||
this.cm.on('update', onUpdate);
|
|
||||||
this.cm.on('refresh', onRefresh);
|
|
||||||
|
|
||||||
// create paste callback
|
|
||||||
this.onPasteCallback = (function (cm, callback) {
|
|
||||||
return function (evt) {
|
|
||||||
callback.call(this, cm, evt);
|
|
||||||
}
|
|
||||||
})(this.cm, onPaste);
|
|
||||||
|
|
||||||
this.cm.getWrapperElement().addEventListener('paste', this.onPasteCallback);
|
|
||||||
|
|
||||||
if (this.is_edit_mode())
|
|
||||||
{
|
|
||||||
this.cm.on('scroll', debounce(onScroll, 50));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.is_edit_mode = function () {
|
|
||||||
return this.opt.mode == 'edit';
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.is_view_mode = function () {
|
|
||||||
return this.opt.mode == 'view';
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.destroy = function () {
|
|
||||||
this.cm.off('mousedown', onMousedown);
|
|
||||||
this.cm.off('keyup', onKeyup);
|
|
||||||
this.cm.off('change', onChange)
|
|
||||||
this.cm.getWrapperElement().removeEventListener('paste', this.onPasteCallback);
|
|
||||||
|
|
||||||
if (this.is_edit_mode())
|
|
||||||
{
|
|
||||||
this.cm.off('scroll');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.hasClass = function (el, className) {
|
|
||||||
if (!el.className)
|
|
||||||
{
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
var newClass = ' ' + el.className + ' ';
|
|
||||||
return newClass.indexOf(' ' + className + ' ') > -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.check_mousedown = function (evt) {
|
|
||||||
if (this.hasClass(evt.target, colorpicker_background_class) )
|
|
||||||
{
|
|
||||||
this.open_color_picker(evt.target.parentNode);
|
|
||||||
} else {
|
|
||||||
this.close_color_picker();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.popup_color_picker = function (defalutColor) {
|
|
||||||
var cursor = this.cm.getCursor();
|
|
||||||
var self = this;
|
|
||||||
var colorMarker = {
|
|
||||||
lineNo : cursor.line,
|
|
||||||
ch : cursor.ch,
|
|
||||||
color: defalutColor || '#FFFFFF',
|
|
||||||
isShortCut : true
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Object.keys(this.markers).forEach(function(key) {
|
const CodeMirrorEvents = {
|
||||||
var searchKey = "#" + key;
|
update(cm) {
|
||||||
if (searchKey.indexOf( "#" + colorMarker.lineNo + ":") > -1) {
|
if (cm.state.colorpicker.cache.size) {
|
||||||
var marker = self.markers[key];
|
renderVisibleTokens(cm);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
keyup(cm) {
|
||||||
|
const popup = cm.state.colorpicker.popup;
|
||||||
|
if (popup && popup.options.isShortCut === false) {
|
||||||
|
popup.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mousedown(cm, event) {
|
||||||
|
const self = cm.state.colorpicker;
|
||||||
|
const isMarker = event.button === 0 && event.target.classList.contains(OWN_BACKGROUND_CLASS);
|
||||||
|
window.dispatchEvent(new CustomEvent('close-colorpicker-popup', {detail: isMarker && self.popup}));
|
||||||
|
if (isMarker) {
|
||||||
|
event.preventDefault();
|
||||||
|
self.openPopupForToken(event.target.parentNode);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
if (marker.ch <= colorMarker.ch && colorMarker.ch <= marker.ch + marker.color.length) {
|
function registerEvents(cm) {
|
||||||
// when cursor has marker
|
Object.keys(CodeMirrorEvents).forEach(name => cm.on(name, CodeMirrorEvents[name]));
|
||||||
colorMarker.ch = marker.ch;
|
|
||||||
colorMarker.color = marker.color;
|
|
||||||
colorMarker.nameColor = marker.nameColor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function unregisterEvents(cm) {
|
||||||
|
Object.keys(CodeMirrorEvents).forEach(name => cm.off(name, CodeMirrorEvents[name]));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function registerHooks() {
|
||||||
|
const mx = CodeMirror.modeExtensions.css;
|
||||||
|
if (!mx || mx.token !== colorizeToken) {
|
||||||
|
CodeMirror.extendMode('css', {
|
||||||
|
token: colorizeToken,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.open_color_picker(colorMarker);
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.open_color_picker = function (el) {
|
|
||||||
var lineNo = el.lineNo;
|
|
||||||
var ch = el.ch;
|
|
||||||
var nameColor = el.nameColor;
|
|
||||||
var color = el.color;
|
|
||||||
|
|
||||||
|
|
||||||
if (this.colorpicker) {
|
|
||||||
var self = this;
|
|
||||||
var prevColor = color;
|
|
||||||
var pos = this.cm.charCoords({line : lineNo, ch : ch });
|
|
||||||
this.colorpicker.show({
|
|
||||||
left : pos.left,
|
|
||||||
top : pos.bottom,
|
|
||||||
isShortCut : el.isShortCut || false,
|
|
||||||
hideDelay : self.opt.hideDelay || 2000
|
|
||||||
}, nameColor || color, function (newColor) {
|
|
||||||
self.cm.replaceRange(newColor, { line : lineNo, ch : ch } , { line : lineNo, ch : ch + prevColor.length }, '*colorpicker');
|
|
||||||
prevColor = newColor;
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.close_color_picker = function (el) {
|
|
||||||
if (this.colorpicker)
|
|
||||||
{
|
|
||||||
this.colorpicker.hide();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.key = function (lineNo, ch) {
|
function unregisterHooks() {
|
||||||
return [lineNo, ch].join(":");
|
const mx = CodeMirror.modeExtensions.css;
|
||||||
|
if (mx && mx.token === colorizeToken) {
|
||||||
|
delete mx.token;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetMode(cm) {
|
||||||
|
cm.setOption('mode', cm.getMode().name);
|
||||||
|
}
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.keyup = function (evt) {
|
function colorizeToken(stream, state) {
|
||||||
|
const token = this._token.apply(this, arguments);
|
||||||
|
const hookedToken = token && HOOKED_TOKEN.get(token);
|
||||||
|
if (!token || !hookedToken) {
|
||||||
|
return token;
|
||||||
|
}
|
||||||
|
const data = state.colorpicker = (state.colorpicker || {});
|
||||||
|
const cache = data.cache = (data.cache || stream.lineOracle.doc.cm.state.colorpicker.cache);
|
||||||
|
const string = stream.string;
|
||||||
|
const sameString = string === data.lastString;
|
||||||
|
|
||||||
if (this.colorpicker ) {
|
data.lastString = string;
|
||||||
if (evt.key == 'Escape') {
|
|
||||||
this.colorpicker.hide();
|
let lineCache = data.lineCache = (sameString ? data.lineCache : cache.get(string));
|
||||||
} else if (this.colorpicker.isShortCut() == false) {
|
if (lineCache && lineCache.get(stream.start)) {
|
||||||
this.colorpicker.hide();
|
return hookedToken.override;
|
||||||
|
}
|
||||||
|
|
||||||
|
const color = hookedToken.process(stream);
|
||||||
|
if (color) {
|
||||||
|
if (!lineCache) {
|
||||||
|
lineCache = data.lineCache = new Map();
|
||||||
|
cache.set(string, lineCache);
|
||||||
|
}
|
||||||
|
lineCache.set(stream.start, color);
|
||||||
|
lineCache.set('lastAccessTime', performance.now());
|
||||||
|
return hookedToken.override;
|
||||||
|
}
|
||||||
|
|
||||||
|
return token;
|
||||||
|
}
|
||||||
|
|
||||||
|
function colorizeAtom(stream) {
|
||||||
|
const {start, pos, string} = stream;
|
||||||
|
const c1 = string.charAt(start);
|
||||||
|
if ((c1 === 't' || c1 === 'T') && string.slice(start, pos).toLowerCase() === 'transparent') {
|
||||||
|
return TRANSPARENT;
|
||||||
|
}
|
||||||
|
const maybeHex = c1 === '#';
|
||||||
|
const s = !maybeHex && string.charAt(pos) === '(' && string.slice(start, pos).toLowerCase();
|
||||||
|
if (maybeHex || (s === 'rgb' || s === 'rgba' || s === 'hsl' || s === 'hsla')) {
|
||||||
|
const rx = maybeHex ? RX_COLOR.hex : RX_COLOR[s];
|
||||||
|
rx.lastIndex = start;
|
||||||
|
const match = rx.exec(string);
|
||||||
|
return match && {color: match[0]};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function colorizeKeyword(stream) {
|
||||||
|
const {start, pos, string} = stream;
|
||||||
|
if (string.charAt(start) !== '!') {
|
||||||
|
const color = string.slice(start, pos);
|
||||||
|
const colorValue = NAMED_COLORS.get(color.toLowerCase());
|
||||||
|
return colorValue && {color, colorValue};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderVisibleTokens(cm) {
|
||||||
|
const {cache, options} = cm.state.colorpicker;
|
||||||
|
let line = cm.display.viewFrom - 1;
|
||||||
|
for (const {line: lineHandle, text} of cm.display.renderedView) {
|
||||||
|
if (!lineHandle.parent) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
line++;
|
||||||
|
const styles = lineHandle.styles;
|
||||||
|
if (!styles) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const lineCache = cache.get(lineHandle.text);
|
||||||
|
if (!lineCache) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let lineCacheAlive = false;
|
||||||
|
let elementIndex = 0;
|
||||||
|
let elements;
|
||||||
|
for (let i = 1; i < styles.length; i += 2) {
|
||||||
|
const token = styles[i + 1];
|
||||||
|
if (!token || !token.includes(OWN_TOKEN_NAME)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const start = styles[i - 2] || 0;
|
||||||
|
const data = lineCache.get(start);
|
||||||
|
if (!data) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
elements = elements || text.getElementsByClassName(OWN_DOM_CLASS);
|
||||||
|
const el = elements[elementIndex++];
|
||||||
|
if (el.colorpickerData && el.colorpickerData.color === data.color) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
el.colorpickerData = Object.assign({line, ch: start}, data);
|
||||||
|
let bg = el.firstElementChild;
|
||||||
|
if (!bg) {
|
||||||
|
bg = document.createElement('div');
|
||||||
|
bg.className = OWN_BACKGROUND_CLASS;
|
||||||
|
bg.title = options.tooltip;
|
||||||
|
el.appendChild(bg);
|
||||||
|
}
|
||||||
|
bg.style.setProperty('background-color', data.color, 'important');
|
||||||
|
lineCacheAlive = true;
|
||||||
|
}
|
||||||
|
if (lineCacheAlive) {
|
||||||
|
lineCache.set('lastAccessTime', performance.now());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
trimCache(cm);
|
||||||
|
}
|
||||||
|
|
||||||
|
function trimCache(cm, debounced) {
|
||||||
|
if (!debounced) {
|
||||||
|
clearTimeout(trimCache.timer);
|
||||||
|
trimCache.timer = setTimeout(trimCache, 20e3, cm, true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const cutoff = performance.now() - 60e3;
|
||||||
|
const {cache} = cm.state.colorpicker;
|
||||||
|
const textToKeep = new Set();
|
||||||
|
cm.doc.iter(({text}) => textToKeep.add(text));
|
||||||
|
for (const [text, lineCache] of cache.entries()) {
|
||||||
|
if (lineCache.get('lastAccessTime') < cutoff && !textToKeep.has(text)) {
|
||||||
|
cache.delete(text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.init_color_update = function () {
|
function getNamedColorsMap() {
|
||||||
this.markers = {}; // initialize marker list
|
return new Map([
|
||||||
|
['aliceblue', '#f0f8ff'],
|
||||||
|
['antiquewhite', '#faebd7'],
|
||||||
|
['aqua', '#00ffff'],
|
||||||
|
['aquamarine', '#7fffd4'],
|
||||||
|
['azure', '#f0ffff'],
|
||||||
|
['beige', '#f5f5dc'],
|
||||||
|
['bisque', '#ffe4c4'],
|
||||||
|
['black', '#000000'],
|
||||||
|
['blanchedalmond', '#ffebcd'],
|
||||||
|
['blue', '#0000ff'],
|
||||||
|
['blueviolet', '#8a2be2'],
|
||||||
|
['brown', '#a52a2a'],
|
||||||
|
['burlywood', '#deb887'],
|
||||||
|
['cadetblue', '#5f9ea0'],
|
||||||
|
['chartreuse', '#7fff00'],
|
||||||
|
['chocolate', '#d2691e'],
|
||||||
|
['coral', '#ff7f50'],
|
||||||
|
['cornflowerblue', '#6495ed'],
|
||||||
|
['cornsilk', '#fff8dc'],
|
||||||
|
['crimson', '#dc143c'],
|
||||||
|
['cyan', '#00ffff'],
|
||||||
|
['darkblue', '#00008b'],
|
||||||
|
['darkcyan', '#008b8b'],
|
||||||
|
['darkgoldenrod', '#b8860b'],
|
||||||
|
['darkgray', '#a9a9a9'],
|
||||||
|
['darkgreen', '#006400'],
|
||||||
|
['darkgrey', '#a9a9a9'],
|
||||||
|
['darkkhaki', '#bdb76b'],
|
||||||
|
['darkmagenta', '#8b008b'],
|
||||||
|
['darkolivegreen', '#556b2f'],
|
||||||
|
['darkorange', '#ff8c00'],
|
||||||
|
['darkorchid', '#9932cc'],
|
||||||
|
['darkred', '#8b0000'],
|
||||||
|
['darksalmon', '#e9967a'],
|
||||||
|
['darkseagreen', '#8fbc8f'],
|
||||||
|
['darkslateblue', '#483d8b'],
|
||||||
|
['darkslategray', '#2f4f4f'],
|
||||||
|
['darkslategrey', '#2f4f4f'],
|
||||||
|
['darkturquoise', '#00ced1'],
|
||||||
|
['darkviolet', '#9400d3'],
|
||||||
|
['deeppink', '#ff1493'],
|
||||||
|
['deepskyblue', '#00bfff'],
|
||||||
|
['dimgray', '#696969'],
|
||||||
|
['dimgrey', '#696969'],
|
||||||
|
['dodgerblue', '#1e90ff'],
|
||||||
|
['firebrick', '#b22222'],
|
||||||
|
['floralwhite', '#fffaf0'],
|
||||||
|
['forestgreen', '#228b22'],
|
||||||
|
['fuchsia', '#ff00ff'],
|
||||||
|
['gainsboro', '#dcdcdc'],
|
||||||
|
['ghostwhite', '#f8f8ff'],
|
||||||
|
['gold', '#ffd700'],
|
||||||
|
['goldenrod', '#daa520'],
|
||||||
|
['gray', '#808080'],
|
||||||
|
['green', '#008000'],
|
||||||
|
['greenyellow', '#adff2f'],
|
||||||
|
['grey', '#808080'],
|
||||||
|
['honeydew', '#f0fff0'],
|
||||||
|
['hotpink', '#ff69b4'],
|
||||||
|
['indianred', '#cd5c5c'],
|
||||||
|
['indigo', '#4b0082'],
|
||||||
|
['ivory', '#fffff0'],
|
||||||
|
['khaki', '#f0e68c'],
|
||||||
|
['lavender', '#e6e6fa'],
|
||||||
|
['lavenderblush', '#fff0f5'],
|
||||||
|
['lawngreen', '#7cfc00'],
|
||||||
|
['lemonchiffon', '#fffacd'],
|
||||||
|
['lightblue', '#add8e6'],
|
||||||
|
['lightcoral', '#f08080'],
|
||||||
|
['lightcyan', '#e0ffff'],
|
||||||
|
['lightgoldenrodyellow', '#fafad2'],
|
||||||
|
['lightgray', '#d3d3d3'],
|
||||||
|
['lightgreen', '#90ee90'],
|
||||||
|
['lightgrey', '#d3d3d3'],
|
||||||
|
['lightpink', '#ffb6c1'],
|
||||||
|
['lightsalmon', '#ffa07a'],
|
||||||
|
['lightseagreen', '#20b2aa'],
|
||||||
|
['lightskyblue', '#87cefa'],
|
||||||
|
['lightslategray', '#778899'],
|
||||||
|
['lightslategrey', '#778899'],
|
||||||
|
['lightsteelblue', '#b0c4de'],
|
||||||
|
['lightyellow', '#ffffe0'],
|
||||||
|
['lime', '#00ff00'],
|
||||||
|
['limegreen', '#32cd32'],
|
||||||
|
['linen', '#faf0e6'],
|
||||||
|
['magenta', '#ff00ff'],
|
||||||
|
['maroon', '#800000'],
|
||||||
|
['mediumaquamarine', '#66cdaa'],
|
||||||
|
['mediumblue', '#0000cd'],
|
||||||
|
['mediumorchid', '#ba55d3'],
|
||||||
|
['mediumpurple', '#9370db'],
|
||||||
|
['mediumseagreen', '#3cb371'],
|
||||||
|
['mediumslateblue', '#7b68ee'],
|
||||||
|
['mediumspringgreen', '#00fa9a'],
|
||||||
|
['mediumturquoise', '#48d1cc'],
|
||||||
|
['mediumvioletred', '#c71585'],
|
||||||
|
['midnightblue', '#191970'],
|
||||||
|
['mintcream', '#f5fffa'],
|
||||||
|
['mistyrose', '#ffe4e1'],
|
||||||
|
['moccasin', '#ffe4b5'],
|
||||||
|
['navajowhite', '#ffdead'],
|
||||||
|
['navy', '#000080'],
|
||||||
|
['oldlace', '#fdf5e6'],
|
||||||
|
['olive', '#808000'],
|
||||||
|
['olivedrab', '#6b8e23'],
|
||||||
|
['orange', '#ffa500'],
|
||||||
|
['orangered', '#ff4500'],
|
||||||
|
['orchid', '#da70d6'],
|
||||||
|
['palegoldenrod', '#eee8aa'],
|
||||||
|
['palegreen', '#98fb98'],
|
||||||
|
['paleturquoise', '#afeeee'],
|
||||||
|
['palevioletred', '#db7093'],
|
||||||
|
['papayawhip', '#ffefd5'],
|
||||||
|
['peachpuff', '#ffdab9'],
|
||||||
|
['peru', '#cd853f'],
|
||||||
|
['pink', '#ffc0cb'],
|
||||||
|
['plum', '#dda0dd'],
|
||||||
|
['powderblue', '#b0e0e6'],
|
||||||
|
['purple', '#800080'],
|
||||||
|
['rebeccapurple', '#663399'],
|
||||||
|
['red', '#ff0000'],
|
||||||
|
['rosybrown', '#bc8f8f'],
|
||||||
|
['royalblue', '#4169e1'],
|
||||||
|
['saddlebrown', '#8b4513'],
|
||||||
|
['salmon', '#fa8072'],
|
||||||
|
['sandybrown', '#f4a460'],
|
||||||
|
['seagreen', '#2e8b57'],
|
||||||
|
['seashell', '#fff5ee'],
|
||||||
|
['sienna', '#a0522d'],
|
||||||
|
['silver', '#c0c0c0'],
|
||||||
|
['skyblue', '#87ceeb'],
|
||||||
|
['slateblue', '#6a5acd'],
|
||||||
|
['slategray', '#708090'],
|
||||||
|
['slategrey', '#708090'],
|
||||||
|
['snow', '#fffafa'],
|
||||||
|
['springgreen', '#00ff7f'],
|
||||||
|
['steelblue', '#4682b4'],
|
||||||
|
['tan', '#d2b48c'],
|
||||||
|
['teal', '#008080'],
|
||||||
|
['thistle', '#d8bfd8'],
|
||||||
|
['tomato', '#ff6347'],
|
||||||
|
['turquoise', '#40e0d0'],
|
||||||
|
['violet', '#ee82ee'],
|
||||||
|
['wheat', '#f5deb3'],
|
||||||
|
['white', '#ffffff'],
|
||||||
|
['whitesmoke', '#f5f5f5'],
|
||||||
|
['yellow', '#ffff00'],
|
||||||
|
['yellowgreen', '#9acd32'],
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.style_color_update = function (lineHandle) {
|
class ColorMarker {
|
||||||
|
constructor(cm, {
|
||||||
if (lineHandle) {
|
tooltip = 'Open color picker',
|
||||||
this.match(lineHandle);
|
popupOptions = {},
|
||||||
} else {
|
colorpicker,
|
||||||
var max = this.cm.lineCount();
|
forceUpdate,
|
||||||
|
} = {}) {
|
||||||
for(var lineNo = 0; lineNo < max; lineNo++) {
|
this.cm = cm;
|
||||||
this.match(lineNo);
|
this.options = {
|
||||||
|
tooltip,
|
||||||
|
popup: Object.assign({
|
||||||
|
hideDelay: 2000,
|
||||||
|
hexUppercase: false,
|
||||||
|
tooltipForSwitcher: 'Switch formats: HEX -> RGB -> HSL',
|
||||||
|
}, popupOptions),
|
||||||
|
};
|
||||||
|
this.popup = cm.colorpicker ? cm.colorpicker() : colorpicker;
|
||||||
|
this.cache = new Map();
|
||||||
|
registerHooks(cm);
|
||||||
|
registerEvents(cm);
|
||||||
|
if (forceUpdate) {
|
||||||
|
resetMode(cm);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
unregisterHooks(this.cm);
|
||||||
|
unregisterEvents(this.cm);
|
||||||
|
resetMode(this.cm);
|
||||||
|
this.cm.state.colorpicker = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.empty_marker = function (lineNo, lineHandle) {
|
openPopup(defaultColor = '#FFFFFF') {
|
||||||
var list = lineHandle.markedSpans || [];
|
const cursor = this.cm.getCursor();
|
||||||
|
const data = {
|
||||||
for(var i = 0, len = list.length; i < len; i++) {
|
line: cursor.line,
|
||||||
var key = this.key(lineNo, list[i].from);
|
ch: cursor.ch,
|
||||||
|
color: defaultColor,
|
||||||
if (key && has_class(list[i].marker.replacedWith, colorpicker_class)) {
|
isShortCut: true,
|
||||||
delete this.markers[key];
|
};
|
||||||
list[i].marker.clear();
|
for (const {from, marker} of this.cm.getLineHandle(cursor.line).markedSpans || []) {
|
||||||
}
|
if (from <= data.ch && (marker.replacedWith || {}).colorpickerData) {
|
||||||
|
const {color, colorValue} = marker.replacedWith.colorpickerData;
|
||||||
}
|
if (data.ch <= from + color.length) {
|
||||||
}
|
data.ch = from;
|
||||||
|
data.color = color;
|
||||||
codemirror_colorpicker.prototype.color_regexp = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi;
|
data.colorValue = colorValue;
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.match_result = function (lineHandle) {
|
|
||||||
return lineHandle.text.match(this.color_regexp);
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.match = function (lineNo) {
|
|
||||||
var lineHandle = this.cm.getLineHandle(lineNo);
|
|
||||||
|
|
||||||
this.empty_marker(lineNo, lineHandle);
|
|
||||||
|
|
||||||
var result = this.match_result(lineHandle);
|
|
||||||
if (result)
|
|
||||||
{
|
|
||||||
var obj = { next : 0 };
|
|
||||||
for(var i = 0, len = result.length; i < len; i++) {
|
|
||||||
|
|
||||||
if (result[i].indexOf('#') > -1 || result[i].indexOf('rgb') > -1 || result[i].indexOf('hsl') > -1) {
|
|
||||||
this.render(obj, lineNo, lineHandle, result[i]);
|
|
||||||
} else {
|
|
||||||
var nameColor = color_names[result[i]];
|
|
||||||
if (nameColor) {
|
|
||||||
this.render(obj, lineNo, lineHandle, result[i], nameColor);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.make_element = function () {
|
|
||||||
var el = document.createElement('div');
|
|
||||||
|
|
||||||
el.className = colorpicker_class;
|
|
||||||
|
|
||||||
if (this.is_edit_mode())
|
|
||||||
{
|
|
||||||
el.title ="open color picker";
|
|
||||||
} else {
|
|
||||||
el.title ="";
|
|
||||||
}
|
|
||||||
|
|
||||||
el.back_element = this.make_background_element();
|
|
||||||
el.appendChild(el.back_element);
|
|
||||||
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.make_background_element = function () {
|
|
||||||
var el = document.createElement('div');
|
|
||||||
|
|
||||||
el.className = colorpicker_background_class;
|
|
||||||
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.set_state = function (lineNo, start, color, nameColor) {
|
|
||||||
var marker = this.create_marker(lineNo, start);
|
|
||||||
|
|
||||||
|
|
||||||
marker.lineNo = lineNo;
|
|
||||||
marker.ch = start;
|
|
||||||
marker.color = color;
|
|
||||||
marker.nameColor = nameColor;
|
|
||||||
|
|
||||||
return marker;
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.create_marker = function (lineNo, start) {
|
|
||||||
|
|
||||||
var key = this.key(lineNo,start);
|
|
||||||
|
|
||||||
if (!this.markers[key]) {
|
|
||||||
this.markers[key] = this.make_element();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return this.markers[key];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.has_marker = function (lineNo, start) {
|
|
||||||
var key = this.key(lineNo,start);
|
|
||||||
return !!(this.markers[key])
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.update_element = function (el, color) {
|
|
||||||
el.back_element.style.backgroundColor = color;
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.set_mark = function (line, ch, el) {
|
|
||||||
this.cm.setBookmark({ line : line, ch : ch}, { widget : el, handleMouseEvents : true} );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.is_excluded_token = function (line, ch) {
|
|
||||||
var token = this.cm.getTokenAt({line : line, ch : ch});
|
|
||||||
var count = 0;
|
|
||||||
for(var i = 0, len = excluded_token.length; i < len; i++) {
|
|
||||||
if (token.type === excluded_token[i]) {
|
|
||||||
count++;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
return count > 0; // true is that it has a excluded token
|
this.openPopupForToken({colorpickerData: data});
|
||||||
}
|
}
|
||||||
|
|
||||||
codemirror_colorpicker.prototype.render = function (cursor, lineNo, lineHandle, color, nameColor) {
|
openPopupForToken({colorpickerData: data}) {
|
||||||
var start = lineHandle.text.indexOf(color, cursor.next);
|
if (this.popup) {
|
||||||
|
const {left, bottom: top} = this.cm.charCoords(data, 'window');
|
||||||
if (this.is_excluded_token(lineNo, start) === true) {
|
this.popup.show(Object.assign(this.options.popup, data, {
|
||||||
// excluded token do not show.
|
top,
|
||||||
return;
|
left,
|
||||||
|
cm: this.cm,
|
||||||
|
color: data.colorValue || data.color,
|
||||||
|
prevColor: data.color,
|
||||||
|
isShortCut: false,
|
||||||
|
callback: ColorMarker.popupOnChange,
|
||||||
|
}));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
cursor.next = start + color.length;
|
closePopup() {
|
||||||
|
if (this.popup) {
|
||||||
if (this.has_marker(lineNo, start))
|
this.popup.hide();
|
||||||
{
|
}
|
||||||
this.update_element(this.create_marker(lineNo, start), nameColor || color);
|
|
||||||
this.set_state(lineNo, start, color, nameColor);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var el = this.create_marker(lineNo, start);
|
static popupOnChange(newColor) {
|
||||||
|
const {cm, line, ch, embedderCallback} = this;
|
||||||
this.update_element(el, nameColor || color);
|
const to = {line, ch: ch + this.prevColor.length};
|
||||||
this.set_state(lineNo, start, color, nameColor || color);
|
if (cm.getRange(this, to) !== newColor) {
|
||||||
this.set_mark(lineNo, start, el);
|
this.prevColor = newColor;
|
||||||
|
cm.replaceRange(newColor, this, to, '*colorpicker');
|
||||||
}
|
}
|
||||||
});
|
if (typeof embedderCallback === 'function') {
|
||||||
|
embedderCallback(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CodeMirror.defineOption('colorpicker', false, (cm, value, oldValue) => {
|
||||||
|
if (oldValue && oldValue !== CodeMirror.Init && cm.state.colorpicker) {
|
||||||
|
cm.state.colorpicker.destroy();
|
||||||
|
}
|
||||||
|
if (value) {
|
||||||
|
cm.state.colorpicker = new ColorMarker(cm, value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// initial runMode is performed by CodeMirror before setting our option
|
||||||
|
// so we register the hooks right away - not a problem as our js is loaded on demand
|
||||||
|
registerHooks();
|
||||||
|
})();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user