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

#46 jquery plugin change to pure javascript

Browse Source
This commit is contained in:
Agriya Dev5
2021-02-02 21:06:34 +05:30
parent 599be1db35
commit 4740cce479
5 changed files with 2358 additions and 1899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@ export default class ColorValuePicker {
*/
constructor (picker, color, bindedHex, alphaPrecision) {
const that = this; // private properties and methods
const inputs = picker.find('td.Text input');
const inputs = picker.querySelectorAll('td.Text input');
// input box key down - use arrows to alter color
/**
*
@@ -283,21 +283,57 @@ export default class ColorValuePicker {
ahex = null;
}
let
red = inputs.eq(3),
green = inputs.eq(4),
blue = inputs.eq(5),
alpha = inputs.length > 7 ? inputs.eq(6) : null,
hue = inputs.eq(0),
saturation = inputs.eq(1),
value = inputs.eq(2),
hex = inputs.eq(inputs.length > 7 ? 7 : 6),
ahex = inputs.length > 7 ? inputs.eq(8) : null;
red = inputs[3],
green = inputs[4],
blue = inputs[5],
alpha = inputs.length > 7 ? inputs[6] : null,
hue = inputs[0],
saturation = inputs[1],
value = inputs[2],
hex = inputs[(inputs.length > 7) ? 7 : 6],
ahex = inputs.length > 7 ? inputs[8] : null;
$.extend(true, that, {
// public properties and methods
destroy
});
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
red.addEventListener('keyup', keyUp);
green.addEventListener('keyup', keyUp);
blue.addEventListener('keyup', keyUp);
hue.addEventListener('keyup', keyUp);
saturation.addEventListener('keyup', keyUp);
value.addEventListener('keyup', keyUp);
hex.addEventListener('keyup', keyUp);
red.addEventListener('blur', blur);
green.addEventListener('blur', blur);
blue.addEventListener('blur', blur);
hue.addEventListener('blur', blur);
saturation.addEventListener('blur', blur);
value.addEventListener('blur', blur);
hex.addEventListener('blur', blur);
red.addEventListener('keydown', keyDown);
green.addEventListener('keydown', keyDown);
blue.addEventListener('keydown', keyDown);
hue.addEventListener('keydown', keyDown);
saturation.addEventListener('keydown', keyDown);
value.addEventListener('keydown', keyDown);
if (alpha !== null) {
alpha.addEventListener('keyup', keyUp);
alpha.addEventListener('blur', blur);
alpha.addEventListener('keydown', keyDown);
}
if (ahex !== null) {
ahex.addEventListener('keyup', keyUp);
ahex.addEventListener('blur', blur);
}
if (bindedHex !== null) {
bindedHex.addEventListener('keyup', keyUp);
bindedHex.addEventListener('blur', blur);
}
// red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
// red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
color.bind(colorChanged);
}
}

360
src/editor/components/jgraduate/Slider.js Normal file
View File

@@ -0,0 +1,360 @@
/* globals $ */
/* eslint-disable unicorn/prefer-math-trunc */
/* eslint-disable no-bitwise */
/* eslint-disable unicorn/prefer-ternary */
/**
* Whether a value is `null` or `undefined`.
* @param {any} val
* @returns {boolean}
*/
const isNullish = (val) => {
return val === null || val === undefined;
};
/**
* Encapsulate slider functionality for the ColorMap and ColorBar -
* could be useful to use a jQuery UI draggable for this with certain extensions.
* @memberof module:jPicker
*/
export default class Slider {
/**
* @param {external:jQuery} bar
* @param {module:jPicker.SliderOptions} options
*/
constructor (bar, options) {
const that = this;
/**
* Fire events on the supplied `context`
* @param {module:jPicker.JPickerInit} context
* @returns {void}
*/
function fireChangeEvents (context) {
changeEvents.forEach((changeEvent) => {
changeEvent.call(that, that, context);
});
}
/**
* Bind the mousedown to the bar not the arrow for quick snapping to the clicked location.
* @param {external:jQuery.Event} e
* @returns {void}
*/
function mouseDown (e) {
const off = bar.offset();
offset = {l: off.left | 0, t: off.top | 0};
clearTimeout(timeout);
// using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
timeout = setTimeout(function () {
setValuesFromMousePosition.call(that, e);
}, 0);
// Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
// $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
e.preventDefault(); // don't try to select anything or drag the image to the desktop
}
/**
* Set the values as the mouse moves.
* @param {external:jQuery.Event} e
* @returns {false}
*/
function mouseMove (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
setValuesFromMousePosition.call(that, e);
}, 0);
e.stopPropagation();
e.preventDefault();
return false;
}
/**
* Unbind the document events - they aren't needed when not dragging.
* @param {external:jQuery.Event} e
* @returns {false}
*/
function mouseUp (e) {
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
// $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
e.stopPropagation();
e.preventDefault();
return false;
}
/**
* Calculate mouse position and set value within the current range.
* @param {Event} e
* @returns {void}
*/
function setValuesFromMousePosition (e) {
const barW = bar.w, // local copies for YUI compressor
barH = bar.h;
let locX = e.pageX - offset.l,
locY = e.pageY - offset.t;
// keep the arrow within the bounds of the bar
if (locX < 0) locX = 0;
else if (locX > barW) locX = barW;
if (locY < 0) locY = 0;
else if (locY > barH) locY = barH;
val.call(that, 'xy', {
x: ((locX / barW) * rangeX) + minX,
y: ((locY / barH) * rangeY) + minY
});
}
/**
*
* @returns {void}
*/
function draw () {
const
barW = bar.w,
barH = bar.h,
arrowW = arrow.w,
arrowH = arrow.h;
let arrowOffsetX = 0,
arrowOffsetY = 0;
setTimeout(function () {
if (rangeX > 0) { // range is greater than zero
// constrain to bounds
if (x === maxX) arrowOffsetX = barW;
else arrowOffsetX = ((x / rangeX) * barW) | 0;
}
if (rangeY > 0) { // range is greater than zero
// constrain to bounds
if (y === maxY) arrowOffsetY = barH;
else arrowOffsetY = ((y / rangeY) * barH) | 0;
}
// if arrow width is greater than bar width, center arrow and prevent horizontal dragging
if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
else arrowOffsetX -= arrowW >> 1;
// if arrow height is greater than bar height, center arrow and prevent vertical dragging
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';
});
}
/**
* Get or set a value.
* @param {?("xy"|"x"|"y")} name
* @param {module:math.XYObject} value
* @param {module:jPicker.Slider} context
* @returns {module:math.XYObject|Float|void}
*/
function val (name, value, context) {
const set = value !== undefined;
if (!set) {
if (isNullish(name)) name = 'xy';
switch (name.toLowerCase()) {
case 'x': return x;
case 'y': return y;
case 'xy':
default: return {x, y};
}
}
if (!isNullish(context) && context === that) return undefined;
let changed = false;
let newX, newY;
if (isNullish(name)) name = 'xy';
switch (name.toLowerCase()) {
case 'x':
newX = (value && ((value.x && value.x | 0) || value | 0)) || 0;
break;
case 'y':
newY = (value && ((value.y && value.y | 0) || value | 0)) || 0;
break;
case 'xy':
default:
newX = (value && value.x && value.x | 0) || 0;
newY = (value && value.y && value.y | 0) || 0;
break;
}
if (!isNullish(newX)) {
if (newX < minX) newX = minX;
else if (newX > maxX) newX = maxX;
if (x !== newX) {
x = newX;
changed = true;
}
}
if (!isNullish(newY)) {
if (newY < minY) newY = minY;
else if (newY > maxY) newY = maxY;
if (y !== newY) {
y = newY;
changed = true;
}
}
changed && fireChangeEvents.call(that, context || that);
return undefined;
}
/**
* @typedef {PlainObject} module:jPicker.MinMaxRangeX
* @property {Float} minX
* @property {Float} maxX
* @property {Float} rangeX
*/
/**
* @typedef {PlainObject} module:jPicker.MinMaxRangeY
* @property {Float} minY
* @property {Float} maxY
* @property {Float} rangeY
*/
/**
* @typedef {module:jPicker.MinMaxRangeY|module:jPicker.MinMaxRangeX} module:jPicker.MinMaxRangeXY
*/
/**
*
* @param {"minx"|"maxx"|"rangex"|"miny"|"maxy"|"rangey"|"all"} name
* @param {module:jPicker.MinMaxRangeXY} value
* @returns {module:jPicker.MinMaxRangeXY|module:jPicker.MinMaxRangeX|module:jPicker.MinMaxRangeY|void}
*/
function range (name, value) {
const set = value !== undefined;
if (!set) {
if (isNullish(name)) name = 'all';
switch (name.toLowerCase()) {
case 'minx': return minX;
case 'maxx': return maxX;
case 'rangex': return {minX, maxX, rangeX};
case 'miny': return minY;
case 'maxy': return maxY;
case 'rangey': return {minY, maxY, rangeY};
case 'all':
default: return {minX, maxX, rangeX, minY, maxY, rangeY};
}
}
let // changed = false,
newMinX,
newMaxX,
newMinY,
newMaxY;
if (isNullish(name)) name = 'all';
switch (name.toLowerCase()) {
case 'minx':
newMinX = (value && ((value.minX && value.minX | 0) || value | 0)) || 0;
break;
case 'maxx':
newMaxX = (value && ((value.maxX && value.maxX | 0) || value | 0)) || 0;
break;
case 'rangex':
newMinX = (value && value.minX && value.minX | 0) || 0;
newMaxX = (value && value.maxX && value.maxX | 0) || 0;
break;
case 'miny':
newMinY = (value && ((value.minY && value.minY | 0) || value | 0)) || 0;
break;
case 'maxy':
newMaxY = (value && ((value.maxY && value.maxY | 0) || value | 0)) || 0;
break;
case 'rangey':
newMinY = (value && value.minY && value.minY | 0) || 0;
newMaxY = (value && value.maxY && value.maxY | 0) || 0;
break;
case 'all':
default:
newMinX = (value && value.minX && value.minX | 0) || 0;
newMaxX = (value && value.maxX && value.maxX | 0) || 0;
newMinY = (value && value.minY && value.minY | 0) || 0;
newMaxY = (value && value.maxY && value.maxY | 0) || 0;
break;
}
if (!isNullish(newMinX) && minX !== newMinX) {
minX = newMinX;
rangeX = maxX - minX;
}
if (!isNullish(newMaxX) && maxX !== newMaxX) {
maxX = newMaxX;
rangeX = maxX - minX;
}
if (!isNullish(newMinY) && minY !== newMinY) {
minY = newMinY;
rangeY = maxY - minY;
}
if (!isNullish(newMaxY) && maxY !== newMaxY) {
maxY = newMaxY;
rangeY = maxY - minY;
}
return undefined;
}
/**
* @param {GenericCallback} callback
* @returns {void}
*/
function bind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
if (typeof callback === 'function') changeEvents.push(callback);
}
/**
* @param {GenericCallback} callback
* @returns {void}
*/
function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
if (typeof callback !== 'function') return;
let i;
while ((i = changeEvents.includes(callback))) changeEvents.splice(i, 1);
}
/**
*
* @returns {void}
*/
function destroy () {
// unbind all possible events and null objects
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
bar.removeEventListener('mousedown', mouseDown);
// $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
// bar.unbind('mousedown', mouseDown);
bar = null;
arrow = null;
changeEvents = null;
}
let offset,
timeout,
x = 0,
y = 0,
minX = 0,
maxX = 100,
rangeX = 100,
minY = 0,
maxY = 100,
rangeY = 100,
arrow = bar.querySelector('img'), // the arrow image to drag
changeEvents = [];
Object.assign(that, {
val,
range,
bind,
unbind,
destroy
});
/* $.extend(
true,
// public properties, methods, and event bindings - these we need
// to access from other controls
that,
{
val,
range,
bind,
unbind,
destroy
}
); */
// initialize this control
arrow.src = options.arrow && options.arrow.image;
arrow.w = (options.arrow && options.arrow.width) || arrow.width();
arrow.h = (options.arrow && options.arrow.height) || arrow.height();
bar.w = (options.map && options.map.width) || bar.width();
bar.h = (options.map && options.map.height) || bar.height();
// bind mousedown event
// bar.bind('mousedown', mouseDown);
bar.addEventListener('mousedown', mouseDown);
bind.call(that, draw);
}
}

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

@@ -155,6 +155,34 @@ function mkElem (name, attrs, newparent) {
return elem;
}
function deepExtend(out) {
out = out || {};
for (let i = 1, len = arguments.length; i < len; ++i) {
let obj = arguments[i];
if (!obj) {
continue;
}
for (const key in obj) {
if (!obj.hasOwnProperty(key)) {
continue;
}
// based on https://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/
if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
out[key] = deepExtend(out[key], obj[key]);
continue;
}
out[key] = obj[key];
}
}
return out;
}
/**
* @typedef {PlainObject} module:jGraduate.ColorOpac Object may have one or both values
* @property {string} [color] #Hex color
@@ -188,13 +216,13 @@ function mkElem (name, attrs, newparent) {
* @returns {external:jQuery}
*/
export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
return elem.each(function () {
const $this = $(this),
// return elem.each(function () {
const $this = elem,
$settings = $.extend(true, {}, jGraduateDefaults, options || {}),
id = $this.attr('id'),
idref = '#' + $this.attr('id') + ' ';
id = $this.getAttribute('id'),
idref = '#' + $this.getAttribute('id') + ' ';
// JFH !!!!!
const $shadowRoot = this.parentNode;
const $shadowRoot = elem.parentNode;
const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
if (!idref) {
@@ -242,26 +270,22 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
if ($this.paint.type === 'none') {
$this.paint = new jGraduate.Paint({solidColor: 'ffffff'});
}
$this.addClass('jGraduate_Picker');
$this.classList.add('jGraduate_Picker');
// $this.addClass('jGraduate_Picker');
/* eslint-disable max-len */
$this.html(
'<ul class="jGraduate_tabs">' +
'<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
'<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
$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_lingrad" id="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
'<li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
'</ul>' +
'<div class="jGraduate_colPick"></div>' +
'<div class="jGraduate_gradPick"></div>' +
'<div class="jGraduate_LightBox"></div>' +
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
);
'<div class="jGraduate_colPick" id="jGraduate_colPick"></div>' +
'<div class="jGraduate_gradPick" id="jGraduate_gradPick"></div>' +
'<div class="jGraduate_LightBox" id="jGraduate_LightBox"></div>' +
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>';
/* JFH !!!! */
const colPicker = $wc(idref + '> .jGraduate_colPick');
const gradPicker = $wc(idref + '> .jGraduate_gradPick');
gradPicker.html(
'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
const colPicker = $this.querySelector('#jGraduate_colPick'); //($wc(idref + '> .jGraduate_colPick'))[0];
const gradPicker = $this.querySelector('#jGraduate_gradPick'); // ($wc(idref + '> .jGraduate_gradPick'))[0];
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>' +
'<div id="' + id + '_jGraduate_StopSlider" class="jGraduate_StopSlider"></div>' +
@@ -310,7 +334,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
'<div class="jGraduate_StopSection jGraduate_SpreadMethod">' +
'<label class="jGraduate_Form_Heading">Spread method</label>' +
'<div class="jGraduate_Form_Section">' +
'<select class="jGraduate_spreadMethod">' +
'<select class="jGraduate_spreadMethod" id="jGraduate_spreadMethod">' +
'<option value=pad selected>Pad</option>' +
'<option value=reflect>Reflect</option>' +
'<option value=repeat>Repeat</option>' +
@@ -350,8 +374,14 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
'<div class="jGraduate_OkCancel">' +
'<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
'<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
'</div>'
);
'</div>';
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)
@@ -566,7 +596,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
opac = stopElem.getAttribute('stop-opacity');
n = stopElem.getAttribute('offset');
} else {
curGradient.append(stop);
console.log(curGradient);
curGradient.appendChild(stop);
}
if (opac === null) opac = 1;
@@ -801,9 +832,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
'stroke-width': 2,
stroke: '#000'
}, stopMakerSVG);
const spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function () {
curGradient.setAttribute('spreadMethod', $(this).val());
const spreadMethodOpt = gradPicker.querySelector('#jGraduate_spreadMethod');
spreadMethodOpt.addEventListener('change', function () {
curGradient.setAttribute('spreadMethod', this.value);
});
// handle dragging the stop around the swatch
@@ -883,7 +914,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
mkStop(0, 0, 0, 0, stops[i]);
}
spreadMethodOpt.val(curGradient.getAttribute('spreadMethod') || 'pad');
spreadMethodOpt.setAttribute('value', curGradient.getAttribute('spreadMethod') || 'pad');
let offset;
@@ -1156,7 +1187,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
alphaSupport: true, effects: {type: 'show', speed: 0}
});
jPickerMethod(colPicker,
jPickerMethod(
colPicker,
{
window: {title: $settings.window.pickerTitle},
images: {clientPath: $settings.images.clientPath},
@@ -1201,7 +1233,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const curStops = $(curGradient).find('stop');
$(newGrad).empty().append(curStops);
curGradient = newGrad;
const sm = spreadMethodOpt.val();
const sm = spreadMethodOpt.getAttribute('value');
curGradient.setAttribute('spreadMethod', sm);
}
showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
@@ -1228,13 +1260,13 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
tab = $wc(idref + ' .jGraduate_tab_color');
break;
}
$this.show();
$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();
}, 10);
});
// });
}
// return $;

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

@@ -606,8 +606,8 @@ const {Color, List, ColorMethods} = jPicker; // local copies for YUI compressor
* @returns {external:jQuery}
*/
export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback) {
return elem.each(function () {
const that = this,
// return elem.each(function () {
const that = elem,
settings = $.extend(true, {}, jPickerDefaults, options); // local copies for YUI compressor
if ($(that).get(0).nodeName.toLowerCase() === 'input') { // Add color picker icon if binding to an input element and bind the events to the input
$.extend(true, settings, {
@@ -626,7 +626,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
}
}
if (settings.window.expandable) {
$(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">&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>');
} else {
settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
}
@@ -1049,9 +1049,13 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
*/
function setImg (img, src) {
if (isLessThanIE7 && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) {
img.attr('pngSrc', src);
img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
} else img.css({backgroundImage: 'url(\'' + src + '\')'});
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
@@ -1059,7 +1063,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void}
*/
function setImgLoc (img, y) {
img.css({top: y + 'px'});
// img.css({top: y + 'px'});
img.style.top = y + 'px';
}
/**
* @param {external:jQuery} obj
@@ -1067,10 +1072,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
* @returns {void}
*/
function setAlpha (obj, alpha) {
obj.css({visibility: alpha > 0 ? 'visible' : 'hidden'});
obj.style.visibility = (alpha > 0) ? 'visible' : 'hidden';
if (alpha > 0 && alpha < 100) {
if (isLessThanIE7) {
const src = obj.attr('pngSrc');
const src = obj.getAttribute('pngSrc');
if (!isNullish(src) && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) {
@@ -1078,11 +1083,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
'\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'
});
} else obj.css({opacity: toFixedNumeric(alpha / 100, 4)});
} else obj.css({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) {
if (isLessThanIE7) {
const src = obj.attr('pngSrc');
const src = obj.getAttribute('pngSrc');
if (!isNullish(src) && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) {
@@ -1090,8 +1095,8 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src +
'\', sizingMethod=\'scale\')'
});
} else obj.css({opacity: ''});
} else obj.css({opacity: ''});
} else obj.style.opacity = '';
} else obj.style.opacity = '';
}
}
@@ -1300,12 +1305,16 @@ 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 win = settings.window,
popup = win.expandable ? $(that).next().find('.Container:first') : null;
container = win.expandable ? $('<div/>') : $(that);
container.addClass('jPicker Container');
popup = win.expandable ? that.nextElementSibling.querySelector('#Container') : null;
container = win.expandable ? $('<div/>') : that;
// container.addClass('jPicker Container');
container.classList.add('jPicker');
container.classList.add('Container');
if (win.expandable) container.hide();
container.get(0).onselectstart = function (e) {
container.onselectstart = function (e) {
if (e.target.nodeName.toLowerCase() !== 'input') return false;
return true;
};
@@ -1318,10 +1327,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
<tbody>
${win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : ''}
<tr>
<td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
<td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
<td colspan="2" class="Preview">${localization.text.newColor}<div><span class="Active" title="${localization.tooltips.colors.newColor}">&nbsp;</span><span class="Current" title="${localization.tooltips.colors.currentColor}">&nbsp;</span></div>${localization.text.currentColor}</td>
<td rowspan="9" class="Button"><input type="button" class="Ok" value="${localization.text.ok}" title="${localization.tooltips.buttons.ok}"/><input type="button" class="Cancel" value="${localization.text.cancel}" title="${localization.tooltips.buttons.cancel}"/><hr/><div class="Grid">&nbsp;</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 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 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">
<td class="Radio"><label title="${localization.tooltips.hue.radio}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
@@ -1391,24 +1400,28 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
}
);
} else {
container = $(that);
container.html(controlHtml);
container = that;
const div = document.createElement('div');
div.innerHTML = controlHtml;
while (div.children.length > 0) {
container.appendChild(div.children[0]);
}
}
// initialize the objects to the source code just injected
const tbody = container.find('tbody:first');
colorMapDiv = tbody.find('div.Map:first');
colorBarDiv = tbody.find('div.Bar:first');
const MapMaps = colorMapDiv.find('span');
const BarMaps = colorBarDiv.find('span');
colorMapL1 = MapMaps.filter('.Map1:first');
colorMapL2 = MapMaps.filter('.Map2:first');
colorMapL3 = MapMaps.filter('.Map3:first');
colorBarL1 = BarMaps.filter('.Map1:first');
colorBarL2 = BarMaps.filter('.Map2:first');
colorBarL3 = BarMaps.filter('.Map3:first');
colorBarL4 = BarMaps.filter('.Map4:first');
colorBarL5 = BarMaps.filter('.Map5:first');
colorBarL6 = BarMaps.filter('.Map6:first');
const tbody = container.querySelector('tbody');
colorMapDiv = tbody.querySelector('#Map');
colorBarDiv = tbody.querySelector('#Bar');
// const MapMaps = colorMapDiv.find('span');
// const BarMaps = colorBarDiv.find('span');
colorMapL1 = colorMapDiv.querySelector('#MMap1');
colorMapL2 = colorMapDiv.querySelector('#MMap2');
colorMapL3 = colorMapDiv.querySelector('#MMap3');
colorBarL1 = colorBarDiv.querySelector('#Map1');
colorBarL2 = colorBarDiv.querySelector('#Map2');
colorBarL3 = colorBarDiv.querySelector('#Map3');
colorBarL4 = colorBarDiv.querySelector('#Map4');
colorBarL5 = colorBarDiv.querySelector('#Map5');
colorBarL6 = colorBarDiv.querySelector('#Map6');
// create color pickers and maps
colorMap = new Slider(
colorMapDiv,
@@ -1447,14 +1460,21 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
win.alphaPrecision
);
const hex = !isNullish(all) ? all.hex : null,
preview = tbody.find('.Preview'),
button = tbody.find('.Button');
activePreview = preview.find('.Active:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});
currentPreview = preview.find('.Current:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);
preview = tbody.querySelector('#Preview'),
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.find('.Ok:first').bind('click', okClicked);
cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
grid = button.find('.Grid:first');
okButton = button.querySelector('#Ok');
okButton.addEventListener('click', okClicked);
cancelButton = button.querySelector('#Cancel');
cancelButton.addEventListener('click', cancelClicked);
grid = button.querySelector('#Grid');
setTimeout(function () {
setImg.call(that, colorMapL1, images.clientPath + 'Maps.png');
setImg.call(that, colorMapL2, images.clientPath + 'Maps.png');
@@ -1467,7 +1487,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setImg.call(that, colorBarL6, images.clientPath + 'AlphaBar.png');
setImg.call(that, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
}, 0);
tbody.find('td.Radio input').bind('click', radioClicked);
const radioInputs = tbody.querySelectorAll('td.Radio input');
for (const radioInput of radioInputs) {
radioInput.addEventListener('click', radioClicked);
}
// initialize quick list
if (color.quickList && color.quickList.length > 0) {
let html = '';
@@ -1484,8 +1507,16 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
html += '<span class="QuickColor"' + (' title="#' + ahex + '"') + ' style="background-color:' + ((quickHex && '#' + quickHex) || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + toFixedNumeric(alpha / 255, 4) + ';filter:Alpha(opacity=' + toFixedNumeric(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
}
setImg.call(that, grid, images.clientPath + 'bar-opacity.png');
grid.html(html);
grid.find('.QuickColor').click(quickPickClicked);
const div = document.createElement('div');
div.innerHTML = html;
while (div.children.length > 0) {
grid.appendChild(div.children[0]);
}
// grid.html(html);
const QuickColorSels = grid.querySelectorAll('.QuickColor');
for (const QuickColorSel of QuickColorSels) {
QuickColorSel.addEventListener('click', quickPickClicked);
}
}
setColorMode.call(that, settings.color.mode);
color.active.bind(activeColorChanged);
@@ -1636,7 +1667,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
setTimeout(function () {
initialize.call(that);
}, 0);
});
//});
}
/**
* @typedef {PlainObject} external:jQuery.fn.jPickerOptionsIconInfo

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

@@ -172,13 +172,13 @@ export class SeColorPicker extends HTMLElement {
this.paintBox = new PaintBox(this.$block, this.type);
let {paint} = this.paintBox;
$(this.$picker).click(() => {
$(this.$color_picker)
/* $(this.$color_picker)
.draggable({
cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
containment: 'window'
});
}); */
jGraduateMethod(
$(this.$color_picker),
this.$color_picker,
{
images: {clientPath: './components/jgraduate/images/'},
paint,