From 07ecea19f08a9d602ced0a39b7f1ab7a7825b746 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 28 Aug 2020 17:01:30 +0200 Subject: [PATCH] Implemented the toggle button for the manual tests sidebar. --- .../utils/manual-tests/compilehtmlfiles.js | 11 +- .../lib/utils/manual-tests/copyassets.js | 1 + .../lib/utils/manual-tests/template.html | 119 ++++++++++++++---- .../lib/utils/manual-tests/togglesidebar.js | 29 +++++ .../utils/manual-tests/compilehtmlfiles.js | 40 ++++-- 5 files changed, 165 insertions(+), 35 deletions(-) create mode 100644 packages/ckeditor5-dev-tests/lib/utils/manual-tests/togglesidebar.js diff --git a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilehtmlfiles.js b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilehtmlfiles.js index 7a06ec2df..de07c5d81 100644 --- a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilehtmlfiles.js +++ b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilehtmlfiles.js @@ -87,16 +87,21 @@ function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate, languagesT const parsedMarkdownTree = reader.parse( fs.readFileSync( sourceMDFilePath, 'utf-8' ) ); const manualTestInstruction = '
' + - '← Back to the list' + + '← Back to the list' + writer.render( parsedMarkdownTree ) + '
'; + const manualTestSidebarToggleButton = ''; + // Load test view (HTML file). const htmlView = fs.readFileSync( sourceHtmlFilePath, 'utf-8' ); // Attach script file to the view. const scriptTag = - '' + + '' + + '' + '' + '' + `${ languagesToLoad.map( language => { @@ -106,7 +111,7 @@ function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate, languagesT ''; // Concat the all HTML parts to single one. - const preparedHtml = combine( viewTemplate, manualTestInstruction, htmlView, scriptTag ); + const preparedHtml = combine( viewTemplate, manualTestInstruction, manualTestSidebarToggleButton, htmlView, scriptTag ); // Prepare output path. const outputFilePath = path.join( buildDir, absoluteHtmlFilePath ); diff --git a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/copyassets.js b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/copyassets.js index e941a744d..4d20e2537 100644 --- a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/copyassets.js +++ b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/copyassets.js @@ -9,6 +9,7 @@ const path = require( 'path' ); const fs = require( 'fs-extra' ); const assets = [ + path.join( __dirname, 'togglesidebar.js' ), path.join( __dirname, 'attachinspector.js' ), require.resolve( '@ckeditor/ckeditor5-inspector' ) ]; diff --git a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/template.html b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/template.html index efcaa2b73..b2ea1034b 100644 --- a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/template.html +++ b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/template.html @@ -6,6 +6,12 @@ Manual Test diff --git a/packages/ckeditor5-dev-tests/lib/utils/manual-tests/togglesidebar.js b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/togglesidebar.js new file mode 100644 index 000000000..f5ae8a075 --- /dev/null +++ b/packages/ckeditor5-dev-tests/lib/utils/manual-tests/togglesidebar.js @@ -0,0 +1,29 @@ +/** + * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* global document, window */ + +const toggleButton = document.querySelector( '.manual-test-sidebar__toggle' ); +const container = document.body; +const pinnedCSSClass = 'manual-test-container_pinned-sidebar'; +const localStorageKey = 'cke5-manual-test-sidebar-pinned'; +const isSidebarPinned = window.localStorage.getItem( localStorageKey ); + +if ( isSidebarPinned === 'true' ) { + container.classList.add( pinnedCSSClass ); +} + +// The "manual-test-container_no-transitions" class prevents CSS transitions when the page is loaded, +// for instance, seeing the sidebar animate on every refresh is pretty annoying. Once the webpage is loaded, +// the class can be removed and all transitions in the sidebar can work as expected. +document.addEventListener( 'DOMContentLoaded', () => { + container.classList.remove( 'manual-test-container_no-transitions' ); +} ); + +toggleButton.addEventListener( 'click', () => { + container.classList.toggle( pinnedCSSClass ); + + window.localStorage.setItem( localStorageKey, container.classList.contains( pinnedCSSClass ) ); +} ); diff --git a/packages/ckeditor5-dev-tests/tests/utils/manual-tests/compilehtmlfiles.js b/packages/ckeditor5-dev-tests/tests/utils/manual-tests/compilehtmlfiles.js index 53a2b9635..ddbfc8871 100644 --- a/packages/ckeditor5-dev-tests/tests/utils/manual-tests/compilehtmlfiles.js +++ b/packages/ckeditor5-dev-tests/tests/utils/manual-tests/compilehtmlfiles.js @@ -136,9 +136,13 @@ describe( 'compileHtmlFiles', () => { expect( stubs.fs.outputFileSync ).to.be.calledWithExactly( path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [ '
template html content
', - '
← Back to the list

Markdown header

', + '
← Back to the list

Markdown header

', + '', '
html file content
', - '' + + '' + + '' + '' + '' + `` + @@ -170,9 +174,13 @@ describe( 'compileHtmlFiles', () => { expect( stubs.fs.outputFileSync ).to.be.calledWithExactly( path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [ '
template html content
', - '
← Back to the list

Markdown header

', + '
← Back to the list

Markdown header

', + '', '
html file content
', - '' + + '' + + '' + '' + '' + '' + @@ -206,9 +214,13 @@ describe( 'compileHtmlFiles', () => { expect( stubs.fs.outputFileSync ).to.be.calledWith( path.join( 'buildDir', 'path', 'to', 'manual', 'file.abc.html' ), [ '
template html content
', - '
← Back to the list

Markdown header

', + '
← Back to the list

Markdown header

', + '', '
html file content
', - '' + + '' + + '' + '' + '' + `` + @@ -323,9 +335,13 @@ describe( 'compileHtmlFiles', () => { expect( stubs.fs.outputFileSync ).to.be.calledWithExactly( path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [ '
template html content
', - '
← Back to the list

Markdown header

', + '
← Back to the list

Markdown header

', + '', '
html file content
', - '' + + '' + + '' + '' + '' + `` + @@ -374,9 +390,13 @@ describe( 'compileHtmlFiles', () => { expect( stubs.fs.outputFileSync ).to.be.calledWithExactly( path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [ '
template html content
', - '
← Back to the list

Markdown header

', + '
← Back to the list

Markdown header

', + '', '
html file content
', - '' + + '' + + '' + '' + '' + `` +