Merge pull request #80 from OptimistikSAS/issues/51
commit
bf7fbf975d
|
@ -1,8 +1,7 @@
|
||||||
import 'elix/define/CenteredStrip.js';
|
/* eslint-disable max-len */
|
||||||
|
|
||||||
const palette = [
|
const palette = [
|
||||||
// Todo: Make into configuration item?
|
// Todo: Make into configuration item?
|
||||||
'#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
|
'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
|
||||||
'#ff0000', '#ff7f00', '#ffff00', '#7fff00',
|
'#ff0000', '#ff7f00', '#ffff00', '#7fff00',
|
||||||
'#00ff00', '#00ff7f', '#00ffff', '#007fff',
|
'#00ff00', '#00ff7f', '#00ffff', '#007fff',
|
||||||
'#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
|
'#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
|
||||||
|
@ -20,11 +19,66 @@ template.innerHTML = `
|
||||||
.square {
|
.square {
|
||||||
height: 15px;
|
height: 15px;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
#palette_holder {
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
height: 16px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 3px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#js-se-palette {
|
||||||
|
float: left;
|
||||||
|
width: 632px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.palette_item {
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.palette_item:first-child {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
@media screen and (max-width:1100px) {
|
||||||
|
#palette_holder {
|
||||||
|
left: 410px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
padding: 0 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:1250px) {
|
||||||
|
#palette_holder {
|
||||||
|
left: 560px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
padding: 0 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:540px) {
|
||||||
|
#palette_holder {
|
||||||
|
left: 0px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
padding: 0 5px;
|
||||||
|
margin-top: 32px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div title="Click to change fill color, shift-click to change stroke color">
|
<div id="palette_holder" title="Click to change fill color, shift-click to change stroke color">
|
||||||
<elix-centered-strip style="width:300px;padding:5px;background: #fff; border-radius: 5px;">
|
<div id="js-se-palette">
|
||||||
</elix-centered-strip>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -40,12 +94,32 @@ export class SEPalette extends HTMLElement {
|
||||||
// create the shadowDom and insert the template
|
// create the shadowDom and insert the template
|
||||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||||
this._shadowRoot.append(template.content.cloneNode(true));
|
this._shadowRoot.append(template.content.cloneNode(true));
|
||||||
this.$strip = this._shadowRoot.querySelector('elix-centered-strip');
|
this.$strip = this._shadowRoot.querySelector('#js-se-palette');
|
||||||
palette.forEach((rgb) => {
|
palette.forEach((rgb) => {
|
||||||
const newDiv = document.createElement('div');
|
const newDiv = document.createElement('div');
|
||||||
newDiv.classList.add('square');
|
newDiv.classList.add('square');
|
||||||
newDiv.style.backgroundColor = rgb;
|
if(rgb === 'none') {
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`;
|
||||||
|
img.style.width = "15px";
|
||||||
|
img.style.height = "15px";
|
||||||
|
newDiv.append(img);
|
||||||
|
} else {
|
||||||
|
newDiv.style.backgroundColor = rgb;
|
||||||
|
}
|
||||||
newDiv.dataset.rgb = rgb;
|
newDiv.dataset.rgb = rgb;
|
||||||
|
newDiv.addEventListener('click', (evt) => {
|
||||||
|
evt.preventDefault();
|
||||||
|
// shift key or right click for stroke
|
||||||
|
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
|
||||||
|
let color = newDiv.dataset.rgb;
|
||||||
|
// Webkit-based browsers returned 'initial' here for no stroke
|
||||||
|
if (color === 'none' || color === 'transparent' || color === 'initial') {
|
||||||
|
color = 'none';
|
||||||
|
}
|
||||||
|
const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
|
||||||
|
this.dispatchEvent(paletteEvent);
|
||||||
|
});
|
||||||
this.$strip.append(newDiv);
|
this.$strip.append(newDiv);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -55,18 +129,6 @@ export class SEPalette extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
connectedCallback () {
|
connectedCallback () {
|
||||||
this.$strip.addEventListener('click', (evt) => {
|
|
||||||
evt.preventDefault();
|
|
||||||
// shift key or right click for stroke
|
|
||||||
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
|
|
||||||
let color = this.$strip.currentItem.dataset.rgb;
|
|
||||||
// Webkit-based browsers returned 'initial' here for no stroke
|
|
||||||
if (color === 'none' || color === 'transparent' || color === 'initial') {
|
|
||||||
color = 'none';
|
|
||||||
}
|
|
||||||
const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
|
|
||||||
this.dispatchEvent(paletteEvent);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue