|
|
@@ -165,91 +165,116 @@ mix( StylesConverter, EmitterMixin );
|
|
|
|
|
|
const stylesConverter = new StylesConverter();
|
|
|
|
|
|
-stylesConverter.on( 'normalize:border', normalizeBorder );
|
|
|
-
|
|
|
-// Border-position shorthands.
|
|
|
-stylesConverter.on( 'normalize:border-top', getBorderPositionNormalizer( 'top' ) );
|
|
|
-stylesConverter.on( 'normalize:border-right', getBorderPositionNormalizer( 'right' ) );
|
|
|
-stylesConverter.on( 'normalize:border-bottom', getBorderPositionNormalizer( 'bottom' ) );
|
|
|
-stylesConverter.on( 'normalize:border-left', getBorderPositionNormalizer( 'left' ) );
|
|
|
-
|
|
|
-// Border-property shorthands.
|
|
|
-stylesConverter.on( 'normalize:border-color', getBorderPropertyNormalizer( 'color' ) );
|
|
|
-stylesConverter.on( 'normalize:border-width', getBorderPropertyNormalizer( 'width' ) );
|
|
|
-stylesConverter.on( 'normalize:border-style', getBorderPropertyNormalizer( 'style' ) );
|
|
|
-
|
|
|
-// Border longhands.
|
|
|
-stylesConverter.on( 'normalize:border-top-color', getBorderPropertyPositionNormalizer( 'color', 'top' ) );
|
|
|
-stylesConverter.on( 'normalize:border-top-style', getBorderPropertyPositionNormalizer( 'style', 'top' ) );
|
|
|
-stylesConverter.on( 'normalize:border-top-width', getBorderPropertyPositionNormalizer( 'width', 'top' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:border-right-color', getBorderPropertyPositionNormalizer( 'color', 'right' ) );
|
|
|
-stylesConverter.on( 'normalize:border-right-style', getBorderPropertyPositionNormalizer( 'style', 'right' ) );
|
|
|
-stylesConverter.on( 'normalize:border-right-width', getBorderPropertyPositionNormalizer( 'width', 'right' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:border-bottom-color', getBorderPropertyPositionNormalizer( 'color', 'bottom' ) );
|
|
|
-stylesConverter.on( 'normalize:border-bottom-style', getBorderPropertyPositionNormalizer( 'style', 'bottom' ) );
|
|
|
-stylesConverter.on( 'normalize:border-bottom-width', getBorderPropertyPositionNormalizer( 'width', 'bottom' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:border-left-color', getBorderPropertyPositionNormalizer( 'color', 'left' ) );
|
|
|
-stylesConverter.on( 'normalize:border-left-style', getBorderPropertyPositionNormalizer( 'style', 'left' ) );
|
|
|
-stylesConverter.on( 'normalize:border-left-width', getBorderPropertyPositionNormalizer( 'width', 'left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:margin', getPositionShorthandNormalizer( 'margin' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:margin-top', ( evt, data ) => ( data.path = 'margin.top' ) );
|
|
|
-stylesConverter.on( 'normalize:margin-right', ( evt, data ) => ( data.path = 'margin.right' ) );
|
|
|
-stylesConverter.on( 'normalize:margin-bottom', ( evt, data ) => ( data.path = 'margin.bottom' ) );
|
|
|
-stylesConverter.on( 'normalize:margin-left', ( evt, data ) => ( data.path = 'margin.left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:padding', getPositionShorthandNormalizer( 'padding' ) );
|
|
|
-stylesConverter.on( 'normalize:padding-top', ( evt, data ) => ( data.path = 'padding.top' ) );
|
|
|
-stylesConverter.on( 'normalize:padding-right', ( evt, data ) => ( data.path = 'padding.right' ) );
|
|
|
-stylesConverter.on( 'normalize:padding-bottom', ( evt, data ) => ( data.path = 'padding.bottom' ) );
|
|
|
-stylesConverter.on( 'normalize:padding-left', ( evt, data ) => ( data.path = 'padding.left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'normalize:background', normalizeBackground );
|
|
|
-stylesConverter.on( 'normalize:background-color', ( evt, data ) => ( data.path = 'background.color' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'extract:border-top', borderPositionExtractor( 'top' ) );
|
|
|
-stylesConverter.on( 'extract:border-right', borderPositionExtractor( 'right' ) );
|
|
|
-stylesConverter.on( 'extract:border-bottom', borderPositionExtractor( 'bottom' ) );
|
|
|
-stylesConverter.on( 'extract:border-left', borderPositionExtractor( 'left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'extract:border-top-color', ( evt, data ) => ( data.path = 'border.color.top' ) );
|
|
|
-stylesConverter.on( 'extract:border-right-color', ( evt, data ) => ( data.path = 'border.color.right' ) );
|
|
|
-stylesConverter.on( 'extract:border-bottom-color', ( evt, data ) => ( data.path = 'border.color.bottom' ) );
|
|
|
-stylesConverter.on( 'extract:border-left-color', ( evt, data ) => ( data.path = 'border.color.left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'extract:border-top-width', ( evt, data ) => ( data.path = 'border.width.top' ) );
|
|
|
-stylesConverter.on( 'extract:border-right-width', ( evt, data ) => ( data.path = 'border.width.right' ) );
|
|
|
-stylesConverter.on( 'extract:border-bottom-width', ( evt, data ) => ( data.path = 'border.width.bottom' ) );
|
|
|
-stylesConverter.on( 'extract:border-left-width', ( evt, data ) => ( data.path = 'border.width.left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'extract:border-top-style', ( evt, data ) => ( data.path = 'border.style.top' ) );
|
|
|
-stylesConverter.on( 'extract:border-right-style', ( evt, data ) => ( data.path = 'border.style.right' ) );
|
|
|
-stylesConverter.on( 'extract:border-bottom-style', ( evt, data ) => ( data.path = 'border.style.bottom' ) );
|
|
|
-stylesConverter.on( 'extract:border-left-style', ( evt, data ) => ( data.path = 'border.style.left' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'reduce:border-color', getTopRightBottomLeftValueReducer( 'border-color' ) );
|
|
|
-stylesConverter.on( 'reduce:border-style', getTopRightBottomLeftValueReducer( 'border-style' ) );
|
|
|
-stylesConverter.on( 'reduce:border-width', getTopRightBottomLeftValueReducer( 'border-width' ) );
|
|
|
-stylesConverter.on( 'reduce:border-top', ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'top' )( data.value ) ) );
|
|
|
-stylesConverter.on( 'reduce:border-right', ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'right' )( data.value ) ) );
|
|
|
-stylesConverter.on( 'reduce:border-bottom', ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'bottom' )( data.value ) ) );
|
|
|
-stylesConverter.on( 'reduce:border-left', ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'left' )( data.value ) ) );
|
|
|
-stylesConverter.on( 'reduce:border', getBorderReducer );
|
|
|
-
|
|
|
-stylesConverter.on( 'reduce:margin', getTopRightBottomLeftValueReducer( 'margin' ) );
|
|
|
-stylesConverter.on( 'reduce:padding', getTopRightBottomLeftValueReducer( 'padding' ) );
|
|
|
-
|
|
|
-stylesConverter.on( 'reduce:background', ( evt, data ) => {
|
|
|
- const ret = [];
|
|
|
+class BorderStyles {
|
|
|
+ static attach( stylesConverter ) {
|
|
|
+ stylesConverter.on( 'normalize:border', normalizeBorder );
|
|
|
+
|
|
|
+ // Border-position shorthands.
|
|
|
+ stylesConverter.on( 'normalize:border-top', getBorderPositionNormalizer( 'top' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-right', getBorderPositionNormalizer( 'right' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-bottom', getBorderPositionNormalizer( 'bottom' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-left', getBorderPositionNormalizer( 'left' ) );
|
|
|
+
|
|
|
+ // Border-property shorthands.
|
|
|
+ stylesConverter.on( 'normalize:border-color', getBorderPropertyNormalizer( 'color' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-width', getBorderPropertyNormalizer( 'width' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-style', getBorderPropertyNormalizer( 'style' ) );
|
|
|
+
|
|
|
+ // Border longhands.
|
|
|
+ stylesConverter.on( 'normalize:border-top-color', getBorderPropertyPositionNormalizer( 'color', 'top' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-top-style', getBorderPropertyPositionNormalizer( 'style', 'top' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-top-width', getBorderPropertyPositionNormalizer( 'width', 'top' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'normalize:border-right-color', getBorderPropertyPositionNormalizer( 'color', 'right' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-right-style', getBorderPropertyPositionNormalizer( 'style', 'right' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-right-width', getBorderPropertyPositionNormalizer( 'width', 'right' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'normalize:border-bottom-color', getBorderPropertyPositionNormalizer( 'color', 'bottom' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-bottom-style', getBorderPropertyPositionNormalizer( 'style', 'bottom' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-bottom-width', getBorderPropertyPositionNormalizer( 'width', 'bottom' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'normalize:border-left-color', getBorderPropertyPositionNormalizer( 'color', 'left' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-left-style', getBorderPropertyPositionNormalizer( 'style', 'left' ) );
|
|
|
+ stylesConverter.on( 'normalize:border-left-width', getBorderPropertyPositionNormalizer( 'width', 'left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'extract:border-top', borderPositionExtractor( 'top' ) );
|
|
|
+ stylesConverter.on( 'extract:border-right', borderPositionExtractor( 'right' ) );
|
|
|
+ stylesConverter.on( 'extract:border-bottom', borderPositionExtractor( 'bottom' ) );
|
|
|
+ stylesConverter.on( 'extract:border-left', borderPositionExtractor( 'left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'extract:border-top-color', ( evt, data ) => ( data.path = 'border.color.top' ) );
|
|
|
+ stylesConverter.on( 'extract:border-right-color', ( evt, data ) => ( data.path = 'border.color.right' ) );
|
|
|
+ stylesConverter.on( 'extract:border-bottom-color', ( evt, data ) => ( data.path = 'border.color.bottom' ) );
|
|
|
+ stylesConverter.on( 'extract:border-left-color', ( evt, data ) => ( data.path = 'border.color.left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'extract:border-top-width', ( evt, data ) => ( data.path = 'border.width.top' ) );
|
|
|
+ stylesConverter.on( 'extract:border-right-width', ( evt, data ) => ( data.path = 'border.width.right' ) );
|
|
|
+ stylesConverter.on( 'extract:border-bottom-width', ( evt, data ) => ( data.path = 'border.width.bottom' ) );
|
|
|
+ stylesConverter.on( 'extract:border-left-width', ( evt, data ) => ( data.path = 'border.width.left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'extract:border-top-style', ( evt, data ) => ( data.path = 'border.style.top' ) );
|
|
|
+ stylesConverter.on( 'extract:border-right-style', ( evt, data ) => ( data.path = 'border.style.right' ) );
|
|
|
+ stylesConverter.on( 'extract:border-bottom-style', ( evt, data ) => ( data.path = 'border.style.bottom' ) );
|
|
|
+ stylesConverter.on( 'extract:border-left-style', ( evt, data ) => ( data.path = 'border.style.left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'reduce:border-color', getTopRightBottomLeftValueReducer( 'border-color' ) );
|
|
|
+ stylesConverter.on( 'reduce:border-style', getTopRightBottomLeftValueReducer( 'border-style' ) );
|
|
|
+ stylesConverter.on( 'reduce:border-width', getTopRightBottomLeftValueReducer( 'border-width' ) );
|
|
|
+ stylesConverter.on( 'reduce:border-top',
|
|
|
+ ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'top' )( data.value ) ) );
|
|
|
+ stylesConverter.on( 'reduce:border-right',
|
|
|
+ ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'right' )( data.value ) ) );
|
|
|
+ stylesConverter.on( 'reduce:border-bottom',
|
|
|
+ ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'bottom' )( data.value ) ) );
|
|
|
+ stylesConverter.on( 'reduce:border-left',
|
|
|
+ ( evt, data ) => ( data.reduced = getBorderPositionReducer( 'left' )( data.value ) ) );
|
|
|
+ stylesConverter.on( 'reduce:border', getBorderReducer );
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- ret.push( [ 'background-color', data.value.color ] );
|
|
|
+class MarginStyles {
|
|
|
+ static attach( stylesConverter ) {
|
|
|
+ stylesConverter.on( 'normalize:margin', getPositionShorthandNormalizer( 'margin' ) );
|
|
|
|
|
|
- data.reduced = ret;
|
|
|
-} );
|
|
|
+ stylesConverter.on( 'normalize:margin-top', ( evt, data ) => ( data.path = 'margin.top' ) );
|
|
|
+ stylesConverter.on( 'normalize:margin-right', ( evt, data ) => ( data.path = 'margin.right' ) );
|
|
|
+ stylesConverter.on( 'normalize:margin-bottom', ( evt, data ) => ( data.path = 'margin.bottom' ) );
|
|
|
+ stylesConverter.on( 'normalize:margin-left', ( evt, data ) => ( data.path = 'margin.left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'reduce:margin', getTopRightBottomLeftValueReducer( 'margin' ) );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class PaddingStyles {
|
|
|
+ static attach( stylesConverter ) {
|
|
|
+ stylesConverter.on( 'normalize:padding', getPositionShorthandNormalizer( 'padding' ) );
|
|
|
+ stylesConverter.on( 'normalize:padding-top', ( evt, data ) => ( data.path = 'padding.top' ) );
|
|
|
+ stylesConverter.on( 'normalize:padding-right', ( evt, data ) => ( data.path = 'padding.right' ) );
|
|
|
+ stylesConverter.on( 'normalize:padding-bottom', ( evt, data ) => ( data.path = 'padding.bottom' ) );
|
|
|
+ stylesConverter.on( 'normalize:padding-left', ( evt, data ) => ( data.path = 'padding.left' ) );
|
|
|
+
|
|
|
+ stylesConverter.on( 'reduce:padding', getTopRightBottomLeftValueReducer( 'padding' ) );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class BackgroundStyles {
|
|
|
+ static attach( stylesConverter ) {
|
|
|
+ stylesConverter.on( 'normalize:background', normalizeBackground );
|
|
|
+ stylesConverter.on( 'normalize:background-color', ( evt, data ) => ( data.path = 'background.color' ) );
|
|
|
+ stylesConverter.on( 'reduce:background', ( evt, data ) => {
|
|
|
+ const ret = [];
|
|
|
+
|
|
|
+ ret.push( [ 'background-color', data.value.color ] );
|
|
|
+
|
|
|
+ data.reduced = ret;
|
|
|
+ } );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+BorderStyles.attach( stylesConverter );
|
|
|
+MarginStyles.attach( stylesConverter );
|
|
|
+PaddingStyles.attach( stylesConverter );
|
|
|
+BackgroundStyles.attach( stylesConverter );
|
|
|
|
|
|
/**
|
|
|
* Styles class.
|