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 insert step button at every step

Browse Source
This commit is contained in:
divy123
2018-12-16 02:16:45 +05:30
parent 65a6b77b78
commit 537cc41b36
3 changed files with 137 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/index.html
View File

@@ -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>

18
examples/lib/defaultHtmlStepUi.js
View File

@@ -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) {
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>' +
@@ -44,18 +44,25 @@ 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>\
<button class="btn btn-success btn-lg insert-step" style="margin-left:10px;border-radius:6px" >Insert Step</button>\
</div>';
var util;
setTimeout(()=>{
util=IntermediateHtmlStepUi(_sequencer,step)
},500)
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");
@@ -158,11 +165,16 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
if (step.name != "load-image")
{
step.ui
.querySelector("div.details")
.appendChild(
parser.parseFromString(tools, "text/html").querySelector("div")
);
setTimeout(()=>{
$(step.ui.querySelectorAll(".insert-step")).on('click',()=>util.insertStep(step.ID));
},500)
}
stepsEl.appendChild(step.ui);

119
examples/lib/intermediateHtmlStepUi.js Normal file
View File

@@ -0,0 +1,119 @@
function IntermediateHtmlStepUi(_sequencer, step, options) {
function stepUI() {
return '<div class="row insertDiv">\
<div class="col-md-6" style="margin-top:5%">\
<section id="insertStep" class="panel panel-primary">\
<div class="form-inline">\
<div class="panel-body">\
<p class="info">Select a new module to add to your sequence.</p>\
<div class="row center-align radio-group">\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">\
<i class="fa fa-sun-o fa-4x"></i>\
</button>\
<p>Brightness</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">\
<i class="fa fa-adjust fa-4x"></i>\
</button>\
<p>Contrast</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">\
<i class="fa fa-tint fa-4x"></i>\
</button>\
<p>Saturation</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">\
<i class="fa fa-rotate-right fa-4x"></i>\
</button>\
<p>Rotate</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">\
<i class="fa fa-crop fa-4x"></i>\
</button>\
<p>Crop</p>\
</div>\
</div>\
<div class="center-align">\
<select class="form-control input-lg" id="selectStep">\
<!-- The default null selection has been appended manually in demo.js\
This is because the options in select are overritten when options are appended.-->\
</select>\
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
</div>\
</div>\
</div>\
</section>\
</div>';
}
function selectNewStepUi() {
var m = $("#insertStep select").val();
$("#insertStep .info").html(_sequencer.modulesInfo(m).description);
$("#insertStep #add-step-btn").prop("disabled", false);
}
insertStep = function (id) {
var modulesInfo = _sequencer.modulesInfo();
var parser = new DOMParser();
var addStepUI = stepUI();
addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
step.ui
.querySelector("div.step")
.insertAdjacentElement('afterend',
addStepUI
);
var insertStepSelect = $("#insertStep select");
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>"
);
}
$('#insertStep #add-step-btn').prop('disabled', true);
insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
$('#insertStep .radio-group .radio').on("click", function () {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
insertStepSelect.val(newStep);
selectNewStepUi();
doIt(id);
$(this).removeClass('selected');
});
$(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
$(step.ui.querySelector("#insertStep #add-step-btn")).on('click', () => doIt(id));
}
function doIt(id) {
options = options || {};
var insertStepSelect = $("#insertStep select");
if (insertStepSelect.val() == "none") return;
var newStepName = insertStepSelect.val()
$('div .insertDiv').remove();
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"];
}
_sequencer
.insertSteps("image1", id + 1, newStepName)
.run({ index: 0 });
// add to URL hash too
setUrlHashParameter("steps", _sequencer.toString());
location.reload();
}
return {
insertStep
}
}