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

#46 jquery remove and convert to pure javascript

master
Agriya Dev5 2021-02-03 20:48:22 +05:30
parent 4740cce479
commit eaa65b1329
4 changed files with 248 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -253,16 +253,16 @@ export default class ColorValuePicker {
*/ */
function colorChanged (ui, context) { function colorChanged (ui, context) {
const all = ui.val('all'); const all = ui.val('all');
if (context !== red.get(0)) red.val(!isNullish(all) ? all.r : ''); if (context !== red) red.value = (!isNullish(all) ? all.r : '');
if (context !== green.get(0)) green.val(!isNullish(all) ? all.g : ''); if (context !== green) green.value = (!isNullish(all) ? all.g : '');
if (context !== blue.get(0)) blue.val(!isNullish(all) ? all.b : ''); if (context !== blue) blue.value = (!isNullish(all) ? all.b : '');
if (alpha && context !== alpha.get(0)) alpha.val(!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : ''); if (alpha && context !== alpha) alpha.value = (!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
if (context !== hue.get(0)) hue.val(!isNullish(all) ? all.h : ''); if (context !== hue) hue.value = (!isNullish(all) ? all.h : '');
if (context !== saturation.get(0)) saturation.val(!isNullish(all) ? all.s : ''); if (context !== saturation) saturation.value = (!isNullish(all) ? all.s : '');
if (context !== value.get(0)) value.val(!isNullish(all) ? all.v : ''); if (context !== value) value.value = (!isNullish(all) ? all.v : '');
if (context !== hex.get(0) && ((bindedHex && context !== bindedHex.get(0)) || !bindedHex)) hex.val(!isNullish(all) ? all.hex : ''); if (context !== hex && ((bindedHex && context !== bindedHex) || !bindedHex)) hex.value = (!isNullish(all) ? all.hex : '');
if (bindedHex && context !== bindedHex.get(0) && context !== hex.get(0)) bindedHex.val(!isNullish(all) ? all.hex : ''); if (bindedHex && context !== bindedHex && context !== hex) bindedHex.value = (!isNullish(all) ? all.hex : '');
if (ahex && context !== ahex.get(0)) ahex.val(!isNullish(all) ? all.ahex.substring(6) : ''); if (ahex && context !== ahex) ahex.value = (!isNullish(all) ? all.ahex.substring(6) : '');
} }
/** /**
* Unbind all events and null objects. * Unbind all events and null objects.

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

@ -10,6 +10,18 @@
const isNullish = (val) => { const isNullish = (val) => {
return val === null || val === undefined; return val === null || val === undefined;
}; };
function findPos (obj) {
let curleft = 0;
let curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return {left: curleft, top: curtop};
}
return {left: curleft, top: curtop};
}
/** /**
* Encapsulate slider functionality for the ColorMap and ColorBar - * Encapsulate slider functionality for the ColorMap and ColorBar -
* could be useful to use a jQuery UI draggable for this with certain extensions. * could be useful to use a jQuery UI draggable for this with certain extensions.
@ -39,7 +51,7 @@ export default class Slider {
* @returns {void} * @returns {void}
*/ */
function mouseDown (e) { function mouseDown (e) {
const off = bar.offset(); const off = findPos(bar);
offset = {l: off.left | 0, t: off.top | 0}; offset = {l: off.left | 0, t: off.top | 0};
clearTimeout(timeout); clearTimeout(timeout);
// using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
@ -130,9 +142,9 @@ export default class Slider {
if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1); if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
else arrowOffsetY -= arrowH >> 1; else arrowOffsetY -= arrowH >> 1;
// set the arrow position based on these offsets // set the arrow position based on these offsets
arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'}); // arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
// arrow.style.left = arrowOffsetX + 'px'; arrow.style.left = arrowOffsetX + 'px';
// arrow.style.top = arrowOffsetY + 'px'; arrow.style.top = arrowOffsetY + 'px';
}); });
} }

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

@ -1,3 +1,6 @@
/* eslint-disable unicorn/prefer-node-remove */
/* eslint-disable prefer-destructuring */
/* eslint-disable no-unsanitized/property */
/** /**
* @file jGraduate 0.4 * @file jGraduate 0.4
* *
@ -50,6 +53,19 @@ if (!window.console) {
}; };
} }
function findPos (obj) {
let curleft = 0;
let curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return {left: curleft, top: curtop};
}
return {left: curleft, top: curtop};
}
/** /**
* Adds {@link external:jQuery.jGraduate.Paint}, * Adds {@link external:jQuery.jGraduate.Paint},
* {@link external:jQuery.fn.jGraduateDefaults}, * {@link external:jQuery.fn.jGraduateDefaults},
@ -244,11 +260,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
break; break;
} }
typeof $this.okCallback === 'function' && $this.okCallback($this.paint); typeof $this.okCallback === 'function' && $this.okCallback($this.paint);
$this.hide(); $this.style.display = 'none';
}; };
const cancelClicked = function () { const cancelClicked = function () {
typeof $this.cancelCallback === 'function' && $this.cancelCallback(); typeof $this.cancelCallback === 'function' && $this.cancelCallback();
$this.hide(); $this.style.display = 'none';
}; };
$.extend( $.extend(
@ -265,13 +281,12 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
let // pos = $this.position(), let // pos = $this.position(),
color = null; color = null;
const $win = $(window); const $win = window;
if ($this.paint.type === 'none') { if ($this.paint.type === 'none') {
$this.paint = new jGraduate.Paint({solidColor: 'ffffff'}); $this.paint = new jGraduate.Paint({solidColor: 'ffffff'});
} }
$this.classList.add('jGraduate_Picker'); $this.classList.add('jGraduate_Picker');
// $this.addClass('jGraduate_Picker');
/* eslint-disable max-len */ /* eslint-disable max-len */
$this.innerHTML = '<ul class="jGraduate_tabs">' + $this.innerHTML = '<ul class="jGraduate_tabs">' +
'<li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">Solid Color</li>' + '<li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">Solid Color</li>' +
@ -283,8 +298,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
'<div class="jGraduate_LightBox" id="jGraduate_LightBox"></div>' + '<div class="jGraduate_LightBox" id="jGraduate_LightBox"></div>' +
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'; '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>';
/* JFH !!!! */ /* JFH !!!! */
const colPicker = $this.querySelector('#jGraduate_colPick'); //($wc(idref + '> .jGraduate_colPick'))[0]; const colPicker = $this.querySelector('#jGraduate_colPick');
const gradPicker = $this.querySelector('#jGraduate_gradPick'); // ($wc(idref + '> .jGraduate_gradPick'))[0]; const gradPicker = $this.querySelector('#jGraduate_gradPick');
const html = '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' + const html = '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' + '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
'<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' + '<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
@ -378,10 +393,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const div = document.createElement('div'); const div = document.createElement('div');
div.innerHTML = html; div.innerHTML = html;
while (div.children.length > 0) { while (div.children.length > 0) {
console.log(gradPicker);
gradPicker.appendChild(div.children[0]); gradPicker.appendChild(div.children[0]);
} }
console.log(gradPicker);
/* eslint-enable max-len */ /* eslint-enable max-len */
// -------------- // --------------
// Set up all the SVG elements (the gradient, stops and rectangle) // Set up all the SVG elements (the gradient, stops and rectangle)
@ -395,9 +408,12 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const attrInput = {}; const attrInput = {};
const SLIDERW = 145; const SLIDERW = 145;
$wc('.jGraduate_SliderBar').width(SLIDERW); const JQSliderBars = $this.querySelectorAll('.jGraduate_SliderBar');
for (const JQSliderBar of JQSliderBars) {
JQSliderBar.style.width = SLIDERW + 'px';
}
// JFH !!!!!! // JFH !!!!!!
const container = $wc('#' + id + '_jGraduate_GradContainer')[0]; const container = $this.querySelector('#' + id + '_jGraduate_GradContainer');
const svg = mkElem('svg', { const svg = mkElem('svg', {
id: id + '_jgraduate_svg', id: id + '_jgraduate_svg',
@ -447,7 +463,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
let stopGroup; // eslint-disable-line prefer-const let stopGroup; // eslint-disable-line prefer-const
if (isSolid) { if (isSolid) {
// JFH !!!!!!!! // JFH !!!!!!!!
grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0]; grad = curGradient = $this.querySelector('#' + id + '_lg_jgraduate_grad');
color = $this.paint[curType]; color = $this.paint[curType];
mkStop(0, '#' + color, 1); mkStop(0, '#' + color, 1);
@ -505,37 +521,70 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
}, svg); }, svg);
// stop visuals created here // stop visuals created here
const beginCoord = $('<div/>').attr({ const beginCoord = document.createElement('div');
class: 'grad_coord jGraduate_lg_field', beginCoord.setAttribute('class', 'grad_coord jGraduate_lg_field');
title: 'Begin Stop' beginCoord.setAttribute('title', 'Begin Stop');
}).text(1).css({ beginCoord.textContent = 1;
top: y1 * MAX, beginCoord.style.top = y1 * MAX;
left: x1 * MAX beginCoord.style.left = x1 * MAX;
}).data('coord', 'start').appendTo(container); beginCoord.dataset.coord = 'start';
container.appendChild(beginCoord);
const endCoord = beginCoord.clone().text(2).css({ const endCoord = document.createElement('div');
top: y2 * MAX, endCoord.setAttribute('class', 'grad_coord jGraduate_lg_field');
left: x2 * MAX endCoord.setAttribute('title', 'End stop');
}).attr('title', 'End stop').data('coord', 'end').appendTo(container); endCoord.textContent = 2;
endCoord.style.top = y2 * MAX;
endCoord.style.left = x2 * MAX;
endCoord.dataset.coord = 'end';
container.appendChild(endCoord);
const centerCoord = $('<div/>').attr({ const centerCoord = document.createElement('div');
class: 'grad_coord jGraduate_rg_field', centerCoord.setAttribute('class', 'grad_coord jGraduate_rg_field');
title: 'Center stop' centerCoord.setAttribute('title', 'Center stop');
}).text('C').css({ centerCoord.textContent = 'C';
top: cy * MAX, centerCoord.style.top = cy * MAX;
left: cx * MAX centerCoord.style.left = cx * MAX;
}).data('coord', 'center').appendTo(container); centerCoord.dataset.coord = 'center';
container.appendChild(centerCoord);
const focusCoord = centerCoord.clone().text('F').css({ const focusCoord = document.createElement('div');
top: fy * MAX, focusCoord.setAttribute('class', 'grad_coord jGraduate_rg_field');
left: fx * MAX, focusCoord.setAttribute('title', 'Focus point');
display: 'none' focusCoord.textContent = 'F';
}).attr('title', 'Focus point').data('coord', 'focus').appendTo(container); focusCoord.style.top = fy * MAX;
focusCoord.style.left = fx * MAX;
focusCoord[0].id = id + '_jGraduate_focusCoord'; focusCoord.style.display = 'none';
focusCoord.dataset.coord = 'focus';
focusCoord.setAttribute('id', id + '_jGraduate_focusCoord');
container.appendChild(focusCoord);
let showFocus; let showFocus;
$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) { const onAttrChangeHandler = (e, attr, isRadial) => {
// TODO: Support values < 0 and > 1 (zoomable preview?)
if (isNaN(Number.parseFloat(e.target.value)) || e.target.value < 0) {
e.target.value = 0.0;
} else if (e.target.value > 1) {
e.target.value = 1.0;
}
if (!(attr[0] === 'f' &&
!showFocus) &&
((isRadial && curType === 'radialGradient') || (!isRadial && curType === 'linearGradient'))) {
curGradient.setAttribute(attr, e.target.value);
}
const $elem = isRadial
? attr[0] === 'c' ? centerCoord : focusCoord
: attr[1] === '1' ? beginCoord : endCoord;
if (attr.includes('x') === 'left') {
$elem.style.left = e.target.value * MAX;
} else if (attr.includes('x') === 'top') {
$elem.style.top = e.target.value * MAX;
}
};
for (const [i, attr] of ['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'].entries()) {
const isRadial = isNaN(attr[1]); const isRadial = isNaN(attr[1]);
let attrval = curGradient.getAttribute(attr); let attrval = curGradient.getAttribute(attr);
@ -550,31 +599,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
} }
} }
attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr) attrInput[attr] = $this.querySelector('#' + id + '_jGraduate_' + attr);
.val(attrval) attrInput[attr].value = attrval;
.change(function () { attrInput[attr].addEventListener('change', (evt) => onAttrChangeHandler(evt, attr, isRadial));
// TODO: Support values < 0 and > 1 (zoomable preview?) attrInput[attr].dispatchEvent(new Event('change'));
if (isNaN(Number.parseFloat(this.value)) || this.value < 0) { }
this.value = 0.0;
} else if (this.value > 1) {
this.value = 1.0;
}
if (!(attr[0] === 'f' &&
!showFocus) &&
((isRadial && curType === 'radialGradient') || (!isRadial && curType === 'linearGradient'))) {
curGradient.setAttribute(attr, this.value);
}
const $elem = isRadial
? attr[0] === 'c' ? centerCoord : focusCoord
: attr[1] === '1' ? beginCoord : endCoord;
const cssName = attr.includes('x') ? 'left' : 'top';
$elem.css(cssName, this.value * MAX);
}).change();
});
/** /**
* *
@ -596,7 +625,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
opac = stopElem.getAttribute('stop-opacity'); opac = stopElem.getAttribute('stop-opacity');
n = stopElem.getAttribute('offset'); n = stopElem.getAttribute('offset');
} else { } else {
console.log(curGradient);
curGradient.appendChild(stop); curGradient.appendChild(stop);
} }
if (opac === null) opac = 1; if (opac === null) opac = 1;
@ -623,7 +651,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
$(path).mousedown(function (e) { $(path).mousedown(function (e) {
selectStop(this); selectStop(this);
drag = curStop; drag = curStop;
$win.mousemove(dragColor).mouseup(remDrags); $win.addEventListener('mousemove', dragColor);
$win.addEventListener('mouseup', remDrags);
stopOffset = stopMakerDiv.offset(); stopOffset = stopMakerDiv.offset();
e.preventDefault(); e.preventDefault();
return false; return false;
@ -715,7 +744,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
* @returns {void} * @returns {void}
*/ */
function remDrags () { function remDrags () {
$win.unbind('mousemove', dragColor); $win.removeEventListener('mousemove', dragColor);
if (delStop.getAttribute('display') !== 'none') { if (delStop.getAttribute('display') !== 'none') {
remStop(); remStop();
} }
@ -848,31 +877,32 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
x = x < 0 ? 0 : x > MAX ? MAX : x; x = x < 0 ? 0 : x > MAX ? MAX : x;
y = y < 0 ? 0 : y > MAX ? MAX : y; y = y < 0 ? 0 : y > MAX ? MAX : y;
draggingCoord.css('left', x).css('top', y); draggingCoord.style.left = x + 'px';
draggingCoord.style.top = y + 'px';
// calculate stop offset // calculate stop offset
const fracx = x / SIZEX; const fracx = x / SIZEX;
const fracy = y / SIZEY; const fracy = y / SIZEY;
const type = draggingCoord.data('coord'); const type = draggingCoord.dataset.coord;
const grd = curGradient; const grd = curGradient;
switch (type) { switch (type) {
case 'start': case 'start':
attrInput.x1.val(fracx); attrInput.x1.value = fracx;
attrInput.y1.val(fracy); attrInput.y1.value = fracy;
grd.setAttribute('x1', fracx); grd.setAttribute('x1', fracx);
grd.setAttribute('y1', fracy); grd.setAttribute('y1', fracy);
break; break;
case 'end': case 'end':
attrInput.x2.val(fracx); attrInput.x2.value = fracx;
attrInput.y2.val(fracy); attrInput.y2.value = fracy;
grd.setAttribute('x2', fracx); grd.setAttribute('x2', fracx);
grd.setAttribute('y2', fracy); grd.setAttribute('y2', fracy);
break; break;
case 'center': case 'center':
attrInput.cx.val(fracx); attrInput.cx.value = fracx;
attrInput.cy.val(fracy); attrInput.cy.value = fracy;
grd.setAttribute('cx', fracx); grd.setAttribute('cx', fracx);
grd.setAttribute('cy', fracy); grd.setAttribute('cy', fracy);
cX = fracx; cX = fracx;
@ -880,8 +910,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
xform(); xform();
break; break;
case 'focus': case 'focus':
attrInput.fx.val(fracx); attrInput.fx.value = fracx;
attrInput.fy.val(fracy); attrInput.fy.value = fracy;
grd.setAttribute('fx', fracx); grd.setAttribute('fx', fracx);
grd.setAttribute('fy', fracy); grd.setAttribute('fy', fracy);
xform(); xform();
@ -892,7 +922,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const onCoordUp = function () { const onCoordUp = function () {
draggingCoord = null; draggingCoord = null;
$win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp); $win.removeEventListener('mousemove', onCoordDrag);
$win.removeEventListener('mouseup', onCoordUp);
}; };
// Linear gradient // Linear gradient
@ -923,44 +954,50 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
previewRect.setAttribute('fill-opacity', gradalpha / 100); previewRect.setAttribute('fill-opacity', gradalpha / 100);
$wc('#' + id + ' div.grad_coord').mousedown(function (evt) { const JQGradCoords = $this.querySelectorAll('#' + id + ' div.grad_coord');
evt.preventDefault(); const onMouseDownGradCoords = (e) => {
draggingCoord = $(this); e.preventDefault();
draggingCoord = e.target;
// const sPos = draggingCoord.offset(); // const sPos = draggingCoord.offset();
offset = draggingCoord.parent().offset(); offset = findPos(draggingCoord.parentNode);
$win.mousemove(onCoordDrag).mouseup(onCoordUp); $win.addEventListener('mousemove', onCoordDrag);
}); $win.addEventListener('mouseup', onCoordUp);
};
for (const JQGradCoord of JQGradCoords) {
JQGradCoord.addEventListener('mousedown', onMouseDownGradCoords);
}
// bind GUI elements // bind GUI elements
$wc('#' + id + '_jGraduate_Ok').bind('click', function () { $this.querySelector('#' + id + '_jGraduate_Ok').addEventListener('click', function () {
$this.paint.type = curType; $this.paint.type = curType;
$this.paint[curType] = curGradient.cloneNode(true); $this.paint[curType] = curGradient.cloneNode(true);
$this.paint.solidColor = null; $this.paint.solidColor = null;
okClicked(); okClicked();
}); });
$wc('#' + id + '_jGraduate_Cancel').bind('click', function (paint) { $this.querySelector('#' + id + '_jGraduate_Cancel').addEventListener('click', cancelClicked);
cancelClicked();
});
if (curType === 'radialGradient') { if (curType === 'radialGradient') {
if (showFocus) { if (showFocus) {
focusCoord.show(); focusCoord.style.display = 'block';
} else { } else {
focusCoord.hide(); focusCoord.style.display = 'none';
attrInput.fx.val(''); attrInput.fx.value = '';
attrInput.fy.val(''); attrInput.fy.value = '';
} }
} }
$wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus; $this.querySelector('#' + id + '_jGraduate_match_ctr').checked = !showFocus;
let lastfx, lastfy; let lastfx, lastfy;
const onMatchCtrHandler = (e) => {
$wc('#' + id + '_jGraduate_match_ctr').change(function () { showFocus = !e.target.checked;
showFocus = !this.checked; if (showFocus) {
focusCoord.toggle(showFocus); focusCoord.style.display = 'block';
attrInput.fx.val(''); } else {
attrInput.fy.val(''); focusCoord.style.display = 'none';
}
attrInput.fx.value = '';
attrInput.fy.value = '';
const grd = curGradient; const grd = curGradient;
if (!showFocus) { if (!showFocus) {
lastfx = grd.getAttribute('fx'); lastfx = grd.getAttribute('fx');
@ -972,10 +1009,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const fY = lastfy || 0.5; const fY = lastfy || 0.5;
grd.setAttribute('fx', fX); grd.setAttribute('fx', fX);
grd.setAttribute('fy', fY); grd.setAttribute('fy', fY);
attrInput.fx.val(fX); attrInput.fx.value = fX;
attrInput.fy.val(fY); attrInput.fy.value = fY;
} }
}); };
$this.querySelector('#' + id + '_jGraduate_match_ctr').addEventListener('change', onMatchCtrHandler);
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop'); stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
numstops = stops.length; numstops = stops.length;
@ -1109,7 +1147,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
parent, parent,
offset: parent.offset() offset: parent.offset()
}; };
$win.mousemove(dragSlider).mouseup(stopSlider); $win.addEventListener('mousemove', dragSlider);
$win.addEventListener('mouseup', stopSlider);
evt.preventDefault(); evt.preventDefault();
}); });
@ -1158,7 +1197,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
} else if (xpos < 0) { } else if (xpos < 0) {
xpos = 0; xpos = 0;
} }
handle.css({'margin-left': xpos - 5}); handle.style.marginLeft = (xpos - 5) + 'px';
}).change(); }).change();
}); });
@ -1168,7 +1207,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
}; };
const stopSlider = function (evt) { const stopSlider = function (evt) {
$win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider); $win.removeEventListener('mousemove', dragSlider);
$win.removeEventListener('mouseup', stopSlider);
slider = null; slider = null;
}; };
@ -1181,9 +1221,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
if (!isSolid) { if (!isSolid) {
color = stops[0].getAttribute('stop-color'); color = stops[0].getAttribute('stop-color');
} }
// This should be done somewhere else, probably // This should be done somewhere else, probably
$.extend(jPickerDefaults.window, { Object.assign(jPickerDefaults.window, {
alphaSupport: true, effects: {type: 'show', speed: 0} alphaSupport: true, effects: {type: 'show', speed: 0}
}); });
@ -1204,70 +1243,90 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
null, null,
function () { cancelClicked(); } function () { cancelClicked(); }
); );
// JFH !!!! // JFH !!!!
// const tabs = $wc(idref + ' .jGraduate_tabs li'); const tabs = $this.querySelectorAll('.jGraduate_tabs li');
const tabs = $wc('.jGraduate_tabs li'); const onTabsClickHandler = (e) => {
tabs.click(function () { for (const tab of tabs) {
tabs.removeClass('jGraduate_tab_current'); tab.classList.remove('jGraduate_tab_current');
$(this).addClass('jGraduate_tab_current'); }
$wc(idref + ' > div').hide(); e.target.classList.add('jGraduate_tab_current');
const type = $(this).attr('data-type'); const innerDivs = $this.querySelectorAll(idref + ' > div');
$wc(idref + ' .jGraduate_gradPick').show(); [].forEach.call(innerDivs, function (innerDiv) {
innerDiv.style.display = 'none';
});
const type = e.target.dataset.type;
gradPicker.style.display = 'block';
if (type === 'rg' || type === 'lg') { if (type === 'rg' || type === 'lg') {
// Show/hide appropriate fields const tFileds = $this.querySelectorAll('.jGraduate_' + type + '_field');
$wc('.jGraduate_' + type + '_field').show(); [].forEach.call(tFileds, function (tFiled) {
$wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide(); tFiled.style.display = 'block';
});
$wc('#' + id + '_jgraduate_rect')[0] const t1Fileds = $this.querySelectorAll('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field');
[].forEach.call(t1Fileds, function (tFiled) {
tFiled.style.display = 'none';
});
$this.querySelectorAll('#' + id + '_jgraduate_rect')[0]
.setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)'); .setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
// Copy stops
curType = type === 'lg' ? 'linearGradient' : 'radialGradient'; curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
const jOpacInput = $this.querySelector('#' + id + '_jGraduate_OpacInput');
$wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change(); jOpacInput.value = $this.paint.alpha;
jOpacInput.dispatchEvent(new Event('change'));
const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0]; const newGrad = $this.querySelectorAll('#' + id + '_' + type + '_jgraduate_grad')[0];
if (curGradient !== newGrad) { if (curGradient !== newGrad) {
const curStops = $(curGradient).find('stop'); const curStops = curGradient.querySelectorAll('stop');
$(newGrad).empty().append(curStops); while (newGrad.firstChild) {
newGrad.removeChild(newGrad.firstChild);
}
[].forEach.call(curStops, function (curS) {
newGrad.appendChild(curS);
});
curGradient = newGrad; curGradient = newGrad;
const sm = spreadMethodOpt.getAttribute('value'); const sm = spreadMethodOpt.getAttribute('value');
curGradient.setAttribute('spreadMethod', sm); curGradient.setAttribute('spreadMethod', sm);
} }
showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy); showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
$wc('#' + id + '_jGraduate_focusCoord').toggle(showFocus); const jQfocusCoord = $this.querySelectorAll('#' + id + '_jGraduate_focusCoord');
if (jQfocusCoord[0].style.display === 'none') {
jQfocusCoord[0].style.display = 'block';
} else {
jQfocusCoord[0].style.display = 'none';
}
if (showFocus) { if (showFocus) {
$wc('#' + id + '_jGraduate_match_ctr')[0].checked = false; $this.querySelectorAll('#' + id + '_jGraduate_match_ctr')[0].checked = false;
} }
} else { } else {
$wc(idref + ' .jGraduate_gradPick').hide(); gradPicker.style.display = 'none';
$wc(idref + ' .jGraduate_colPick').show(); colPicker.style.display = 'block';
} }
};
for (const tab of tabs) {
tab.addEventListener('click', onTabsClickHandler);
}
const innerDivs = $this.querySelectorAll(idref + ' > div');
[].forEach.call(innerDivs, function (innerDiv) {
innerDiv.style.display = 'none';
}); });
$wc(idref + ' > div').hide(); for (const tab of tabs) {
tabs.removeClass('jGraduate_tab_current'); tab.classList.remove('jGraduate_tab_current');
}
let tab; let tab;
switch ($this.paint.type) { switch ($this.paint.type) {
case 'linearGradient': case 'linearGradient':
tab = $wc(idref + ' .jGraduate_tab_lingrad'); tab = $this.querySelector(idref + ' .jGraduate_tab_lingrad');
break; break;
case 'radialGradient': case 'radialGradient':
tab = $wc(idref + ' .jGraduate_tab_radgrad'); tab = $this.querySelector(idref + ' .jGraduate_tab_radgrad');
break; break;
default: default:
tab = $wc(idref + ' .jGraduate_tab_color'); tab = $this.querySelector(idref + ' .jGraduate_tab_color');
break; break;
} }
$this.style.display = 'block'; $this.style.display = 'block';
// jPicker will try to show after a 0ms timeout, so need to fire this after that // jPicker will try to show after a 0ms timeout, so need to fire this after that
setTimeout(() => { setTimeout(() => {
tab.addClass('jGraduate_tab_current').click(); tab.classList.add('jGraduate_tab_current');
tab.dispatchEvent(new Event('click'));
}, 10); }, 10);
// });
} }
// return $;
// }

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

@ -945,7 +945,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
function updatePreview (ui) { function updatePreview (ui) {
try { try {
const all = ui.val('all'); const all = ui.val('all');
activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'}); activePreview.style.backgroundColor = (all && '#' + all.hex) || 'transparent';
setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0); setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);
} catch (e) {} } catch (e) {}
} }
@ -1039,7 +1039,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void} * @returns {void}
*/ */
function setBG (el, c) { function setBG (el, c) {
el.css({backgroundColor: (c && c.length === 6 && '#' + c) || 'transparent'}); el.style.backgroundColor = (c && c.length === 6 && '#' + c) || 'transparent';
} }
/** /**
@ -1052,10 +1052,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
img.setAttribute('pngSrc', src); img.setAttribute('pngSrc', src);
img.style.backgroundImage = 'none'; img.style.backgroundImage = 'none';
img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'; img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')';
// img.attr('pngSrc', src);
// img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
} else img.style.backgroundImage = 'url(\'' + src + '\')'; } else img.style.backgroundImage = 'url(\'' + src + '\')';
// img.css({backgroundImage: 'url(\'' + src + '\')'});
} }
/** /**
* @param {external:jQuery} img * @param {external:jQuery} img
@ -1063,7 +1060,6 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void} * @returns {void}
*/ */
function setImgLoc (img, y) { function setImgLoc (img, y) {
// img.css({top: y + 'px'});
img.style.top = y + 'px'; img.style.top = y + 'px';
} }
/** /**
@ -1079,10 +1075,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
if (!isNullish(src) && ( if (!isNullish(src) && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png') src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) { )) {
obj.css({ obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')';
'\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'
});
} else obj.style.opacity = toFixedNumeric(alpha / 100, 4); } else obj.style.opacity = toFixedNumeric(alpha / 100, 4);
} else obj.style.opacity = toFixedNumeric(alpha / 100, 4); } else obj.style.opacity = toFixedNumeric(alpha / 100, 4);
} else if (alpha === 0 || alpha === 100) { } else if (alpha === 0 || alpha === 100) {
@ -1091,10 +1085,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
if (!isNullish(src) && ( if (!isNullish(src) && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png') src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) { )) {
obj.css({ obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')';
'\', sizingMethod=\'scale\')'
});
} else obj.style.opacity = ''; } else obj.style.opacity = '';
} else obj.style.opacity = ''; } else obj.style.opacity = '';
} }
@ -1160,7 +1152,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
*/ */
function currentColorChanged (ui) { function currentColorChanged (ui) {
const hex = ui.val('hex'); const hex = ui.val('hex');
currentPreview.css({backgroundColor: (hex && '#' + hex) || 'transparent'}); currentPreview.style.backgroundColor = (hex && '#' + hex) || 'transparent';
setAlpha.call(that, currentPreview, toFixedNumeric(((ui.val('a') || 0) * 100) / 255, 4)); setAlpha.call(that, currentPreview, toFixedNumeric(((ui.val('a') || 0) * 100) / 255, 4));
} }
/** /**
@ -1170,9 +1162,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
function expandableColorChanged (ui) { function expandableColorChanged (ui) {
const hex = ui.val('hex'); const hex = ui.val('hex');
const va = ui.val('va'); const va = ui.val('va');
iconColor.css({backgroundColor: (hex && '#' + hex) || 'transparent'}); iconColor.style.backgroundColor = (hex && '#' + hex) || 'transparent';
setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - ((va && va.a) || 0)) * 100) / 255, 4)); setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - ((va && va.a) || 0)) * 100) / 255, 4));
if (settings.window.bindToInput && settings.window.updateInputColor) { if (settings.window.bindToInput && settings.window.updateInputColor) {
// settings.window.input.style.backgroundColor = (hex && '#' + hex) || 'transparent';
// settings.window.input.style.color = isNullish(va) || va.v > 75 ? '#000000' : '#ffffff';
settings.window.input.css({ settings.window.input.css({
backgroundColor: (hex && '#' + hex) || 'transparent', backgroundColor: (hex && '#' + hex) || 'transparent',
color: isNullish(va) || va.v > 75 ? '#000000' : '#ffffff' color: isNullish(va) || va.v > 75 ? '#000000' : '#ffffff'
@ -1199,11 +1193,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {false} * @returns {false}
*/ */
function documentMouseMove (e) { function documentMouseMove (e) {
container.css({ container.style.left = elementStartX - (pageStartX - e.pageX) + 'px';
left: elementStartX - (pageStartX - e.pageX) + 'px', container.style.top = elementStartY - (pageStartY - e.pageY) + 'px';
top: elementStartY - (pageStartY - e.pageY) + 'px'
});
if (settings.window.expandable && !$.support.boxModel) { if (settings.window.expandable && !$.support.boxModel) {
// const prev = container.previousElementSibling;
container.prev().css({ container.prev().css({
left: container.css('left'), left: container.css('left'),
top: container.css('top') top: container.css('top')
@ -1258,7 +1251,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
} }
if (settings.window.expandable) { if (settings.window.expandable) {
$(document.body).children('div.jPicker.Container').css({zIndex: 10}); $(document.body).children('div.jPicker.Container').css({zIndex: 10});
container.css({zIndex: 20}); container.style.zIndex = 20;
} }
switch (settings.window.effects.type) { switch (settings.window.effects.type) {
case 'fade': case 'fade':
@ -1283,7 +1276,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void} * @returns {void}
*/ */
function removeIFrame () { function removeIFrame () {
if (settings.window.expandable) container.css({zIndex: 10}); if (settings.window.expandable) container.style.zIndex = 10;
if (!settings.window.expandable || $.support.boxModel) return; if (!settings.window.expandable || $.support.boxModel) return;
container.prev().remove(); container.prev().remove();
} }
@ -1305,10 +1298,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void} * @returns {void}
*/ */
function initialize () { function initialize () {
console.log('$(that).next() --> ', that.nextElementSibling); const nexts = that.nextElementSibling;
console.log('$(that).next() --> ', that.nextElementSibling.querySelector('#Container'));
const win = settings.window, const win = settings.window,
popup = win.expandable ? that.nextElementSibling.querySelector('#Container') : null; popup = win.expandable ? nexts.querySelector('#Container') : null;
container = win.expandable ? $('<div/>') : that; container = win.expandable ? $('<div/>') : that;
// container.addClass('jPicker Container'); // container.addClass('jPicker Container');
container.classList.add('jPicker'); container.classList.add('jPicker');
@ -1329,7 +1321,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
<tr> <tr>
<td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td> <td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
<td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td> <td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
<td colspan="2" class="Preview" id="Preview">${localization.text.newColor}<div><span class="Active" id="Active" title="${localization.tooltips.colors.newColor}">&nbsp;</span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}">&nbsp;</span></div>${localization.text.currentColor}</td> <td colspan="2" class="Preview" id="Preview">${localization.text.newColor}<div id="preview-div"><span class="Active" id="Active" title="${localization.tooltips.colors.newColor}">&nbsp;</span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}">&nbsp;</span></div>${localization.text.currentColor}</td>
<td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${localization.text.ok}" title="${localization.tooltips.buttons.ok}"/><input type="button" class="Cancel" id="Cancel" value="${localization.text.cancel}" title="${localization.tooltips.buttons.cancel}"/><hr/><div class="Grid" id="Grid"></div></td> <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${localization.text.ok}" title="${localization.tooltips.buttons.ok}"/><input type="button" class="Cancel" id="Cancel" value="${localization.text.cancel}" title="${localization.tooltips.buttons.cancel}"/><hr/><div class="Grid" id="Grid"></div></td>
</tr> </tr>
<tr class="Hue"> <tr class="Hue">
@ -1374,7 +1366,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
container.mousedown( container.mousedown(
function () { function () {
$(document.body).children('div.jPicker.Container').css({zIndex: 10}); $(document.body).children('div.jPicker.Container').css({zIndex: 10});
container.css({zIndex: 20}); container.style.zIndex = 20;
} }
); );
container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
@ -1464,11 +1456,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
button = tbody.querySelector('#Button'); button = tbody.querySelector('#Button');
activePreview = preview.querySelector('#Active'); activePreview = preview.querySelector('#Active');
activePreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent'; activePreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent';
// .css({backgroundColor: (hex && '#' + hex) || 'transparent'});
currentPreview = preview.querySelector('#Current'); currentPreview = preview.querySelector('#Current');
currentPreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent'; currentPreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent';
currentPreview.addEventListener('click', currentClicked); currentPreview.addEventListener('click', currentClicked);
// .css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);
setAlpha.call(that, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4)); setAlpha.call(that, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4));
okButton = button.querySelector('#Ok'); okButton = button.querySelector('#Ok');
okButton.addEventListener('click', okClicked); okButton.addEventListener('click', okClicked);
@ -1485,7 +1475,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setImg.call(that, colorBarL4, images.clientPath + 'Bars.png'); setImg.call(that, colorBarL4, images.clientPath + 'Bars.png');
setImg.call(that, colorBarL5, images.clientPath + 'bar-opacity.png'); setImg.call(that, colorBarL5, images.clientPath + 'bar-opacity.png');
setImg.call(that, colorBarL6, images.clientPath + 'AlphaBar.png'); setImg.call(that, colorBarL6, images.clientPath + 'AlphaBar.png');
setImg.call(that, preview.find('div:first'), images.clientPath + 'preview-opacity.png'); setImg.call(that, preview.querySelector('#preview-div'), images.clientPath + 'preview-opacity.png');
}, 0); }, 0);
const radioInputs = tbody.querySelectorAll('td.Radio input'); const radioInputs = tbody.querySelectorAll('td.Radio input');
for (const radioInput of radioInputs) { for (const radioInput of radioInputs) {