#46 jquery remove and convert to pure javascript
Agriya Dev5
parent
4740cce479
commit
eaa65b1329
|
|
@ -253,16 +253,16 @@ export default class ColorValuePicker {
|
|||
*/
|
||||
function colorChanged (ui, context) {
|
||||
const all = ui.val('all');
|
||||
if (context !== red.get(0)) red.val(!isNullish(all) ? all.r : '');
|
||||
if (context !== green.get(0)) green.val(!isNullish(all) ? all.g : '');
|
||||
if (context !== blue.get(0)) blue.val(!isNullish(all) ? all.b : '');
|
||||
if (alpha && context !== alpha.get(0)) alpha.val(!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
|
||||
if (context !== hue.get(0)) hue.val(!isNullish(all) ? all.h : '');
|
||||
if (context !== saturation.get(0)) saturation.val(!isNullish(all) ? all.s : '');
|
||||
if (context !== value.get(0)) value.val(!isNullish(all) ? all.v : '');
|
||||
if (context !== hex.get(0) && ((bindedHex && context !== bindedHex.get(0)) || !bindedHex)) hex.val(!isNullish(all) ? all.hex : '');
|
||||
if (bindedHex && context !== bindedHex.get(0) && context !== hex.get(0)) bindedHex.val(!isNullish(all) ? all.hex : '');
|
||||
if (ahex && context !== ahex.get(0)) ahex.val(!isNullish(all) ? all.ahex.substring(6) : '');
|
||||
if (context !== red) red.value = (!isNullish(all) ? all.r : '');
|
||||
if (context !== green) green.value = (!isNullish(all) ? all.g : '');
|
||||
if (context !== blue) blue.value = (!isNullish(all) ? all.b : '');
|
||||
if (alpha && context !== alpha) alpha.value = (!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
|
||||
if (context !== hue) hue.value = (!isNullish(all) ? all.h : '');
|
||||
if (context !== saturation) saturation.value = (!isNullish(all) ? all.s : '');
|
||||
if (context !== value) value.value = (!isNullish(all) ? all.v : '');
|
||||
if (context !== hex && ((bindedHex && context !== bindedHex) || !bindedHex)) hex.value = (!isNullish(all) ? all.hex : '');
|
||||
if (bindedHex && context !== bindedHex && context !== hex) bindedHex.value = (!isNullish(all) ? all.hex : '');
|
||||
if (ahex && context !== ahex) ahex.value = (!isNullish(all) ? all.ahex.substring(6) : '');
|
||||
}
|
||||
/**
|
||||
* Unbind all events and null objects.
|
||||
|
|
|
|||
|
|
@ -10,6 +10,18 @@
|
|||
const isNullish = (val) => {
|
||||
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 -
|
||||
* could be useful to use a jQuery UI draggable for this with certain extensions.
|
||||
|
|
@ -39,7 +51,7 @@ export default class Slider {
|
|||
* @returns {void}
|
||||
*/
|
||||
function mouseDown (e) {
|
||||
const off = bar.offset();
|
||||
const off = findPos(bar);
|
||||
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
|
||||
|
|
@ -130,9 +142,9 @@ export default class Slider {
|
|||
if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
|
||||
else arrowOffsetY -= arrowH >> 1;
|
||||
// set the arrow position based on these offsets
|
||||
arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
|
||||
// arrow.style.left = arrowOffsetX + 'px';
|
||||
// arrow.style.top = arrowOffsetY + 'px';
|
||||
// arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
|
||||
arrow.style.left = arrowOffsetX + 'px';
|
||||
arrow.style.top = arrowOffsetY + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
/* eslint-disable unicorn/prefer-node-remove */
|
||||
/* eslint-disable prefer-destructuring */
|
||||
/* eslint-disable no-unsanitized/property */
|
||||
/**
|
||||
* @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},
|
||||
* {@link external:jQuery.fn.jGraduateDefaults},
|
||||
|
|
@ -244,11 +260,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
break;
|
||||
}
|
||||
typeof $this.okCallback === 'function' && $this.okCallback($this.paint);
|
||||
$this.hide();
|
||||
$this.style.display = 'none';
|
||||
};
|
||||
const cancelClicked = function () {
|
||||
typeof $this.cancelCallback === 'function' && $this.cancelCallback();
|
||||
$this.hide();
|
||||
$this.style.display = 'none';
|
||||
};
|
||||
|
||||
$.extend(
|
||||
|
|
@ -265,13 +281,12 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
|
||||
let // pos = $this.position(),
|
||||
color = null;
|
||||
const $win = $(window);
|
||||
const $win = window;
|
||||
|
||||
if ($this.paint.type === 'none') {
|
||||
$this.paint = new jGraduate.Paint({solidColor: 'ffffff'});
|
||||
}
|
||||
$this.classList.add('jGraduate_Picker');
|
||||
// $this.addClass('jGraduate_Picker');
|
||||
/* eslint-disable max-len */
|
||||
$this.innerHTML = '<ul class="jGraduate_tabs">' +
|
||||
'<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 id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>';
|
||||
/* JFH !!!! */
|
||||
const colPicker = $this.querySelector('#jGraduate_colPick'); //($wc(idref + '> .jGraduate_colPick'))[0];
|
||||
const gradPicker = $this.querySelector('#jGraduate_gradPick'); // ($wc(idref + '> .jGraduate_gradPick'))[0];
|
||||
const colPicker = $this.querySelector('#jGraduate_colPick');
|
||||
const gradPicker = $this.querySelector('#jGraduate_gradPick');
|
||||
const html = '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
|
||||
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
|
||||
'<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');
|
||||
div.innerHTML = html;
|
||||
while (div.children.length > 0) {
|
||||
console.log(gradPicker);
|
||||
gradPicker.appendChild(div.children[0]);
|
||||
}
|
||||
console.log(gradPicker);
|
||||
/* eslint-enable max-len */
|
||||
// --------------
|
||||
// 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 SLIDERW = 145;
|
||||
$wc('.jGraduate_SliderBar').width(SLIDERW);
|
||||
const JQSliderBars = $this.querySelectorAll('.jGraduate_SliderBar');
|
||||
for (const JQSliderBar of JQSliderBars) {
|
||||
JQSliderBar.style.width = SLIDERW + 'px';
|
||||
}
|
||||
// JFH !!!!!!
|
||||
const container = $wc('#' + id + '_jGraduate_GradContainer')[0];
|
||||
const container = $this.querySelector('#' + id + '_jGraduate_GradContainer');
|
||||
|
||||
const svg = mkElem('svg', {
|
||||
id: id + '_jgraduate_svg',
|
||||
|
|
@ -447,7 +463,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
let stopGroup; // eslint-disable-line prefer-const
|
||||
if (isSolid) {
|
||||
// JFH !!!!!!!!
|
||||
grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0];
|
||||
grad = curGradient = $this.querySelector('#' + id + '_lg_jgraduate_grad');
|
||||
color = $this.paint[curType];
|
||||
mkStop(0, '#' + color, 1);
|
||||
|
||||
|
|
@ -505,37 +521,70 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
}, svg);
|
||||
|
||||
// stop visuals created here
|
||||
const beginCoord = $('<div/>').attr({
|
||||
class: 'grad_coord jGraduate_lg_field',
|
||||
title: 'Begin Stop'
|
||||
}).text(1).css({
|
||||
top: y1 * MAX,
|
||||
left: x1 * MAX
|
||||
}).data('coord', 'start').appendTo(container);
|
||||
const beginCoord = document.createElement('div');
|
||||
beginCoord.setAttribute('class', 'grad_coord jGraduate_lg_field');
|
||||
beginCoord.setAttribute('title', 'Begin Stop');
|
||||
beginCoord.textContent = 1;
|
||||
beginCoord.style.top = y1 * MAX;
|
||||
beginCoord.style.left = x1 * MAX;
|
||||
beginCoord.dataset.coord = 'start';
|
||||
container.appendChild(beginCoord);
|
||||
|
||||
const endCoord = beginCoord.clone().text(2).css({
|
||||
top: y2 * MAX,
|
||||
left: x2 * MAX
|
||||
}).attr('title', 'End stop').data('coord', 'end').appendTo(container);
|
||||
const endCoord = document.createElement('div');
|
||||
endCoord.setAttribute('class', 'grad_coord jGraduate_lg_field');
|
||||
endCoord.setAttribute('title', 'End stop');
|
||||
endCoord.textContent = 2;
|
||||
endCoord.style.top = y2 * MAX;
|
||||
endCoord.style.left = x2 * MAX;
|
||||
endCoord.dataset.coord = 'end';
|
||||
container.appendChild(endCoord);
|
||||
|
||||
const centerCoord = $('<div/>').attr({
|
||||
class: 'grad_coord jGraduate_rg_field',
|
||||
title: 'Center stop'
|
||||
}).text('C').css({
|
||||
top: cy * MAX,
|
||||
left: cx * MAX
|
||||
}).data('coord', 'center').appendTo(container);
|
||||
const centerCoord = document.createElement('div');
|
||||
centerCoord.setAttribute('class', 'grad_coord jGraduate_rg_field');
|
||||
centerCoord.setAttribute('title', 'Center stop');
|
||||
centerCoord.textContent = 'C';
|
||||
centerCoord.style.top = cy * MAX;
|
||||
centerCoord.style.left = cx * MAX;
|
||||
centerCoord.dataset.coord = 'center';
|
||||
container.appendChild(centerCoord);
|
||||
|
||||
const focusCoord = centerCoord.clone().text('F').css({
|
||||
top: fy * MAX,
|
||||
left: fx * MAX,
|
||||
display: 'none'
|
||||
}).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);
|
||||
|
||||
focusCoord[0].id = id + '_jGraduate_focusCoord';
|
||||
const focusCoord = document.createElement('div');
|
||||
focusCoord.setAttribute('class', 'grad_coord jGraduate_rg_field');
|
||||
focusCoord.setAttribute('title', 'Focus point');
|
||||
focusCoord.textContent = 'F';
|
||||
focusCoord.style.top = fy * MAX;
|
||||
focusCoord.style.left = fx * MAX;
|
||||
focusCoord.style.display = 'none';
|
||||
focusCoord.dataset.coord = 'focus';
|
||||
focusCoord.setAttribute('id', id + '_jGraduate_focusCoord');
|
||||
container.appendChild(focusCoord);
|
||||
|
||||
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]);
|
||||
|
||||
let attrval = curGradient.getAttribute(attr);
|
||||
|
|
@ -550,32 +599,12 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
}
|
||||
}
|
||||
|
||||
attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr)
|
||||
.val(attrval)
|
||||
.change(function () {
|
||||
// TODO: Support values < 0 and > 1 (zoomable preview?)
|
||||
if (isNaN(Number.parseFloat(this.value)) || this.value < 0) {
|
||||
this.value = 0.0;
|
||||
} else if (this.value > 1) {
|
||||
this.value = 1.0;
|
||||
attrInput[attr] = $this.querySelector('#' + id + '_jGraduate_' + attr);
|
||||
attrInput[attr].value = attrval;
|
||||
attrInput[attr].addEventListener('change', (evt) => onAttrChangeHandler(evt, attr, isRadial));
|
||||
attrInput[attr].dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Float} n
|
||||
|
|
@ -596,7 +625,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
opac = stopElem.getAttribute('stop-opacity');
|
||||
n = stopElem.getAttribute('offset');
|
||||
} else {
|
||||
console.log(curGradient);
|
||||
curGradient.appendChild(stop);
|
||||
}
|
||||
if (opac === null) opac = 1;
|
||||
|
|
@ -623,7 +651,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
$(path).mousedown(function (e) {
|
||||
selectStop(this);
|
||||
drag = curStop;
|
||||
$win.mousemove(dragColor).mouseup(remDrags);
|
||||
$win.addEventListener('mousemove', dragColor);
|
||||
$win.addEventListener('mouseup', remDrags);
|
||||
stopOffset = stopMakerDiv.offset();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
|
@ -715,7 +744,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
* @returns {void}
|
||||
*/
|
||||
function remDrags () {
|
||||
$win.unbind('mousemove', dragColor);
|
||||
$win.removeEventListener('mousemove', dragColor);
|
||||
if (delStop.getAttribute('display') !== 'none') {
|
||||
remStop();
|
||||
}
|
||||
|
|
@ -848,31 +877,32 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
x = x < 0 ? 0 : x > MAX ? MAX : x;
|
||||
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
|
||||
const fracx = x / SIZEX;
|
||||
const fracy = y / SIZEY;
|
||||
|
||||
const type = draggingCoord.data('coord');
|
||||
const type = draggingCoord.dataset.coord;
|
||||
const grd = curGradient;
|
||||
|
||||
switch (type) {
|
||||
case 'start':
|
||||
attrInput.x1.val(fracx);
|
||||
attrInput.y1.val(fracy);
|
||||
attrInput.x1.value = fracx;
|
||||
attrInput.y1.value = fracy;
|
||||
grd.setAttribute('x1', fracx);
|
||||
grd.setAttribute('y1', fracy);
|
||||
break;
|
||||
case 'end':
|
||||
attrInput.x2.val(fracx);
|
||||
attrInput.y2.val(fracy);
|
||||
attrInput.x2.value = fracx;
|
||||
attrInput.y2.value = fracy;
|
||||
grd.setAttribute('x2', fracx);
|
||||
grd.setAttribute('y2', fracy);
|
||||
break;
|
||||
case 'center':
|
||||
attrInput.cx.val(fracx);
|
||||
attrInput.cy.val(fracy);
|
||||
attrInput.cx.value = fracx;
|
||||
attrInput.cy.value = fracy;
|
||||
grd.setAttribute('cx', fracx);
|
||||
grd.setAttribute('cy', fracy);
|
||||
cX = fracx;
|
||||
|
|
@ -880,8 +910,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
xform();
|
||||
break;
|
||||
case 'focus':
|
||||
attrInput.fx.val(fracx);
|
||||
attrInput.fy.val(fracy);
|
||||
attrInput.fx.value = fracx;
|
||||
attrInput.fy.value = fracy;
|
||||
grd.setAttribute('fx', fracx);
|
||||
grd.setAttribute('fy', fracy);
|
||||
xform();
|
||||
|
|
@ -892,7 +922,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
|
||||
const onCoordUp = function () {
|
||||
draggingCoord = null;
|
||||
$win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);
|
||||
$win.removeEventListener('mousemove', onCoordDrag);
|
||||
$win.removeEventListener('mouseup', onCoordUp);
|
||||
};
|
||||
|
||||
// Linear gradient
|
||||
|
|
@ -923,44 +954,50 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
|
||||
previewRect.setAttribute('fill-opacity', gradalpha / 100);
|
||||
|
||||
$wc('#' + id + ' div.grad_coord').mousedown(function (evt) {
|
||||
evt.preventDefault();
|
||||
draggingCoord = $(this);
|
||||
const JQGradCoords = $this.querySelectorAll('#' + id + ' div.grad_coord');
|
||||
const onMouseDownGradCoords = (e) => {
|
||||
e.preventDefault();
|
||||
draggingCoord = e.target;
|
||||
// const sPos = draggingCoord.offset();
|
||||
offset = draggingCoord.parent().offset();
|
||||
$win.mousemove(onCoordDrag).mouseup(onCoordUp);
|
||||
});
|
||||
offset = findPos(draggingCoord.parentNode);
|
||||
$win.addEventListener('mousemove', onCoordDrag);
|
||||
$win.addEventListener('mouseup', onCoordUp);
|
||||
};
|
||||
for (const JQGradCoord of JQGradCoords) {
|
||||
JQGradCoord.addEventListener('mousedown', onMouseDownGradCoords);
|
||||
}
|
||||
|
||||
// bind GUI elements
|
||||
$wc('#' + id + '_jGraduate_Ok').bind('click', function () {
|
||||
$this.querySelector('#' + id + '_jGraduate_Ok').addEventListener('click', function () {
|
||||
$this.paint.type = curType;
|
||||
$this.paint[curType] = curGradient.cloneNode(true);
|
||||
$this.paint.solidColor = null;
|
||||
okClicked();
|
||||
});
|
||||
$wc('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
|
||||
cancelClicked();
|
||||
});
|
||||
$this.querySelector('#' + id + '_jGraduate_Cancel').addEventListener('click', cancelClicked);
|
||||
|
||||
if (curType === 'radialGradient') {
|
||||
if (showFocus) {
|
||||
focusCoord.show();
|
||||
focusCoord.style.display = 'block';
|
||||
} else {
|
||||
focusCoord.hide();
|
||||
attrInput.fx.val('');
|
||||
attrInput.fy.val('');
|
||||
focusCoord.style.display = 'none';
|
||||
attrInput.fx.value = '';
|
||||
attrInput.fy.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
$wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
|
||||
$this.querySelector('#' + id + '_jGraduate_match_ctr').checked = !showFocus;
|
||||
|
||||
let lastfx, lastfy;
|
||||
|
||||
$wc('#' + id + '_jGraduate_match_ctr').change(function () {
|
||||
showFocus = !this.checked;
|
||||
focusCoord.toggle(showFocus);
|
||||
attrInput.fx.val('');
|
||||
attrInput.fy.val('');
|
||||
const onMatchCtrHandler = (e) => {
|
||||
showFocus = !e.target.checked;
|
||||
if (showFocus) {
|
||||
focusCoord.style.display = 'block';
|
||||
} else {
|
||||
focusCoord.style.display = 'none';
|
||||
}
|
||||
attrInput.fx.value = '';
|
||||
attrInput.fy.value = '';
|
||||
const grd = curGradient;
|
||||
if (!showFocus) {
|
||||
lastfx = grd.getAttribute('fx');
|
||||
|
|
@ -972,10 +1009,11 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
const fY = lastfy || 0.5;
|
||||
grd.setAttribute('fx', fX);
|
||||
grd.setAttribute('fy', fY);
|
||||
attrInput.fx.val(fX);
|
||||
attrInput.fy.val(fY);
|
||||
attrInput.fx.value = fX;
|
||||
attrInput.fy.value = fY;
|
||||
}
|
||||
});
|
||||
};
|
||||
$this.querySelector('#' + id + '_jGraduate_match_ctr').addEventListener('change', onMatchCtrHandler);
|
||||
|
||||
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
numstops = stops.length;
|
||||
|
|
@ -1109,7 +1147,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
parent,
|
||||
offset: parent.offset()
|
||||
};
|
||||
$win.mousemove(dragSlider).mouseup(stopSlider);
|
||||
$win.addEventListener('mousemove', dragSlider);
|
||||
$win.addEventListener('mouseup', stopSlider);
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
||||
|
|
@ -1158,7 +1197,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
} else if (xpos < 0) {
|
||||
xpos = 0;
|
||||
}
|
||||
handle.css({'margin-left': xpos - 5});
|
||||
handle.style.marginLeft = (xpos - 5) + 'px';
|
||||
}).change();
|
||||
});
|
||||
|
||||
|
|
@ -1168,7 +1207,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
};
|
||||
|
||||
const stopSlider = function (evt) {
|
||||
$win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);
|
||||
$win.removeEventListener('mousemove', dragSlider);
|
||||
$win.removeEventListener('mouseup', stopSlider);
|
||||
slider = null;
|
||||
};
|
||||
|
||||
|
|
@ -1181,9 +1221,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
if (!isSolid) {
|
||||
color = stops[0].getAttribute('stop-color');
|
||||
}
|
||||
|
||||
// This should be done somewhere else, probably
|
||||
$.extend(jPickerDefaults.window, {
|
||||
Object.assign(jPickerDefaults.window, {
|
||||
alphaSupport: true, effects: {type: 'show', speed: 0}
|
||||
});
|
||||
|
||||
|
|
@ -1204,70 +1243,90 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
|
|||
null,
|
||||
function () { cancelClicked(); }
|
||||
);
|
||||
|
||||
// JFH !!!!
|
||||
// const tabs = $wc(idref + ' .jGraduate_tabs li');
|
||||
const tabs = $wc('.jGraduate_tabs li');
|
||||
tabs.click(function () {
|
||||
tabs.removeClass('jGraduate_tab_current');
|
||||
$(this).addClass('jGraduate_tab_current');
|
||||
$wc(idref + ' > div').hide();
|
||||
const type = $(this).attr('data-type');
|
||||
$wc(idref + ' .jGraduate_gradPick').show();
|
||||
const tabs = $this.querySelectorAll('.jGraduate_tabs li');
|
||||
const onTabsClickHandler = (e) => {
|
||||
for (const tab of tabs) {
|
||||
tab.classList.remove('jGraduate_tab_current');
|
||||
}
|
||||
e.target.classList.add('jGraduate_tab_current');
|
||||
const innerDivs = $this.querySelectorAll(idref + ' > div');
|
||||
[].forEach.call(innerDivs, function (innerDiv) {
|
||||
innerDiv.style.display = 'none';
|
||||
});
|
||||
const type = e.target.dataset.type;
|
||||
gradPicker.style.display = 'block';
|
||||
if (type === 'rg' || type === 'lg') {
|
||||
// Show/hide appropriate fields
|
||||
$wc('.jGraduate_' + type + '_field').show();
|
||||
$wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
|
||||
|
||||
$wc('#' + id + '_jgraduate_rect')[0]
|
||||
const tFileds = $this.querySelectorAll('.jGraduate_' + type + '_field');
|
||||
[].forEach.call(tFileds, function (tFiled) {
|
||||
tFiled.style.display = 'block';
|
||||
});
|
||||
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)');
|
||||
|
||||
// Copy stops
|
||||
|
||||
curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
|
||||
|
||||
$wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
|
||||
|
||||
const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0];
|
||||
|
||||
const jOpacInput = $this.querySelector('#' + id + '_jGraduate_OpacInput');
|
||||
jOpacInput.value = $this.paint.alpha;
|
||||
jOpacInput.dispatchEvent(new Event('change'));
|
||||
const newGrad = $this.querySelectorAll('#' + id + '_' + type + '_jgraduate_grad')[0];
|
||||
if (curGradient !== newGrad) {
|
||||
const curStops = $(curGradient).find('stop');
|
||||
$(newGrad).empty().append(curStops);
|
||||
const curStops = curGradient.querySelectorAll('stop');
|
||||
while (newGrad.firstChild) {
|
||||
newGrad.removeChild(newGrad.firstChild);
|
||||
}
|
||||
[].forEach.call(curStops, function (curS) {
|
||||
newGrad.appendChild(curS);
|
||||
});
|
||||
curGradient = newGrad;
|
||||
const sm = spreadMethodOpt.getAttribute('value');
|
||||
curGradient.setAttribute('spreadMethod', sm);
|
||||
}
|
||||
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) {
|
||||
$wc('#' + id + '_jGraduate_match_ctr')[0].checked = false;
|
||||
$this.querySelectorAll('#' + id + '_jGraduate_match_ctr')[0].checked = false;
|
||||
}
|
||||
} else {
|
||||
$wc(idref + ' .jGraduate_gradPick').hide();
|
||||
$wc(idref + ' .jGraduate_colPick').show();
|
||||
gradPicker.style.display = 'none';
|
||||
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();
|
||||
tabs.removeClass('jGraduate_tab_current');
|
||||
for (const tab of tabs) {
|
||||
tab.classList.remove('jGraduate_tab_current');
|
||||
}
|
||||
let tab;
|
||||
switch ($this.paint.type) {
|
||||
case 'linearGradient':
|
||||
tab = $wc(idref + ' .jGraduate_tab_lingrad');
|
||||
tab = $this.querySelector(idref + ' .jGraduate_tab_lingrad');
|
||||
break;
|
||||
case 'radialGradient':
|
||||
tab = $wc(idref + ' .jGraduate_tab_radgrad');
|
||||
tab = $this.querySelector(idref + ' .jGraduate_tab_radgrad');
|
||||
break;
|
||||
default:
|
||||
tab = $wc(idref + ' .jGraduate_tab_color');
|
||||
tab = $this.querySelector(idref + ' .jGraduate_tab_color');
|
||||
break;
|
||||
}
|
||||
$this.style.display = 'block';
|
||||
|
||||
// jPicker will try to show after a 0ms timeout, so need to fire this after that
|
||||
setTimeout(() => {
|
||||
tab.addClass('jGraduate_tab_current').click();
|
||||
tab.classList.add('jGraduate_tab_current');
|
||||
tab.dispatchEvent(new Event('click'));
|
||||
}, 10);
|
||||
// });
|
||||
}
|
||||
|
||||
// return $;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -945,7 +945,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
function updatePreview (ui) {
|
||||
try {
|
||||
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);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
|
@ -1039,7 +1039,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
* @returns {void}
|
||||
*/
|
||||
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.style.backgroundImage = 'none';
|
||||
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 + '\')';
|
||||
// img.css({backgroundImage: 'url(\'' + src + '\')'});
|
||||
}
|
||||
/**
|
||||
* @param {external:jQuery} img
|
||||
|
|
@ -1063,7 +1060,6 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
* @returns {void}
|
||||
*/
|
||||
function setImgLoc (img, y) {
|
||||
// img.css({top: y + 'px'});
|
||||
img.style.top = y + 'px';
|
||||
}
|
||||
/**
|
||||
|
|
@ -1079,10 +1075,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
if (!isNullish(src) && (
|
||||
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
|
||||
)) {
|
||||
obj.css({
|
||||
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
|
||||
'\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'
|
||||
});
|
||||
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
|
||||
'\', 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 if (alpha === 0 || alpha === 100) {
|
||||
|
|
@ -1091,10 +1085,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
if (!isNullish(src) && (
|
||||
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
|
||||
)) {
|
||||
obj.css({
|
||||
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
|
||||
'\', sizingMethod=\'scale\')'
|
||||
});
|
||||
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
|
||||
'\', sizingMethod=\'scale\')';
|
||||
} else obj.style.opacity = '';
|
||||
} else obj.style.opacity = '';
|
||||
}
|
||||
|
|
@ -1160,7 +1152,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
*/
|
||||
function currentColorChanged (ui) {
|
||||
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));
|
||||
}
|
||||
/**
|
||||
|
|
@ -1170,9 +1162,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
function expandableColorChanged (ui) {
|
||||
const hex = ui.val('hex');
|
||||
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));
|
||||
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({
|
||||
backgroundColor: (hex && '#' + hex) || 'transparent',
|
||||
color: isNullish(va) || va.v > 75 ? '#000000' : '#ffffff'
|
||||
|
|
@ -1199,11 +1193,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
* @returns {false}
|
||||
*/
|
||||
function documentMouseMove (e) {
|
||||
container.css({
|
||||
left: elementStartX - (pageStartX - e.pageX) + 'px',
|
||||
top: elementStartY - (pageStartY - e.pageY) + 'px'
|
||||
});
|
||||
container.style.left = elementStartX - (pageStartX - e.pageX) + 'px';
|
||||
container.style.top = elementStartY - (pageStartY - e.pageY) + 'px';
|
||||
if (settings.window.expandable && !$.support.boxModel) {
|
||||
// const prev = container.previousElementSibling;
|
||||
container.prev().css({
|
||||
left: container.css('left'),
|
||||
top: container.css('top')
|
||||
|
|
@ -1258,7 +1251,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
}
|
||||
if (settings.window.expandable) {
|
||||
$(document.body).children('div.jPicker.Container').css({zIndex: 10});
|
||||
container.css({zIndex: 20});
|
||||
container.style.zIndex = 20;
|
||||
}
|
||||
switch (settings.window.effects.type) {
|
||||
case 'fade':
|
||||
|
|
@ -1283,7 +1276,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
* @returns {void}
|
||||
*/
|
||||
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;
|
||||
container.prev().remove();
|
||||
}
|
||||
|
|
@ -1305,10 +1298,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
* @returns {void}
|
||||
*/
|
||||
function initialize () {
|
||||
console.log('$(that).next() --> ', that.nextElementSibling);
|
||||
console.log('$(that).next() --> ', that.nextElementSibling.querySelector('#Container'));
|
||||
const nexts = that.nextElementSibling;
|
||||
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.addClass('jPicker Container');
|
||||
container.classList.add('jPicker');
|
||||
|
|
@ -1329,7 +1321,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
<tr>
|
||||
<td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1"> </span><span class="Map2" id="MMap2"> </span><span class="Map3" id="MMap3"> </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"> </span><span class="Map2" id="Map2"> </span><span class="Map3" id="Map3"> </span><span class="Map4" id="Map4"> </span><span class="Map5" id="Map5"> </span><span class="Map6" id="Map6"> </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}"> </span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}"> </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}"> </span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}"> </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>
|
||||
</tr>
|
||||
<tr class="Hue">
|
||||
|
|
@ -1374,7 +1366,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
container.mousedown(
|
||||
function () {
|
||||
$(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
|
||||
|
|
@ -1464,11 +1456,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
button = tbody.querySelector('#Button');
|
||||
activePreview = preview.querySelector('#Active');
|
||||
activePreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent';
|
||||
// .css({backgroundColor: (hex && '#' + hex) || 'transparent'});
|
||||
currentPreview = preview.querySelector('#Current');
|
||||
currentPreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent';
|
||||
currentPreview.addEventListener('click', currentClicked);
|
||||
// .css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);
|
||||
setAlpha.call(that, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4));
|
||||
okButton = button.querySelector('#Ok');
|
||||
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, colorBarL5, images.clientPath + 'bar-opacity.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);
|
||||
const radioInputs = tbody.querySelectorAll('td.Radio input');
|
||||
for (const radioInput of radioInputs) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue