Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-11 15:23:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add native colorpicker (<input type=color>) when available. Note that Chrome produces false positive; doesn't expose actual colorpicker control.

Browse source
This commit is contained in:
kangax 2011-01-30 18:29:30 -05:00
parent bf8bb679f7
commit 17c6817bf3
1 changed files with 71 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
test/demo/demo.js
View file

@ -189,41 +189,79 @@
}
};
var supportsSlider = (function(){
var el = document.createElement('input');
try {
el.type = 'range';
}
catch(err) { }
return el.type === 'range';
})();
var supportsInputOfType = function(type) {
return function() {
var el = document.createElement('input');
try {
el.type = type;
}
catch(err) { }
return el.type === type;
};
};
var supportsSlider = supportsInputOfType('range'),
supportsColorpicker = supportsInputOfType('color');
if (supportsSlider) {
var controls = document.getElementById('controls');
var sliderLabel = document.createElement('label');
sliderLabel.htmlFor = 'opacity';
sliderLabel.innerHTML = 'Opacity: ';
var slider = document.createElement('input');
slider.type = 'range';
slider.id = 'opacity';
slider.value = 100;
controls.appendChild(sliderLabel);
controls.appendChild(slider);
canvas.calcOffset();
slider.onchange = function() {
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject || activeGroup) {
(activeObject || activeGroup).set('opacity', parseInt(this.value, 10) / 100);
canvas.renderAll();
}
};
(function(){
var controls = document.getElementById('controls');
var sliderLabel = document.createElement('label');
sliderLabel.htmlFor = 'opacity';
sliderLabel.innerHTML = 'Opacity: ';
var slider = document.createElement('input');
slider.type = 'range';
slider.id = 'opacity';
slider.value = 100;
controls.appendChild(sliderLabel);
controls.appendChild(slider);
canvas.calcOffset();
slider.onchange = function() {
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject || activeGroup) {
(activeObject || activeGroup).set('opacity', parseInt(this.value, 10) / 100);
canvas.renderAll();
}
};
})();
}
if (supportsColorpicker) {
(function(){
var controls = document.getElementById('controls');
var label = document.createElement('label');
label.htmlFor = 'color';
label.innerHTML = 'Color: ';
label.style.marginLeft = '10px';
var colorpicker = document.createElement('input');
colorpicker.type = 'color';
colorpicker.id = 'color';
colorpicker.style.width = '40px';
controls.appendChild(label);
controls.appendChild(colorpicker);
canvas.calcOffset();
colorpicker.onchange = function() {
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject || activeGroup) {
(activeObject || activeGroup).set('fill', this.value);
canvas.renderAll();
}
};
})();
}
var lockHorizontallyEl = document.getElementById('lock-horizontally');