From df6f848a7b5983ff27405dea88d02ec81ad00ee3 Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Mon, 1 Jul 2024 04:48:17 +0200 Subject: [PATCH] chore(site): site content reorganization an improvements --- site/src/playground/ui-playground.ts | 4 -- site/static/assets/examples/animate.svg | 2 +- site/views/_layouts/presentation.njk | 2 + .../overview/quick/02-core/01-custom-tags.njk | 2 +- .../quick/02-core/03-tag-vs-attribute.njk | 2 +- .../quick/02-core/04-event-listener.njk | 50 ++++++++++++++----- .../overview/quick/02-core/05-esl-utils.njk | 39 +++++++++++++++ .../overview/quick/02-core/05-media-query.njk | 2 +- .../quick/02-core/06-traversing-query.njk | 2 +- .../04-responsiveness-n-flexibility.njk | 12 ++--- .../quick/04-playground/00-playground.njk | 13 +++-- .../quick/04-playground/03-settings.njk | 2 +- 12 files changed, 99 insertions(+), 33 deletions(-) create mode 100644 site/views/overview/quick/02-core/05-esl-utils.njk diff --git a/site/src/playground/ui-playground.ts b/site/src/playground/ui-playground.ts index 7305b7789..8d74f40dc 100644 --- a/site/src/playground/ui-playground.ts +++ b/site/src/playground/ui-playground.ts @@ -26,8 +26,4 @@ UIPRenderingTemplatesService.add('default', ` `); -// Add to UIP by default -(UIPEditor.prototype as any)._onWheel = (e: WheelEvent): void => e.stopPropagation(); -ESLEventUtils.initDescriptor(UIPEditor.prototype as any, '_onWheel', {auto: true, event: 'wheel'}); - init(); diff --git a/site/static/assets/examples/animate.svg b/site/static/assets/examples/animate.svg index 5d11df6fd..196663ec0 100644 --- a/site/static/assets/examples/animate.svg +++ b/site/static/assets/examples/animate.svg @@ -1,4 +1,4 @@ - + diff --git a/site/views/_layouts/presentation.njk b/site/views/_layouts/presentation.njk index f5f7e33a5..fcf646db8 100644 --- a/site/views/_layouts/presentation.njk +++ b/site/views/_layouts/presentation.njk @@ -12,6 +12,8 @@ type="default | none" vertical count="1" esl-carousel-wheel + esl-carousel-wheel-ignore="uip-root, pre, [contenteditable]" + esl-carousel-wheel-prevent-default esl-carousel-touch="@mobile => swipe" esl-carousel-keyboard esl-carousel-anchored> diff --git a/site/views/overview/quick/02-core/01-custom-tags.njk b/site/views/overview/quick/02-core/01-custom-tags.njk index 22c90e4c0..e5c5beea4 100644 --- a/site/views/overview/quick/02-core/01-custom-tags.njk +++ b/site/views/overview/quick/02-core/01-custom-tags.njk @@ -1,5 +1,5 @@ --- -title: ESL Custom Tags +title: Custom Tags hash: custom-tags tags: overview-quick parent: 00-core diff --git a/site/views/overview/quick/02-core/03-tag-vs-attribute.njk b/site/views/overview/quick/02-core/03-tag-vs-attribute.njk index aebe54ebf..3b17b7398 100644 --- a/site/views/overview/quick/02-core/03-tag-vs-attribute.njk +++ b/site/views/overview/quick/02-core/03-tag-vs-attribute.njk @@ -1,7 +1,7 @@ --- title: ESLBaseElement vs ESLMixinElement hash: tag-vs-attribute -tags: overview-quick +tags: -overview-quick parent: 00-core --- diff --git a/site/views/overview/quick/02-core/04-event-listener.njk b/site/views/overview/quick/02-core/04-event-listener.njk index dc80707fb..a28daabcd 100644 --- a/site/views/overview/quick/02-core/04-event-listener.njk +++ b/site/views/overview/quick/02-core/04-event-listener.njk @@ -9,22 +9,46 @@ parent: 00-core

ESL Event Listener is an embedded ESL module that take care of the event listeners management and provide extended utilities to work with events. - ESL provides ability to register event listeners in declarative way using TS @listen decorator. - Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically. + Module supports event delegation, custom event targets. Listeners registration works on the "host" concept that allows you to link the listener to the specific component instance (to manage subscriptions automatically).

-
- {% code 'typescript', 'code-block' %} - class MyComponent extends ESLBaseElement { +
+
+
Before
+
+ {% code 'typescript', 'code-block' %} + connectedCallback() { + this.onBtnClick = this.onBtnClick.bind(this); + this.addEventListener('click', this.onBtnClick); + + this.onResize = this.onResize.bind(this); + this._resizeObserver = new ResizeObserver(this.onResize); + this._resizeObserver.observe(this); + } + + disconnectedCallback() { + this.removeEventListener('click', this.onBtnClick); + this._resizeObserver.disconnect(); + } + + onBtnClick(event) { + if (event.target.closest('button')) { + // Button click + } + } + + onResize() {/* Resize subscription for component */} + {% endcode %} +
+
+
+
With ESL
+ {% code 'typescript', 'code-block' %} @listen({event: 'click', selector: 'button'}) - onBtnClick(event) { - console.log('Button click catched with delegation', event); - } + onBtnClick(event) {/* Click subscription with delegation */} @listen({event: 'resize', target: ESLResizeObserverTarget.for}) - onResize(event) { - console.log('Component resized', event); - } - } - {% endcode %} + onResize(event) {/* Resize subscription for component */} + {% endcode %} +
diff --git a/site/views/overview/quick/02-core/05-esl-utils.njk b/site/views/overview/quick/02-core/05-esl-utils.njk new file mode 100644 index 000000000..8d304d1c3 --- /dev/null +++ b/site/views/overview/quick/02-core/05-esl-utils.njk @@ -0,0 +1,39 @@ +--- +title: ESL Utils and syntax sugar +hash: esl-utils +tags: overview-quick +parent: 00-core +--- + +

{{ title }}

+ +

+ ESL Core provides big amount of utils and syntax sugar to simplify development process. +

+ + diff --git a/site/views/overview/quick/02-core/05-media-query.njk b/site/views/overview/quick/02-core/05-media-query.njk index 229609f1e..f589491ca 100644 --- a/site/views/overview/quick/02-core/05-media-query.njk +++ b/site/views/overview/quick/02-core/05-media-query.njk @@ -1,7 +1,7 @@ --- title: ESL Extended Syntax - Media Query hash: esl-utils-media-query -tags: overview-quick +tags: -overview-quick parent: 00-core --- diff --git a/site/views/overview/quick/02-core/06-traversing-query.njk b/site/views/overview/quick/02-core/06-traversing-query.njk index 48c9b34e3..14d49e49d 100644 --- a/site/views/overview/quick/02-core/06-traversing-query.njk +++ b/site/views/overview/quick/02-core/06-traversing-query.njk @@ -1,7 +1,7 @@ --- title: ESL Extended Syntax - Traversing Query hash: esl-utils-traversing-query -tags: overview-quick +tags: -overview-quick parent: 00-core --- diff --git a/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk b/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk index cd2d379aa..2c793530c 100644 --- a/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk +++ b/site/views/overview/quick/03-components/04-responsiveness-n-flexibility.njk @@ -1,22 +1,22 @@ --- title: Built-In Responsiveness and Flexibility hash: responsiveness +cls: text-center tags: overview-quick parent: 00-components --- -

Built-In Responsiveness and Flexibility

+

Built-In Responsiveness and Flexibility

-

- ESL components can adapt their behavior based on patterns or device sizes. +

+ ESL components can adapt their behavior based on environment (device type, screen size, etc).

- The same Tab component can be presented as an Accordion on smaller screens without needing separate markup—just change - one parameter! + The same ESL components can be used to display both Tab and Accordion design patterns, depending on the screen size.

-

+

See Example diff --git a/site/views/overview/quick/04-playground/00-playground.njk b/site/views/overview/quick/04-playground/00-playground.njk index 257eb2421..76793c5b8 100644 --- a/site/views/overview/quick/04-playground/00-playground.njk +++ b/site/views/overview/quick/04-playground/00-playground.njk @@ -6,10 +6,7 @@ tags: overview-quick

UI Playground - - {% include 'static/assets/common/github.svg' %} - +

@@ -18,3 +15,11 @@ tags: overview-quick

The UI Playground is a great tool for developers who want to see how the components work and how they can be customized.

+

+ + See project on GitHub + +

diff --git a/site/views/overview/quick/04-playground/03-settings.njk b/site/views/overview/quick/04-playground/03-settings.njk index 839a85623..b4a8eeada 100644 --- a/site/views/overview/quick/04-playground/03-settings.njk +++ b/site/views/overview/quick/04-playground/03-settings.njk @@ -20,7 +20,7 @@ parent: 00-playground
- +