From a677eee5c1be470116dd157c4cc933e09f81200c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Feb 2017 11:20:16 +0100 Subject: [PATCH] Adding the possibility to search for the blocks to insert --- blocks.js | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 28 ++------------- style.css | 7 +++- 3 files changed, 107 insertions(+), 29 deletions(-) diff --git a/blocks.js b/blocks.js index 1801c745e6b83..8873400246e0d 100644 --- a/blocks.js +++ b/blocks.js @@ -38,7 +38,53 @@ var config = { 'image': [ 'image' ], 'paragraph': [ 'text' ], 'default': [] - } + }, + blockCategories: [ + { id: 'frequent', label: 'Frequently Used' }, + { id: 'media', label: 'Media' } + ], + blocks: [ + { + label: 'Paragraph', + icon: '', + categories: [ 'frequent' ] + }, + { + label: 'Heading', + icon: 'Heading', + categories: [ 'frequent' ] + }, + { + label: 'Image', + icon: 'Image', + categories: [ 'frequent' ] + }, + { + label: 'Quote', + icon: '', + categories: [ 'frequent' ] + }, + { + label: 'Gallery', + icon: '', + categories: [ 'media' ] + }, + { + label: 'Unordered List', + icon: '', + categories: [ 'frequent' ] + }, + { + label: 'Ordered List', + icon: '', + categories: [ 'frequent' ] + }, + { + label: 'Embed', + icon: '', + categories: [ 'media' ] + } + ] }; var editor = queryFirst( '.editor' ); @@ -49,6 +95,8 @@ var blockControls = queryFirst( '.block-controls' ); var inlineControls = queryFirst( '.inline-controls' ); var insertBlockButton = queryFirst( '.insert-block__button' ); var insertBlockMenu = queryFirst( '.insert-block__menu' ); +var insertBlockMenuSearchInput = queryFirst( '.insert-block__search' ); +var insertBlockMenuContent = queryFirst( '.insert-block__content' ) var textAlignLeft = queryFirst( '.block-text__align-left' ); var textAlignCenter = queryFirst( '.block-text__align-center' ); var textAlignRight = queryFirst( '.block-text__align-right' ); @@ -58,6 +106,7 @@ var imageAlignLeft = queryFirst( '.block-image__align-left' ); var imageAlignRight = queryFirst( '.block-image__align-right' ); var selectedBlock = null; +var searchBlockFilter = ''; var supportedBlockTags = Object.keys( config.tagTypes ) .slice( 0, -1 ) // remove 'default' option @@ -78,6 +127,7 @@ window.addEventListener( 'mouseup', onSelectText, false ); attachBlockHandlers(); attachControlActions(); attachTypeSwitcherActions(); +attachBlockMenuSearch(); /** * Core logic @@ -250,6 +300,53 @@ function attachTypeSwitcherActions() { } ); } +function fillBlockMenu() { + insertBlockMenuContent.innerHTML = ''; + config.blockCategories.forEach( function ( category ) { + var node = document.createElement( 'div' ); + node.className = 'insert-block__category category_' + category.id; + var nodeHeader = document.createElement( 'span' ); + nodeHeader.className = 'insert-block__separator'; + nodeHeader.innerText = category.label; + var nodeBlocks = document.createElement( 'div' ); + nodeBlocks.className = 'insert_block__category-blocks'; + node.appendChild( nodeHeader ); + node.appendChild( nodeBlocks ); + var categoryBlocks = config.blocks + .filter( function( block ) { + return block.categories.indexOf( category.id ) !== -1 + && block.label.toLowerCase().indexOf( searchBlockFilter.toLowerCase() ) !== -1; + } ); + categoryBlocks + .forEach( function( block ) { + var node = document.createElement( 'div' ); + node.className = 'insert-block__block'; + node.innerHTML = block.icon + ' ' + block.label; + nodeBlocks.appendChild(node); + } ); + + if ( categoryBlocks.length ) { + insertBlockMenuContent.appendChild( node ); + } + } ); + + var placeholder = document.createElement('div'); + placeholder.className = 'insert-block__separator'; + placeholder.textContent = 'These don\'t work yet.'; + insertBlockMenuContent.appendChild( placeholder ); +} + +function attachBlockMenuSearch() { + insertBlockMenuSearchInput.addEventListener( 'keyup', filterBlockMenu, false ); + insertBlockMenuSearchInput.addEventListener( 'input', filterBlockMenu, false ); + fillBlockMenu(); + + function filterBlockMenu( event ) { + searchBlockFilter = event.target.value; + fillBlockMenu(); + } +} + function reselect() { queryFirst( '.is-selected' ).click(); } @@ -299,7 +396,7 @@ function openBlockMenu( event ) { clearBlocks(); event.stopPropagation(); insertBlockMenu.style.display = 'block'; - queryFirst( '.insert-block__search' ).focus(); + insertBlockMenuSearchInput.focus(); } function hideMenu() { diff --git a/index.html b/index.html index cf716966c8cf9..59c07a4891173 100644 --- a/index.html +++ b/index.html @@ -80,32 +80,8 @@

1.0 Is The Loneliest Number

- Recent -
-
- Paragraph -
-
- Heading Heading -
-
- Image Image -
-
- Quote -
-
- Gallery -
-
- Unordered List -
-
- Ordered List -
- These don't work yet.
- -
+
+ diff --git a/style.css b/style.css index 49a653faa93db..772d289b0436f 100644 --- a/style.css +++ b/style.css @@ -423,7 +423,12 @@ img.is-selected { color: #9ea7af; } -.insert-block__block-list { +.insert-block__content { + max-height: 180px; + overflow: auto; +} + +.insert_block__category-blocks { display: flex; flex-flow: row wrap; }