Skip to content

Commit 257113a

Browse files
harshkhandeparkarjywarren
harshkhandeparkar
authored and
jywarren
committed
Shorten UI code with new $step method (#710)
* update dist Signed-off-by: tech4GT <[email protected]> dist update Revert "dist update" This reverts commit 9ee2a98. * Merge remote-tracking branch 'upstream/main' into main * add dist * add new func * update itermediate * changes * fix gitignore * use scopeQuery * add mapHtmlTypes test * scopeQuery tests added * try something * change * fix stepui test * Remove double quotes * update new code * refactor to spec
1 parent 0eb3f26 commit 257113a

22 files changed

+274
-313
lines changed

‎examples/lib/defaultHtmlStepUi.js

+43-35
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,22 @@
88
// output values, step information.
99
// See documetation for more details.
1010

11-
var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js');
12-
var urlHash = require('./urlHash.js');
13-
var _ = require('lodash');
14-
var mapHtmlTypes = require('./mapHtmltypes');
11+
var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
12+
urlHash = require('./urlHash.js'),
13+
_ = require('lodash'),
14+
mapHtmlTypes = require('./mapHtmltypes'),
15+
scopeQuery = require('./scopeQuery'),
16+
$stepAll,
17+
$step;
1518

1619
function DefaultHtmlStepUi(_sequencer, options) {
17-
20+
1821
options = options || {};
1922
var stepsEl = options.stepsEl || document.querySelector('#steps');
2023
var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';
2124

2225
function onSetup(step, stepOptions) {
26+
2327
if (step.options && step.options.description)
2428
step.description = step.options.description;
2529

@@ -67,8 +71,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
6771
var parser = new DOMParser();
6872
step.ui = parser.parseFromString(step.ui, 'text/html');
6973
step.ui = step.ui.querySelector('div.container-fluid');
70-
step.linkElements = step.ui.querySelectorAll('a');
71-
step.imgElement = step.ui.querySelector('a img.img-thumbnail');
74+
75+
$step = scopeQuery.scopeSelector(step.ui);
76+
$stepAll = scopeQuery.scopeSelectorAll(step.ui);
77+
78+
step.linkElements = $stepAll('a');
79+
step.imgElement = $step('a img.img-thumbnail')[0];
7280

7381
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
7482
var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -144,12 +152,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
144152
html +
145153
'\
146154
</div>';
147-
step.ui.querySelector('div.details').appendChild(div);
155+
$step('div.details').append(div);
148156
}
149-
$(step.ui.querySelector('div.panel-footer')).append(
157+
$step('div.panel-footer').append(
150158
'<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
151159
);
152-
$(step.ui.querySelector('div.panel-footer')).prepend(
160+
$step('div.panel-footer').prepend(
153161
'<button class="pull-right btn btn-default btn-sm insert-step" >\
154162
<span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span></button>\
155163
<button class="pull-right btn btn-default btn-sm download-btn" style="margin-right:2px" >\
@@ -159,13 +167,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
159167
}
160168

161169
if (step.name != 'load-image') {
162-
step.ui
163-
.querySelector('div.trash-container')
170+
$step('div.trash-container')
164171
.prepend(
165172
parser.parseFromString(tools, 'text/html').querySelector('div')
166173
);
167-
$(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed', 'remove-notification');});
168-
$(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });
174+
175+
$stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');});
176+
$stepAll('.insert-step').on('click', function() { util.insertStep(step.ID); });
169177
// Insert the step's UI in the right place
170178
if (stepOptions.index == _sequencer.steps.length) {
171179
stepsEl.appendChild(step.ui);
@@ -179,19 +187,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
179187
else {
180188
$('#load-image').append(step.ui);
181189
}
182-
$(step.ui.querySelector('.toggle')).on('click', () => {
183-
$(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
184-
$(step.ui.querySelectorAll('.cal')).collapse('toggle');
190+
$step('.toggle').on('click', () => {
191+
$step('.toggleIcon').toggleClass('rotated');
192+
$stepAll('.cal').collapse('toggle');
185193
});
186194

187195
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
188196
$(step.imgElement).on('click', (e) => {e.preventDefault(); });
189-
$(step.ui.querySelectorAll('#color-picker')).colorpicker();
197+
$stepAll('#color-picker').colorpicker();
190198

191199
function saveOptions(e) {
192200
e.preventDefault();
193201
if (optionsChanged){
194-
$(step.ui.querySelector('div.details'))
202+
$step('div.details')
195203
.find('input,select')
196204
.each(function(i, input) {
197205
$(input)
@@ -204,7 +212,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
204212
// modify the url hash
205213
urlHash.setUrlHashParameter('steps', _sequencer.toString());
206214
// disable the save button
207-
$(step.ui.querySelector('.btn-save')).prop('disabled', true);
215+
$step('.btn-save').prop('disabled', true);
208216
optionsChanged = false;
209217
changedInputs = 0;
210218
}
@@ -215,15 +223,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
215223
changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
216224
optionsChanged = changedInputs > 0;
217225

218-
$(step.ui.querySelector('.btn-save')).prop('disabled', !optionsChanged);
226+
$step('.btn-save').prop('disabled', !optionsChanged);
219227
return inputChanged;
220228
}
221229

222230
var
223231
changedInputs = 0,
224232
optionsChanged = false;
225-
$(step.ui.querySelector('.input-form')).on('submit', saveOptions);
226-
$(step.ui.querySelectorAll('.target')).each(function(i, input) {
233+
$step('.input-form').on('submit', saveOptions);
234+
$stepAll('.target').each(function(i, input) {
227235
$(input)
228236
.data('initValue', $(input).val())
229237
.data('hasChangedBefore', false)
@@ -248,19 +256,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
248256
}
249257

250258

251-
function onDraw(step) {
252-
$(step.ui.querySelector('.load')).show();
253-
$(step.ui.querySelector('img')).hide();
254-
$(step.ui.querySelectorAll('.load-spin')).show();
259+
function onDraw() {
260+
$step('.load').show();
261+
$step('img').hide();
262+
$stepAll('.load-spin').show();
255263
}
256264

257265
function onComplete(step) {
258-
$(step.ui.querySelector('img')).show();
259-
$(step.ui.querySelectorAll('.load-spin')).hide();
260-
$(step.ui.querySelector('.load')).hide();
266+
$step('img').show();
267+
$stepAll('.load-spin').hide();
268+
$step('.load').hide();
261269

262270
step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
263-
var imgthumbnail = step.ui.querySelector('.img-thumbnail');
271+
var imgthumbnail = $step('.img-thumbnail');
264272
for (let index = 0; index < step.linkElements.length; index++) {
265273
if (step.linkElements[index].contains(imgthumbnail))
266274
step.linkElements[index].href = step.imgElement.src;
@@ -271,7 +279,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
271279
return output.split('/')[1].split(';')[0];
272280
}
273281

274-
$(step.ui.querySelectorAll('.download-btn')).on('click', () => {
282+
$stepAll('.download-btn').on('click', () => {
275283

276284
for (let index = 0; index < step.linkElements.length; index++){
277285

@@ -294,18 +302,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
294302
for (var i in inputs) {
295303
if (step.options[i] !== undefined) {
296304
if (inputs[i].type.toLowerCase() === 'input')
297-
$(step.ui.querySelector('div[name="' + i + '"] input'))
305+
$step('div[name="' + i + '"] input')
298306
.val(step.options[i])
299307
.data('initValue', step.options[i]);
300308
if (inputs[i].type.toLowerCase() === 'select')
301-
$(step.ui.querySelector('div[name="' + i + '"] select'))
309+
$step('div[name="' + i + '"] select')
302310
.val(step.options[i])
303311
.data('initValue', step.options[i]);
304312
}
305313
}
306314
for (var i in outputs) {
307315
if (step[i] !== undefined)
308-
$(step.ui.querySelector('div[name="' + i + '"] input'))
316+
$step('div[name="' + i + '"] input')
309317
.val(step[i]);
310318
}
311319
}

‎examples/lib/intermediateHtmlStepUi.js

+16-16
Original file line numberDiff line numberDiff line change
@@ -66,20 +66,20 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
6666

6767

6868
function selectNewStepUi() {
69-
var insertSelect = $(step.ui.querySelector('.insert-step-select'));
69+
var insertSelect = $step('.insert-step-select');
7070
var m = insertSelect.val();
71-
$(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
72-
$(step.ui.querySelector('.insertDiv .add-step-btn')).prop('disabled', false);
71+
$step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
72+
$step('.insertDiv .add-step-btn').prop('disabled', false);
7373
}
7474

7575

7676
var toggleDiv = function(callback = function(){}){
77-
$(step.ui.querySelector('.insertDiv')).collapse('toggle');
78-
if ($(step.ui.querySelector('.insert-text')).css('display') != 'none'){
79-
$(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback);});
77+
$step('.insertDiv').collapse('toggle');
78+
if ($step('.insert-text').css('display') != 'none'){
79+
$step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});
8080
}
8181
else {
82-
$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
82+
$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)});
8383
}
8484
};
8585

@@ -89,7 +89,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
8989
var addStepUI = stepUI();
9090
addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
9191

92-
if ($(step.ui.querySelector('.insertDiv')).length > 0){
92+
if ($step('.insertDiv').length > 0){
9393
toggleDiv();
9494
}
9595
else {
@@ -103,9 +103,9 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
103103
});
104104
}
105105

106-
$(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
106+
$step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){})});
107107

108-
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
108+
var insertStepSelect = $step('.insert-step-select');
109109
insertStepSelect.html('');
110110
// Add modules to the insertStep dropdown
111111
for (var m in modulesInfo) {
@@ -117,26 +117,26 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
117117
insertStepSelect.selectize({
118118
sortField: 'text'
119119
});
120-
$(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
120+
$step('.inserDiv .add-step-btn').prop('disabled', true);
121121

122122
insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
123-
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
123+
$step('.insertDiv .radio-group .radio').on('click', function () {
124124
$(this).parent().find('.radio').removeClass('selected');
125125
$(this).addClass('selected');
126126
newStep = $(this).attr('data-value');
127-
$(step.ui.querySelector('.insert-step-select')).val(newStep);
127+
$step('.insert-step-select').val(newStep);
128128
selectNewStepUi();
129129
insert(id);
130130
$(this).removeClass('selected');
131131
});
132132
insertStepSelect.on('change', selectNewStepUi);
133-
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
134-
};
133+
$step('.insertDiv .add-step-btn').on('click', function () { insert(id) });
134+
}
135135

136136
function insert(id) {
137137

138138
options = options || {};
139-
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
139+
var insertStepSelect = $step('.insert-step-select');
140140
if (insertStepSelect.val() == 'none') return;
141141

142142
var newStepName = insertStepSelect.val();

‎examples/lib/scopeQuery.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* @method $scope
3+
* @param {"DOMNode"} scope A DOM Node as the scope
4+
*/
5+
function $scope(scope) {
6+
return function(queryString){
7+
var element = $(scope.querySelector(queryString));
8+
9+
element.elem = function(queryString){
10+
return new $scope(scope)(queryString);
11+
}
12+
element.elemAll = function(queryString){
13+
return new $scopeAll(scope)(queryString);
14+
}
15+
16+
return element;
17+
}
18+
}
19+
20+
/**
21+
* @method $scopeAll
22+
* @param {"DOMNode"} scope A DOM Node as the scope
23+
*/
24+
function $scopeAll(scope){
25+
return function(queryString){
26+
var element = $(scope.querySelectorAll(queryString));
27+
28+
element.elem = function(queryString){
29+
return new $scope(scope)(queryString);
30+
}
31+
element.elemAll = function(queryString){
32+
return new $scopeAll(scope)(queryString);
33+
}
34+
35+
return element;
36+
}
37+
}
38+
39+
/**
40+
* @method scopeSelector
41+
* @description A scoped jQuery selector
42+
* @param {"DOMNode"} scope DOM Node as the scope
43+
*/
44+
function scopeSelector(scope){
45+
return $scope(scope);
46+
}
47+
48+
/**
49+
* @method scopeSelectorAll
50+
* @description A scoped jQuery multiple selector
51+
* @param {"DOMNode} scope DOM Node as the scope
52+
*/
53+
function scopeSelectorAll(scope){
54+
return $scopeAll(scope);
55+
}
56+
57+
module.exports = {
58+
scopeSelector,
59+
scopeSelectorAll
60+
}

0 commit comments

Comments
 (0)