eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added Color Picker for selecting RGBA values in modules (#1095)

Browse Source 
* Added Color Picker for selecting RGBA values in modules

* added scripts from node_modules

* selector-all added and alpha removed for some modules

* Modified description
This commit is contained in:
aashna27
2019-06-16 23:08:51 +05:30
committed by Jeffrey Warren
parent e1e9d57d7a
commit b34ec00efd
17 changed files with 2052 additions and 2017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
examples/lib/defaultHtmlStepUi.js
View File

@@ -81,35 +81,52 @@ function DefaultHtmlStepUi(_sequencer, options) {
var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {};
if (!isInput) {
html += '<span class="output"></span>';
} else if (inputDesc.type.toLowerCase() == 'select') {
}
else if (inputDesc.type.toLowerCase() == 'select') {
html += '<select class="form-control target" name="' + paramName + '">';
for (var option in inputDesc.values) {
html += '<option>' + inputDesc.values[option] + '</option>';
}
html += '</select>';
} else {
}
else {
let paramVal = step.options[paramName] || inputDesc.default;
html =
'<input class="form-control target" type="' +
inputDesc.type +
'" name="' +
paramName +
'" value="' +
paramVal +
'" placeholder ="' +
(inputDesc.placeholder || '');
if (inputDesc.type.toLowerCase() == 'range') {
html +=
'"min="' +
inputDesc.min +
'"max="' +
inputDesc.max +
'"step="' +
(inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
if (inputDesc.id == 'color-picker') { // separate input field for color-picker
html +=
'<div id="color-picker" class="input-group colorpicker-component">' +
'<input class="form-control target" type="' +
inputDesc.type +
'" name="' +
paramName +
'" value="' +
paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
'</div>';
}
else { // use this if the the field isn't color-picker
html =
'<input class="form-control target" type="' +
inputDesc.type +
'" name="' +
paramName +
'" value="' +
paramVal +
'" placeholder ="' +
(inputDesc.placeholder || '');
if (inputDesc.type.toLowerCase() == 'range') {
html +=
'"min="' +
inputDesc.min +
'"max="' +
inputDesc.max +
'"step="' +
(inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>';
}
else html += '">';
}
else html += '">';
}
var div = document.createElement('div');
@@ -169,6 +186,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
$(step.imgElement).on('click', (e) => {e.preventDefault(); });
$(step.ui.querySelectorAll('#color-picker')).colorpicker();
function saveOptions(e) {
e.preventDefault();
@@ -354,4 +372,3 @@ if(typeof window === 'undefined'){
}
module.exports = DefaultHtmlStepUi;