github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enforce a few eslint rules

Browse Source
This commit is contained in:
JFH
2021-05-13 01:00:09 +02:00
parent 9a5292b467
commit d3974f8f17
148 changed files with 1402 additions and 1398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/editor/components/PaintBox.js
View File

@@ -1,4 +1,4 @@
import {jGraduate} from './jgraduate/jQuery.jGraduate.js';
import { jGraduate } from './jgraduate/jQuery.jGraduate.js';
/**
*
*/
@@ -67,7 +67,7 @@ class PaintBox {
*/
static getPaint (svgCanvas, color, opac, type) {
// update the editor's fill paint
const opts = {alpha: opac};
const opts = { alpha: opac };
if (color.startsWith('url(#')) {
let refElem = svgCanvas.getRefElem(color);
refElem = (refElem) ? refElem.cloneNode(true) : document.querySelectorAll('#' + type + '_color defs *')[0];
@@ -88,7 +88,7 @@ class PaintBox {
update (svgcanvas, selectedElement) {
if (!selectedElement) { return null; }
const {type} = this;
const { type } = this;
switch (selectedElement.tagName) {
case 'use':
case 'image':

4
src/editor/components/jgraduate/ColorValuePicker.js
View File

@@ -232,7 +232,7 @@ export default class ColorValuePicker {
break;
case ahex:
color.value = 'ahex';
ahex.value = color.value.substring(6);
ahex.value = color.value.substring(6);
break;
}
}
@@ -349,7 +349,7 @@ export default class ColorValuePicker {
value = inputs[2],
hex = inputs[(inputs.length > 7) ? 7 : 6],
ahex = inputs.length > 7 ? inputs[8] : null;
Object.assign(that, {destroy});
Object.assign(that, { destroy });
red.addEventListener('keyup', keyUp);
green.addEventListener('keyup', keyUp);
blue.addEventListener('keyup', keyUp);

12
src/editor/components/jgraduate/Slider.js
View File

@@ -1,5 +1,5 @@
/* eslint-disable no-bitwise */
import {findPos} from './Util.js';
import { findPos } from './Util.js';
/**
* Whether a value is `null` or `undefined`.
* @param {any} val
@@ -38,7 +38,7 @@ export default class Slider {
*/
function mouseDown (e) {
const off = findPos(bar);
offset = {l: off.left | 0, t: off.top | 0};
offset = { l: off.left | 0, t: off.top | 0 };
clearTimeout(timeout);
// using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
timeout = setTimeout(function () {
@@ -146,7 +146,7 @@ export default class Slider {
case 'x': return x;
case 'y': return y;
case 'xy':
default: return {x, y};
default: return { x, y };
}
}
if (!isNullish(context) && context === that) return undefined;
@@ -216,12 +216,12 @@ export default class Slider {
switch (name.toLowerCase()) {
case 'minx': return minX;
case 'maxx': return maxX;
case 'rangex': return {minX, maxX, rangeX};
case 'rangex': return { minX, maxX, rangeX };
case 'miny': return minY;
case 'maxy': return maxY;
case 'rangey': return {minY, maxY, rangeY};
case 'rangey': return { minY, maxY, rangeY };
case 'all':
default: return {minX, maxX, rangeX, minY, maxY, rangeY};
default: return { minX, maxX, rangeX, minY, maxY, rangeY };
}
}
let // changed = false,

38
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@@ -20,8 +20,8 @@
* @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
*/
import Paint from './paint.js';
import {jPickerDefaults, jPickerMethod} from './jQuery.jPicker.js';
import {findPos} from './Util.js';
import { jPickerDefaults, jPickerMethod } from './jQuery.jPicker.js';
import { findPos } from './Util.js';
/**
* @todo JFH: This jQuery plugin was adapted to work within a Web Component.
@@ -126,11 +126,11 @@ const isGecko = navigator.userAgent.includes('Gecko/');
*/
function setAttrs (elem, attrs) {
if (isGecko) {
Object.entries(attrs).forEach(([aname, val]) => {
Object.entries(attrs).forEach(([ aname, val ]) => {
elem.setAttribute(aname, val);
});
} else {
Object.entries(attrs).forEach(([aname, val]) => {
Object.entries(attrs).forEach(([ aname, val ]) => {
const prop = elem[aname];
if (prop && prop.constructor === 'SVGLength') {
prop.baseVal.value = val;
@@ -221,7 +221,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
};
Object.assign($this, {
// make a copy of the incoming paint
paint: new jGraduate.Paint({copy: $settings.paint}),
paint: new jGraduate.Paint({ copy: $settings.paint }),
okCallback: typeof okCallback === 'function' ? okCallback : null,
cancelCallback: typeof cancelCallback === 'function' ? cancelCallback : null
});
@@ -231,7 +231,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const $win = window;
if ($this.paint.type === 'none') {
$this.paint = new jGraduate.Paint({solidColor: 'ffffff'});
$this.paint = new jGraduate.Paint({ solidColor: 'ffffff' });
}
$this.classList.add('jGraduate_Picker');
/* eslint-disable max-len */
@@ -531,7 +531,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
$elem.style.top = e.target.value * MAX;
}
};
for (const [, attr] of ['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'].entries()) {
for (const [ , attr ] of [ 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy' ].entries()) {
const isRadial = isNaN(attr[1]);
let attrval = curGradient.getAttribute(attr);
@@ -620,9 +620,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
jqPickerElem.style.left = '100px';
jqPickerElem.style.bottom = '15px';
jPickerMethod(jqPickerElem, {
window: {title: 'Pick the start color and opacity for the gradient'},
images: {clientPath: $settings.images.clientPath},
color: {active: colr, alphaSupport: true}
window: { title: 'Pick the start color and opacity for the gradient' },
images: { clientPath: $settings.images.clientPath },
color: { active: colr, alphaSupport: true }
}, function (clr) {
stopColor = clr.val('hex') ? ('#' + clr.val('hex')) : 'none';
stopOpacity = clr.val('a') !== null ? clr.val('a') / 256 : 1;
@@ -752,9 +752,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
}
drag.setAttribute('transform', xfStr);
const jqpgpath = $this.querySelector('#'+drag.dataset.bg);
const jqpgpath = $this.querySelector('#'+drag.dataset.bg);
jqpgpath.setAttribute('transform', xfStr);
const stop = $this.querySelector('#'+drag.dataset.stop);
const stop = $this.querySelector('#'+drag.dataset.stop);
const sX = (x - 10) / MAX;
stop.setAttribute('offset', sX);
@@ -795,7 +795,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
stopMakerSVG.addEventListener('click', function (evt) {
stopOffset = findPos(stopMakerDiv);
const {target} = evt;
const { target } = evt;
if (target.tagName === 'path') return;
let x = evt.pageX - stopOffset.left - 8;
x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x;
@@ -983,7 +983,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
let slider;
const setSlider = function (e) {
const {offset: {left}} = slider;
const { offset: { left } } = slider;
const divi = slider.parent;
let x = (e.pageX - left - Number.parseInt(getComputedStyle(divi, null).getPropertyValue('border-left-width')));
if (x > SLIDERW) x = SLIDERW;
@@ -1088,7 +1088,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
val: angleVal
}
};
for (const [, [type, data]] of Object.entries(Object.entries(sliders))) {
for (const [ , [ type, data ] ] of Object.entries(Object.entries(sliders))) {
const handle = $this.querySelector(data.handle);
const sInput = $this.querySelector(data.input);
handle.addEventListener('mousedown', function (evt) {
@@ -1177,15 +1177,15 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
}
// This should be done somewhere else, probably
Object.assign(jPickerDefaults.window, {
alphaSupport: true, effects: {type: 'show', speed: 0}
alphaSupport: true, effects: { type: 'show', speed: 0 }
});
jPickerMethod(
colPicker,
{
window: {title: $settings.window.pickerTitle},
images: {clientPath: $settings.images.clientPath},
color: {active: color, alphaSupport: true}
window: { title: $settings.window.pickerTitle },
images: { clientPath: $settings.images.clientPath },
color: { active: color, alphaSupport: true }
},
function (clr) {
$this.paint.type = 'solidColor';

298
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@@ -19,7 +19,7 @@
/* eslint-disable max-len */
import ColorValuePicker from './ColorValuePicker.js';
import Slider from './Slider.js';
import {findPos,mergeDeep} from './Util.js';
import { findPos, mergeDeep } from './Util.js';
/**
* @external Math
@@ -121,7 +121,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (isNullish(name) || name === '') name = 'all';
if (isNullish(r)) return null;
switch (name.toLowerCase()) {
case 'ahex': return ColorMethods.rgbaToHex({r, g, b, a});
case 'ahex': return ColorMethods.rgbaToHex({ r, g, b, a });
case 'hex': return val('ahex').substring(0, 6);
case 'all': return {
r, g, b, a, h, s, v,
@@ -131,7 +131,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
default: {
ret = {};
const nameLength = name.length;
[...name].forEach((ch) => {
[ ...name ].forEach((ch) => {
switch (ch) {
case 'r':
if (nameLength === 1) ret = r;
@@ -234,7 +234,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (value.h !== undefined && !name.includes('h')) name += 'h';
if (value.s !== undefined && !name.includes('s')) name += 's';
if (value.v !== undefined && !name.includes('v')) name += 'v';
[...name].forEach((ch) => {
[ ...name ].forEach((ch) => {
switch (ch) {
case 'r':
if (hsv) return;
@@ -243,7 +243,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.r < 0) newV.r = 0;
else if (newV.r > 255) newV.r = 255;
if (r !== newV.r) {
({r} = newV);
({ r } = newV);
changed = true;
}
break;
@@ -254,7 +254,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.g < 0) newV.g = 0;
else if (newV.g > 255) newV.g = 255;
if (g !== newV.g) {
({g} = newV);
({ g } = newV);
changed = true;
}
break;
@@ -265,7 +265,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.b < 0) newV.b = 0;
else if (newV.b > 255) newV.b = 255;
if (b !== newV.b) {
({b} = newV);
({ b } = newV);
changed = true;
}
break;
@@ -274,7 +274,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.a < 0) newV.a = 0;
else if (newV.a > 255) newV.a = 255;
if (a !== newV.a) {
({a} = newV);
({ a } = newV);
changed = true;
}
break;
@@ -285,7 +285,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.h < 0) newV.h = 0;
else if (newV.h > 360) newV.h = 360;
if (h !== newV.h) {
({h} = newV);
({ h } = newV);
changed = true;
}
break;
@@ -296,7 +296,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.s < 0) newV.s = 0;
else if (newV.s > 100) newV.s = 100;
if (s !== newV.s) {
({s} = newV);
({ s } = newV);
changed = true;
}
break;
@@ -307,7 +307,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
if (newV.v < 0) newV.v = 0;
else if (newV.v > 100) newV.v = 100;
if (v !== newV.v) {
({v} = newV);
({ v } = newV);
changed = true;
}
break;
@@ -318,14 +318,14 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
r = r || 0;
g = g || 0;
b = b || 0;
const ret = ColorMethods.rgbToHsv({r, g, b});
({h, s, v} = ret);
const ret = ColorMethods.rgbToHsv({ r, g, b });
({ h, s, v } = ret);
} else if (hsv) {
h = h || 0;
s = !isNullish(s) ? s : 100;
v = !isNullish(v) ? v : 100;
const ret = ColorMethods.hsvToRgb({h, s, v});
({r, g, b} = ret);
const ret = ColorMethods.hsvToRgb({ h, s, v });
({ r, g, b } = ret);
}
a = !isNullish(a) ? a : 255;
fireChangeEvents.call(that, context || that);
@@ -375,7 +375,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
val(
(!isNullish(init.a) ? 'a' : '') + 'hex',
!isNullish(init.a)
? {ahex: init.hex + ColorMethods.intToHex(init.a)}
? { ahex: init.hex + ColorMethods.intToHex(init.a) }
: init
);
} else if (!isNullish(init.r) && !isNullish(init.g) && !isNullish(init.b)) {
@@ -408,7 +408,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
* @returns {module:jPicker.RGBA}
*/
hexToRgba (hex) {
if (hex === '' || hex === 'none') return {r: null, g: null, b: null, a: null};
if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null };
hex = this.validateHex(hex);
let r = '00', g = '00', b = '00', a = '255';
if (hex.length === 6) hex += 'ff';
@@ -476,7 +476,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
* @returns {module:jPicker.HSV}
*/
rgbToHsv (rgb) {
const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = {h: 0, s: 0, v: 0};
const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 };
let min = 0, max = 0;
if (r >= g && r >= b) {
max = r;
@@ -509,8 +509,8 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
* @returns {module:jPicker.RGB}
*/
hsvToRgb (hsv) {
const rgb = {r: 0, g: 0, b: 0, a: 100};
let {h, s, v} = hsv;
const rgb = { r: 0, g: 0, b: 0, a: 100 };
let { h, s, v } = hsv;
if (s === 0) {
if (v === 0) rgb.r = rgb.g = rgb.b = 0;
else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
@@ -564,7 +564,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ {
}
}
};
const {Color, List, ColorMethods} = jPicker; // local copies for YUI compressor
const { Color, List, ColorMethods } = jPicker; // local copies for YUI compressor
/**
* @function external:jQuery.fn.jPicker
* @see {@link external:jQuery.fn.$.fn.jPicker}
@@ -617,11 +617,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
}
});
if (that.value === '') {
settings.color.active = new Color({hex: null});
settings.color.current = new Color({hex: null});
settings.color.active = new Color({ hex: null });
settings.color.current = new Color({ hex: null });
} else if (ColorMethods.validateHex(that.value)) {
settings.color.active = new Color({hex: that.value, a: settings.color.active.val('a')});
settings.color.current = new Color({hex: that.value, a: settings.color.active.val('a')});
settings.color.active = new Color({ hex: that.value, a: settings.color.active.val('a') });
settings.color.current = new Color({ hex: that.value, a: settings.color.active.val('a') });
}
}
if (settings.window.expandable) {
@@ -646,7 +646,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void}
*/
function setColorMode (colorMode) {
const {active} = color, // local copies for YUI compressor
const { active } = color, // local copies for YUI compressor
// {clientPath} = images,
hex = active.val('hex');
let rgbMap, rgbBar;
@@ -671,10 +671,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setImgLoc.call(that, colorBarL6, 260);
setAlpha.call(that, colorBarL6, 100);
}, 0);
colorMap.range('all', {minX: 0, maxX: 100, minY: 0, maxY: 100});
colorBar.range('rangeY', {minY: 0, maxY: 360});
colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
colorBar.range('rangeY', { minY: 0, maxY: 360 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('s'), y: 100 - active.val('v')}, colorMap);
colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
colorBar.val('y', 360 - active.val('h'), colorBar);
break;
case 's':
@@ -687,10 +687,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setImgLoc.call(that, colorBarL6, 260);
setAlpha.call(that, colorBarL6, 100);
}, 0);
colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
colorBar.range('rangeY', {minY: 0, maxY: 100});
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
colorBar.range('rangeY', { minY: 0, maxY: 100 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
colorBar.val('y', 100 - active.val('s'), colorBar);
break;
case 'v':
@@ -705,37 +705,37 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setImgLoc.call(that, colorBarL6, 260);
setAlpha.call(that, colorBarL6, 100);
}, 0);
colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
colorBar.range('rangeY', {minY: 0, maxY: 100});
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
colorBar.range('rangeY', { minY: 0, maxY: 100 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('s')}, colorMap);
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
colorBar.val('y', 100 - active.val('v'), colorBar);
break;
case 'r':
rgbMap = -1040;
rgbBar = -780;
colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
colorBar.range('rangeY', {minY: 0, maxY: 255});
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
colorBar.range('rangeY', { minY: 0, maxY: 255 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('g')}, colorMap);
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
colorBar.val('y', 255 - active.val('r'), colorBar);
break;
case 'g':
rgbMap = -1560;
rgbBar = -1820;
colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
colorBar.range('rangeY', {minY: 0, maxY: 255});
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
colorBar.range('rangeY', { minY: 0, maxY: 255 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('r')}, colorMap);
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
colorBar.val('y', 255 - active.val('g'), colorBar);
break;
case 'b':
rgbMap = -2080;
rgbBar = -2860;
colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
colorBar.range('rangeY', {minY: 0, maxY: 255});
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
colorBar.range('rangeY', { minY: 0, maxY: 255 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('r'), y: 255 - active.val('g')}, colorMap);
colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
colorBar.val('y', 255 - active.val('b'), colorBar);
break;
case 'a':
@@ -749,10 +749,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setImgLoc.call(that, colorBarL6, 0);
setAlpha.call(that, colorBarL6, 100);
}, 0);
colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
colorBar.range('rangeY', {minY: 0, maxY: 255});
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
colorBar.range('rangeY', { minY: 0, maxY: 255 });
if (isNullish(active.val('ahex'))) break;
colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
colorBar.val('y', 255 - active.val('a'), colorBar);
break;
default:
@@ -817,28 +817,28 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void}
*/
function mapValueChanged (ui, context) {
const {active} = color;
const { active } = color;
if (context !== colorMap && isNullish(active.val())) return;
const xy = ui.val('all');
switch (settings.color.mode) {
case 'h':
active.val('sv', {s: xy.x, v: 100 - xy.y}, context);
active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
break;
case 's':
case 'a':
active.val('hv', {h: xy.x, v: 100 - xy.y}, context);
active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
break;
case 'v':
active.val('hs', {h: xy.x, s: 100 - xy.y}, context);
active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
break;
case 'r':
active.val('gb', {g: 255 - xy.y, b: xy.x}, context);
active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
break;
case 'g':
active.val('rb', {r: 255 - xy.y, b: xy.x}, context);
active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
break;
case 'b':
active.val('rg', {r: xy.x, g: 255 - xy.y}, context);
active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
break;
}
}
@@ -850,26 +850,26 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void}
*/
function colorBarValueChanged (ui, context) {
const {active} = color;
const { active } = color;
if (context !== colorBar && isNullish(active.val())) return;
switch (settings.color.mode) {
case 'h':
active.val('h', {h: 360 - ui.val('y')}, context);
active.val('h', { h: 360 - ui.val('y') }, context);
break;
case 's':
active.val('s', {s: 100 - ui.val('y')}, context);
active.val('s', { s: 100 - ui.val('y') }, context);
break;
case 'v':
active.val('v', {v: 100 - ui.val('y')}, context);
active.val('v', { v: 100 - ui.val('y') }, context);
break;
case 'r':
active.val('r', {r: 255 - ui.val('y')}, context);
active.val('r', { r: 255 - ui.val('y') }, context);
break;
case 'g':
active.val('g', {g: 255 - ui.val('y')}, context);
active.val('g', { g: 255 - ui.val('y') }, context);
break;
case 'b':
active.val('b', {b: 255 - ui.val('y')}, context);
active.val('b', { b: 255 - ui.val('y') }, context);
break;
case 'a':
active.val('a', 255 - ui.val('y'), context);
@@ -888,29 +888,29 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
switch (settings.color.mode) {
case 'h': {
const sv = ui.val('sv');
colorMap.val('xy', {x: !isNullish(sv) ? sv.s : 100, y: 100 - (!isNullish(sv) ? sv.v : 100)}, context);
colorMap.val('xy', { x: !isNullish(sv) ? sv.s : 100, y: 100 - (!isNullish(sv) ? sv.v : 100) }, context);
break;
} case 's':
// Fall through
case 'a': {
const hv = ui.val('hv');
colorMap.val('xy', {x: (hv && hv.h) || 0, y: 100 - (!isNullish(hv) ? hv.v : 100)}, context);
colorMap.val('xy', { x: (hv && hv.h) || 0, y: 100 - (!isNullish(hv) ? hv.v : 100) }, context);
break;
} case 'v': {
const hs = ui.val('hs');
colorMap.val('xy', {x: (hs && hs.h) || 0, y: 100 - (!isNullish(hs) ? hs.s : 100)}, context);
colorMap.val('xy', { x: (hs && hs.h) || 0, y: 100 - (!isNullish(hs) ? hs.s : 100) }, context);
break;
} case 'r': {
const bg = ui.val('bg');
colorMap.val('xy', {x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0)}, context);
colorMap.val('xy', { x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0) }, context);
break;
} case 'g': {
const br = ui.val('br');
colorMap.val('xy', {x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0)}, context);
colorMap.val('xy', { x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0) }, context);
break;
} case 'b': {
const rg = ui.val('rg');
colorMap.val('xy', {x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0)}, context);
colorMap.val('xy', { x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0) }, context);
break;
}
}
@@ -963,7 +963,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
function updateMapVisuals (ui) {
switch (settings.color.mode) {
case 'h':
setBG.call(that, colorMapDiv, new Color({h: ui.val('h') || 0, s: 100, v: 100}).val('hex'));
setBG.call(that, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
break;
case 's':
case 'a': {
@@ -999,14 +999,14 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
break;
} case 's': {
const hva = ui.val('hva'),
saturatedColor = new Color({h: (hva && hva.h) || 0, s: 100, v: !isNullish(hva) ? hva.v : 100});
saturatedColor = new Color({ h: (hva && hva.h) || 0, s: 100, v: !isNullish(hva) ? hva.v : 100 });
setBG.call(that, colorBarDiv, saturatedColor.val('hex'));
setAlpha.call(that, colorBarL2, 100 - (!isNullish(hva) ? hva.v : 100));
setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4));
break;
} case 'v': {
const hsa = ui.val('hsa'),
valueColor = new Color({h: (hsa && hsa.h) || 0, s: !isNullish(hsa) ? hsa.s : 100, v: 100});
valueColor = new Color({ h: (hsa && hsa.h) || 0, s: !isNullish(hsa) ? hsa.s : 100, v: 100 });
setBG.call(that, colorBarDiv, valueColor.val('hex'));
setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4));
break;
@@ -1487,7 +1487,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
for (let i = 0; i < color.quickList.length; i++) {
/* if default colors are hex strings, change them to color objects */
if ((typeof (color.quickList[i])).toString().toLowerCase() === 'string') {
color.quickList[i] = new Color({hex: color.quickList[i]});
color.quickList[i] = new Color({ hex: color.quickList[i] });
}
const alpha = color.quickList[i].val('a');
let ahex = color.quickList[i].val('ahex');
@@ -1588,23 +1588,23 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
}
}
}
const {images, localization} = settings; // local copies for YUI compressor
const { images, localization } = settings; // local copies for YUI compressor
const color = {
active: (typeof settings.color.active).toString().toLowerCase() === 'string'
? new Color({ahex: !settings.window.alphaSupport && settings.color.active
? new Color({ ahex: !settings.window.alphaSupport && settings.color.active
? settings.color.active.substring(0, 6) + 'ff'
: settings.color.active
})
: new Color({ahex: !settings.window.alphaSupport &&
: new Color({ ahex: !settings.window.alphaSupport &&
settings.color.active.val('ahex')
? settings.color.active.val('ahex').substring(0, 6) + 'ff'
: settings.color.active.val('ahex')
}),
current: (typeof settings.color.active).toString().toLowerCase() === 'string'
? new Color({ahex: !settings.window.alphaSupport && settings.color.active
? new Color({ ahex: !settings.window.alphaSupport && settings.color.active
? settings.color.active.substring(0, 6) + 'ff'
: settings.color.active})
: new Color({ahex: !settings.window.alphaSupport &&
: settings.color.active })
: new Color({ ahex: !settings.window.alphaSupport &&
settings.color.active.val('ahex')
? settings.color.active.val('ahex').substring(0, 6) + 'ff'
: settings.color.active.val('ahex')
@@ -1770,79 +1770,79 @@ export const jPickerDefaults = {
},
color: {
mode: 'h',
active: new Color({ahex: '#ffcc00ff'}),
active: new Color({ ahex: '#ffcc00ff' }),
quickList: [
new Color({h: 360, s: 33, v: 100}),
new Color({h: 360, s: 66, v: 100}),
new Color({h: 360, s: 100, v: 100}),
new Color({h: 360, s: 100, v: 75}),
new Color({h: 360, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 100}),
new Color({h: 30, s: 33, v: 100}),
new Color({h: 30, s: 66, v: 100}),
new Color({h: 30, s: 100, v: 100}),
new Color({h: 30, s: 100, v: 75}),
new Color({h: 30, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 90}),
new Color({h: 60, s: 33, v: 100}),
new Color({h: 60, s: 66, v: 100}),
new Color({h: 60, s: 100, v: 100}),
new Color({h: 60, s: 100, v: 75}),
new Color({h: 60, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 80}),
new Color({h: 90, s: 33, v: 100}),
new Color({h: 90, s: 66, v: 100}),
new Color({h: 90, s: 100, v: 100}),
new Color({h: 90, s: 100, v: 75}),
new Color({h: 90, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 70}),
new Color({h: 120, s: 33, v: 100}),
new Color({h: 120, s: 66, v: 100}),
new Color({h: 120, s: 100, v: 100}),
new Color({h: 120, s: 100, v: 75}),
new Color({h: 120, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 60}),
new Color({h: 150, s: 33, v: 100}),
new Color({h: 150, s: 66, v: 100}),
new Color({h: 150, s: 100, v: 100}),
new Color({h: 150, s: 100, v: 75}),
new Color({h: 150, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 50}),
new Color({h: 180, s: 33, v: 100}),
new Color({h: 180, s: 66, v: 100}),
new Color({h: 180, s: 100, v: 100}),
new Color({h: 180, s: 100, v: 75}),
new Color({h: 180, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 40}),
new Color({h: 210, s: 33, v: 100}),
new Color({h: 210, s: 66, v: 100}),
new Color({h: 210, s: 100, v: 100}),
new Color({h: 210, s: 100, v: 75}),
new Color({h: 210, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 30}),
new Color({h: 240, s: 33, v: 100}),
new Color({h: 240, s: 66, v: 100}),
new Color({h: 240, s: 100, v: 100}),
new Color({h: 240, s: 100, v: 75}),
new Color({h: 240, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 20}),
new Color({h: 270, s: 33, v: 100}),
new Color({h: 270, s: 66, v: 100}),
new Color({h: 270, s: 100, v: 100}),
new Color({h: 270, s: 100, v: 75}),
new Color({h: 270, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 10}),
new Color({h: 300, s: 33, v: 100}),
new Color({h: 300, s: 66, v: 100}),
new Color({h: 300, s: 100, v: 100}),
new Color({h: 300, s: 100, v: 75}),
new Color({h: 300, s: 100, v: 50}),
new Color({h: 180, s: 0, v: 0}),
new Color({h: 330, s: 33, v: 100}),
new Color({h: 330, s: 66, v: 100}),
new Color({h: 330, s: 100, v: 100}),
new Color({h: 330, s: 100, v: 75}),
new Color({h: 330, s: 100, v: 50}),
new Color({ h: 360, s: 33, v: 100 }),
new Color({ h: 360, s: 66, v: 100 }),
new Color({ h: 360, s: 100, v: 100 }),
new Color({ h: 360, s: 100, v: 75 }),
new Color({ h: 360, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 100 }),
new Color({ h: 30, s: 33, v: 100 }),
new Color({ h: 30, s: 66, v: 100 }),
new Color({ h: 30, s: 100, v: 100 }),
new Color({ h: 30, s: 100, v: 75 }),
new Color({ h: 30, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 90 }),
new Color({ h: 60, s: 33, v: 100 }),
new Color({ h: 60, s: 66, v: 100 }),
new Color({ h: 60, s: 100, v: 100 }),
new Color({ h: 60, s: 100, v: 75 }),
new Color({ h: 60, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 80 }),
new Color({ h: 90, s: 33, v: 100 }),
new Color({ h: 90, s: 66, v: 100 }),
new Color({ h: 90, s: 100, v: 100 }),
new Color({ h: 90, s: 100, v: 75 }),
new Color({ h: 90, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 70 }),
new Color({ h: 120, s: 33, v: 100 }),
new Color({ h: 120, s: 66, v: 100 }),
new Color({ h: 120, s: 100, v: 100 }),
new Color({ h: 120, s: 100, v: 75 }),
new Color({ h: 120, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 60 }),
new Color({ h: 150, s: 33, v: 100 }),
new Color({ h: 150, s: 66, v: 100 }),
new Color({ h: 150, s: 100, v: 100 }),
new Color({ h: 150, s: 100, v: 75 }),
new Color({ h: 150, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 50 }),
new Color({ h: 180, s: 33, v: 100 }),
new Color({ h: 180, s: 66, v: 100 }),
new Color({ h: 180, s: 100, v: 100 }),
new Color({ h: 180, s: 100, v: 75 }),
new Color({ h: 180, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 40 }),
new Color({ h: 210, s: 33, v: 100 }),
new Color({ h: 210, s: 66, v: 100 }),
new Color({ h: 210, s: 100, v: 100 }),
new Color({ h: 210, s: 100, v: 75 }),
new Color({ h: 210, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 30 }),
new Color({ h: 240, s: 33, v: 100 }),
new Color({ h: 240, s: 66, v: 100 }),
new Color({ h: 240, s: 100, v: 100 }),
new Color({ h: 240, s: 100, v: 75 }),
new Color({ h: 240, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 20 }),
new Color({ h: 270, s: 33, v: 100 }),
new Color({ h: 270, s: 66, v: 100 }),
new Color({ h: 270, s: 100, v: 100 }),
new Color({ h: 270, s: 100, v: 75 }),
new Color({ h: 270, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 10 }),
new Color({ h: 300, s: 33, v: 100 }),
new Color({ h: 300, s: 66, v: 100 }),
new Color({ h: 300, s: 100, v: 100 }),
new Color({ h: 300, s: 100, v: 75 }),
new Color({ h: 300, s: 100, v: 50 }),
new Color({ h: 180, s: 0, v: 0 }),
new Color({ h: 330, s: 33, v: 100 }),
new Color({ h: 330, s: 66, v: 100 }),
new Color({ h: 330, s: 100, v: 100 }),
new Color({ h: 330, s: 100, v: 75 }),
new Color({ h: 330, s: 100, v: 50 }),
new Color()
]
},

4
src/editor/components/seButton.js
View File

@@ -51,7 +51,7 @@ export class ToolButton extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$div = this._shadowRoot.querySelector('div');
@@ -62,7 +62,7 @@ export class ToolButton extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'src', 'pressed', 'disabled', 'size', 'style'];
return [ 'title', 'src', 'pressed', 'disabled', 'size', 'style' ];
}
/**
* @function attributeChangedCallback

20
src/editor/components/seColorPicker.js
View File

@@ -1,5 +1,5 @@
/* eslint-disable max-len */
import {jGraduate, jGraduateMethod} from './jgraduate/jQuery.jGraduate.js';
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js';
const template = document.createElement('template');
@@ -658,7 +658,7 @@ export class SeColorPicker extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$logo = this._shadowRoot.getElementById('logo');
this.$label = this._shadowRoot.getElementById('label');
@@ -672,7 +672,7 @@ export class SeColorPicker extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['label', 'src', 'type'];
return [ 'label', 'src', 'type' ];
}
/**
* @function attributeChangedCallback
@@ -754,9 +754,9 @@ export class SeColorPicker extends HTMLElement {
update (svgCanvas, selectedElement, apply) {
const paint = this.paintBox.update(svgCanvas, selectedElement);
if (paint && apply) {
const changeEvent = new CustomEvent('change', {detail: {
const changeEvent = new CustomEvent('change', { detail: {
paint
}});
} });
this.dispatchEvent(changeEvent);
}
}
@@ -775,21 +775,21 @@ export class SeColorPicker extends HTMLElement {
connectedCallback () {
this.paintBox = new PaintBox(this.$block, this.type);
this.$picker.addEventListener('click', () => {
let {paint} = this.paintBox;
let { paint } = this.paintBox;
jGraduateMethod(
this.$color_picker,
{
images: {clientPath: './components/jgraduate/images/'},
images: { clientPath: './components/jgraduate/images/' },
paint,
window: {pickerTitle: this.label},
window: { pickerTitle: this.label },
newstop: 'inverse'
},
(p) => {
paint = new jGraduate.Paint(p);
this.setPaint(paint);
const changeEvent = new CustomEvent('change', {detail: {
const changeEvent = new CustomEvent('change', { detail: {
paint
}});
} });
this.dispatchEvent(changeEvent);
this.$color_picker.style.display = 'none';
},

16
src/editor/components/seDropdown.js
View File

@@ -1,7 +1,7 @@
import ListComboBox from 'elix/define/ListComboBox.js';
import {defaultState} from 'elix/src/base/internal.js';
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
import {internal} from 'elix';
import { defaultState } from 'elix/src/base/internal.js';
import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js';
import { internal } from 'elix';
import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js';
/**
@@ -56,7 +56,7 @@ class Dropdown extends ListComboBox {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'src', 'inputsize', 'value'];
return [ 'title', 'src', 'inputsize', 'value' ];
}
/**
* @function attributeChangedCallback
@@ -105,7 +105,7 @@ class Dropdown extends ListComboBox {
e.preventDefault();
const value = e.detail?.closeResult?.getAttribute('value');
if (value) {
const closeEvent = new CustomEvent('change', {detail: {value}});
const closeEvent = new CustomEvent('change', { detail: { value } });
this.dispatchEvent(closeEvent);
}
});
@@ -123,7 +123,7 @@ class Dropdown extends ListComboBox {
* @returns {void}
*/
set src (src) {
this[internal.setState]({src});
this[internal.setState]({ src });
}
/**
* @function inputsize
@@ -137,7 +137,7 @@ class Dropdown extends ListComboBox {
* @returns {void}
*/
set inputsize (inputsize) {
this[internal.setState]({inputsize});
this[internal.setState]({ inputsize });
}
/**
* @function value
@@ -151,7 +151,7 @@ class Dropdown extends ListComboBox {
* @returns {void}
*/
set value (value) {
this[internal.setState]({value});
this[internal.setState]({ value });
}
}

10
src/editor/components/seExplorerButton.js
View File

@@ -107,7 +107,7 @@ export class ExplorerButton extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button');
@@ -124,7 +124,7 @@ export class ExplorerButton extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'pressed', 'disabled', 'lib', 'src'];
return [ 'title', 'pressed', 'disabled', 'lib', 'src' ];
}
/**
* @function attributeChangedCallback
@@ -160,7 +160,7 @@ export class ExplorerButton extends HTMLElement {
try {
const response = await fetch(`${newValue}index.json`);
const json = await response.json();
const {lib} = json;
const { lib } = json;
this.$menu.innerHTML = lib.map((menu, i) => (
`<div data-menu="${menu}" class="menu-item ${(i === 0) ? 'pressed' : ''} ">${menu}</div>`
)).join('');
@@ -295,9 +295,9 @@ export class ExplorerButton extends HTMLElement {
const size = json.size ?? 300;
const fill = json.fill ? '#333' : 'none';
const off = size * 0.05;
const vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
const vb = [ -off, -off, size + off * 2, size + off * 2 ].join(' ');
const stroke = json.fill ? 0 : (size / 30);
this.$lib.innerHTML = Object.entries(this.data).map(([key, path]) => {
this.$lib.innerHTML = Object.entries(this.data).map(([ key, path ]) => {
const encoded = btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<svg viewBox="${vb}"><path fill="${fill}" stroke="#000" stroke-width="${stroke}" d="${path}"></path></svg>

4
src/editor/components/seFlyingButton.js
View File

@@ -88,7 +88,7 @@ export class FlyingButton extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button');
@@ -105,7 +105,7 @@ export class FlyingButton extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'pressed', 'disabled', 'opened'];
return [ 'title', 'pressed', 'disabled', 'opened' ];
}
/**
* @function attributeChangedCallback

4
src/editor/components/seInput.js
View File

@@ -35,7 +35,7 @@ export class SEInput extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$img = this._shadowRoot.querySelector('img');
@@ -48,7 +48,7 @@ export class SEInput extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['value', 'label', 'src', 'size'];
return [ 'value', 'label', 'src', 'size' ];
}
/**
* @function attributeChangedCallback

6
src/editor/components/seList.js
View File

@@ -35,7 +35,7 @@ export class SeList extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
this.$label = this._shadowRoot.querySelector('label');
@@ -45,7 +45,7 @@ export class SeList extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['label', 'width', 'height'];
return [ 'label', 'width', 'height' ];
}
/**
@@ -128,7 +128,7 @@ export class SeList extends HTMLElement {
e.preventDefault();
if (e?.detail?.selectedIndex !== undefined) {
const value = this.$dropdown.selectedItem.getAttribute('value');
const closeEvent = new CustomEvent('change', {detail: {value}});
const closeEvent = new CustomEvent('change', { detail: { value } });
currentObj.dispatchEvent(closeEvent);
currentObj.value = value;
}

4
src/editor/components/seListItem.js
View File

@@ -25,7 +25,7 @@ export class SeListItem extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$menuitem = this._shadowRoot.querySelector('elix-option');
this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
@@ -36,7 +36,7 @@ export class SeListItem extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['option'];
return [ 'option' ];
}
/**

4
src/editor/components/seMenu.js
View File

@@ -39,7 +39,7 @@ export class SeMenu extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$menu = this._shadowRoot.querySelector('elix-menu-button');
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
@@ -49,7 +49,7 @@ export class SeMenu extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['label', 'src'];
return [ 'label', 'src' ];
}
/**

4
src/editor/components/seMenuItem.js
View File

@@ -22,7 +22,7 @@ export class SeMenuItem extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$img = this._shadowRoot.querySelector('img');
this.$label = this._shadowRoot.querySelector('span');
@@ -35,7 +35,7 @@ export class SeMenuItem extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['label', 'src'];
return [ 'label', 'src' ];
}
/**
* @function attributeChangedCallback

8
src/editor/components/sePalette.js
View File

@@ -92,21 +92,21 @@ export class SEPalette extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$strip = this._shadowRoot.querySelector('#js-se-palette');
palette.forEach((rgb) => {
const newDiv = document.createElement('div');
newDiv.classList.add('square');
if(rgb === 'none') {
const img = document.createElement('img');
const img = document.createElement('img');
img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`;
img.style.width = "15px";
img.style.height = "15px";
newDiv.append(img);
} else {
newDiv.style.backgroundColor = rgb;
}
}
newDiv.dataset.rgb = rgb;
newDiv.addEventListener('click', (evt) => {
evt.preventDefault();
@@ -117,7 +117,7 @@ export class SEPalette extends HTMLElement {
if (color === 'none' || color === 'transparent' || color === 'initial') {
color = 'none';
}
const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
const paletteEvent = new CustomEvent('change', { detail: { picker, color }, bubbles: false });
this.dispatchEvent(paletteEvent);
});
this.$strip.append(newDiv);

4
src/editor/components/sePlainBorderButton.js
View File

@@ -1,5 +1,5 @@
import {template} from 'elix/src/base/internal.js';
import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
import { template } from 'elix/src/base/internal.js';
import { fragmentFrom } from 'elix/src/core/htmlLiterals.js';
import PlainButton from 'elix/src/plain/PlainButton.js';
/**

2
src/editor/components/sePlainMenuButton.js
View File

@@ -1,5 +1,5 @@
import PlainMenuButton from 'elix/src/plain/PlainMenuButton.js';
import {defaultState} from 'elix/src/base/internal.js';
import { defaultState } from 'elix/src/base/internal.js';
import sePlainBorderButton from './sePlainBorderButton.js';
/**

4
src/editor/components/seSpinInput.js
View File

@@ -49,7 +49,7 @@ export class SESpinInput extends HTMLElement {
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
// locate the component
this.$img = this._shadowRoot.querySelector('img');
@@ -62,7 +62,7 @@ export class SESpinInput extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['value', 'label', 'src', 'size', 'min', 'max', 'step'];
return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ];
}
/**
* @function attributeChangedCallback

12
src/editor/components/seZoom.js
View File

@@ -1,6 +1,6 @@
import ListComboBox from 'elix/define/ListComboBox.js';
import * as internal from 'elix/src/base/internal.js';
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js';
import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js';
/**
@@ -66,7 +66,7 @@ class Zoom extends ListComboBox {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'src', 'inputsize', 'value'];
return [ 'title', 'src', 'inputsize', 'value' ];
}
/**
* @function attributeChangedCallback
@@ -115,7 +115,7 @@ class Zoom extends ListComboBox {
e.preventDefault();
const value = e.detail?.closeResult?.getAttribute('value');
if (value) {
const closeEvent = new CustomEvent('change', {detail: {value}});
const closeEvent = new CustomEvent('change', { detail: { value } });
this.dispatchEvent(closeEvent);
}
});
@@ -133,7 +133,7 @@ class Zoom extends ListComboBox {
* @returns {void}
*/
set src (src) {
this[internal.setState]({src});
this[internal.setState]({ src });
}
/**
* @function inputsize
@@ -147,7 +147,7 @@ class Zoom extends ListComboBox {
* @returns {void}
*/
set inputsize (inputsize) {
this[internal.setState]({inputsize});
this[internal.setState]({ inputsize });
}
/**
* @function value
@@ -161,7 +161,7 @@ class Zoom extends ListComboBox {
* @returns {void}
*/
set value (value) {
this[internal.setState]({value});
this[internal.setState]({ value });
}
}