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