Commit 39535d13 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/+/72826


Tested-by: Stefan Bürk's avatarStefan Bürk <stefan@buerk.tech>
Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Sybille Peters's avatarSybille Peters <sypets@gmx.de>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Stefan Bürk's avatarStefan Bürk <stefan@buerk.tech>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent d2a4e251
......@@ -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
Supports Markdown
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