Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix insert step and allow "closing" it #655

Merged
merged 23 commits into from
Apr 5, 2019
Merged

Fix insert step and allow "closing" it #655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8e8281a
update dist
tech4GT Dec 27, 2018
4774f8f
Merge remote-tracking branch 'upstream/main' into main
Dec 27, 2018
305b45b
Merge remote-tracking branch 'upstream/main' into main
Jan 8, 2019
61a7c5d
Merge remote-tracking branch 'upstream/main' into main
Jan 11, 2019
a66e115
fix insert step button
Jan 11, 2019
9f7386f
add icon
Jan 11, 2019
40b1987
add dist
Jan 11, 2019
1e29033
use normal functions
Jan 11, 2019
8db9d9c
use normal functions
Jan 12, 2019
2b0c82a
merge with main
Jan 15, 2019
fcdfe45
merge with main
Jan 19, 2019
e02131d
changes and rebase
Jan 25, 2019
b9dcb61
no lag
Jan 28, 2019
a6f8fbe
merge with main
Mar 3, 2019
2b59a90
changes
Mar 18, 2019
7febb98
merge with main
Mar 22, 2019
19eb795
merge with main
Apr 1, 2019
7e522f9
changes
Apr 1, 2019
aa462e0
changes
Apr 2, 2019
10e1aef
merge with main
Apr 2, 2019
2f287b0
changes
Apr 2, 2019
8692156
Update intermediateHtmlStepUi.js
harshkhandeparkar Apr 3, 2019
8ce528a
toggleDiv global
harshkhandeparkar Apr 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions examples/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,15 @@ a.name-header{
.trash-container button.btn-xs {
margin-top: -5px !important;
}

.toggleIcon {
transition: transform 0.2s;
}

.rotated {
transform: rotate(180deg);
}

#gif{
margin-left:0px;
margin-top:5px;
Expand Down
12 changes: 6 additions & 6 deletions examples/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,8 +197,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,'insertStep');
insertPreview.updatePreviews(reader.result,'#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
},
onTakePhoto: function (url) {
var step = sequencer.steps[0];
Expand All @@ -208,16 +208,16 @@ 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,'insertStep');
insertPreview.updatePreviews(url,'#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
}
});

setupCache();

if (urlHash.getUrlHashParameter('src')) {
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep');
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
} else {
insertPreview.updatePreviews("images/tulips.png",'addStep');
insertPreview.updatePreviews("images/tulips.png",'#addStep');
}
};
8 changes: 4 additions & 4 deletions examples/lib/defaultHtmlStepUi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
<div class="panel-heading">\
<div class="trash-container pull-right"></div>\
<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>\
</h3>\
</div>\
Expand Down Expand Up @@ -134,8 +134,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
);
$(step.ui.querySelector("div.panel-footer")).prepend(
'<button class="pull-right btn btn-default btn-sm insert-step" >\
<i class="fa fa-plus"></i> Insert Step\
</button>'
<span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span>\
</button>'
);
}

Expand All @@ -161,7 +161,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$("#load-image").append(step.ui);
}
$(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');
});

Expand Down
4 changes: 2 additions & 2 deletions examples/lib/insertPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
img.src = src;
$(img).css("max-width", "200%");
$(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) {
$(this).find('div').append(img);
}
Expand All @@ -27,7 +27,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
}

function updatePreviews(src, selector) {
$('#'+selector+' img').remove();
$(selector+' img').remove();

var previewSequencerSteps = {
"resize": "125%",
Expand Down
160 changes: 92 additions & 68 deletions examples/lib/intermediateHtmlStepUi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,85 +3,109 @@ var urlHash = require('./urlHash.js'),

function IntermediateHtmlStepUi(_sequencer, step, options) {
function stepUI() {
return '<div class="row insertDiv">\
<div class="col-md-6 col-md-offset-2" 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>\
<div class="radio" data-value="resize">\
<i class="fa fa-arrows-alt fa-4x i-over"></i>\
</div>\
<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>\
return '<div class="row insertDiv collapse">\
<section class="panel panel-primary .insert-step">\
<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="panel-body">\
<p class="info">Select a new module to add to your sequence.</p>\
<div class="row center-align radio-group">\
<div>\
<div class="radio" data-value="resize">\
<i class="fa fa-arrows-alt fa-4x i-over"></i>\
</div>\
<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 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 class="row center-align">\
<div class="col-md-8">\
<select class="insert-step-select">\
<!-- 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 insert-save-btn add-step-btn" name="add">Add Step</button>\
<div>\
</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>\
</section>\
</section>\
</div>';
}


function selectNewStepUi() {
var m = $("#insertStep select").val();
$("#insertStep .info").html(_sequencer.modulesInfo(m).description);
$("#insertStep #add-step-btn").prop("disabled", false);
var insertSelect = $(step.ui.querySelector('.insert-step-select'))
var m = insertSelect.val();
$(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) {
var modulesInfo = _sequencer.modulesInfo();
var parser = new DOMParser();
var addStepUI = stepUI();
addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
step.ui

if ($(step.ui.querySelector('.insertDiv')).length > 0){
toggleDiv();
}
else {
step.ui
.querySelector("div.step")
.insertAdjacentElement('afterend',
addStepUI
);
insertPreview.updatePreviews(step.output,'insertStep');
var insertStepSelect = $("#insertStep select");
toggleDiv(function(){
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("");
// Add modules to the insertStep dropdown
for (var m in modulesInfo) {
Expand All @@ -90,33 +114,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
'<option value="' + m + '">' + modulesInfo[m].name + "</option>"
);
}
$('#insertStep #add-step-btn').selectize({
insertStepSelect.selectize({
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>');
$('#insertStep .radio-group .radio').on("click", function () {
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on("click", function () {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
insertStepSelect.val(newStep);
$(step.ui.querySelector('.insert-step-select')).val(newStep);
selectNewStepUi();
insert(id);
$(this).removeClass('selected');
});
$(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
$(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
insertStepSelect.on('change', selectNewStepUi);
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id) });
}

function insert(id) {

options = options || {};
var insertStepSelect = $("#insertStep select");
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
if (insertStepSelect.val() == "none") return;

var newStepName = insertStepSelect.val()
$('div .insertDiv').remove();
toggleDiv();
var sequenceLength = 1;
if (sequencer.sequences[newStepName]) {
sequenceLength = sequencer.sequences[newStepName].length;
Expand Down
20 changes: 10 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.