From 1db463940c8b4e04b699cb3675f0fac325a73682 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Tue, 1 Oct 2019 07:30:19 +0200 Subject: [PATCH] Updated 068 Library Manager Anticipated Functionality (markdown) --- ...brary-Manager-Anticipated-Functionality.md | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/068-Library-Manager-Anticipated-Functionality.md b/068-Library-Manager-Anticipated-Functionality.md index cdc7c91..621de25 100644 --- a/068-Library-Manager-Anticipated-Functionality.md +++ b/068-Library-Manager-Anticipated-Functionality.md @@ -23,7 +23,21 @@ The other one is a conditional option. The conditional option is the better opti [00:05:40](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m40s) -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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m18s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m43s) 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'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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m18s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m43s) 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. -????? -We want to make this dynamic. Let's say someone has a specific [00:07:05](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m05s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m31s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m58s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m23s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m51s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m15s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m46s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m13s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m47s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m15s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m43s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m09s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m57s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m22s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m21s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m04s) 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 +### Creating A File By Clicking Edit, Add New Files + +[00:07:03](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m03s) + +Let's say someone has a specific file, let me save this, they have a specific file which if someone is using Bootstrap and they want to add a specific extra feature and need more more JavaScript on the page, they could create that file by clicking Edit, going to Add New Files. Let's say it's a local file they could click the green plus button [00:07:31](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m31s) and they can collect any file. I'm going to make it any file. Just like with a component include when you add custom files to your component, you have that same feature, except you can also use URLs. It's the same custom adding of files or folders. Now you want to have this bootstrap.min.js in the /media/bootstrap4 [00:07:58](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m58s) You want in that folder /media/bootstrap4/js/. That's really where you want to put this file. You don't want the file itself to be updated. The filename you want to keep. You want to have it available to the library. Click save and close. [00:08:23](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m23s) If we look in Target File Linked. We'll see there are a file called (file)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 this use of this file. The idea is now that you would go to the config library, and create a new field. [00:08:51](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m51s) Let's say this new field, I'm going to use a generic one, Add More(Radio). It should be more related to Bootstrap but just for explanation. Then you would say that specific field which is (file)bootstrap.min.js. When Add More is set to Yes, [00:09:15](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m15s) then it should be added. + +That is as far as I've come to think about implementing these kind of features dynamically. You will see previously I wrote all this hard coded right into the compiler, [00:09:33](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) based on its own automated observation of the UIkit v2. If it found specific classes it dynamically added files or don't add files. I'm thinking that if you want to be so customized and dynamic then you won't use the conditional option. You'll rather use the custom script option. You still have these two buttons(Library Files, Folders & URLs and Library Config) you can use the global [00:10:02](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s) values of. You can still get those values in the scripture and can act upon it and load it in the libraries with custom scripting. I did some prep on that kind of approached in FooTable. It says ($this->fooTableStyle). [00:10:25](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m25s) You will need to line up a field value with ($this->fooTableStyle). It will dynamically add the specific CSS classes to the page. For both this preparedDocument and for setDocument. You have Add Always, Conditions and Custom Script. + +### Condition Options - Global Value And Page Value + +[00:10:50](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m50s) + +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 a page value. You will see if it have a page value, then you can override the global value with the page value. It's almost like if we detect [00:11:13](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m13s) let's say bootstrap4 is being used in a specific view, and that view has a menu. Dynamically it will add it to that menu, the function of these buttons. As well as having it added up into the global options of the component itself. It'll be global options and the page will fall back on to the global options. Unless someone will manually override that. When is that the case? If they have another library or another component [00:11:47](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m47s) that already loads the files and they want to excluded it from the page because it's already there. That's why I'm thinking about having it on the page as well as globally. If you feel you don't want the user to decide whether these Libraries should ever be on the page. Then in that case Add Always. Then the Library files will including bootstrap.mn.js. will always be added to the page. [00:12:15](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m15s) We will take care of the script or the code to achieve that. I was also thinking if we want to have some files only be added always, then the files that you do not, if you want for example if you want these two files(http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.j and http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css) to be always added. Then within Conditions you will only create a condition [00:12:43](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m43s) for the files you want to have a condition for. The files that is not being targeted by conditions will automatically always be added. That is at this stage some of the thoughts I have. I'm thinking I'm going to say that if any of you want to give more ideas, then grab your screen recorder open this page [00:13:09](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m09s) and talk it through and explain some things in a little tutorial and post it on YouTube as a response to this tutorial. Or go to our GitHub discussion area. We are busy with this discussion on GitHub. It's issue 92 [00:13:29](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) UIkit v3 or Bootstrap Option. It's in this issue that this long discussion is going on and where this whole library idea is forming and expanding. You'll see I'm already typing a little response what I want to post with this tutorial that I'm making as a URL. + +???? +What I would like to say is I'm busy [00:13:57](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m57s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m22s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m48s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m21s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m04s) 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