浏览代码

Used radios to switch modes.

Aleksander Nowodzinski 6 年之前
父节点
当前提交
862e3ab465

+ 3 - 24
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.html

@@ -1,10 +1,9 @@
 <p>
-	<button id="mode-standard">Switch to standard mode</button>
-	<button id="mode-restricted">Switch to restricted mode</button>
+	<b>Mode</b>:
+	<input type="radio" id="mode-standard" name="mode" value="standard" checked><label for="mode-standard">Standard</label>
+	<input type="radio" id="mode-restricted" name="mode" value="restricted"><label for="mode-restricted">Restricted</label>
 </p>
 
-<p id="current-mode"></p>
-
 <div id="editor">
 	<h2>Heading 1</h2>
 	<p>Paragraph <span class="ck-restricted-editing-exception">it is editable</span></p>
@@ -30,23 +29,3 @@
 		<p>Quote</p>
 	</blockquote>
 </div>
-
-<style>
-	#current-mode {
-		/*text-align: center;*/
-		padding: 1em 0;
-	}
-
-	.mode {
-		color: #fff;
-		padding: 0.5em;
-	}
-
-	.mode-standard {
-		background: #4f4fff;
-	}
-
-	.mode-restricted {
-		background: #a72727;
-	}
-</style>

+ 9 - 22
packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.js

@@ -14,25 +14,21 @@ import RestrictedEditing from '../../src/restrictedediting';
 
 const restrictedModeButton = document.getElementById( 'mode-restricted' );
 const standardModeButton = document.getElementById( 'mode-standard' );
-const currentModeDisplay = document.getElementById( 'current-mode' );
 
-enableSwitchToStandardMode();
-enableSwitchToRestrictedMode();
+restrictedModeButton.addEventListener( 'change', handleModeChange );
+standardModeButton.addEventListener( 'change', handleModeChange );
 
-function enableSwitchToRestrictedMode() {
-	restrictedModeButton.removeAttribute( 'disabled' );
-	restrictedModeButton.addEventListener( 'click', startRestrictedMode );
-}
+startStandardMode();
 
-function enableSwitchToStandardMode() {
-	standardModeButton.removeAttribute( 'disabled' );
-	standardModeButton.addEventListener( 'click', startStandardMode );
+function handleModeChange( evt ) {
+	if ( evt.target.value === 'standard' ) {
+		startStandardMode();
+	} else {
+		startRestrictedMode();
+	}
 }
 
 async function startStandardMode() {
-	standardModeButton.removeEventListener( 'click', startStandardMode );
-	standardModeButton.setAttribute( 'disabled', 'disabled' );
-
 	await reloadEditor( {
 		plugins: [ ArticlePluginSet, Table, RestrictedEditingException ],
 		toolbar: [
@@ -51,22 +47,13 @@ async function startStandardMode() {
 			]
 		}
 	} );
-
-	currentModeDisplay.innerHTML = 'Current Mode: <span class="mode mode-standard">STANDARD</span>';
-	enableSwitchToRestrictedMode();
 }
 
 async function startRestrictedMode() {
-	restrictedModeButton.removeEventListener( 'click', startRestrictedMode );
-	restrictedModeButton.setAttribute( 'disabled', 'disabled' );
-
 	await reloadEditor( {
 		plugins: [ ArticlePluginSet, Table, RestrictedEditing ],
 		toolbar: [ 'bold', 'italic', 'link', '|', 'restrictedEditing', '|', 'undo', 'redo' ]
 	} );
-
-	currentModeDisplay.innerHTML = 'Current Mode: <span class="mode mode-restricted">RESTRICTED</span>';
-	enableSwitchToStandardMode();
 }
 
 async function reloadEditor( config ) {