Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Imporved markup of todo list returned by data pipeline.
Browse files Browse the repository at this point in the history
  • Loading branch information
@oskarwrobel
oskarwrobel committed Aug 14, 2019
1 parent 0c683b3 commit 33577e2
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 46 deletions.
10 changes: 6 additions & 4 deletions src/todolistconverters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,16 @@ export function dataModelViewInsertion( model ) {

viewWriter.addClass( 'todo-list', viewItem.parent );

const label = viewWriter.createAttributeElement( 'label' );
const label = viewWriter.createAttributeElement( 'label', { class: 'todo-list__label' } );
const checkbox = viewWriter.createEmptyElement( 'input', {
type: 'checkbox',
disabled: 'disabled',
class: 'todo-list__checkmark'
class: 'todo-list__label__checkmark'
} );

if ( data.item.getAttribute( 'todoListChecked' ) ) {
viewWriter.setAttribute( 'checked', 'checked', checkbox );
viewWriter.addClass( 'todo-list__label_checked', label );
}

viewWriter.insert( viewWriter.createPositionAt( viewItem, 0 ), checkbox );
Expand Down Expand Up @@ -170,8 +171,9 @@ export function dataModelViewTextInsertion( evt, data, conversionApi ) {
const viewWriter = conversionApi.writer;
const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
const viewText = viewWriter.createText( data.item.data );
const span = viewWriter.createAttributeElement( 'span', { class: 'todo-list__label' } );
const label = viewWriter.createAttributeElement( 'label' );

const span = viewWriter.createAttributeElement( 'span', { class: 'todo-list__label__description' } );
const label = viewPosition.parent.getChild( 0 );

viewWriter.insert( viewWriter.createPositionAt( viewPosition.parent, 'end' ), viewText );
viewWriter.wrap( viewWriter.createRangeOn( viewText ), span );
Expand Down
84 changes: 42 additions & 42 deletions tests/todolistediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,15 +386,15 @@ describe( 'TodoListEditing', () => {
expect( editor.getData() ).to.equal(
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">1</span>' +
'</label>' +
'</li>' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
'<span class="todo-list__label">2</span>' +
'<label class="todo-list__label todo-list__label_checked">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
'<span class="todo-list__label__description">2</span>' +
'</label>' +
'</li>' +
'</ul>'
Expand All @@ -410,15 +410,15 @@ describe( 'TodoListEditing', () => {
expect( editor.getData() ).to.equal(
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">1.0</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">1.0</span>' +
'</label>' +
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">2.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">2.1</span>' +
'</label>' +
'</li>' +
'</ul>' +
Expand All @@ -439,28 +439,28 @@ describe( 'TodoListEditing', () => {
expect( editor.getData() ).to.equal(
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">1.0</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">1.0</span>' +
'</label>' +
'</li>' +
'</ul>' +
'<ul>' +
'<li>2.0' +
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">3.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">3.1</span>' +
'</label>' +
'<ul>' +
'<li>4.2</li>' +
'</ul>' +
'</li>' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">5.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">5.1</span>' +
'</label>' +
'</li>' +
'</ul>' +
Expand All @@ -481,28 +481,28 @@ describe( 'TodoListEditing', () => {
expect( editor.getData() ).to.equal(
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">1.0</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">1.0</span>' +
'</label>' +
'</li>' +
'</ul>' +
'<ol>' +
'<li>2.0' +
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">3.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">3.1</span>' +
'</label>' +
'<ol>' +
'<li>4.2</li>' +
'</ol>' +
'</li>' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">5.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">5.1</span>' +
'</label>' +
'</li>' +
'</ul>' +
Expand Down Expand Up @@ -645,29 +645,29 @@ describe( 'TodoListEditing', () => {
editor.setData(
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
'<span class="todo-list__label">1.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
'<span class="todo-list__label__description">1.1</span>' +
'</label>' +
'<ul class="todo-list">' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">2.2</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">2.2</span>' +
'</label>' +
'</li>' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
'<span class="todo-list__label">3.2</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled" checked="checked">' +
'<span class="todo-list__label__description">3.2</span>' +
'</label>' +
'</li>' +
'</ul>' +
'</li>' +
'<li>' +
'<label>' +
'<input class="todo-list__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label">4.1</span>' +
'<label class="todo-list__label">' +
'<input class="todo-list__label__checkmark" type="checkbox" disabled="disabled">' +
'<span class="todo-list__label__description">4.1</span>' +
'</label>' +
'</li>' +
'</ul>'
Expand Down

0 comments on commit 33577e2

Please sign in to comment.