modify_properties.html

 1   <@pageContainer>
 2       <@pageColumn> 
 3           <@pageHeader title='#i18n{portal.system.modify_properties.boxTitle}'>
 4           <@tform>
 5               <@formGroup labelFor='plugin_type' labelKey='#i18n{portal.system.manage_plugins.buttonFilter}' hideLabel=['all'] formStyle='inline'>
 6                   <@inputGroup>
 7                       <@input name='search_prop' id='search_prop' placeHolder='#i18n{portal.system.manage_plugins.buttonFilter}' params='autocomplete="off" addons' />
 8                       <@button color='primary' title='#i18n{portal.system.manage_plugins.buttonFilter}' buttonIcon='filter' hideTitle=['all'] />
 9                   </@inputGroup>
 10               </@formGroup>
 11           </@tform>
 12           </@pageHeader>
 13           <@tform action='jsp/admin/DoModifyProperties.jsp'>
 14           <@tabs>
 15               <@tabList>
 16               <#list groups_list as group>
 17                   <#assign index = group?index>
 18                   <#if index == 0 ><#assign tabactive = true><#else><#assign tabactive = false></#if>
 19                   <@tabLink active=tabactive href='#group-${index}' title='${group.name}' />
 20               </#list>
 21               </@tabList>
 22               <@tabContent class='pt-0'>
 23               <#list groups_list as group>
 24                   <#assign index = group?index>
 25                   <#if index == 0 ><#assign tabactive = true><#else><#assign tabactive = false></#if>
 26                   <@tabPanel active=tabactive id='group-${index}'>
 27                   
 28                   <@input type='hidden' name='token' value='${token}' />
 29                   <@row class='d-block properties-container'>
 30                       <#assign groups = group.localizedDataList?map( prop -> prop.group )>
 31                       <#assign groupList = []>
 32                       <#list groups?sort as groupGroup>
 33                           <#if !groupList?seq_contains(groupGroup)> 
 34                               <#assign groupList = groupList + [groupGroup]>
 35                           </#if>
 36                       </#list>
 37                       <#list groupList?sort as groupCol>
 38                       <@columns class='col-property' params='data-prop="${groupCol}"'> 
 39                       <#assign groupName=''>
 40                       <#assign helpText=''>
 41                       <#list group.localizedDataList?filter( groupItem -> groupItem.group = groupCol ) as groupItem>
 42                               <#if groupName=''>
 43                               <#assign prefix=groupItem.key?keep_before(".site_property")  >
 44                               <#assign groupName>#i18n{${prefix}.site_property.${groupCol}.group.title}</#assign>
 45                               <h3>${groupName} </h3>
 46                               </#if>
 47                               <#assign labelText=groupItem.label>
 48                               <#if groupItem.key?ends_with( ".checkbox" )><#assign labelText=''></#if>
 49                               <#if groupItem.help?length gt 0><#assign helpText = groupItem.help></#if>
 50                               <@box>
 51                                   <@boxBody class='searchable'>
 52                                   <@formGroup class='property' labelKey=labelText labelFor=groupItem.key helpKey=helpText params=' data-property="${groupItem.key}"' rows=2>
 53                                       <#if groupItem.key?ends_with( ".textblock" )>
 54                                           <@input type='textarea' name=groupItem.key id=groupItem.key>${groupItem.value?html}</@input>
 55                                       <#elseif groupItem.key?ends_with( ".htmlblock" )>
 56                                           <@input type='textarea' name=groupItem.key id=groupItem.key class='richtext'>${groupItem.value?html}</@input>
 57                                       <#elseif groupItem.key?ends_with( ".checkbox" )>
 58                                           <#if groupItem.value == "1">
 59                                               <@checkBox orientation='switch' name=groupItem.key id=groupItem.key labelKey=groupItem.label  value='1' checked=true />
 60                                           <#else>
 61                                               <@checkBox orientation='switch' name=groupItem.key id=groupItem.key labelKey=groupItem.label  value='1' checked=false />
 62                                           </#if>
 63                                           <@input type='hidden' name='${groupItem.key}' value='0' />
 64                                       <#elseif groupItem.key?contains( "color" )>
 65                                           <@inputGroup class='color-wrapper-input'>
 66                                               <@input type='text' class='color-input' name=groupItem.key id=groupItem.key value=groupItem.value?html />
 67                                               <@inputGroupItem>
 68                                                   <!-- <@input type='color' class='color-input' name='color-input' value=groupItem.value?html /> -->
 69                                                  <input type="color" class="color-input" name="color-input" value="${groupItem.value?html}" colorspace="display-p3" alpha>
 70                                               </@inputGroupItem>
 71                                           </@inputGroup>
 72                                       <#else>
 73                                           <@input type='text' name=groupItem.key id=groupItem.key value=groupItem.value?html />
 74                                       </#if>
 75                                   </@formGroup>
 76                                   </@boxBody>
 77                               </@box> 
 78                           </#list>
 79                           </@columns>
 80                       </#list>
 81                       </@row>
 82                   </@tabPanel>
 83               </#list>
 84               </@tabContent>
 85           </@tabs>
 86           <@row class='position-fixed bottom-0 end-0 w-100 zh-5'>
 87               <@columns class='d-flex justify-content-center align-items-center col-12' params='style="background-color:rgba(255,255,255,.8)"'>
 88                   <@button class='mt-3' type='submit' buttonIcon='device-floppy' title='#i18n{portal.system.modify_properties.buttonLabel}' />
 89               </@columns>
 90           </@row>
 91       </@tform>
 92       </@pageColumn>
 93   </@pageContainer>
 94   <#include "/admin/util/editor/editor.html" />
 95   <@initEditor />
 96   <style>
 97   .zh-5 {
 98       height: 5rem;
 99   }
 100   .color-input{
 101       width: 25px;
 102       padding: 0;
 103   }
 104   
 105   .properties-container {
 106       column-count: 3;
 107       gap: 2rem;
 108   }
 109   
 110   .col-property {
 111       display: inline-block;
 112       margin-block-start: 2rem;
 113   }
 114   
 115   .col-property > .card > .card-body > .form-group {
 116       margin-block-end: 0 !important;
 117   }
 118   
 119   .col-property h3{
 120     padding-block-end: .5rem;
 121     margin-block-end: 1rem;
 122     border-block-end: 4px solid var( --bs-border-color );
 123   }
 124   
 125   .col-property .card:hover {
 126       border-color: var(--bs-dark);
 127   }
 128   </style>
 129   <script type="module">
 130   import LuteceSearchList from './themes/shared/modules/luteceSearchList.js';
 131   const searchInput = document.querySelector("#search_prop");
 132   const searchElementList = document.querySelectorAll("*[data-prop]");
 133   new LuteceSearchList( searchInput, searchElementList, {
 134       searchableChild: [".searchable",".title"],
 135   });
 136   
 137   window.addEventListener( "load", function(){
 138       const colorInputs = document.querySelectorAll(".color-wrapper-input");
 139       colorInputs.forEach( input => {
 140           const colorInput = input.querySelector("input[type='color']");
 141           const colorValue = input.querySelector("input[type='text']");
 142           colorInput.addEventListener("change", function(){
 143               colorValue.value = colorInput.value;
 144           });
 145           colorValue.addEventListener("change", function(){
 146               colorInput.value = colorValue.value;
 147           });
 148       });
 149   
 150       // Tab management with sessionStorage
 151       const tabLinks = document.querySelectorAll('[data-bs-toggle="tab"]');
 152       const tabPanels = document.querySelectorAll('[role="tabpanel"]');
 153       const storageKey = "lutece-admin-prop-tab";
 154   
 155       // Restore last active tab on page load
 156       const savedTabId = sessionStorage.getItem(storageKey);
 157       if (savedTabId) {
 158           // Deactivate all tabs and panels
 159           tabLinks.forEach(link => {
 160               link.classList.remove('active');
 161               link.setAttribute('aria-selected', 'false');
 162           });
 163           tabPanels.forEach(panel => {
 164               panel.classList.remove('active', 'show');
 165           });
 166   
 167           // Activate the saved tab
 168           const savedTabLink = <#noparse>document.querySelector(`[href="${savedTabId}"]`);</#noparse>
 169           const savedTabPanel = document.querySelector(savedTabId);
 170           
 171           if (savedTabLink && savedTabPanel) {
 172               savedTabLink.classList.add('active');
 173               savedTabLink.setAttribute('aria-selected', 'true');
 174               savedTabPanel.classList.add('active', 'show');
 175           }
 176       }
 177   
 178       // Save tab selection on click
 179       tabLinks.forEach(link => {
 180           link.addEventListener('click', function(e) {
 181               const targetId = this.getAttribute('href');
 182               sessionStorage.setItem(storageKey, targetId);
 183           });
 184       });
 185   
 186   });
 187   </script>
 188   <@overlay />