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

Fix ScopeQuery (#1132)

Browse Source 
* update dist

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

dist update

Revert "dist update"

This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d.

* 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

* fix link elems, add a new scopeQuery Method

* fixed undefined error

* fix everything

* getScope to scopeAll

* add new methods to CONTRIBUTING file
This commit is contained in:
Harsh Khandeparkar
2019-07-01 21:02:11 +05:30
committed by Jeffrey Warren
parent 2c58edfe9a
commit eff0d383c8
4 changed files with 55 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CONTRIBUTING.md
View File

@@ -425,8 +425,10 @@ var $step = scopeQuery.scopeSelector(scope),
This will return an object with a constructor which returns a `jQuery` object (from inside the scope) but with new `elem` and `elemAll` methods.
#### Methods of the Returned Object
* `elem()`: Selects an element inside the scope;
* `elemAll()`: Selects all the instances of a given element inside the scope;
* `elem()`: Selects an element inside the scope.
* `elemAll()`: Selects all the instances of a given element inside the scope.
* `getScope()`: Returns the scope as a DOM element.
* `getDomElem()`: Returns the scoped element as a DOM element instead of a jquery object.
#### Example

13
examples/lib/defaultHtmlStepUi.js
View File

@@ -8,15 +8,14 @@
// output values, step information.
// See documetation for more details.
var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
const intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
urlHash = require('./urlHash.js'),
_ = require('lodash'),
mapHtmlTypes = require('./mapHtmltypes'),
scopeQuery = require('./scopeQuery'),
$stepAll,
$step;
scopeQuery = require('./scopeQuery');
function DefaultHtmlStepUi(_sequencer, options) {
let $step, $stepAll;
options = options || {};
var stepsEl = options.stepsEl || document.querySelector('#steps');
@@ -74,8 +73,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
$step = scopeQuery.scopeSelector(step.ui);
$stepAll = scopeQuery.scopeSelectorAll(step.ui);
step.ui.$step = $step;
step.ui.$stepAll = $stepAll;
step.linkElements = $stepAll('a');
step.linkElements = step.ui.querySelectorAll('a');
step.imgElement = $step('a img.img-thumbnail')[0];
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -268,7 +269,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$step('.load').hide();
step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output;
var imgthumbnail = $step('.img-thumbnail');
var imgthumbnail = $step('.img-thumbnail').getDomElem();
for (let index = 0; index < step.linkElements.length; index++) {
if (step.linkElements[index].contains(imgthumbnail))
step.linkElements[index].href = step.imgElement.src;

68
examples/lib/intermediateHtmlStepUi.js
View File

@@ -65,41 +65,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
}
function selectNewStepUi() {
//var insertSelect = $step('.insert-step-select');
var insertSelect = $(step.ui.querySelector('.insert-step-select'));
function selectNewStepUi($step) {
var insertSelect = $step('.insert-step-select');
var m = insertSelect.val();
// $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
// $step('.insertDiv .add-step-btn').prop('disabled', false);
$(step.ui.querySelector('.insertDiv .info').html(_sequencer.modulesInfo(m).description));
$(step.ui.querySelector('.insertDiv .add-step-btn').prop('disabled', false));
$step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
$step('.insertDiv .add-step-btn').prop('disabled', false);
}
var toggleDiv = function(callback = function(){}){
/*$step('.insertDiv').collapse('toggle');
var toggleDiv = function($step, callback = function(){}){
$step('.insertDiv').collapse('toggle');
if ($step('.insert-text').css('display') != 'none'){
$step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});*/
$(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);});
$step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback);});
}
else {
//$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)});
$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback);});
$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback);});
}
};
insertStep = function (id) {
const $step = step.ui.$step,
$stepAll = step.ui.$stepAll;
var modulesInfo = _sequencer.modulesInfo();
var parser = new DOMParser();
var addStepUI = stepUI();
addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
//if ($step('.insertDiv').length > 0){
if ($(step.ui.querySelector('.insertDiv')).length > 0){
toggleDiv();
if ($step('.insertDiv').length > 0){
toggleDiv($step);
}
else {
step.ui
@@ -107,19 +99,14 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
.insertAdjacentElement('afterend',
addStepUI
);
toggleDiv(function(){
toggleDiv($step, function(){
insertPreview.updatePreviews(step.output, '.insertDiv');
});
}
/*$step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){})});
$step('.insertDiv .close-insert-box').off('click').on('click', function(){toggleDiv(function(){});});
var insertStepSelect = $step('.insert-step-select');*/
$(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){});});
//var insertStepSelect = $step('.insert-step-select');
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
var insertStepSelect = $step('.insert-step-select');
insertStepSelect.html('');
// Add modules to the insertStep dropdown
for (var m in modulesInfo) {
@@ -131,35 +118,30 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
insertStepSelect.selectize({
sortField: 'text'
});
//$step('.inserDiv .add-step-btn').prop('disabled', true);
$(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
$step('.inserDiv .add-step-btn').prop('disabled', true);
insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
//$step('.insertDiv .radio-group .radio').on('click', function () {
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
$step('.insertDiv .radio-group .radio').on('click', function () {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
//$step('.insert-step-select').val(newStep);
$(step.ui.querySelector('.insert-step-select')).val(newStep);
selectNewStepUi();
insert(id);
$step('.insert-step-select').val(newStep);
selectNewStepUi($step);
insert(id, $step);
$(this).removeClass('selected');
});
insertStepSelect.on('change', selectNewStepUi);
//$step('.insertDiv .add-step-btn').on('click', function () { insert(id) });
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
insertStepSelect.on('change', () => {selectNewStepUi($step);});
$step('.insertDiv .add-step-btn').on('click', function () { insert(id, $step); });
};
function insert(id) {
function insert(id, $step) {
options = options || {};
//var insertStepSelect = $step('.insert-step-select');
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
var insertStepSelect = $step('.insert-step-select');
if (insertStepSelect.val() == 'none') return;
var newStepName = insertStepSelect.val();
toggleDiv();
toggleDiv($step);
var sequenceLength = 1;
if (sequencer.sequences[newStepName]) {
sequenceLength = sequencer.sequences[newStepName].length;

22
examples/lib/scopeQuery.js
View File

@@ -8,13 +8,17 @@ function $scope(scope) {
element.elem = function(queryString){
return new $scope(scope)(queryString);
}
};
element.elemAll = function(queryString){
return new $scopeAll(scope)(queryString);
}
};
element.getDomElem = function(i = 0){
return element[i];
};
element.getScope = () => scope;
return element;
}
};
}
/**
@@ -27,13 +31,17 @@ function $scopeAll(scope){
element.elem = function(queryString){
return new $scope(scope)(queryString);
}
};
element.elemAll = function(queryString){
return new $scopeAll(scope)(queryString);
}
};
element.getDomElem = function(i = 0){
return element[i];
};
element.getScope = () => scope;
return element;
}
};
}
/**
@@ -57,4 +65,4 @@ function scopeSelectorAll(scope){
module.exports = {
scopeSelector,
scopeSelectorAll
}
};