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 />