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

[GCI] InsertStep functionality added for loadImage step (#1360)

Browse Source 
* add markuo

* add markupfix insertPreview

* fix insertPreview test

* make the new insertPreview work

* fix disabled

* small fix

* fix comments

* remove console log

* fix enabling/disabling of insert-step btn
This commit is contained in:
Harsh Khandeparkar
2019-12-16 18:42:15 +00:00
committed by Jeffrey Warren
parent 426733f625
commit 4a86abbafd
6 changed files with 78 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/demo.css
View File

@@ -314,3 +314,9 @@ a.name-header{
font-size: 16px;
color: #444;
}
/* Non float rightward alignment*/
.right {
margin-left: auto;
display: block;
}

25
examples/demo.js
View File

@@ -12,7 +12,7 @@ window.onload = function () {
sortField: 'text',
openOnFocus: false,
onInitialize: function () {
this.$control.on("click", () => {
this.$control.on('click', () => {
this.ignoreFocusOpen = true;
setTimeout(() => {
// Trigger onFocus and open dropdown.
@@ -26,7 +26,7 @@ window.onload = function () {
this.open();
}
}
}
};
function refreshOptions(options) {
// Default options if parameter is empty.
@@ -239,8 +239,8 @@ window.onload = function () {
function getLastImage() {
// Get the image from the last step.
let imgs = document.getElementsByClassName('step-thumbnail');
let lastStepImage = imgs[imgs.length-1];
return lastStepImage.getAttribute("src");
let lastStepImage = imgs[imgs.length - 1];
return lastStepImage.getAttribute('src');
}
/**
@@ -255,8 +255,8 @@ window.onload = function () {
// Create a new pdf with the same dimensions as the image.
const pdf = new jsPDF({
orientation: pageHeight > pageWidth ? "portrait": "landscape",
unit: "px",
orientation: pageHeight > pageWidth ? 'portrait' : 'landscape',
unit: 'px',
format: [pageHeight, pageWidth]
});
@@ -264,7 +264,7 @@ window.onload = function () {
pdf.addImage(imageDataURL, 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
// Save the pdf with the filename specified here:
pdf.save("index.pdf");
pdf.save('index.pdf');
});
}
@@ -301,8 +301,8 @@ window.onload = function () {
step.options.step.imgElement.src = reader.result;
else
step.imgElement.src = reader.result;
insertPreview.updatePreviews(reader.result, '#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
insertPreview.updatePreviews(reader.result, document.querySelector('#addStep'));
},
onTakePhoto: function (url) {
var step = sequencer.steps[0];
@@ -312,16 +312,15 @@ window.onload = function () {
step.options.step.imgElement.src = url;
else
step.imgElement.src = url;
insertPreview.updatePreviews(url, '#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
insertPreview.updatePreviews(url, document.querySelector('#addStep'));
}
});
setupCache();
if (urlHash.getUrlHashParameter('src')) {
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), '#addStep');
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), document.querySelector('#addStep'));
} else {
insertPreview.updatePreviews('images/tulips.png', '#addStep');
insertPreview.updatePreviews('images/tulips.png', document.querySelector('#addStep'));
}
};

24
examples/lib/defaultHtmlStepUi.js
View File

@@ -20,7 +20,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';
function onSetup(step, stepOptions) {
if (step.options && step.options.description)
step.description = step.options.description;
@@ -169,7 +168,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
);
$stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');});
$stepAll('.insert-step').on('click', function() { util.insertStep(step.ID); });
$step('.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);
@@ -180,9 +179,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
else {
stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
}
// Enable the load-image insert-step button when there are steps after load-image
// The logical operator is `> 0` because the number of steps is found before adding the step, actual logic is `steps.length + 1 > 1` which is later simplified.
if (_sequencer.steps.length > 0) $('#load-image .insert-step').prop('disabled', false);
else $('#load-image .insert-step').prop('disabled', true);
}
else {
$('#load-image').append(step.ui);
$step('div.panel-footer').prepend( `
<button class="right btn btn-default btn-sm insert-step" disabled="true">
<span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span>
<span class="no-insert-text" style="display:none">Close</span>
</button>`
);
$step('.insert-step').on('click', function() { util.insertStep(step.ID); });
}
$step('.toggle').on('click', () => {
$step('.toggleIcon').toggleClass('rotated');
@@ -346,6 +360,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
function onRemove(step) {
step.ui.remove();
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
// Enable the load-image insert-step button when there are steps after load-image
// The logical operator is `> 2` because the number of steps is found before removing the step, actual logic is `steps.length - 1 > 1` which is later simplified.
if (_sequencer.steps.length - 1 > 1) $('#load-image .insert-step').prop('disabled', false);
else $('#load-image .insert-step').prop('disabled', true);
$('div[class*=imgareaselect-]').remove();
}

16
examples/lib/insertPreview.js
View File

@@ -1,5 +1,4 @@
function generatePreview(previewStepName, customValues, path, selector) {
function generatePreview(previewStepName, customValues, path, DomNode) {
var previewSequencer = ImageSequencer();
function insertPreview(src) {
var img = document.createElement('img');
@@ -8,9 +7,9 @@ function generatePreview(previewStepName, customValues, path, selector) {
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);
$(DomNode.querySelector('.radio-group')).find('.radio').each(function() {
if ($(this).attr('data-value') === previewStepName) {
$(this).append(img);
}
});
}
@@ -29,8 +28,8 @@ function generatePreview(previewStepName, customValues, path, selector) {
previewSequencer.loadImage(path, loadPreview);
}
function updatePreviews(src, selector) {
$(selector + ' img').remove();
function updatePreviews(src, DomNode) {
$(DomNode).find('img').remove();
var previewSequencerSteps = {
'resize': '125%',
@@ -48,6 +47,7 @@ function updatePreviews(src, selector) {
};
var img = new Image();
img.onload = function(){
var height = img.height;
var width = img.width;
@@ -62,7 +62,7 @@ function updatePreviews(src, selector) {
this.addSteps('resize', {['resize']: percentage + '%'});
this.run((src)=>{
Object.keys(previewSequencerSteps).forEach(function (step, index) {
generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
generatePreview(step, Object.values(previewSequencerSteps)[index], src, DomNode);
});
});
});

9
examples/lib/intermediateHtmlStepUi.js
View File

@@ -81,6 +81,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
var parser = new DOMParser();
var addStepUI = stepUI();
addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
if ($step('.insertDiv').length > 0){
toggleDiv($step);
}
@@ -91,10 +92,12 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
addStepUI
);
toggleDiv($step, function(){
insertPreview.updatePreviews(step.output, '.insertDiv');
if (step.name === 'load-image') insertPreview.updatePreviews(step.output.src, $step('.insertDiv').getDomElem());
else insertPreview.updatePreviews(step.output, $step('.insertDiv').getDomElem());
});
}
$step('.insertDiv .close-insert-box').off('click').on('click', function(){
toggleDiv($step);
$step('.insertDiv').removeClass('insertDiv');
@@ -102,6 +105,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
var insertStepSelect = $step('.insert-step-select');
insertStepSelect.html('');
// Add modules to the insertStep dropdown
for (var m in modulesInfo) {
if (modulesInfo[m] && modulesInfo[m].name)
@@ -109,14 +113,17 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
'<option value="' + m + '">' + modulesInfo[m].name + '</option>'
);
}
insertStepSelect.selectize({
sortField: 'text'
});
$('.insertDiv .radio-group .radio').on('click', function () {
var newStepName = $(this).attr('data-value');
id = $($step('.insertDiv').parents()[3]).prevAll().length;
insert(id, $step, newStepName);
});
$step('.insertDiv .add-step-btn').on('click', function () {
var newStepName = insertStepSelect.val();
id = $($step('.insertDiv').parents()[3]).prevAll().length;

11
test/ui/spec/insertPreview.spec.js
View File

@@ -5,22 +5,25 @@ describe('Preview UI HTML', function() {
var insertPreview;
var options = { brightness: 50 };
// TODO: Add rigorous tests with virtual DOM Nodes
const DomNode = {};
beforeEach(()=>{
insertPreview = InsertPreview;
spyOn(insertPreview, 'generatePreview');
spyOn(insertPreview, 'updatePreviews');
insertPreview.generatePreview('brightness', options, 'src', 'selector');
insertPreview.updatePreviews('src', 'selector');
insertPreview.generatePreview('brightness', options, 'src', DomNode);
insertPreview.updatePreviews('src', DomNode);
});
it('generate preview ui', function() {
expect(insertPreview.generatePreview).toHaveBeenCalledWith('brightness', options, 'src', 'selector');
expect(insertPreview.generatePreview).toHaveBeenCalledWith('brightness', options, 'src', DomNode);
});
it('update preview ui', function() {
expect(insertPreview.updatePreviews).toHaveBeenCalledWith('src', 'selector');
expect(insertPreview.updatePreviews).toHaveBeenCalledWith('src', DomNode);
});
});