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

ui-tweaks (#960)

Browse Source
This commit is contained in:
Jeffrey Warren
2019-03-30 12:47:56 -04:00
committed by GitHub
parent bc1151c340
commit 690c126f41
3 changed files with 31 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
examples/lib/defaultHtmlStepUi.js
View File

@@ -25,36 +25,35 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui =
'\
<div class="main">\
<div class="container-fluid step-container">\
<form class="input-form">\
<div class="panel panel-default">\
<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"></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>\
<div class="panel-body cal collapse in">\
<div class="row step">\
<div class="col-md-4 details">\
<h3>\
<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
'</h3><div class="cal collapse in"><p><i>'+
(step.description || "") +
'</i></p></div>\
<div class="col-md-4 details container-fluid">\
<div class="cal collapse in"><p>' +
'<i>' + (step.description || "") + '</i>' +
'</p></div>\
</div>\
<div class="col-md-8 cal collapse in step-column">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<div class="col-md-8 cal collapse in step-column">\
<div class="load load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<div class="step-image">\
<a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\
</div>\
</div>\
</div>\
</div>\
<div class="panel-footer cal collapse in"></div>\
</div>\
</form>\
</div>';
<div class="panel-footer cal collapse in"></div>\
</div>\
</form>\
</div>';
var tools =
'<div class="trash">\
@@ -67,9 +66,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
var parser = new DOMParser();
step.ui = parser.parseFromString(step.ui, "text/html");
step.ui = step.ui.querySelector("div.main");
step.ui = step.ui.querySelector("div.container-fluid");
step.linkElements = step.ui.querySelectorAll("a");
step.imgElement = step.ui.querySelector("a img");
step.imgElement = step.ui.querySelector("a img.img-thumbnail");
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -135,7 +134,7 @@ 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 Module\
<i class="fa fa-plus"></i> Insert Step\
</button>'
);
}
@@ -231,16 +230,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
function onDraw(step) {
$(step.ui.querySelector(".load")).show();
$(step.ui.querySelector("img")).hide();
if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") )
{
$(step.ui.querySelector(".load-spin")).show();
}
$(step.ui.querySelectorAll(".load-spin")).show();
}
function onComplete(step) {
$(step.ui.querySelector(".load")).hide();
$(step.ui.querySelector("img")).show();
$(step.ui.querySelector(".load-spin")).hide();
$(step.ui.querySelectorAll(".load-spin")).hide();
$(step.ui.querySelector(".load")).hide();
step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output;
var imgthumbnail = step.ui.querySelector(".img-thumbnail");