Modal

modal

A guide on how to master React Native modal complex flows. Do you find using modals in React Native to be a bit of a pain? You’re not alone! Trying to keep control of its open state and repeating the code everywhere you want to use it can be pretty tedious. And the problem only gets worse when you try to create complex flows. Once you get past two modals, your main component is a mess, and the state is all over the place.  I’ve experienced this first-hand in many big companies, like (by AB-InBev), , and now at . Zé Delivery Alfred Delivery X-Team But don’t despair! Most people think that’s the only way. Still, in this article, I will explain how problems start and how to deal with them elegantly while improving your development experience. It will even help you use modals inside and outside React components (in Sagas, for example!) . This article's teachings have been encapsulated in this library: https://github.com/GSTJ/react-native-magic-modal The Challenges Of A “Simple Flow” Imagine this. You work on Facebook, and the Product Team asks for a ‘simple flow’: As a company, I would like to show a modal asking the user to rate the app between 0–5 stars after the user likes a post for the first time. a. I show another modal asking for feedback on how to improve. f the user rates it with less than four stars, b. , show a happy modal asking the user to rate us on the app store. Otherwise , show a ‘thanks’ modal, thanking the user for their support. Finally It isn’t so far-fetched, right? Four modals deep, it brings up a lot of questions from the developer's side. Where should this logic be placed? How should we process the output from the last modal? How do we keep this clean? Can you spot what the code will be like? Do you see yourself writing complex logic to handle the order of the modals, making sure every modal has already transitioned to not visible and having tons of useStates in place? The growth of the problem Imagine you finally did it, you finished the flow, and the Product Team loves the outcome! They now want to expand this flow to show up only once whenever the user likes **anything** for the first time, whether it’s a post, a comment, or a product. How would you approach it? You will have to copy-paste all those four modals on every screen where liking is possible. Maybe you even go ahead and turn all of those into a single component. Even then, adding this wrapper component to every screen is still needed. A few months pass by, and the Development Team now sees the complexity of handling likes differently on every screen and wants to pass this responsibility to a that can be called from anywhere. How do you show the modal only when the [Saga’s Action](https://(https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) is fired? Sagas run outside React components. Redux Saga I can confidently say that I’ve experienced those scenarios happening. Working in the food delivery industry, we consistently asked the user to rate the app, the delivery, and their purchase. How to avoid it? Let’s start by tackling the state. Managing it is one of the most important things while working with modals. Expose Internal Properties With “useImperativeHandle” In short, allows you to expose internal properties via Ref. If you have a modal component, you could use to expose their `show` and `hide` functions. Meaning it can take care of its own state without delegating to its parent component with , for example.  This can be helpful when you want to make your code clearer and avoid passing down many props. Let’s give it a try: useImperativeHandle useImperativeHandle props import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const ExampleModal = React.forwardRef((ref) => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(ref, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}); That's the transition to a better place. While this is a step in the right direction, it doesn't solve all of our problems. Namely: To use it, we need to pass a prop from a hook, which means we can't call outside React components. ref useRef show We still need to instantiate the component on every screen. There’s no way to use it on multiple screens without having repeated. ExampleModal Externally exposing the component’s Ref Most people don't know this, but React has a createRef method that can be used outside React components. In fact, it's even in the React-Navigation documentation for edge cases. In practice, the flexibility it brings can be seen here: import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const imperativeModalRef = React.createRef();

export const SmartExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(imperativeModalRef, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}; Now can be imported and used anywhere, as long as is on the root. We can use show and hide from every component, function, or . imperativeModalRef SmartExample Saga That solves most of our issues, but there's still one: It is hard to manage a project with many modal refs and modals on the root. That's where you can get creative with abstractions to make the render any modal you want! One way to do this is to make the function receive a component and render it. SmartExample show Going the extra mile Instead of making you guys reinvent the wheel, I've created an open-source library that encapsulates all these concepts and more, with full TypeScript support based on . react-native-modal Here's a basic idea of how to use it: "Talk is cheap. Show me the code." ― Linus Torvalds. import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';

const ConfirmationModal = () => (
  <View>
    <TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
      <Text>Click here to confirm</Text>
    </TouchableOpacity>
  </View>
);

const ResponseModal = ({ text }) => (
  <View>
    <Text>{text}</Text>
    <TouchableOpacity onPress={() => magicModal.hide()}>
      <Text>Close</Text>
    </TouchableOpacity>
  </View>
);

const handleConfirmationFlow = async () => {
  // We call it with or without props, depending on the requirements of the modal.
  const result = await magicModal.show(ConfirmationModal);

  if (result.success) {
    return magicModal.show(() => <ResponseModal text="Success!" />);
  }

  return magicModal.show(() => <ResponseModal text="Failure :(" />);
};

export const MainScreen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handleConfirmationFlow}>
        <Text>Start the modal flow!</Text>
      </TouchableOpacity>
      <MagicModalPortal />
    </View>
  );
}; Example using react-native-magic-modal As you can see, it gives you loads of flexibility, unimaginable before, by simply abstracting the concepts we’ve gone through. Now, the confirmation flow can be called from anywhere. Inside or outside React components. Also, it automatically deals with common issues regarding modals. Did you know that, in React Native, you can’t show two modals simultaneously? Even if you try to show a modal right after another, it would probably fail as the last modal is still animating its ‘close’ state. Fortunately, the issue is already dealt with on our side. https://github.com/react-native-modal/react-native-modal/issues/30 This same logic has already been battle-tested on big companies I’ve worked on, like (by AB-InBev), , and . Zé Delivery Alfred Delivery X-Team The documentation is easy to understand and will give you a headstart. You can learn more about it here: React Native Magic Modal https://github.com/GSTJ/react-native-magic-modal Contributions accepted! Thanks for the read. If you liked the article, follow me on and . Linkedin Github Also Published here

What Everyone Is Getting Wrong About React Native Modals

Modal is a common UX element. A modal is a dialog box/popup window that is displayed on top of the current page. You must have used pop-ups and notifications for your website. For some people pop-ups are really annoying😫 if it doesn't behave as it should. It must have good UI/UX. In this article, we're going to create an efficient 🤩 from scratch without using any library. Modal component Demo Link🖤: https://react-reusable-components.vercel.app/ Our main goal is to create an efficient modal which, Has a good layout Doesn't break ui when we use overflow in the parent component Can render content Dynamically Clean and Elegant animation Looks good (good UI) Have more control for User (like clicking outside can close modal) etc. Let’s get started! If you prefer video format then you can watch this video 📽👇 Create your react-app using, npx create-react-app react-modal For this tutorial, I'm going to use so make sure you have installed node-sass package. To install it do, Sass npm install node-sass Let's create a Basic Modal component open App.js file. clean🧹 unnecessary code. Now create one button in the App.js file to open and close modal just like this 👇 </div> <div className= "App" > < button > Modal </ button > Create one state to open and close modal. Write below 👇 code: );
} import { useState } from "react" ; import "./App.scss" ; function App ( ) { const [modal, setModal] = useState( false ); const Toggle = () => setModal(!modal); return ( < div className = "App" > < button className = "clickme" onClick = {() => Toggle()}> Modal </ button > </ div > export default App; Contains modal state which is false initially. Line 6: A Toggle method to toggle modal state from false to true and vice-versa. Line 7: Make sure to connect method to onClick of the button. Line 11: Toggle() Next, create file and Write below 👇 code: Modal.js );
}; const Modal = () => { return ( < div > Modal </ div > export default Modal; Now import it in the Modal in file. App.js Here we have imported `Modal` component. And passed 
modal state as shown in the props. Line 17: Now open and write below code 👇 Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show } ) => { return ( <> { show ? < div className = "modalContainer" > < div className = "modal" > < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" > < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is Modal Content </ main > < footer className = "modal_footer" > < button className = "modal-close" > Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Show from the props. Line 3: We will display the modal only when the show state is true. Line 7: This is the whole .
 Modal Container div contains the modal. Line 9 to 30: Modal layout In the modal div, There is one header that contains the and Button (You can use any icon for the close button). modal title close The main tag contains the of the modal. content Footer has 2 buttons one is and another is . submitted canceled Now when you press a button modal will show and on pressing again it will close the modal. First Let's add some styling to our modal. Create a file and import it in the file. Modal.scss Modal.js Copy and paste this styling in the file. Modal.scss This will give your modal a better look. By applying this you can make it 
look like frost-glass. Line 21: backdrop-filter Let's add Close event in modal In the file pass toggle method as props in the modal just like this 👇 App.js <Modal show={modal} title= "My Modal" close={Toggle}/> open file and deconstruct close from the props. Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Close from the props. Line 3: We have added close method in 3 places: At the close button. Line 16: At the cancel button. Line 22: : We have also added a close method here too. Why? because whenever the user clicks outside it should close the modal. So here, when the user clicks on the modalContainer it closes the modal. Line 11 here we have to stop these click events in the modal else it will close it so for that we have used e.stopPropagation(). Line 13: You can also add event Listener and add functionality 
in which when user clicks esc key, It closes the modal. (It is good for user experience) hint: Let's use Portals to render the Modal component ⏩ What🧐 are ? portals Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ⏩ Why🤔 should we use portals? Sometimes when we use or properties in the parent component then we need child component (like modal or dialogues) to break container visually, and portals can be very handy to do that because it renders children outside of DOM hierarchy. overflow z-index ⏩ The syntax✍ for to create a portal👇 ( 
element, ) ReactDOM.createPortal DOM node where you want to render this element So let's implement portals in our Modal component. To use the portal we have to create one more element in the dom. Generally, our whole App renders in the div with the id root. Open file. index.html and above the root div create one more div with the id . modal Just like this 👇 <div id= "modal" /> < div id = "root" /> Open file and edit it just like this, Modal.js );
}; import ReactDOM from "react-dom" ; import "./modal.scss" ; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ReactDOM.createPortal( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null }, document.getElementById("modal") </> export default Modal; Import ReactDom. Line 1: After return creates a portal using , As it's the first argument we have passed the whole modal component and for the second argument we have passed the dom node where we want to render it. Line 6: ReactDom.createPortal We want to render our component in the div with id modal. Line 34: Let's make Modal content Dynamic: open file and pass title as a prop and content inside the component as shown below, App.js This is Modal content
</Modal> <Modal show={modal} title= "My Modal" close={Toggle}> Here we have passed the title as props and modal content as the children. Open and write, Modal.js (Final Modal.js code) Deconstruct and from the props. Line 5: title children Insert title in the curly braces. Line 17: Render children using the curly braces. Line 22: Now if you want to add a little animation in the modal you can watch the video or you can go to the git repository and read📚 code. Thanks For Reading😄 Feel free to visit my youtube channel: @CodeBucks

ReactJS Custom Modal Component using Hooks and Portals

Componente modal personalizado de ReactJS usando ganchos y portales

Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications. In this tutorial, we will build A simple React Modal using only 22 lines of code. The gif below will help you understand what we are trying to build Let's started Create React Project First, create a simple react project using create-react-app CLI. $ npx Create-react-app SimpleModal React ; ReactDOM ; ; { ( <h1>Create React Modal in X line of code </h1> <button>Click Me</button> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App In this tutorial, we will use the package  which is a simple and Powerful react component with a lot of benefits : react-popup Modal, Tooltip, Menu: All in one 🏋️ Full style customization 👌 Function as children pattern to take control over your popup anywhere in your code. 💪 IE Support. 🚀 TypeScript Support 👌 All these clocks in at around 3 kB zipped. ⚡️ This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. $ yarn add reactjs-popup Create React Modal Import Component from reactjs-popup and start using it like the following. Popup Add property as a simple React Button element and set property to true. trigger modal React ; ReactDOM ; Popup ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import from "reactjs-popup" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App Customizing and Styling  React Modal we need to create a file for Modal Content component and add some style Content.js React ; ({ close }) => ( <a className="close" onClick={close}>
      &times;
    </a> <div className="header"> Modal Title </div> <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div> ); //content.js import from "react" export default < = > div className "modal" </ > div { : ;
} > { : ; : solid gray; : ; : center; : ;
} > { : ; : ;
} > { : auto;
} > { : ; : ; : center;
} > { : pointer; : absolute; : block; : ; : ; : - ; : - ; : ; : ; : ; : solid ;
} /* index.css */ .modal font-size 12px .modal .header width 100% border-bottom 1px font-size 18px text-align padding 5px .modal .content width 100% padding 10px 5px .modal .actions margin .modal .actions width 100% padding 10px 5px text-align .modal .close cursor position display padding 2px 5px line-height 20px right 10px top 10px font-size 24px background #ffffff border-radius 18px border 1px #cfcece Now it's time for some magic Because provides a child as function pattern, you have full control on Popup state reactjs-popup we will update our example to use a function as a child instead of a  react element to implement `close` button. React ; ReactDOM ; Popup ; Content ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div> <App /> //index.js import from "react" import from "react-dom" import from "reactjs-popup" import from "./Content.js" import "./styles.css" ( ) function App return < = > div className "App" );
}

const rootElement = document.getElementById("root");
ReactDOM.render( , rootElement); Final Result reactjs-popup : https://react-popup.elazizi.com/ Repo : https://github.com/yjose/create-react-modal-with-22-line-of-code Codesandbox : https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t Make sure to visit react-popup home page Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post. Remember to follow me, so you can get notified about my future posts.

Create React Modal using reactjs-popup

Vue.js is a powerful JavaScript library used for building responsive and interactive user interfaces. Vue is used for its flexibility and simplicity. One of the special features of Vue.js that sets it apart is its plugin system which helps developers extend their Vue application functionality without altering its original behavior. In this article, we will explore what Vue plugins are, their benefits, how to integrate them into our Vue application, and examine some examples to gain a practical understanding of plugin usage. Vue.js plugins serve as modular components that extend the functionality of the Vue application without altering its original behavior. They also enable developers to add special features in the form of custom plugins and also add third-party plugins to the Vue app. Think of plugins as specialized tools you can add to a toolbox with each designed to extend and enhance the functionalities of your Vue application in a modular way. The way you can include a specific tool for a particular task in your toolbox is the same way Vue plugins add a specific functionality that is tailored to your application's needs. Imagine you have an application with multiple components, and you need to manage shared data across these components. Though Vue provides built-in features to handle data sharing, handling complex scenarios like this efficiently might require additional tools. Thereby the need for a plugin that can handle such a task. Vue plugins can be used to solve a wide range of problems from managing shared data across components to handling complex user interactions. They can also be used to improve the functionality of Vue applications and to optimize the rendering process. ​Vue.js plugins help developers solve a wide range of problems faced when building user interfaces. Below, are some examples of third-party plugins. Vue-select plugin is used for list filtering. Vuex plugin for state management. Vue-global for making global libraries available in the Vue application. Vue-directive for adding global directive in the Vue application. Syntax Now that we have understood the purpose and significance of Vue plugins, let us delve into the syntax for the incorporation of Vue plugins into our applications. Understanding this is very crucial in getting the benefits of plugins in our app. To use Vue.js third-party plugins, you first need to install it via the package manager npm or yarn. Once installed, you can make use of it in your app by importing it. The example below shows how to use a third-party plugin. npm install vue-plugin-name

// Import the plugin

import MyPlugin from 'my-plugin';

// Create a Vue instance

const app = createApp(App);

// Use the plugin

app.use(MyPlugin);

// Mount the app

app.mount('#app'); To use custom plugins, when creating custom plugins, you need to define a function that takes the Vue application instance as an argument. This function is where you add the functionality you want your plugin to provide. Below, is a syntax for creating a custom plugin. // Define the plugin
const MyPlugin = {
 install(app, options) {
 // Add functionality here

 app.config.globalProperties.$myMethod = function() {
   // Do something
 };
 },
};

// Create a Vue instance
const app = createApp(App);

// Use the plugin
app.use(MyPlugin);

// Mount the app
app.mount('#app'); Plugin Examples Let's explore some examples of the usage of plugins in Vue. In the example, we are going to look at the different forms of plugins. 1. Third-Party Plugins In this example, we will use the Vue router plugin used for handling page routing. / Step 1: Install Vue Router
npm install vue-router@4

// Step 2: Import and Use Vue Router
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const app = createApp(App)

app.use(router)

app.mount('#app') 2. Custom Plugins They are personalized components you create in your app depending on your needs. Think of them as solutions you craft out yourself for a specific task. There are two examples to illustrate how custom plugins are made and applied to our app. The first example is customizing a greeting message while the other one is customizing a modal. Output: Greeting Message Example This example defines a Vue.js plugin that utilizes the options parameter and also adds a global method $displayGreeting to the app. ​The use of app.config.globalProperties object here is to add global properties or methods to the Vue instance. And this enables the properties or methods to be accessible by any component in the application. // Define a Vue.js plugin that adds a global method for displaying a greeting message

export default {

 install: (app, options) => {

   // Add a global method $displayGreeting to the Vue.js application

   // This method constructs a greeting message using the provided name and some predefined greeting and ending strings

   app.config.globalProperties.$displayGreeting = function(name) {

     this.greeting = options.greeting + name + options.ending;

   };

 },

}; // Create a Vue.js application and use the plugin
import { createApp } from 'vue';
import App from './App.vue';
import DisplayPlugin from './displayPlugin';

const app = createApp(App);

// Use the plugin with options for the greeting and ending strings
app.use(DisplayPlugin, { greeting: 'Welcome to, ', geekstogeeks: '!' });

app.mount('#app'); // Define a Vue.js component that uses the global method to display a greeting message
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const name = ref('') // Define a data property for the name
const inputName = ref('') // Define a data property for the input name

onMounted(() => {
 // Call the global method when the component is mounted
 // Pass the input name as an argument to the method
 const instance = getCurrentInstance()
 instance?.appContext.config.globalProperties.$displayName(instance, inputName.value)
})
</script>

<template>
 <div>
   <input type="text" v-model="inputName" placeholder="Enter your name">
   <h1>{{ name }}!</h1>
 </div>
</template> Output: A Simple Modal Example In this example, we will explore how to create a custom plugin by creating a simple modal. Step 1 Create a new file myModal.vue to hold the modal functionalities //Create the modal component. 
<template>
  <transition name="modal">
    <div class="modal-mask" @click="$emit('close')">
      <div class="modal-wrapper" @click.stop>
        <div class="modal-container">
          <slot></slot>
          <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 10px;
}
</style> Step 2 Create the modal plugin //Create a file modalPlugin.js, to hold your plugin code. 

import MyModal from './MyModal.vue';

export default {
  install: (app) => {
    app.component('my-modal', MyModal);
  },
}; Step 3 Use the Plugin in your Application Javascript//In your main.js file, import the plugin and then apply it to your Vue app. 
import { createApp } from 'vue';
import App from './App.vue';
import modalPlugin from './modalPlugin';

const app = createApp(App);

app.use(modalPlugin);

app.mount('#app'); Step 4 Use the modal in your component Javascript//You can now use the my-modal component in any Vue component. 
<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <my-modal v-if="showModal" @close="showModal = false">
      <h1>Successful!</h1>
      <p>You clicked the button.</p>
    </my-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script> Conclusion We have looked at what Vue plugins are and their importance in the development process of applications. How their attributes can be beneficial for developers in the building of dynamic and interactive interfaces. Also, we delve into how to create our own required plugins for our apps or choose a suitable one from third-party plugins. Understanding how to integrate plugins into our app not only makes our work easier as developers but also brings about good practice. Further reading. More examples

Vue.js Plugins: What Are They, Their Benefits, and How to Integrate Them

It is a trap! We got your focus and will not let him out! These words you must hear every time you have opened a modal dialog. But you wont… Modal dialog , or are an UI trick to let you do something “single” — upload a file, provide an URL, “Are you sure”, “Click a button to win $$$” and so on. Modal dialog Lightbox Focused task Usually, you shall not, and cannot not, do anything else — you are able to perform any actions only inside hightlited modal. This is true to native modals, but not usually true for DOM implementations. “Design” But, if you want to stylish your page, and your dialogs — you have to implement “modals” using the DOM API, HTML and CSS. And to do it? Cover the entire page with a shadow. Place a dialog(window, lightbox or task) above it. Simple and Usable. And here our story starts… This is screen shot from — a quite usable modal library, which will cover the one unusual thing. react-aria-modal demo Normally you cant click at elements “outside” — they are covered by shadow. “Tab-out” from a modal. But you can In this case — modal is not very “modal”. React-aria-modal is it by using . fixing react-focus-trap Best practices MDN has a perfect article about building accesseble dialog boxes. It explain WHAT YOU have to do, but not explaining — HOW. _The dialog role is used to mark up a DHTML based application dialog or window that separates content or UI from the…_developer.mozilla.org Using the dialog role In short: you have to manage keyboard focus. And next they describe how. — is a perfect solution. It passes all the tests. jQuery UI dialog But where to get a good component in React/Vue/Angular/non-jQuery world? ? No focus management. http://www.material-ui.com/#/components/dialog — Nope. https://semantic-ui.com/modules/modal.html — Nope https://react.semantic-ui.com/modules/modal — Nope https://atlaskit.atlassian.com/components/modal-dialog — Nope. https://rambler-digital-solutions.github.io/rambler-ui/#/components/Popup?_k=vs348d — 🤷‍♂ https://ant.design/components/modal/ — 🤷‍♂ http://blueprintjs.com/docs/#core/components/dialog ….this list is infinite…. is quite strange — it handles change focus by Tab, but allows to leave a Modal by Shift+Tab. Ant works well, but will return focus only to autofocus element, or first element with tabIndex. Otherwise — will not. BluePrint.js They just are using improper way to manage a focus. The is NO ideal solution. Hooray! PS: Except jQuery. It just works. Focus trap Just to recall — I’v mention the library. It can show a Modal. ! And it uses react-focus-trap to manage focus. react-aria-modal Correctly react-focus-trap is a simple React component, which will not let your leave a boundaries of . Focus Modal But then I checked the sources — I’v found that it is . not a trap That’s A Trap. I found . And emulation is the worse thing you can do. only emulation How react-focus-trap works. It will attach global keyboard event listeners. On “Tab” it will collect all* tabbable elements and manually move focus from one to another. By doing this it will control focus, and that is a goal. But all* is not all. does not include area elements, for example. And you should not emulate the browser bahevior. Tabbles How to do it in a better way? How to lock a Focus There is 3.5 good ways to do it. The best way Move all elements from body into div with tabIndex=-1. By tabindex is not working for chilren, so you might set negative tabIndex to all the elements with a script, or just set , a new html property to disable inteactions with a whole DOM-tree… which is not supported anywhere, yet (but you can use polifills). inert By the time you can set pointer-events: none, and disable user-select on top node. Just to be sure. Move modal out of that div and gave a positive tabIndex. And least but not least — you should set aria-hidden to the Div, to not let the screen reader to read anything outside the modal of the modal to prevent accidentally escaping. And on “everything” to achieve it. Screen readers should also be trapped inside aria-hidden is the only way This is native browser behavior, and anything except Modal will be untabbale in a real. PS: Not everything — you still can tab-out from a page. May be you want it? _On my current project we have some modal panes that open up on certain actions. I am trying to get it so that when that…_stackoverflow.com Keep tabbing within modal pane only The smart way Just attach a handle to a last(and first) element, and handle Tab only on the “edges” $(':tabbale:last').on('keydown', function (e) {     if ($("this:focus") && (e.which == 9)) {        e.preventDefault();        $(':input:first').focus();    }}); It will work, it will preserve browser behavior “between” edges… but will . ignore tabIndex and element modifications This is better that “whole” emulation, but you should ignore this way. The right way The right way is not to emulate Tab, but to just not let him out. Not let the focus out. focus-trap-react is emulation, but (a different one!) is not. react-focus-trap According to react-focus-trap the sources attaches a global listener to “focus” event. Then something got focus it will check WHO. If focus is outside modal — it will be returned to the element. first This solution is very close to the ideal, but it will always return a focus to the first element, and have no idea about tabIndex. But anyway — this is the right way. Let the focus do anything inside modal, just lock it. The Focus Lock That means — if no good solution exists — it is time to create a new solution. Lock and loaded… First I planned to write an article about KISS principle, and explain the meaning of it by comparing react-focus-trap with . But now I am unsure — it is will KISS-friendly or not.. react-focus-lock But, to say the truth — this is not Focus Trap. And even not Focus-Lock. This is Focus Jail, or Focus Wall. Focus is free inside, it just cant pass the Border Security (and Jon Snow) React-focus-lock React-focus-lock, the solution I’v build and I am going to talk about uses the last and not the best way to detect the focus change — onBlur/FocusOut event. It is not as handy as FocusIn event, as long node will first lose focus, and then new component will get it — so you have to wait before check. But.. FocusOut is internal event, as long FocusIn is external. If you can listen only on your own node — you should no it. TabIndex and the Prisoner of Azkaban But the trickiest thing is to handle tabIndex _without_ emulation tabIndex. I did not found any existing solution except focus-trap-react, which is not a solution, and yet again have to build my own. Algorithm is simple: 1. Remember the last focused item.2. On focusOut: find common parent of modal and document.activeElement get all tabbable element inside common parent. get all elements inside the Modal3. Find the difference between last focused item and current.4. If diff(current-active)>1 -> return focus to the last node.5. If current < first node -> go to the last-by-order6. If current > last node -> go to the first-by-order7. If first < current < last -> move cursor to the nearest-in-dirrection tabbable The most tricky one is #7. If you use tabIndex(dont do it!) you can have: Focus outside Modal Focus inside Modal Focus outside Modal Yet again inside.. Neat :) Most of realizations does ignore tabIndex at all :) inert Conclusion Anyway, I’v spent few hours on weekends and create a quite usable components, which can help you to lock the Pandora Box you might have. Usage is simple: <FocusLock disabled={disabled}> Something inside </FocusLock> And you can use it for React(as ), or for Vue(as ). And get a good experience in both cases. react-focus-lock vue-focus-lock Here is the demo: (lock is , or it will steal ANY focus, forcing you to close browser tab :P) disabled by default Just wrap your modal with simple component, and you will become more WAI-ARIA compatible. PS: And you will also get auto-focus out of the box :) After a year of development *-Focus-lock could lock anything anywhere, supports “focus groups”, autodetects React 16 Portals, and provides some extra helper component for your service. It is still the “best” focus-locking library, based on the “right” principles. PS! You still have to hide “everything else” with aria-hidden. Lock can’t do it for you — it is not it’s job. You also have to wrap focus trap with element with , and yet again you have to do it by yourself. role=’dialog’ You have to make everything except you modal in-accessible. Un-reachable. Inert. How to do it? block everything except the Modal, using a “shadow”, “lightbox” or experimental HTML attribute. Or (or Dom-Locky) to just disable all iterations with the rest of the page. inert React-Locky wrap everything except modal with to “hide it”. aria-hidden A good article you should read about building accessible dialogs from Google IO: _As the sites we build increasingly become more app-like it's important that the platform keep up and give component…_robdodson.me Building better accessibility primitives So this is React-Aria, the modals that “just works”. _A demo of react-aria-modal_davidtheclark.github.io react-aria-modal demo Links You just read an artile about React-focus-lock, a jail for your focus. This is Component with Single Responsibility, to help you “fix” your modals _react-focus-lock - It is a trap! A lock for a Focus._github.com theKashey/react-focus-lock And this one is for Vue.js (10 lines of code, sweet!) _vue-focus-lock - It is a trap! A lock for a Focus._github.com theKashey/vue-focus-lock PS: And dont forget about pure vanilla . Which will use focusIn event :) dom-focus-lock And don’t forget about another part of good modals — event isolation, and preventing body from scrolling, while modal is being opened. _So, JFYI, you just scrolled a page down to this place. You were able to do it. The problem is – sometimes you should…_hackernoon.com How to train a your Scroll _First of all — WHY one have to fight the scroll?_medium.com How to fight the <body> scroll

It’s a (focus) Trap!

Authors:
(1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group;
(2) Jin Xu, Alibaba Group, Equal contribution;
(3) Wenrui Liu, Zhejiang University;
(4) Yunfei Chu, Alibaba Group;
(5) Xiaohuan Zhou, Alibaba Group;
(6) Yichong Leng, Alibaba Group;
(7) Yuanjun Lv, Alibaba Group;
(8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn);
(9) Yichong Leng, Zhejiang University
(10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com);
(11) Jingren Zhou, Alibaba Group. Table of Links Abstract and 1. Introduction 2 Related Work 3 AIR-Bench and 3.1 Overview 3.2 Foundation Benchmark 3.3 Chat Benchmark 3.4 Evaluation Strategy 4 Experiments 4.1 Models 4.2 Main Results 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 5 Conclusion and References A Detailed Results of Foundation Benchmark 4.1 Models We evaluate the performance of various LALMs with instruction-following capabilities. These models are either open-sourced or accessible through public APIs, such as SpeechGPT (Zhang et al., 2023), BLSP (Wang et al., 2023a), SALMONN (Tang et al., 2023a), Qwen-AudioChat (Chu et al., 2023), and Qwen-Audio Turbo [3]. Additionally, we consider large multi-modality models with audio understanding abilities like PandaGPT (Su et al., 2023), Macaw-LLM (Lyu et al., 2023), and NExT-GPT (Wu et al., 2023b). Besides, we also incorporate a concatenative approach comprising Whisper-large-v2 (Radford et al., 2023) and GPT-4 Turbo (OpenAI, 2023) for tasks related to speech as a baseline. We evaluate the performance of all these models on both funda mental and chat benchmarks, utilizing their latest publicly available checkpoints. In cases of multiple checkpoints, we select the model with the largest parameter size. For all models, we directly follow their default decoding strategies for evaluation. This paper is available on arxiv under CC BY 4.0 DEED license. [3] https://help.aliyun.com/zh/dashscope/developerreference/qwen-audio-api Authors: (1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group; (2) Jin Xu, Alibaba Group, Equal contribution; (3) Wenrui Liu, Zhejiang University; (4) Yunfei Chu, Alibaba Group; (5) Xiaohuan Zhou, Alibaba Group; (6) Yichong Leng, Alibaba Group; (7) Yuanjun Lv, Alibaba Group; (8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn); (9) Yichong Leng, Zhejiang University (10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com); (11) Jingren Zhou, Alibaba Group. Authors: Authors: (1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group; (2) Jin Xu, Alibaba Group, Equal contribution; (3) Wenrui Liu, Zhejiang University; (4) Yunfei Chu, Alibaba Group; (5) Xiaohuan Zhou, Alibaba Group; (6) Yichong Leng, Alibaba Group; (7) Yuanjun Lv, Alibaba Group; (8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn); (9) Yichong Leng, Zhejiang University (10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com); (11) Jingren Zhou, Alibaba Group. Table of Links Abstract and 1. Introduction Abstract and 1. Introduction 2 Related Work 2 Related Work 3 AIR-Bench and 3.1 Overview 3 AIR-Bench and 3.1 Overview 3.2 Foundation Benchmark 3.2 Foundation Benchmark 3.3 Chat Benchmark 3.3 Chat Benchmark 3.4 Evaluation Strategy 3.4 Evaluation Strategy 4 Experiments 4.1 Models 4.1 Models 4.2 Main Results 4.2 Main Results 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 5 Conclusion and References 5 Conclusion and References A Detailed Results of Foundation Benchmark A Detailed Results of Foundation Benchmark 4.1 Models We evaluate the performance of various LALMs with instruction-following capabilities. These models are either open-sourced or accessible through public APIs, such as SpeechGPT (Zhang et al., 2023), BLSP (Wang et al., 2023a), SALMONN (Tang et al., 2023a), Qwen-AudioChat (Chu et al., 2023), and Qwen-Audio Turbo [3]. Additionally, we consider large multi-modality models with audio understanding abilities like PandaGPT (Su et al., 2023), Macaw-LLM (Lyu et al., 2023), and NExT-GPT (Wu et al., 2023b). Besides, we also incorporate a concatenative approach comprising Whisper-large-v2 (Radford et al., 2023) and GPT-4 Turbo (OpenAI, 2023) for tasks related to speech as a baseline. We evaluate the performance of all these models on both funda mental and chat benchmarks, utilizing their latest publicly available checkpoints. In cases of multiple checkpoints, we select the model with the largest parameter size. For all models, we directly follow their default decoding strategies for evaluation. This paper is available on arxiv under CC BY 4.0 DEED license. This paper is available on arxiv under CC BY 4.0 DEED license. available on arxiv [3] https://help.aliyun.com/zh/dashscope/developerreference/qwen-audio-api

Performance Assessment of LALMs and Multi-Modality Models

Introduction The introduction of the new HTML <dialog> tag is a big change in how we make websites. It changes how we create and handle pop-up boxes in web applications. This article will look into what's good about the <dialog> tag, what it can do, and how to use it, showing why it's important for developers. The Traditional Method: Longer and Difficult ❌ Creating a popup window before used a lot of CSS and JavaScript. Here's an example of how people did it back then: <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> This code snippet shows how complicated it was just to show a simple popup. But still, the backdrop color is missing we need extra effort to show this. The New Way: Simplified With <dialog> ✅ The <dialog> tag is a new part of HTML that makes it easier to create and handle pop-up windows. Here's a basic way to use the <dialog> tag: <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> Features and Methods 1. Showing a Dialog To display a dialog, you can use the show() or showModal() methods: document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); 2. Auto-Open Dialog The open attribute keeps the dialog open from the moment the page loads: <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> Note
When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. 3. Auto Close Button Using the built-in close functionality, no JavaScript is required to close the dialog: <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> Styling the <dialog> Tag Backdrop Styling The <dialog> element includes a special ::backdrop pseudo-element for styling: dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} Main Element Styling Styling the main element is simple and can be adjusted to meet your design requirements. dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} Accessibility Improvements The <dialog> tag automatically follows the official guidelines for being easy to use and accessible. For example, you can close the dialog box by pressing the Escape key. This means there's no need for extra software that might not follow these important rules. Conclusion The new HTML <dialog> tag greatly helps web developers by making it easier to create pop-ups and dialog boxes. It provides ready-to-use features, is easy to handle, and makes websites more accessible and responsive. This makes it a very important tool for modern website building. If you want to learn more about HTML5 tags, check out my blog post: Mastering HTML5: Essential Tips and Tricks for Web Developers See the Pen  https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN Check out the basic functionality in the CodePen demo above to see how it works. If you enjoyed this article, please share it with others. Your support means a lot! Happy Coding 😊 Introduction The introduction of the new HTML <dialog> tag is a big change in how we make websites. It changes how we create and handle pop-up boxes in web applications. <dialog> This article will look into what's good about the <dialog> tag, what it can do, and how to use it, showing why it's important for developers. <dialog> The Traditional Method: Longer and Difficult ❌ Creating a popup window before used a lot of CSS and JavaScript. Here's an example of how people did it back then: <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> This code snippet shows how complicated it was just to show a simple popup. But still, the backdrop color is missing we need extra effort to show this. The New Way: Simplified With <dialog> ✅ <dialog> The <dialog> tag is a new part of HTML that makes it easier to create and handle pop-up windows. Here's a basic way to use the <dialog> tag: <dialog> <dialog> <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> Features and Methods 1. Showing a Dialog To display a dialog, you can use the show() or showModal() methods: show() showModal() document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); 2. Auto-Open Dialog The open attribute keeps the dialog open from the moment the page loads: open <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> Note When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. Note When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. <dialog> ::backdrop 3. Auto Close Button Using the built-in close functionality, no JavaScript is required to close the dialog: <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> Styling the <dialog> Tag <dialog> Backdrop Styling The <dialog> element includes a special ::backdrop pseudo-element for styling: <dialog> ::backdrop dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} Main Element Styling Styling the main element is simple and can be adjusted to meet your design requirements. dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} Accessibility Improvements The <dialog> tag automatically follows the official guidelines for being easy to use and accessible. <dialog> For example, you can close the dialog box by pressing the Escape key. This means there's no need for extra software that might not follow these important rules. Conclusion The new HTML <dialog> tag greatly helps web developers by making it easier to create pop-ups and dialog boxes. <dialog> It provides ready-to-use features, is easy to handle, and makes websites more accessible and responsive. This makes it a very important tool for modern website building. If you want to learn more about HTML5 tags, check out my blog post: Mastering HTML5: Essential Tips and Tricks for Web Developers Mastering HTML5: Essential Tips and Tricks for Web Developers See the Pen https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN Check out the basic functionality in the CodePen demo above to see how it works. If you enjoyed this article, please share it with others. Your support means a lot! Happy Coding 😊

Saying Adios to Custom Modals: Introducing the HTML <dialog> Tag

Building Advanced Video Search: Frame Search Versus Multi-Modal Embeddings

উন্নত ভিডিও অনুসন্ধান তৈরি করা: ফ্রেম অনুসন্ধান বনাম মাল্টি-মোডাল এম্বেডিং

Erstellen einer erweiterten Videosuche: Frame-Suche im Vergleich zu multimodalen Einbettungen

Creación de búsqueda de vídeo avanzada: búsqueda de fotogramas frente a incrustaciones multimodales

Création d'une recherche vidéo avancée : recherche de trames et intégrations multimodales

उन्नत वीडियो खोज का निर्माण: फ़्रेम खोज बनाम मल्टी-मोडल एम्बेडिंग

高度なビデオ検索の構築: フレーム検索とマルチモーダル埋め込み

고급 비디오 검색 구축: 프레임 검색과 다중 모드 임베딩 비교

Construindo pesquisa avançada de vídeo: pesquisa de quadros versus incorporações multimodais

Создание расширенного поиска видео: поиск кадров в сравнении с мультимодальными встраиваниями

Gelişmiş Video Arama Oluşturma: Çerçeve Aramaya Karşı Çok Modlu Yerleştirmeler

Xây dựng Tìm kiếm video nâng cao: Tìm kiếm khung so với nhúng đa phương thức

构建高级视频搜索：帧搜索与多模态嵌入

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. Sometimes, this is easy and can be done with some simple CSS, but other times, it may be more complicated. You may need to append markup to the bottom of your document so that it can be placed on top of everything else. Or maybe, depending on the scroll position, a pop-up will need to open upward instead of downward. There are lots of possible scenarios where you may need more than what’s capable with CSS by itself, and that’s where the CDK Overlay Module comes into play. In this post, we’ll look at how we can use the CDK Overlay Module to create a globally positioned modal that’s placed on top of everything else and centered within the viewport. And to contrast, we’ll create a pop-up connected to a button that will automatically position itself within the viewport based on scroll position. Alright, let’s get to it! https://youtu.be/S7d2zvbFKhs?embedable=true The Angular CDK Overlay module is really powerful and provides many features. And this means there’s a lot to know and understand. The aim of this post is to demonstrate a basic setup for two common types of overlays, modals, and pop-ups. Since there’s so much to cover within the Overlay module, I will be creating posts of more advanced Overlay module features in the future, so keep an eye out for those. For now, though, let’s start with a basic modal example. Creating a Modal With the Angular CDK Overlay Service Here, we have this list of NBA players. We have this button in the upper right corner of each player. When we click this button, we want to open up a modal to display more information about the specific player. This is something that is fairly easy to do using the CDK Overlay module. How to install the Angular CDK But, before we can use it, we first need to install the Angular CDK, which we can do with this command within our Angular app: npm i @angular/cdk How to import the Angular CDK Overlay prebuilt CSS After we have it installed, we will want to include the overlay-prebuilt CSS file from the library. It provides some basic styles in order to create modals and pop-ups that work correctly. I normally include it in something like the global stylesheet for the Angular app, so let’s import it there. global_styles.scss @import '@angular/cdk/overlay-prebuilt.css'; Ok, now we’re ready to wire up our modal. The first thing we need to do is inject the Overlay service into our constructor so that we can use it. player.component.ts export class PlayerComponent {
    ...
    constructor(private overlay: Overlay) {}
} Now, let’s create an method that we’ll call at the click of a button. Within this method, first, we’ll create our overlay using the method from the service. This method will create an overlay and return the reference to it, so we’ll set it as a variable named overlayRef since that’s what we will have after calling . openModal() create() create() export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
    }
} Ok, at this point we’ve created it, now we need to attach some markup to the overlay. So, we’ll use our overlayRef variable, and we’ll call the method. This method has a parameter where we need to pass a . attach() CdkPortal export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach();
    }
} This template portal will need to wrap whatever markup we want to display in our modal. Before we can add this portal, we first need to import it into the Portal Module. ...
import { PortalModule } from '@angular/cdk/portal';

@Component({
    selector: 'app-player',
    imports: [..., PortalModule]
    ...
} Ok, now we can switch over to our component template. We’ll add an . On this we’ll add the directive. And within this let’s add our player details component. This component has an input where it takes in a player object, so we’ll pass it to our current player. ng-template ng-template cdkPortal ng-template player.component.html <ng-template cdkPortal>
    <app-player-details [player]="player"></app-player-details>
</ng-template> Now, we also need to import this player component, so let’s do that real quick. player.component.ts ...
import { PlayerDetailsComponent } from './player-details/player-details.component';

@Component({
  selector: 'app-player',
  imports: [..., PlayerDetailsComponent]
  ...
}) Ok, the next thing we need to do is access the portal that we just added in the template so that we can pass it to our attach method. We can do this using the Angular View Child decorator. And for the , its selector will be the . We’ll call this property , and we’ll type it to as well. @ViewChild CdkPortal portal CdkPortal import { CdkPortal, PortalModule } from '@angular/cdk/portal';

export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
} Now that we have a handle on the portal, we can simply add it to our attach method. export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach(this.portal);
    }
} And the last thing we need to do is call this open modal method when the button is clicked. So, back in our component template, on the button, we bind to the click event, and then we call our method. player.component.html <button (click)="openModal()">
    ...
</button> Ok, now let’s click our button and take a look. And there it is, the click opens the modal with our player details. So, this is pretty cool, but at first glance, this may not seem like anything special, but let me tell you, it actually is. If we inspect the modal, we can see that the markup for our player details is actually getting injected into a container at the end of the . This is pretty crazy since our player component is up above within the app component. body This is what ensures that this modal will properly be placed on a layer that is unaffected by anything else within our app. And that can be really handy in many modal situations. How to Customize the Angular Overlay Settings With a Custom Overlay Config Object Now, as I mentioned earlier, there’s a lot of functionality and configuration available with the Overlay Module. For example, if we want to position our model in the center of the viewport, We can do this by passing a custom configuration object to the overlay. To do this, let’s create a variable. This will be set to a new object. We’ll need to make sure that class is imported. Within this, we’re going to set the for the overlay. config OverlayConfig positionStrategy We’ll add , and then we’ll call the method. It’s going to be a position, which just means that it will be positioned relative to the viewport and not any specific element. From there, we’ll call , and then . this.overlay position() global() centerHorizontally() centerVertically() Let’s also set a width of sixty percent to keep it from growing too wide. Then, we can pass this custom config in our create method. The items we’ve included in this custom config will now override the default values for those properties. ...
import { ..., OverlayConfig } from '@angular/cdk/overlay';

export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
            width: '60%'
        });
        const overlayRef = this.overlay.create(config);
        overlayRef.attach(this.portal);
    }
} Ok, let’s check it out. Looking pretty good right? How to Close an Angular CDK Overlay on a Backdrop Click Now, what if we want to put up a layer over the viewport when the modal is open, and when we click on that layer, we want to close the modal? Well, we can do this by adding more custom configurations in our . We can add true. This will add a backdrop element to our overlay. OverlayConfig hasBackdrop Now, to close the modal when this backdrop gets clicked, we have a method on our overlay ref that we can call. This method returns an observable that will fire every time the backdrop is clicked as long as it is open, so we can subscribe. Then, in the callback here, we will close our overlay by calling . backdropClick() overlayRef.detach() ...
export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            ...
            hasBackdrop: true
        });
        ...
        overlayRef.backdropClick().subscribe(() => overlayRef.detach());
    }
} Now, let’s try this. Cool, it closes when we click on this backdrop. Now, there’s a ton more available to us here, so I’ll save it for a future post. Just know that there’s quite a bit more functionality and configuration available to you if needed. For now, let’s look at an example of a Connected Position overlay. Creating a Pop-up With a Connected Position Angular CDK Overlay Creating a “connected position” overlay means that our pop-up, instead of being globally positioned within the viewport, will be positioned relative to the button that we clicked on to open it. As if it’s attached to it. For this, we can use a couple of directives provided by the Overlay module instead of using the Overlay service. We’ll use the directive, which will be applied to the item that we want to position from, in our case, our button. And then, we’ll use the directive that will be applied to the that we want to inject into our popup. cdkOverlayOrigin cdkConnectedOverlay ng-template For this example, since we’ll be using these directives, we can actually remove most of what we added when we were using the Overlay service. Well, get rid of the , the constructor, and the function. We can also remove the , , , and imports as well. @ViewChild openModal() PortalModule CdkPortal Overlay Overlay Config Now, within the component template, we can replace the click binding on our button with the directive. cdkOverlayOrigin <button cdkOverlayOrigin>
    ...
</button> On the overlay , we can replace the directive with the directive. ng-template cdkPortal cdkConnectedOverlay <ng-template cdkConnectedOverlay>
    ...
</ng-template> Now, we need to connect the overlay to the origin. To do this, the overlay has an input called . We need to pass this input to our origin directive instance. So we add a template reference variable, let’s call it trigger, on our origin button. cdkConnectedOverlayOrigin <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">
    ...
</button> Now, we can pass this reference to the overlay with the input. cdkConnectedOverlayOrigin <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger">
    ...
</ng-template> To make this pop-up open, we’ll use the input. This input expects a boolean value telling it whether it should be open or not. So, let’s add a property called , and initialize it to false. cdkConnectedOverlayOpen detailsOpen ...
export class PlayerComponent {
    protected detailsOpen = false;
} We’ll toggle the property when the button is clicked using a click event binding. <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
    (click)="detailsOpen = !detailsOpen">
    ...
</button> Then, we can bind our input to this property on the overlay. cdkConnectedOverlayOpen <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen">
    ...
</ng-template> Ok, let’s give this a try. Cool, now it gets positioned next to the button. And, if we inspect this again, the markup gets injected in the same location, at the end of the body. What’s even more cool is that on the item at the bottom of the viewport, we will want it to open upward because we don’t have room to see it if it opens downward. Well, if we click on the button, we can see that this actually happens without us doing anything at all. Super cool. This really saves us a ton of effort. All the tough stuff has already been figured out for us. And just like the global positioning method, when using the Overlay service, there are a bunch of configurations available to us. This time, with the directives, however, we use s and s. @Input @Output So, if we want to add the width, for example, we can use the input. cdkConnectedOverlayWidth <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%">
    ...
</ng-template> Now, the pop-up won’t grow beyond sixty percent of the width of its container. And if we want to close this pop-up when we click anywhere outside, we can use the output, which will fire when it detects a click outside of itself. When this happens, we can set our details open property to false. overlayOutsideClick <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%"
    (overlayOutsideClick)="detailsOpen = false">
    ...
</ng-template> Now, when we open our pop-up and then click outside, it closes. Just like with the Overlay service, there’s a ton more available to us, which I’ll save for a future post. Just remember that there’s more functionality and configuration available outside of what I’ve covered here. So, some pretty cool stuff is happening in these examples. It’s all actually quite complex from a development perspective, but there’s not much for us to figure out in order to leverage it, thanks to the folks who built it. Found This Helpful? If you found this article helpful and want to show some love, you can always buy me a coffee! Want to See It in Action? Check out the demo code and examples of these techniques in the Stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-hnqgln?ctl=1&embed=1&file=src%2Fplayer%2Fplayer.component.ts&embedable=true Also published . here

Learn the Basics of Angular CDK Overlay: Angular Modals and Pop-ups

Every application is built from the same type of components - buttons, inputs, dropdowns, etc., and modal windows are in this list. The reason is simple - modal windows allow us to communicate with a user and do not overwhelm a UI with additional information until it becomes needed. In this article, I will explore one of the approaches to managing modal windows in apps. Angular We use the primeng library for modals in the article's examples. Your case can be different. The general idea will be the same despite the libraries, but API can be different; be aware of it. Modal windows are just regular components - they have markup, style, and selector. But in contrast to regular components, they usually don't have to be shown on the page immediately. We need them only for the result of users' actions - confirm, discard, fill a form, etc. That's why we won't include them in our build - we will download them dynamically only if we require them. Let's see an example: public openModal(): void {
    const modalComponent = async (): Promise<any> => import('./path-to-your-modal');
    this.modalService.open(modalComponent());
} Here, we have the dynamic import approach. It means that our component will be loaded when we invoke the method. It's quite useful because we don't load the modal immediately in our chunk - only when the user needs it. This approach can help you to slightly reduce the bundle size, especially if your modals are full of logic and components. openModal In general, this is the working solution. But we can go further. Let's make a service that will handle the dynamic imports and return an instance of the modal: import { Injectable } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';

@Injectable({ providedIn: 'root' })
export class CustomModalService {
    public modalWindowComponents: { [key: string]: () => Promise<any> } = {
        ConfirmModalComponent: () =>
            import('your-path/to-component').then((component) => component.ConfirmModalComponent),
    };

constructor(private modalService: DialogService) {}

    public async openDynamicDialogModal({
        componentName,
        data,
    }: {
        componentName: string;
        data?: { [key: string]: any };
    }): Promise<any> {
        const modalComponent = this.modalService.open(await this.modalWindowComponents[componentName](), { ...data });

        modalComponent.onClose.subscribe(() => {
            // some logic
        });
        return modalComponent;
    }
} Here, we can see several important things: We use an object to store modal windows imports where the key is the component name, and the value is an import function that returns Promise; Our method is taking the params object with the component's name (to take the import function from the object) and some additional data, which contains whatever you want for a component or its appearing configuration. Also, we have a subscription for close events. It is more convenient to handle window closing in one place; We return a Promise with the imported component. It allows us to handle the logic for each modal. Here is an example of the usage of this service: public async handleOpeningModalWindow(): Promise<void> {
    const dialogRef = await this.primengModalService.openDynamicDialogModal({
        componentName: 'DeleteStreamModalComponent',
        data: {
           // your params
        },
    });

    dialogRef.onClose
        .pipe(
            // your pipes
        )
        .subscribe(() => {
            // your logic
        });
} Conclusion By adopting the approach outlined above, Angular developers can achieve a leaner, more manageable modal window system. This strategy not only reduces bundle size but also offers a unified method for modal control and customization. Embracing dynamic imports and service-based architecture empowers developers to optimize user experiences while maintaining code scalability and efficiency.

Stories, News & Mentions about MODAL

Categories

Trending Topics

Stories, News & Mentions about MODAL

Modal’s Stories on HackerNoon

Categories

Trending Topics