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

Fix toggle-able collapse (#651)

Browse Source 
* fix toggle

* changes

* dist changes

* changes

* changes

* changes

* changes
This commit is contained in:
Mridul97
2019-01-15 03:35:23 +05:30
committed by Jeffrey Warren
parent b5fcba3c54
commit f68983d6d7
3 changed files with 21 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
dist/image-sequencer-ui.js vendored
View File

@@ -155,14 +155,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
<div class="row step">\ <div class="row step">\
<form class="input-form">\ <form class="input-form">\
<div class="col-md-4 details">\ <div class="col-md-4 details">\
<h3>' +step.name + <h3>\
' <span class="toggle"><i class="fa fa-caret-up" aria-hidden="true"></i></span>' + <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
'</h3><div class="collapse"><p><i>"'+ '</h3><div class="cal"><p><i>"'+
(step.description || "") + (step.description || "") +
'</i></p></div>\ '</i></p></div>\
</div>\ </div>\
</form>\ </form>\
<div class="col-md-8 collapse">\ <div class="col-md-8 cal">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\ <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\ <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
</div>\ </div>\
@@ -171,7 +171,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
</div>'; </div>';
var tools = var tools =
'<div class="collapse"><div class="tools btn-group">\ '<div class="cal"><div class="tools btn-group">\
<button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\ <button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\
<i class="fa fa-trash"></i>\ <i class="fa fa-trash"></i>\
</button>\ </button>\
@@ -236,7 +236,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
div.setAttribute("name", paramName); div.setAttribute("name", paramName);
var description = inputs[paramName].desc || paramName; var description = inputs[paramName].desc || paramName;
div.innerHTML = div.innerHTML =
"<div class='det collapse'>\ "<div class='det cal'>\
<label for='" + <label for='" +
paramName + paramName +
"'>" + "'>" +
@@ -250,7 +250,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
} }
$(step.ui.querySelector("div.details")).append( $(step.ui.querySelector("div.details")).append(
'<div class="collapse"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>' '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
); );
@@ -277,17 +277,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
else { else {
$("#load-image").append(step.ui); $("#load-image").append(step.ui);
} }
$(step.ui.querySelector(".toggle")).on("click", (e) => { $(step.ui.querySelector(".toggle")).on("click", () => {
var className = e.target.className; $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
if(className=="fa fa-caret-up"){ $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
$(step.ui.querySelectorAll(".collapse")).show();
e.target.className="fa fa-caret-down";
}
else{
$(step.ui.querySelectorAll(".collapse")).hide();
//e.target.localName.toggleClass('fa-caret-up');
e.target.className="fa fa-caret-up";
}
}); });

2
dist/image-sequencer-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

28
examples/lib/defaultHtmlStepUi.js
View File

@@ -33,14 +33,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
<div class="row step">\ <div class="row step">\
<form class="input-form">\ <form class="input-form">\
<div class="col-md-4 details">\ <div class="col-md-4 details">\
<h3>' +step.name + <h3>\
' <span class="toggle"><i class="fa fa-caret-up" aria-hidden="true"></i></span>' + <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
'</h3><div class="collapse"><p><i>"'+ '</h3><div class="cal"><p><i>"'+
(step.description || "") + (step.description || "") +
'</i></p></div>\ '</i></p></div>\
</div>\ </div>\
</form>\ </form>\
<div class="col-md-8 collapse">\ <div class="col-md-8 cal">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\ <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\ <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
</div>\ </div>\
@@ -49,7 +49,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
</div>'; </div>';
var tools = var tools =
'<div class="collapse"><div class="tools btn-group">\ '<div class="cal"><div class="tools btn-group">\
<button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\ <button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\
<i class="fa fa-trash"></i>\ <i class="fa fa-trash"></i>\
</button>\ </button>\
@@ -114,7 +114,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
div.setAttribute("name", paramName); div.setAttribute("name", paramName);
var description = inputs[paramName].desc || paramName; var description = inputs[paramName].desc || paramName;
div.innerHTML = div.innerHTML =
"<div class='det collapse'>\ "<div class='det cal'>\
<label for='" + <label for='" +
paramName + paramName +
"'>" + "'>" +
@@ -128,7 +128,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
} }
$(step.ui.querySelector("div.details")).append( $(step.ui.querySelector("div.details")).append(
'<div class="collapse"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>' '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
); );
@@ -155,17 +155,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
else { else {
$("#load-image").append(step.ui); $("#load-image").append(step.ui);
} }
$(step.ui.querySelector(".toggle")).on("click", (e) => { $(step.ui.querySelector(".toggle")).on("click", () => {
var className = e.target.className; $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
if(className=="fa fa-caret-up"){ $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
$(step.ui.querySelectorAll(".collapse")).show();
e.target.className="fa fa-caret-down";
}
else{
$(step.ui.querySelectorAll(".collapse")).hide();
//e.target.localName.toggleClass('fa-caret-up');
e.target.className="fa fa-caret-up";
}
}); });