' +
@@ -440,9 +449,9 @@ export default function jQueryPluginJGraduate ($) {
const attrInput = {};
const SLIDERW = 145;
- $('.jGraduate_SliderBar').width(SLIDERW);
-
- const container = $('#' + id + '_jGraduate_GradContainer')[0];
+ $wc('.jGraduate_SliderBar').width(SLIDERW);
+ // JFH !!!!!!
+ const container = $wc('#' + id + '_jGraduate_GradContainer')[0];
const svg = mkElem('svg', {
id: id + '_jgraduate_svg',
@@ -491,7 +500,8 @@ export default function jQueryPluginJGraduate ($) {
let stopGroup; // eslint-disable-line prefer-const
if (isSolid) {
- grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
+ // JFH !!!!!!!!
+ grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0];
color = $this.paint[curType];
mkStop(0, '#' + color, 1);
@@ -578,18 +588,6 @@ export default function jQueryPluginJGraduate ($) {
focusCoord[0].id = id + '_jGraduate_focusCoord';
- // const coords = $(idref + ' .grad_coord');
-
- // $(container).hover(function () {
- // coords.animate({
- // opacity: 1
- // }, 500);
- // }, function () {
- // coords.animate({
- // opacity: .2
- // }, 500);
- // });
-
let showFocus;
$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
const isRadial = isNaN(attr[1]);
@@ -606,7 +604,7 @@ export default function jQueryPluginJGraduate ($) {
}
}
- attrInput[attr] = $('#' + id + '_jGraduate_' + attr)
+ attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr)
.val(attrval)
.change(function () {
// TODO: Support values < 0 and > 1 (zoomable preview?)
@@ -683,14 +681,14 @@ export default function jQueryPluginJGraduate ($) {
e.preventDefault();
return false;
}).data('stop', stop).data('bg', pathbg).dblclick(function () {
- $('div.jGraduate_LightBox').show();
+ $wc('div.jGraduate_LightBox').show();
const colorhandle = this;
let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1;
let stopColor = stop.getAttribute('stop-color') || 1;
let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16);
while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
colr = stopColor.substr(1) + thisAlpha;
- $('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
+ $wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
window: {title: 'Pick the start color and opacity for the gradient'},
images: {clientPath: $settings.images.clientPath},
color: {active: colr, alphaSupport: true}
@@ -701,11 +699,11 @@ export default function jQueryPluginJGraduate ($) {
colorhandle.setAttribute('fill-opacity', stopOpacity);
stop.setAttribute('stop-color', stopColor);
stop.setAttribute('stop-opacity', stopOpacity);
- $('div.jGraduate_LightBox').hide();
- $('#' + id + '_jGraduate_stopPicker').hide();
+ $wc('div.jGraduate_LightBox').hide();
+ $wc('#' + id + '_jGraduate_stopPicker').hide();
}, null, function () {
- $('div.jGraduate_LightBox').hide();
- $('#' + id + '_jGraduate_stopPicker').hide();
+ $wc('div.jGraduate_LightBox').hide();
+ $wc('#' + id + '_jGraduate_stopPicker').hide();
});
});
@@ -735,13 +733,13 @@ export default function jQueryPluginJGraduate ($) {
*/
function remStop () {
delStop.setAttribute('display', 'none');
- const path = $(curStop);
+ const path = $wc(curStop);
const stop = path.data('stop');
const bg = path.data('bg');
- $([curStop, stop, bg]).remove();
+ $wc([curStop, stop, bg]).remove();
}
- const stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
+ const stopMakerDiv = $wc('#' + id + '_jGraduate_StopSlider');
let stops, curStop, drag;
@@ -761,9 +759,6 @@ export default function jQueryPluginJGraduate ($) {
if (curStop) curStop.setAttribute('stroke', '#000');
item.setAttribute('stroke', 'blue');
curStop = item;
- // stops = $('stop');
- // opac_select.val(curStop.attr('fill-opacity') || 1);
- // root.append(delStop);
}
let stopOffset;
@@ -792,7 +787,7 @@ export default function jQueryPluginJGraduate ($) {
const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';
if (scaleX === 1 && scaleY === 1) {
curGradient.removeAttribute('gradientTransform');
- // $('#ang').addClass('dis');
+ // $wc('#ang').addClass('dis');
} else {
const x = -cX * (scaleX - 1);
const y = -cY * (scaleY - 1);
@@ -801,7 +796,7 @@ export default function jQueryPluginJGraduate ($) {
rot + 'translate(' + x + ',' + y + ') scale(' +
scaleX + ',' + scaleY + ')'
);
- // $('#ang').removeClass('dis');
+ // $wc('#ang').removeClass('dis');
}
}
@@ -981,22 +976,22 @@ export default function jQueryPluginJGraduate ($) {
previewRect.setAttribute('fill-opacity', gradalpha / 100);
- $('#' + id + ' div.grad_coord').mousedown(function (evt) {
+ $wc(id + ' div.grad_coord').mousedown(function (evt) {
evt.preventDefault();
- draggingCoord = $(this);
+ draggingCoord = $wc(this);
// const sPos = draggingCoord.offset();
offset = draggingCoord.parent().offset();
$win.mousemove(onCoordDrag).mouseup(onCoordUp);
});
// bind GUI elements
- $('#' + id + '_jGraduate_Ok').bind('click', function () {
+ $wc(id + '_jGraduate_Ok').bind('click', function () {
$this.paint.type = curType;
$this.paint[curType] = curGradient.cloneNode(true);
$this.paint.solidColor = null;
okClicked();
});
- $('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
+ $wc(id + '_jGraduate_Cancel').bind('click', function (paint) {
cancelClicked();
});
@@ -1010,11 +1005,11 @@ export default function jQueryPluginJGraduate ($) {
}
}
- $('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
+ $wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
let lastfx, lastfy;
- $('#' + id + '_jGraduate_match_ctr').change(function () {
+ $wc('#' + id + '_jGraduate_match_ctr').change(function () {
showFocus = !this.checked;
focusCoord.toggle(showFocus);
attrInput.fx.val('');
@@ -1157,13 +1152,13 @@ export default function jQueryPluginJGraduate ($) {
};
$.each(sliders, function (type, data) {
- const handle = $(data.handle);
+ const handle = $wc(data.handle);
handle.mousedown(function (evt) {
const parent = handle.parent();
slider = {
type,
elem: handle,
- input: $(data.input),
+ input: $wc(data.input),
parent,
offset: parent.offset()
};
@@ -1171,7 +1166,7 @@ export default function jQueryPluginJGraduate ($) {
evt.preventDefault();
});
- $(data.input).val(data.val).change(function () {
+ $wc(data.input).val(data.val).change(function () {
const isRad = curType === 'radialGradient';
let val = Number(this.value);
let xpos = 0;
@@ -1261,28 +1256,30 @@ export default function jQueryPluginJGraduate ($) {
null,
function () { cancelClicked(); }
);
-
- const tabs = $(idref + ' .jGraduate_tabs li');
+ // 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');
- $(idref + ' > div').hide();
+ $wc(idref + ' > div').hide();
const type = $(this).attr('data-type');
- /* const container = */ $(idref + ' .jGraduate_gradPick').show();
+ $wc(idref + ' .jGraduate_gradPick').show();
if (type === 'rg' || type === 'lg') {
// Show/hide appropriate fields
- $('.jGraduate_' + type + '_field').show();
- $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
+ $wc('.jGraduate_' + type + '_field').show();
+ $wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
- $('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
+ $wc('#' + id + '_jgraduate_rect')[0]
+ .setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
// Copy stops
curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
- $('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
+ $wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
- const newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
+ const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0];
if (curGradient !== newGrad) {
const curStops = $(curGradient).find('stop');
@@ -1292,27 +1289,27 @@ export default function jQueryPluginJGraduate ($) {
curGradient.setAttribute('spreadMethod', sm);
}
showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
- $('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
+ $wc('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
if (showFocus) {
- $('#' + id + '_jGraduate_match_ctr')[0].checked = false;
+ $wc('#' + id + '_jGraduate_match_ctr')[0].checked = false;
}
} else {
- $(idref + ' .jGraduate_gradPick').hide();
- $(idref + ' .jGraduate_colPick').show();
+ $wc(idref + ' .jGraduate_gradPick').hide();
+ $wc(idref + ' .jGraduate_colPick').show();
}
});
- $(idref + ' > div').hide();
+ $wc(idref + ' > div').hide();
tabs.removeClass('jGraduate_tab_current');
let tab;
switch ($this.paint.type) {
case 'linearGradient':
- tab = $(idref + ' .jGraduate_tab_lingrad');
+ tab = $wc(idref + ' .jGraduate_tab_lingrad');
break;
case 'radialGradient':
- tab = $(idref + ' .jGraduate_tab_radgrad');
+ tab = $wc(idref + ' .jGraduate_tab_radgrad');
break;
default:
- tab = $(idref + ' .jGraduate_tab_color');
+ tab = $wc(idref + ' .jGraduate_tab_color');
break;
}
$this.show();
diff --git a/src/editor/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js
similarity index 99%
rename from src/editor/jgraduate/jQuery.jPicker.js
rename to src/editor/components/jgraduate/jQuery.jPicker.js
index 4b6c41c7..86232ac6 100755
--- a/src/editor/jgraduate/jQuery.jPicker.js
+++ b/src/editor/components/jgraduate/jQuery.jPicker.js
@@ -1556,7 +1556,7 @@ const jPicker = function ($) {
const all = ui.val('all');
activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});
setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);
- } catch (e) { }
+ } catch (e) {}
}
/**
* @param {external:jQuery} ui
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 0a633fc8..443dd6c1 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -1,6 +1,6 @@
/* globals jQuery */
-import jQueryPluginJGraduate from '../jgraduate/jQuery.jGraduate.js';
-import jQueryPluginJPicker from '../jgraduate/jQuery.jPicker.js';
+import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
+import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
import PaintBox from './PaintBox.js';
const $ = [
@@ -11,7 +11,9 @@ const $ = [
const template = document.createElement('template');
template.innerHTML = `
-
-
+
+
@@ -46,7 +51,7 @@ template.innerHTML = `
`;
/**
- * @class SeMenuItem
+ * @class SeColorPicker
*/
export class SeColorPicker extends HTMLElement {
/**
@@ -57,17 +62,18 @@ export class SeColorPicker extends HTMLElement {
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
- this.$img = this._shadowRoot.querySelector('img');
- this.$label = this._shadowRoot.querySelector('label');
- this.$picker = this._shadowRoot.getElementById('picker');
+ this.$logo = this._shadowRoot.getElementById('logo');
+ this.$label = this._shadowRoot.getElementById('label');
this.paintBox = null;
+ this.$picker = this._shadowRoot.getElementById('picker');
+ this.$color_picker = this._shadowRoot.getElementById('color_picker');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
- return ['label', 'src', 'value', 'picker'];
+ return ['label', 'src', 'type'];
}
/**
* @function attributeChangedCallback
@@ -80,10 +86,13 @@ export class SeColorPicker extends HTMLElement {
if (oldValue === newValue) return;
switch (name) {
case 'src':
- this.$img.setAttribute('src', newValue);
+ this.$logo.setAttribute('src', newValue);
break;
case 'label':
- this.$label.setAttribute('title', newValue);
+ this.setAttribute('title', newValue);
+ break;
+ case 'type':
+ this.$label.setAttribute(`Pick a ${newValue} Paint and Opacity`);
break;
default:
// eslint-disable-next-line no-console
@@ -96,7 +105,7 @@ export class SeColorPicker extends HTMLElement {
* @returns {any}
*/
get label () {
- return this.getAttribute('label');
+ return this.$label.getAttribute('title');
}
/**
@@ -106,6 +115,21 @@ export class SeColorPicker extends HTMLElement {
set label (value) {
this.setAttribute('label', value);
}
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get type () {
+ return this.getAttribute('type');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set type (value) {
+ this.setAttribute('type', value);
+ }
/**
* @function get
* @returns {any}
@@ -138,29 +162,31 @@ export class SeColorPicker extends HTMLElement {
connectedCallback () {
this.paintBox = new PaintBox(this, this.type);
let {paint} = this.paintBox;
- $('#color_picker')
- .draggable({
- cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
- containment: 'window'
- })
- .jGraduate(
- {
- images: {clientPath: './jgraduate/images/'},
- paint,
- window: {pickerTitle: this.label},
- // images: {clientPath: configObj.curConfig.imgPath},
- newstop: 'inverse'
- },
- function (p) {
- paint = new $.jGraduate.Paint(p);
- this.paintBox.setPaint(paint);
- this.svgCanvas.setPaint(this.picker, paint);
- $('#color_picker').hide();
- },
- () => {
- $('#color_picker').hide();
- }
- );
+ $(this.$picker).click(() => {
+ $(this.$color_picker)
+ .draggable({
+ cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
+ containment: 'window'
+ })
+ .jGraduate(
+ {
+ images: {clientPath: './components/jgraduate/images/'},
+ paint,
+ window: {pickerTitle: this.label},
+ // images: {clientPath: configObj.curConfig.imgPath},
+ newstop: 'inverse'
+ },
+ function (p) {
+ paint = new $.jGraduate.Paint(p);
+ this.paintBox.setPaint(paint);
+ this.svgCanvas.setPaint(this.picker, paint);
+ $('#color_picker').hide();
+ },
+ () => {
+ $('#color_picker').hide();
+ }
+ );
+ });
}
}
diff --git a/src/editor/index.html b/src/editor/index.html
index f18e975e..aa31af93 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -398,8 +398,6 @@
-
-
diff --git a/src/editor/jgraduate/css/jPicker.css b/src/editor/jgraduate/css/jPicker.css
deleted file mode 100644
index f0f3a10f..00000000
--- a/src/editor/jgraduate/css/jPicker.css
+++ /dev/null
@@ -1 +0,0 @@
-.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 174a2455..79935b71 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -1,7 +1,3 @@
-@import "./jgraduate/css/jGraduate.css";
-@import "./jgraduate/css/jPicker.css";
-
-
body {
background: #D0D0D0;
}