employer
/
liza
1
0
Fork 0
Code Releases Activity

[DEV-7060] Remove key sizzle calls from ElementStyler 

See merge request floss/liza!90
Goldsmith, Mark 2020-02-19 09:33:24 -05:00
parent 200ae99ce5 1e76291ada
commit 29fae72aea
2 changed files with 229 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/ui/ElementStyler.js
View File

@ -20,7 +20,7 @@
*
* @needsLove
* - Everything! This class exists from when the framework was barely
* more than a few prototypes and has rotted ever since with little else
* more than a few prototypes and has rotted ever since with little else
* but workarounds.
* @end needsLove
*/
@ -82,6 +82,18 @@ module.exports = Class( 'ElementStyler',
*/
'private _$context': null,
/**
* jQuery Object
* @type {jQuery}
*/
'private _jquery': null,
/**
* HTML Document
* @type {HTMLElement}
*/
'private _document': null,
_answerStyles: {
'deductible': function( value, _, default_val )
@ -186,6 +198,8 @@ module.exports = Class( 'ElementStyler',
__construct: function( jquery )
{
this._$context = jquery;
this._jquery = jquery;
this._document = jquery( 'body' ).context;
},
@ -802,28 +816,34 @@ module.exports = Class( 'ElementStyler',
*
* This allows for a simple mapping from bucket to UI.
*
* @param {string} name element name (question name)
* @param {number=} index index of element to retrieve (bucket index)
* @param {string=} filter filter to apply to widgets
* @param {jQuery=} $context filtering context
* @param {string} name element name (question name)
* @param {number=} index index of element to retrieve (bucket index)
* @param {string=} filter filter to apply to widgets
* @param {HTMLElement} $context filtering context
*
* @return {jQuery} matches
*/
'public getWidgetByName': function( name, index, filter, $context )
'public getWidgetByName': function( name, index, filter, context )
{
$context = $context || this._$context;
context = context || this._$context;
// Todo: Transitional step to remove jQuery
if ( context instanceof jQuery )
{
context = context[ 0 ];
}
// find the field; note that we *skip* the index selection if we have
// been notified---via a property on the context---that the content
// should contain only the index we are looking for
var $results = this._getWidgetByNameQuick( name, index, $context );
var results = this._getWidgetByNameQuick( name, index, context );
if ( filter )
{
return $results.filter( filter );
throw new Error( 'Filter deprecated' );
}
return $results;
return this._jquery( results );
},
@ -835,33 +855,31 @@ module.exports = Class( 'ElementStyler',
* performed the check to begin with, so the idea is to find the id for as
* many as possible.
*/
'private _getWidgetByNameQuick': function( name, index, $context )
'private _getWidgetByNameQuick': function( name, index, context )
{
var hasindex = ( ( index !== undefined ) && !$context.singleIndex );
var hasindex = ( ( index !== undefined ) && !context.singleIndex );
if ( hasindex )
{
var id = this._getElementId( name, index, $context );
var id = this._getElementId( name, index );
if ( id )
{
$element = $context.find( '#' + id );
element = this._document.getElementById( id );
// let's hope for the best
if ( $element.length )
if ( element !== null )
{
return $element;
return element;
}
}
// Fallback to the painfully slow method.
return context.querySelectorAll( '[data-field-name="' + name + '"]' )[ index ];
}
// damnit. Fallback to the painfully slow method.
return $context.find( '[data-field-name="' + name + '"]' +
( ( hasindex )
? ':nth(' + +index + ')'
: ''
)
);
// If no index, return first element
return context.querySelector( '[data-field-name="' + name + '"]' );
},
@ -922,28 +940,32 @@ module.exports = Class( 'ElementStyler',
* using NAME as an element id; otherwise, this acts just as
* getElementByName.
*
* @param {string} name element name (question name)
* @param {number=} index index of element to retrieve (bucket index)
* @param {string=} filter filter to apply to widgets
* @param {jQuery=} $context filtering context
* @param {string} name element name (question name)
* @param {number=} index index of element to retrieve (bucket index)
* @param {string=} filter filter to apply to widgets
* @param {HTMLElement} context filtering context
*
* @return {jQuery} matches
*/
'public getElementByNameLax': function(
name, index, filter, $context
name, index, filter, context
)
{
$context = $context || this._$context;
context = context || this._$context;
// Todo: Transitional step to remove jQuery
if ( context instanceof jQuery )
{
context = context[ 0 ];
}
if ( !( this.isAField( name ) ) )
{
return $context.find(
'#' + name + ':nth(' + index + ')'
);
return this._jquery( context.querySelectorAll( '#' + name )[ index ] );
}
return this.getElementByName(
name, index, filter, $context
name, index, filter, context
);
},
@ -1030,11 +1052,25 @@ module.exports = Class( 'ElementStyler',
},
'private _getElementId': function( name, index, $context )
/**
* Determines the id of an element based on the type
*
* @param {string} name element name
* @param {number} index index of element to retrieve (bucket index)
*
* @return {string} element id
*/
'private _getElementId': function( name, index )
{
switch ( this._getElementType( name ) )
{
case 'radio': return '';
case 'radio':
return '';
case 'answer':
return name;
case 'checkbox':
name += '_n';
break;
case 'noyes':
// append yes/no depending on whether or not the given index is
// even/odd
@ -1042,13 +1078,11 @@ module.exports = Class( 'ElementStyler',
? '_y'
: '_n';
index = index / 2;
/* fallthrough */
default:
return 'q_' + name + '_' + index;
index = Math.floor( index / 2 );
break;
}
return 'q_' + name + '_' + index;
},

154
test/ui/ElementStylerTest.js 100644
View File

@ -0,0 +1,154 @@
/**
* Test case for ElementStyler
*
* Copyright (C) 2010-2020 R-T Specialty, LLC.
*
* This file is part of the Liza Data Collection Framework
*
* Liza is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var Sut = require( '../../' ).ui.ElementStyler,
expect = require( 'chai' ).expect,
sinon = require( 'sinon' ),
Class = require( 'easejs' ).Class;
describe( 'ui.ElementStyler', () =>
{
[
{
name: 'business_city',
css_class: '',
index: '0',
qtypes: {
business_city: {
type: 'text',
}
},
expected_id: 'q_business_city_0',
},
{
name: 'business_city',
css_class: '',
index: '1',
qtypes: {
business_city: {
type: 'text',
}
},
expected_id: 'q_business_city_1',
},
{
name: 'sgo_foo',
css_class: 'checkbox',
index: '0',
qtypes: {
sgo_foo: {
type: 'checkbox',
}
},
expected_id: 'q_sgo_foo_n_0',
},
{
name: 'noyes_foo',
css_class: 'noyes',
index: '0',
qtypes: {
noyes_foo: {
type: 'noyes',
}
},
expected_id: 'q_noyes_foo_n_0',
},
{
name: 'noyes_foo',
css_class: 'noyes',
index: '1',
qtypes: {
noyes_foo: {
type: 'noyes',
}
},
expected_id: 'q_noyes_foo_y_0',
},
{
name: 'noyes_baz',
css_class: 'noyes',
index: '4',
qtypes: {
noyes_baz: {
type: 'noyes',
}
},
expected_id: 'q_noyes_baz_n_2',
},
{
name: 'noyes_baz',
css_class: 'noyes',
index: '5',
qtypes: {
noyes_baz: {
type: 'noyes',
}
},
expected_id: 'q_noyes_baz_y_2',
},
].forEach( ( { name, css_class, qtypes, index, expected_id } ) =>
{
it( "determines the correct element id for " + name, () =>
{
// Stub document and jQuery calls
$ = sinon.stub();
jQuery = sinon.stub();
const document = {
getElementById: sinon.stub()
};
jQuery.withArgs( 'body' ).returns( { context: document } );
const sut = Sut( jQuery );
sut.setTypeData( qtypes );
const node = '<input id="' + expected_id
+ '" class="' + css_class + '" name="' + name
+ '[]" data-field-name="' + name
+ '" data-index="' + index
+ '"></input>';
const html = '<div class="foo">' + node + '</div>';
const context = {
html: html,
};
document.getElementById.returns( node );
sut.getWidgetByName( name, index, null, context );
const actual_id = document.getElementById.getCall( 0 ).args[ 0 ];
expect( actual_id )
.to.equal( expected_id );
} );
} );
} );