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

#46 jquery to js convertion changes

Browse Source
This commit is contained in:
Agriya Dev5
2021-02-05 17:30:31 +05:30
parent a330dfbc28
commit 2a59e75cab
4 changed files with 126 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
/* eslint-disable unicorn/prefer-math-trunc */ /* eslint-disable unicorn/prefer-math-trunc */
/* eslint-disable no-bitwise */ /* eslint-disable no-bitwise */
/* eslint-disable unicorn/prefer-ternary */ /* eslint-disable unicorn/prefer-ternary */
import {findPos} from './Util.js';
/** /**
* Whether a value is `null` or `undefined`. * Whether a value is `null` or `undefined`.
* @param {any} val * @param {any} val
@@ -9,22 +10,6 @@
const isNullish = (val) => { const isNullish = (val) => {
return val === null || val === undefined; return val === null || val === undefined;
}; };
/**
* @param {any} obj
* @returns {any}
*/
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.

16
src/editor/components/jgraduate/Util.js Normal file
View File

@@ -0,0 +1,16 @@
/**
* @param {any} obj
* @returns {any}
*/
export 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};
}

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

@@ -23,6 +23,7 @@
/* globals $ */ /* globals $ */
import Paint from './paint.js'; import Paint from './paint.js';
import {jPickerDefaults, jPickerMethod} from './jQuery.jPicker.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. * @todo JFH: This jQuery plugin was adapted to work within a Web Component.
@@ -54,19 +55,6 @@ 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},

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

@@ -1,7 +1,4 @@
/* eslint-disable jsdoc/require-file-overview */ /* eslint-disable unicorn/prefer-modern-dom-apis */
import ColorValuePicker from './ColorValuePicker.js';
import Slider from './Slider.js';
/* globals $ */
/** /**
* @file jPicker (Adapted from version 1.1.6) * @file jPicker (Adapted from version 1.1.6)
* *
@@ -18,6 +15,14 @@ import Slider from './Slider.js';
* John Dyers' website: {@link http://johndyer.name} * John Dyers' website: {@link http://johndyer.name}
* Color Picker page: {@link http://johndyer.name/photoshop-like-javascript-color-picker/} * Color Picker page: {@link http://johndyer.name/photoshop-like-javascript-color-picker/}
*/ */
/* globals $ */
/* eslint-disable unicorn/prefer-math-trunc */
/* eslint-disable no-unsanitized/property */
/* eslint-disable no-bitwise */
/* eslint-disable max-len */
import ColorValuePicker from './ColorValuePicker.js';
import Slider from './Slider.js';
import {findPos} from './Util.js';
/** /**
* @external Math * @external Math
@@ -626,15 +631,15 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
} }
} }
if (settings.window.expandable) { if (settings.window.expandable) {
that.insertAdjacentElement('afterend', `<span class="jPicker"> const content = document.createElement('span');
<span class="Icon"> content.classList.add('jPicker');
<span class="Color">&nbsp;</span> content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
<span class="Alpha">&nbsp;</span> <span class="Color" id="jq-ae-Color">&nbsp;</span>
<span class="Image" title="Click To Open Color Picker">&nbsp;</span> <span class="Alpha" id="jq-ae-Alpha">&nbsp;</span>
<span class="Container" id="Container">&nbsp;</span> <span class="Image" id="jq-ae-Image" title="Click To Open Color Picker">&nbsp;</span>
</span> <span class="Container" id="Container">&nbsp;</span>
</span>`); </span>`;
// $(that).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="Click To Open Color Picker">&nbsp;</span><span class="Container" id="Container">&nbsp;</span></span></span>'); that.insertAdjacentElement('afterend', content);
} else { } else {
settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
} }
@@ -1178,12 +1183,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
iconColor.style.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.backgroundColor = (hex && '#' + hex) || 'transparent';
// settings.window.input.style.color = isNullish(va) || va.v > 75 ? '#000000' : '#ffffff'; 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'
});
} }
} }
/** /**
@@ -1191,14 +1192,13 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void} * @returns {void}
*/ */
function moveBarMouseDown (e) { function moveBarMouseDown (e) {
// const {element} = settings.window, // local copies for YUI compressor elementStartX = Number.parseInt(container.style.left);
// {page} = settings.window; elementStartY = Number.parseInt(container.style.top);
elementStartX = Number.parseInt(container.css('left'));
elementStartY = Number.parseInt(container.css('top'));
pageStartX = e.pageX; pageStartX = e.pageX;
pageStartY = e.pageY; pageStartY = e.pageY;
// bind events to document to move window - we will unbind these on mouseup // bind events to document to move window - we will unbind these on mouseup
$(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp); document.addEventListener('mousemove', documentMouseMove);
document.addEventListener('mouseup', documentMouseUp);
e.preventDefault(); // prevent attempted dragging of the column e.preventDefault(); // prevent attempted dragging of the column
} }
/** /**
@@ -1209,11 +1209,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
container.style.left = elementStartX - (pageStartX - e.pageX) + 'px'; container.style.left = elementStartX - (pageStartX - e.pageX) + 'px';
container.style.top = elementStartY - (pageStartY - e.pageY) + 'px'; container.style.top = elementStartY - (pageStartY - e.pageY) + 'px';
if (settings.window.expandable && !$.support.boxModel) { if (settings.window.expandable && !$.support.boxModel) {
// const prev = container.previousElementSibling; const prev = container.previousElementSibling;
container.prev().css({ prev.style.left = container.style.left;
left: container.css('left'), prev.style.top = container.style.top;
top: container.css('top')
});
} }
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@@ -1224,7 +1222,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {false} * @returns {false}
*/ */
function documentMouseUp (e) { function documentMouseUp (e) {
$(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp); document.removeEventListener('mousemove', documentMouseMove);
document.removeEventListener('mouseup', documentMouseUp);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
return false; return false;
@@ -1236,7 +1235,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
function quickPickClicked (e) { function quickPickClicked (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
color.active.val('ahex', $(this).attr('title') || null, e.target); color.active.val('ahex', e.target.getAttribute('title') || null, e.target);
return false; return false;
} }
/** /**
@@ -1251,22 +1250,22 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
*/ */
function attachIFrame () { function attachIFrame () {
if (!settings.window.expandable || $.support.boxModel) return; if (!settings.window.expandable || $.support.boxModel) return;
const table = container.find('table:first'); const table = container.querySelector('#jPicker-table');
container.before('<iframe/>'); container.insertAdjacentElement('beforebegin', document.createElement('iframe'));
container.prev().css({ const pELem = container.previousElementSibling;
width: table.width(), pELem.style.width = parseFloat(getComputedStyle(table, null).width.replace('px', ''));
height: container.height(), pELem.style.height = parseFloat(getComputedStyle(container, null).height.replace('px', ''));
opacity: 0, pELem.style.opacity = 0;
position: 'absolute', pELem.style.position = 'absolute';
left: container.css('left'), pELem.style.left = getComputedStyle(container, null).getPropertyValue('left');
top: container.css('top') pELem.style.top = getComputedStyle(container, null).getPropertyValue('top');
});
} }
if (settings.window.expandable) { if (settings.window.expandable) {
$(document.body).children('div.jPicker.Container').css({zIndex: 10});
container.style.zIndex = 20; container.style.zIndex = 20;
} }
switch (settings.window.effects.type) { container.style.display = 'block';
attachIFrame();
/* switch (settings.window.effects.type) {
case 'fade': case 'fade':
container.fadeIn(settings.window.effects.speed.show, attachIFrame); container.fadeIn(settings.window.effects.speed.show, attachIFrame);
break; break;
@@ -1277,7 +1276,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
default: default:
container.show(settings.window.effects.speed.show, attachIFrame); container.show(settings.window.effects.speed.show, attachIFrame);
break; break;
} } */
} }
/** /**
* *
@@ -1293,7 +1292,9 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
if (!settings.window.expandable || $.support.boxModel) return; if (!settings.window.expandable || $.support.boxModel) return;
container.prev().remove(); container.prev().remove();
} }
switch (settings.window.effects.type) { container.style.display = 'none';
removeIFrame();
/* switch (settings.window.effects.type) {
case 'fade': case 'fade':
container.fadeOut(settings.window.effects.speed.hide, removeIFrame); container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
break; break;
@@ -1304,7 +1305,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
default: default:
container.hide(settings.window.effects.speed.hide, removeIFrame); container.hide(settings.window.effects.speed.hide, removeIFrame);
break; break;
} } */
} }
/** /**
* *
@@ -1314,11 +1315,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
const nexts = that.nextElementSibling; const nexts = that.nextElementSibling;
const win = settings.window, const win = settings.window,
popup = win.expandable ? nexts.querySelector('#Container') : null; popup = win.expandable ? nexts.querySelector('#Container') : null;
container = win.expandable ? $('<div/>') : that; container = win.expandable ? document.createElement('div') : that;
// container.addClass('jPicker Container'); // container.addClass('jPicker Container');
container.classList.add('jPicker'); container.classList.add('jPicker');
container.classList.add('Container'); container.classList.add('Container');
if (win.expandable) container.hide(); if (win.expandable) container.style.display = 'none';
container.onselectstart = function (e) { container.onselectstart = function (e) {
if (e.target.nodeName.toLowerCase() !== 'input') return false; if (e.target.nodeName.toLowerCase() !== 'input') return false;
return true; return true;
@@ -1328,7 +1329,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
const all = color.active.val('all'); const all = color.active.val('all');
if (win.alphaPrecision < 0) win.alphaPrecision = 0; if (win.alphaPrecision < 0) win.alphaPrecision = 0;
else if (win.alphaPrecision > 2) win.alphaPrecision = 2; else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
const controlHtml = `<table class="jPicker" cellpadding="0" cellspacing="0"> const controlHtml = `<table class="jPicker" id="jPicker-table" cellpadding="0" cellspacing="0">
<tbody> <tbody>
${win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : ''} ${win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : ''}
<tr> <tr>
@@ -1370,54 +1371,47 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
</tr> </tr>
</tbody></table>`; </tbody></table>`;
if (win.expandable) { if (win.expandable) {
container.html(controlHtml); container.innerHTML = controlHtml;
if (!$(document.body).children('div.jPicker.Container').length) { if (!that.querySelectorAll('div.jPicker.Container').length) {
$(document.body).prepend(container); document.body.insertBefore(container, document.body.firstChild);
} else { } else {
$(document.body).children('div.jPicker.Container:last').after(container); that.querySelector('div.jPicker.Container:last').insertAdjacentElement('afterend', container)
} }
container.mousedown( container.addEventListener('mousedown', function () {
function () { container.style.zIndex = 20;
$(document.body).children('div.jPicker.Container').css({zIndex: 10}); });
container.style.zIndex = 20; const poslt = findPos(popup);
} container.style.position = 'absolute';
); container.style.left =
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 win.position.x === 'left'
{ ? (poslt.left - 530 - (win.position.y === 'center' ? 25 : 0)) + 'px'
left: : win.position.x === 'center'
win.position.x === 'left' ? (poslt.left - 260) + 'px'
? (popup.offset().left - 530 - (win.position.y === 'center' ? 25 : 0)) + 'px' : win.position.x === 'right'
: win.position.x === 'center' ? (poslt.left - 10 + (win.position.y === 'center' ? 25 : 0)) + 'px'
? (popup.offset().left - 260) + 'px' : win.position.x === 'screenCenter'
: win.position.x === 'right' ? ((document.width >> 1) - 260) + 'px'
? (popup.offset().left - 10 + (win.position.y === 'center' ? 25 : 0)) + 'px' : (poslt.left + Number.parseInt(win.position.x)) + 'px';
: win.position.x === 'screenCenter' container.style.top =
? (($(document).width() >> 1) - 260) + 'px' win.position.y === 'top'
: (popup.offset().left + Number.parseInt(win.position.x)) + 'px', ? (poslt.top - 312) + 'px'
position: 'absolute', : win.position.y === 'center'
top: win.position.y === 'top' ? (poslt.top - 156) + 'px'
? (popup.offset().top - 312) + 'px' : win.position.y === 'bottom'
: win.position.y === 'center' ? (poslt.top + 25) + 'px'
? (popup.offset().top - 156) + 'px' : (poslt.top + Number.parseInt(win.position.y)) + 'px';
: win.position.y === 'bottom'
? (popup.offset().top + 25) + 'px'
: (popup.offset().top + Number.parseInt(win.position.y)) + 'px'
}
);
} else { } else {
container = that; container = that;
const div = document.createElement('div'); const newDiv = document.createElement('div');
div.innerHTML = controlHtml; newDiv.innerHTML = controlHtml;
while (div.children.length > 0) { while (newDiv.children.length > 0) {
container.appendChild(div.children[0]); container.appendChild(newDiv.children[0]);
} }
} }
// initialize the objects to the source code just injected // initialize the objects to the source code just injected
const tbody = container.querySelector('tbody'); const tbody = container.querySelector('tbody');
colorMapDiv = tbody.querySelector('#Map'); colorMapDiv = tbody.querySelector('#Map');
colorBarDiv = tbody.querySelector('#Bar'); colorBarDiv = tbody.querySelector('#Bar');
// const MapMaps = colorMapDiv.find('span');
// const BarMaps = colorBarDiv.find('span');
colorMapL1 = colorMapDiv.querySelector('#MMap1'); colorMapL1 = colorMapDiv.querySelector('#MMap1');
colorMapL2 = colorMapDiv.querySelector('#MMap2'); colorMapL2 = colorMapDiv.querySelector('#MMap2');
colorMapL3 = colorMapDiv.querySelector('#MMap3'); colorMapL3 = colorMapDiv.querySelector('#MMap3');
@@ -1527,39 +1521,47 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
color.current.bind(currentColorChanged); color.current.bind(currentColorChanged);
// bind to input // bind to input
if (win.expandable) { if (win.expandable) {
that.icon = popup.parents('.Icon:first'); that.icon = popup.parentNode;
iconColor = that.icon.find('.Color:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'}); iconColor = that.icon.querySelector('.Color');
iconAlpha = that.icon.find('.Alpha:first'); iconColor.style.backgroundColor = (hex && '#' + hex) || 'transparent';
iconAlpha = that.icon.querySelector('.Alpha');
setImg.call(that, iconAlpha, images.clientPath + 'bar-opacity.png'); setImg.call(that, iconAlpha, images.clientPath + 'bar-opacity.png');
setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - (!isNullish(all) ? all.a : 0)) * 100) / 255, 4)); setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - (!isNullish(all) ? all.a : 0)) * 100) / 255, 4));
iconImage = that.icon.find('.Image:first').css({ iconImage = that.icon.querySelector('.Image')
backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')' iconImage.style.backgroundImage = 'url(\'' + images.clientPath + images.picker.file + '\')';
}).bind('click', iconImageClicked); iconImage.addEventListener('click', iconImageClicked);
if (win.bindToInput && win.updateInputColor) { if (win.bindToInput && win.updateInputColor) {
win.input.css({ win.input.style.backgroundColor = (hex && '#' + hex) || 'transparent';
backgroundColor: (hex && '#' + hex) || 'transparent', win.input.style.color = isNullish(all) || all.v > 75 ? '#000000' : '#ffffff';
color: isNullish(all) || all.v > 75 ? '#000000' : '#ffffff'
});
} }
moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown); const moveBar = tbody.querySelector('.Move');
moveBar.addEventListener('mousedown', moveBarMouseDown);
color.active.bind(expandableColorChanged); color.active.bind(expandableColorChanged);
} else show.call(that); } else {
show.call(that);
}
} }
/** /**
* *
* @returns {void} * @returns {void}
*/ */
function destroy () { function destroy () {
container.find('td.Radio input').unbind('click', radioClicked); const radioInputs = container.querySelectorAll('td.Radio input');
currentPreview.unbind('click', currentClicked); for (const radioInput of radioInputs) {
cancelButton.unbind('click', cancelClicked); radioInput.removeEventListener('click', radioClicked);
okButton.unbind('click', okClicked); }
currentPreview.removeEventListener('click', currentClicked);
cancelButton.removeEventListener('click', cancelClicked);
okButton.removeEventListener('click', okClicked);
if (settings.window.expandable) { if (settings.window.expandable) {
iconImage.unbind('click', iconImageClicked); iconImage.removeEventListener('click', iconImageClicked);
moveBar.unbind('mousedown', moveBarMouseDown); moveBar.removeEventListener('mousedown', moveBarMouseDown);
that.icon = null; that.icon = null;
} }
container.find('.QuickColor').unbind('click', quickPickClicked); const jqQuickColors = container.querySelectorAll('.QuickColor');
for (const jqQuickColor of jqQuickColors) {
jqQuickColor.removeEventListener('click', quickPickClicked);
}
colorMapDiv = null; colorMapDiv = null;
colorBarDiv = null; colorBarDiv = null;
colorMapL1 = null; colorMapL1 = null;
@@ -1670,7 +1672,6 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setTimeout(function () { setTimeout(function () {
initialize.call(that); initialize.call(that);
}, 0); }, 0);
//});
} }
/** /**
* @typedef {PlainObject} external:jQuery.fn.jPickerOptionsIconInfo * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsIconInfo