![]() Here, the loader is added to the body of the document, but it can be attached to any element via the DOM. In pure javascript, you can do it like this: let spinner = document.createElement("joomla-core-loader") Now that the loader is available, it needs to be added to the document via the DOM (Document Object Model) to be visible. Web component assets are prefixed with webcomponent. $wam = Factory :: getApplication ( ) -> getDocument ( ) -> getWebAssetManager ( ) $wam -> useScript ( 're-loader' ) Then it is just a matter of calling that asset to 'attach' it to a page (web components are loaded asynchronously). ![]() The system is aware of all available assets. Web components are listed and made available as assets as much as any other library like jQuery. Web assets are very powerful in the sense that you now have a knowledge base (defined as a Json file at media/system/) of how the system javascript libraries are related with each other. ![]() Joomla web components can be found under media/system/js. You can use the new Joomla 4 loader (or spinner) in the same way, but calling and using it is a bit different. There are many possible other uses for a loader, especially when initiating long Ajax tasks. The refresh of the page then stops it automatically. The loader starts on submitting a form and while it waits for the task return, the loader plays in the foreground. I have started using that technique on long tasks, for instance the import of data into the system. Basically, you would call Joomla.loadingLayer('load') on the loading of a page, then Joomla.loadingLayer('show') whenever the loader needs to be visible. Using the loader is as simple as making sure it is available on the page. The Joomla 3 (ajax) loader The Joomla 3 loader The Joomla 4 loader is now available as a web component. Web components allow developers to reuse custom elements on a web page or web app without the fear of code collusion. One of these techniques is Web Components. Joomla 4 is catching up with the new (and not so new) web technologies, technologies that are now widely supported by most modern browsers.
1 Comment
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |