068 Library Manager Anticipated Functionality

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 just how I anticipate it should function It's not yet set in stone Because I have not yet started Adapting the compiler to make use of the This new feature But it is anticipated to actually eventually Become 00:00:34 More fixed and Steady So I wanna basically illustrate two things one is We have this Bootstrap library Set up now This Bootstrap library the specific name here Is linked Too many many Snippets And so it it can never change even 00:00:53 I've made it that even if you try to change it Can you click save You know it will actually 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 So Everytime We have new libraries contributed To the community Then 00:01:19 That library's name Will become fixed So It cannot be changed And that a way of protecting the system from collapsing on itself Because if people could just change these things in their own JCB Then It could end up making so many confused Results Anyone What they still can change is the way that the library is actually 00:01:46 Added to Components I currently I said it up that it basically links to this two URLs And it has this always add But that means On every page where Bootstrap 4 is being used It will always add These Files Now we 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 wanna 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 there are two places where in every view there are two types of functions used To add The Specific library to the page The one function is this prepare document function And the other one is set document 00:02:48 And the one function uses the document Directly Variable naming And then add script because it actually adds document to the document variable The other one grubs upon a global document variable And it's really based on Which class it is inheriting and so forth So 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 methods Class methods Which will then adequately be available For every A page that makes use of this library The other one is a conditional option 00:03:39 the conditional option is the better option really Because this one Would actually adapt The code On the basis of the the implementation per view So here you would select the files that you have and say whether it include or exclude You obviously if you select exclude It means it will always include it Unless these behaviours that you gonna set over here 00:04:08 Is actually you know . . valid Now those of you who know the conditional concept within fields This I just taken that same conditional concept And I'm now just applying it on adding Or not adding a file So it's really very much the same so you still have this isolate or chain option And the reality is you can now 00:04:36 There are no config Fields yet you need to first go here and create a config Field Now config field is really an existing Field that you've already created Before coming here so I haven't saved This as a condition so I'm just gonna save that And then I'm gonna go here to edit And you'll see 00:05:02 The config library if I click on it here I basically can select Any field out of my A whole list of fields so I've already made one just for our illustration Bootstrap 4 Radio And That's really the field I wanted to be in the library tab So this again is very much similar to the component Config options area except now we are selecting fields for the library which will then in effect be added to the components 00:05:34 Global Options area Ok so let's save and close here Now we'll see in this drop down that that field comes up here If we selected That fields have two options yes or no So if this library and that Library File we wanna include it When add Bootstrap button is set to 00:05:57 Yes So here is a selection option Now so that's the conditional way of doing So basically at this stage we will have 3 to 4 ways of Actually adding the the fields onto the page The reason why this conditional one Is not being shipped This way the moment 00:06:18 Because I'm not shipping these fields And The whole idea of You know 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 So it's that's really the issue if If we shipped this as the The standard way of including the Bootstrap libraries 00:06:43 Then I will need to create this add Bootstrap version 4 field On every system And then link it in here with correct IDs ans stuff And So I haven't I haven't actually done that Like I said We are now looking at how can we do this We wanna make this dynamic Because now let's say someone Has a specific 00:07:05 File The day so let me just save this that specific file Which If 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