Adding html in subdock and show or hide with button

[pdrillin]

• Adding button to hide/show html content in subdock.
• Adding hidden html in subdock.

[mdouchin]

I will let @nboisteault review more deeply. Some quick hints:

• no need to create a hideFunction. You can use jQuery $('#id_object').toggle(); You could also pass a boolean parameter to decide (true = show, false = hide).
• we need to add a CSS file as you did for the JS file, so that we can tune the look and feel
• I would use Flex to fill the subdock as needed, add a scrollbarr, etc.
• You should also add a translation javascript object & not use french

[pdrillin]

@mdouchin For the function hideFUnction, I just forgot to remove it. I don't know if you saw but i use btn.click(..)

[mdouchin]

For locales, you can have a look at the geopoppy module:

• locales are stored in subdirectories. Please provide en_US and fr_FR. See: https://github.com/3liz/lizmap-geopoppy-module/blob/master/geopoppy/locales/
• you can add a new JS variable inside the page with the json representation of localized strings like this: https://github.com/3liz/lizmap-geopoppy-module/blob/master/geopoppy/classes/geopoppy.listener.php#L75

[mdouchin]

Example HTML

<h2>Les pluviomètres bretons !</h2>                                                                                                                        
<h3>Identification</h3>                                                                                                                                    
<p>Les pluviolètres bretons en Bretagne </p>                                                                                                               
<p>Economy, Environment, Health</p>                                                                                                                        
<div>                                                                                                                                                      
<p>Keywords : pluviomètre, bretagne, meteo</p>                                                                                                             
</div>                                                                                                                                                     
<p>Creation : 2020-10-30T09:40:36.910223</p>                                                                                                               
<p>Update : 2020-10-30T09:40:36.910223</p>                                                                                                                 
<p>a0780be8-f2d8-4d32-accc-78bd772201bc</p>                                                                                                                

<h3>Spatial properties</h3>                                                                                                                                
<p>Level : </p>                                                                                                                                            
<p>Minimum scale : 1/1000000</p>                                                                                                                           
<p>Maximum scale : 1/10</p>                                                                                                                                
<p>Feature count : 5</p>                                                                                                                                   
<p>Geometry : POINT</p>                                                                                                                                    
<p>Projection : RGF93 / Lambert-93</p>                                                                                                                     
<p>Projection authid : EPSG:2154</p>                                                                                                                       

<h3>Publication</h3>                                                                                                                                       
<p>Date : 2020-10-30T00:00:00</p>                                                                                                                          
<p>Frequency : Yearly</p>                                                                                                                                  
<p>License : Creative Commons Attribution 4.0 (CC-BY-4.0)</p>                                                                                              
<p>Confidentiality : Open</p>                                                                                                                              

<div>                                                                                                                                                      
<h3>Links</h3>                                                                                                                                             
<ul>                                                                                                                                                       
            <li>                                                                                                                                           
name: Fiche résumé, type: a file, <a href="http://lizmap.com">LIEN WEB</a>, mime: application/pdf                                                          
</li>                                                                                                                                                      

            <li>                                                                                                                                           
name: Lien WFS, type: OGC Web Feature Service, <a href="http://lizmap.com?SERVICE=WFS&REQUEST=GetCapabilities">LIEN WEB</a>, mime: application/octet-stream
</li>                                                                                                                                                      
</ul>                                                                                                                                                      
</div>                                                                                                                                                     

<div>                                                                                                                                                      
<h3>Contacts</h3>                                                                                                                                          
<ul>                                                                                                                                                       
            <li>                                                                                                                                           
name: Michaël Doudou, orga: 3liz, role: Distributor                                                                                                       
</li>                                                                                                                                                      

            <li>                                                                                                                                           
name: Jane Doe, orga: CD30, role: Owner                                                                                                               
</li>                                                                                                                                                      
</ul>                                                                                                                                                      
</div>                                                                                                                                                     

[nboisteault]

@mdouchin @drillinP what about using https://developer.mozilla.org/fr/docs/Web/HTML/Element/summary to toggle display and have some semantic?

[nboisteault]

lizMap.events.on({
        'lizmapswitcheritemselected': function(evt){
            if (evt.selected) {
                var layername = lizMap.getLayerNameByCleanName(evt.name);
                document.querySelector('#sub-dock .menu-content').insertAdjacentHTML('beforeend','<details class="pg-metadata"><summary>resumé</summary>blabla</details>');
               document.querySelector('#sub-dock .menu-content .pg-metadata').addEventListener('toggle',(event) => console.log(event.currentTarget.open));
            }
        }
    });

[Gustry]

FYI, @drillinP in the makefile, there is the command to fix automatically php-cs-fixer. You would need to install it, the same way as in LWC. Do you have it already?

[pdrillin]

@Gustry I haven't already

[Gustry]

I tried this branch, but now as soon as I click on a layer in the legend, I have an error in the console:

Uncaught ReferenceError: pgmetadataLocales is not defined
    NextJS 3
    jQuery 2

Is-there any variable to set as well in my config about locales ? Maybe I didn't install it correctly ?

[Gustry]

For Eslint, I have added quick instructions @drillinP in the readme : https://github.com/3liz/lizmap-pgmetadata-module#contribution-guide how to have it locally.

npm install in the root directory should do the job. Then you can have the makefile command. and then you need the doc https://eslint.org/docs/rules/no-unused-vars

Let us know

You should check with @nboisteault about this linter.

[pdrillin]

@nboisteault je suis bloqué sur le calcul de la taille max du subdock

[Gustry]

@drillinP Can you explain your problems ? What is your blocker ? It would be easier for us to help/review.

[nboisteault]

@mdouchin @drillinP shouldn't we put the subdock close button at top like in dock? Why a different position?