agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-08 15:54:09 +00:00
Code Issues Releases Activity

chore: change observer to noobserver attr in iconify-icon, fix behavior

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2024-04-15 11:13:57 +03:00
parent c2b52cbf82
commit a210a25367
8 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
iconify-icon/icon/README.md
View File

@ -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>`): Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`):
```html ```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 or
```html ```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: 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:

12
iconify-icon/icon/demo/usage.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -337,13 +337,21 @@
<h2>Hidden icons, appear on scroll</h2> <h2>Hidden icons, appear on scroll</h2>
<div class="observer-test"> <div class="observer-test">
<div> <div>
<!-- should not render when not visible -->
<iconify-icon <iconify-icon
icon="test2:icon" icon="test2:icon"
flip="horizontal,vertical" flip="horizontal,vertical"
mode="style" mode="style"
></iconify-icon> ></iconify-icon>
<!-- should always render: attribute is boolean, value does not matter -->
<iconify-icon <iconify-icon
observe="false" noobserver
icon="test2:icon"
flip="horizontal,vertical"
mode="style"
></iconify-icon>
<iconify-icon
noobserver="false"
icon="test2:icon" icon="test2:icon"
flip="horizontal,vertical" flip="horizontal,vertical"
mode="style" mode="style"

2
iconify-icon/icon/package.json
View File

@ -2,7 +2,7 @@
"name": "iconify-icon", "name": "iconify-icon",
"description": "Icon web component that loads icon data on demand. Over 200,000 icons to choose from", "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)", "author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "2.0.0", "version": "2.1.0",
"license": "MIT", "license": "MIT",
"main": "./dist/iconify-icon.cjs", "main": "./dist/iconify-icon.cjs",
"types": "./dist/iconify-icon.d.ts", "types": "./dist/iconify-icon.d.ts",

6
iconify-icon/icon/src/attributes/inline.ts
View File

@ -1,6 +0,0 @@
/**
* Check for inline
*/
export function getInline(node: Element): boolean {
return node.hasAttribute('inline');
}

4
iconify-icon/icon/src/attributes/types.ts
View File

@ -51,8 +51,8 @@ export interface IconifyIconProperties
// Inline mode // Inline mode
inline?: boolean; inline?: boolean;
// Use intersection observer // Do not use intersection observer
observe?: boolean; noobserver?: boolean;
} }
/** /**

15
iconify-icon/icon/src/component.ts
View File

@ -9,7 +9,6 @@ import type {
CurrentIconData, CurrentIconData,
RenderedCurrentIconData, RenderedCurrentIconData,
} from './attributes/icon/state'; } from './attributes/icon/state';
import { getInline } from './attributes/inline';
import { getRenderMode } from './attributes/mode'; import { getRenderMode } from './attributes/mode';
import type { IconifyIconProperties } from './attributes/types'; import type { IconifyIconProperties } from './attributes/types';
import { exportFunctions, IconifyExportedFunctions } from './functions'; import { exportFunctions, IconifyExportedFunctions } from './functions';
@ -89,7 +88,7 @@ export function defineIconifyIcon(
// Mode // Mode
'mode', 'mode',
'inline', 'inline',
'observe', 'noobserver',
// Customisations // Customisations
'width', 'width',
'height', 'height',
@ -132,7 +131,7 @@ export function defineIconifyIcon(
})); }));
// Add style // Add style
const inline = getInline(this); const inline = this.hasAttribute('inline');
updateStyle(root, inline); updateStyle(root, inline);
// Create empty state // Create empty state
@ -195,7 +194,7 @@ export function defineIconifyIcon(
switch (name) { switch (name) {
case 'inline': { case 'inline': {
// Update immediately: not affected by other attributes // Update immediately: not affected by other attributes
const newInline = getInline(this); const newInline = this.hasAttribute('inline');
const state = this._state; const state = this._state;
if (newInline !== state.inline) { if (newInline !== state.inline) {
// Update style if inline mode changed // Update style if inline mode changed
@ -205,8 +204,8 @@ export function defineIconifyIcon(
break; break;
} }
case 'observer': { case 'noobserver': {
const value = this.observer; const value = this.hasAttribute('noobserver');
if (value) { if (value) {
this.startObserver(); this.startObserver();
} else { } else {
@ -247,7 +246,7 @@ export function defineIconifyIcon(
* Get/set inline * Get/set inline
*/ */
get inline(): boolean { get inline(): boolean {
return getInline(this); return this.hasAttribute('inline');
} }
set inline(value: boolean) { set inline(value: boolean) {
@ -457,7 +456,7 @@ export function defineIconifyIcon(
* Start observer * Start observer
*/ */
startObserver() { startObserver() {
if (!this._observer) { if (!this._observer && !this.hasAttribute('noobserver')) {
try { try {
this._observer = new IntersectionObserver((entries) => { this._observer = new IntersectionObserver((entries) => {
const intersecting = entries.some( const intersecting = entries.some(

2
iconify-icon/react/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify-icon/react", "name": "@iconify-icon/react",
"description": "React wrapper for Iconify Icon web component", "description": "React wrapper for Iconify Icon web component",
"author": "Vjacheslav Trushkin", "author": "Vjacheslav Trushkin",
"version": "2.0.1", "version": "2.1.0",
"license": "MIT", "license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues", "bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/", "homepage": "https://iconify.design/",

2
iconify-icon/solid/package.json
View File

@ -3,7 +3,7 @@
"type": "module", "type": "module",
"description": "SolidJS wrapper for Iconify Icon web component", "description": "SolidJS wrapper for Iconify Icon web component",
"author": "Vjacheslav Trushkin", "author": "Vjacheslav Trushkin",
"version": "2.0.0", "version": "2.1.0",
"license": "MIT", "license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues", "bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/", "homepage": "https://iconify.design/",