vamtam-countdown.php 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <?php
  2. /**
  3. * @class VamtamCountdownModule
  4. */
  5. class VamtamCountdownModule extends FLBuilderModule {
  6. /**
  7. * @method __construct
  8. */
  9. public function __construct() {
  10. $path = trailingslashit( 'modules/' . basename( dirname( __FILE__ ) ) );
  11. parent::__construct(array(
  12. 'name' => __( 'Countdown', 'vamtam-elements-b' ),
  13. 'description' => __( 'Render a Countdown module.', 'vamtam-elements-b' ),
  14. 'category' => __( 'VamTam Modules', 'vamtam-elements-b' ),
  15. 'partial_refresh' => true,
  16. 'dir' => VAMTAMEL_B_DIR . $path,
  17. 'url' => VAMTAMEL_B_URL . $path,
  18. ));
  19. }
  20. /**
  21. * Builds an string with the respective ISO formatted time.
  22. *
  23. * @since 1.6.4
  24. * @return string The current timestamp in an ISO format.
  25. */
  26. public function get_time() {
  27. $year = isset( $this->settings->year ) ? str_pad( $this->settings->year, 4, '0', STR_PAD_LEFT ) : '00';
  28. $month = isset( $this->settings->month ) ? str_pad( $this->settings->month, 2, '0', STR_PAD_LEFT ) : '00';
  29. $day = isset( $this->settings->day ) ? str_pad( $this->settings->day, 2, '0', STR_PAD_LEFT ) : '00';
  30. $date = $year . '-' . $month . '-' . $day;
  31. $hours = isset( $this->settings->time['hours'] ) ? str_pad( $this->settings->time['hours'], 2, '0', STR_PAD_LEFT ) : '00';
  32. $minutes = isset( $this->settings->time['minutes'] ) ? str_pad( $this->settings->time['minutes'], 2, '0', STR_PAD_LEFT ) : '00';
  33. $day_period = isset( $this->settings->time['day_period'] ) ? $this->settings->time['day_period'] : 'AM';
  34. $zone = isset( $this->settings->time_zone ) ? $this->settings->time_zone : date( 'e', current_time( 'timestamp', 1 ) );
  35. $time = date( 'H:i:s', strtotime( $hours . ':' . $minutes . ':00 ' . strtoupper( $day_period ) ) );
  36. $timestamp = $date . ' ' . $time;
  37. $timezone = new DateTimeZone( $this->settings->time_zone );
  38. $date = new DateTime( $timestamp, $timezone );
  39. return $date->format( 'c' );
  40. }
  41. /**
  42. * Renders a svg circle for the current number.
  43. *
  44. * @since 1.6.4
  45. * @return void
  46. */
  47. public function render_circle() {
  48. $width = ! empty( $this->settings->circle_width ) ? esc_attr( $this->settings->circle_width ) : 100;
  49. $pos = ( $width / 2 );
  50. $radius = $pos - 10;
  51. $dash = number_format( ( ( M_PI * 2 ) * $radius ), 2, '.', '' );
  52. $bg_stroke = isset( $this->settings->circle_bg_color ) ? vamtam_el_sanitize_accent( $this->settings->circle_bg_color ) : '';
  53. $num_stroke = isset( $this->settings->circle_color ) ? vamtam_el_sanitize_accent( $this->settings->circle_color ) : '';
  54. $html = '<div class="svg-container">';
  55. $html .= '<svg class="svg" viewBox="0 0 ' . $width . ' ' . $width . '" version="1.1" preserveAspectRatio="xMinYMin meet">
  56. <circle class="fl-number-bg" r="' . $radius . '" cx="' . $pos . '" cy="' . $pos . '" fill="transparent" stroke-dasharray="' . $dash . '" stroke-dashoffset="0" stroke="' . esc_attr( $bg_stroke ) . '"></circle>
  57. <circle class="fl-number" r="' . $radius . '" cx="' . $pos . '" cy="' . $pos . '" fill="transparent" stroke-dasharray="' . $dash . '" stroke-dashoffset="' . $dash . '" transform="rotate(-90 ' . $pos . ' ' . $pos . ')" stroke="' . esc_attr( $num_stroke ) . '"></circle>
  58. </svg>';
  59. $html .= '</div>';
  60. echo $html; // xss ok
  61. }
  62. }
  63. /**
  64. * Register the module and its form settings.
  65. */
  66. FLBuilder::register_module('VamtamCountdownModule', array(
  67. 'general' => array(
  68. 'title' => __( 'General', 'vamtam-elements-b' ),
  69. 'sections' => array(
  70. 'date' => array(
  71. 'title' => __( 'Date', 'vamtam-elements-b' ),
  72. 'fields' => array(
  73. 'day' => array(
  74. 'type' => 'text',
  75. 'label' => __( 'Day', 'vamtam-elements-b' ),
  76. 'default' => date( 'j' ),
  77. 'maxlength' => '2',
  78. 'size' => '5',
  79. 'preview' => array(
  80. 'type' => 'none',
  81. ),
  82. ),
  83. 'month' => array(
  84. 'type' => 'text',
  85. 'label' => __( 'Month', 'vamtam-elements-b' ),
  86. 'default' => date( 'n' ),
  87. 'maxlength' => '2',
  88. 'size' => '5',
  89. 'preview' => array(
  90. 'type' => 'none',
  91. ),
  92. ),
  93. 'year' => array(
  94. 'type' => 'text',
  95. 'label' => __( 'Year', 'vamtam-elements-b' ),
  96. 'default' => date( 'Y' ),
  97. 'maxlength' => '4',
  98. 'size' => '5',
  99. 'preview' => array(
  100. 'type' => 'none',
  101. ),
  102. ),
  103. ),
  104. ),
  105. 'time' => array(
  106. 'title' => __( 'Time', 'vamtam-elements-b' ),
  107. 'fields' => array(
  108. 'time' => array(
  109. 'type' => 'time',
  110. 'label' => __( 'Time', 'vamtam-elements-b' ),
  111. 'default' => array(
  112. 'hours' => '01',
  113. 'minutes' => '00',
  114. 'day_period' => 'am',
  115. ),
  116. ),
  117. 'time_zone' => array(
  118. 'type' => 'timezone',
  119. 'label' => __( 'Time Zone', 'vamtam-elements-b' ),
  120. 'default' => 'UTC',
  121. ),
  122. ),
  123. ),
  124. ),
  125. ),
  126. 'style' => array( // Tab
  127. 'title' => __( 'Style', 'vamtam-elements-b' ), // Tab title
  128. 'sections' => array( // Tab Sections
  129. 'general' => array(
  130. 'title' => '',
  131. 'fields' => array(
  132. 'layout' => array(
  133. 'type' => 'select',
  134. 'label' => __( 'Layout', 'vamtam-elements-b' ),
  135. 'default' => 'default',
  136. 'options' => array(
  137. 'default' => __( 'Numbers', 'vamtam-elements-b' ),
  138. 'circle' => __( 'Numbers + Circles', 'vamtam-elements-b' ),
  139. ),
  140. 'toggle' => array(
  141. 'circle' => array(
  142. 'sections' => array( 'circle_bar_style' ),
  143. 'fields' => array( 'after_number_text' ),
  144. ),
  145. 'default' => array(
  146. 'sections' => array( 'numbers_style', 'separator_style' ),
  147. 'fields' => array( 'horizontal_padding', 'vertical_padding' ),
  148. ),
  149. ),
  150. ),
  151. ),
  152. ),
  153. 'text_style' => array(
  154. 'title' => __( 'Numbers and Text', 'vamtam-elements-b' ),
  155. 'fields' => array(
  156. 'number_color' => array(
  157. 'type' => 'vamtam-color',
  158. 'label' => __( 'Number Color', 'vamtam-elements-b' ),
  159. ),
  160. 'label_color' => array(
  161. 'type' => 'vamtam-color',
  162. 'label' => __( 'Text Color', 'vamtam-elements-b' ),
  163. ),
  164. 'number_size' => array(
  165. 'type' => 'text',
  166. 'label' => __( 'Number Size', 'vamtam-elements-b' ),
  167. 'default' => '24',
  168. 'maxlength' => '3',
  169. 'size' => '4',
  170. 'description' => 'px',
  171. 'preview' => array(
  172. 'type' => 'css',
  173. 'selector' => '.fl-countdown .fl-countdown-unit-number',
  174. 'property' => 'font-size',
  175. 'unit' => 'px',
  176. ),
  177. ),
  178. 'label_size' => array(
  179. 'type' => 'text',
  180. 'label' => __( 'Text Size', 'vamtam-elements-b' ),
  181. 'default' => '13',
  182. 'maxlength' => '3',
  183. 'size' => '4',
  184. 'description' => 'px',
  185. 'preview' => array(
  186. 'type' => 'css',
  187. 'selector' => '.fl-countdown .fl-countdown-unit-label',
  188. 'property' => 'font-size',
  189. 'unit' => 'px',
  190. ),
  191. ),
  192. 'horizontal_padding' => array(
  193. 'type' => 'text',
  194. 'label' => __( 'Horizontal Padding', 'vamtam-elements-b' ),
  195. 'default' => '10',
  196. 'maxlength' => '3',
  197. 'size' => '4',
  198. 'description' => 'px',
  199. 'preview' => array(
  200. 'type' => 'css',
  201. 'rules' => array(
  202. array(
  203. 'selector' => '.fl-countdown .fl-countdown-unit',
  204. 'property' => 'padding-left',
  205. 'unit' => 'px',
  206. ),
  207. array(
  208. 'selector' => '.fl-countdown .fl-countdown-unit',
  209. 'property' => 'padding-right',
  210. 'unit' => 'px',
  211. ),
  212. ),
  213. ),
  214. ),
  215. 'vertical_padding' => array(
  216. 'type' => 'text',
  217. 'label' => __( 'Vertical Padding', 'vamtam-elements-b' ),
  218. 'default' => '10',
  219. 'maxlength' => '3',
  220. 'size' => '4',
  221. 'description' => 'px',
  222. 'preview' => array(
  223. 'type' => 'css',
  224. 'rules' => array(
  225. array(
  226. 'selector' => '.fl-countdown .fl-countdown-unit',
  227. 'property' => 'padding-top',
  228. 'unit' => 'px',
  229. ),
  230. array(
  231. 'selector' => '.fl-countdown .fl-countdown-unit',
  232. 'property' => 'padding-bottom',
  233. 'unit' => 'px',
  234. ),
  235. ),
  236. ),
  237. ),
  238. 'number_spacing' => array(
  239. 'type' => 'text',
  240. 'label' => __( 'Number Spacing', 'vamtam-elements-b' ),
  241. 'default' => '10',
  242. 'maxlength' => '3',
  243. 'size' => '4',
  244. 'description' => 'px',
  245. 'preview' => array(
  246. 'type' => 'css',
  247. 'rules' => array(
  248. array(
  249. 'selector' => '.fl-countdown .fl-countdown-number',
  250. 'property' => 'margin-left',
  251. 'unit' => 'px',
  252. ),
  253. array(
  254. 'selector' => '.fl-countdown .fl-countdown-number',
  255. 'property' => 'margin-right',
  256. 'unit' => 'px',
  257. ),
  258. ),
  259. ),
  260. ),
  261. ),
  262. ),
  263. 'numbers_style' => array(
  264. 'title' => __( 'Backgrounds', 'vamtam-elements-b' ),
  265. 'fields' => array(
  266. 'number_bg_color' => array(
  267. 'type' => 'vamtam-color',
  268. 'label' => __( 'Number Background Color', 'vamtam-elements-b' ),
  269. ),
  270. 'border_radius' => array(
  271. 'type' => 'text',
  272. 'label' => __( 'Number Border Radius', 'vamtam-elements-b' ),
  273. 'default' => '0',
  274. 'maxlength' => '3',
  275. 'size' => '4',
  276. 'description' => 'px',
  277. 'preview' => array(
  278. 'type' => 'css',
  279. 'selector' => '.fl-countdown .fl-countdown-unit',
  280. 'property' => 'border-radius',
  281. 'unit' => 'px',
  282. ),
  283. ),
  284. ),
  285. ),
  286. 'separator_style' => array(
  287. 'title' => __( 'Separator', 'vamtam-elements-b' ),
  288. 'fields' => array(
  289. 'show_separator' => array(
  290. 'type' => 'select',
  291. 'label' => __( 'Show Time Separators', 'vamtam-elements-b' ),
  292. 'default' => 'no',
  293. 'options' => array(
  294. 'no' => __( 'No', 'vamtam-elements-b' ),
  295. 'yes' => __( 'Yes', 'vamtam-elements-b' ),
  296. ),
  297. 'toggle' => array(
  298. 'yes' => array(
  299. 'fields' => array( 'separator_type', 'separator_color' ),
  300. ),
  301. ),
  302. ),
  303. 'separator_type' => array(
  304. 'type' => 'select',
  305. 'label' => __( 'Separator Type', 'vamtam-elements-b' ),
  306. 'default' => 'line',
  307. 'options' => array(
  308. 'colon' => __( 'Colon', 'vamtam-elements-b' ),
  309. 'line' => __( 'Line', 'vamtam-elements-b' ),
  310. ),
  311. 'toggle' => array(
  312. 'colon' => array(
  313. 'fields' => array( 'separator_size' ),
  314. ),
  315. ),
  316. ),
  317. 'separator_color' => array(
  318. 'type' => 'vamtam-color',
  319. 'label' => __( 'Separator Color', 'vamtam-elements-b' ),
  320. ),
  321. 'separator_size' => array(
  322. 'type' => 'text',
  323. 'label' => __( 'Separator Size', 'vamtam-elements-b' ),
  324. 'default' => '15',
  325. 'maxlength' => '3',
  326. 'size' => '4',
  327. 'description' => 'px',
  328. ),
  329. ),
  330. ),
  331. 'circle_bar_style' => array(
  332. 'title' => __( 'Circle Styles', 'vamtam-elements-b' ),
  333. 'fields' => array(
  334. 'circle_width' => array(
  335. 'type' => 'text',
  336. 'label' => __( 'Circle Size', 'vamtam-elements-b' ),
  337. 'default' => '200',
  338. 'maxlength' => '4',
  339. 'size' => '4',
  340. 'description' => 'px',
  341. 'preview' => array(
  342. 'type' => 'css',
  343. 'rules' => array(
  344. array(
  345. 'selector' => '.fl-countdown-number',
  346. 'property' => 'max-width',
  347. 'unit' => 'px',
  348. ),
  349. array(
  350. 'selector' => '.fl-countdown-number',
  351. 'property' => 'max-height',
  352. 'unit' => 'px',
  353. ),
  354. array(
  355. 'selector' => '.fl-countdown-circle-container',
  356. 'property' => 'max-width',
  357. 'unit' => 'px',
  358. ),
  359. array(
  360. 'selector' => '.fl-countdown-circle-container',
  361. 'property' => 'max-height',
  362. 'unit' => 'px',
  363. ),
  364. ),
  365. ),
  366. ),
  367. 'circle_dash_width' => array(
  368. 'type' => 'text',
  369. 'label' => __( 'Circle Stroke Size', 'vamtam-elements-b' ),
  370. 'default' => '10',
  371. 'maxlength' => '2',
  372. 'size' => '4',
  373. 'description' => 'px',
  374. 'preview' => array(
  375. 'type' => 'css',
  376. 'selector' => '.svg circle',
  377. 'property' => 'stroke-width',
  378. 'unit' => 'px',
  379. ),
  380. ),
  381. 'circle_color' => array(
  382. 'type' => 'vamtam-color',
  383. 'label' => __( 'Circle Foreground Color', 'vamtam-elements-b' ),
  384. 'default' => 'accent1',
  385. ),
  386. 'circle_bg_color' => array(
  387. 'type' => 'vamtam-color',
  388. 'label' => __( 'Circle Background Color', 'vamtam-elements-b' ),
  389. 'default' => 'accent7',
  390. ),
  391. ),
  392. ),
  393. ),
  394. ),
  395. ));