Skip to content

Commit

Permalink
Merge pull request #545 from Divy123/add-step-btn
Browse files Browse the repository at this point in the history 
Added insert step button at every step
  • Loading branch information
@tech4GT
tech4GT authored Dec 17, 2018
2 parents a56e8a3 + 6bab70a commit 23f4851
Show file tree
Hide file tree
Showing 9 changed files with 12,709 additions and 12,579 deletions.
24,907 changes: 12,457 additions & 12,450 deletions dist/image-sequencer.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/image-sequencer.min.js
View file

Large diffs are not rendered by default.

48 changes: 25 additions & 23 deletions examples/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@ window.onload = function() {
$(img).css("max-width", "200%");
$(img).css("transform", "translateX(-20%)");
var stepDiv = $('#addStep .row').find('div').each(function() {
if($(this).find('div').attr('data-value') === previewStepName) {
if ($(this).find('div').attr('data-value') === previewStepName) {
$(this).find('div').append(img);
}
});
}
function loadPreview() {
previewSequencer = previewSequencer.addSteps('resize', {resize:"40%"});
previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });

if(previewStepName === "crop") {
if (previewStepName === "crop") {
console.log(customValues);
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
}
else {
previewSequencer.addSteps(previewStepName, {[previewStepName]: customValues}).run(insertPreview);
previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
}
}
previewSequencer.loadImage(path, loadPreview);
Expand All @@ -35,15 +35,17 @@ window.onload = function() {
function refreshOptions() {
// Load information of all modules (Name, Inputs, Outputs)
var modulesInfo = sequencer.modulesInfo();
console.log(modulesInfo)

var addStepSelect = $("#addStep select");
addStepSelect.html("");

// Add modules to the addStep dropdown
for (var m in modulesInfo) {
addStepSelect.append(
'<option value="' + m + '">' + modulesInfo[m].name + "</option>"
);
if (modulesInfo[m] && modulesInfo[m].name)
addStepSelect.append(
'<option value="' + m + '">' + modulesInfo[m].name + "</option>"
);
}
// Null option
addStepSelect.append('<option value="none" disabled selected>More modules...</option>');
Expand All @@ -67,7 +69,7 @@ window.onload = function() {
$("#addStep #add-step-btn").on("click", ui.addStepUi);

//Module button radio selection
$('.radio-group .radio').on("click", function(){
$('.radio-group .radio').on("click", function() {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
Expand Down Expand Up @@ -121,7 +123,7 @@ window.onload = function() {
}

gifshot.createGIF(options, function(obj) {
if(!obj.error) {
if (!obj.error) {
// Final gif encoded with base64 format
var image = obj.image;
var animatedImage = document.createElement('img');
Expand Down Expand Up @@ -157,7 +159,7 @@ window.onload = function() {
}
});
}
catch(e) {
catch (e) {
console.error(e);
button.disabled = false;
isWorkingOnGifGeneration = false;
Expand Down Expand Up @@ -197,22 +199,22 @@ window.onload = function() {
}

if ('serviceWorker' in navigator) {
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
$("#clear-cache").append(" " + cacheName);
});
});
}
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
$("#clear-cache").append(" " + cacheName);
});
});
}

$("#clear-cache").click(function() {
if ('serviceWorker' in navigator) {
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
caches.delete(cacheName);
});
if ('serviceWorker' in navigator) {
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
caches.delete(cacheName);
});
}
location.reload();
});
}
location.reload();
});

function updatePreviews(src) {
Expand Down
1 change: 1 addition & 0 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<script src="lib/urlHash.js" charset="utf-8"></script>
<script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
<script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
<script src="lib/intermediateHtmlStepUi.js" charset="utf-8"></script>
<script src="demo.js" charset="utf-8"></script>
<!-- for crop module: -->
<script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
Expand Down
89 changes: 52 additions & 37 deletions examples/lib/defaultHtmlStepUi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
options = options || {};
var stepsEl = options.stepsEl || document.querySelector("#steps");
var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";

function onSetup(step) {
function onSetup(step, stepOptions) {
if (step.options && step.options.description)
step.description = step.options.description;

step.ui =
'\
<div class="container">\
<div class="row step">\
<div class="col-md-4 details">\
<h3>' +
Expand All @@ -44,18 +44,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
<a><img alt="" style="max-width=100%" class="img-thumbnail" /></a>\
</div>\
</div>\
';
</div>\
</div>';

var tools =
'<div class="tools btn-group">\
<button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\
<i class="fa fa-trash"></i>\
</button>\
</div>';
<button class="btn insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
<i class="fa fa-plus"></i> Add\
</button>\
</div>';

var util = IntermediateHtmlStepUi(_sequencer, step);

var parser = new DOMParser();
step.ui = parser.parseFromString(step.ui, "text/html");
step.ui = step.ui.querySelector("div.row");
step.ui = step.ui.querySelector("div.container");
step.linkElements = step.ui.querySelectorAll("a");
step.imgElement = step.ui.querySelector("a img");

Expand All @@ -77,7 +83,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
html += "</select>";
} else {
let paramVal = step.options[paramName] || inputDesc.default;
let paramVal = step.options[paramName] || inputDesc.default;
html =
'<input class="form-control target" type="' +
inputDesc.type +
Expand All @@ -87,19 +93,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
paramVal +
'" placeholder ="' +
(inputDesc.placeholder || "");

if(inputDesc.type.toLowerCase() == "range")
{
html+=
'"min="'+

if (inputDesc.type.toLowerCase() == "range") {
html +=
'"min="' +
inputDesc.min +
'"max="'+
'"max="' +
inputDesc.max +
'"step="' +
inputDesc.step + '">'+'<span>'+paramVal+'</span>';
inputDesc.step + '">' + '<span>' + paramVal + '</span>';

}
else html+= '">';
}
else html += '">';
}

var div = document.createElement("div");
Expand All @@ -122,18 +127,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui.querySelector("div.details").appendChild(div);
}

function toggleSaveButton(){
$(step.ui.querySelector("div.details .btn-save")).prop("disabled",false);
function toggleSaveButton() {
$(step.ui.querySelector("div.details .btn-save")).prop("disabled", false);
focusInput();
}

$(step.ui.querySelectorAll(".target")).on('change',toggleSaveButton);
$(step.ui.querySelectorAll(".target")).on('change', toggleSaveButton);

$(step.ui.querySelector("div.details")).append(
"<p><button class='btn btn-default btn-save' disabled = 'true' >Apply</button><span> Press apply to see changes</span></p>"
);

function focusInput(){
function focusInput() {
$(step.ui.querySelector("div.details .target")).focus();
}

Expand All @@ -149,33 +154,42 @@ function DefaultHtmlStepUi(_sequencer, options) {
// modify the url hash
setUrlHashParameter("steps", _sequencer.toString());
// disable the save button
$(step.ui.querySelector("div.details .btn-save")).prop("disabled",true);
$(step.ui.querySelector("div.details .btn-save")).prop("disabled", true);
}

// on clicking Save in the details pane of the step
$(step.ui.querySelector("div.details .btn-save")).click(saveOptions);
$(step.ui.querySelector("div.details .input-form")).on('submit', saveOptions);
}

if (step.name != "load-image"){
if (step.name != "load-image") {
step.ui
.querySelector("div.details")
.appendChild(
parser.parseFromString(tools, "text/html").querySelector("div")
);
$(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });

stepsEl.appendChild(step.ui);
// Insert the step's UI in the right place
if (stepOptions.index == _sequencer.images.image1.steps.length) {
stepsEl.appendChild(step.ui);
$("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
if($("#steps .container:nth-last-child(2)"))
$("#steps .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);
}

var inputs = document.querySelectorAll('input[type="range"]')
for(i in inputs)
}

var inputs = document.querySelectorAll('input[type="range"]')
for (i in inputs)
inputs[i].oninput = function(e) {
e.target.nextSibling.innerHTML = e.target.value;
}
}

function onDraw(step) {
$(step.ui.querySelector(".load")).show();
Expand All @@ -188,8 +202,8 @@ function DefaultHtmlStepUi(_sequencer, options) {

step.imgElement.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))
for (let index = 0; index < step.linkElements.length; index++) {
if (step.linkElements[index].contains(imgthumbnail))
step.linkElements[index].href = step.output;
}

Expand All @@ -198,7 +212,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
return output.split("/")[1].split(";")[0];
}

for(let index=0; index < step.linkElements.length; index++) {
for (let index = 0; index < step.linkElements.length; index++) {
step.linkElements[index].download = step.name + "." + fileExtension(step.output);
step.linkElements[index].target = "_blank";
}
Expand All @@ -209,13 +223,13 @@ 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")
step.ui.querySelector('div[name="' + i + '"] input').value =
step.options[i];
if (inputs[i].type.toLowerCase() === "select")
step.ui.querySelector('div[name="' + i + '"] select').value =
step.options[i];
}
if (inputs[i].type.toLowerCase() === "input")
step.ui.querySelector('div[name="' + i + '"] input').value =
step.options[i];
if (inputs[i].type.toLowerCase() === "select")
step.ui.querySelector('div[name="' + i + '"] select').value =
step.options[i];
}
}
for (var i in outputs) {
if (step[i] !== undefined)
Expand All @@ -227,6 +241,7 @@ function DefaultHtmlStepUi(_sequencer, options) {

function onRemove(step) {
step.ui.remove();
$("#steps .container:nth-last-child(1) .insert-step").prop('disabled',true);
}

function getPreview() {
Expand All @@ -240,4 +255,4 @@ function DefaultHtmlStepUi(_sequencer, options) {
onRemove: onRemove,
onDraw: onDraw
}
}
}
Loading

0 comments on commit 23f4851

Please sign in to comment.