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

Updated 068 Library Manager Anticipated Functionality (markdown)

Amigo 2019-10-02 10:52:15 +02:00
parent b1500c5352
commit ae7a1707b0
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,25 +11,27 @@ I would like to talk about the expected or anticipated new Library feature that
[00:02:30](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m30s)
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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m19s) 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.
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 is 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. So when you [00:03:19](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m19s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m39s)
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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m08s) 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 is[00:04:36](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m36s) 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](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) 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.
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, is valid.[00:04:08](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m08s) Those of you who know the conditional concept within the fields. I have taken that same conditional concept and I am applying it on adding or not adding a file. It is much the same. You still have this 'Isolate' or 'Chain' option. The reality is[00:04:36](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m36s) 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 have already created before coming here. I have not saved this as a condition. I am going to save that. I am going to edit. You will see [00:05:02](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) the config library, if I click on it here. I can select any field out of my whole list of fields. I have already made one just for our illustration. 'Bootstrap v4(Radio)'. That is 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. Save and close.
### Option Field Drop Down
[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 want to make this dynamic.
We will see in 'Option Field' drop down that the field comes up here(follow on video). 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 'Yes'. [00:05:57](https://www.youtube.com/watch?v=joT8weuPcwU&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) 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 am not shipping these fields. The whole idea of creating a field in all the systems of those who used JCB, I am still pondering whether I should write a script to do that. The issue is actually that if we ship 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 have not done that. We are looking at how this can be done. We want to make this dynamic.
### 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.
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.
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.