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. 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 #### Methods of the Returned Object
* `elem()`: Selects an element inside the scope; * `elem()`: Selects an element inside the scope.
* `elemAll()`: Selects all the instances of a given 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 #### Example

13
examples/lib/defaultHtmlStepUi.js
View File

@@ -8,15 +8,14 @@
// output values, step information. // output values, step information.
// See documetation for more details. // See documetation for more details.
var intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'), const intermediateHtmlStepUi = require('./intermediateHtmlStepUi.js'),
urlHash = require('./urlHash.js'), urlHash = require('./urlHash.js'),
_ = require('lodash'), _ = require('lodash'),
mapHtmlTypes = require('./mapHtmltypes'), mapHtmlTypes = require('./mapHtmltypes'),
scopeQuery = require('./scopeQuery'), scopeQuery = require('./scopeQuery');
$stepAll,
$step;
function DefaultHtmlStepUi(_sequencer, options) { function DefaultHtmlStepUi(_sequencer, options) {
let $step, $stepAll;
options = options || {}; options = options || {};
var stepsEl = options.stepsEl || document.querySelector('#steps'); var stepsEl = options.stepsEl || document.querySelector('#steps');
@@ -74,8 +73,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
$step = scopeQuery.scopeSelector(step.ui); $step = scopeQuery.scopeSelector(step.ui);
$stepAll = scopeQuery.scopeSelectorAll(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]; step.imgElement = $step('a img.img-thumbnail')[0];
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) { if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -268,7 +269,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$step('.load').hide(); $step('.load').hide();
step.imgElement.src = (step.name == 'load-image') ? step.output.src : step.output; 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++) { for (let index = 0; index < step.linkElements.length; index++) {
if (step.linkElements[index].contains(imgthumbnail)) if (step.linkElements[index].contains(imgthumbnail))
step.linkElements[index].href = step.imgElement.src; 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() { function selectNewStepUi($step) {
//var insertSelect = $step('.insert-step-select'); var insertSelect = $step('.insert-step-select');
var insertSelect = $(step.ui.querySelector('.insert-step-select'));
var m = insertSelect.val(); var m = insertSelect.val();
// $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description); $step('.insertDiv .info').html(_sequencer.modulesInfo(m).description);
// $step('.insertDiv .add-step-btn').prop('disabled', false); $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));
} }
var toggleDiv = function(callback = function(){}){ var toggleDiv = function($step, callback = function(){}){
/*$step('.insertDiv').collapse('toggle'); $step('.insertDiv').collapse('toggle');
if ($step('.insert-text').css('display') != 'none'){ if ($step('.insert-text').css('display') != 'none'){
$step('.insert-text').fadeToggle(200, function(){$step('.no-insert-text').fadeToggle(200, callback)});*/ $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);});
} }
else { else {
//$step('.no-insert-text').fadeToggle(200, function(){$step('.insert-text').fadeToggle(200, callback)}); $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);});
} }
}; };
insertStep = function (id) { insertStep = function (id) {
const $step = step.ui.$step,
$stepAll = step.ui.$stepAll;
var modulesInfo = _sequencer.modulesInfo(); var modulesInfo = _sequencer.modulesInfo();
var parser = new DOMParser(); var parser = new DOMParser();
var addStepUI = stepUI(); var addStepUI = stepUI();
addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div'); addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
if ($step('.insertDiv').length > 0){
//if ($step('.insertDiv').length > 0){ toggleDiv($step);
if ($(step.ui.querySelector('.insertDiv')).length > 0){
toggleDiv();
} }
else { else {
step.ui step.ui
@@ -107,19 +99,14 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
.insertAdjacentElement('afterend', .insertAdjacentElement('afterend',
addStepUI addStepUI
); );
toggleDiv(function(){ toggleDiv($step, function(){
insertPreview.updatePreviews(step.output, '.insertDiv'); 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');*/ 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'));
insertStepSelect.html(''); insertStepSelect.html('');
// Add modules to the insertStep dropdown // Add modules to the insertStep dropdown
for (var m in modulesInfo) { for (var m in modulesInfo) {
@@ -131,35 +118,30 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
insertStepSelect.selectize({ insertStepSelect.selectize({
sortField: 'text' sortField: 'text'
}); });
//$step('.inserDiv .add-step-btn').prop('disabled', true); $step('.inserDiv .add-step-btn').prop('disabled', true);
$(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
insertStepSelect.append('<option value="" disabled selected>Select a Module</option>'); insertStepSelect.append('<option value="" disabled selected>Select a Module</option>');
//$step('.insertDiv .radio-group .radio').on('click', function () { $step('.insertDiv .radio-group .radio').on('click', function () {
$(step.ui.querySelector('.insertDiv .radio-group .radio')).on('click', function () {
$(this).parent().find('.radio').removeClass('selected'); $(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
newStep = $(this).attr('data-value'); newStep = $(this).attr('data-value');
//$step('.insert-step-select').val(newStep); $step('.insert-step-select').val(newStep);
$(step.ui.querySelector('.insert-step-select')).val(newStep); selectNewStepUi($step);
selectNewStepUi(); insert(id, $step);
insert(id);
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
insertStepSelect.on('change', selectNewStepUi); insertStepSelect.on('change', () => {selectNewStepUi($step);});
//$step('.insertDiv .add-step-btn').on('click', function () { insert(id) }); $step('.insertDiv .add-step-btn').on('click', function () { insert(id, $step); });
$(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id); });
}; };
function insert(id) { function insert(id, $step) {
options = options || {}; options = options || {};
//var insertStepSelect = $step('.insert-step-select'); var insertStepSelect = $step('.insert-step-select');
var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
if (insertStepSelect.val() == 'none') return; if (insertStepSelect.val() == 'none') return;
var newStepName = insertStepSelect.val(); var newStepName = insertStepSelect.val();
toggleDiv(); toggleDiv($step);
var sequenceLength = 1; var sequenceLength = 1;
if (sequencer.sequences[newStepName]) { if (sequencer.sequences[newStepName]) {
sequenceLength = sequencer.sequences[newStepName].length; sequenceLength = sequencer.sequences[newStepName].length;

30
examples/lib/scopeQuery.js
View File

@@ -1,6 +1,6 @@
/** /**
* @method $scope * @method $scope
* @param {"DOMNode"} scope A DOM Node as the scope * @param {"DOMNode"} scope A DOM Node as the scope
*/ */
function $scope(scope) { function $scope(scope) {
return function(queryString){ return function(queryString){
@@ -8,18 +8,22 @@ function $scope(scope) {
element.elem = function(queryString){ element.elem = function(queryString){
return new $scope(scope)(queryString); return new $scope(scope)(queryString);
} };
element.elemAll = function(queryString){ element.elemAll = function(queryString){
return new $scopeAll(scope)(queryString); return new $scopeAll(scope)(queryString);
} };
element.getDomElem = function(i = 0){
return element[i];
};
element.getScope = () => scope;
return element; return element;
} };
} }
/** /**
* @method $scopeAll * @method $scopeAll
* @param {"DOMNode"} scope A DOM Node as the scope * @param {"DOMNode"} scope A DOM Node as the scope
*/ */
function $scopeAll(scope){ function $scopeAll(scope){
return function(queryString){ return function(queryString){
@@ -27,19 +31,23 @@ function $scopeAll(scope){
element.elem = function(queryString){ element.elem = function(queryString){
return new $scope(scope)(queryString); return new $scope(scope)(queryString);
} };
element.elemAll = function(queryString){ element.elemAll = function(queryString){
return new $scopeAll(scope)(queryString); return new $scopeAll(scope)(queryString);
} };
element.getDomElem = function(i = 0){
return element[i];
};
element.getScope = () => scope;
return element; return element;
} };
} }
/** /**
* @method scopeSelector * @method scopeSelector
* @description A scoped jQuery selector * @description A scoped jQuery selector
* @param {"DOMNode"} scope DOM Node as the scope * @param {"DOMNode"} scope DOM Node as the scope
*/ */
function scopeSelector(scope){ function scopeSelector(scope){
return $scope(scope); return $scope(scope);
@@ -48,7 +56,7 @@ function scopeSelector(scope){
/** /**
* @method scopeSelectorAll * @method scopeSelectorAll
* @description A scoped jQuery multiple selector * @description A scoped jQuery multiple selector
* @param {"DOMNode} scope DOM Node as the scope * @param {"DOMNode} scope DOM Node as the scope
*/ */
function scopeSelectorAll(scope){ function scopeSelectorAll(scope){
return $scopeAll(scope); return $scopeAll(scope);
@@ -57,4 +65,4 @@ function scopeSelectorAll(scope){
module.exports = { module.exports = {
scopeSelector, scopeSelector,
scopeSelectorAll scopeSelectorAll
} };