From 4a86abbafdd787855fd2055b6e0dc8a540b6f577 Mon Sep 17 00:00:00 2001 From: Harsh Khandeparkar <34770591+HarshKhandeparkar@users.noreply.github.com> Date: Mon, 16 Dec 2019 18:42:15 +0000 Subject: [PATCH] [GCI] InsertStep functionality added for loadImage step (#1360) * 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 --- examples/demo.css | 6 +++ examples/demo.js | 55 +++++++++++++------------- examples/lib/defaultHtmlStepUi.js | 24 ++++++++++- examples/lib/insertPreview.js | 16 ++++---- examples/lib/intermediateHtmlStepUi.js | 9 ++++- test/ui/spec/insertPreview.spec.js | 11 ++++-- 6 files changed, 78 insertions(+), 43 deletions(-) diff --git a/examples/demo.css b/examples/demo.css index 273be11f..1ef4adce 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -313,4 +313,10 @@ a.name-header{ bottom: 7px; font-size: 16px; color: #444; +} + +/* Non float rightward alignment*/ +.right { + margin-left: auto; + display: block; } \ No newline at end of file diff --git a/examples/demo.js b/examples/demo.js index 1f2d0232..ae9ca546 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -9,24 +9,24 @@ window.onload = function () { sequencer = ImageSequencer(); options = { - sortField: 'text', - openOnFocus: false, - onInitialize: function () { - this.$control.on("click", () => { - this.ignoreFocusOpen = true; - setTimeout(() => { - // Trigger onFocus and open dropdown. - this.ignoreFocusOpen = false; - }, 50); - }); - }, - // Open dropdown after timeout of onClick. - onFocus: function () { - if (!this.ignoreFocusOpen) { - this.open(); - } + sortField: 'text', + openOnFocus: false, + onInitialize: function () { + this.$control.on('click', () => { + this.ignoreFocusOpen = true; + setTimeout(() => { + // Trigger onFocus and open dropdown. + this.ignoreFocusOpen = false; + }, 50); + }); + }, + // Open dropdown after timeout of onClick. + onFocus: function () { + if (!this.ignoreFocusOpen) { + 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')); } }; diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 0a9b23fd..163a0207 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -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( ` + ` + ); + + $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(); } diff --git a/examples/lib/insertPreview.js b/examples/lib/insertPreview.js index 46ba886e..32360d95 100644 --- a/examples/lib/insertPreview.js +++ b/examples/lib/insertPreview.js @@ -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); }); }); }); diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js index 8383ef1c..7c99caaa 100644 --- a/examples/lib/intermediateHtmlStepUi.js +++ b/examples/lib/intermediateHtmlStepUi.js @@ -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,9 +92,11 @@ 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); @@ -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) { '' ); } + 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; diff --git a/test/ui/spec/insertPreview.spec.js b/test/ui/spec/insertPreview.spec.js index 27ba2171..15089b86 100644 --- a/test/ui/spec/insertPreview.spec.js +++ b/test/ui/spec/insertPreview.spec.js @@ -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); }); }); \ No newline at end of file