From 895488b2f970f6beb6c96aee540ad94c605f0845 Mon Sep 17 00:00:00 2001 From: indigane Date: Tue, 24 May 2022 22:42:58 +0300 Subject: [PATCH] Fix issue with virtual keyboards --- README.md | 2 +- card-sort.html | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0b34cc4..09ae348 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A tool for conducting a virtual card sorting. ## Demo -[https://indigane.github.io/cardsort/card-sort.html#eJxNUMtOwzAQ...WN98_BRZsUQ==](https://indigane.github.io/cardsort/card-sort.html#eJxFUE1PwzAM_StTdtw4cN1lakEwjU4ty8QFcXBDaEPDXOWjVYT47-QNBAe_92LLz3Y-xVJsnkXxSmItCu_1R2vTwtK5i9Rp5OYhY0m-z3SDWAJWK2Bd1lXmWwS5kOmOXXB0zuqeAY55SlnsyA_a2qz2NNEvSeXMiK59tAbJBw7WoLkyfgRxB5cqongoTlVRZlG371oFM-kr7NNoB9tm1wB51k72P5Max5Y7iBR6hu0RQWrQGHqMbbqQx0sqsnRhR0HhWPmI2-Rs3lA_pVH_7ftU_kvjI9lF_iCjxMtabMXm-usb1WBkkQ==) +[https://indigane.github.io/cardsort/card-sort.html#eJw9kcFOwzAMhl...zI6t8U=](https://indigane.github.io/cardsort/card-sort.html#eJw9kcFOwzAMhl8FlesuXHdBUGAHNq1ikxBCHNzgtdaSOHITpgnx7iTOOlXK_9lyftvpb3PbLD-bhxAsNousQoZjIYlkRj5qdgogMKSp8A8b-OZMj-DzVwDBq2BUsfamwxBQSmTBHHsUOWuQ8MrCxrCljC30PQyo5CNYTqEGAq5nC5VFx2ohWTpYPql7ixbVrR0vti0b9kkrWcpUrYCfe7bJJNfrzSeIpcfzMASbm2Z8oSGfKxBLpgDzdB12JRDwIIniHGR9pRPNuTXiUcWxV40xmVK0JldkA34ob7ZJ0yjMLuPWk9Zu84C6fAcBzqAgk6dQCMGMVaVKOckjXP5XZ1Px6tjhkH3qUh1HiKVbl1w4UmnyBt80jQpTmLfaBfLVfxcFTnN6z65e3yepY7xnX3Fodd4PcM3Xorlvlnd__zI6t8U=) ## Create your own diff --git a/card-sort.html b/card-sort.html index 6c8cfc9..dc9c43d 100644 --- a/card-sort.html +++ b/card-sort.html @@ -200,6 +200,7 @@ dragEnabled: true, dragSort: true, dragHandle: '.category-drag-handle', + layoutOnResize: false, }).on('layoutEnd', () => categoriesGrid.synchronize()); const cardGrids = [uncategorizedCardsGrid]; @@ -250,6 +251,23 @@ }); buttonShareResult.addEventListener('click', shareResult); buttonExportResult.addEventListener('click', exportResult); + // Fix for window resize caused by virtual keyboard + // Muuri layout is deferred until input loses focus + let isDeferredResize = false; + window.addEventListener('resize', debounce(function handleWindowResize() { + if (document.activeElement.tagName.toLowerCase() === 'input') { + isDeferredResize = true; + return; + } + categoriesGrid.refreshItems().layout(); + }, Muuri.defaultOptions.layoutOnResize)); + document.addEventListener('focusout', function handleInputDefocus() { + if ( ! isDeferredResize) { + return; + } + categoriesGrid.refreshItems().layout(); + isDeferredResize = false; + }); } function createCard(text, categoryGrid) {