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

Fix insert step and allow "closing" it (#655)

Browse Source 
* update dist

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

dist update

Revert "dist update"

This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d.

* fix insert step button

* add icon

* add dist

* use normal functions

* use normal functions

* no lag

* changes

* changes

* changes

* Update intermediateHtmlStepUi.js

* toggleDiv global

- Globalised toggleDiv
- toggleDiv has default callback which does nothing.
This commit is contained in:
Harsh Khandeparkar
2019-04-06 00:38:42 +05:30
committed by Jeffrey Warren
parent b95728f95c
commit 2a0eff41f4
6 changed files with 123 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
examples/demo.css
View File

@@ -252,6 +252,15 @@ a.name-header{
.trash-container button.btn-xs { .trash-container button.btn-xs {
margin-top: -5px !important; margin-top: -5px !important;
} }
.toggleIcon {
transition: transform 0.2s;
}
.rotated {
transform: rotate(180deg);
}
#gif{ #gif{
margin-left:0px; margin-left:0px;
margin-top:5px; margin-top:5px;

12
examples/demo.js
View File

@@ -197,8 +197,8 @@ window.onload = function() {
step.options.step.imgElement.src = reader.result; step.options.step.imgElement.src = reader.result;
else else
step.imgElement.src = reader.result; step.imgElement.src = reader.result;
insertPreview.updatePreviews(reader.result,'addStep'); insertPreview.updatePreviews(reader.result,'#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep'); insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
}, },
onTakePhoto: function (url) { onTakePhoto: function (url) {
var step = sequencer.steps[0]; var step = sequencer.steps[0];
@@ -208,16 +208,16 @@ window.onload = function() {
step.options.step.imgElement.src = url; step.options.step.imgElement.src = url;
else else
step.imgElement.src = url; step.imgElement.src = url;
insertPreview.updatePreviews(url,'addStep'); insertPreview.updatePreviews(url,'#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep'); insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
} }
}); });
setupCache(); setupCache();
if (urlHash.getUrlHashParameter('src')) { if (urlHash.getUrlHashParameter('src')) {
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep'); insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
} else { } else {
insertPreview.updatePreviews("images/tulips.png",'addStep'); insertPreview.updatePreviews("images/tulips.png",'#addStep');
} }
}; };

8
examples/lib/defaultHtmlStepUi.js
View File

@@ -31,7 +31,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
<div class="panel-heading">\ <div class="panel-heading">\
<div class="trash-container pull-right"></div>\ <div class="trash-container pull-right"></div>\
<h3 class="panel-title">' + <h3 class="panel-title">' +
'<span class="toggle">' +step.name + ' <span class="caret"></span>\ '<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\
<span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\ <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
</h3>\ </h3>\
</div>\ </div>\
@@ -134,8 +134,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
); );
$(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" >\ '<button class="pull-right btn btn-default btn-sm insert-step" >\
<i class="fa fa-plus"></i> 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>' </button>'
); );
} }
@@ -161,7 +161,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$("#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('fa-caret-up').toggleClass('fa-caret-down'); $(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
$(step.ui.querySelectorAll(".cal")).collapse('toggle'); $(step.ui.querySelectorAll(".cal")).collapse('toggle');
}); });

4
examples/lib/insertPreview.js
View File

@@ -8,7 +8,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
img.src = src; img.src = src;
$(img).css("max-width", "200%"); $(img).css("max-width", "200%");
$(img).css("transform", "translateX(-20%)"); $(img).css("transform", "translateX(-20%)");
var stepDiv = $('#'+selector+' .row').find('div').each(function() { $(selector + ' .radio-group').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); $(this).find('div').append(img);
} }
@@ -27,7 +27,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
} }
function updatePreviews(src, selector) { function updatePreviews(src, selector) {
$('#'+selector+' img').remove(); $(selector+' img').remove();
var previewSequencerSteps = { var previewSequencerSteps = {
"resize": "125%", "resize": "125%",

160
examples/lib/intermediateHtmlStepUi.js
View File

@@ -3,85 +3,109 @@ var urlHash = require('./urlHash.js'),
function IntermediateHtmlStepUi(_sequencer, step, options) { function IntermediateHtmlStepUi(_sequencer, step, options) {
function stepUI() { function stepUI() {
return '<div class="row insertDiv">\ return '<div class="row insertDiv collapse">\
<div class="col-md-6 col-md-offset-2" style="margin-top:5%">\ <section class="panel panel-primary .insert-step">\
<section id="insertStep" class="panel panel-primary">\ <button class="btn btn-default close-insert-box"><i class="fa fa-times" aria-hidden="true"></i> Close</button>\
<div class="form-inline">\ <div class="form-inline">\
<div class="panel-body">\ <div class="panel-body">\
<p class="info">Select a new module to add to your sequence.</p>\ <p class="info">Select a new module to add to your sequence.</p>\
<div class="row center-align radio-group">\ <div class="row center-align radio-group">\
<div>\ <div>\
<div class="radio" data-value="resize">\ <div class="radio" data-value="resize">\
<i class="fa fa-arrows-alt fa-4x i-over"></i>\ <i class="fa fa-arrows-alt fa-4x i-over"></i>\
</div>\ </div>\
<p>Resize</p>\ <p>Resize</p>\
</div>\
<div>\
<div class="radio" data-value="brightness">\
<i class="fa fa-sun-o fa-4x i-over"></i>\
</div>\
<p>Brightness</p>\
</div>\
<div>\
<div class="radio" data-value="contrast">\
<i class="fa fa-adjust fa-4x i-over"></i>\
</div>\
<p>Contrast</p>\
</div>\
<div>\
<div class="radio" data-value="saturation">\
<i class="fa fa-tint fa-4x i-over i-small"></i>\
</div>\
<p>Saturation</p>\
</div>\
<div>\
<div class="radio" data-value="rotate">\
<i class="fa fa-rotate-right fa-4x i-over"></i>\
</div>\
<p>Rotate</p>\
</div>\
<div>\
<div class="radio" data-value="crop">\
<i class="fa fa-crop fa-4x i-over"></i>\
</div>\
<p>Crop</p>\
</div>\
</div>\ </div>\
<div>\ <div class="row center-align">\
<div class="radio" data-value="brightness">\ <div class="col-md-8">\
<i class="fa fa-sun-o fa-4x i-over"></i>\ <select class="insert-step-select">\
</div>\ <!-- The default null selection has been appended manually in demo.js\
<p>Brightness</p>\ This is because the options in select are overritten when options are appended.-->\
</select>\
<div>\
<div class="col-md-4">\
<button class="btn btn-success btn-lg insert-save-btn add-step-btn" name="add">Add Step</button>\
<div>\
</div>\ </div>\
<div>\
<div class="radio" data-value="contrast">\
<i class="fa fa-adjust fa-4x i-over"></i>\
</div>\
<p>Contrast</p>\
</div>\
<div>\
<div class="radio" data-value="saturation">\
<i class="fa fa-tint fa-4x i-over i-small"></i>\
</div>\
<p>Saturation</p>\
</div>\
<div>\
<div class="radio" data-value="rotate">\
<i class="fa fa-rotate-right fa-4x i-over"></i>\
</div>\
<p>Rotate</p>\
</div>\
<div>\
<div class="radio" data-value="crop">\
<i class="fa fa-crop fa-4x i-over"></i>\
</div>\
<p>Crop</p>\
</div>\
</div>\
<div class="row center-align">\
<div class="col-md-8">\
<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>\
<div>\
<div class="col-md-4">\
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
<div>\
</div>\ </div>\
</div>\ </div>\
</div>\ </section>\
</section>\
</div>'; </div>';
} }
function selectNewStepUi() { function selectNewStepUi() {
var m = $("#insertStep select").val(); var insertSelect = $(step.ui.querySelector('.insert-step-select'))
$("#insertStep .info").html(_sequencer.modulesInfo(m).description); var m = insertSelect.val();
$("#insertStep #add-step-btn").prop("disabled", false); $(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
$(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)})
}
else {
$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback)})
}
}
insertStep = function (id) { insertStep = function (id) {
var modulesInfo = _sequencer.modulesInfo(); var modulesInfo = _sequencer.modulesInfo();
var parser = new DOMParser(); var parser = new DOMParser();
var addStepUI = stepUI(); var addStepUI = stepUI();
addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div") addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
step.ui
if ($(step.ui.querySelector('.insertDiv')).length > 0){
toggleDiv();
}
else {
step.ui
.querySelector("div.step") .querySelector("div.step")
.insertAdjacentElement('afterend', .insertAdjacentElement('afterend',
addStepUI addStepUI
); );
insertPreview.updatePreviews(step.output,'insertStep'); toggleDiv(function(){
var insertStepSelect = $("#insertStep select"); insertPreview.updatePreviews(step.output, '.insertDiv');
});
}
$(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 // Add modules to the insertStep dropdown
for (var m in modulesInfo) { for (var m in modulesInfo) {
@@ -90,33 +114,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
'<option value="' + m + '">' + modulesInfo[m].name + "</option>" '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
); );
} }
$('#insertStep #add-step-btn').selectize({ insertStepSelect.selectize({
sortField: 'text' sortField: 'text'
}); });
$('#insertStep #add-step-btn').prop('disabled', true); $(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
insertStepSelect.append('<option value="none" disabled selected>More modules...</option>'); insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
$('#insertStep .radio-group .radio').on("click", function () { $(step.ui.querySelector('.insertDiv .radio-group .radio')).on("click", function () {
$(this).parent().find('.radio').removeClass('selected'); $(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
newStep = $(this).attr('data-value'); newStep = $(this).attr('data-value');
insertStepSelect.val(newStep); $(step.ui.querySelector('.insert-step-select')).val(newStep);
selectNewStepUi(); selectNewStepUi();
insert(id); insert(id);
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
$(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi); insertStepSelect.on('change', selectNewStepUi);
$(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) }); $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id) });
} }
function insert(id) { function insert(id) {
options = options || {}; options = options || {};
var insertStepSelect = $("#insertStep select"); 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()
$('div .insertDiv').remove(); toggleDiv();
var sequenceLength = 1; var sequenceLength = 1;
if (sequencer.sequences[newStepName]) { if (sequencer.sequences[newStepName]) {
sequenceLength = sequencer.sequences[newStepName].length; sequenceLength = sequencer.sequences[newStepName].length;

20
package-lock.json generated
View File

@@ -643,7 +643,7 @@
}, },
"minimist": { "minimist": {
"version": "0.0.5", "version": "0.0.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
"integrity": "sha1-16oye87PUY+RBqxrjwA/o7zqhWY=", "integrity": "sha1-16oye87PUY+RBqxrjwA/o7zqhWY=",
"dev": true "dev": true
}, },
@@ -3515,7 +3515,7 @@
}, },
"gif-encoder": { "gif-encoder": {
"version": "0.4.3", "version": "0.4.3",
"resolved": "https://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz", "resolved": "http://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
"integrity": "sha1-iitP6MqJWkjjoLbLs0CgpqNXGJk=", "integrity": "sha1-iitP6MqJWkjjoLbLs0CgpqNXGJk=",
"requires": { "requires": {
"readable-stream": "~1.1.9" "readable-stream": "~1.1.9"
@@ -4306,7 +4306,7 @@
}, },
"minimist": { "minimist": {
"version": "0.0.10", "version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true "dev": true
}, },
@@ -4371,7 +4371,7 @@
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "0.0.10", "version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true "dev": true
}, },
@@ -5263,7 +5263,7 @@
}, },
"magic-string": { "magic-string": {
"version": "0.22.5", "version": "0.22.5",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz", "resolved": "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
"integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==", "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
"requires": { "requires": {
"vlq": "^0.2.2" "vlq": "^0.2.2"
@@ -5602,7 +5602,7 @@
}, },
"minimist": { "minimist": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
}, },
"mitt": { "mitt": {
@@ -5643,7 +5643,7 @@
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true "dev": true
} }
@@ -6023,7 +6023,7 @@
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "0.0.10", "version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=" "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
} }
} }
@@ -6738,7 +6738,7 @@
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
}, },
"object-keys": { "object-keys": {
@@ -7305,7 +7305,7 @@
}, },
"sax": { "sax": {
"version": "0.1.5", "version": "0.1.5",
"resolved": "https://registry.npmjs.org/sax/-/sax-0.1.5.tgz", "resolved": "http://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
"integrity": "sha1-0YKaYSD6AWZetNv/bEPyn9bWFHE=", "integrity": "sha1-0YKaYSD6AWZetNv/bEPyn9bWFHE=",
"dev": true "dev": true
}, },