@@ -6,8 +6,8 @@ export type ClassNames = string[] | ((...args: any[]) => string[]);
66 * A style associates a name with a list of CSS class names.
77 */
88export interface Style {
9- name : string ;
10- classNames : ClassNames ;
9+ name : string ;
10+ classNames : ClassNames ;
1111}
1212
1313/**
@@ -17,103 +17,103 @@ export interface Style {
1717 */
1818export interface StylingRegistry {
1919
20- /**
21- * Register a style.
22- * If a style with the given name already exists, it will be overwritten.
23- *
24- * @param styleName the name of the style
25- * @param classNames CSS class names to be applied
26- */
27- register ( styleName : string , classNames : string [ ] ) : void ;
28-
29- /**
30- * Register a style.
31- * If a style with the given name already exists, it will be overwritten.
32- *
33- * @param style the style to be registered
34- */
35- register ( style : Style ) : void ;
36-
37- /**
38- * Register multiple styles at once.
39- *
40- * @param styles an array of styles to be registered
41- */
42- registerMany ( styles : Style [ ] ) : void ;
43-
44- /**
45- * Deregister a style.
46- *
47- * @param styleName the name of the style to be un-registered
48- */
49- deregister ( styleName : string ) : void ;
50-
51- /**
52- * Obtain the CSS class name associated with the given style name.
53- * @param styleName the name whose CSS class names should be obtained
54- * @return {Array<String> } an array containing the CSS class names,
55- * if the style exists, an empty array otherwise
56- */
57- get ( styleName : string , ...args : any [ ] ) : string [ ] ;
58-
59- /**
60- * Obtain the CSS class name associated with the given style name.
61- * @param styleName the name whose CSS class names should be obtained
62- * @return a string containing the CSS class name separated by whitespace, if the style exists,
63- * empty string otherwise
64- */
65- getAsClassName ( styleName : string , ...args : any [ ] ) : string ;
20+ /**
21+ * Register a style.
22+ * If a style with the given name already exists, it will be overwritten.
23+ *
24+ * @param styleName the name of the style
25+ * @param classNames CSS class names to be applied
26+ */
27+ register ( styleName : string , classNames : string [ ] ) : void ;
28+
29+ /**
30+ * Register a style.
31+ * If a style with the given name already exists, it will be overwritten.
32+ *
33+ * @param style the style to be registered
34+ */
35+ register ( style : Style ) : void ;
36+
37+ /**
38+ * Register multiple styles at once.
39+ *
40+ * @param styles an array of styles to be registered
41+ */
42+ registerMany ( styles : Style [ ] ) : void ;
43+
44+ /**
45+ * Deregister a style.
46+ *
47+ * @param styleName the name of the style to be un-registered
48+ */
49+ deregister ( styleName : string ) : void ;
50+
51+ /**
52+ * Add a style to the given HTML element. A style is association with a list of CSS classes
53+ * to be assigned to the given HTML element
54+ *
55+ * @param {HTMLElement } html the element to which a style should be applied
56+ * @param {string } styleName the style name to be applied
57+ * @param args any additional arguments necessary for calculating a list of CSS classes to be applied
58+ * @returns {this } the styling registry for convenience reasons
59+ */
60+ addStyle ( html : Element , styleName : string , ...args : any [ ] ) : StylingRegistry ;
6661}
6762
6863/**
6964 * Styling registry implementation.
7065 */
7166export class StylingRegistryImpl implements StylingRegistry {
7267
73- constructor ( protected styles : Style [ ] = [ ] ) {
68+ constructor ( protected styles : Style [ ] = [ ] ) {
7469
75- }
76-
77- register ( style : Style ) : void ;
78- register ( name : string , classNames : ClassNames ) : void ;
79- register ( style : string | Style , classNames ?: string [ ] ) : void {
80- if ( typeof style === 'string' ) {
81- this . deregister ( style ) ;
82- this . styles . push ( { name : style , classNames} ) ;
83- } else {
84- this . deregister ( style . name ) ;
85- this . styles . push ( style ) ;
86- }
87- }
88-
89- registerMany ( styles : Style [ ] ) {
90- styles . forEach ( style => {
91- this . register ( style . name , style . classNames ) ;
92- } ) ;
93- }
70+ }
9471
95- deregister ( styleName : any ) {
96- _ . remove ( this . styles , style => style . name === styleName ) ;
72+ register ( style : Style ) : void ;
73+ register ( name : string , classNames : ClassNames ) : void ;
74+ register ( style : string | Style , classNames ?: string [ ] ) : void {
75+ if ( typeof style === 'string' ) {
76+ this . deregister ( style ) ;
77+ this . styles . push ( { name : style , classNames} ) ;
78+ } else {
79+ this . deregister ( style . name ) ;
80+ this . styles . push ( style ) ;
9781 }
98-
99- get ( styleName : string , ...args : any [ ] ) : string [ ] {
100- const foundStyle = _ . find ( this . styles , style => style . name === styleName ) ;
101- if ( ! _ . isEmpty ( foundStyle ) && typeof foundStyle . classNames === 'function' ) {
102- return foundStyle . classNames ( args ) ;
103- } else if ( ! _ . isEmpty ( foundStyle ) ) {
104- return ( foundStyle . classNames as string [ ] ) ;
105- }
106-
107- return [ ] ;
82+ }
83+
84+ registerMany ( styles : Style [ ] ) {
85+ styles . forEach ( style => {
86+ this . register ( style . name , style . classNames ) ;
87+ } ) ;
88+ }
89+
90+ deregister ( styleName : any ) {
91+ _ . remove ( this . styles , style => style . name === styleName ) ;
92+ }
93+
94+
95+ /**
96+ * Obtain the CSS class name associated with the given style name.
97+ * @param styleName the name whose CSS class names should be obtained
98+ * @param args any additional arguments necessary for calculating a list of CSS classes to be applied
99+ * @return {Array<String> } an array containing the CSS class names,
100+ * if the style exists, an empty array otherwise
101+ */
102+ get ( styleName : string , ...args : any [ ] ) : string [ ] {
103+ const foundStyle = _ . find ( this . styles , style => style . name === styleName ) ;
104+ if ( ! _ . isEmpty ( foundStyle ) && typeof foundStyle . classNames === 'function' ) {
105+ return foundStyle . classNames ( args ) ;
106+ } else if ( ! _ . isEmpty ( foundStyle ) ) {
107+ return ( foundStyle . classNames as string [ ] ) ;
108108 }
109109
110- getAsClassName ( styleName : string , ...args : any [ ] ) : string {
111- const styles = this . get ( styleName , args ) ;
112- if ( _ . isEmpty ( styles ) ) {
113- return '' ;
114- }
110+ return [ ] ;
111+ }
115112
116- return _ . join ( styles , ' ' ) ;
117- }
113+ addStyle ( html : Element , styleName : string , ...args : any [ ] ) : StylingRegistry {
114+ const styles = this . get ( styleName , args ) ;
115+ styles . forEach ( style => html . classList . add ( style ) ) ;
118116
117+ return this ;
118+ }
119119}
0 commit comments