From b203cf9cfb7ee67303e887b8fee7e7f607f32b41 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Wed, 16 Jun 2021 15:36:51 +0300 Subject: [PATCH] Observe documentElement instead of body in SVG framework --- .../tests/10-finder-iconify-test.ts | 2 +- .../browser-tests/tests/10-finder-v1-test.ts | 2 +- .../browser-tests/tests/10-finder-v2-test.ts | 2 +- .../tests/20-renderer-v1-test.ts | 14 ++---- .../tests/20-renderer-v2-test.ts | 14 ++---- .../tests/30-iconify-api-test.ts | 2 +- .../tests/30-iconify-basic-test.ts | 17 +++---- .../tests/30-iconify-without-api-test.ts | 17 +++---- packages/iconify/demo/swap-body.html | 47 +++++++++++++++++++ packages/iconify/src/modules/root.ts | 6 +-- 10 files changed, 76 insertions(+), 47 deletions(-) create mode 100644 packages/iconify/demo/swap-body.html diff --git a/packages/browser-tests/tests/10-finder-iconify-test.ts b/packages/browser-tests/tests/10-finder-iconify-test.ts index 67e122a..8c3d1ac 100644 --- a/packages/browser-tests/tests/10-finder-iconify-test.ts +++ b/packages/browser-tests/tests/10-finder-iconify-test.ts @@ -4,7 +4,7 @@ import chai from 'chai'; import { getNode } from './node'; import { finder } from '@iconify/iconify/lib/finders/iconify'; import { IconifyElement } from '@iconify/iconify/lib/modules/element'; -import { IconifyIconCustomisations } from '@iconify/core/lib/customisations'; +import { IconifyIconCustomisations } from '@iconify/utils/lib/customisations'; const expect = chai.expect; diff --git a/packages/browser-tests/tests/10-finder-v1-test.ts b/packages/browser-tests/tests/10-finder-v1-test.ts index 806d05d..6098fa7 100644 --- a/packages/browser-tests/tests/10-finder-v1-test.ts +++ b/packages/browser-tests/tests/10-finder-v1-test.ts @@ -9,7 +9,7 @@ import { import { IconifyFinder } from '@iconify/iconify/lib/finders/interface'; import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify-v1'; import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-v1-icon'; -import { IconifyIconName } from '@iconify/core/lib/icon/name'; +import { IconifyIconName } from '@iconify/utils/lib/icon/name'; const expect = chai.expect; diff --git a/packages/browser-tests/tests/10-finder-v2-test.ts b/packages/browser-tests/tests/10-finder-v2-test.ts index e6e66a5..3198ffa 100644 --- a/packages/browser-tests/tests/10-finder-v2-test.ts +++ b/packages/browser-tests/tests/10-finder-v2-test.ts @@ -9,7 +9,7 @@ import { import { IconifyFinder } from '@iconify/iconify/lib/finders/interface'; import { finder as iconifyFinder } from '@iconify/iconify/lib/finders/iconify'; import { finder as iconifyIconFinder } from '@iconify/iconify/lib/finders/iconify-icon'; -import { IconifyIconName } from '@iconify/core/lib/icon/name'; +import { IconifyIconName } from '@iconify/utils/lib/icon/name'; const expect = chai.expect; diff --git a/packages/browser-tests/tests/20-renderer-v1-test.ts b/packages/browser-tests/tests/20-renderer-v1-test.ts index 57bb52b..ec99586 100644 --- a/packages/browser-tests/tests/20-renderer-v1-test.ts +++ b/packages/browser-tests/tests/20-renderer-v1-test.ts @@ -14,7 +14,7 @@ import { getIcon, } from '@iconify/core/lib/storage/storage'; import { renderIcon } from '@iconify/iconify/lib/modules/render'; -import { stringToIcon } from '@iconify/core/lib/icon/name'; +import { stringToIcon } from '@iconify/utils/lib/icon/name'; import { IconifyElement } from '@iconify/iconify/lib/modules/element'; const expect = chai.expect; @@ -30,20 +30,16 @@ describe('Testing legacy renderer', () => { prefix: 'mdi', icons: { 'account-box': { - body: - '', + body: '', }, 'account-cash': { - body: - '', + body: '', }, 'account': { - body: - '', + body: '', }, 'home': { - body: - '', + body: '', }, }, width: 24, diff --git a/packages/browser-tests/tests/20-renderer-v2-test.ts b/packages/browser-tests/tests/20-renderer-v2-test.ts index d37bbb1..6f06862 100644 --- a/packages/browser-tests/tests/20-renderer-v2-test.ts +++ b/packages/browser-tests/tests/20-renderer-v2-test.ts @@ -14,7 +14,7 @@ import { getIcon, } from '@iconify/core/lib/storage/storage'; import { renderIcon } from '@iconify/iconify/lib/modules/render'; -import { stringToIcon } from '@iconify/core/lib/icon/name'; +import { stringToIcon } from '@iconify/utils/lib/icon/name'; import { IconifyElement } from '@iconify/iconify/lib/modules/element'; const expect = chai.expect; @@ -30,20 +30,16 @@ describe('Testing renderer', () => { prefix: 'mdi', icons: { 'account-box': { - body: - '', + body: '', }, 'account-cash': { - body: - '', + body: '', }, 'account': { - body: - '', + body: '', }, 'home': { - body: - '', + body: '', }, }, width: 24, diff --git a/packages/browser-tests/tests/30-iconify-api-test.ts b/packages/browser-tests/tests/30-iconify-api-test.ts index 0d40301..e84c2c6 100644 --- a/packages/browser-tests/tests/30-iconify-api-test.ts +++ b/packages/browser-tests/tests/30-iconify-api-test.ts @@ -10,7 +10,7 @@ const selector = 'span.iconify, i.iconify, span.iconify-inline, i.iconify-inline'; // Do not observe document.body! -Iconify.stopObserving(document.body); +Iconify.stopObserving(document.documentElement); // Create node to observe const observedNode = getNode('iconify-api'); diff --git a/packages/browser-tests/tests/30-iconify-basic-test.ts b/packages/browser-tests/tests/30-iconify-basic-test.ts index c59c7a6..99a48a3 100644 --- a/packages/browser-tests/tests/30-iconify-basic-test.ts +++ b/packages/browser-tests/tests/30-iconify-basic-test.ts @@ -13,7 +13,7 @@ const node1 = getNode('iconify-basic'); const node2 = getNode('iconify-basic'); // Do not observe document.body! -Iconify.stopObserving(document.body); +Iconify.stopObserving(document.documentElement); // Set root node Iconify.observe(node1); @@ -26,20 +26,16 @@ describe('Testing Iconify object', () => { prefix, icons: { 'account-box': { - body: - '', + body: '', }, 'account-cash': { - body: - '', + body: '', }, 'account': { - body: - '', + body: '', }, 'home': { - body: - '', + body: '', }, }, width: 24, @@ -48,8 +44,7 @@ describe('Testing Iconify object', () => { // Add one icon separately Iconify.addIcon(prefix + ':id-test', { - body: - '', + body: '', width: 128, height: 128, }); diff --git a/packages/browser-tests/tests/30-iconify-without-api-test.ts b/packages/browser-tests/tests/30-iconify-without-api-test.ts index da0bf05..86e0ae7 100644 --- a/packages/browser-tests/tests/30-iconify-without-api-test.ts +++ b/packages/browser-tests/tests/30-iconify-without-api-test.ts @@ -13,7 +13,7 @@ const node1 = getNode('iconify-basic'); const node2 = getNode('iconify-basic'); // Do not observe document.body! -Iconify.stopObserving(document.body); +Iconify.stopObserving(document.documentElement); // Set root node Iconify.observe(node1); @@ -26,20 +26,16 @@ describe('Testing Iconify object (without API)', () => { prefix, icons: { 'account-box': { - body: - '', + body: '', }, 'account-cash': { - body: - '', + body: '', }, 'account': { - body: - '', + body: '', }, 'home': { - body: - '', + body: '', }, }, width: 24, @@ -48,8 +44,7 @@ describe('Testing Iconify object (without API)', () => { // Add one icon separately Iconify.addIcon(prefix + ':id-test', { - body: - '', + body: '', width: 128, height: 128, }); diff --git a/packages/iconify/demo/swap-body.html b/packages/iconify/demo/swap-body.html new file mode 100644 index 0000000..5cc7f0c --- /dev/null +++ b/packages/iconify/demo/swap-body.html @@ -0,0 +1,47 @@ + + + + + + Iconify Demo: Usage + + + + +

This is a simple HTML page with few icons.

+

+ Icon that behaves like an image: + +

+ + + + diff --git a/packages/iconify/src/modules/root.ts b/packages/iconify/src/modules/root.ts index f0e2b74..2e7b104 100644 --- a/packages/iconify/src/modules/root.ts +++ b/packages/iconify/src/modules/root.ts @@ -48,12 +48,12 @@ export function addRootNode( * Add document.body node */ export function addBodyNode(): ObservedNode { - if (document.body) { - return addRootNode(document.body); + if (document.documentElement) { + return addRootNode(document.documentElement); } nodes.push({ node: () => { - return document.body; + return document.documentElement; }, }); }