mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Extracted ColorPicker code to dedicated widget package (noooooooo) ; Added basic palette creation mechanism (list colors + add color)
This commit is contained in:
jdescottes
@ -4,6 +4,8 @@
|
||||
ns.CreatePaletteController = function (piskelController) {
|
||||
this.tinyColor = null;
|
||||
this.hsvColor = {h:0,s:0,v:0};
|
||||
this.palette = [];
|
||||
this.selectedIndex = -1;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);
|
||||
@ -11,138 +13,58 @@
|
||||
ns.CreatePaletteController.prototype.init = function () {
|
||||
this.superclass.init.call(this);
|
||||
|
||||
$(".color-picker-spectrum").spectrum({
|
||||
flat: true,
|
||||
showInput: true,
|
||||
showButtons: false,
|
||||
change : this.setColor.bind(this)
|
||||
});
|
||||
|
||||
this.tinyColorPickerContainer = document.querySelector('.color-picker-container');
|
||||
this.tinyColorPickerContainer.addEventListener('input', this.onPickerInput_.bind(this));
|
||||
|
||||
this.colorsList = document.querySelector('.colors-list');
|
||||
this.colorPickerContainer = document.querySelector('.color-picker-container');
|
||||
this.colorPreviewEl = document.querySelector('.color-preview');
|
||||
|
||||
this.setColor("#000000");
|
||||
};
|
||||
this.colorsList.addEventListener('click', this.onColorContainerClick_.bind(this));
|
||||
|
||||
ns.CreatePaletteController.prototype.onPickerInput_ = function (evt) {
|
||||
var target = evt.target;
|
||||
this.hslRgbColorPicker = new pskl.controller.widgets.HslRgbColorPicker(this.colorPickerContainer, this.onColorUpdated_.bind(this));
|
||||
this.hslRgbColorPicker.init();
|
||||
|
||||
var model = target.dataset.model;
|
||||
var dimension = target.dataset.dimension;
|
||||
var value = parseInt(target.value, 10);
|
||||
|
||||
if (dimension === 'v' || dimension === 's') {
|
||||
value = value/100;
|
||||
}
|
||||
|
||||
var color;
|
||||
if (model === 'rgb') {
|
||||
color = this.tinyColor.toRgb();
|
||||
} else if (model === 'hsv') {
|
||||
color = this.hsvColor;
|
||||
}
|
||||
|
||||
if (isNaN(value)) {
|
||||
value = color[dimension];
|
||||
} else {
|
||||
color[dimension] = value;
|
||||
}
|
||||
|
||||
this.setColor(color);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.setColor = function (inputColor) {
|
||||
if (!this.unplugged) {
|
||||
this.unplugged = true;
|
||||
|
||||
this.hsvColor = this.toHsvColor_(inputColor);
|
||||
this.tinyColor = this.toTinyColor_(inputColor);
|
||||
|
||||
this.updateInputs();
|
||||
$(".color-picker-spectrum").spectrum("set", this.tinyColor);
|
||||
|
||||
this.onColorUpdated_(this.tinyColor);
|
||||
|
||||
this.unplugged = false;
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.toTinyColor_ = function (color) {
|
||||
if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
|
||||
return color;
|
||||
} else {
|
||||
return window.tinycolor(JSON.parse(JSON.stringify(color)));
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.toHsvColor_ = function (color) {
|
||||
var isHsvColor = ['h','s','v'].every(color.hasOwnProperty.bind(color));
|
||||
if (isHsvColor) {
|
||||
return {
|
||||
h : Math.max(0, Math.min(255, color.h)),
|
||||
s : Math.max(0, Math.min(1, color.s)),
|
||||
v : Math.max(0, Math.min(1, color.v))
|
||||
};
|
||||
} else {
|
||||
return this.toTinyColor_(color).toHsv();
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.updateInputs = function () {
|
||||
var inputs = this.tinyColorPickerContainer.querySelectorAll('input');
|
||||
var rgb = this.tinyColor.toRgb();
|
||||
|
||||
|
||||
for (var i = 0 ; i < inputs.length ; i++) {
|
||||
var input = inputs[i];
|
||||
var dimension = input.dataset.dimension;
|
||||
var model = input.dataset.model;
|
||||
|
||||
if (model === 'rgb') {
|
||||
input.value = rgb[dimension];
|
||||
} else if (model === 'hsv') {
|
||||
var value = this.hsvColor[dimension];
|
||||
if (dimension === 'v' || dimension === 's') {
|
||||
value = 100 * value;
|
||||
}
|
||||
input.value = Math.round(value);
|
||||
}
|
||||
|
||||
if (input.getAttribute('type') === 'range') {
|
||||
this.updateSliderBackground(input);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.updateSliderBackground = function (slider) {
|
||||
var dimension = slider.dataset.dimension;
|
||||
var model = slider.dataset.model;
|
||||
|
||||
var start, end;
|
||||
var isHueSlider = dimension === 'h';
|
||||
if (!isHueSlider) {
|
||||
if (model === 'hsv') {
|
||||
start = JSON.parse(JSON.stringify(this.hsvColor));
|
||||
start[dimension] = 0;
|
||||
|
||||
end = JSON.parse(JSON.stringify(this.hsvColor));
|
||||
end[dimension] = 1;
|
||||
} else {
|
||||
start = this.tinyColor.toRgb();
|
||||
start[dimension] = 0;
|
||||
|
||||
end = this.tinyColor.toRgb();
|
||||
end[dimension] = 255;
|
||||
}
|
||||
var colorStart = window.tinycolor(start).toRgbString();
|
||||
var colorEnd = window.tinycolor(end).toRgbString();
|
||||
slider.style.backgroundImage = "linear-gradient(to right, " + colorStart + " 0, " + colorEnd + " 100%)";
|
||||
}
|
||||
this.refresh_();
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onColorUpdated_ = function (color) {
|
||||
this.colorPreviewEl.style.background = color.toRgbString();
|
||||
this.palette[this.selectedIndex] = color.toRgbString();
|
||||
this.refresh_();
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.onColorContainerClick_ = function (evt) {
|
||||
var target = evt.target;
|
||||
if (target.dataset.paletteIndex) {
|
||||
this.selectColor_(target.dataset.paletteIndex);
|
||||
} else if (target.classList.contains('add-color-button')) {
|
||||
this.palette.push(this.palette[this.selectedIndex] || "#000000");
|
||||
this.refresh_();
|
||||
this.selectColor_(this.palette.length-1);
|
||||
}
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.selectColor_ = function (index) {
|
||||
this.selectedIndex = index;
|
||||
|
||||
var previous = this.colorsList.querySelector('.selectedColor');
|
||||
if (previous) {
|
||||
previous.classList.remove('selected');
|
||||
}
|
||||
|
||||
var next = this.colorsList.querySelector('[data-palette-index="'+index+'"]');
|
||||
next.classList.add('selected');
|
||||
|
||||
this.hslRgbColorPicker.setColor(this.palette[index]);
|
||||
};
|
||||
|
||||
ns.CreatePaletteController.prototype.refresh_ = function () {
|
||||
var html = "";
|
||||
var tpl = '<div data-palette-index="{{index}}" data-palette-color="{{color}}" style="height:40px;width:40px;float:left; margin:10px;background:{{color}}"></div>';
|
||||
this.palette.forEach(function (color, index) {
|
||||
html += pskl.utils.Template.replace(tpl, {color:color, index:index});
|
||||
});
|
||||
|
||||
html += '<div class=add-color-button style="height:40px;width:40px;margin:10px;float:left; background:gold">ADD</div>';
|
||||
|
||||
this.colorsList.innerHTML = html;
|
||||
};
|
||||
})();
|
||||
63
src/js/controller/dialogs/CreatePaletteMethodController.js
Normal file
63
src/js/controller/dialogs/CreatePaletteMethodController.js
Normal file
@ -0,0 +1,63 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.dialogs');
|
||||
|
||||
ns.CreatePaletteMethodController = function (piskelController) {
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.CreatePaletteMethodController, ns.AbstractDialogController);
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.init = function () {
|
||||
this.superclass.init.call(this);
|
||||
|
||||
this.createButton = document.querySelector('.create-palette-method-continue');
|
||||
this.cancelButton = document.querySelector('.create-palette-method-cancel');
|
||||
|
||||
this.createButton.addEventListener('click', this.onCreateButtonClick_.bind(this));
|
||||
|
||||
this.cancelButton.addEventListener('click', function () {
|
||||
$.publish(Events.DIALOG_HIDE);
|
||||
});
|
||||
};
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.onCreateButtonClick_ = function (evt) {
|
||||
var method = this.getSelectedMethod_();
|
||||
|
||||
var initArgs = {
|
||||
method : method
|
||||
};
|
||||
|
||||
if (method === 'palette') {
|
||||
initArgs.paletteId = this.getSelectedPaletteId_();
|
||||
}
|
||||
|
||||
this.closeDialog();
|
||||
|
||||
window.setTimeout(function () {
|
||||
$.publish(Events.DIALOG_DISPLAY, {
|
||||
dialogId : 'create-palette',
|
||||
initArgs : initArgs
|
||||
});
|
||||
},500);
|
||||
};
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.getSelectedMethod_ = function (evt) {
|
||||
var options = document.querySelectorAll('.create-palette-method-list input[type="radio"]');
|
||||
|
||||
var method;
|
||||
for (var i = 0 ; i < options.length ; i++) {
|
||||
console.log(options[i]);
|
||||
if (options[i].checked) {
|
||||
method = options[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
return method;
|
||||
};
|
||||
|
||||
ns.CreatePaletteMethodController.prototype.getSelectedPaletteId_ = function (evt) {
|
||||
var select = document.querySelector('.palettes-list-select');
|
||||
return select.value;
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user