joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 81 Pull Requests Projects 4 Wiki Activity

Updated 068 Library Manager Anticipated Functionality (markdown)

Amigo 2019-10-02 12:14:33 +02:00
parent ae7a1707b0
commit b74dda54c6
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
068-Library-Manager-Anticipated-Functionality.md

@ -5,7 +5,7 @@
[00:00:00](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s) [00:00:00](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
(Click on these time links to see Youtube video) (Click on these time links to see Youtube video)
I would like to talk about the expected or anticipated new Library feature that has being added to JCB. I am still in the development phase of this. I have been working on the UI which really is how I anticipate it should function. It is 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 more fixed and steady.[00:00:34](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m53s) I have made it that, even if you try to change it, and you click save, it will revert back to the correct name. That is only with regards to libraries that already become part of the Joomla Component Builder Community Snippets libraries. Every time we have new libraries contributed to the community then that library's name will become fixed.[00:01:19](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m19s) 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 added to Components.[00:01:46](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m12s) libraries we would rather use like you have for jQuery at this stage. If you want to use jQuery on a page you would not 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.<<<<<< I would like to talk about the expected or anticipated new Library feature that has being added to JCB. I am still in the development phase of this. I have been working on the UI which really is how I anticipate it should function. It is 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 more fixed and steady.[00:00:34](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m53s) I have made it that, even if you try to change it, and you click save, it will revert back to the correct name. That is only with regards to libraries that already become part of the Joomla Component Builder Community Snippets libraries. Every time we have new libraries contributed to the community then that library's name will become fixed.[00:01:19](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m19s) 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 added to Components.[00:01:46](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m46s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m12s) libraries we would rather use like you have for jQuery at this stage. If you want to use jQuery on a page you would not 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 ### Two Functions - prepareDocument And setDocument
@ -31,18 +31,18 @@ We will see in 'Option Field' drop down that the field comes up here(follow on v
Let's say someone has 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'. Say for instance it is 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 am 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 is the same custom adding of files or folders. Now if 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) and want in that folder /media/bootstrap4/js/. That is really where you want to put this file. You do not want the file itself to be updated. The filename you want to keep and 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 will see there are a file called (file)Bootstrap.min.js. but you do not want it to be always be included, you want it to be included only if there is a specific switch tripped on this use of this file.<<<<<<<< Let's say someone has 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'. Say for instance it is 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 am 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 is the same custom adding of files or folders. Now if 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) and want in that folder /media/bootstrap4/js/. That is really where you want to put this file. You do not want the file itself to be updated. The filename you want to keep and 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 will see there are a file called (file)Bootstrap.min.js. but you do not want it to be always be included, you want it 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. 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 in this case '(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. That is as far as I have 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 did not add files. I am thinking that if you want to be so customized and dynamic then you will not use the conditional option. You will rather use the custom script option. You still have these two buttons(Library Files, Folders & URLs and Library Config) you can use the global values of.[00:10:02](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s) 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 approach 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 ### Condition Options - Global Value And Page Value
[00:10:50](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m50s) [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) Let me just say another thing about the condition option, I am pondering whether this condition option should have a global value and a page value. If it has a page value, then you can override the global value with the page value. It is 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 will be global options and the page will fall back on to the global options unless someone will manually override that. It is the case when 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 exclude it from the page because it is already there. That is why I am thinking about having it on the page as well as globally. If you feel you do not 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 include 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. 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. 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 is issue 92 [00:13:29](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) UIkit v3 or Bootstrap Option. It is in this issue that this long discussion is going on and where this whole library idea is forming and expanding. You will see I am already typing a little response what I want to post with this tutorial that I am 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. I know that these Libraries that are already in our a component Bootstrap, UIkit and fooTable. I'm going to end up adding enough information for these libraries that 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 going to be my responsibility to put all the necessary code and scripting and everything in place, that this option will work. All of them. When someone wants to expand on them will they need to do so. It is 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. Having enough input to think about all possible angles, to approach this in a way that really makes it dynamic and really doesn't over complicate things. Is really what I'm trying to achieve although that seems difficult. What I would like to say is I am 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 have gone about doing it at this stage. I know that these Libraries that are already in our a component Bootstrap, UIkit and fooTable. I am going to end up adding enough information for these libraries that they all just work out of the box. [00:14:22](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m22s) That is going to be my responsibility to put all the necessary code and scripting and everything in place, that this option will work. All of them. When someone wants to expand on them they need to do so. It is a once off situation. Once I have 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. Having enough input to think about all possible angles, to approach this in a way that really makes it dynamic and really does not over complicate things is really what I am trying to achieve although that seems difficult.
This is just a heads up tutorial. Looking at how to use the new Libraries area and 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 create a new Bootstrap 4 library with new files. You will need to expand on the existing one. That's the whole point. We want to 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. That might be something we are going to think about. We should talk about. 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) This is again a tutorial I just made in the outset of this new functionality. Looking and asking, please give me feedback and let me know what you think, thank you. This is just a heads up tutorial. Looking at how to use the new Libraries area and 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 create a new Bootstrap 4 library with new files. You will need to expand on the existing one. That is the whole point. We want to 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 is doing it. That might be something we are going to think about. We should talk about. We want everybody to share their adaptations or we will 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) This is again a tutorial I just made in the outset of this new functionality. Looking and asking, please give me feedback and let me know what you think, thank you.