You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
5.5 KiB
162 lines
5.5 KiB
/* Color palette to choose note color */
|
|
|
|
define([
|
|
'sugar-web/graphics/palette',
|
|
'mustache'
|
|
], function (palette, mustache) {
|
|
var notepalette = {};
|
|
|
|
function parseColor(input) {
|
|
var colors = input.split("(")[1].split(")")[0].split(",");
|
|
for (var i = 0; i < colors.length; i++) {
|
|
colors[i] = parseInt(colors[i]);
|
|
}
|
|
|
|
return colors;
|
|
}
|
|
|
|
function initGui() {
|
|
|
|
function onColorChangeFill(event) {
|
|
PaintApp.data.color.fill = event.detail.color;
|
|
}
|
|
|
|
var colorsButtonFill = document.getElementById('colors-button-fill');
|
|
var colorPaletteFill = new PaintApp.palettes.notePalette.NotePalette(colorsButtonFill, undefined);
|
|
|
|
colorPaletteFill.addEventListener('colorChange', onColorChangeFill);
|
|
var colorInvokerFill = colorPaletteFill.getPalette().querySelector('.palette-invoker');
|
|
colorPaletteFill.setColor(0);
|
|
}
|
|
|
|
notepalette.initGui = initGui;
|
|
|
|
|
|
/* We setup the palette with Sugar colors */
|
|
notepalette.NotePalette = function (invoker, primaryText) {
|
|
this.invoker = invoker;
|
|
palette.Palette.call(this, invoker, primaryText);
|
|
this.getPalette().className += " colorpalette";
|
|
this.colorChangeEvent = document.createEvent('CustomEvent');
|
|
this.colorChangeEvent.initCustomEvent('colorChange', true, true, {
|
|
'color': '#ed2529'
|
|
});
|
|
this.template = '\
|
|
<style>\
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\
|
|
input[type=range] {\
|
|
width:100px;\
|
|
background-color: transparent !important; /* Hides the slider so custom styles can be added */\
|
|
}\
|
|
}\
|
|
</style>\
|
|
<div style="width:140px;">\
|
|
<div style="float:left; width: 100px;">\
|
|
<table>\
|
|
<tbody>\
|
|
{{#rows}}\
|
|
<tr>\
|
|
{{#.}}\
|
|
<td>\
|
|
<button style="background-color: {{ color }}"></button>\
|
|
</td>\
|
|
{{/.}}\
|
|
</tr>\
|
|
{{/rows}}\
|
|
</tbody>\
|
|
</table>\
|
|
</div>\
|
|
\
|
|
</div>'
|
|
|
|
// this.template = '<tbody>' + '{{#rows}}' + '<tr>' + '{{#.}}' + '<td>' + '<button style="background-color: {{ color }}"></button>' + '</td>' + '{{/.}}' + '</tr>' + '{{/rows}}' + '</tbody>';
|
|
var colorsElem = document.createElement('div');
|
|
colorsElem.className = 'colors';
|
|
var colorsData = {
|
|
rows: [
|
|
[{
|
|
color: '#FFF29F'
|
|
}, {
|
|
color: '#FFCBA6'
|
|
}],
|
|
[{
|
|
color: '#81FFC4'
|
|
}, {
|
|
color: '#FFB7F9'
|
|
}],
|
|
[{
|
|
color: '#C39AFF'
|
|
}, {
|
|
color: '#9AFAFF'
|
|
}]
|
|
]
|
|
};
|
|
colorsElem.innerHTML = mustache.render(this.template, colorsData);
|
|
this.setContent([colorsElem]);
|
|
colorsElem.parentNode.style.backgroundColor = 'black';
|
|
colorsElem.parentNode.parentNode.style.minWidth = '120px';
|
|
colorsElem.parentNode.parentNode.style.maxWidth = '120px';
|
|
colorsElem.parentNode.style.width = '120px';
|
|
colorsElem.parentNode.style.height = '170px';
|
|
colorsElem.parentNode.style.overflowY = 'auto';
|
|
colorsElem.parentNode.style.overflowX = 'hidden';
|
|
|
|
function popDownOnButtonClick(event, close, shouldUpdateSliders) {
|
|
invoker.style.backgroundColor = event.target.style.backgroundColor;
|
|
that.colorChangeEvent.detail.color = event.target.style.backgroundColor;
|
|
that.getPalette().dispatchEvent(that.colorChangeEvent);
|
|
that.getPalette().querySelector('.palette-invoker').style.backgroundColor = event.target.style.backgroundColor;
|
|
if (close === null || close === undefined || close === true) {
|
|
that.popDown();
|
|
}
|
|
}
|
|
|
|
// Pop-down the palette when a item in the menu is clicked.
|
|
this.buttons = colorsElem.querySelectorAll('button');
|
|
var that = this;
|
|
that.colorsElem = colorsElem;
|
|
|
|
|
|
for (var i = 0; i < this.buttons.length; i++) {
|
|
this.buttons[i].addEventListener('click', popDownOnButtonClick);
|
|
}
|
|
};
|
|
|
|
var setColor = function (color) {
|
|
// Look for matching button
|
|
for (var i = 0 ; i < this.buttons.length ; i++) {
|
|
if (this.buttons[i].style.backgroundColor == color) {
|
|
var event = document.createEvent('MouseEvents');
|
|
event.initEvent('click', true, true);
|
|
this.buttons[i].dispatchEvent(event);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Set sliders values
|
|
var colors = parseColor(color);
|
|
this.getPalette().querySelector('.palette-invoker').style.backgroundColor = color;
|
|
this.invoker.style.backgroundColor = color;
|
|
};
|
|
|
|
var addEventListener = function (type, listener, useCapture) {
|
|
return this.getPalette().addEventListener(type, listener, useCapture);
|
|
};
|
|
|
|
notepalette.NotePalette.prototype = Object.create(palette.Palette.prototype, {
|
|
setColor: {
|
|
value: setColor,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
},
|
|
addEventListener: {
|
|
value: addEventListener,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
}
|
|
});
|
|
return notepalette;
|
|
})
|
|
;
|