umberto 3.0.0 → 3.2.0

package/themes/umberto/src/css/_api-subheader.scss

@@ -7,6 +7,8 @@
 	}
 
 	.api-subheader {
+		display: flex;
+
 		&.hidden-loading {
 			display: none;
 		}

package/themes/umberto/src/css/_badge.scss

@@ -29,6 +29,7 @@
 	font-size: u-font-size( -1 );
 	padding: u-spacing( -3 ) u-spacing( -2 ) u-spacing( -3 );
 	border: 1px solid u-color( 'text' );
+	margin-right: 1rem;
 
 	&.badge--has-invert {
 		padding-right: 0;

package/themes/umberto/src/css/_tree.scss

@@ -24,6 +24,15 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 
 	list-style: none;
 
+	&.guide-tree {
+		opacity: 0; //prevents flickering when applying categories fold state
+	}
+
+	&.state-applied {
+		opacity: 1;
+		transition: opacity 0.05s
+	}
+
 	li {
 		position: relative;
 		cursor: pointer;

package/themes/umberto/src/js/_apitree.js

@@ -42,31 +42,23 @@ export function scrollApiTree() {
 	const treeHeight = tree.height();
 	const storageKey = 'side-nav-scroll-top';
 	const sideNavScrollTop = Number( window.localStorage.getItem( storageKey ) );
-	const treeItemClass = 'tree__item__wrapper';
 	const activeTreeItemClass = 'tree__item__wrapper--active';
 	const activeTreeItem = $( `div.side-navigation .${ activeTreeItemClass }` );
-	const treeWrappers = $( `div.side-navigation [class*="${ treeItemClass }"]` );
-	const activeTreeItemIndex = treeWrappers.index( activeTreeItem );
-	let activeTreeItemTop = 25; // 25 is for top padding of side nav.
+	let activeTreeItemTop = 0;
 	const bound = 50; // Offset from top and bottom of side nav.
 
-	// Sum nav tree items heights.
-	treeWrappers.each( function( index ) {
-		if ( activeTreeItemIndex === -1 || index === activeTreeItemIndex ) {
-			return false;
-		}
-
-		activeTreeItemTop += $( this ).height();
-	} );
+	if ( activeTreeItem.length ) {
+		activeTreeItemTop = activeTreeItem[ 0 ].offsetParent ? activeTreeItem[ 0 ].offsetParent.offsetTop : 0;
 
-	if (
-		sideNavScrollTop !== null &&
-		activeTreeItemTop > sideNavScrollTop + bound &&
-		activeTreeItemTop < sideNavScrollTop + treeHeight - bound
-	) {
-		tree.scrollTop( sideNavScrollTop );
-	} else {
-		tree.scrollTop( Math.max( 0, activeTreeItemTop - treeHeight / 2 ) );
+		if (
+			sideNavScrollTop !== null &&
+			activeTreeItemTop > sideNavScrollTop + bound &&
+			activeTreeItemTop < sideNavScrollTop + treeHeight - bound
+		) {
+			tree.scrollTop( sideNavScrollTop );
+		} else {
+			activeTreeItem[ 0 ].scrollIntoView( { block: 'center' } );
+		}
 	}
 
 	tree.scroll( throttle( () => {

package/themes/umberto/src/js/_sidenavigation.js

@@ -5,14 +5,55 @@
 
 export default function sideNavigation() {
 	const folderButtons = Array.from( document.querySelectorAll( '.tree:not(.api-tree) .tree__item--folder' ) );
-	if ( !folderButtons.length ) {
-		return;
+	const guideTreeElement = document.getElementById( 'guidetree' );
+	const foldedClassName = 'tree__item-nested-list--hidden';
+	const activeClassName = '.tree__item__wrapper--active';
+	const localStorageKey = 'foldersState';
+
+	let foldersState = JSON.parse( window.localStorage.getItem( localStorageKey ) );
+	if ( foldersState === null ) {
+		foldersState = {};
 	}
 
 	folderButtons.forEach( btn => {
+		const element = btn.parentNode.nextElementSibling; // Get <ul> element
+		const id = element.getAttribute( 'data-id' );
+
+		applyFolderState( element, foldersState[ id ] );
+		checkForActiveChildren( element, id );
+
 		btn.addEventListener( 'click', function() {
-			// Get <ul> and control it.
-			btn.parentNode.nextElementSibling.classList.toggle( 'tree__item-nested-list--hidden' );
+			element.classList.toggle( foldedClassName );
+			saveFolderState( id, isFolded( element ) );
 		} );
 	} );
+
+	if ( guideTreeElement ) {
+		guideTreeElement.classList.add( 'state-applied' );
+	}
+
+	function applyFolderState( element, folded ) {
+		if ( folded === false ) {
+			element.classList.remove( foldedClassName );
+		}
+		if ( folded === true ) {
+			element.classList.add( foldedClassName );
+		}
+	}
+
+	function saveFolderState( id, state ) {
+		foldersState[ id ] = state;
+		window.localStorage.setItem( localStorageKey, JSON.stringify( foldersState ) );
+	}
+
+	function checkForActiveChildren( element, id ) {
+		if ( element.querySelectorAll( activeClassName ).length > 0 ) {
+			element.classList.remove( foldedClassName );
+			saveFolderState( id, isFolded( element ) );
+		}
+	}
+
+	function isFolded( element ) {
+		return element.classList.contains( foldedClassName );
+	}
 }

package/themes/umberto/src/js/app.js

@@ -44,19 +44,19 @@ window.umberto = {
 $( document ).ready( () => {
 	pageNavigation(); // pageNavigation - needs to be run before filtering initialization.
 	copyMobileApiNavigation(); // copy API Tree into mobile navigation
+	sideNavigation();
+	expandApiTree();
+	scrollApiTree();
 	enableFiltering();
 	setupPrism();
-	expandApiTree();
 	enableCollapsables();
 	hideTogglers();
 	enableAnchors();
 	enableDropdowns();
 	trackArticlePosition();
-	scrollApiTree();
 	setUpFuse();
 	activateDevNames();
 	attachPermalinkListener();
-	sideNavigation();
 	rwdButton();
 	imageModal(); // lightbox for { @img } elements
 	// `sampleCode()` must be called after the `setupPrism()` function.

package/.editorconfig

@@ -1,12 +0,0 @@
-# Configurations to normalize the IDE behavior.
-# http://editorconfig.org/
-
-root = true
-
-[*]
-indent_style = tab
-tab_width = 4
-charset = utf-8
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.eslintrc.js

@@ -1,41 +0,0 @@
-/**
- * @license Copyright (c) 2017-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-module.exports = {
-	extends: 'ckeditor5',
-	rules: {
-		'ckeditor5-rules/license-header': [ 'error', { headerLines: [
-			'/**',
-			' * @license Copyright (c) 2017-2023, CKSource Holding sp. z o.o. All rights reserved.',
-			' * For licensing, see LICENSE.md.',
-			' */'
-		] } ]
-	},
-	env: {
-		node: true
-	},
-	ignorePatterns: [
-		'source/**/*.js',
-		'temp/**/*.js',
-		'themes/umberto/source/**/*.js',
-		'tests/src/data-converter/converters/typedoc/fixtures'
-	],
-	overrides: [
-		{
-			files: [ 'scripts/**/*.js' ],
-			globals: {
-				hexo: true
-			}
-		},
-		{
-			files: [ 'themes/**/*.js' ],
-			env: {
-				browser: true
-			}
-		}
-	]
-};

package/scripts-dev/postinstall.js

@@ -1,18 +0,0 @@
-/**
- * @license Copyright (c) 2017-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-'use strict';
-
-/* eslint-env node */
-
-const path = require( 'path' );
-const fs = require( 'fs' );
-const ROOT_DIRECTORY = path.join( __dirname, '..' );
-
-// When installing a repository as a dependency, the `.git` directory does not exist.
-// In such a case, husky should not attach its hooks as npm treats it as a package, not a git repository.
-if ( fs.existsSync( path.join( ROOT_DIRECTORY, '.git' ) ) ) {
-	require( 'husky' ).install();
-}

package/themes/umberto/layout/_api-docs/_partial/types.pug

@@ -1,5 +0,0 @@
-include ../_mixin/_type
-
-div(class="types hidden-loading")
-	if isNonEmptyArray( data.types )
-		+type( data.types )