diff --git a/addons/widgets/countdown/countdown-config.php b/addons/widgets/countdown/countdown-config.php index c404523..cdbd963 100644 --- a/addons/widgets/countdown/countdown-config.php +++ b/addons/widgets/countdown/countdown-config.php @@ -21,27 +21,48 @@ 'pro' => false, 'class' => '', 'css'=>[ - 'countdown'=>[ - 'file'=>'', - 'ver'=>'', + 'smcstylus-addel-countdown'=>[ + 'file_name'=>'countdown', + 'file_url'=>'', + 'version'=>'', ] ], 'js'=>[ - 'countdown'=>[ + 'fix-timers'=>[ + 'file_name'=>'fix-timers', + 'file_url'=>'', + 'deps'=>[], + 'version'=>'1.0.0', + 'load_in_footer'=>true, + ], + 'jquery-smcstylusCircleTimers'=>[ + 'file_name'=>'jquery.smcstylusCircleTimers', + 'file_url'=>'', 'deps'=>['jquery'], - 'file'=>'', - 'ver'=>'', + 'version'=>'1.0.0', + 'load_in_footer'=>true, ], - 'smcstylusCircleTimers'=>[ + 'jquery-flipper-timers'=>[ + 'file_name'=>'jquery.smcstylusFlipperTimers', + 'file_url'=>'', 'deps'=>['jquery'], - 'file'=>'', - 'ver'=>'1', + 'version'=>'1.0.0', + 'load_in_footer'=>true, ], - 'jquery.countdown'=>[ + 'jquery-countdown'=>[ + 'file_name'=>'jquery.countdown', + 'file_url'=>'', 'deps'=>['jquery'], - 'file'=>'', - 'ver'=>'2.2.0', - ] + 'version'=>'2.2.0', + 'load_in_footer'=>true, + ], + 'smcstylus-addel-countdown'=>[ + 'file_name'=>'countdown', + 'file_url'=>'', + 'deps'=>['jquery'], + 'version'=>'1.3.0', + 'load_in_footer'=>true, + ], ], ] ] diff --git a/addons/widgets/countdown/countdown.css b/addons/widgets/countdown/countdown.css index ac4e058..38581e8 100644 --- a/addons/widgets/countdown/countdown.css +++ b/addons/widgets/countdown/countdown.css @@ -1,12 +1,14 @@ -/***** FLAT *****/ -/* One */ +@charset "UTF-8"; +/******************** FLAT ********************/ +/**********************************************/ +/********* Flat One *********/ :root { --tr-rot0: rotateY(0deg); --tr-rot180: rotateY(180deg); --tr-rot360: rotateY(360deg); } -.smc-addel-countdown--style-theme-one, -.smc-addel-countdown--style-theme-one * { +.smc-addel-countdown--style-flat-one, +.smc-addel-countdown--style-flat-one * { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -32,11 +34,11 @@ font: inherit; vertical-align: baseline; } -.smc-addel-countdown--style-theme-one { +.smc-addel-countdown--style-flat-one { background-color: #000; color: rgba(256, 256, 256, 0.5); } -.smc-addel-countdown--style-theme-one .smc-addel-countdown--timer { +.smc-addel-countdown--style-flat-one .smc-addel-countdown--timer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; @@ -46,7 +48,7 @@ display: block; } -.smc-addel-countdown--style-theme-one .smc-addel-countdown--timer-time { +.smc-addel-countdown--style-flat-one .smc-addel-countdown--timer-time { font-family: "Roboto", sans-serif; font-size: calc(10vw / 1.2) !important; font-weight: 100; @@ -56,13 +58,13 @@ padding-top: 5%; padding-bottom: 0; } -.smc-addel-countdown--style-theme-one .smc-addel-countdown--timer-label { +.smc-addel-countdown--style-flat-one .smc-addel-countdown--timer-label { font-weight: 300; line-height: 26px; font-size: calc(1vw / 0.6) !important; } -.smc-addel-countdown--style-theme-one .smc-addel-countdown--timer::before { +.smc-addel-countdown--style-flat-one .smc-addel-countdown--timer::before { content: ":"; font-family: "Roboto", sans-serif; font-size: calc(10vw / 1.2) !important; @@ -76,17 +78,17 @@ margin-left: -25%; width: 25%; } -.smc-addel-countdown--style-theme-one .smc-addel-countdown--timer.days::before { +.smc-addel-countdown--style-flat-one .smc-addel-countdown--timer.days::before { content: ""; } @media screen and (max-width: 720px) { - .smc-addel-countdown--style-theme-one .smc-addel-countdown--timer-label { + .smc-addel-countdown--style-flat-one .smc-addel-countdown--timer-label { font-size: calc(1vw / 0.4) !important; } } -/* Two */ -.smc-addel-countdown--style-theme-two { +/********* Flat Two *********/ +.smc-addel-countdown--style-flat-two { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -102,7 +104,7 @@ margin-left: -20px; } -.smc-addel-countdown--style-theme-two .smc-addel-countdown--timer { +.smc-addel-countdown--style-flat-two .smc-addel-countdown--timer { -webkit-box-flex: 1; -webkit-flex: 1 0 calc(21% - 20px); -ms-flex: 1 0 calc(21% - 20px); @@ -117,7 +119,7 @@ flex-direction: column; } -.smc-addel-countdown--style-theme-two +.smc-addel-countdown--style-flat-two .smc-addel-countdown--timer .smc-addel-countdown--timer-time { font-family: Roboto; @@ -131,7 +133,7 @@ color: #cc3399; } -.smc-addel-countdown--style-theme-two +.smc-addel-countdown--style-flat-two .smc-addel-countdown--timer .smc-addel-countdown--timer-label { font-family: Verdana, sans-serif; @@ -144,13 +146,13 @@ height: 100%; } @media screen and (max-width: 414px) { - .smc-addel-countdown--style-theme-two .smc-addel-countdown--timer-time { + .smc-addel-countdown--style-flat-two .smc-addel-countdown--timer-time { font-size: 40px; } } -/* Three */ -.smc-addel-countdown--style-theme-three { +/********* Flat Three *********/ +.smc-addel-countdown--style-flat-three { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -171,7 +173,7 @@ perspective: 1000; } -.smc-addel-countdown--style-theme-three .smc-addel-countdown--timer { +.smc-addel-countdown--style-flat-three .smc-addel-countdown--timer { -webkit-box-flex: 1; -webkit-flex: 1 0 calc(21% - 20px); -ms-flex: 1 0 calc(21% - 20px); @@ -195,14 +197,14 @@ transform-style: preserve-3d; } -.smc-addel-countdown--style-theme-three .smc-addel-countdown--timer.seconds { +.smc-addel-countdown--style-flat-three .smc-addel-countdown--timer.seconds { animation-name: flipper-three; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: reverse; } -.smc-addel-countdown--style-theme-three +.smc-addel-countdown--style-flat-three .smc-addel-countdown--timer .smc-addel-countdown--timer-time { font-family: Roboto; @@ -217,7 +219,7 @@ background: #f3f3f3; } -.smc-addel-countdown--style-theme-three +.smc-addel-countdown--style-flat-three .smc-addel-countdown--timer .smc-addel-countdown--timer-label { font-family: Verdana, sans-serif; @@ -230,7 +232,7 @@ height: 100%; } @media screen and (max-width: 414px) { - .smc-addel-countdown--style-theme-three .smc-addel-countdown--timer-time { + .smc-addel-countdown--style-flat-three .smc-addel-countdown--timer-time { font-size: 40px; } } @@ -251,8 +253,8 @@ } } -/* Four */ -.smc-addel-countdown--style-theme-four { +/********* Flat Four *********/ +.smc-addel-countdown--style-flat-four { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -269,7 +271,7 @@ background: transparent; } -.smc-addel-countdown--style-theme-four .smc-addel-countdown--timer { +.smc-addel-countdown--style-flat-four .smc-addel-countdown--timer { -webkit-box-flex: 1; -webkit-flex: 1 0 calc(21% - 20px); -ms-flex: 1 0 calc(21% - 20px); @@ -284,7 +286,7 @@ transform-style: preserve-3d; } -.smc-addel-countdown--style-theme-four +.smc-addel-countdown--style-flat-four .smc-addel-countdown--timer.seconds .smc-addel-countdown--timer-time::before { animation-name: flipper-four; @@ -293,7 +295,7 @@ animation-direction: reverse; } -.smc-addel-countdown--style-theme-four +.smc-addel-countdown--style-flat-four .smc-addel-countdown--timer .smc-addel-countdown--timer-time { font-family: serif; @@ -311,7 +313,7 @@ border: 2px solid #86866488; border-radius: 4px; } -.smc-addel-countdown--style-theme-four +.smc-addel-countdown--style-flat-four .smc-addel-countdown--timer.seconds .smc-addel-countdown--timer-time::before { content: "."; @@ -327,7 +329,7 @@ left: 2px; } -.smc-addel-countdown--style-theme-four +.smc-addel-countdown--style-flat-four .smc-addel-countdown--timer .smc-addel-countdown--timer-label { font-family: Verdana, sans-serif; @@ -339,7 +341,7 @@ height: 100%; } @media screen and (max-width: 414px) { - .smc-addel-countdown--style-theme-four .smc-addel-countdown--timer-time { + .smc-addel-countdown--style-flat-four .smc-addel-countdown--timer-time { font-size: 40px; } } @@ -352,8 +354,8 @@ } } -/* Five */ -.smc-addel-countdown--style-theme-five { +/********* Flat Five *********/ +.smc-addel-countdown--style-flat-five { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -373,7 +375,7 @@ perspective: 1000; } -.smc-addel-countdown--style-theme-five .smc-addel-countdown--timer { +.smc-addel-countdown--style-flat-five .smc-addel-countdown--timer { -webkit-box-flex: 1; -webkit-flex: 1 0 calc(21% - 20px); -ms-flex: 1 0 calc(20% - 20px); @@ -391,7 +393,7 @@ -moz-osx-font-smoothing: grayscale; -webkit-text-stroke: 0.5px; } -.smc-addel-countdown--style-theme-five .smc-addel-countdown--timer::after { +.smc-addel-countdown--style-flat-five .smc-addel-countdown--timer::after { content: "."; position: absolute; width: 100%; @@ -404,7 +406,7 @@ transform: blur(0px); } -.smc-addel-countdown--style-theme-five +.smc-addel-countdown--style-flat-five .smc-addel-countdown--timer .smc-addel-countdown--timer-time { font-family: Roboto; @@ -420,7 +422,7 @@ background: #f3f3f3; } -.smc-addel-countdown--style-theme-five +.smc-addel-countdown--style-flat-five .smc-addel-countdown--timer .smc-addel-countdown--timer-label { font-family: Verdana, sans-serif; @@ -434,26 +436,28 @@ padding: 4px 0; } @media screen and (max-width: 414px) { - .smc-addel-countdown--style-theme-five + .smc-addel-countdown--style-flat-five .smc-addel-countdown--timer .smc-addel-countdown--timer-time { font-size: 25px; } - .smc-addel-countdown--style-theme-five + .smc-addel-countdown--style-flat-five .smc-addel-countdown--timer .smc-addel-countdown--timer-label { font-size: 11px; padding: 0; letter-spacing: -1px; } - .smc-addel-countdown--style-theme-five .smc-addel-countdown--timer { + .smc-addel-countdown--style-flat-five .smc-addel-countdown--timer { max-width: 50px; border: 2px solid #2da8ef; -webkit-text-stroke: 0px; } } -/***** CIRCLE *****/ +/******************* CIRCLE *******************/ +/**********************************************/ +/********* Circle Base *********/ .smc-addel-countdown--style-circle .smcstylusCircleTimers { position: relative; } @@ -508,6 +512,7 @@ content: "."; } +/********* Circle One *********/ .smc-addel-countdown--style-circle-one { margin: auto; } @@ -524,3 +529,333 @@ .smc-addel-countdown--style-circle-two .smcstylusCircleTimers div span::after { content: ""; } + +/******************* FLIPPER ******************/ +/**********************************************/ +/********* Flipper Base *********/ +.flipper { + color: #333; + display: block; + font-family: sans-serif; + font-size: 50px; + line-height: 100%; + padding: 0; + margin: 0; + height: 1.7em; +} +.flipper.flipper-invisible { + font-size: 0px !important; +} + +.flipper-group { + position: relative; + white-space: nowrap; + display: block; + float: left; + padding: 0; + margin: 0; +} +.flipper-group label { + position: absolute; + color: #fff; + font-size: 20%; + top: 100%; + line-height: 1em; + left: 50%; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + text-align: center; + padding-top: 0.5em; +} + +.flipper-digit { + white-space: nowrap; + position: relative; + padding: 0; + margin: 0; + display: inline-block; + float: left; + height: 1.2em; + overflow-y: hidden; +} +.flipper-digit span { + font-size: 25%; +} + +.flipper-delimiter { + white-space: nowrap; + display: block; + float: left; + padding: 0; + margin: 0; + color: #fff; + min-width: 0.1em; + white-space: nowrap; + display: block; + padding-top: 0.1em; + padding-bottom: 0.1em; + line-height: 1em; +} + +.digit-face { + display: block; + visibility: hidden; + position: relative; + border-radius: 0.1em; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 8; + padding-top: 0.1em; + padding-bottom: 0.1em; + padding-left: 0.1em; + padding-right: 0.1em; + box-sizing: border-box; + text-align: center; +} + +.digit-next { + display: block; + position: relative; + border-radius: 0.1em; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 8; + height: 1.2em; + background: #fff; + padding-top: 0.1em; + padding-bottom: 0.1em; + padding-left: 0.1em; + padding-right: 0.1em; + box-sizing: border-box; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.digit-top { + z-index: 10; + top: 0; + left: 0; + right: 0; + height: 50%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; + overflow: hidden; + position: absolute; + background: #fff; + padding-top: 0.1em; + padding-bottom: 0; + padding-left: 0.1em; + padding-right: 0.1em; + border-top-left-radius: 0.1em; + border-top-right-radius: 0.1em; + box-sizing: border-box; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: background 0s linear, -webkit-transform 0s linear; + transition: transform 0s linear, background 0s linear; + transition: transform 0s linear, background 0s linear, + -webkit-transform 0s linear; + -webkit-transform-origin: 0 0.6em 0 !important; + transform-origin: 0 0.6em 0 !important; + -webkit-transform-style: preserve-3d !important; + transform-style: preserve-3d !important; + z-index: 20; +} +.digit-top.r { + transition: background 0.2s linear, -webkit-transform 0.2s linear; + transition: transform 0.2s linear, background 0.2s linear; + transition: transform 0.2s linear, background 0.2s linear, + -webkit-transform 0.2s linear; + -webkit-transform: rotateX(90deg); + transform: rotateX(90deg); + background: #cccccc; +} + +.digit-top2 { + visibility: hidden; + position: absolute; + height: 50%; + left: 0; + right: 0; + background: #cccccc; + transition: -webkit-transform 0.2s linear; + transition: transform 0.2s linear; + transition: transform 0.2s linear, -webkit-transform 0.2s linear; + line-height: 0em !important; + top: 50% !important; + bottom: auto !important; + padding-top: 0; + padding-bottom: 0.1em; + padding-left: 0.1em; + padding-right: 0.1em; + border-bottom-left-radius: 0.1em; + border-bottom-right-radius: 0.1em; + overflow: hidden; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: background 0s linear, -webkit-transform 0s linear; + transition: transform 0s linear, background 0s linear; + transition: transform 0s linear, background 0s linear, + -webkit-transform 0s linear; + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + -webkit-transform-style: preserve-3d !important; + transform-style: preserve-3d !important; + -webkit-transform-origin: 0 0 0 !important; + transform-origin: 0 0 0 !important; + z-index: 20; +} +.digit-top2.r { + visibility: visible; + transition: background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s; + transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s; + transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s, + -webkit-transform 0.2s linear 0.2s; + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + background: #fff; +} + +.digit-bottom { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: none; + position: absolute; + overflow: hidden; + background: #fff; + height: 50%; + left: 0; + right: 0; + bottom: 0; + z-index: 9; + line-height: 0em; + padding-top: 0; + padding-bottom: 0.1em; + padding-left: 0.1em; + padding-right: 0.1em; + border-bottom-left-radius: 0.1em; + border-bottom-right-radius: 0.1em; + box-sizing: border-box; + text-align: center; + transition: none; +} +.digit-bottom.r { + transition: background 0.2s linear; + background: #cccccc; +} + +.flipper-digit:after { + content: ""; + position: absolute; + height: 2px; + background: rgba(0, 0, 0, 0.5); + top: 50%; + display: block; + z-index: 30; + left: 0; + right: 0; +} + +/********* Flipper Dark *********/ +.flipper-dark { + color: #fff; +} +.flipper-dark .flipper-delimiter { + color: #333; +} +.flipper-dark .digit-next { + background: #333; +} +.flipper-dark .digit-top { + background: #333; +} +.flipper-dark .digit-top.r { + background: black; +} +.flipper-dark .digit-top2 { + background: black; +} +.flipper-dark .digit-top2.r { + background: #333; +} +.flipper-dark .digit-bottom { + background: #333; +} + +.flipper-dark .flipper-group label { + color: #333; +} + +/********* Flipper Dark Gradient *********/ +.flipper-dark-gradient { + color: #fff; +} +.flipper-dark-gradient .flipper-digit { + box-shadow: 4px 0px 6px rgba(255, 255, 255, 0.3), + -4px 0px 6px rgba(255, 255, 255, 0.3); +} +.flipper-dark-gradient .flipper-digit:after { + font-family: sans; + content: "• •"; + color: #000; + text-shadow: 1px 1px #ffffff55; + font-size: 0.6em; + line-height: 0; + position: absolute; + text-align: center; + height: 4px; + background: rgba(0, 0, 0, 0.5); + top: 50%; + display: block; + z-index: 30; + left: 0; + right: 0; +} +.flipper-dark-gradient, +.flipper-dark-gradient .digit-face, +.flipper-dark-gradient .digit-top, +.flipper-dark-gradient .digit-top2, +.flipper-dark-gradient .digit-next, +.flipper-dark-gradient .digit-bottom { + border-radius: 0.04em; + color: #ffffffee; +} +.flipper-dark-gradient .flipper-delimiter { + color: #333; +} +.flipper-dark-gradient .digit-next { + background-image: linear-gradient(to left top, #333, #333, #333, #6d6c6c); +} +.flipper-dark-gradient .digit-top { + background-image: linear-gradient(to left top, #333, #333, #333, #6d6c6c); +} +.flipper-dark-gradient .digit-top.r { + background: black; +} +.flipper-dark-gradient .digit-top2 { + background: black; +} +.flipper-dark-gradient .digit-top2.r { + background: #333; +} +.flipper-dark-gradient .digit-bottom { + background: #333; +} + +.flipper-dark-gradient .flipper-group label { + color: #333; +} diff --git a/addons/widgets/countdown/countdown.js b/addons/widgets/countdown/countdown.js index 6d203d0..329e633 100644 --- a/addons/widgets/countdown/countdown.js +++ b/addons/widgets/countdown/countdown.js @@ -1,5 +1,6 @@ (function ($) { "use strict"; + /** * [SMCstylus Countdown Widget v.1.0.0] * @param {[string]} $scope @@ -11,206 +12,259 @@ if (countdown_elem.length > 0) { let widget_options = countdown_elem.data("countdown"); //console.log(widget_options); - if (widget_options.status.circleStyle === true) { + switch (widget_options.style) { // Circle countdown - let dayLabel = widget_options.customlabels.days, - hourLabel = widget_options.customlabels.hours, - minuteLabel = widget_options.customlabels.minutes, - secondLabel = widget_options.customlabels.seconds; - - if (widget_options.status.hideLabels === true) { - dayLabel = hourLabel = minuteLabel = secondLabel = ""; - } - - let circleTimerArgs = { - animation: widget_options.animation.style, - direction: widget_options.animation.direction, - labelSize: widget_options.labelSize / 100, - numberSize: widget_options.numberSize / 100, - innerFill: widget_options.inner.fill, - innerUseGradient: widget_options.inner.useGradient, - innerBackgroundColors: widget_options.inner.colors, - innerCenterSize: widget_options.inner.centerSize, - innerShadowBlur: widget_options.inner.shadowBlur, - innerShadowColor: widget_options.inner.shadowColor, - pastTimeLineShow: widget_options.pastTime.showLines, - pastTimeLineWith: widget_options.pastTime.lineWidth, - pastTimeLineUseGradient: widget_options.pastTime.useGradient, // - pastTimeLineColors: widget_options.pastTime.lineColors, - pastTimeLineGradPoints: widget_options.pastTime.gradientPoints, - pastTimeLineShadowBlur: widget_options.pastTime.shadowBlur, - pastTimeLineShadowColor: widget_options.pastTime.shadowColor, - pastTimeLineShadowCoordinates: - widget_options.pastTime.shadowCoordinates, - leftTimeLineWidth: widget_options.leftTime.lineWidth, - leftTimeLineCap: widget_options.leftTime.linesCap, - leftTimeLineUseGradient: widget_options.leftTime.useGradient, - leftTimeLineColors: widget_options.leftTime.lineColors, - leftTimeLineIndividualColors: - widget_options.leftTime.useEachLineColor, - leftTimeLineShadowBlur: widget_options.leftTime.shadowBlur, - leftTimeLineShadowColor: widget_options.leftTime.shadowColor, - leftTimeLineShadowCoordinates: - widget_options.leftTime.shadowCoordinates, - leftTimeLineUIEffect: widget_options.leftTime.UIeffect, - time: { - Days: { - show: widget_options.status.showDays, - text: dayLabel, - color: widget_options.leftTime.daysColors, - gradient: widget_options.leftTime.daysGrads, - }, - Hours: { - show: widget_options.status.showHours, - text: hourLabel, - color: widget_options.leftTime.hoursColors, - gradient: widget_options.leftTime.hoursGrads, - }, - Minutes: { - show: widget_options.status.showMinutes, - text: minuteLabel, - color: widget_options.leftTime.minutesColors, - gradient: widget_options.leftTime.minutesGrads, - }, - Seconds: { - show: widget_options.status.showSeconds, - text: secondLabel, - color: widget_options.leftTime.secondsColors, - gradient: widget_options.leftTime.secondsGrads, + default: + case "circle": + let dayLabel = widget_options.customlabels.days, + hourLabel = widget_options.customlabels.hours, + minuteLabel = widget_options.customlabels.minutes, + secondLabel = widget_options.customlabels.seconds; + + if (widget_options.status.hideLabels === true) { + dayLabel = hourLabel = minuteLabel = secondLabel = ""; + } + + let circleTimerArgs = { + animation: widget_options.animation.style, + direction: widget_options.animation.direction, + labelSize: widget_options.labelSize / 100, + numberSize: widget_options.numberSize / 100, + innerFill: widget_options.inner.fill, + innerUseGradient: widget_options.inner.useGradient, + innerBackgroundColors: widget_options.inner.colors, + innerCenterSize: widget_options.inner.centerSize, + innerShadowBlur: widget_options.inner.shadowBlur, + innerShadowColor: widget_options.inner.shadowColor, + pastTimeLineShow: widget_options.pastTime.showLines, + pastTimeLineWith: widget_options.pastTime.lineWidth, + pastTimeLineUseGradient: widget_options.pastTime.useGradient, // + pastTimeLineColors: widget_options.pastTime.lineColors, + pastTimeLineGradPoints: widget_options.pastTime.gradientPoints, + pastTimeLineShadowBlur: widget_options.pastTime.shadowBlur, + pastTimeLineShadowColor: widget_options.pastTime.shadowColor, + pastTimeLineShadowCoordinates: + widget_options.pastTime.shadowCoordinates, + leftTimeLineWidth: widget_options.leftTime.lineWidth, + leftTimeLineCap: widget_options.leftTime.linesCap, + leftTimeLineUseGradient: widget_options.leftTime.useGradient, + leftTimeLineColors: widget_options.leftTime.lineColors, + leftTimeLineIndividualColors: + widget_options.leftTime.useEachLineColor, + leftTimeLineShadowBlur: widget_options.leftTime.shadowBlur, + leftTimeLineShadowColor: widget_options.leftTime.shadowColor, + leftTimeLineShadowCoordinates: + widget_options.leftTime.shadowCoordinates, + leftTimeLineUIEffect: widget_options.leftTime.UIeffect, + time: { + Days: { + show: widget_options.status.showDays, + text: dayLabel, + color: widget_options.leftTime.daysColors, + gradient: widget_options.leftTime.daysGrads, + }, + Hours: { + show: widget_options.status.showHours, + text: hourLabel, + color: widget_options.leftTime.hoursColors, + gradient: widget_options.leftTime.hoursGrads, + }, + Minutes: { + show: widget_options.status.showMinutes, + text: minuteLabel, + color: widget_options.leftTime.minutesColors, + gradient: widget_options.leftTime.minutesGrads, + }, + Seconds: { + show: widget_options.status.showSeconds, + text: secondLabel, + color: widget_options.leftTime.secondsColors, + gradient: widget_options.leftTime.secondsGrads, + }, }, - }, - }; - - // Init and add listener - countdown_elem - .smcstylusCircleTimers(circleTimerArgs) - .addListener(countdownCompleteListener); - - // Actions function - function countdownComplete(total, el) { - let widget_options = $(el).data("countdown"), - e = $(el).find(".smcstylusCircleTimers").eq(0); - - if (total <= 0) { - switch (widget_options.due_date.action) { - case "redirect": - window.location.href = widget_options.due_date.redirect; - break; - case "hide": - e.fadeOut("slow", function () { - $(this).hide(); - }); - break; - case "message_keep": - $(el).after(widget_options.due_date.message); - break; - case "message_hide": - e.fadeOut("slow", function () { - $(this).hide(); - }); - $(el).append(widget_options.due_date.message); - break; - case "donothing": - default: - // do nothing here :))) - break; + }; + + // Init and add listener + countdown_elem + .smcstylusCircleTimers(circleTimerArgs) + .addListener(countdownCompleteListener); + + // Actions function + function countdownComplete(total, el) { + let widget_options = $(el).data("countdown"), + e = $(el).find(".smcstylusCircleTimers").eq(0); + + if (total <= 0) { + displayMessage(el, e, widget_options); } } - } - - // Action on live view - function countdownCompleteListener(unit, value, total) { - countdownComplete(total, this); - } - // Action on document load - $(document).ready(() => { - if (countdown_elem.data("tc-act") === "ended") { - let el = countdown_elem.smcstylusCircleTimers(circleTimerArgs); - countdownComplete(0, el.elements[0]); + + // Action on live view + function countdownCompleteListener(unit, value, total) { + countdownComplete(total, this); } - }); - // Rebuild on resize - $(window).resize(() => { - countdown_elem.smcstylusCircleTimers().rebuild(); - }); - } else { - // Normal countdown - countdown_elem - .countdown(widget_options.due_date["date"], (e) => { - let due_date, days, hours, minutes, seconds; - - if (widget_options.status.hideLabels == true) { - days = timeTpl("days", "D", "", true); - hours = timeTpl("hours", "H", "", true); - minutes = timeTpl("minutes", "M", "", true); - seconds = timeTpl("seconds", "S", "", true); - } else { - days = timeTpl("days", "D", widget_options.customlabels.days); - hours = timeTpl("hours", "H", widget_options.customlabels.hours); - minutes = timeTpl( - "minutes", - "M", - widget_options.customlabels.minutes - ); - seconds = timeTpl( - "seconds", - "S", - widget_options.customlabels.seconds - ); + // Action on document load + $(document).ready(() => { + if (countdown_elem.data("tc-act") === "ended") { + let el = countdown_elem.smcstylusCircleTimers(circleTimerArgs); + countdownComplete(0, el.elements[0]); } + }); - // Generate date - if (widget_options.status.showDays === false) { - days = ""; - } - if (widget_options.status.showHours === false) { - hours = ""; - } - if (widget_options.status.showMinutes === false) { - minutes = ""; - } - if (widget_options.status.showSeconds === false) { - seconds = ""; - } - due_date = days + hours + minutes + seconds; - - // Initiate Countdown - countdown_elem.html(e.strftime(due_date)); - }) - .on("finish.countdown", function (event) { - let widget_options = $(this).data("countdown"), - e = $(this), - el = $(this).parent(); - switch (widget_options.due_date.action) { - case "redirect": - window.location.href = widget_options.due_date.redirect; - break; - case "hide": - e.fadeOut("slow", function () { - $(this).hide(); - }); - break; - case "message_keep": - $(el).after(widget_options.due_date.message); - break; - case "message_hide": - e.fadeOut("slow", function () { - $(this).hide(); - }); - $(el).append(widget_options.due_date.message); - break; - case "donothing": - default: - // do nothing here :))) - break; - } + // Rebuild on resize + $(window).resize(() => { + countdown_elem.smcstylusCircleTimers().rebuild(); }); + break; + + // Flipper countdown + case "flipper": + $(document).ready(function () { + countdown_elem.append( + `
` + ); + + let flipper = countdown_elem.find(".smcFlipperTimers").eq(0); + + let dueDate = + widget_options.timerType === "dueDate" + ? countdown_elem.data("date") + : widget_options.timerType; + + let flipperTimersArgs = { + datetime: dueDate, + time: { + days: { + show: widget_options.status.showDays, + label: widget_options.customlabels.days, + template: widget_options.timeTemplate.days, + }, + hours: { + show: widget_options.status.showHours, + label: widget_options.customlabels.hours, + template: widget_options.timeTemplate.hours, + }, + minutes: { + show: widget_options.status.showMinutes, + label: widget_options.customlabels.minutes, + template: widget_options.timeTemplate.minutes, + }, + seconds: { + show: widget_options.status.showSeconds, + label: widget_options.customlabels.seconds, + template: widget_options.timeTemplate.seconds, + }, + }, + showLabels: widget_options.status.hideLabels !== true, + useTrigger: true, + callback: function (trigger) { + let e = flipper, + el = e.parent(); + if (trigger === true) { + displayMessage(el, e, widget_options); + } + }, + }; + // Draw countdown widget + flipper.flipTimer(flipperTimersArgs); + // Add template + flipper.addClass(`flipper-${widget_options.cssTemplate}`); + }); + break; + + // Normal countdown + case "flat": + countdown_elem + .countdown(widget_options.due_date["date"], (e) => { + let due_date, days, hours, minutes, seconds; + + if (widget_options.status.hideLabels === true) { + days = flat_timeTpl("days", "D", "", true); + hours = flat_timeTpl("hours", "H", "", true); + minutes = flat_timeTpl("minutes", "M", "", true); + seconds = flat_timeTpl("seconds", "S", "", true); + } else { + days = flat_timeTpl( + "days", + "D", + widget_options.customlabels.days + ); + hours = flat_timeTpl( + "hours", + "H", + widget_options.customlabels.hours + ); + minutes = flat_timeTpl( + "minutes", + "M", + widget_options.customlabels.minutes + ); + seconds = flat_timeTpl( + "seconds", + "S", + widget_options.customlabels.seconds + ); + } + + // Generate date + if (widget_options.status.showDays === false) { + days = ""; + } + if (widget_options.status.showHours === false) { + hours = ""; + } + if (widget_options.status.showMinutes === false) { + minutes = ""; + } + if (widget_options.status.showSeconds === false) { + seconds = ""; + } + due_date = days + hours + minutes + seconds; + + // Initiate Countdown + countdown_elem.html(e.strftime(due_date)); + }) + .on("finish.countdown", function (event) { + let widget_options = $(this).data("countdown"), + e = $(this), + el = $(this).parent(); + displayMessage(el, e, widget_options); + }); + break; } } }; - const timeTpl = ( + // Print message + function displayMessage(el, e, opt) { + switch (opt.due_date.action) { + case "redirect": + window.location.href = opt.due_date.redirect; + break; + case "hide": + e.fadeOut("slow", function () { + $(this).hide().css({ display: "none" }); + }); + break; + case "message_keep": + $(el).after(opt.due_date.message); + break; + case "message_hide": + e.fadeOut("slow", function () { + $(this).css({ display: "none" }); + }); + $(el).append(opt.due_date.message); + break; + case "donothing": + default: + // do nothing here :))) + break; + } + } + + // Print flat timer HTML + const flat_timeTpl = ( type = "seconds", time = "S", label = "", @@ -222,7 +276,6 @@ : `${label}`; return `
%${time}${isLabel}
`; }; - /* * Run this code under Elementor. */ diff --git a/addons/widgets/countdown/countdown.min.js b/addons/widgets/countdown/countdown.min.js index 5e09f20..6e71d2a 100644 --- a/addons/widgets/countdown/countdown.min.js +++ b/addons/widgets/countdown/countdown.min.js @@ -3,4 +3,4 @@ * @param {[string]} $scope * @package: SMCstylus Addons For Elementor */ -!function(e){"use strict";let s=(e,s)=>{let i=e.find(".smc-addel-countdown").eq(0);if(i.length>0){let e=i.data("countdown");if(!0===e.status.circleStyle){let t=e.customlabels.days,o=e.customlabels.hours,a=e.customlabels.minutes,d=e.customlabels.seconds;!0===e.status.hideLabels&&(t=o=a=d="");let l={animation:e.animation.style,direction:e.animation.direction,labelSize:e.labelSize/100,numberSize:e.numberSize/100,innerFill:e.inner.fill,innerUseGradient:e.inner.useGradient,innerBackgroundColors:e.inner.colors,innerCenterSize:e.inner.centerSize,innerShadowBlur:e.inner.shadowBlur,innerShadowColor:e.inner.shadowColor,pastTimeLineShow:e.pastTime.showLines,pastTimeLineWith:e.pastTime.lineWidth,pastTimeLineUseGradient:e.pastTime.useGradient,pastTimeLineColors:e.pastTime.lineColors,pastTimeLineGradPoints:e.pastTime.gradientPoints,pastTimeLineShadowBlur:e.pastTime.shadowBlur,pastTimeLineShadowColor:e.pastTime.shadowColor,pastTimeLineShadowCoordinates:e.pastTime.shadowCoordinates,leftTimeLineWidth:e.leftTime.lineWidth,leftTimeLineCap:e.leftTime.linesCap,leftTimeLineUseGradient:e.leftTime.useGradient,leftTimeLineColors:e.leftTime.lineColors,leftTimeLineIndividualColors:e.leftTime.useEachLineColor,leftTimeLineShadowBlur:e.leftTime.shadowBlur,leftTimeLineShadowColor:e.leftTime.shadowColor,leftTimeLineShadowCoordinates:e.leftTime.shadowCoordinates,leftTimeLineUIEffect:e.leftTime.UIeffect,time:{Days:{show:e.status.showDays,text:t,color:e.leftTime.daysColors,gradient:e.leftTime.daysGrads},Hours:{show:e.status.showHours,text:o,color:e.leftTime.hoursColors,gradient:e.leftTime.hoursGrads},Minutes:{show:e.status.showMinutes,text:a,color:e.leftTime.minutesColors,gradient:e.leftTime.minutesGrads},Seconds:{show:e.status.showSeconds,text:d,color:e.leftTime.secondsColors,gradient:e.leftTime.secondsGrads}}};function n(e,t){let i=s(t).data("countdown"),n=s(t).find(".smcstylusCircleTimers").eq(0);if(e<=0)switch(i.due_date.action){case"redirect":window.location.href=i.due_date.redirect;break;case"hide":n.fadeOut("slow",function(){s(this).hide()});break;case"message_keep":s(t).after(i.due_date.message);break;case"message_hide":n.fadeOut("slow",function(){s(this).hide()}),s(t).append(i.due_date.message)}}i.smcstylusCircleTimers(l).addListener(function(e,s,t){n(t,this)}),s(document).ready(()=>{if("ended"===i.data("tc-act")){n(0,i.smcstylusCircleTimers(l).elements[0])}}),s(window).resize(()=>{i.smcstylusCircleTimers().rebuild()})}else i.countdown(e.due_date.date,s=>{let n,o,a,d,l;1==e.status.hideLabels?(o=t("days","D","",!0),a=t("hours","H","",!0),d=t("minutes","M","",!0),l=t("seconds","S","",!0)):(o=t("days","D",e.customlabels.days),a=t("hours","H",e.customlabels.hours),d=t("minutes","M",e.customlabels.minutes),l=t("seconds","S",e.customlabels.seconds)),!1===e.status.showDays&&(o=""),!1===e.status.showHours&&(a=""),!1===e.status.showMinutes&&(d=""),!1===e.status.showSeconds&&(l=""),n=o+a+d+l,i.html(s.strftime(n))}).on("finish.countdown",function(e){let t=s(this).data("countdown"),i=s(this),n=s(this).parent();switch(t.due_date.action){case"redirect":window.location.href=t.due_date.redirect;break;case"hide":i.fadeOut("slow",function(){s(this).hide()});break;case"message_keep":s(n).after(t.due_date.message);break;case"message_hide":i.fadeOut("slow",function(){s(this).hide()}),s(n).append(t.due_date.message)}})}};const t=(e="seconds",s="S",t="",i=!1)=>{return`
%${s}${!0===i?"":`${t}`}
`};e(window).on("elementor/frontend/init",()=>{elementorFrontend.hooks.addAction("frontend/element_ready/countdown.default",s)})}(jQuery); \ No newline at end of file +(function($){"use strict";let smcstylusCountdown=($scope,$)=>{let countdown_elem=$scope.find(".smc-addel-countdown").eq(0);if(countdown_elem.length>0){let widget_options=countdown_elem.data("countdown");switch(widget_options.style){default:case"circle":let dayLabel=widget_options.customlabels.days,hourLabel=widget_options.customlabels.hours,minuteLabel=widget_options.customlabels.minutes,secondLabel=widget_options.customlabels.seconds;if(widget_options.status.hideLabels===true){dayLabel=hourLabel=minuteLabel=secondLabel=""}let circleTimerArgs={animation:widget_options.animation.style,direction:widget_options.animation.direction,labelSize:widget_options.labelSize/100,numberSize:widget_options.numberSize/100,innerFill:widget_options.inner.fill,innerUseGradient:widget_options.inner.useGradient,innerBackgroundColors:widget_options.inner.colors,innerCenterSize:widget_options.inner.centerSize,innerShadowBlur:widget_options.inner.shadowBlur,innerShadowColor:widget_options.inner.shadowColor,pastTimeLineShow:widget_options.pastTime.showLines,pastTimeLineWith:widget_options.pastTime.lineWidth,pastTimeLineUseGradient:widget_options.pastTime.useGradient,pastTimeLineColors:widget_options.pastTime.lineColors,pastTimeLineGradPoints:widget_options.pastTime.gradientPoints,pastTimeLineShadowBlur:widget_options.pastTime.shadowBlur,pastTimeLineShadowColor:widget_options.pastTime.shadowColor,pastTimeLineShadowCoordinates:widget_options.pastTime.shadowCoordinates,leftTimeLineWidth:widget_options.leftTime.lineWidth,leftTimeLineCap:widget_options.leftTime.linesCap,leftTimeLineUseGradient:widget_options.leftTime.useGradient,leftTimeLineColors:widget_options.leftTime.lineColors,leftTimeLineIndividualColors:widget_options.leftTime.useEachLineColor,leftTimeLineShadowBlur:widget_options.leftTime.shadowBlur,leftTimeLineShadowColor:widget_options.leftTime.shadowColor,leftTimeLineShadowCoordinates:widget_options.leftTime.shadowCoordinates,leftTimeLineUIEffect:widget_options.leftTime.UIeffect,time:{Days:{show:widget_options.status.showDays,text:dayLabel,color:widget_options.leftTime.daysColors,gradient:widget_options.leftTime.daysGrads,},Hours:{show:widget_options.status.showHours,text:hourLabel,color:widget_options.leftTime.hoursColors,gradient:widget_options.leftTime.hoursGrads,},Minutes:{show:widget_options.status.showMinutes,text:minuteLabel,color:widget_options.leftTime.minutesColors,gradient:widget_options.leftTime.minutesGrads,},Seconds:{show:widget_options.status.showSeconds,text:secondLabel,color:widget_options.leftTime.secondsColors,gradient:widget_options.leftTime.secondsGrads,},},};countdown_elem.smcstylusCircleTimers(circleTimerArgs).addListener(countdownCompleteListener);function countdownComplete(total,el){let widget_options=$(el).data("countdown"),e=$(el).find(".smcstylusCircleTimers").eq(0);if(total<=0){displayMessage(el,e,widget_options)}}function countdownCompleteListener(unit,value,total){countdownComplete(total,this)}$(document).ready(()=>{if(countdown_elem.data("tc-act")==="ended"){let el=countdown_elem.smcstylusCircleTimers(circleTimerArgs);countdownComplete(0,el.elements[0])}});$(window).resize(()=>{countdown_elem.smcstylusCircleTimers().rebuild()});break;case"flipper":$(document).ready(function(){countdown_elem.append(`
`);let flipper=countdown_elem.find(".smcFlipperTimers").eq(0);let dueDate=widget_options.timerType==="dueDate"?countdown_elem.data("date"):widget_options.timerType;let flipperTimersArgs={datetime:dueDate,time:{days:{show:widget_options.status.showDays,label:widget_options.customlabels.days,template:widget_options.timeTemplate.days,},hours:{show:widget_options.status.showHours,label:widget_options.customlabels.hours,template:widget_options.timeTemplate.hours,},minutes:{show:widget_options.status.showMinutes,label:widget_options.customlabels.minutes,template:widget_options.timeTemplate.minutes,},seconds:{show:widget_options.status.showSeconds,label:widget_options.customlabels.seconds,template:widget_options.timeTemplate.seconds,},},showLabels:widget_options.status.hideLabels!==true,useTrigger:true,callback:function(trigger){let e=flipper,el=e.parent();if(trigger===true){displayMessage(el,e,widget_options)}},};flipper.flipTimer(flipperTimersArgs);flipper.addClass(`flipper-${widget_options.cssTemplate}`)});break;case"flat":countdown_elem.countdown(widget_options.due_date["date"],(e)=>{let due_date,days,hours,minutes,seconds;if(widget_options.status.hideLabels===true){days=flat_timeTpl("days","D","",true);hours=flat_timeTpl("hours","H","",true);minutes=flat_timeTpl("minutes","M","",true);seconds=flat_timeTpl("seconds","S","",true)}else{days=flat_timeTpl("days","D",widget_options.customlabels.days);hours=flat_timeTpl("hours","H",widget_options.customlabels.hours);minutes=flat_timeTpl("minutes","M",widget_options.customlabels.minutes);seconds=flat_timeTpl("seconds","S",widget_options.customlabels.seconds)}if(widget_options.status.showDays===false){days=""}if(widget_options.status.showHours===false){hours=""}if(widget_options.status.showMinutes===false){minutes=""}if(widget_options.status.showSeconds===false){seconds=""}due_date=days+hours+minutes+seconds;countdown_elem.html(e.strftime(due_date))}).on("finish.countdown",function(event){let widget_options=$(this).data("countdown"),e=$(this),el=$(this).parent();displayMessage(el,e,widget_options)});break}}};function displayMessage(el,e,opt){switch(opt.due_date.action){case"redirect":window.location.href=opt.due_date.redirect;break;case"hide":e.fadeOut("slow",function(){$(this).hide().css({display:"none"})});break;case"message_keep":$(el).after(opt.due_date.message);break;case"message_hide":e.fadeOut("slow",function(){$(this).css({display:"none"})});$(el).append(opt.due_date.message);break;case"donothing":default:break}}const flat_timeTpl=(type="seconds",time="S",label="",hideLabel=false)=>{let isLabel=hideLabel===true?"":`${label}`;return`
%${time}${isLabel}
`};$(window).on("elementor/frontend/init",()=>{elementorFrontend.hooks.addAction("frontend/element_ready/countdown.default",smcstylusCountdown)})})(jQuery); \ No newline at end of file diff --git a/addons/widgets/countdown/countdown.php b/addons/widgets/countdown/countdown.php index f81b6a5..29b2045 100644 --- a/addons/widgets/countdown/countdown.php +++ b/addons/widgets/countdown/countdown.php @@ -19,13 +19,15 @@ * */ class Countdown extends Widget_Base { - private $widget_version = '1.0.0'; + private $widget_version = '1.3.0'; private $widget_key = 'countdown'; private $widget_url = ''; private $widget_opt = ''; private $slug_prefix = ''; private $opt_prefix = ''; private $textdomain = ''; + private $css_dependencies = []; + private $js_dependencies = []; public function __construct($data = array(), $args = null){ parent::__construct($data, $args); @@ -41,12 +43,24 @@ public function __construct($data = array(), $args = null){ private function register_assets(){ // CSS - wp_register_style($this->slug_prefix . $this->widget_key, $this->widget_url . $this->widget_key .'/'.$this->widget_key.'.css', $this->widget_version); + foreach($this->widget_opt['css'] as $key => $op){ + $file = ($op['file_url'] === '') ? $this->widget_url . $this->widget_key .'/'.$op['file_name'].'.css' : $op['file_url']; + $ver = $op['version'] === '' ? $this->widget_version : $op['version']; + array_push($this->css_dependencies, $key); + wp_register_style($key, $file, $ver); + } // JS - wp_register_script($this->slug_prefix . $this->widget_key, $this->widget_url . $this->widget_key .'/'.$this->widget_key.'.min.js', ['jquery'], $this->widget_version, true); - wp_register_script('jquery-countdown', $this->widget_url . $this->widget_key .'/'.'jquery.countdown'.'.min.js', ['jquery'], '1.0.0', true); - wp_register_script('jquery-smcstylusCircleTimers', $this->widget_url . $this->widget_key .'/'.'jquery.smcstylusCircleTimers'.'.min.js', ['jquery'], '1.0.0', true); + foreach($this->widget_opt['js'] as $key => $op){ + $file = ($op['file_url'] === '') ? $this->widget_url . $this->widget_key .'/'.$op['file_name'].'.js' : $op['file_url']; + $dep = $op['deps']; + $ver = $op['version'] === '' ? $this->widget_version : $op['version']; + $footer = $op['load_in_footer'] === false ? false : true; + + array_push($this->js_dependencies, $key); + + wp_register_script($key, $file, $dep, $ver, $footer); + } } public function get_name(){ @@ -75,11 +89,11 @@ public function get_custom_help_url(){ } public function get_style_depends() { - return [$this->slug_prefix . $this->widget_key]; + return $this->css_dependencies; } public function get_script_depends() { - return ['jquery-countdown', 'jquery-smcstylusCircleTimers', $this->slug_prefix . $this->widget_key ]; + return $this->js_dependencies; } @@ -756,6 +770,59 @@ private function controlsGeneralTabCircle(){ $this->end_controls_section(); } + /** GENERAL - CIRCLE **/ + private function controlsGeneralTabFlipper(){ + /* Circle - General Options Section */ + $this->start_controls_section( + 'countdown__flipper_general_section', + [ + 'label' => esc_html__( 'Flipper Style - General Options', $this->textdomain ), + 'condition'=>[ + 'countdown__display_style'=>'flipper', + ], + ] + ); + + $this->add_control( + 'countdown__flipper_note', + [ + 'label' => __( 'Note', $this->textdomain ), + 'type' => \Elementor\Controls_Manager::RAW_HTML, + 'raw' => __( 'Select "test" option will set the countdown for X secconds. Usefull if you want to see the action.', $this->textdomain ), + ] + ); + + $this->add_control( + 'countdown__flipper_timers_type', + [ + 'label' => esc_html__( 'Environement', $this->textdomain ), + 'type' => Controls_Manager::SELECT, + 'default' => 'dueDate', + 'options' => [ + 'dueDate' => esc_html( 'Countdown', $this->textdomain ), + 'clock' => esc_html__( 'Clock', $this->textdomain ), + 'test5' => esc_html__( 'Test 5 seconds', $this->textdomain ), + 'test15' => esc_html__( 'Test 15 seconds', $this->textdomain ), + 'test70' => esc_html__( 'Test 70 seconds', $this->textdomain ), + ], + ] + ); + + $this->add_control( + 'countdown__flipper_time_template', + [ + 'label' => esc_html__( 'Date & Time Templates', $this->textdomain ), + 'type' => Controls_Manager::SELECT, + 'default' => '1', + 'options' => [ + //'0' => esc_html( 'd:H:i:s'), + '1' => esc_html( 'dd:HH:ii:ss'), + '2' => esc_html__( 'ddd:HH:ii:ss' ), + ], + ] + ); + $this->end_controls_section(); + } /** GENERAL - REGULAR **/ private function controlsGeneralTabRegular(){ @@ -763,9 +830,9 @@ private function controlsGeneralTabRegular(){ $this->start_controls_section( 'countdown__regular_style_section', [ - 'label' => esc_html__( 'Regular Style Options', $this->textdomain ), + 'label' => esc_html__( 'Flat Style Options', $this->textdomain ), 'condition'=>[ - 'countdown__display_style'=>'regular', + 'countdown__display_style'=>'flat', ], ] ); @@ -1053,7 +1120,7 @@ private function controlsStyleTabRegular(){ 'label' => esc_html__( 'Timers', $this->textdomain ), 'tab' => Controls_Manager::TAB_STYLE, 'condition'=>[ - 'countdown__display_style'=>'regular', + 'countdown__display_style'=>'flat', ], ] ); @@ -1160,7 +1227,7 @@ private function controlsStyleTabRegular(){ 'tab' => Controls_Manager::TAB_STYLE, 'condition' =>[ - 'countdown__display_style'=>'regular', + 'countdown__display_style'=>'flat', ] ] ); @@ -1263,7 +1330,7 @@ private function controlsStyleTabRegular(){ 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'countdown__hide_labels!' => 'yes', - 'countdown__display_style'=>'regular', + 'countdown__display_style'=>'flat', ], ] ); @@ -1373,7 +1440,8 @@ protected function _register_controls() { 'default' => 'circle', 'options' => [ 'circle' => esc_html__( 'Circle', $this->textdomain ), - 'regular' => esc_html__( 'Regular', $this->textdomain ), + 'flipper' => esc_html__( 'Flipper', $this->textdomain ), + 'flat' => esc_html__( 'Flat', $this->textdomain ), ], 'label_block'=>true, ] @@ -1394,22 +1462,39 @@ protected function _register_controls() { ], ] ); + // Flipper template + $this->add_control( + 'countdown__template_flipper', + [ + 'label' => esc_html__( 'Flipper Templates', $this->textdomain ), + 'type' => Controls_Manager::SELECT, + 'default' => 'dark', + 'options' => [ + 'light' => esc_html__( 'Light', $this->textdomain ), + 'dark' => esc_html__( 'Dark', $this->textdomain ), + 'dark-gradient' => esc_html__( 'Dark Gradient', $this->textdomain ), + ], + 'condition' => [ + 'countdown__display_style' => 'flipper', + ], + ] + ); // Regular template $this->add_control( - 'countdown__template_regular', + 'countdown__template_flat', [ - 'label' => esc_html__( 'Regular Templates', $this->textdomain ), + 'label' => esc_html__( 'Flat Templates', $this->textdomain ), 'type' => Controls_Manager::SELECT, 'default' => 'one', 'options' => [ 'one' => esc_html__( 'Dark', $this->textdomain ), 'two' => esc_html__( 'Calendar', $this->textdomain ), - 'three' => esc_html__( 'Flipper Secconds', $this->textdomain ), + 'three' => esc_html__( 'Flip Secconds', $this->textdomain ), 'four' => esc_html__( 'Tick', $this->textdomain ), 'five' => esc_html__( 'Suspended', $this->textdomain ), ], 'condition' => [ - 'countdown__display_style' => 'regular', + 'countdown__display_style' => 'flat', ], ] ); @@ -1628,6 +1713,9 @@ protected function _register_controls() { // Regular general tab $this->controlsGeneralTabRegular(); + // Flipper general tab + $this->controlsGeneralTabFlipper(); + /***************** STYLE TAB ****************/ // Style Counter Wraper @@ -1737,14 +1825,16 @@ protected function _register_controls() { $this->controlsStyleTabCircle(); // Regular style item $this->controlsStyleTabRegular(); + // Flipper } protected function render( $instance = [] ) { $settings = $this->get_settings_for_display(); $def_date = date( 'Y-m-d H:i', ( strtotime('3 days') * HOUR_IN_SECONDS ) ); + $date = isset( $settings['countdown__due_date'] ) ? $settings['countdown__due_date'] : $def_date; $data_options = [ 'due_date' => [ - 'date' => isset( $settings['countdown__due_date'] ) ? $settings['countdown__due_date'] : $def_date, + 'date' => $date, 'action' => $this->setDefaultSettingsOption($settings['countdown__due_date_action'], 'donothing' ), 'redirect' => $this->setDefaultSettingsOption($settings['countdown__due_date_redirect'],'' ), 'message' => $this->setDefaultSettingsOption($settings['countdown__due_date_message'], '' ), @@ -1755,8 +1845,8 @@ protected function render( $instance = [] ) { 'showHours' => ( 'yes' === $settings['countdown__show_hours'] ), 'showMinutes' => ( 'yes' === $settings['countdown__show_minutes'] ), 'showSeconds' => ( 'yes' === $settings['countdown__show_seconds'] ), - 'circleStyle' => ( 'circle' === $settings['countdown__display_style'] ), ], + 'style' => $settings['countdown__display_style'] , 'customlabels' => [ 'days' => $this->setDefaultSettingsOption( $settings['countdown__custom_label_days'] , esc_html__( 'Days',$this->textdomain )), 'hours' => $this->setDefaultSettingsOption( $settings['countdown__custom_label_hours'] , esc_html__( 'Hours',$this->textdomain )), @@ -1766,10 +1856,9 @@ protected function render( $instance = [] ) { ]; // Circular countdown - if( $settings['countdown__display_style'] === 'circle' ){ - - $date = isset( $settings['countdown__due_date'] ) ? $settings['countdown__due_date'] : $def_date; - + + switch($settings['countdown__display_style']){ + case"circle": $free_wheel = $settings['countdown__circleUI_lines_freeWheel']; $past_line = ($free_wheel === 'yes' ? $settings['countdown__circleUI_past_lineWidth_freeWheel']['size']: $settings['countdown__circleUI_past_lineWidth']['size']); @@ -1788,9 +1877,6 @@ protected function render( $instance = [] ) { $remaining_line_colors_seconds = $this->calcGradient('countdown__circleUI_remaining_seconds_lineGradient', 'countdown__circleUI_remaining_seconds_lineColor', 'countdown__circleUI_remaining_seconds_lineColor_end', '#f6008b', "rgba(256, 256, 256, 0.7)"); - $this->add_render_attribute( 'area_attr', 'data-date', $date.':00' ); - $this->add_render_attribute( 'area_attr', 'class', 'smc-addel-countdown smc-addel-countdown--style-circle smc-addel-countdown--style-circle-'.$settings['countdown__template_circle'] ); - $data_options = array_merge($data_options, [ 'animation' => [ 'style' => $settings['countdown__circleUI_animationStyle'], @@ -1848,12 +1934,43 @@ protected function render( $instance = [] ) { ], ]); - - }else{ + + $this->add_render_attribute( 'area_attr', 'class', 'smc-addel-countdown smc-addel-countdown--style-circle smc-addel-countdown--style-circle-'.$settings['countdown__template_circle'] ); + + break; + // Regular countdown - $this->add_render_attribute( 'area_attr', 'class', 'smc-addel-countdown smc-addel-countdown--wrapper smc-addel-countdown--style-theme-'.$settings['countdown__template_regular'] ); + case"flat": + $this->add_render_attribute( 'area_attr', 'class', 'smc-addel-countdown smc-addel-countdown--wrapper smc-addel-countdown--style-flat-'.$settings['countdown__template_flat'] ); + break; + + case"flipper": + $flipper_date_tpl = [ + // ['d','H','i','s'], + ['dd','HH','ii','ss'], + ['ddd','HH','ii','ss'], + ]; + + $flipper_date_tpl_selected = $this->setDefaultSettingsOption( $settings['countdown__flipper_time_template'], 1); + + $data_options = array_merge($data_options, [ + 'timerType' => $settings['countdown__flipper_timers_type'], + 'cssTemplate' => $settings['countdown__template_flipper'], + 'timeTemplate' => [ + 'days' => $flipper_date_tpl[$flipper_date_tpl_selected][0], //dd + 'hours' => $flipper_date_tpl[$flipper_date_tpl_selected][1], + 'minutes' => $flipper_date_tpl[$flipper_date_tpl_selected][2], + 'seconds' => $flipper_date_tpl[$flipper_date_tpl_selected][3], + ], + ]); + + + + $this->add_render_attribute( 'area_attr', 'class', 'smc-addel-countdown smc-addel-countdown--wrapper smc-addel-countdown--style-flipper-'.$settings['countdown__template_flipper'] ); + break; } - + + $this->add_render_attribute( 'area_attr', 'data-date', $date.':00' ); $this->add_render_attribute( 'area_attr', 'data-countdown', wp_json_encode( $data_options ) ); echo sprintf('
', $this->get_render_attribute_string( 'area_attr' ) );