From 70cec1d0708c8efe22c5495eead52f6b6b2f29da Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 19 Mar 2020 14:45:12 +0100 Subject: [PATCH 1/4] Change name LabeledView -> LabeledFieldView. The commit also changes references #view -> #field. --- .../ui/tablecellpropertiesview.js | 68 +++++----- src/tableproperties/ui/tablepropertiesview.js | 58 ++++----- src/ui/utils.js | 4 +- .../ui/tablecellpropertiesview.js | 116 +++++++++--------- .../tableproperties/ui/tablepropertiesview.js | 108 ++++++++-------- 5 files changed, 177 insertions(+), 177 deletions(-) diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index 6444f716..bdc1d9e2 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler'; -import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview'; -import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; +import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils'; import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview'; import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; @@ -465,57 +465,57 @@ export default class TableCellPropertiesView extends View { // -- Style --------------------------------------------------- const styleLabels = getBorderStyleLabels( t ); - const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown ); + const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown ); borderStyleDropdown.set( { label: t( 'Style' ), class: 'ck-table-form__border-style' } ); - borderStyleDropdown.view.buttonView.set( { + borderStyleDropdown.field.buttonView.set( { isOn: false, withText: true, tooltip: t( 'Style' ) } ); - borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { + borderStyleDropdown.field.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { return styleLabels[ value ? value : 'none' ]; } ); - borderStyleDropdown.view.on( 'execute', evt => { + borderStyleDropdown.field.on( 'execute', evt => { this.borderStyle = evt.source._borderStyleValue; } ); - addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) ); + addListToDropdown( borderStyleDropdown.field, getBorderStyleDefinitions( this ) ); // -- Width --------------------------------------------------- - const borderWidthInput = new LabeledView( locale, createLabeledInputText ); + const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText ); borderWidthInput.set( { label: t( 'Width' ), class: 'ck-table-form__border-width' } ); - borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' ); + borderWidthInput.field.bind( 'value' ).to( this, 'borderWidth' ); borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderWidthInput.view.on( 'input', () => { - this.borderWidth = borderWidthInput.view.element.value; + borderWidthInput.field.on( 'input', () => { + this.borderWidth = borderWidthInput.field.element.value; } ); // -- Color --------------------------------------------------- - const borderColorInput = new LabeledView( locale, colorInputCreator ); + const borderColorInput = new LabeledFieldView( locale, colorInputCreator ); borderColorInput.set( { label: t( 'Color' ), class: 'ck-table-form__border-color' } ); - borderColorInput.view.bind( 'value' ).to( this, 'borderColor' ); + borderColorInput.field.bind( 'value' ).to( this, 'borderColor' ); borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderColorInput.view.on( 'input', () => { - this.borderColor = borderColorInput.view.value; + borderColorInput.field.on( 'input', () => { + this.borderColor = borderColorInput.field.value; } ); // Reset the border color and width fields when style is "none". @@ -541,7 +541,7 @@ export default class TableCellPropertiesView extends View { * * {@link #backgroundInput}. * * @private - * @returns {module:ui/labeledview/labeledview~LabeledView} + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} */ _createBackgroundField() { const locale = this.locale; @@ -551,16 +551,16 @@ export default class TableCellPropertiesView extends View { columns: 5 } ); - const backgroundInput = new LabeledView( locale, colorInputCreator ); + const backgroundInput = new LabeledFieldView( locale, colorInputCreator ); backgroundInput.set( { label: t( 'Background' ), class: 'ck-table-cell-properties-form__background' } ); - backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' ); - backgroundInput.view.on( 'input', () => { - this.backgroundColor = backgroundInput.view.value; + backgroundInput.field.bind( 'value' ).to( this, 'backgroundColor' ); + backgroundInput.field.on( 'input', () => { + this.backgroundColor = backgroundInput.field.value; } ); return backgroundInput; @@ -573,7 +573,7 @@ export default class TableCellPropertiesView extends View { * * {@link #heightInput}. * * @private - * @returns {module:ui/labeledview/labeledview~LabeledView} + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} */ _createDimensionFields() { const locale = this.locale; @@ -586,16 +586,16 @@ export default class TableCellPropertiesView extends View { // -- Width --------------------------------------------------- - const widthInput = new LabeledView( locale, createLabeledInputText ); + const widthInput = new LabeledFieldView( locale, createLabeledInputText ); widthInput.set( { label: t( 'Width' ), class: 'ck-table-form__dimensions-row__width' } ); - widthInput.view.bind( 'value' ).to( this, 'width' ); - widthInput.view.on( 'input', () => { - this.width = widthInput.view.element.value; + widthInput.field.bind( 'value' ).to( this, 'width' ); + widthInput.field.on( 'input', () => { + this.width = widthInput.field.element.value; } ); // -- Operator --------------------------------------------------- @@ -615,16 +615,16 @@ export default class TableCellPropertiesView extends View { // -- Height --------------------------------------------------- - const heightInput = new LabeledView( locale, createLabeledInputText ); + const heightInput = new LabeledFieldView( locale, createLabeledInputText ); heightInput.set( { label: t( 'Height' ), class: 'ck-table-form__dimensions-row__height' } ); - heightInput.view.bind( 'value' ).to( this, 'height' ); - heightInput.view.on( 'input', () => { - this.height = heightInput.view.element.value; + heightInput.field.bind( 'value' ).to( this, 'height' ); + heightInput.field.on( 'input', () => { + this.height = heightInput.field.element.value; } ); return { @@ -641,22 +641,22 @@ export default class TableCellPropertiesView extends View { * * {@link #paddingInput}. * * @private - * @returns {module:ui/labeledview/labeledview~LabeledView} + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} */ _createPaddingField() { const locale = this.locale; const t = this.t; - const paddingInput = new LabeledView( locale, createLabeledInputText ); + const paddingInput = new LabeledFieldView( locale, createLabeledInputText ); paddingInput.set( { label: t( 'Padding' ), class: 'ck-table-cell-properties-form__padding' } ); - paddingInput.view.bind( 'value' ).to( this, 'padding' ); - paddingInput.view.on( 'input', () => { - this.padding = paddingInput.view.element.value; + paddingInput.field.bind( 'value' ).to( this, 'padding' ); + paddingInput.field.on( 'input', () => { + this.padding = paddingInput.field.element.value; } ); return paddingInput; diff --git a/src/tableproperties/ui/tablepropertiesview.js b/src/tableproperties/ui/tablepropertiesview.js index 20642640..d183b509 100644 --- a/src/tableproperties/ui/tablepropertiesview.js +++ b/src/tableproperties/ui/tablepropertiesview.js @@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler'; -import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview'; -import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; +import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils'; import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview'; import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; @@ -412,57 +412,57 @@ export default class TablePropertiesView extends View { // -- Style --------------------------------------------------- const styleLabels = getBorderStyleLabels( this.t ); - const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown ); + const borderStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown ); borderStyleDropdown.set( { label: t( 'Style' ), class: 'ck-table-form__border-style' } ); - borderStyleDropdown.view.buttonView.set( { + borderStyleDropdown.field.buttonView.set( { isOn: false, withText: true, tooltip: t( 'Style' ) } ); - borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { + borderStyleDropdown.field.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { return styleLabels[ value ? value : 'none' ]; } ); - borderStyleDropdown.view.on( 'execute', evt => { + borderStyleDropdown.field.on( 'execute', evt => { this.borderStyle = evt.source._borderStyleValue; } ); - addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) ); + addListToDropdown( borderStyleDropdown.field, getBorderStyleDefinitions( this ) ); // -- Width --------------------------------------------------- - const borderWidthInput = new LabeledView( locale, createLabeledInputText ); + const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText ); borderWidthInput.set( { label: t( 'Width' ), class: 'ck-table-form__border-width' } ); - borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' ); + borderWidthInput.field.bind( 'value' ).to( this, 'borderWidth' ); borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderWidthInput.view.on( 'input', () => { - this.borderWidth = borderWidthInput.view.element.value; + borderWidthInput.field.on( 'input', () => { + this.borderWidth = borderWidthInput.field.element.value; } ); // -- Color --------------------------------------------------- - const borderColorInput = new LabeledView( locale, colorInputCreator ); + const borderColorInput = new LabeledFieldView( locale, colorInputCreator ); borderColorInput.set( { label: t( 'Color' ), class: 'ck-table-form__border-color' } ); - borderColorInput.view.bind( 'value' ).to( this, 'borderColor' ); + borderColorInput.field.bind( 'value' ).to( this, 'borderColor' ); borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderColorInput.view.on( 'input', () => { - this.borderColor = borderColorInput.view.value; + borderColorInput.field.on( 'input', () => { + this.borderColor = borderColorInput.field.value; } ); // Reset the border color and width fields when style is "none". @@ -488,7 +488,7 @@ export default class TablePropertiesView extends View { * * {@link #backgroundInput}. * * @private - * @returns {module:ui/labeledview/labeledview~LabeledView} + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} */ _createBackgroundField() { const backgroundInputCreator = getLabeledColorInputCreator( { @@ -498,16 +498,16 @@ export default class TablePropertiesView extends View { const locale = this.locale; const t = this.t; - const backgroundInput = new LabeledView( locale, backgroundInputCreator ); + const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator ); backgroundInput.set( { label: t( 'Background' ), class: 'ck-table-properties-form__background' } ); - backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' ); - backgroundInput.view.on( 'input', () => { - this.backgroundColor = backgroundInput.view.value; + backgroundInput.field.bind( 'value' ).to( this, 'backgroundColor' ); + backgroundInput.field.on( 'input', () => { + this.backgroundColor = backgroundInput.field.value; } ); return backgroundInput; @@ -520,7 +520,7 @@ export default class TablePropertiesView extends View { * * {@link #heightInput}. * * @private - * @returns {module:ui/labeledview/labeledview~LabeledView} + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} */ _createDimensionFields() { const locale = this.locale; @@ -533,16 +533,16 @@ export default class TablePropertiesView extends View { // -- Width --------------------------------------------------- - const widthInput = new LabeledView( locale, createLabeledInputText ); + const widthInput = new LabeledFieldView( locale, createLabeledInputText ); widthInput.set( { label: t( 'Width' ), class: 'ck-table-form__dimensions-row__width' } ); - widthInput.view.bind( 'value' ).to( this, 'width' ); - widthInput.view.on( 'input', () => { - this.width = widthInput.view.element.value; + widthInput.field.bind( 'value' ).to( this, 'width' ); + widthInput.field.on( 'input', () => { + this.width = widthInput.field.element.value; } ); // -- Operator --------------------------------------------------- @@ -562,16 +562,16 @@ export default class TablePropertiesView extends View { // -- Height --------------------------------------------------- - const heightInput = new LabeledView( locale, createLabeledInputText ); + const heightInput = new LabeledFieldView( locale, createLabeledInputText ); heightInput.set( { label: t( 'Height' ), class: 'ck-table-form__dimensions-row__height' } ); - heightInput.view.bind( 'value' ).to( this, 'height' ); - heightInput.view.on( 'input', () => { - this.height = heightInput.view.element.value; + heightInput.field.bind( 'value' ).to( this, 'height' ); + heightInput.field.on( 'input', () => { + this.height = heightInput.field.element.value; } ); return { diff --git a/src/ui/utils.js b/src/ui/utils.js index d0c51dfb..96f4b835 100644 --- a/src/ui/utils.js +++ b/src/ui/utils.js @@ -397,7 +397,7 @@ export const defaultColors = [ * * For given options, it returns a function that creates an instance of a * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to - * a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in the DOM. + * a {@link module:ui/labeledfieldview/labeledfieldview~LabeledFieldView labeled view} in the DOM. * * The helper does the following: * @@ -413,7 +413,7 @@ export const defaultColors = [ * columns: 3, * } ); * - * const labeledInputView = new LabeledView( locale, colorInputCreator ); + * const labeledInputView = new LabeledFieldView( locale, colorInputCreator ); * console.log( labeledInputView.view ); // A color input instance. * * @private diff --git a/tests/tablecellproperties/ui/tablecellpropertiesview.js b/tests/tablecellproperties/ui/tablecellpropertiesview.js index e5ef71c9..7e3c2f21 100644 --- a/tests/tablecellproperties/ui/tablecellpropertiesview.js +++ b/tests/tablecellproperties/ui/tablecellpropertiesview.js @@ -6,7 +6,7 @@ /* globals Event */ import TableCellPropertiesView from '../../../src/tablecellproperties/ui/tablecellpropertiesview'; -import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; @@ -90,11 +90,11 @@ describe( 'table cell properties', () => { } ); it( 'should create child views (and references)', () => { - expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledView ); - expect( view.borderWidthInput ).to.be.instanceOf( LabeledView ); - expect( view.borderColorInput ).to.be.instanceOf( LabeledView ); - expect( view.backgroundInput ).to.be.instanceOf( LabeledView ); - expect( view.paddingInput ).to.be.instanceOf( LabeledView ); + expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledFieldView ); + expect( view.borderWidthInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.borderColorInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.backgroundInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.paddingInput ).to.be.instanceOf( LabeledFieldView ); expect( view.horizontalAlignmentToolbar ).to.be.instanceOf( ToolbarView ); expect( view.verticalAlignmentToolbar ).to.be.instanceOf( ToolbarView ); @@ -136,29 +136,29 @@ describe( 'table cell properties', () => { } ); it( 'should have a button with properties set', () => { - expect( labeledDropdown.view.buttonView.isOn ).to.be.false; - expect( labeledDropdown.view.buttonView.withText ).to.be.true; - expect( labeledDropdown.view.buttonView.tooltip ).to.equal( 'Style' ); + expect( labeledDropdown.field.buttonView.isOn ).to.be.false; + expect( labeledDropdown.field.buttonView.withText ).to.be.true; + expect( labeledDropdown.field.buttonView.tooltip ).to.equal( 'Style' ); } ); it( 'should bind button\'s label to #borderStyle property', () => { view.borderStyle = 'dotted'; - expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dotted' ); + expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dotted' ); view.borderStyle = 'dashed'; - expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dashed' ); + expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dashed' ); } ); it( 'should change #borderStyle when executed', () => { - labeledDropdown.view.listView.items.first.children.first.fire( 'execute' ); + labeledDropdown.field.listView.items.first.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( '' ); - labeledDropdown.view.listView.items.last.children.first.fire( 'execute' ); + labeledDropdown.field.listView.items.last.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( 'outset' ); } ); it( 'should come with a set of pre–defined border styles', () => { - expect( labeledDropdown.view.listView.items.map( item => { + expect( labeledDropdown.field.listView.items.map( item => { return item.children.first.label; } ) ).to.have.ordered.members( [ 'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset' @@ -185,17 +185,17 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__border-width' ); } ); it( 'should reflect #borderWidth property', () => { view.borderWidth = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.borderWidth = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -207,12 +207,12 @@ describe( 'table cell properties', () => { } ); it( 'should update #borderWidth on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.borderWidth ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.borderWidth ).to.equal( 'bar' ); } ); } ); @@ -225,12 +225,12 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Color' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(255,0,0)', label: 'Red', @@ -250,10 +250,10 @@ describe( 'table cell properties', () => { it( 'should reflect #borderColor property', () => { view.borderColor = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.borderColor = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -265,12 +265,12 @@ describe( 'table cell properties', () => { } ); it( 'should update #borderColor on DOM "input" event', () => { - labeledInput.view.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.borderColor ).to.equal( 'foo' ); - labeledInput.view.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.borderColor ).to.equal( 'bar' ); } ); } ); @@ -292,13 +292,13 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Background' ); expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__background' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(0,255,0)', label: 'Green', @@ -311,19 +311,19 @@ describe( 'table cell properties', () => { it( 'should reflect #backgroundColor property', () => { view.backgroundColor = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.backgroundColor = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #backgroundColor on DOM "input" event', () => { - labeledInput.view.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'foo' ); - labeledInput.view.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'bar' ); } ); } ); @@ -349,26 +349,26 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' ); } ); it( 'should reflect #width property', () => { view.width = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.width = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #width on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.width ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.width ).to.equal( 'bar' ); } ); } ); @@ -381,26 +381,26 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Height' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' ); } ); it( 'should reflect #height property', () => { view.height = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.height = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #height on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.height ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.height ).to.equal( 'bar' ); } ); } ); @@ -423,26 +423,26 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Padding' ); expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__padding' ); } ); it( 'should reflect #padding property', () => { view.padding = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.padding = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #padding on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.padding ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.padding ).to.equal( 'bar' ); } ); } ); diff --git a/tests/tableproperties/ui/tablepropertiesview.js b/tests/tableproperties/ui/tablepropertiesview.js index 9c99aaba..34bf752b 100644 --- a/tests/tableproperties/ui/tablepropertiesview.js +++ b/tests/tableproperties/ui/tablepropertiesview.js @@ -6,7 +6,7 @@ /* globals Event */ import TablePropertiesView from '../../../src/tableproperties/ui/tablepropertiesview'; -import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; @@ -90,12 +90,12 @@ describe( 'table properties', () => { } ); it( 'should create child views (and references)', () => { - expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledView ); - expect( view.borderWidthInput ).to.be.instanceOf( LabeledView ); - expect( view.borderColorInput ).to.be.instanceOf( LabeledView ); - expect( view.backgroundInput ).to.be.instanceOf( LabeledView ); - expect( view.widthInput ).to.be.instanceOf( LabeledView ); - expect( view.heightInput ).to.be.instanceOf( LabeledView ); + expect( view.borderStyleDropdown ).to.be.instanceOf( LabeledFieldView ); + expect( view.borderWidthInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.borderColorInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.backgroundInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.widthInput ).to.be.instanceOf( LabeledFieldView ); + expect( view.heightInput ).to.be.instanceOf( LabeledFieldView ); expect( view.alignmentToolbar ).to.be.instanceOf( ToolbarView ); expect( view.saveButtonView ).to.be.instanceOf( ButtonView ); @@ -136,29 +136,29 @@ describe( 'table properties', () => { } ); it( 'should have a button with properties set', () => { - expect( labeledDropdown.view.buttonView.isOn ).to.be.false; - expect( labeledDropdown.view.buttonView.withText ).to.be.true; - expect( labeledDropdown.view.buttonView.tooltip ).to.equal( 'Style' ); + expect( labeledDropdown.field.buttonView.isOn ).to.be.false; + expect( labeledDropdown.field.buttonView.withText ).to.be.true; + expect( labeledDropdown.field.buttonView.tooltip ).to.equal( 'Style' ); } ); it( 'should bind button\'s label to #borderStyle property', () => { view.borderStyle = 'dotted'; - expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dotted' ); + expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dotted' ); view.borderStyle = 'dashed'; - expect( labeledDropdown.view.buttonView.label ).to.equal( 'Dashed' ); + expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dashed' ); } ); it( 'should change #borderStyle when executed', () => { - labeledDropdown.view.listView.items.first.children.first.fire( 'execute' ); + labeledDropdown.field.listView.items.first.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( '' ); - labeledDropdown.view.listView.items.last.children.first.fire( 'execute' ); + labeledDropdown.field.listView.items.last.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( 'outset' ); } ); it( 'should come with a set of pre–defined border styles', () => { - expect( labeledDropdown.view.listView.items.map( item => { + expect( labeledDropdown.field.listView.items.map( item => { return item.children.first.label; } ) ).to.have.ordered.members( [ 'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset' @@ -185,17 +185,17 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__border-width' ); } ); it( 'should reflect #borderWidth property', () => { view.borderWidth = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.borderWidth = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -207,12 +207,12 @@ describe( 'table properties', () => { } ); it( 'should update #borderWidth on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.borderWidth ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.borderWidth ).to.equal( 'bar' ); } ); } ); @@ -225,12 +225,12 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Color' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(255,0,0)', label: 'Red', @@ -249,15 +249,15 @@ describe( 'table properties', () => { } ); it( 'should obtain the columns configuration', () => { - expect( labeledInput.view.options.columns ).to.equal( 5 ); + expect( labeledInput.field.options.columns ).to.equal( 5 ); } ); it( 'should reflect #borderColor property', () => { view.borderColor = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.borderColor = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -269,12 +269,12 @@ describe( 'table properties', () => { } ); it( 'should update #borderColor on DOM "input" event', () => { - labeledInput.view.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.borderColor ).to.equal( 'foo' ); - labeledInput.view.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.borderColor ).to.equal( 'bar' ); } ); } ); @@ -296,13 +296,13 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Background' ); expect( labeledInput.class ).to.equal( 'ck-table-properties-form__background' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.view.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(0,255,0)', label: 'Green', @@ -314,24 +314,24 @@ describe( 'table properties', () => { } ); it( 'should obtain the columns configuration', () => { - expect( labeledInput.view.options.columns ).to.equal( 5 ); + expect( labeledInput.field.options.columns ).to.equal( 5 ); } ); it( 'should reflect #backgroundColor property', () => { view.backgroundColor = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.backgroundColor = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #backgroundColor on DOM "input" event', () => { - labeledInput.view.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'foo' ); - labeledInput.view.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'bar' ); } ); } ); @@ -357,26 +357,26 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' ); } ); it( 'should reflect #width property', () => { view.width = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.width = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #width on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.width ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.width ).to.equal( 'bar' ); } ); } ); @@ -389,26 +389,26 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.view ).to.be.instanceOf( InputTextView ); + expect( labeledInput.field ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Height' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' ); } ); it( 'should reflect #height property', () => { view.height = 'foo'; - expect( labeledInput.view.value ).to.equal( 'foo' ); + expect( labeledInput.field.value ).to.equal( 'foo' ); view.height = 'bar'; - expect( labeledInput.view.value ).to.equal( 'bar' ); + expect( labeledInput.field.value ).to.equal( 'bar' ); } ); it( 'should update #height on DOM "input" event', () => { - labeledInput.view.element.value = 'foo'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'foo'; + labeledInput.field.fire( 'input' ); expect( view.height ).to.equal( 'foo' ); - labeledInput.view.element.value = 'bar'; - labeledInput.view.fire( 'input' ); + labeledInput.field.element.value = 'bar'; + labeledInput.field.fire( 'input' ); expect( view.height ).to.equal( 'bar' ); } ); } ); From baddb84727b79d0b8c36ca748023536b98a4a239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 24 Mar 2020 13:11:34 +0100 Subject: [PATCH 2/4] Rename internal variable to labeledFieldView. --- src/ui/utils.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ui/utils.js b/src/ui/utils.js index 96f4b835..949f7900 100644 --- a/src/ui/utils.js +++ b/src/ui/utils.js @@ -425,8 +425,8 @@ export const defaultColors = [ * @returns {Function} */ export function getLabeledColorInputCreator( options ) { - return ( labeledView, viewUid, statusUid ) => { - const inputView = new ColorInputView( labeledView.locale, { + return ( labeledFieldView, viewUid, statusUid ) => { + const inputView = new ColorInputView( labeledFieldView.locale, { colorDefinitions: colorConfigToColorGridDefinitions( options.colorConfig ), columns: options.columns } ); @@ -436,13 +436,13 @@ export function getLabeledColorInputCreator( options ) { ariaDescribedById: statusUid } ); - inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value ); - inputView.bind( 'errorText' ).to( labeledView ); + inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value ); + inputView.bind( 'errorText' ).to( labeledFieldView ); inputView.on( 'input', () => { // UX: Make the error text disappear and disable the error indicator as the user // starts fixing the errors. - labeledView.errorText = null; + labeledFieldView.errorText = null; } ); return inputView; From bad5b3de62f45c27b9bdab4a38d1319c893e8166 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 25 Mar 2020 15:43:34 +0100 Subject: [PATCH 3/4] Change module path --- src/tablecellproperties/ui/tablecellpropertiesview.js | 10 +++++----- src/tableproperties/ui/tablepropertiesview.js | 8 ++++---- src/ui/utils.js | 2 +- .../tablecellproperties/ui/tablecellpropertiesview.js | 2 +- tests/tableproperties/ui/tablepropertiesview.js | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index bdc1d9e2..611723cf 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler'; -import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; -import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview'; +import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils'; import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview'; import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; @@ -541,7 +541,7 @@ export default class TableCellPropertiesView extends View { * * {@link #backgroundInput}. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} */ _createBackgroundField() { const locale = this.locale; @@ -573,7 +573,7 @@ export default class TableCellPropertiesView extends View { * * {@link #heightInput}. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} */ _createDimensionFields() { const locale = this.locale; @@ -641,7 +641,7 @@ export default class TableCellPropertiesView extends View { * * {@link #paddingInput}. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} */ _createPaddingField() { const locale = this.locale; diff --git a/src/tableproperties/ui/tablepropertiesview.js b/src/tableproperties/ui/tablepropertiesview.js index d183b509..ad6fab08 100644 --- a/src/tableproperties/ui/tablepropertiesview.js +++ b/src/tableproperties/ui/tablepropertiesview.js @@ -15,8 +15,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler'; -import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; -import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview'; +import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils'; import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview'; import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; @@ -488,7 +488,7 @@ export default class TablePropertiesView extends View { * * {@link #backgroundInput}. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} */ _createBackgroundField() { const backgroundInputCreator = getLabeledColorInputCreator( { @@ -520,7 +520,7 @@ export default class TablePropertiesView extends View { * * {@link #heightInput}. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} */ _createDimensionFields() { const locale = this.locale; diff --git a/src/ui/utils.js b/src/ui/utils.js index 949f7900..76ae080a 100644 --- a/src/ui/utils.js +++ b/src/ui/utils.js @@ -397,7 +397,7 @@ export const defaultColors = [ * * For given options, it returns a function that creates an instance of a * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to - * a {@link module:ui/labeledfieldview/labeledfieldview~LabeledFieldView labeled view} in the DOM. + * a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in the DOM. * * The helper does the following: * diff --git a/tests/tablecellproperties/ui/tablecellpropertiesview.js b/tests/tablecellproperties/ui/tablecellpropertiesview.js index 7e3c2f21..c1f321f9 100644 --- a/tests/tablecellproperties/ui/tablecellpropertiesview.js +++ b/tests/tablecellproperties/ui/tablecellpropertiesview.js @@ -6,7 +6,7 @@ /* globals Event */ import TableCellPropertiesView from '../../../src/tablecellproperties/ui/tablecellpropertiesview'; -import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; diff --git a/tests/tableproperties/ui/tablepropertiesview.js b/tests/tableproperties/ui/tablepropertiesview.js index 34bf752b..75361c92 100644 --- a/tests/tableproperties/ui/tablepropertiesview.js +++ b/tests/tableproperties/ui/tablepropertiesview.js @@ -6,7 +6,7 @@ /* globals Event */ import TablePropertiesView from '../../../src/tableproperties/ui/tablepropertiesview'; -import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview'; import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; From afca57a7b3ef72b209ebf110c4955f4ae8f35473 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 25 Mar 2020 16:03:33 +0100 Subject: [PATCH 4/4] Change #field to #fieldView --- .../ui/tablecellpropertiesview.js | 44 ++++---- src/tableproperties/ui/tablepropertiesview.js | 38 +++---- .../ui/tablecellpropertiesview.js | 104 +++++++++--------- .../tableproperties/ui/tablepropertiesview.js | 94 ++++++++-------- 4 files changed, 140 insertions(+), 140 deletions(-) diff --git a/src/tablecellproperties/ui/tablecellpropertiesview.js b/src/tablecellproperties/ui/tablecellpropertiesview.js index 611723cf..5df96188 100644 --- a/src/tablecellproperties/ui/tablecellpropertiesview.js +++ b/src/tablecellproperties/ui/tablecellpropertiesview.js @@ -471,21 +471,21 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-form__border-style' } ); - borderStyleDropdown.field.buttonView.set( { + borderStyleDropdown.fieldView.buttonView.set( { isOn: false, withText: true, tooltip: t( 'Style' ) } ); - borderStyleDropdown.field.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { + borderStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { return styleLabels[ value ? value : 'none' ]; } ); - borderStyleDropdown.field.on( 'execute', evt => { + borderStyleDropdown.fieldView.on( 'execute', evt => { this.borderStyle = evt.source._borderStyleValue; } ); - addListToDropdown( borderStyleDropdown.field, getBorderStyleDefinitions( this ) ); + addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) ); // -- Width --------------------------------------------------- @@ -496,10 +496,10 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-form__border-width' } ); - borderWidthInput.field.bind( 'value' ).to( this, 'borderWidth' ); + borderWidthInput.fieldView.bind( 'value' ).to( this, 'borderWidth' ); borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderWidthInput.field.on( 'input', () => { - this.borderWidth = borderWidthInput.field.element.value; + borderWidthInput.fieldView.on( 'input', () => { + this.borderWidth = borderWidthInput.fieldView.element.value; } ); // -- Color --------------------------------------------------- @@ -511,11 +511,11 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-form__border-color' } ); - borderColorInput.field.bind( 'value' ).to( this, 'borderColor' ); + borderColorInput.fieldView.bind( 'value' ).to( this, 'borderColor' ); borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderColorInput.field.on( 'input', () => { - this.borderColor = borderColorInput.field.value; + borderColorInput.fieldView.on( 'input', () => { + this.borderColor = borderColorInput.fieldView.value; } ); // Reset the border color and width fields when style is "none". @@ -558,9 +558,9 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-cell-properties-form__background' } ); - backgroundInput.field.bind( 'value' ).to( this, 'backgroundColor' ); - backgroundInput.field.on( 'input', () => { - this.backgroundColor = backgroundInput.field.value; + backgroundInput.fieldView.bind( 'value' ).to( this, 'backgroundColor' ); + backgroundInput.fieldView.on( 'input', () => { + this.backgroundColor = backgroundInput.fieldView.value; } ); return backgroundInput; @@ -593,9 +593,9 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-form__dimensions-row__width' } ); - widthInput.field.bind( 'value' ).to( this, 'width' ); - widthInput.field.on( 'input', () => { - this.width = widthInput.field.element.value; + widthInput.fieldView.bind( 'value' ).to( this, 'width' ); + widthInput.fieldView.on( 'input', () => { + this.width = widthInput.fieldView.element.value; } ); // -- Operator --------------------------------------------------- @@ -622,9 +622,9 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-form__dimensions-row__height' } ); - heightInput.field.bind( 'value' ).to( this, 'height' ); - heightInput.field.on( 'input', () => { - this.height = heightInput.field.element.value; + heightInput.fieldView.bind( 'value' ).to( this, 'height' ); + heightInput.fieldView.on( 'input', () => { + this.height = heightInput.fieldView.element.value; } ); return { @@ -654,9 +654,9 @@ export default class TableCellPropertiesView extends View { class: 'ck-table-cell-properties-form__padding' } ); - paddingInput.field.bind( 'value' ).to( this, 'padding' ); - paddingInput.field.on( 'input', () => { - this.padding = paddingInput.field.element.value; + paddingInput.fieldView.bind( 'value' ).to( this, 'padding' ); + paddingInput.fieldView.on( 'input', () => { + this.padding = paddingInput.fieldView.element.value; } ); return paddingInput; diff --git a/src/tableproperties/ui/tablepropertiesview.js b/src/tableproperties/ui/tablepropertiesview.js index ad6fab08..a30c5dcc 100644 --- a/src/tableproperties/ui/tablepropertiesview.js +++ b/src/tableproperties/ui/tablepropertiesview.js @@ -418,21 +418,21 @@ export default class TablePropertiesView extends View { class: 'ck-table-form__border-style' } ); - borderStyleDropdown.field.buttonView.set( { + borderStyleDropdown.fieldView.buttonView.set( { isOn: false, withText: true, tooltip: t( 'Style' ) } ); - borderStyleDropdown.field.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { + borderStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderStyle', value => { return styleLabels[ value ? value : 'none' ]; } ); - borderStyleDropdown.field.on( 'execute', evt => { + borderStyleDropdown.fieldView.on( 'execute', evt => { this.borderStyle = evt.source._borderStyleValue; } ); - addListToDropdown( borderStyleDropdown.field, getBorderStyleDefinitions( this ) ); + addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) ); // -- Width --------------------------------------------------- @@ -443,10 +443,10 @@ export default class TablePropertiesView extends View { class: 'ck-table-form__border-width' } ); - borderWidthInput.field.bind( 'value' ).to( this, 'borderWidth' ); + borderWidthInput.fieldView.bind( 'value' ).to( this, 'borderWidth' ); borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderWidthInput.field.on( 'input', () => { - this.borderWidth = borderWidthInput.field.element.value; + borderWidthInput.fieldView.on( 'input', () => { + this.borderWidth = borderWidthInput.fieldView.element.value; } ); // -- Color --------------------------------------------------- @@ -458,11 +458,11 @@ export default class TablePropertiesView extends View { class: 'ck-table-form__border-color' } ); - borderColorInput.field.bind( 'value' ).to( this, 'borderColor' ); + borderColorInput.fieldView.bind( 'value' ).to( this, 'borderColor' ); borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet ); - borderColorInput.field.on( 'input', () => { - this.borderColor = borderColorInput.field.value; + borderColorInput.fieldView.on( 'input', () => { + this.borderColor = borderColorInput.fieldView.value; } ); // Reset the border color and width fields when style is "none". @@ -505,9 +505,9 @@ export default class TablePropertiesView extends View { class: 'ck-table-properties-form__background' } ); - backgroundInput.field.bind( 'value' ).to( this, 'backgroundColor' ); - backgroundInput.field.on( 'input', () => { - this.backgroundColor = backgroundInput.field.value; + backgroundInput.fieldView.bind( 'value' ).to( this, 'backgroundColor' ); + backgroundInput.fieldView.on( 'input', () => { + this.backgroundColor = backgroundInput.fieldView.value; } ); return backgroundInput; @@ -540,9 +540,9 @@ export default class TablePropertiesView extends View { class: 'ck-table-form__dimensions-row__width' } ); - widthInput.field.bind( 'value' ).to( this, 'width' ); - widthInput.field.on( 'input', () => { - this.width = widthInput.field.element.value; + widthInput.fieldView.bind( 'value' ).to( this, 'width' ); + widthInput.fieldView.on( 'input', () => { + this.width = widthInput.fieldView.element.value; } ); // -- Operator --------------------------------------------------- @@ -569,9 +569,9 @@ export default class TablePropertiesView extends View { class: 'ck-table-form__dimensions-row__height' } ); - heightInput.field.bind( 'value' ).to( this, 'height' ); - heightInput.field.on( 'input', () => { - this.height = heightInput.field.element.value; + heightInput.fieldView.bind( 'value' ).to( this, 'height' ); + heightInput.fieldView.on( 'input', () => { + this.height = heightInput.fieldView.element.value; } ); return { diff --git a/tests/tablecellproperties/ui/tablecellpropertiesview.js b/tests/tablecellproperties/ui/tablecellpropertiesview.js index c1f321f9..f07fa3dd 100644 --- a/tests/tablecellproperties/ui/tablecellpropertiesview.js +++ b/tests/tablecellproperties/ui/tablecellpropertiesview.js @@ -136,29 +136,29 @@ describe( 'table cell properties', () => { } ); it( 'should have a button with properties set', () => { - expect( labeledDropdown.field.buttonView.isOn ).to.be.false; - expect( labeledDropdown.field.buttonView.withText ).to.be.true; - expect( labeledDropdown.field.buttonView.tooltip ).to.equal( 'Style' ); + expect( labeledDropdown.fieldView.buttonView.isOn ).to.be.false; + expect( labeledDropdown.fieldView.buttonView.withText ).to.be.true; + expect( labeledDropdown.fieldView.buttonView.tooltip ).to.equal( 'Style' ); } ); it( 'should bind button\'s label to #borderStyle property', () => { view.borderStyle = 'dotted'; - expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dotted' ); + expect( labeledDropdown.fieldView.buttonView.label ).to.equal( 'Dotted' ); view.borderStyle = 'dashed'; - expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dashed' ); + expect( labeledDropdown.fieldView.buttonView.label ).to.equal( 'Dashed' ); } ); it( 'should change #borderStyle when executed', () => { - labeledDropdown.field.listView.items.first.children.first.fire( 'execute' ); + labeledDropdown.fieldView.listView.items.first.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( '' ); - labeledDropdown.field.listView.items.last.children.first.fire( 'execute' ); + labeledDropdown.fieldView.listView.items.last.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( 'outset' ); } ); it( 'should come with a set of pre–defined border styles', () => { - expect( labeledDropdown.field.listView.items.map( item => { + expect( labeledDropdown.fieldView.listView.items.map( item => { return item.children.first.label; } ) ).to.have.ordered.members( [ 'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset' @@ -185,17 +185,17 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__border-width' ); } ); it( 'should reflect #borderWidth property', () => { view.borderWidth = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.borderWidth = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -207,12 +207,12 @@ describe( 'table cell properties', () => { } ); it( 'should update #borderWidth on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderWidth ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderWidth ).to.equal( 'bar' ); } ); } ); @@ -225,12 +225,12 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.fieldView ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Color' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.fieldView.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(255,0,0)', label: 'Red', @@ -250,10 +250,10 @@ describe( 'table cell properties', () => { it( 'should reflect #borderColor property', () => { view.borderColor = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.borderColor = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -265,12 +265,12 @@ describe( 'table cell properties', () => { } ); it( 'should update #borderColor on DOM "input" event', () => { - labeledInput.field.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderColor ).to.equal( 'foo' ); - labeledInput.field.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderColor ).to.equal( 'bar' ); } ); } ); @@ -292,13 +292,13 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.fieldView ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Background' ); expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__background' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.fieldView.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(0,255,0)', label: 'Green', @@ -311,19 +311,19 @@ describe( 'table cell properties', () => { it( 'should reflect #backgroundColor property', () => { view.backgroundColor = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.backgroundColor = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #backgroundColor on DOM "input" event', () => { - labeledInput.field.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'foo' ); - labeledInput.field.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'bar' ); } ); } ); @@ -349,26 +349,26 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' ); } ); it( 'should reflect #width property', () => { view.width = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.width = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #width on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.width ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.width ).to.equal( 'bar' ); } ); } ); @@ -381,26 +381,26 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Height' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' ); } ); it( 'should reflect #height property', () => { view.height = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.height = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #height on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.height ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.height ).to.equal( 'bar' ); } ); } ); @@ -423,26 +423,26 @@ describe( 'table cell properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Padding' ); expect( labeledInput.class ).to.equal( 'ck-table-cell-properties-form__padding' ); } ); it( 'should reflect #padding property', () => { view.padding = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.padding = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #padding on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.padding ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.padding ).to.equal( 'bar' ); } ); } ); diff --git a/tests/tableproperties/ui/tablepropertiesview.js b/tests/tableproperties/ui/tablepropertiesview.js index 75361c92..93a30d9d 100644 --- a/tests/tableproperties/ui/tablepropertiesview.js +++ b/tests/tableproperties/ui/tablepropertiesview.js @@ -136,29 +136,29 @@ describe( 'table properties', () => { } ); it( 'should have a button with properties set', () => { - expect( labeledDropdown.field.buttonView.isOn ).to.be.false; - expect( labeledDropdown.field.buttonView.withText ).to.be.true; - expect( labeledDropdown.field.buttonView.tooltip ).to.equal( 'Style' ); + expect( labeledDropdown.fieldView.buttonView.isOn ).to.be.false; + expect( labeledDropdown.fieldView.buttonView.withText ).to.be.true; + expect( labeledDropdown.fieldView.buttonView.tooltip ).to.equal( 'Style' ); } ); it( 'should bind button\'s label to #borderStyle property', () => { view.borderStyle = 'dotted'; - expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dotted' ); + expect( labeledDropdown.fieldView.buttonView.label ).to.equal( 'Dotted' ); view.borderStyle = 'dashed'; - expect( labeledDropdown.field.buttonView.label ).to.equal( 'Dashed' ); + expect( labeledDropdown.fieldView.buttonView.label ).to.equal( 'Dashed' ); } ); it( 'should change #borderStyle when executed', () => { - labeledDropdown.field.listView.items.first.children.first.fire( 'execute' ); + labeledDropdown.fieldView.listView.items.first.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( '' ); - labeledDropdown.field.listView.items.last.children.first.fire( 'execute' ); + labeledDropdown.fieldView.listView.items.last.children.first.fire( 'execute' ); expect( view.borderStyle ).to.equal( 'outset' ); } ); it( 'should come with a set of pre–defined border styles', () => { - expect( labeledDropdown.field.listView.items.map( item => { + expect( labeledDropdown.fieldView.listView.items.map( item => { return item.children.first.label; } ) ).to.have.ordered.members( [ 'None', 'Solid', 'Dotted', 'Dashed', 'Double', 'Groove', 'Ridge', 'Inset', 'Outset' @@ -185,17 +185,17 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__border-width' ); } ); it( 'should reflect #borderWidth property', () => { view.borderWidth = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.borderWidth = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -207,12 +207,12 @@ describe( 'table properties', () => { } ); it( 'should update #borderWidth on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderWidth ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderWidth ).to.equal( 'bar' ); } ); } ); @@ -225,12 +225,12 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.fieldView ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Color' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.fieldView.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(255,0,0)', label: 'Red', @@ -249,15 +249,15 @@ describe( 'table properties', () => { } ); it( 'should obtain the columns configuration', () => { - expect( labeledInput.field.options.columns ).to.equal( 5 ); + expect( labeledInput.fieldView.options.columns ).to.equal( 5 ); } ); it( 'should reflect #borderColor property', () => { view.borderColor = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.borderColor = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should be enabled only when #borderStyle is different than "none"', () => { @@ -269,12 +269,12 @@ describe( 'table properties', () => { } ); it( 'should update #borderColor on DOM "input" event', () => { - labeledInput.field.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderColor ).to.equal( 'foo' ); - labeledInput.field.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.borderColor ).to.equal( 'bar' ); } ); } ); @@ -296,13 +296,13 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( ColorInputView ); + expect( labeledInput.fieldView ).to.be.instanceOf( ColorInputView ); expect( labeledInput.label ).to.equal( 'Background' ); expect( labeledInput.class ).to.equal( 'ck-table-properties-form__background' ); } ); it( 'should get the color configuration', () => { - expect( labeledInput.field.options.colorDefinitions ).to.deep.equal( [ + expect( labeledInput.fieldView.options.colorDefinitions ).to.deep.equal( [ { color: 'rgb(0,255,0)', label: 'Green', @@ -314,24 +314,24 @@ describe( 'table properties', () => { } ); it( 'should obtain the columns configuration', () => { - expect( labeledInput.field.options.columns ).to.equal( 5 ); + expect( labeledInput.fieldView.options.columns ).to.equal( 5 ); } ); it( 'should reflect #backgroundColor property', () => { view.backgroundColor = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.backgroundColor = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #backgroundColor on DOM "input" event', () => { - labeledInput.field.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'foo' ); - labeledInput.field.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.backgroundColor ).to.equal( 'bar' ); } ); } ); @@ -357,26 +357,26 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Width' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__width' ); } ); it( 'should reflect #width property', () => { view.width = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.width = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #width on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.width ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.width ).to.equal( 'bar' ); } ); } ); @@ -389,26 +389,26 @@ describe( 'table properties', () => { } ); it( 'should be created', () => { - expect( labeledInput.field ).to.be.instanceOf( InputTextView ); + expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView ); expect( labeledInput.label ).to.equal( 'Height' ); expect( labeledInput.class ).to.equal( 'ck-table-form__dimensions-row__height' ); } ); it( 'should reflect #height property', () => { view.height = 'foo'; - expect( labeledInput.field.value ).to.equal( 'foo' ); + expect( labeledInput.fieldView.value ).to.equal( 'foo' ); view.height = 'bar'; - expect( labeledInput.field.value ).to.equal( 'bar' ); + expect( labeledInput.fieldView.value ).to.equal( 'bar' ); } ); it( 'should update #height on DOM "input" event', () => { - labeledInput.field.element.value = 'foo'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'foo'; + labeledInput.fieldView.fire( 'input' ); expect( view.height ).to.equal( 'foo' ); - labeledInput.field.element.value = 'bar'; - labeledInput.field.fire( 'input' ); + labeledInput.fieldView.element.value = 'bar'; + labeledInput.fieldView.fire( 'input' ); expect( view.height ).to.equal( 'bar' ); } ); } );