| 1 |
import { render, useEffect } from '@wordpress/element'; |
| 2 |
import { withState } from '@wordpress/compose'; |
| 3 |
import domReady from '@wordpress/dom-ready'; |
| 4 |
|
| 5 |
import { getTimeRemaining } from '../../../helpers/clock' |
| 6 |
import GutenifyCountDownBlock from './Block'; |
| 7 |
import attributesDefaults from './attributesDefaults' |
| 8 |
|
| 9 |
const Frontend = withState({ |
| 10 |
isCalenderVisible: false, |
| 11 |
isTimerStart: false, |
| 12 |
timerInterval: false, |
| 13 |
dateTime: new Date(), |
| 14 |
timerDays: '00', |
| 15 |
timerHour: '00', |
| 16 |
timerMinute: '00', |
| 17 |
timerSecond: '00', |
| 18 |
isExpired: false, |
| 19 |
hideTimer: false |
| 20 |
})((props) => { |
| 21 |
let attributes = { ...attributesDefaults, ...props.options }; |
| 22 |
// attributes.dateTime = new Date(attributes.dateTime); |
| 23 |
|
| 24 |
const initializeCountDown = (dateTime) => { |
| 25 |
|
| 26 |
let $props = props; |
| 27 |
// console.log(attributes.dateTime); |
| 28 |
function updateClock() { |
| 29 |
var t = getTimeRemaining(dateTime); |
| 30 |
|
| 31 |
$props.setState({ |
| 32 |
timerDays: t.days, |
| 33 |
timerHour: ('0' + t.hours).slice(-2), |
| 34 |
timerMinute: ('0' + t.minutes).slice(-2), |
| 35 |
timerSecond: ('0' + t.seconds).slice(-2), |
| 36 |
}); |
| 37 |
|
| 38 |
|
| 39 |
|
| 40 |
if (t.total <= 0 || isNaN(t.total)) { |
| 41 |
$props.setState({ |
| 42 |
timerDays: '00', |
| 43 |
timerHour: '00', |
| 44 |
timerMinute: '00', |
| 45 |
timerSecond: '00', |
| 46 |
isExpired: true |
| 47 |
}); |
| 48 |
clearInterval(timeinterval); |
| 49 |
|
| 50 |
// After expire action |
| 51 |
if (attributes.expireActions.includes('hide')) { |
| 52 |
$props.setState({ |
| 53 |
hideTimer: true |
| 54 |
}); |
| 55 |
} |
| 56 |
|
| 57 |
if (attributes.expireActions.includes('redirect') && '' !== attributes.expireURL) { |
| 58 |
window.location = attributes.expireURL; |
| 59 |
} |
| 60 |
|
| 61 |
} |
| 62 |
} |
| 63 |
updateClock(); |
| 64 |
var timeinterval = setInterval(updateClock, 1000); |
| 65 |
|
| 66 |
|
| 67 |
|
| 68 |
props.setState({ |
| 69 |
timerInterval: timeinterval |
| 70 |
}); |
| 71 |
} |
| 72 |
|
| 73 |
useEffect(() => { |
| 74 |
initializeCountDown(attributes.dateTime); |
| 75 |
|
| 76 |
// load Fonts |
| 77 |
if (attributes.digitAttrs.typography.fontFamily) { |
| 78 |
WebFont.load({ |
| 79 |
google: { |
| 80 |
families: [attributes.digitAttrs.typography.fontFamily] |
| 81 |
} |
| 82 |
}); |
| 83 |
} |
| 84 |
|
| 85 |
if (attributes.titleAttrs.typography.fontFamily) { |
| 86 |
WebFont.load({ |
| 87 |
google: { |
| 88 |
families: [attributes.titleAttrs.typography.fontFamily] |
| 89 |
} |
| 90 |
}); |
| 91 |
} |
| 92 |
}, []); |
| 93 |
|
| 94 |
return <> |
| 95 |
{!props.hideTimer && <GutenifyCountDownBlock {...props} attributes={attributes} screen="frontend" />} |
| 96 |
{(props.isExpired && attributes.expireActions.includes('show-message') && '' !== attributes.expireMessage) && <div>{attributes.expireMessage}</div>} |
| 97 |
</>; |
| 98 |
}) |
| 99 |
domReady(function () { |
| 100 |
//do something after DOM loads. |
| 101 |
const allCountDown = document.getElementsByClassName('gutenify-count-down-wrapper'); |
| 102 |
for (let i = 0; i < allCountDown.length; i++) { |
| 103 |
const id = allCountDown[i].getAttribute('id'); |
| 104 |
const options = window[id]; |
| 105 |
render(<Frontend options={options} id={id} />, document.getElementById(id)); |
| 106 |
} |
| 107 |
}); |
| 108 |
|
