068 Library Manager Anticipated Functionality

LIBRARY MANAGER ANTICIPATED FUNCTIONALITY

Talk About The Expected Or Anticipated New Library Feature That Being Added To JCB

00:00:00 (Click on these time links to see Youtube video)

I would like to talk about the expected or anticipated new Library feature that's being added to JCB. I'm still in the development phase of this. I've been working on the UI. Which really is how I anticipate it should function. It's not yet set in stone. I have not yet started adapting the compiler to make use of this new feature. But it is anticipated to eventually become 00:00:34 more fixed and steady. I want to illustrate two things. One is we have this Bootstrap library set up. This Bootstrap library, the specific name, is linked to many snippets and it can never change. 00:00:53 I've made it that, even if you try to change it, and you click save, it will revert back to the correct name. That's only with regards to libraries that already become part Of the Joomla Component Boulder Community Snippets libraries. Every time we have new libraries contributed to the community then 00:01:19 that library's name will become fixed. It cannot be changed. That is a way of protecting the system from collapsing on itself. If people could change these things in their own JCB, then it could end up making so many confused results. What they still can change is the way the library is 00:01:46 added to Components. Currently I set it up that it links to this two URLs 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js and https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'. It has this 'Always Add". That means on every page where Bootstrap 4 is being used, it will always add these files. You might later see when Joomla 4 is released that there are some local Joomla 4 00:02:12 libraries we would rather use like you have for jQuery at this stage. If you want to use jQuery on a page you wouldn't do this kind of inclusion. You would rather use the internal Joomla API to get those libraries on the page. And for that I added this custom script option.

Two Functions - prepareDocument And setDocument

00:02:30

There are two places in every view, there are two types of functions used to add the specific library to the page. The one function is this prepareDocument function and the other one is setDocument. The one function uses the document directly variable naming and then add script. Because it adds document to the document variable. The other one grabs upon a global document variable. It's based on which class it is inheriting and so forth. They are basically there for two methods Being used to adding the custom or the library to any page. And so when you 00:03:19 Use this custom script option, You would Target These two functions or class methods, which will then adequately be available for every page that makes use of this library.

Conditional Option

00:03:39

The other one is a conditional option. The conditional option is the better option. Because this one would adapt the code on the basis of the implementation per view. You would select the files whether it is include or exclude. If you select exclude it means it will always include it unless these behaviors that you are going to set over here, 00:04:08 is valid. Those of you who know the conditional concept within the fields. I have taken that same conditional concept and I'm applying it on adding or not adding a file. It's much the same. You still have this Isolate or Chain option. The reality is00:04:36 there are no config fields yet, you need to first go and create a config field. Config field is really an existing field that you've already created before coming here. I haven't saved this as a condition. I'm going to save that. I'm going to edit. You'll see 00:05:02 the config library, if I click on it here. I can select any field out of my whole list of fields. I've already made one just for our illustration. Bootstrap v4(Radio). That's the field I wanted to be in the library tab. This again is very much similar to the Component Config options area. Except we are selecting fields for the library which will then in effect be added to the Components Global Options area. Let's save and close.

Option Field Drop Down

00:05:40

We'll see in Option Field drop down that that field comes up here. If we select it that fields have two options, yes or no. So if this '(Url) bootstrap.min.css - link' library and '(url) bootstrap.min.js - link' library file we want to include it when the Add Bootstrap button is set to 00:05:57 Yes. That's the conditional way of doing it. At this stage we will have 3 to 4 ways of adding the fields onto the page. The reason why this conditional one is not being shipped this way at the moment 00:06:18 is because I'm not shipping these fields. The whole idea of creating a field on all of those who in all the systems of those who used JCB, I'm still pondering whether I should write a script to do that. It's that's the issue. If we shipped this as the standard way of including the Bootstrap libraries, 00:06:43 then I will need to create this Add Bootstrap v4 field on every system, and then link it in with correct IDs and stuff. I haven't done that. We are looking at how can we do this?

????? We want to make this dynamic. Let's say someone has a specific 00:07:05 file, let me save this, they have a specific file which if someone is using Bootstrap and they wanna add a specific extra feature and I need more More JavaScript on the page You know they could create that file Click here By going to add new files I know let's say it's a local file they could click here 00:07:31 And they can collect Any file of just gonna make it Any file And just like with a component include When you add custom files to your component You have that same feature really here except you can also use URLs So it's the same custom adding of files or folders So now you want to have this Bootstrap Min.js In the media 00:07:58 Boot Strap Bootstrap 4 there we go You wanted in that folder js That's really where you want to put this file And you don't want the file itself to be updated that filename you wanna keep And you want to have it available to the library So now you click save and close 00:08:23 So now if we look here we'll see now there is a file called Bootstrap min.js But you don't want to always be included You wanted to be included only if there is a specific Switch Tripped On on this Use of this file The idea is now that you would go to the config library And you create a new field And 00:08:51 Let's say that this new field is Let's say I'm just gonna use a Add more And Obviously it should be more related to Bootstrap but just for explanation Then you would say that specific field which it Is this cases It's this one Should When add more is set yes 00:09:15 Then it should be Added Now That is as far as I've come to Sort of Think about Implementing These kind of features Dynamically You see previously I wrote all this hard coded right into the compiler 00:09:33 And based on its own automated Observation of the you know UIkit version 2 If it founds specific classes it dynamically added files or didn't add files Now I'm thinking that If you wanna be so Customised and dynamic then you won't use the conditional option you'll rather use the custom script option You still have these two buttons That you can then use The global 00:10:02 Values of You can still get those values In the scripture And act upon it and load in the libraries with custom scripting now I I did some Prep on that kind of approached here in FooTable It's actually Says here This FooTable Style So 00:10:25 You need to now Actually line up a field value With FooTable Style And then it will dynamically add the specific CSS classes To the to the table to the page For both this prepared document And for Set document So you have 00:10:46 Add always then you have add conditions Or custom script Let me just say another thing about the condition option The condition option I'm pondering Whether this condition option should have a global value And also a page value You see if it have a page value Then you can overwrite the global value with the page value So it's almost like if we detect 00:11:13 That let's say bootstrap 4 Is being used in a specific View And that view has a menu Then dynamically will add to that menu The function of these buttons As well as having it added up into the global options of the component itself So it'll be Global options And the page will fall back on to the global options Unless someone with manually overwrite that in the because when when is that usually the case If they have another library or another component 00:11:47 That already loads the files and they wanna excluded from the page because it's already there And that's why I'm thinking about You know having it on the page as well as globally And if you feel well I don't want to use it to really decide whether these You know Libraries Should Ever Be on the page well then in that case add always And then these files will Including this one Will always be added to the page 00:12:15 And we will take care of the script The code to achieve that And now I was also thinking if we Wanna have some files only be added always then Then it is the files that you do not actually You know If you want For example if you want These two files to be always added Then within conditions you will only create a condition 00:12:43 For the files you want to have a condition for So that the files that is not being targeted by conditions Will automatically always be added Anyway That is at this stage some of the thoughts I have I'm thinking I'm gonna Say that if any of you wanna give more ideas Then grab out your screen recorder Open this page 00:13:09 And talk through and explain some things In a little tutorial Post it on YouTube as a response to this tutorial Or go to our GitHub discussion area You know we are busy with this Discussion here On GitHub it's issue 92 00:13:29 Bootstrap or UIkit Version 3 or Bootstrap option It's in this issue that this long discussion is going on And where this whole library idea is actually Forming and Expanding you'll see already typed a little response here what I wanna post With this tutorial that I'm making as a URL So Really what I would like to say is I'm busy 00:13:57 Trying to Answer this new functionality And This is the way I've gone about doing it at this stage And I I know that these Libraries that are already in our a component Bootstrap UI kit and fooTable I'm gonna end up Adding enough information for these libraries So did they all just work out of the box 00:14:22 That's gonna be my responsibility to To put all the necessary Code and scripting and everything in place So that this option will just work All of them And just when someone wants to expand on them Will they need to do so But it is obviously a once off situation Once I've implemented this new feature and set these functions and Properties in place 00:14:48 And people make adaptations to it I cannot update it again And so having enough input to think about all possible angles And to approach this in a way that really makes it dynamic and really doesn't overcomplicate things Is really what I'm trying to achieve although that seems difficult Anyway This is just a heads up tutorial Looking at how to Use the new libraries area And obviously if you want a specific functionality in Bootstrap 4 00:15:21 You cannot now create a new Bootstrap 4 library With new files you need to expand on the existing one And that's the whole point We wanna make it that the existing library can be adapted and changed An improved At this stage that adaptation in those improvements will only be relevant to the one who's doing it And so that might be something we were gonna think about We gonna you should talk about would we want everybody to share their adaptations Or will we just set the stage with your regional adaptation and then whatever changes they make is up to them 00:16:04 Anyway this is a Again a tutorial I just made In the outset of this new functionality Looking in asking please give me feedback And let me know what you think Thank you