employer
/
liza
1
0
Fork 0
Code Releases Activity

NaFieldStyler remove subfields from DOM 

This is necessarily primarily for a specific case: option elements in IE,
which cannot be styled. >:O

This implementation is not complete: we want to re-attach the field at the
same position it was at before it was detached.  This might not be
trivial---imagine if its sibling was also detached.

* src/ui/styler/NaFieldStyler.js (isSubField): Receive field instead of
element (to check parent)
(applyStyle, revokeStyle): Detach and re-attach field from/to DOM
respectively

* test/ui/styler/NaFieldStylerTest.js: Associated tests
master
Mike Gerwitz 2016-04-04 12:18:58 -04:00
parent 782e4832af
commit ae9f2a7cab
2 changed files with 84 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/ui/styler/NaFieldStyler.js
View File

@ -26,6 +26,8 @@ var Class = require( 'easejs' ).Class,
/**
* Style fields that are not applicable (and so do not need to collect data
* from the user)
*
* @todo Detaching should be done by DomField
*/
module.exports = Class( 'NaFieldStyler' )
.extend( FieldStyler,
@ -59,8 +61,10 @@ module.exports = Class( 'NaFieldStyler' )
// removed once jQuery is eradicated from the framework
element.style = '';
if ( this.isSubField( element ) )
if ( this.isSubField( field ) )
{
field.getParent().removeChild( element );
// this is a child of another field; don't consider it a
// containing row, since we don't want our operations affecting
// it
@ -88,8 +92,10 @@ module.exports = Class( 'NaFieldStyler' )
{
this.removeClass( element, 'hidden' );
if ( this.isSubField( element ) )
if ( this.isSubField( field ) )
{
field.getParent().appendChild( element );
return;
}
@ -110,9 +116,9 @@ module.exports = Class( 'NaFieldStyler' )
*
* @return {boolean} whether ELEMENT represents a sub-field
*/
'protected isSubField': function( element )
'protected isSubField': function( field )
{
var parent = element.parentElement;
var parent = field.getParent();
// ES3-compatible (don't use classList)
return !!( parent && /\bwidget\b/.test( parent.className ) );

87
test/ui/styler/NaFieldStylerTest.js
View File

@ -45,7 +45,7 @@ describe( 'ui.styler.NaFieldStyler', function()
r2 = { className: '' },
row = [ r1, r2 ];
Sut().applyStyle( {}, element, row );
Sut().applyStyle( getStubField( element ), element, row );
[ element, r1, r2 ].forEach( function( ele )
{
@ -61,7 +61,7 @@ describe( 'ui.styler.NaFieldStyler', function()
r2 = { style: 'foo' },
row = [ r1, r2 ];
Sut().applyStyle( {}, element, row );
Sut().applyStyle( getStubField( element ), element, row );
[ element, r1, r2 ].forEach( function( ele )
{
@ -74,14 +74,17 @@ describe( 'ui.styler.NaFieldStyler', function()
{
var element = {
className: '',
parentElement: { className: 'widget' }
parentElement: {
className: 'widget',
removeChild: function() {},
}
};
var r1 = { className: '' },
r2 = { className: '' },
row = [ r1, r2 ];
Sut().applyStyle( {}, element, row );
Sut().applyStyle( getStubField( element ), element, row );
expect( element.className ).to.match( /\bhidden\b/ );
@ -96,14 +99,17 @@ describe( 'ui.styler.NaFieldStyler', function()
{
var element = {
style: 'foo',
parentElement: { className: 'widget' }
parentElement: {
className: 'widget',
removeChild: function() {},
}
};
var r1 = { style: 'foo' },
r2 = { style: 'foo' },
row = [ r1, r2 ];
Sut().applyStyle( {}, element, row );
Sut().applyStyle( getStubField( element ), element, row );
expect( element.style ).to.equal( '' );
@ -112,6 +118,25 @@ describe( 'ui.styler.NaFieldStyler', function()
expect( ele.style ).to.equal( 'foo' );
} );
} );
// f@#(& IE
it( 'removes subfield from DOM', function( done )
{
var element = {
style: '',
parentElement: {
className: 'widget',
removeChild: function( ele )
{
expect( ele ).to.equal( element );
done();
},
}
};
Sut().applyStyle( getStubField( element ), element, [] );
} );
} );
@ -124,7 +149,7 @@ describe( 'ui.styler.NaFieldStyler', function()
r2 = { className: 'foo hidden' },
row = [ r1, r2 ];
Sut().revokeStyle( {}, element, row );
Sut().revokeStyle( getStubField( element ), element, row );
[ element, r1, r2 ].forEach( function( ele )
{
@ -141,7 +166,7 @@ describe( 'ui.styler.NaFieldStyler', function()
r2 = { style: 'foo' },
row = [ r1, r2 ];
Sut().revokeStyle( {}, element, row );
Sut().revokeStyle( getStubField( element ), element, row );
[ element, r1, r2 ].forEach( function( ele )
{
@ -154,14 +179,17 @@ describe( 'ui.styler.NaFieldStyler', function()
{
var element = {
className: 'foo hidden',
parentElement: { className: 'widget' }
parentElement: {
className: 'widget',
appendChild: function() {},
}
};
var r1 = { className: 'foo hidden' },
r2 = { className: 'foo hidden' },
row = [ r1, r2 ];
Sut().revokeStyle( {}, element, row );
Sut().revokeStyle( getStubField( element ), element, row );
expect( element.className ).to.not.match( /\bhidden\b/ );
expect( element.className ).to.match( /foo/ );
@ -171,6 +199,25 @@ describe( 'ui.styler.NaFieldStyler', function()
expect( ele.className ).to.equal( 'foo hidden' );
} );
} );
// we eventually need to care about where it's re-attached
it( 're-attaches subfield to DOM', function( done )
{
var element = {
className: '',
parentElement: {
className: 'widget',
appendChild: function( ele )
{
expect( ele ).to.equal( element );
done();
},
}
};
Sut().revokeStyle( getStubField( element ), element, [] );
} );
} );
@ -182,10 +229,13 @@ describe( 'ui.styler.NaFieldStyler', function()
{
var element = {
className: '',
parentElement: { className: 'widget' }
parentElement: {
className: 'widget',
removeChild: function() {},
}
};
expect( protSut().protIsSubField( element ) )
expect( protSut().protIsSubField( getStubField( element ) ) )
.to.be.true;
} );
@ -196,7 +246,7 @@ describe( 'ui.styler.NaFieldStyler', function()
className: '',
};
expect( protSut().protIsSubField( element ) )
expect( protSut().protIsSubField( getStubField( element ) ) )
.to.be.false;
} );
} );
@ -204,6 +254,17 @@ describe( 'ui.styler.NaFieldStyler', function()
} );
function getStubField( element )
{
return {
getParent: function()
{
return element.parentElement;
}
};
}
function protSut()
{
return Class.extend( Sut, {