Commit 468b1f6a authored by Susanne Moog's avatar Susanne Moog Committed by Christian Kuhn
Browse files

[TASK] Make status of simulate time clearer

Once a user simulated a time with the admin panel,
it has not been easy to see the status of the field
or to understand how to disable it. To make it easier
for the user to handle a separate checkbox has been added
that allows enabling or disabling the simulate time feature.

Resolves: #94596
Releases: main, 11.5
Change-Id: I309475f19f64dd8324f2466082d979d0afdbd501
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/72883

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent cdb016b3
......@@ -833,6 +833,10 @@ body.typo3-adminPanel-noscroll {
margin-top: -0.5em;
}
}
.typo3-adminPanel-group-disable {
opacity: 0.5;
}
}
//
......
......@@ -3,6 +3,7 @@ namespace TYPO3 {
private readonly dateField: HTMLInputElement = null;
private readonly timeField: HTMLInputElement = null;
private readonly targetField: HTMLInputElement = null;
private readonly toggleField: HTMLInputElement = null;
/**
* Initialize date and time fields of preview
......@@ -15,6 +16,7 @@ namespace TYPO3 {
this.dateField = <HTMLInputElement>document.getElementById('preview_simulateDate-date-hr');
this.timeField = <HTMLInputElement>document.getElementById('preview_simulateDate-time-hr');
this.targetField = <HTMLInputElement>document.getElementById(this.dateField.dataset.bsTarget);
this.toggleField = <HTMLInputElement>document.getElementById('typo3-adminPanel-simulate-date-toggle');
if (this.targetField.value) {
const initialDate = new Date(parseInt(this.targetField.value, 10) * 1000);
......@@ -22,10 +24,27 @@ namespace TYPO3 {
this.timeField.valueAsDate = initialDate;
}
this.toggleField.addEventListener('change', this.toggleDisplay)
this.dateField.addEventListener('change', this.updateDateField);
this.timeField.addEventListener('change', this.updateDateField);
}
private toggleDisplay = (): void => {
let toggleVal = this.toggleField.checked;
let groupElement = <HTMLDivElement>document.getElementById('typo3-adminPanel-preview_simulateDate');
if (toggleVal) {
groupElement.classList.remove('typo3-adminPanel-group-disable')
this.dateField.disabled = false
this.timeField.disabled = false
this.updateDateField()
} else {
groupElement.classList.add('typo3-adminPanel-group-disable')
this.dateField.disabled = true
this.timeField.disabled = true
this.targetField.value = ''
}
}
private updateDateField = (): void => {
let dateVal = this.dateField.value;
let timeVal = this.timeField.value;
......
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{label} && {name}">
<div class="typo3-adminPanel-form-group">
<div class="typo3-adminPanel-form-checkbox">
<input type="checkbox" id="typo3-adminPanel-simulate-date-toggle" value="1" class="typo3-adminPanel-form-checkbox-input" {f:if(condition: value, then:' checked="checked"')} />
<label for="typo3-adminPanel-simulate-date-toggle" class="typo3-adminPanel-form-checkbox-label">
<f:translate key="{label}" default="{label}" extensionName="adminpanel" languageKey="{languageKey}" />
</label>
</div>
<div class="typo3-adminPanel-form-group {f:if(condition: value, then: '', else: ' typo3-adminPanel-group-disable')}" id="typo3-adminPanel-{name}">
<div class="typo3-adminPanel-form-datetime">
<label for="{name}" class="typo3-adminPanel-form-datetime-label">
<f:translate key="{label}" default="{label}" extensionName="adminpanel" languageKey="{languageKey}"/>
</label>
<div class="typo3-adminPanel-form-datetime-input-group">
<input type="date" id="{name}-date-hr" class="typo3-adminPanel-form-datetime-input" data-bs-target="{name}"/>
<input type="time" id="{name}-time-hr" class="typo3-adminPanel-form-datetime-input" data-bs-target="{name}"/>
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
"use strict";var TYPO3;!function(e){e.Preview=class{constructor(){if(this.dateField=null,this.timeField=null,this.targetField=null,this.updateDateField=()=>{let e=this.dateField.value,t=this.timeField.value;if(!e&&t){let t=new Date;e=t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()}if(e&&!t&&(t="00:00"),e||t){const i=new Date(e+" "+t);this.targetField.value=(i.valueOf()/1e3).toString()}else this.targetField.value=""},this.dateField=document.getElementById("preview_simulateDate-date-hr"),this.timeField=document.getElementById("preview_simulateDate-time-hr"),this.targetField=document.getElementById(this.dateField.dataset.bsTarget),this.targetField.value){const e=new Date(1e3*parseInt(this.targetField.value,10));this.dateField.valueAsDate=e,this.timeField.valueAsDate=e}this.dateField.addEventListener("change",this.updateDateField),this.timeField.addEventListener("change",this.updateDateField)}}}(TYPO3||(TYPO3={})),window.addEventListener("load",()=>new TYPO3.Preview,!1);
\ No newline at end of file
"use strict";var TYPO3;!function(e){e.Preview=class{constructor(){if(this.dateField=null,this.timeField=null,this.targetField=null,this.toggleField=null,this.toggleDisplay=()=>{let e=this.toggleField.checked,t=document.getElementById("typo3-adminPanel-preview_simulateDate");e?(t.classList.remove("typo3-adminPanel-group-disable"),this.dateField.disabled=!1,this.timeField.disabled=!1,this.updateDateField()):(t.classList.add("typo3-adminPanel-group-disable"),this.dateField.disabled=!0,this.timeField.disabled=!0,this.targetField.value="")},this.updateDateField=()=>{let e=this.dateField.value,t=this.timeField.value;if(!e&&t){let t=new Date;e=t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()}if(e&&!t&&(t="00:00"),e||t){const i=new Date(e+" "+t);this.targetField.value=(i.valueOf()/1e3).toString()}else this.targetField.value=""},this.dateField=document.getElementById("preview_simulateDate-date-hr"),this.timeField=document.getElementById("preview_simulateDate-time-hr"),this.targetField=document.getElementById(this.dateField.dataset.bsTarget),this.toggleField=document.getElementById("typo3-adminPanel-simulate-date-toggle"),this.targetField.value){const e=new Date(1e3*parseInt(this.targetField.value,10));this.dateField.valueAsDate=e,this.timeField.valueAsDate=e}this.toggleField.addEventListener("change",this.toggleDisplay),this.dateField.addEventListener("change",this.updateDateField),this.timeField.addEventListener("change",this.updateDateField)}}}(TYPO3||(TYPO3={})),window.addEventListener("load",()=>new TYPO3.Preview,!1);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment