92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
class RelativeTimeElement extends window.HTMLElement {
|
|
// constructor (element) {
|
|
// this.element = element
|
|
// // get date from utc timestamp
|
|
|
|
// // this.time = new Date( element.getAttribute( 'time' ) );
|
|
// // this.update();
|
|
// }
|
|
|
|
// observe attribute time
|
|
static get observedAttributes() {
|
|
return [ 'time' ];
|
|
}
|
|
|
|
// update time when attribute time changes
|
|
attributeChangedCallback( name, oldValue, newValue ) {
|
|
if ( name === 'time' ) {
|
|
this.time = new Date( newValue );
|
|
this.update();
|
|
}
|
|
}
|
|
|
|
// connectedCallback() {
|
|
// this.time = new Date( this.getAttribute( 'time' ) );
|
|
// this.update();
|
|
// }
|
|
|
|
update() {
|
|
this.innerText = `${ extractDate( this.time ) } at ${ extractTime(
|
|
this.time
|
|
) }`;
|
|
}
|
|
}
|
|
|
|
window.customElements.define( 'vrts-relative-time', RelativeTimeElement );
|
|
|
|
function extractDate( inputDate ) {
|
|
const { __ } = wp.i18n;
|
|
const today = new Date();
|
|
// Set the time to midnight for an accurate date comparison
|
|
today.setHours( 0, 0, 0, 0 );
|
|
|
|
// Create a Date object for the input date
|
|
const comparisonDate = new Date( inputDate );
|
|
comparisonDate.setHours( 0, 0, 0, 0 );
|
|
|
|
// Calculate the difference in days
|
|
const difference = ( comparisonDate - today ) / ( 1000 * 3600 * 24 );
|
|
|
|
// Determine if the date is today, tomorrow, or yesterday
|
|
if ( difference === 0 ) {
|
|
return __( 'Today', 'visual-regression-testing' );
|
|
} else if ( difference === 1 ) {
|
|
return __( 'Tomorrow', 'visual-regression-testing' );
|
|
} else if ( difference === -1 ) {
|
|
return __( 'Yesterday', 'visual-regression-testing' );
|
|
}
|
|
return dateFormat( inputDate, 'D, Y/m/d' );
|
|
}
|
|
|
|
function extractTime( inputDate ) {
|
|
return dateFormat( inputDate, 'g:i a' );
|
|
}
|
|
|
|
// format date like in php date_format
|
|
function dateFormat( date, format ) {
|
|
const pad = ( number ) => ( number < 10 ? `0${ number }` : number );
|
|
const dayNames = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; // abbreviated day names
|
|
const d = pad( date.getDate() );
|
|
const m = pad( date.getMonth() + 1 );
|
|
const y = date.getFullYear();
|
|
const Y = date.getFullYear();
|
|
const H = date.getHours();
|
|
const i = pad( date.getMinutes() );
|
|
const s = date.getSeconds();
|
|
const g = date.getHours() % 12 || 12;
|
|
const a = date.getHours() >= 12 ? 'pm' : 'am';
|
|
const D = dayNames[ date.getDay() ]; // get the abbreviated day name
|
|
|
|
return format
|
|
.replace( 'd', d )
|
|
.replace( 'm', m )
|
|
.replace( 'y', y )
|
|
.replace( 'Y', Y )
|
|
.replace( 'H', H )
|
|
.replace( 'i', i )
|
|
.replace( 's', s )
|
|
.replace( 'g', g )
|
|
.replace( 'a', a )
|
|
.replace( 'D', D ); // replace capital D with day name
|
|
}
|