progress
JFH
parent
1616d214fd
commit
ad959ce7a6
|
|
@ -0,0 +1,256 @@
|
|||
.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
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 265 B After Width: | Height: | Size: 265 B |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 473 B After Width: | Height: | Size: 473 B |
|
Before Width: | Height: | Size: 80 B After Width: | Height: | Size: 80 B |
|
Before Width: | Height: | Size: 81 B After Width: | Height: | Size: 81 B |
|
Before Width: | Height: | Size: 93 B After Width: | Height: | Size: 93 B |
|
Before Width: | Height: | Size: 141 B After Width: | Height: | Size: 141 B |
|
Before Width: | Height: | Size: 144 B After Width: | Height: | Size: 144 B |
|
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
|
Before Width: | Height: | Size: 80 B After Width: | Height: | Size: 80 B |
|
Before Width: | Height: | Size: 76 B After Width: | Height: | Size: 76 B |
|
Before Width: | Height: | Size: 93 B After Width: | Height: | Size: 93 B |
|
|
@ -17,6 +17,11 @@
|
|||
* @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
|
||||
*/
|
||||
|
||||
/**
|
||||
* @todo JFH: This jQuery plugin was adapted to work within a Web Component.
|
||||
* We have to rewrite it as a pure webcomponent.
|
||||
*/
|
||||
|
||||
/* eslint-disable jsdoc/require-property */
|
||||
/**
|
||||
* The jQuery namespace.
|
||||
|
|
@ -273,6 +278,9 @@ export default function jQueryPluginJGraduate ($) {
|
|||
$settings = $.extend(true, {}, $.fn.jGraduateDefaults, options || {}),
|
||||
id = $this.attr('id'),
|
||||
idref = '#' + $this.attr('id') + ' ';
|
||||
// JFH !!!!!
|
||||
const $shadowRoot = this.parentNode;
|
||||
const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
|
||||
|
||||
if (!idref) {
|
||||
/* await */ $.alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
|
||||
|
|
@ -332,8 +340,9 @@ export default function jQueryPluginJGraduate ($) {
|
|||
'<div class="jGraduate_LightBox"></div>' +
|
||||
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
|
||||
);
|
||||
const colPicker = $(idref + '> .jGraduate_colPick');
|
||||
const gradPicker = $(idref + '> .jGraduate_gradPick');
|
||||
/* JFH !!!! */
|
||||
const colPicker = $wc(idref + '> .jGraduate_colPick');
|
||||
const gradPicker = $wc(idref + '> .jGraduate_gradPick');
|
||||
|
||||
gradPicker.html(
|
||||
'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
|
||||
|
|
@ -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();
|
||||
|
|
@ -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
|
||||
|
|
@ -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 = `
|
||||
<style>
|
||||
img {
|
||||
@import "./components/jgraduate/css/jGraduate.css";
|
||||
@import "./components/jgraduate/css/jPicker.css";
|
||||
#logo {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
|
@ -26,17 +28,20 @@ template.innerHTML = `
|
|||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 3px;
|
||||
min-width: 52px;
|
||||
width: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#color_picker {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
<div id="picker">
|
||||
<img src="./images/logo.svg" alt="icon">
|
||||
<label for="color" title="Change xxx color"></label>
|
||||
<img src="./images/logo.svg" alt="icon" id="logo">
|
||||
<label for="color" title="Change xxx color" id="label"></label>
|
||||
<div class="block">
|
||||
<div id="bg"></div>
|
||||
<div id="color" class="block"></div>
|
||||
|
|
@ -46,7 +51,7 @@ template.innerHTML = `
|
|||
<div id="color_picker"></div>
|
||||
`;
|
||||
/**
|
||||
* @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();
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -398,8 +398,6 @@
|
|||
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- hidden divs -->
|
||||
<div id="color_picker"></div>
|
||||
</div>
|
||||
<div id="dialog_box">
|
||||
<div class="overlay"></div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
@import "./jgraduate/css/jGraduate.css";
|
||||
@import "./jgraduate/css/jPicker.css";
|
||||
|
||||
|
||||
body {
|
||||
background: #D0D0D0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue