Skip to content

Commit

Permalink
Merge 07ecea1 into 739bc44
Browse files Browse the repository at this point in the history
  • Loading branch information
@oleq
oleq committed Aug 28, 2020
2 parents 739bc44 + 07ecea1 commit 5fee055
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 35 deletions.
11 changes: 8 additions & 3 deletions packages/ckeditor5-dev-tests/lib/utils/manual-tests/compilehtmlfiles.js
View file
Expand Up @@ -87,16 +87,21 @@ function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate, languagesT
const parsedMarkdownTree = reader.parse( fs.readFileSync( sourceMDFilePath, 'utf-8' ) );
const manualTestInstruction =
'<div class="manual-test-sidebar">' +
'<a href="/" class="manual-test-root-link">&larr; Back to the list</a>' +
'<a href="/" class="manual-test-sidebar__root-link">&larr; Back to the list</a>' +
writer.render( parsedMarkdownTree ) +
'</div>';

const manualTestSidebarToggleButton = '<button class="manual-test-sidebar__toggle" type="button" title="Toggle sidebar">' +
'<span></span><span></span><span></span>' +
'</button>';

// Load test view (HTML file).
const htmlView = fs.readFileSync( sourceHtmlFilePath, 'utf-8' );

// Attach script file to the view.
const scriptTag =
'<body class="manual-test-container">' +
'<body class="manual-test-container manual-test-container_no-transitions">' +
'<script src="/assets/togglesidebar.js"></script>' +
'<script src="/assets/inspector.js"></script>' +
'<script src="/assets/attachinspector.js"></script>' +
`${ languagesToLoad.map( language => {
Expand All @@ -106,7 +111,7 @@ function compileHtmlFile( buildDir, sourceFilePathBase, viewTemplate, languagesT
'</body>';

// 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 );
Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-dev-tests/lib/utils/manual-tests/copyassets.js
View file
Expand Up @@ -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' )
];
Expand Down
119 changes: 97 additions & 22 deletions packages/ckeditor5-dev-tests/lib/utils/manual-tests/template.html
View file
Expand Up @@ -6,6 +6,12 @@
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self' https://cksource.com http://*.cke-cs.com; script-src 'self' https://cksource.com; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *">
<title>Manual Test</title>
<style>
:root {
--ck-manual-test-sidebar-width: 390px;
--ck-manual-test-container-padding: 40px;
--ck-manual-test-transition-time: .2s;
}

.manual-test-list-container,
.manual-test-sidebar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Expand All @@ -21,26 +27,47 @@
}

.manual-test-container {
padding: 30px;
padding-left: 420px;
padding: var(--ck-manual-test-container-padding);
transition: padding .2s ease-in-out;
}

/*
* Disable all transitions until the DOM is fully loaded. This prevents
* annoying unnecessary animations on page load
*/
.manual-test-container.manual-test-container_no-transitions,
.manual-test-container.manual-test-container_no-transitions > .manual-test-sidebar,
.manual-test-container.manual-test-container_no-transitions > .manual-test-sidebar__toggle,
.manual-test-container.manual-test-container_no-transitions > .manual-test-sidebar__toggle > * {
transition: none !important;
}

.manual-test-container_pinned-sidebar {
padding-left: calc( var(--ck-manual-test-sidebar-width) + var(--ck-manual-test-container-padding));
}

/* ------------ Sidebar ----------------------------------------------------------------- */

.manual-test-sidebar {
line-height: 18px;

box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
left: calc( -1 * var(--ck-manual-test-sidebar-width) );
bottom: 0;
width: 390px;
width: min(100vw, var(--ck-manual-test-sidebar-width));
background-color: #f7f7f7;
border-right: 1px solid #bfbfbf;
color: #333;
padding: 15px;
overflow-x: hidden;
overflow-y: auto;
z-index: 9999;
transition: left var(--ck-manual-test-transition-time) ease-in-out;
}

.manual-test-container_pinned-sidebar .manual-test-sidebar {
left: 0;
box-shadow: 0 0 8px rgba(0,0,0,.15);
}

Expand All @@ -60,7 +87,70 @@
font-size: 14px;
}

.manual-test-root-link {
/* ------------ Sidebar toggle button ----------------------------------------------------------------- */

.manual-test-sidebar__toggle {
background: none;
width: 24px;
height: 24px;
display: block;
overflow: hidden;
position: fixed;
top: 10px;
left: 10px;
border: none;
padding: 0;
margin: 0;
outline: none;
transition: left var(--ck-manual-test-transition-time) ease-in-out;
opacity: .5;
z-index: 10000;
}

.manual-test-sidebar__toggle:hover {
opacity: 1;
}

.manual-test-sidebar__toggle span {
display: block;
width: 20px;
height: 3px;
background: black;
border-radius: 3px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform var(--ck-manual-test-transition-time) ease-in-out, opacity var(--ck-manual-test-transition-time) ease-in-out;
}

.manual-test-sidebar__toggle span:nth-child(1) {
transform: translate(-50%, calc(-50% - 5px));
}

.manual-test-sidebar__toggle span:nth-child(3) {
transform: translate(-50%, calc(-50% + 5px));
}

.manual-test-container_pinned-sidebar .manual-test-sidebar__toggle {
left: min(calc(100vw - 35px), 350px);
}

.manual-test-container_pinned-sidebar .manual-test-sidebar__toggle span:nth-child(1) {
transform: translate(-50%, -50%) rotate(-45deg);
}

.manual-test-container_pinned-sidebar .manual-test-sidebar__toggle span:nth-child(2) {
opacity: 0;
}

.manual-test-container_pinned-sidebar .manual-test-sidebar__toggle span:nth-child(3) {
transform: translate(-50%, -50%) rotate(45deg);
}

/* ------------ "Back to the list" button styles ----------------------------------------------------------------- */

.manual-test-sidebar__root-link {
display: inline-block;
padding: 8px 0;
text-align: center;
Expand All @@ -69,24 +159,9 @@
text-decoration: none;
}

.manual-test-root-link:hover {
.manual-test-sidebar__root-link:hover {
text-decoration: underline;
}

@media only screen and (max-width: 920px) {
.manual-test-container {
padding-left: 45px;
}

.manual-test-sidebar {
left: -375px;
transition: .15s;
}

.manual-test-sidebar:hover {
left: 0;
}
}
</style>
</head>
<body>
Expand Down
29 changes: 29 additions & 0 deletions packages/ckeditor5-dev-tests/lib/utils/manual-tests/togglesidebar.js
View file
@@ -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 ) );
} );
40 changes: 30 additions & 10 deletions packages/ckeditor5-dev-tests/tests/utils/manual-tests/compilehtmlfiles.js
View file
Expand Up @@ -136,9 +136,13 @@ describe( 'compileHtmlFiles', () => {
expect( stubs.fs.outputFileSync ).to.be.calledWithExactly(
path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [
'<div>template html content</div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-sidebar__root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<button class="manual-test-sidebar__toggle" type="button" title="Toggle sidebar">' +
'<span></span><span></span><span></span>' +
'</button>',
'<div>html file content</div>',
'<body class="manual-test-container">' +
'<body class="manual-test-container manual-test-container_no-transitions">' +
'<script src="/assets/togglesidebar.js"></script>' +
'<script src="/assets/inspector.js"></script>' +
'<script src="/assets/attachinspector.js"></script>' +
`<script src="${ path.sep + path.join( 'path', 'to', 'manual', 'file.js' ) }"></script>` +
Expand Down Expand Up @@ -170,9 +174,13 @@ describe( 'compileHtmlFiles', () => {
expect( stubs.fs.outputFileSync ).to.be.calledWithExactly(
path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [
'<div>template html content</div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-sidebar__root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<button class="manual-test-sidebar__toggle" type="button" title="Toggle sidebar">' +
'<span></span><span></span><span></span>' +
'</button>',
'<div>html file content</div>',
'<body class="manual-test-container">' +
'<body class="manual-test-container manual-test-container_no-transitions">' +
'<script src="/assets/togglesidebar.js"></script>' +
'<script src="/assets/inspector.js"></script>' +
'<script src="/assets/attachinspector.js"></script>' +
'<script src="/translations/en.js"></script>' +
Expand Down Expand Up @@ -206,9 +214,13 @@ describe( 'compileHtmlFiles', () => {
expect( stubs.fs.outputFileSync ).to.be.calledWith(
path.join( 'buildDir', 'path', 'to', 'manual', 'file.abc.html' ), [
'<div>template html content</div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-sidebar__root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<button class="manual-test-sidebar__toggle" type="button" title="Toggle sidebar">' +
'<span></span><span></span><span></span>' +
'</button>',
'<div>html file content</div>',
'<body class="manual-test-container">' +
'<body class="manual-test-container manual-test-container_no-transitions">' +
'<script src="/assets/togglesidebar.js"></script>' +
'<script src="/assets/inspector.js"></script>' +
'<script src="/assets/attachinspector.js"></script>' +
`<script src="${ path.sep + path.join( 'path', 'to', 'manual', 'file.abc.js' ) }"></script>` +
Expand Down Expand Up @@ -323,9 +335,13 @@ describe( 'compileHtmlFiles', () => {
expect( stubs.fs.outputFileSync ).to.be.calledWithExactly(
path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [
'<div>template html content</div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-sidebar__root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<button class="manual-test-sidebar__toggle" type="button" title="Toggle sidebar">' +
'<span></span><span></span><span></span>' +
'</button>',
'<div>html file content</div>',
'<body class="manual-test-container">' +
'<body class="manual-test-container manual-test-container_no-transitions">' +
'<script src="/assets/togglesidebar.js"></script>' +
'<script src="/assets/inspector.js"></script>' +
'<script src="/assets/attachinspector.js"></script>' +
`<script src="${ path.sep + path.join( 'path', 'to', 'manual', 'file.js' ) }"></script>` +
Expand Down Expand Up @@ -374,9 +390,13 @@ describe( 'compileHtmlFiles', () => {
expect( stubs.fs.outputFileSync ).to.be.calledWithExactly(
path.join( 'buildDir', 'path', 'to', 'manual', 'file.html' ), [
'<div>template html content</div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<div class="manual-test-sidebar"><a href="/" class="manual-test-sidebar__root-link">&larr; Back to the list</a><h2>Markdown header</h2></div>',
'<button class="manual-test-sidebar__toggle" type="button" title="Toggle sidebar">' +
'<span></span><span></span><span></span>' +
'</button>',
'<div>html file content</div>',
'<body class="manual-test-container">' +
'<body class="manual-test-container manual-test-container_no-transitions">' +
'<script src="/assets/togglesidebar.js"></script>' +
'<script src="/assets/inspector.js"></script>' +
'<script src="/assets/attachinspector.js"></script>' +
`<script src="/${ path.join( 'path', 'to', 'manual', 'file.js' ) }"></script>` +
Expand Down

0 comments on commit 5fee055

Please sign in to comment.