8
0
Quellcode durchsuchen

Update side card data in the demo and change type property semantics.

Maciej Gołaszewski vor 5 Jahren
Ursprung
Commit
96ce3be3da

Datei-Diff unterdrückt, da er zu groß ist
+ 16 - 13
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.html


+ 5 - 5
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.js

@@ -14,13 +14,13 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
  * Helper for extracting the side card type from a view element based on its CSS class.
  */
 const getTypeFromViewElement = viewElement => {
-	for ( const type of [ 'info', 'warning' ] ) {
+	for ( const type of [ 'default', 'alternate' ] ) {
 		if ( viewElement.hasClass( `side-card-${ type }` ) ) {
 			return type;
 		}
 	}
 
-	return 'info';
+	return 'default';
 };
 
 /**
@@ -75,7 +75,7 @@ const createActionsView = ( editor, modelElement ) => function( domElement ) {
 	}, domElement, editor );
 
 	const currentType = modelElement.getAttribute( 'cardType' );
-	const newType = currentType === 'info' ? 'warning' : 'info';
+	const newType = currentType === 'default' ? 'alternate' : 'default';
 
 	//
 	// Change the card action button.
@@ -118,7 +118,7 @@ const createActionsView = ( editor, modelElement ) => function( domElement ) {
  */
 const downcastSideCard = ( editor, { asWidget } ) => {
 	return ( modelElement, { writer, consumable, mapper } ) => {
-		const type = modelElement.getAttribute( 'cardType' ) || 'info';
+		const type = modelElement.getAttribute( 'cardType' ) || 'default';
 
 		// The main view element for the side card.
 		const sideCardView = writer.createContainerElement( 'aside', {
@@ -201,7 +201,7 @@ class InsertCardCommand extends Command {
 		const insertPosition = findOptimalInsertionPosition( selection, model );
 
 		model.change( writer => {
-			const sideCard = writer.createElement( 'sideCard', { cardType: 'info' } );
+			const sideCard = writer.createElement( 'sideCard', { cardType: 'default' } );
 			const title = writer.createElement( 'sideCardTitle' );
 			const section = writer.createElement( 'sideCardSection' );
 			const paragraph = writer.createElement( 'paragraph' );

+ 8 - 8
packages/ckeditor5-engine/docs/framework/guides/deep-dive/element-reconversion.md

@@ -126,7 +126,7 @@ A simplified model markup for the side card looks as follows:
 This will be converted to the below view structure:
 
 ```html
-<aside class="side-card side-card-info">
+<aside class="side-card side-card-default">
 	<div class="side-card-title">Hey! Did you know?</div>
 	<div class="side-card-section">
 		<p>Editable content of the <strong>side card</strong>.</p>
@@ -210,7 +210,7 @@ The function that creates a complete view for the model element:
 ```js
 const downcastSideCard = ( editor, { asWidget } ) => {
 	return ( modelElement, { writer, consumable, mapper } ) => {
-		const type = modelElement.getAttribute( 'cardType' ) || 'info';
+		const type = modelElement.getAttribute( 'cardType' ) || 'default';
 
 		// The main view element for the side card.
 		const sideCardView = writer.createContainerElement( 'aside', {
@@ -295,7 +295,7 @@ editor.conversion.for( 'upcast' )
 	} );
 ```
 
-You can see the details of the upcast converter function (`upcastInfoBox()`) in the full source code at the end of this guide.
+You can see the details of the upcast converter function (`upcastCard()`) in the full source code at the end of this guide.
 
 ### Full source code
 
@@ -310,13 +310,13 @@ import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
  * Helper for extracting the side card type from a view element based on its CSS class.
  */
 const getTypeFromViewElement = viewElement => {
-	for ( const type of [ 'info', 'warning' ] ) {
+	for ( const type of [ 'default', 'alternate' ] ) {
 		if ( viewElement.hasClass( `side-card-${ type }` ) ) {
 			return type;
 		}
 	}
 
-	return 'info';
+	return 'default';
 };
 
 /**
@@ -371,7 +371,7 @@ const createActionsView = ( editor, modelElement ) => function( domElement ) {
 	}, domElement, editor );
 
 	const currentType = modelElement.getAttribute( 'cardType' );
-	const newType = currentType === 'info' ? 'warning' : 'info';
+	const newType = currentType === 'default' ? 'alternate' : 'default';
 
 	//
 	// Change the card action button.
@@ -414,7 +414,7 @@ const createActionsView = ( editor, modelElement ) => function( domElement ) {
  */
 const downcastSideCard = ( editor, { asWidget } ) => {
 	return ( modelElement, { writer, consumable, mapper } ) => {
-		const type = modelElement.getAttribute( 'cardType' ) || 'info';
+		const type = modelElement.getAttribute( 'cardType' ) || 'default';
 
 		// The main view element for the side card.
 		const sideCardView = writer.createContainerElement( 'aside', {
@@ -497,7 +497,7 @@ class InsertCardCommand extends Command {
 		const insertPosition = findOptimalInsertionPosition( selection, model );
 
 		model.change( writer => {
-			const sideCard = writer.createElement( 'sideCard', { cardType: 'info' } );
+			const sideCard = writer.createElement( 'sideCard', { cardType: 'default' } );
 			const title = writer.createElement( 'sideCardTitle' );
 			const section = writer.createElement( 'sideCardSection' );
 			const paragraph = writer.createElement( 'paragraph' );