Bläddra i källkod

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

Maciej Gołaszewski 5 år sedan
förälder
incheckning
96ce3be3da

+ 16 - 13
packages/ckeditor5-engine/docs/_snippets/framework/element-reconversion-demo.html

@@ -19,21 +19,21 @@
 		border-bottom-width: 1px;
 	}
 
-	.ck-content .side-card-warning {
+	.ck-content .side-card-alternate {
 		background: hsl(48, 100%, 87%);
 		border: 1px solid hsl(47, 100%, 62%);
 	}
 
-	.ck-content .side-card-warning .side-card-title {
+	.ck-content .side-card-alternate .side-card-title {
 		color: hsl(47, 100%, 32%)
 	}
 
-	.ck-content .side-card-info {
+	.ck-content .side-card-default {
 		background: hsl(205, 100%, 95%);
 		border: 1px solid hsl(205, 91%, 82%);
 	}
 
-	.ck-content .side-card-info .side-card-title {
+	.ck-content .side-card-default .side-card-title {
 		color: hsl(204, 79%, 41%)
 	}
 
@@ -73,14 +73,15 @@
 	<p>- Aye, let me tell ya, that&rsquo;s some right hangdog - commented the undertaker.</p>
 	<p>- Sure as my name he&rsquo;s on the run - whispered Laughing Jessie, the saloon owner. - And I am damned if he ain&rsquo;t got some business here!</p>
 
-	<aside class="side-card side-card-info">
-		<div class="side-card-title">Hey! Did you know?</div>
+	<aside class="side-card side-card-default">
+		<div class="side-card-title">Gunslinger</div>
 		<div class="side-card-section">
-			<p>Editable content of the <strong>side card section</strong>.</p>
+			<p>Used to denote someone who is quick on the draw with a pistol</p>
 		</div>
 		<div class="side-card-section">
-			<p>Another content box.</p>
+			<p>A word dated 1920.</p>
 		</div>
+		<div class="side-card-url">https://www.dictionary.com/browse/gunslinger</div>
 	</aside>
 
 	<p>The rider strode closer to the talking duo. He tipped his hat, but he didn&rsquo;t dismount.</p>
@@ -90,13 +91,15 @@
 	<p>And the handsome New Mexico trooper rested his hand firmly on the big iron on his hip, leaving no place for doubt about what his business with Ted might be.</p>
 	<p>A word of mouth rounded the town of Agua Caliente and soon Kansas himself knew there was a shooting planned for the day. He was neither worried nor afraid as he was used to people trying to gun him down. He was only 24, but there were already twenty notches on his pistol as all those men that tried to take him have failed. He went on with his usual life all morning, and it was twenty past eleven when he finally walked out to the street. The handsome trooper was there. And the townfolks were there, looking from the windows.</p>
 
-
-	<aside class="side-card side-card-warning">
-		<div class="side-card-title">Watch out for <strong>this</strong>!</div>
+	<aside class="side-card side-card-alternate">
+		<div class="side-card-title">Gunman</div>
+		<div class="side-card-section">
+			<p>Was a hired gun who made a living with his weapons in the Old West.</p>
+		</div>
 		<div class="side-card-section">
-			<p>Editable content of the <strong>side card section</strong>.</p>
+			<p>Used mostly pre-20th century.</p>
 		</div>
-		<div class="side-card-url">https://ckeditor.com/</div>
+		<div class="side-card-url">https://www.dictionary.com/browse/gunman</div>
 	</aside>
 
 	<p>Kansas Ted stood there smiling, relaxed. A vicious man convinced that the stranger from New Mexico was facing defeat. So thought the people of Agua Caliente, watching this show with ghoulish delight. And then a bullet ripped and there was a look of surprise on the face of the young killer as he didn&rsquo;t even clear the leather. He meat his death from the hands of the New Mexico trooper, who put the big iron back to his hip.</p>

+ 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' );