mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 19:30:00 +01:00
Added Eslint and husky (#1062)
This commit is contained in:
aashna27
Jeffrey Warren
@@ -4,11 +4,11 @@ var setupCache = function() {
|
||||
.then(function(registration) {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
console.log(installingWorker)
|
||||
console.log(installingWorker);
|
||||
if (installingWorker.state === 'installed') {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
console.log('Registration successful, scope is:', registration.scope);
|
||||
})
|
||||
.catch(function(error) {
|
||||
@@ -19,12 +19,12 @@ var setupCache = function() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
caches.keys().then(function(cacheNames) {
|
||||
cacheNames.forEach(function(cacheName) {
|
||||
$("#clear-cache").append(" " + cacheName);
|
||||
$('#clear-cache').append(' ' + cacheName);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$("#clear-cache").click(function() {
|
||||
$('#clear-cache').click(function() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
caches.keys().then(function(cacheNames) {
|
||||
cacheNames.forEach(function(cacheName) {
|
||||
@@ -34,6 +34,6 @@ var setupCache = function() {
|
||||
}
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = setupCache;
|
||||
|
||||
@@ -2,50 +2,50 @@ var urlHash = require('./urlHash.js');
|
||||
function DefaultHtmlSequencerUi(_sequencer, options) {
|
||||
|
||||
options = options || {};
|
||||
var addStepSel = options.addStepSel = options.addStepSel || "#addStep";
|
||||
var removeStepSel = options.removeStepSel = options.removeStepSel || "button.remove";
|
||||
var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
|
||||
var addStepSel = options.addStepSel = options.addStepSel || '#addStep';
|
||||
var removeStepSel = options.removeStepSel = options.removeStepSel || 'button.remove';
|
||||
var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';
|
||||
|
||||
function onLoad() {
|
||||
importStepsFromUrlHash();
|
||||
if ($('#selectStep').val()==='none')
|
||||
$(addStepSel + " #add-step-btn").prop("disabled", true);
|
||||
handleSaveSequence();
|
||||
$(addStepSel + ' #add-step-btn').prop('disabled', true);
|
||||
handleSaveSequence();
|
||||
}
|
||||
|
||||
// look up needed steps from Url Hash:
|
||||
function importStepsFromUrlHash() {
|
||||
var hash = urlHash.getUrlHashParameter("steps");
|
||||
var hash = urlHash.getUrlHashParameter('steps');
|
||||
|
||||
if (hash) {
|
||||
_sequencer.importString(hash);
|
||||
_sequencer.run({ index: 0 });
|
||||
}
|
||||
urlHash.setUrlHashParameter("steps", sequencer.toString());
|
||||
urlHash.setUrlHashParameter('steps', sequencer.toString());
|
||||
}
|
||||
|
||||
function selectNewStepUi() {
|
||||
var m = $(addStepSel + " select").val();
|
||||
var m = $(addStepSel + ' select').val();
|
||||
if(!m) m = arguments[0];
|
||||
$(addStepSel + " .info").html(_sequencer.modulesInfo(m).description);
|
||||
$(addStepSel + " #add-step-btn").prop("disabled", false);
|
||||
$(addStepSel + ' .info').html(_sequencer.modulesInfo(m).description);
|
||||
$(addStepSel + ' #add-step-btn').prop('disabled', false);
|
||||
}
|
||||
|
||||
function removeStepUi() {
|
||||
var index = $(removeStepSel).index(this) + 1;
|
||||
sequencer.removeSteps(index).run({ index: index - 1 });
|
||||
// remove from URL hash too
|
||||
urlHash.setUrlHashParameter("steps", sequencer.toString());
|
||||
urlHash.setUrlHashParameter('steps', sequencer.toString());
|
||||
//disable save-sequence button if all steps are removed
|
||||
handleSaveSequence();
|
||||
}
|
||||
|
||||
function addStepUi() {
|
||||
if ($(addStepSel + " select").val() == "none") return;
|
||||
if ($(addStepSel + ' select').val() == 'none') return;
|
||||
var newStepName;
|
||||
if(typeof arguments[0] !== "string")
|
||||
newStepName = $(addStepSel + " select option").html().toLowerCase();
|
||||
else newStepName = arguments[0]
|
||||
if(typeof arguments[0] !== 'string')
|
||||
newStepName = $(addStepSel + ' select option').html().toLowerCase();
|
||||
else newStepName = arguments[0];
|
||||
|
||||
|
||||
/*
|
||||
@@ -56,28 +56,28 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
|
||||
var sequenceLength = 1;
|
||||
if (sequencer.sequences[newStepName]) {
|
||||
sequenceLength = sequencer.sequences[newStepName].length;
|
||||
} else if (sequencer.modules[newStepName][1]["length"]) {
|
||||
sequenceLength = sequencer.modules[newStepName][1]["length"];
|
||||
} else if (sequencer.modules[newStepName][1]['length']) {
|
||||
sequenceLength = sequencer.modules[newStepName][1]['length'];
|
||||
}
|
||||
_sequencer
|
||||
.addSteps(newStepName, options)
|
||||
.run({ index: _sequencer.steps.length - sequenceLength - 1 });
|
||||
$(addStepSel + " .info").html("Select a new module to add to your sequence.");
|
||||
$(addStepSel + " select").val("none");
|
||||
$(addStepSel + ' .info').html('Select a new module to add to your sequence.');
|
||||
$(addStepSel + ' select').val('none');
|
||||
|
||||
//enable save-sequence button if disabled initially
|
||||
handleSaveSequence();
|
||||
|
||||
// add to URL hash too
|
||||
urlHash.setUrlHashParameter("steps", _sequencer.toString())
|
||||
urlHash.setUrlHashParameter('steps', _sequencer.toString());
|
||||
}
|
||||
|
||||
function handleSaveSequence(){
|
||||
var stepCount=sequencer.steps.length;
|
||||
if(stepCount<2)
|
||||
$(" #save-seq").prop("disabled", true);
|
||||
$(' #save-seq').prop('disabled', true);
|
||||
else
|
||||
$(" #save-seq").prop("disabled", false);
|
||||
$(' #save-seq').prop('disabled', false);
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -86,7 +86,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
|
||||
selectNewStepUi: selectNewStepUi,
|
||||
removeStepUi: removeStepUi,
|
||||
addStepUi: addStepUi
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = DefaultHtmlSequencerUi;
|
||||
|
||||
@@ -16,8 +16,8 @@ var mapHtmlTypes = require('./mapHtmltypes');
|
||||
function DefaultHtmlStepUi(_sequencer, options) {
|
||||
|
||||
options = options || {};
|
||||
var stepsEl = options.stepsEl || document.querySelector("#steps");
|
||||
var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
|
||||
var stepsEl = options.stepsEl || document.querySelector('#steps');
|
||||
var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';
|
||||
|
||||
function onSetup(step, stepOptions) {
|
||||
if (step.options && step.options.description)
|
||||
@@ -39,7 +39,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
<div class="row step">\
|
||||
<div class="col-md-4 details container-fluid">\
|
||||
<div class="cal collapse in"><p>' +
|
||||
'<i>' + (step.description || "") + '</i>' +
|
||||
'<i>' + (step.description || '') + '</i>' +
|
||||
'</p></div>\
|
||||
</div>\
|
||||
<div class="col-md-8 cal collapse in step-column">\
|
||||
@@ -65,10 +65,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
var util = intermediateHtmlStepUi(_sequencer, step);
|
||||
|
||||
var parser = new DOMParser();
|
||||
step.ui = parser.parseFromString(step.ui, "text/html");
|
||||
step.ui = step.ui.querySelector("div.container-fluid");
|
||||
step.linkElements = step.ui.querySelectorAll("a");
|
||||
step.imgElement = step.ui.querySelector("a img.img-thumbnail");
|
||||
step.ui = parser.parseFromString(step.ui, 'text/html');
|
||||
step.ui = step.ui.querySelector('div.container-fluid');
|
||||
step.linkElements = step.ui.querySelectorAll('a');
|
||||
step.imgElement = step.ui.querySelector('a img.img-thumbnail');
|
||||
|
||||
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
|
||||
var inputs = _sequencer.modulesInfo(step.name).inputs;
|
||||
@@ -77,16 +77,16 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
|
||||
for (var paramName in merged) {
|
||||
var isInput = inputs.hasOwnProperty(paramName);
|
||||
var html = "";
|
||||
var html = '';
|
||||
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 += '<option>' + inputDesc.values[option] + '</option>';
|
||||
}
|
||||
html += "</select>";
|
||||
html += '</select>';
|
||||
} else {
|
||||
let paramVal = step.options[paramName] || inputDesc.default;
|
||||
html =
|
||||
@@ -97,9 +97,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
'" value="' +
|
||||
paramVal +
|
||||
'" placeholder ="' +
|
||||
(inputDesc.placeholder || "");
|
||||
(inputDesc.placeholder || '');
|
||||
|
||||
if (inputDesc.type.toLowerCase() == "range") {
|
||||
if (inputDesc.type.toLowerCase() == 'range') {
|
||||
html +=
|
||||
'"min="' +
|
||||
inputDesc.min +
|
||||
@@ -112,76 +112,76 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
else html += '">';
|
||||
}
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.className = "row";
|
||||
div.setAttribute("name", paramName);
|
||||
var div = document.createElement('div');
|
||||
div.className = 'row';
|
||||
div.setAttribute('name', paramName);
|
||||
var description = inputs[paramName].desc || paramName;
|
||||
div.innerHTML =
|
||||
"<div class='det cal collapse in'>\
|
||||
<label for='" +
|
||||
'<div class=\'det cal collapse in\'>\
|
||||
<label for=\'' +
|
||||
paramName +
|
||||
"'>" +
|
||||
'\'>' +
|
||||
description +
|
||||
"</label>\
|
||||
" +
|
||||
'</label>\
|
||||
' +
|
||||
html +
|
||||
"\
|
||||
</div>";
|
||||
step.ui.querySelector("div.details").appendChild(div);
|
||||
'\
|
||||
</div>';
|
||||
step.ui.querySelector('div.details').appendChild(div);
|
||||
}
|
||||
$(step.ui.querySelector("div.panel-footer")).append(
|
||||
$(step.ui.querySelector('div.panel-footer')).append(
|
||||
'<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
|
||||
);
|
||||
$(step.ui.querySelector("div.panel-footer")).prepend(
|
||||
$(step.ui.querySelector('div.panel-footer')).prepend(
|
||||
'<button class="pull-right btn btn-default btn-sm insert-step" >\
|
||||
<span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span>\
|
||||
</button>'
|
||||
);
|
||||
}
|
||||
|
||||
if (step.name != "load-image") {
|
||||
if (step.name != 'load-image') {
|
||||
step.ui
|
||||
.querySelector("div.trash-container")
|
||||
.querySelector('div.trash-container')
|
||||
.prepend(
|
||||
parser.parseFromString(tools, "text/html").querySelector("div")
|
||||
parser.parseFromString(tools, 'text/html').querySelector('div')
|
||||
);
|
||||
$(step.ui.querySelectorAll(".remove")).on('click', function() {notify('Step Removed','remove-notification')});
|
||||
$(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
|
||||
$(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed','remove-notification');});
|
||||
$(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });
|
||||
// Insert the step's UI in the right place
|
||||
if (stepOptions.index == _sequencer.steps.length) {
|
||||
stepsEl.appendChild(step.ui);
|
||||
$("#steps .step-container:nth-last-child(1) .insert-step").prop('disabled',true);
|
||||
if($("#steps .step-container:nth-last-child(2)"))
|
||||
$("#steps .step-container:nth-last-child(2) .insert-step").prop('disabled',false);
|
||||
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true);
|
||||
if($('#steps .step-container:nth-last-child(2)'))
|
||||
$('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled',false);
|
||||
} else {
|
||||
stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#load-image").append(step.ui);
|
||||
$('#load-image').append(step.ui);
|
||||
}
|
||||
$(step.ui.querySelector(".toggle")).on("click", () => {
|
||||
$(step.ui.querySelector('.toggle')).on('click', () => {
|
||||
$(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
|
||||
$(step.ui.querySelectorAll(".cal")).collapse('toggle');
|
||||
$(step.ui.querySelectorAll('.cal')).collapse('toggle');
|
||||
});
|
||||
|
||||
$(step.imgElement).on("mousemove", _.debounce(() => imageHover(step), 150));
|
||||
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
|
||||
|
||||
function saveOptions(e) {
|
||||
e.preventDefault();
|
||||
if (optionsChanged){
|
||||
$(step.ui.querySelector("div.details"))
|
||||
.find("input,select")
|
||||
$(step.ui.querySelector('div.details'))
|
||||
.find('input,select')
|
||||
.each(function(i, input) {
|
||||
$(input)
|
||||
.data('initValue', $(input).val())
|
||||
.data('hasChangedBefore', false);
|
||||
step.options[$(input).attr("name")] = $(input).val();
|
||||
step.options[$(input).attr('name')] = $(input).val();
|
||||
});
|
||||
_sequencer.run({ index: step.index - 1 });
|
||||
|
||||
// modify the url hash
|
||||
urlHash.setUrlHashParameter("steps", _sequencer.toString())
|
||||
urlHash.setUrlHashParameter('steps', _sequencer.toString());
|
||||
// disable the save button
|
||||
$(step.ui.querySelector('.btn-save')).prop('disabled', true);
|
||||
optionsChanged = false;
|
||||
@@ -214,32 +214,32 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
$(this).val(),
|
||||
$(this).data('initValue'),
|
||||
$(this).data('hasChangedBefore')
|
||||
)
|
||||
)
|
||||
})
|
||||
})
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('input[type="range"]').on('input', function() {
|
||||
$(this).next().html($(this).val());
|
||||
})
|
||||
$(this).next().html($(this).val());
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function onDraw(step) {
|
||||
$(step.ui.querySelector(".load")).show();
|
||||
$(step.ui.querySelector("img")).hide();
|
||||
$(step.ui.querySelectorAll(".load-spin")).show();
|
||||
$(step.ui.querySelector('.load')).show();
|
||||
$(step.ui.querySelector('img')).hide();
|
||||
$(step.ui.querySelectorAll('.load-spin')).show();
|
||||
}
|
||||
|
||||
function onComplete(step) {
|
||||
$(step.ui.querySelector("img")).show();
|
||||
$(step.ui.querySelectorAll(".load-spin")).hide();
|
||||
$(step.ui.querySelector(".load")).hide();
|
||||
$(step.ui.querySelector('img')).show();
|
||||
$(step.ui.querySelectorAll('.load-spin')).hide();
|
||||
$(step.ui.querySelector('.load')).hide();
|
||||
|
||||
step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output;
|
||||
var imgthumbnail = step.ui.querySelector(".img-thumbnail");
|
||||
step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
|
||||
var imgthumbnail = step.ui.querySelector('.img-thumbnail');
|
||||
for (let index = 0; index < step.linkElements.length; index++) {
|
||||
if (step.linkElements[index].contains(imgthumbnail))
|
||||
step.linkElements[index].href = step.imgElement.src;
|
||||
@@ -247,13 +247,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
|
||||
// TODO: use a generalized version of this
|
||||
function fileExtension(output) {
|
||||
return output.split("/")[1].split(";")[0];
|
||||
return output.split('/')[1].split(';')[0];
|
||||
}
|
||||
|
||||
for (let index = 0; index < step.linkElements.length; index++) {
|
||||
|
||||
step.linkElements[index].download = step.name + "." + fileExtension(step.imgElement.src);
|
||||
step.linkElements[index].target = "_blank";
|
||||
step.linkElements[index].download = step.name + '.' + fileExtension(step.imgElement.src);
|
||||
step.linkElements[index].target = '_blank';
|
||||
}
|
||||
|
||||
// fill inputs with stored step options
|
||||
@@ -262,11 +262,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
var outputs = _sequencer.modulesInfo(step.name).outputs;
|
||||
for (var i in inputs) {
|
||||
if (step.options[i] !== undefined) {
|
||||
if (inputs[i].type.toLowerCase() === "input")
|
||||
if (inputs[i].type.toLowerCase() === 'input')
|
||||
$(step.ui.querySelector('div[name="' + i + '"] input'))
|
||||
.val(step.options[i])
|
||||
.data('initValue', step.options[i]);
|
||||
if (inputs[i].type.toLowerCase() === "select")
|
||||
if (inputs[i].type.toLowerCase() === 'select')
|
||||
$(step.ui.querySelector('div[name="' + i + '"] select'))
|
||||
.val(step.options[i])
|
||||
.data('initValue', step.options[i]);
|
||||
@@ -295,13 +295,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
var xPos = e.pageX - offset.left;
|
||||
var yPos = e.pageY - offset.top;
|
||||
var myData = context.getImageData(xPos, yPos, 1, 1);
|
||||
img[0].title = "rgb: " +myData.data[0]+","+ myData.data[1]+","+myData.data[2];//+ rgbdata;
|
||||
img[0].title = 'rgb: ' +myData.data[0]+','+ myData.data[1]+','+myData.data[2];//+ rgbdata;
|
||||
});
|
||||
}
|
||||
|
||||
function onRemove(step) {
|
||||
step.ui.remove();
|
||||
$("#steps .step-container:nth-last-child(1) .insert-step").prop('disabled',true);
|
||||
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true);
|
||||
$('div[class*=imgareaselect-]').remove();
|
||||
}
|
||||
|
||||
@@ -314,7 +314,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
var notification = document.createElement('span');
|
||||
notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
|
||||
notification.id = id;
|
||||
notification.classList.add("notification");
|
||||
notification.classList.add('notification');
|
||||
|
||||
$('body').append(notification);
|
||||
}
|
||||
@@ -331,13 +331,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
|
||||
onDraw: onDraw,
|
||||
notify: notify,
|
||||
imageHover: imageHover
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if(typeof window === "undefined"){
|
||||
if(typeof window === 'undefined'){
|
||||
module.exports={
|
||||
DefaultHtmlStepUi: DefaultHtmlStepUi
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = DefaultHtmlStepUi;
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
function generatePreview(previewStepName, customValues, path, selector) {
|
||||
|
||||
var previewSequencer = ImageSequencer();
|
||||
function insertPreview(src) {
|
||||
var img = document.createElement('img');
|
||||
img.classList.add('img-thumbnail')
|
||||
img.classList.add('no-border');
|
||||
img.src = src;
|
||||
$(img).css("max-width", "200%");
|
||||
$(img).css("transform", "translateX(-20%)");
|
||||
$(selector + ' .radio-group').find('div').each(function() {
|
||||
if ($(this).find('div').attr('data-value') === previewStepName) {
|
||||
$(this).find('div').append(img);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadPreview() {
|
||||
if (previewStepName === "crop") {
|
||||
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
|
||||
var previewSequencer = ImageSequencer();
|
||||
function insertPreview(src) {
|
||||
var img = document.createElement('img');
|
||||
img.classList.add('img-thumbnail');
|
||||
img.classList.add('no-border');
|
||||
img.src = src;
|
||||
$(img).css('max-width', '200%');
|
||||
$(img).css('transform', 'translateX(-20%)');
|
||||
$(selector + ' .radio-group').find('div').each(function() {
|
||||
if ($(this).find('div').attr('data-value') === previewStepName) {
|
||||
$(this).find('div').append(img);
|
||||
}
|
||||
else {
|
||||
previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
|
||||
}
|
||||
}
|
||||
previewSequencer.loadImage(path, loadPreview);
|
||||
}
|
||||
|
||||
function updatePreviews(src, selector) {
|
||||
$(selector+' img').remove();
|
||||
|
||||
var previewSequencerSteps = {
|
||||
"resize": "125%",
|
||||
"brightness": "175",
|
||||
"saturation": "0.5",
|
||||
"rotate": 90,
|
||||
"contrast": 90,
|
||||
"crop": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": "(50%)",
|
||||
"h": "(50%)",
|
||||
"noUI": true
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(previewSequencerSteps).forEach(function (step, index) {
|
||||
generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
|
||||
});
|
||||
}
|
||||
|
||||
function loadPreview() {
|
||||
if (previewStepName === 'crop') {
|
||||
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
|
||||
}
|
||||
else {
|
||||
previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
|
||||
}
|
||||
}
|
||||
previewSequencer.loadImage(path, loadPreview);
|
||||
}
|
||||
|
||||
function updatePreviews(src, selector) {
|
||||
$(selector+' img').remove();
|
||||
|
||||
var previewSequencerSteps = {
|
||||
'resize': '125%',
|
||||
'brightness': '175',
|
||||
'saturation': '0.5',
|
||||
'rotate': 90,
|
||||
'contrast': 90,
|
||||
'crop': {
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'w': '(50%)',
|
||||
'h': '(50%)',
|
||||
'noUI': true
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(previewSequencerSteps).forEach(function (step, index) {
|
||||
generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
generatePreview : generatePreview,
|
||||
updatePreviews : updatePreviews
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
var urlHash = require('./urlHash.js'),
|
||||
insertPreview = require('./insertPreview.js');
|
||||
insertPreview = require('./insertPreview.js');
|
||||
|
||||
function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
function stepUI() {
|
||||
@@ -66,52 +66,52 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
|
||||
|
||||
function selectNewStepUi() {
|
||||
var insertSelect = $(step.ui.querySelector('.insert-step-select'))
|
||||
var insertSelect = $(step.ui.querySelector('.insert-step-select'));
|
||||
var m = insertSelect.val();
|
||||
$(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
|
||||
$(step.ui.querySelector('.insertDiv .add-step-btn')).prop("disabled", false);
|
||||
$(step.ui.querySelector('.insertDiv .add-step-btn')).prop('disabled', false);
|
||||
}
|
||||
|
||||
|
||||
var toggleDiv = function(callback = function(){}){
|
||||
$(step.ui.querySelector('.insertDiv')).collapse('toggle');
|
||||
if ($(step.ui.querySelector('.insert-text')).css('display') != "none"){
|
||||
$(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback)})
|
||||
if ($(step.ui.querySelector('.insert-text')).css('display') != 'none'){
|
||||
$(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback);});
|
||||
}
|
||||
else {
|
||||
$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback)})
|
||||
$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
insertStep = function (id) {
|
||||
var modulesInfo = _sequencer.modulesInfo();
|
||||
var parser = new DOMParser();
|
||||
var addStepUI = stepUI();
|
||||
addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
|
||||
addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
|
||||
|
||||
if ($(step.ui.querySelector('.insertDiv')).length > 0){
|
||||
toggleDiv();
|
||||
}
|
||||
else {
|
||||
step.ui
|
||||
.querySelector("div.step")
|
||||
.insertAdjacentElement('afterend',
|
||||
addStepUI
|
||||
);
|
||||
.querySelector('div.step')
|
||||
.insertAdjacentElement('afterend',
|
||||
addStepUI
|
||||
);
|
||||
toggleDiv(function(){
|
||||
insertPreview.updatePreviews(step.output, '.insertDiv');
|
||||
});
|
||||
}
|
||||
|
||||
$(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){})});
|
||||
$(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
|
||||
|
||||
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
|
||||
insertStepSelect.html("");
|
||||
insertStepSelect.html('');
|
||||
// Add modules to the insertStep dropdown
|
||||
for (var m in modulesInfo) {
|
||||
if (modulesInfo[m] !== undefined)
|
||||
insertStepSelect.append(
|
||||
'<option value="' + m + '">' + modulesInfo[m].name + "</option>"
|
||||
'<option value="' + m + '">' + modulesInfo[m].name + '</option>'
|
||||
);
|
||||
}
|
||||
insertStepSelect.selectize({
|
||||
@@ -120,7 +120,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
$(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
|
||||
|
||||
insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
|
||||
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on("click", function () {
|
||||
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
|
||||
$(this).parent().find('.radio').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
newStep = $(this).attr('data-value');
|
||||
@@ -130,34 +130,34 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
|
||||
$(this).removeClass('selected');
|
||||
});
|
||||
insertStepSelect.on('change', selectNewStepUi);
|
||||
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id) });
|
||||
}
|
||||
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
|
||||
};
|
||||
|
||||
function insert(id) {
|
||||
|
||||
options = options || {};
|
||||
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
|
||||
if (insertStepSelect.val() == "none") return;
|
||||
if (insertStepSelect.val() == 'none') return;
|
||||
|
||||
var newStepName = insertStepSelect.val()
|
||||
var newStepName = insertStepSelect.val();
|
||||
toggleDiv();
|
||||
var sequenceLength = 1;
|
||||
if (sequencer.sequences[newStepName]) {
|
||||
sequenceLength = sequencer.sequences[newStepName].length;
|
||||
} else if (sequencer.modules[newStepName][1]["length"]) {
|
||||
sequenceLength = sequencer.modules[newStepName][1]["length"];
|
||||
} else if (sequencer.modules[newStepName][1]['length']) {
|
||||
sequenceLength = sequencer.modules[newStepName][1]['length'];
|
||||
}
|
||||
_sequencer
|
||||
.insertSteps(id + 1, newStepName).run({ index: id });
|
||||
|
||||
// add to URL hash too
|
||||
urlHash.setUrlHashParameter("steps", _sequencer.toString());
|
||||
urlHash.setUrlHashParameter('steps', _sequencer.toString());
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
insertStep
|
||||
}
|
||||
};
|
||||
}
|
||||
module.exports = IntermediateHtmlStepUi;
|
||||
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
function mapHtmlTypes(inputInfo){
|
||||
var htmlType;
|
||||
switch(inputInfo.type.toLowerCase()){
|
||||
case 'integer':
|
||||
htmlType = inputInfo.min != undefined ? 'range' : 'number';
|
||||
break;
|
||||
case 'string':
|
||||
htmlType = 'text';
|
||||
break;
|
||||
case 'select':
|
||||
htmlType = 'select';
|
||||
break;
|
||||
case 'percentage':
|
||||
htmlType = 'number';
|
||||
break;
|
||||
case 'float':
|
||||
htmlType = inputInfo.min != undefined ? 'range' : 'text';
|
||||
break;
|
||||
default:
|
||||
htmlType = 'text';
|
||||
break;
|
||||
case 'integer':
|
||||
htmlType = inputInfo.min != undefined ? 'range' : 'number';
|
||||
break;
|
||||
case 'string':
|
||||
htmlType = 'text';
|
||||
break;
|
||||
case 'select':
|
||||
htmlType = 'select';
|
||||
break;
|
||||
case 'percentage':
|
||||
htmlType = 'number';
|
||||
break;
|
||||
case 'float':
|
||||
htmlType = inputInfo.min != undefined ? 'range' : 'text';
|
||||
break;
|
||||
default:
|
||||
htmlType = 'text';
|
||||
break;
|
||||
}
|
||||
var response = inputInfo;
|
||||
response.type = htmlType;
|
||||
|
||||
@@ -42,8 +42,8 @@ function setUrlHashParameter(param, value) {
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getUrlHashParameter: getUrlHashParameter,
|
||||
setUrlHashParameter: setUrlHashParameter,
|
||||
getUrlHashParameters: getUrlHashParameters,
|
||||
setUrlHashParameters: setUrlHashParameters
|
||||
}
|
||||
getUrlHashParameter: getUrlHashParameter,
|
||||
setUrlHashParameter: setUrlHashParameter,
|
||||
getUrlHashParameters: getUrlHashParameters,
|
||||
setUrlHashParameters: setUrlHashParameters
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user