mirror of
https://github.com/iconify/iconify.git
synced 2025-01-06 07:20:40 +00:00
chore: change observer to noobserver attr in iconify-icon, fix behavior
This commit is contained in:
Vjacheslav Trushkin
parent
c2b52cbf82
commit
a210a25367
@ -20,13 +20,13 @@ Iconify Icon web component renders icons.
|
||||
Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`):
|
||||
|
||||
```html
|
||||
<script src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
|
||||
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.0.0/dist/iconify-icon.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
|
||||
```
|
||||
|
||||
or, if you are building a project with a bundler, you can include the script by installing `iconify-icon` as a dependency and importing it in your project:
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@ -337,13 +337,21 @@
|
||||
<h2>Hidden icons, appear on scroll</h2>
|
||||
<div class="observer-test">
|
||||
<div>
|
||||
<!-- should not render when not visible -->
|
||||
<iconify-icon
|
||||
icon="test2:icon"
|
||||
flip="horizontal,vertical"
|
||||
mode="style"
|
||||
></iconify-icon>
|
||||
<!-- should always render: attribute is boolean, value does not matter -->
|
||||
<iconify-icon
|
||||
observe="false"
|
||||
noobserver
|
||||
icon="test2:icon"
|
||||
flip="horizontal,vertical"
|
||||
mode="style"
|
||||
></iconify-icon>
|
||||
<iconify-icon
|
||||
noobserver="false"
|
||||
icon="test2:icon"
|
||||
flip="horizontal,vertical"
|
||||
mode="style"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "iconify-icon",
|
||||
"description": "Icon web component that loads icon data on demand. Over 200,000 icons to choose from",
|
||||
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"license": "MIT",
|
||||
"main": "./dist/iconify-icon.cjs",
|
||||
"types": "./dist/iconify-icon.d.ts",
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Check for inline
|
||||
*/
|
||||
export function getInline(node: Element): boolean {
|
||||
return node.hasAttribute('inline');
|
||||
}
|
||||
@ -51,8 +51,8 @@ export interface IconifyIconProperties
|
||||
// Inline mode
|
||||
inline?: boolean;
|
||||
|
||||
// Use intersection observer
|
||||
observe?: boolean;
|
||||
// Do not use intersection observer
|
||||
noobserver?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -9,7 +9,6 @@ import type {
|
||||
CurrentIconData,
|
||||
RenderedCurrentIconData,
|
||||
} from './attributes/icon/state';
|
||||
import { getInline } from './attributes/inline';
|
||||
import { getRenderMode } from './attributes/mode';
|
||||
import type { IconifyIconProperties } from './attributes/types';
|
||||
import { exportFunctions, IconifyExportedFunctions } from './functions';
|
||||
@ -89,7 +88,7 @@ export function defineIconifyIcon(
|
||||
// Mode
|
||||
'mode',
|
||||
'inline',
|
||||
'observe',
|
||||
'noobserver',
|
||||
// Customisations
|
||||
'width',
|
||||
'height',
|
||||
@ -132,7 +131,7 @@ export function defineIconifyIcon(
|
||||
}));
|
||||
|
||||
// Add style
|
||||
const inline = getInline(this);
|
||||
const inline = this.hasAttribute('inline');
|
||||
updateStyle(root, inline);
|
||||
|
||||
// Create empty state
|
||||
@ -195,7 +194,7 @@ export function defineIconifyIcon(
|
||||
switch (name) {
|
||||
case 'inline': {
|
||||
// Update immediately: not affected by other attributes
|
||||
const newInline = getInline(this);
|
||||
const newInline = this.hasAttribute('inline');
|
||||
const state = this._state;
|
||||
if (newInline !== state.inline) {
|
||||
// Update style if inline mode changed
|
||||
@ -205,8 +204,8 @@ export function defineIconifyIcon(
|
||||
break;
|
||||
}
|
||||
|
||||
case 'observer': {
|
||||
const value = this.observer;
|
||||
case 'noobserver': {
|
||||
const value = this.hasAttribute('noobserver');
|
||||
if (value) {
|
||||
this.startObserver();
|
||||
} else {
|
||||
@ -247,7 +246,7 @@ export function defineIconifyIcon(
|
||||
* Get/set inline
|
||||
*/
|
||||
get inline(): boolean {
|
||||
return getInline(this);
|
||||
return this.hasAttribute('inline');
|
||||
}
|
||||
|
||||
set inline(value: boolean) {
|
||||
@ -457,7 +456,7 @@ export function defineIconifyIcon(
|
||||
* Start observer
|
||||
*/
|
||||
startObserver() {
|
||||
if (!this._observer) {
|
||||
if (!this._observer && !this.hasAttribute('noobserver')) {
|
||||
try {
|
||||
this._observer = new IntersectionObserver((entries) => {
|
||||
const intersecting = entries.some(
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "@iconify-icon/react",
|
||||
"description": "React wrapper for Iconify Icon web component",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "2.0.1",
|
||||
"version": "2.1.0",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"type": "module",
|
||||
"description": "SolidJS wrapper for Iconify Icon web component",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user