Liberate ui/styler/
* src/ui/styler/ErrorFieldStyler.js: Added * src/ui/styler/ErrorStyler.js: Added * src/ui/styler/FieldStyler.js: Added * src/ui/styler/SidebarErrorStyler.js: Added * src/ui/styler/StepErrorStyler.js: Added * src/ui/styler/Styler.js: Addedmaster
parent
37c74eac48
commit
a3b16f33c9
|
@ -0,0 +1,132 @@
|
||||||
|
/**
|
||||||
|
* Error condition field styler
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of liza.
|
||||||
|
*
|
||||||
|
* 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 Class = require( 'easejs' ).Class,
|
||||||
|
FieldStyler = require( './FieldStyler' );
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Style field to indicate an error and displays an error message
|
||||||
|
*/
|
||||||
|
module.exports = Class( 'ErrorFieldStyler' )
|
||||||
|
.extend( FieldStyler,
|
||||||
|
{
|
||||||
|
'public getId': function()
|
||||||
|
{
|
||||||
|
return 'error';
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'public applyStyle': function( field, element, row, msg )
|
||||||
|
{
|
||||||
|
var _self = this;
|
||||||
|
|
||||||
|
// style the row containing the element
|
||||||
|
for ( var i in row )
|
||||||
|
{
|
||||||
|
this.addClass( row[ i ], 'invalid' );
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: legacy; remove
|
||||||
|
this.addClass( element, 'invalid_field' );
|
||||||
|
|
||||||
|
// display the error message
|
||||||
|
this._createMessage( field.getName(), msg, row[ 0 ], row[ 1 ] );
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'public revokeStyle': function( field, element, row )
|
||||||
|
{
|
||||||
|
var _self = this;
|
||||||
|
|
||||||
|
// un-style the row containing the element
|
||||||
|
// style the row containing the element
|
||||||
|
for ( var i in row )
|
||||||
|
{
|
||||||
|
this.removeClass( row[ i ], 'invalid' );
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: legacy; remove
|
||||||
|
this.removeClass( element, 'invalid_field' );
|
||||||
|
|
||||||
|
this._destroyMessage( row[ 0 ], row[ 1 ] );
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'private _createMessage': function( name, message, dd, dt )
|
||||||
|
{
|
||||||
|
// we can only generate the message if the parent row is available
|
||||||
|
if ( !( dd && dt ) )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var msg = document.createElement( 'div' );
|
||||||
|
msg.className = 'errmsg';
|
||||||
|
msg.innerHTML = message;
|
||||||
|
|
||||||
|
// append to dd
|
||||||
|
dd.appendChild( msg );
|
||||||
|
|
||||||
|
var height = ( msg.offsetTop + msg.offsetHeight );
|
||||||
|
|
||||||
|
// element does not have height until added to DOM
|
||||||
|
// set a default to ensure it appears to user
|
||||||
|
height = ( height === 0 )
|
||||||
|
? 45 + 'px'
|
||||||
|
: ( height + 10 ) + 'px';
|
||||||
|
|
||||||
|
dd.style.height = height;
|
||||||
|
dt.style.height = height;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'private _destroyMessage': function( dd, dt )
|
||||||
|
{
|
||||||
|
if ( !dd )
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd.style.height = '';
|
||||||
|
|
||||||
|
// note that dt may not actually exist (in fact, dd may not even be a
|
||||||
|
// dd; we should rename these variables)
|
||||||
|
dt && ( dt.style.height = '' );
|
||||||
|
|
||||||
|
var node;
|
||||||
|
|
||||||
|
// search for the message node, starting with the last element (since
|
||||||
|
// the error message was appended, we're likely to find it on our first
|
||||||
|
// try)
|
||||||
|
for ( node = dd.lastChild;
|
||||||
|
node && node.className !== 'errmsg';
|
||||||
|
node = node.previousSibling
|
||||||
|
);
|
||||||
|
|
||||||
|
// if we found it, then remove it
|
||||||
|
node && dd.removeChild( node );
|
||||||
|
}
|
||||||
|
} );
|
|
@ -0,0 +1,108 @@
|
||||||
|
/**
|
||||||
|
* Error condition field styler
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of liza.
|
||||||
|
*
|
||||||
|
* 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 Class = require( 'easejs' ).Class,
|
||||||
|
Styler = require( './Styler' );
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle error generation and defer styling to supertype
|
||||||
|
*/
|
||||||
|
module.exports = Class( 'ErrorStyler' )
|
||||||
|
.implement( Styler )
|
||||||
|
.extend(
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Hash of error messages by field name
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
'private _msgs': {},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize error styler with a hash of error messages by field name
|
||||||
|
*
|
||||||
|
* @param {Object} msgs hash of error messages by field name
|
||||||
|
*/
|
||||||
|
'virtual __construct': function( msgs )
|
||||||
|
{
|
||||||
|
this._msgs = msgs;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'public getHooks': function( uistyler )
|
||||||
|
{
|
||||||
|
var _self = this;
|
||||||
|
|
||||||
|
return {
|
||||||
|
fieldError: function( context, failures, msgs )
|
||||||
|
{
|
||||||
|
msgs = msgs || {};
|
||||||
|
|
||||||
|
for ( var name in failures )
|
||||||
|
{
|
||||||
|
var msgset = ( msgs[ name ] || [] );
|
||||||
|
|
||||||
|
for ( var index in failures[ name ] )
|
||||||
|
{
|
||||||
|
// if no error message was provided, fall back to one of
|
||||||
|
// the defaults
|
||||||
|
var msg = (
|
||||||
|
msgset[ index ]
|
||||||
|
|| _self._msgs[ name ]
|
||||||
|
|| "Field is invalid"
|
||||||
|
);
|
||||||
|
|
||||||
|
_self.onFieldError(
|
||||||
|
context.getFieldByName( name, index ),
|
||||||
|
msg
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fieldFixed: function( context, fixed )
|
||||||
|
{
|
||||||
|
for ( var name in fixed )
|
||||||
|
{
|
||||||
|
for ( var index in fixed[ name ] )
|
||||||
|
{
|
||||||
|
_self.onFieldFixed(
|
||||||
|
context.getFieldByName( name, index )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'virtual protected onFieldError': function( field, msg )
|
||||||
|
{
|
||||||
|
// do nothing by default
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'virtual protected onFieldFixed': function( field )
|
||||||
|
{
|
||||||
|
// do nothing by default
|
||||||
|
}
|
||||||
|
} );
|
|
@ -0,0 +1,91 @@
|
||||||
|
/**
|
||||||
|
* Style fields using CSS
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of liza.
|
||||||
|
*
|
||||||
|
* 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 AbstractClass = require( 'easejs' ).AbstractClass;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Style fields using CSS
|
||||||
|
*/
|
||||||
|
module.exports = AbstractClass( 'FieldStyler',
|
||||||
|
{
|
||||||
|
'abstract public getId': [],
|
||||||
|
|
||||||
|
'abstract public applyStyle': [ 'field', 'element', 'row' ],
|
||||||
|
|
||||||
|
'abstract public revokeStyle': [ 'field', 'element', 'row' ],
|
||||||
|
|
||||||
|
|
||||||
|
'protected addClass': function( element, cls )
|
||||||
|
{
|
||||||
|
if ( !element )
|
||||||
|
{
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if we are given an array, then recurse
|
||||||
|
if ( Array.isArray( element ) )
|
||||||
|
{
|
||||||
|
for ( var i in element )
|
||||||
|
{
|
||||||
|
this.addClass( element[ i ], cls );
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if ( typeof element.className === 'string' )
|
||||||
|
{
|
||||||
|
element.className += ' ' + cls;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'protected removeClass': function( element, cls )
|
||||||
|
{
|
||||||
|
if ( !element )
|
||||||
|
{
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if we are given an array, then recurse
|
||||||
|
if ( Array.isArray( element ) )
|
||||||
|
{
|
||||||
|
for ( var i in element )
|
||||||
|
{
|
||||||
|
this.removeClass( element[ i ], cls );
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else if ( typeof element.className === 'string' )
|
||||||
|
{
|
||||||
|
// note that we use a space instead of a boundary for the character
|
||||||
|
// preceding the match due to the implementation of addClass()
|
||||||
|
element.className = element.className.replace(
|
||||||
|
new RegExp( ( ' ' + cls + '\\b' ), 'g' ), ''
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
} );
|
|
@ -0,0 +1,66 @@
|
||||||
|
/**
|
||||||
|
* Style errors in sidebar
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of liza.
|
||||||
|
*
|
||||||
|
* 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 Class = require( 'easejs' ).Class,
|
||||||
|
ErrorStyler = require( './ErrorStyler' );
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Displays errors in the sidebar
|
||||||
|
*
|
||||||
|
* TODO: This is an adapter around the old system; it could use some
|
||||||
|
* refactoring.
|
||||||
|
*/
|
||||||
|
module.exports = Class( 'SidebarErrorStyler' )
|
||||||
|
.extend( ErrorStyler,
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Error box in which to display errors
|
||||||
|
* @type {FormErrorBox}
|
||||||
|
*/
|
||||||
|
'private _errbox': null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ui instance
|
||||||
|
* @type {Ui}
|
||||||
|
*/
|
||||||
|
'private _ui': null,
|
||||||
|
|
||||||
|
|
||||||
|
'override __construct': function( msgs, error_box, ui )
|
||||||
|
{
|
||||||
|
this._errbox = error_box;
|
||||||
|
this._ui = ui;
|
||||||
|
this.__super( msgs );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'override protected onFieldError': function( field, msg )
|
||||||
|
{
|
||||||
|
this._errbox.show( field.getName(), field.getIndex(), msg );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'override protected onFieldFixed': function( field )
|
||||||
|
{
|
||||||
|
this._errbox.removeError( field.getName(), field.getIndex() );
|
||||||
|
}
|
||||||
|
} );
|
|
@ -0,0 +1,52 @@
|
||||||
|
/**
|
||||||
|
* Styles errors on steps
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of liza.
|
||||||
|
*
|
||||||
|
* 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 Class = require( 'easejs' ).Class,
|
||||||
|
ErrorStyler = require( './ErrorStyler' );
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trigger field styling for errors on the parent step itself
|
||||||
|
*/
|
||||||
|
module.exports = Class( 'StepErrorStyler' )
|
||||||
|
.extend( ErrorStyler,
|
||||||
|
{
|
||||||
|
'private _style': null,
|
||||||
|
|
||||||
|
|
||||||
|
'override __construct': function( msgs, field_style )
|
||||||
|
{
|
||||||
|
this._style = field_style;
|
||||||
|
this.__super( msgs );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'override protected onFieldError': function( field, msg )
|
||||||
|
{
|
||||||
|
field.applyStyle( this._style, msg );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
'override protected onFieldFixed': function( field )
|
||||||
|
{
|
||||||
|
field.revokeStyle( this._style );
|
||||||
|
}
|
||||||
|
} );
|
|
@ -0,0 +1,30 @@
|
||||||
|
/**
|
||||||
|
* Styler interface
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of liza.
|
||||||
|
*
|
||||||
|
* 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 Interface = require( 'easejs' ).Interface;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @todo Can be used for type hinting, but we need an actual API!
|
||||||
|
*/
|
||||||
|
module.exports = Interface( 'Styler',
|
||||||
|
{
|
||||||
|
} );
|
Loading…
Reference in New Issue