diff --git a/README.md b/README.md index 3244222..0ec5423 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Analog Clock ### Objective: -Analog Clock is a Module that Keep tracks of all the routes visited by a User, and provides Block Plugin to display Title, URL and Time each route was visited. +Analog Clock is a Module that Keep tracks of all the routes visited by a User, +and provides Block Plugin to display Title, URL and Time each route was visited. ### Features: This Module will show Proficiency is following areas of Module Development. @@ -15,11 +16,12 @@ This Module will show Proficiency is following areas of Module Development. * Cache Invalidation ### Set Up: -1. To Setup, Like any Drupal 9 module Just Place the Module Files in Module Directory +1. To Setup, Like any Drupal 9 module Just Place the Module Files in Module + Directory 2. Enable the module "Analog Clock" through Extends Admin Tab 3. Once Enabled a block **Analog Clock** would be Available in the Block Layout. -4. Place the Block on the areas you wish you display recently visited places (ex: sidebar, footer) +4. Place the Block on the areas you wish you display recently visited places + (ex: sidebar, footer) 5. You can configure the blocks to show the number of results you wish to see. -6. Additionally the blocks could be configured from Drupal Configuration Page under the User Interface Header. - - +6. Additionally the blocks could be configured from Drupal Configuration Page + under the User Interface Header. diff --git a/adc_block.info.yml b/adc_block.info.yml index 6e76ef7..e85cada 100644 --- a/adc_block.info.yml +++ b/adc_block.info.yml @@ -4,4 +4,4 @@ description: 'Provides the analog and digital clock block' package: Analog Digital Clock core_version_requirement: ^8 || ^9 || ^10 dependencies: - - drupal:block \ No newline at end of file + - drupal:block diff --git a/adc_block.module b/adc_block.module index c7acd6e..1d012fe 100644 --- a/adc_block.module +++ b/adc_block.module @@ -1,6 +1,7 @@ ' . t('Analog-Digital Clock is a simple module that displays analog and digital clock with predefined layout or custom configurations with timezone and custom text.') . '

'; - return $output; - } + switch ($route_name) { + case 'help.page.adc_block': + $output = '

' . t('Analog-Digital Clock is a simple module that displays analog and digital clock with predefined layout or custom configurations with timezone and custom text.') . '

'; + return $output; + } } /** -* Implements hook_theme(). -*/ - + * Implements hook_theme(). + */ function adc_block_theme($existing, $type, $theme, $path) { - return [ - 'analog_clock' => [ - 'variables' => ['data' => NULL, 'content' => NULL], - ], - 'digital_clock' => [ - 'variables' => ['data' => NULL], - ], - ]; -} \ No newline at end of file + return [ + 'analog_clock' => [ + 'variables' => ['data' => NULL, 'content' => NULL], + ], + 'digital_clock' => [ + 'variables' => ['data' => NULL], + ], + ]; +} diff --git a/css/analog.css b/css/analog.css index 0cbc768..72e7a84 100755 --- a/css/analog.css +++ b/css/analog.css @@ -1,11 +1,10 @@ -.adc_block-heading, .adc_block-footer { - text-align: center; - font-size: 20px; - font-weight: 700; - padding: 32px 0; +.adc_block-heading, +.adc_block-footer { + text-align: center; + font-size: 20px; + font-weight: 700; + padding: 32px 0; } .adc_block-clock { - text-align: center; + text-align: center; } -.adc_block-footer { -} \ No newline at end of file diff --git a/css/digital.css b/css/digital.css index 73df488..391a1c3 100644 --- a/css/digital.css +++ b/css/digital.css @@ -1,22 +1,22 @@ -#adc_block-screen{ - display:inline-block; +#adc_block-screen { + display: inline-block; } -#adc_block-timeZone{ - display:inline-block; - margin:auto; - padding: 15px; +#adc_block-timeZone { + display: inline-block; + margin: auto; + padding: 15px; } -#adc_block-timeZone p{ - margin: 10px; - text-align:center; +#adc_block-timeZone p { + margin: 10px; + text-align: center; } -#adc_block-digitaltime{ - font-weight:bold; +#adc_block-digitaltime { + font-weight: bold; } -#adc_block-date{ - font-weight:bold; +#adc_block-date { + font-weight: bold; +} +#adc_block-description { + font-weight: bold; + margin: 10px; } -#adc_block-description{ - font-weight:bold; - margin:10px; -} \ No newline at end of file diff --git a/js/analog.js b/js/analog.js index b63d11f..1f99f1e 100755 --- a/js/analog.js +++ b/js/analog.js @@ -1,303 +1,303 @@ -(function($, Drupal, drupalSettings) { - Drupal.behaviors.analog_behavior = { - attach: function(context, settings) { - (function($) { - function core(id, preset, options) { - var adc_blockcanvas = $(id)[0]; - var ctx = adc_blockcanvas.getContext('2d'); - var adc_blockbound = adc_blockcanvas.height; - var adc_blocksafepad = 0; - if (preset.hasShadow) { - adc_blocksafepad = 4; - } - var adc_blockradius = adc_blockcanvas.height / 2 - adc_blocksafepad; - var adc_blocksecondStep = 2 * Math.PI / 60; - var adc_blockhourStep = 2 * Math.PI / 12; - var adc_blockinitialize = function() { - $(adc_blockcanvas).css('max-width', '100%'); - $(adc_blockcanvas).css('width', $(adc_blockcanvas).css('height')); - adc_blockcanvas.width = adc_blockcanvas.height; - if (preset.hasShadow) { - ctx.shadowOffsetX = 0.0; - ctx.shadowOffsetY = 0.0; - ctx.shadowBlur = preset.shadowBlur; - ctx.shadowColor = preset.shadowColor; - } - draw(); - }; - var adc_blockp2v = function(value) { - return value / 100.0 * adc_blockradius; - }; - var adc_blockdrawMajorLines = function() { - ctx.lineWidth = adc_blockp2v(preset.majorTicksLength); - ctx.strokeStyle = preset.majorTicksColor; - for (var i = 1; i <= 12; i++) { - ctx.beginPath(); - ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockradius - ctx.lineWidth / 1.9, i * adc_blockhourStep - adc_blockp2v(preset.majorTicksWidth) / 2, i * adc_blockhourStep + adc_blockp2v(preset.majorTicksWidth) / 2); - ctx.stroke(); - } - }; - var adc_blockdrawMinorLines = function() { - ctx.lineWidth = adc_blockp2v(preset.minorTicksLength); - ctx.strokeStyle = preset.minorTicksColor; - var secHandLength = 96 * 2; - for (var i = 0; i < 60; i++) { - angle = (i - 3) * (Math.PI * 2) / 60; - ctx.lineWidth = adc_blockp2v(preset.minorTicksWidth); - ctx.beginPath(); - var x1 = (adc_blockcanvas.width / 2) + Math.cos(angle) * (secHandLength); - var y1 = (adc_blockcanvas.height / 2) + Math.sin(angle) * (secHandLength); - var x2 = (adc_blockcanvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30)); - var y2 = (adc_blockcanvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30)); - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - ctx.strokeStyle = ctx.strokeStyle; - ctx.stroke(); - } - }; - var drawBorder = function() { - ctx.strokeStyle = preset.borderColor; - ctx.lineWidth = adc_blockp2v(preset.borderWidth); - ctx.beginPath(); - ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockradius - ctx.lineWidth / 2, 0, 2 * Math.PI); - ctx.stroke(); - }; - var drawFill = function() { - ctx.fillStyle = preset.fillColor; - ctx.lineWidth = adc_blockp2v(preset.borderWidth); - ctx.beginPath(); - ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockradius - ctx.lineWidth, 0.0, 2 * Math.PI); - ctx.fill(); - }; - var drawHandle = function(angle, lengthPercent, widthPercent, color) { - var x = angle - Math.PI / 2; - x = Math.cos(x) * adc_blockp2v(lengthPercent); - var x_1 = angle - Math.PI / 2; - var y = Math.sin(x_1) * adc_blockp2v(lengthPercent); - ctx.lineWidth = adc_blockp2v(widthPercent); - ctx.strokeStyle = color; - ctx.beginPath(); - ctx.moveTo(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad); - ctx.lineTo(adc_blockradius + adc_blocksafepad + x, adc_blockradius + adc_blocksafepad + y); - ctx.stroke(); - }; - var drawTexts = function() { - if (typeof preset.fontWeight === 'undefined') { - var fontWeight = 'normal' - } else { - var fontWeight = preset.fontWeight; - } - for (var i = 1; i <= 12; i++) { - var angle = i * adc_blockhourStep; - var x = angle - Math.PI / 2; - x = Math.cos(x) * adc_blockp2v(80.0); - var x_1 = angle - Math.PI / 2; - var y = Math.sin(x_1) * adc_blockp2v(80.0); - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.font = fontWeight + ' ' + adc_blockp2v(preset.fontSize).toString() + 'px ' + preset.fontName; - ctx.fillStyle = preset.fontColor; - ctx.beginPath(); - ctx.fillText(i.toString(), adc_blockradius + adc_blocksafepad + x, adc_blockradius + adc_blocksafepad + y); - ctx.stroke(); - } - }; - var drawPin = function() { - ctx.fillStyle = preset.pinColor; - ctx.beginPath(); - ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockp2v(preset.pinRadius), 0.0, 2 * Math.PI); - ctx.fill(); - }; - var changeTimezone = function(date, ianatz) { - var invdate = new Date(date.toLocaleString('en-US', { - timeZone: ianatz - })); - var diff = date.getTime() - invdate.getTime(); - return new Date(date.getTime() - diff); - }; - var draw = function() { - ctx.clearRect(0.0, 0.0, adc_blockbound, adc_blockbound); - ctx.lineCap = 'butt'; - if (preset.drawFill) { - drawFill(); - } - if (preset.drawMinorTicks) { - adc_blockdrawMinorLines(); - } - if (preset.drawMajorTicks) { - adc_blockdrawMajorLines(); - } - if (preset.drawBorder) { - drawBorder(); - } - if (preset.drawTexts) { - drawTexts(); - } - var date = new Date(); - if (options.timezone) { - date = changeTimezone(date, options.timezone); - } - var s = date.getSeconds(); - var m = date.getMinutes(); - var h = date.getHours(); - m += s / 60.0; - h += m / 60.0; - ctx.lineCap = 'round'; - drawHandle(h * adc_blockhourStep, preset.hourHandLength, preset.hourHandWidth, preset.hourHandColor); - drawHandle(m * adc_blocksecondStep, preset.minuteHandLength, preset.minuteHandWidth, preset.minuteHandColor); - if (preset.drawSecondHand) { - drawHandle(s * adc_blocksecondStep, preset.secondHandLength, preset.secondHandWidth, preset.secondHandColor); - } - if (preset.drawPin) { - drawPin(); - } - window.requestAnimationFrame(function() { - draw(this); - }); - }; - adc_blockinitialize(); - } - $.fn.htAnalogClock = function(preset, options) { - return this.each(function() { - var _preset = $.extend({}, htAnalogClock.preset_default, preset || {}); - var _options = $.extend({}, $.fn.htAnalogClock.defaultOptions, options || {}); - core(this, _preset, _options); - }); - }; - $.fn.htAnalogClock.defaultOptions = { - timezone: null - }; - }(jQuery)); +(function ($, Drupal, drupalSettings) { + Drupal.behaviors.analog_behavior = { + attach: function (context, settings) { + (function ($) { + function core(id, preset, options) { + var adc_blockcanvas = $(id)[0]; + var ctx = adc_blockcanvas.getContext('2d'); + var adc_blockbound = adc_blockcanvas.height; + var adc_blocksafepad = 0; + if (preset.hasShadow) { + adc_blocksafepad = 4; + } + var adc_blockradius = adc_blockcanvas.height / 2 - adc_blocksafepad; + var adc_blocksecondStep = 2 * Math.PI / 60; + var adc_blockhourStep = 2 * Math.PI / 12; + var adc_blockinitialize = function () { + $(adc_blockcanvas).css('max-width', '100%'); + $(adc_blockcanvas).css('width', $(adc_blockcanvas).css('height')); + adc_blockcanvas.width = adc_blockcanvas.height; + if (preset.hasShadow) { + ctx.shadowOffsetX = 0.0; + ctx.shadowOffsetY = 0.0; + ctx.shadowBlur = preset.shadowBlur; + ctx.shadowColor = preset.shadowColor; + } + draw(); + }; + var adc_blockp2v = function (value) { + return value / 100.0 * adc_blockradius; + }; + var adc_blockdrawMajorLines = function () { + ctx.lineWidth = adc_blockp2v(preset.majorTicksLength); + ctx.strokeStyle = preset.majorTicksColor; + for (var i = 1; i <= 12; i++) { + ctx.beginPath(); + ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockradius - ctx.lineWidth / 1.9, i * adc_blockhourStep - adc_blockp2v(preset.majorTicksWidth) / 2, i * adc_blockhourStep + adc_blockp2v(preset.majorTicksWidth) / 2); + ctx.stroke(); + } + }; + var adc_blockdrawMinorLines = function () { + ctx.lineWidth = adc_blockp2v(preset.minorTicksLength); + ctx.strokeStyle = preset.minorTicksColor; + var secHandLength = 96 * 2; + for (var i = 0; i < 60; i++) { + angle = (i - 3) * (Math.PI * 2) / 60; + ctx.lineWidth = adc_blockp2v(preset.minorTicksWidth); + ctx.beginPath(); + var x1 = (adc_blockcanvas.width / 2) + Math.cos(angle) * (secHandLength); + var y1 = (adc_blockcanvas.height / 2) + Math.sin(angle) * (secHandLength); + var x2 = (adc_blockcanvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30)); + var y2 = (adc_blockcanvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30)); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.strokeStyle = ctx.strokeStyle; + ctx.stroke(); + } + }; + var drawBorder = function () { + ctx.strokeStyle = preset.borderColor; + ctx.lineWidth = adc_blockp2v(preset.borderWidth); + ctx.beginPath(); + ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockradius - ctx.lineWidth / 2, 0, 2 * Math.PI); + ctx.stroke(); + }; + var drawFill = function () { + ctx.fillStyle = preset.fillColor; + ctx.lineWidth = adc_blockp2v(preset.borderWidth); + ctx.beginPath(); + ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockradius - ctx.lineWidth, 0.0, 2 * Math.PI); + ctx.fill(); + }; + var drawHandle = function (angle, lengthPercent, widthPercent, color) { + var x = angle - Math.PI / 2; + x = Math.cos(x) * adc_blockp2v(lengthPercent); + var x_1 = angle - Math.PI / 2; + var y = Math.sin(x_1) * adc_blockp2v(lengthPercent); + ctx.lineWidth = adc_blockp2v(widthPercent); + ctx.strokeStyle = color; + ctx.beginPath(); + ctx.moveTo(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad); + ctx.lineTo(adc_blockradius + adc_blocksafepad + x, adc_blockradius + adc_blocksafepad + y); + ctx.stroke(); + }; + var drawTexts = function () { + if (typeof preset.fontWeight === 'undefined') { + var fontWeight = 'normal' + } else { + var fontWeight = preset.fontWeight; + } + for (var i = 1; i <= 12; i++) { + var angle = i * adc_blockhourStep; + var x = angle - Math.PI / 2; + x = Math.cos(x) * adc_blockp2v(80.0); + var x_1 = angle - Math.PI / 2; + var y = Math.sin(x_1) * adc_blockp2v(80.0); + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.font = fontWeight + ' ' + adc_blockp2v(preset.fontSize).toString() + 'px ' + preset.fontName; + ctx.fillStyle = preset.fontColor; + ctx.beginPath(); + ctx.fillText(i.toString(), adc_blockradius + adc_blocksafepad + x, adc_blockradius + adc_blocksafepad + y); + ctx.stroke(); + } + }; + var drawPin = function () { + ctx.fillStyle = preset.pinColor; + ctx.beginPath(); + ctx.arc(adc_blockradius + adc_blocksafepad, adc_blockradius + adc_blocksafepad, adc_blockp2v(preset.pinRadius), 0.0, 2 * Math.PI); + ctx.fill(); + }; + var changeTimezone = function (date, ianatz) { + var invdate = new Date(date.toLocaleString('en-US', { + timeZone: ianatz + })); + var diff = date.getTime() - invdate.getTime(); + return new Date(date.getTime() - diff); + }; + var draw = function () { + ctx.clearRect(0.0, 0.0, adc_blockbound, adc_blockbound); + ctx.lineCap = 'butt'; + if (preset.drawFill) { + drawFill(); + } + if (preset.drawMinorTicks) { + adc_blockdrawMinorLines(); + } + if (preset.drawMajorTicks) { + adc_blockdrawMajorLines(); + } + if (preset.drawBorder) { + drawBorder(); + } + if (preset.drawTexts) { + drawTexts(); + } + var date = new Date(); + if (options.timezone) { + date = changeTimezone(date, options.timezone); + } + var s = date.getSeconds(); + var m = date.getMinutes(); + var h = date.getHours(); + m += s / 60.0; + h += m / 60.0; + ctx.lineCap = 'round'; + drawHandle(h * adc_blockhourStep, preset.hourHandLength, preset.hourHandWidth, preset.hourHandColor); + drawHandle(m * adc_blocksecondStep, preset.minuteHandLength, preset.minuteHandWidth, preset.minuteHandColor); + if (preset.drawSecondHand) { + drawHandle(s * adc_blocksecondStep, preset.secondHandLength, preset.secondHandWidth, preset.secondHandColor); + } + if (preset.drawPin) { + drawPin(); + } + window.requestAnimationFrame(function () { + draw(this); + }); + }; + adc_blockinitialize(); + } + $.fn.htAnalogClock = function (preset, options) { + return this.each(function () { + var _preset = $.extend({}, htAnalogClock.preset_default, preset || {}); + var _options = $.extend({}, $.fn.htAnalogClock.defaultOptions, options || {}); + core(this, _preset, _options); + }); + }; + $.fn.htAnalogClock.defaultOptions = { + timezone: NULL + }; + }(jQuery)); function htAnalogClock() {} htAnalogClock.preset_default = { - hasShadow: true, - shadowColor: "#000", - shadowBlur: 10, - drawSecondHand: true, - drawMajorTicks: true, - drawMinorTicks: true, - drawBorder: true, - drawFill: true, - drawTexts: true, - drawPin: true, - majorTicksColor: "#f88", - minorTicksColor: "#fa0", - majorTicksLength: 10.0, - minorTicksLength: 7.0, - majorTicksWidth: 0.005, - minorTicksWidth: 0.0025, - fillColor: "#333", - pinColor: "#f88", - pinRadius: 5.0, - borderColor: "#000", - borderWidth: 2.0, - secondHandColor: "#f00", - minuteHandColor: "#fff", - hourHandColor: "#fff", - fontColor: "#fff", - fontName: "Tahoma", - fontSize: 10.0, - fontWeight: 'normal', - secondHandLength: 90.0, - minuteHandLength: 70.0, - hourHandLength: 50.0, - secondHandWidth: 1.0, - minuteHandWidth: 2.0, - hourHandWidth: 3.0 + hasShadow: TRUE, + shadowColor: "#000", + shadowBlur: 10, + drawSecondHand: TRUE, + drawMajorTicks: TRUE, + drawMinorTicks: TRUE, + drawBorder: TRUE, + drawFill: TRUE, + drawTexts: TRUE, + drawPin: TRUE, + majorTicksColor: "#f88", + minorTicksColor: "#fa0", + majorTicksLength: 10.0, + minorTicksLength: 7.0, + majorTicksWidth: 0.005, + minorTicksWidth: 0.0025, + fillColor: "#333", + pinColor: "#f88", + pinRadius: 5.0, + borderColor: "#000", + borderWidth: 2.0, + secondHandColor: "#f00", + minuteHandColor: "#fff", + hourHandColor: "#fff", + fontColor: "#fff", + fontName: "Tahoma", + fontSize: 10.0, + fontWeight: 'normal', + secondHandLength: 90.0, + minuteHandLength: 70.0, + hourHandLength: 50.0, + secondHandWidth: 1.0, + minuteHandWidth: 2.0, + hourHandWidth: 3.0 }; htAnalogClock.preset_gray_fantastic = { - minorTicksLength: 100.0, - minorTicksColor: "rgba(255, 255, 255, 0.2)", - majorTicksLength: 100.0, - majorTicksColor: "rgba(255, 255, 255, 0.6)", - pinColor: "#aaa", - pinRadius: 5.0, - hourHandColor: "#fff", - hourHandWidth: 5.0, - minuteHandColor: "#eee", - minuteHandWidth: 3.0, - secondHandLength: 95.0 + minorTicksLength: 100.0, + minorTicksColor: "rgba(255, 255, 255, 0.2)", + majorTicksLength: 100.0, + majorTicksColor: "rgba(255, 255, 255, 0.6)", + pinColor: "#aaa", + pinRadius: 5.0, + hourHandColor: "#fff", + hourHandWidth: 5.0, + minuteHandColor: "#eee", + minuteHandWidth: 3.0, + secondHandLength: 95.0 }; htAnalogClock.preset_black_bolded = { - drawBorder: false, - majorTicksColor: "rgba(255, 150, 150, 0.8)", - majorTicksWidth: 0.05, - drawMinorTicks: false, - fillColor: "#000" + drawBorder: FALSE, + majorTicksColor: "rgba(255, 150, 150, 0.8)", + majorTicksWidth: 0.05, + drawMinorTicks: FALSE, + fillColor: "#000" }; htAnalogClock.preset_white_nice = { - fillColor: "#fff", - hourHandColor: "#000", - minuteHandColor: "#000", - fontColor: "#333", - majorTicksColor: "#222", - minorTicksColor: "#555" + fillColor: "#fff", + hourHandColor: "#000", + minuteHandColor: "#000", + fontColor: "#333", + majorTicksColor: "#222", + minorTicksColor: "#555" }; htAnalogClock.preset_ocean_blue = { - fillColor: "#4460cb", - hourHandColor: "#fff", - minuteHandColor: "#fff", - fontColor: "#ddd", - majorTicksColor: "#bbb", - minorTicksColor: "#aaa", - fontName: "Sahel FD", - fontSize: 15.0, - secondHandColor: "#f80" + fillColor: "#4460cb", + hourHandColor: "#fff", + minuteHandColor: "#fff", + fontColor: "#ddd", + majorTicksColor: "#bbb", + minorTicksColor: "#aaa", + fontName: "Sahel FD", + fontSize: 15.0, + secondHandColor: "#f80" }; htAnalogClock.preset_nice_bolded = { - secondHandWidth: 5.0, - hourHandWidth: 10.0, - minuteHandWidth: 7.0, - pinRadius: 10.0, - pinColor: "#fff", - fillColor: "#444", - drawTexts: false, - majorTicksWidth: 0.07, - minorTicksWidth: 0.03, - majorTicksLength: 50.0, - minorTicksLength: 25.0, - majorTicksColor: "rgba(255, 150, 0, 0.6)", - minorTicksColor: "rgba(0, 150, 250, 0.5)" + secondHandWidth: 5.0, + hourHandWidth: 10.0, + minuteHandWidth: 7.0, + pinRadius: 10.0, + pinColor: "#fff", + fillColor: "#444", + drawTexts: FALSE, + majorTicksWidth: 0.07, + minorTicksWidth: 0.03, + majorTicksLength: 50.0, + minorTicksLength: 25.0, + majorTicksColor: "rgba(255, 150, 0, 0.6)", + minorTicksColor: "rgba(0, 150, 250, 0.5)" }; htAnalogClock.preset_modern_dark = { - majorTicksLength: 50.0, - minorTicksLength: 50.0, - majorTicksWidth: 0.02, - minorTicksWidth: 0.0075, - fillColor: "#333", - pinColor: "#000", - pinRadius: 90.0, - borderColor: "transparent", - secondHandColor: "#0f0", - minuteHandColor: "#fff", - hourHandColor: "#fff", - secondHandLength: 100.0, - minuteHandLength: 100.0, - hourHandLength: 97.0, - secondHandWidth: 5.0, - minuteHandWidth: 3.0, - hourHandWidth: 10.0 + majorTicksLength: 50.0, + minorTicksLength: 50.0, + majorTicksWidth: 0.02, + minorTicksWidth: 0.0075, + fillColor: "#333", + pinColor: "#000", + pinRadius: 90.0, + borderColor: "transparent", + secondHandColor: "#0f0", + minuteHandColor: "#fff", + hourHandColor: "#fff", + secondHandLength: 100.0, + minuteHandLength: 100.0, + hourHandLength: 97.0, + secondHandWidth: 5.0, + minuteHandWidth: 3.0, + hourHandWidth: 10.0 }; -$(document).ready(function() { - $(function() { - $.fn.loop = function(callback, thisArg) { - var me = this; - return this.each(function(index, element) { - return callback.call(thisArg || element, element, index, me); - }); - }; - $(".adc_block-analog").loop(function(element, index, set) { - if (jQuery(this)[0].hasAttribute('data-config')) { - var config = $(this).attr('data-config'); - var obj = $.parseJSON(config); - $(this).htAnalogClock(obj, { - timezone: obj['timezone'] - }); - } - }); - }); +$(document).ready(function () { + $(function () { + $.fn.loop = function (callback, thisArg) { + var me = this; + return this.each(function (index, element) { + return callback.call(thisArg || element, element, index, me); + }); + }; + $(".adc_block-analog").loop(function (element, index, set) { + if (jQuery(this)[0].hasAttribute('data-config')) { + var config = $(this).attr('data-config'); + var obj = $.parseJSON(config); + $(this).htAnalogClock(obj, { + timezone: obj['timezone'] + }); + } + }); + }); }); } } -}(jQuery, Drupal, drupalSettings)); \ No newline at end of file +}(jQuery, Drupal, drupalSettings)); diff --git a/js/digital.js b/js/digital.js index a643867..937a7ad 100644 --- a/js/digital.js +++ b/js/digital.js @@ -1,39 +1,39 @@ (function ($, Drupal, drupalSettings) { - Drupal.behaviors.digital = { - attach: function (context, settings) { - var changeTimezone = function (date, ianatz) { - var invdate = new Date(date.toLocaleString('en-US', {timeZone: ianatz})); - var diff = date.getTime() - invdate.getTime(); - return new Date(date.getTime() - diff); - }; - setInterval(() => { - $(".adc_block-digitaltime").filter(function() { - let timezone = $(this).attr('data-timezone'); - let time = new Date(); - if(jQuery(this)[0].hasAttribute('data-timezone')) { - let timezone = $(this).attr('data-timezone'); - time = changeTimezone(time, timezone); - } - let hours = time.getHours(); - let minutes = time.getMinutes(); - let seconds = time.getSeconds(); - let amPm = ""; - if (hours > 12) { - hours = hours - 12; - amPm = "PM"; - } else if (hours == 0) { - hours = 12; - amPm = "AM"; - } else { - amPm = "AM"; - } - hours = hours >= 10 ? hours : "0" + hours; - minutes = minutes >= 10 ? minutes : "0" + minutes; - seconds = seconds >= 10 ? seconds : "0" + seconds; - var clock_data = `${hours}:${minutes}:${seconds} ${amPm}`; - $(this).html(clock_data); - }); - }, 1000); - } - } -} (jQuery, Drupal, drupalSettings)); \ No newline at end of file + Drupal.behaviors.digital = { + attach: function (context, settings) { + var changeTimezone = function (date, ianatz) { + var invdate = new Date(date.toLocaleString('en-US', {timeZone: ianatz})); + var diff = date.getTime() - invdate.getTime(); + return new Date(date.getTime() - diff); + }; + setInterval(() => { + $(".adc_block-digitaltime").filter(function () { + let timezone = $(this).attr('data-timezone'); + let time = new Date(); + if(jQuery(this)[0].hasAttribute('data-timezone')) { + let timezone = $(this).attr('data-timezone'); + time = changeTimezone(time, timezone); + } + let hours = time.getHours(); + let minutes = time.getMinutes(); + let seconds = time.getSeconds(); + let amPm = ""; + if (hours > 12) { + hours = hours - 12; + amPm = "PM"; + } else if (hours == 0) { + hours = 12; + amPm = "AM"; + } else { + amPm = "AM"; + } + hours = hours >= 10 ? hours : "0" + hours; + minutes = minutes >= 10 ? minutes : "0" + minutes; + seconds = seconds >= 10 ? seconds : "0" + seconds; + var clock_data = `${hours}:${minutes}:${seconds} ${amPm}`; + $(this).html(clock_data); + }); + }, 1000); + } + } +} (jQuery, Drupal, drupalSettings)); diff --git a/src/Plugin/Block/AnalogClockBlock.php b/src/Plugin/Block/AnalogClockBlock.php index 0b2bced..d8197e5 100644 --- a/src/Plugin/Block/AnalogClockBlock.php +++ b/src/Plugin/Block/AnalogClockBlock.php @@ -4,7 +4,6 @@ namespace Drupal\adc_block\Plugin\Block; use Drupal\Core\Block\BlockBase; use Drupal\Core\Form\FormStateInterface; -use Drupal\Core\Url; /** * Provides a Block to display last visited pages you visited on the website. @@ -16,45 +15,45 @@ use Drupal\Core\Url; */ class AnalogClockBlock extends BlockBase { - /** - * {@inheritdoc} - */ - public function defaultConfiguration() { - $this->configuration['num_places'] = 5; - return ['label_display' => FALSE]; + /** + * {@inheritdoc} + */ + public function defaultConfiguration() { + $this->configuration['num_places'] = 5; + return ['label_display' => FALSE]; } - /** - * {@inheritdoc} - */ - public function build() { - $uid = \Drupal::currentUser()->id(); - - // Grab the number of items to display - $num_items = $this->configuration['num_places'] ?: 5; - $date_format = $this->configuration['date_format'] ??'medium'; - $layout = $this->configuration['layout'] ??''; - - $timezone = $this->configuration['timezone']??''; - $content['heading'] = $this->configuration['heading']??''; - $content['footer'] = $this->configuration['footer']??''; - $layout_data['layout'] = $layout; - - switch ($timezone) { - case 'system_timezone': + /** + * {@inheritdoc} + */ + public function build() { + // $uid = \Drupal::currentUser()->id(); + // Grab the number of items to display. + // $num_items = $this->configuration['num_places'] ?: 5; + // $date_format = $this->configuration['date_format'] ?? 'medium'; + $layout = $this->configuration['layout'] ?? ''; + + $timezone = $this->configuration['timezone'] ?? ''; + $content['heading'] = $this->configuration['heading'] ?? ''; + $content['footer'] = $this->configuration['footer'] ?? ''; + $layout_data['layout'] = $layout; + + switch ($timezone) { + case 'system_timezone': $timezone = date_default_timezone_get(); break; - case 'local_timezone': + + case 'local_timezone': $timezone = ''; break; } $layout_data['timezone'] = $timezone; switch ($layout) { - case 'layout1': + case 'layout1': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; - $layout_data["hasShadow"] = false; + $layout_data["hasShadow"] = FALSE; $layout_data["fillColor"] = "#292a2d"; $layout_data["borderColor"] = "#ffffff"; $layout_data["borderWidth"] = "1.5"; @@ -74,13 +73,13 @@ class AnalogClockBlock extends BlockBase { break; - case 'layout2': - $layout_data["hasShadow"] = true; + case 'layout2': + $layout_data["hasShadow"] = TRUE; $layout_data["shadowColor"] = "#a7a5a5"; $layout_data['majorTicksWidth'] = "0.1"; $layout_data['minorTicksWidth'] = "0.05"; $layout_data['fillColor'] = "rgba(255, 255, 255, 0)"; - $layout_data['borderColor'] ="#fff"; + $layout_data['borderColor'] = "#fff"; $layout_data['borderWidth'] = "3.0"; $layout_data['fontColor'] = "#fff"; $layout_data['fontWeight'] = "bold"; @@ -89,7 +88,7 @@ class AnalogClockBlock extends BlockBase { $layout_data['minorTicksColor'] = "transparent"; $layout_data['hourHandColor'] = "#fff"; $layout_data['minuteHandColor'] = "#fff"; - $layout_data['secondHandColor'] ="#fff"; + $layout_data['secondHandColor'] = "#fff"; $layout_data['secondHandWidth'] = "2.0"; $layout_data['secondHandLength'] = "70.0"; $layout_data['minuteHandLength'] = "60.0"; @@ -97,11 +96,11 @@ class AnalogClockBlock extends BlockBase { break; - case 'layout3': + case 'layout3': $layout_data['majorTicksWidth'] = "0.1"; $layout_data['minorTicksWidth'] = "0.05"; $layout_data['fillColor'] = "#0007e0"; - $layout_data['borderColor'] ="#fff"; + $layout_data['borderColor'] = "#fff"; $layout_data['borderWidth'] = "3.0"; $layout_data['fontColor'] = "#fff"; $layout_data['fontWeight'] = "bold"; @@ -110,18 +109,18 @@ class AnalogClockBlock extends BlockBase { $layout_data['minorTicksColor'] = "transparent"; $layout_data['hourHandColor'] = "#fff"; $layout_data['minuteHandColor'] = "#fff"; - $layout_data['secondHandColor'] ="#fff"; + $layout_data['secondHandColor'] = "#fff"; $layout_data['secondHandWidth'] = "2.0"; $layout_data['secondHandLength'] = "70.0"; $layout_data['minuteHandLength'] = "60.0"; $layout_data['hourHandLength'] = "40.0"; break; - case 'layout4': + case 'layout4': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; $layout_data["shadowColor"] = "#a7a5a5"; - $layout_data["hasShadow"] = true; + $layout_data["hasShadow"] = TRUE; $layout_data["fillColor"] = "#ffffff"; $layout_data["borderColor"] = "#000000"; $layout_data["borderWidth"] = "2.5"; @@ -140,11 +139,11 @@ class AnalogClockBlock extends BlockBase { $layout_data["fontSize"] = "10"; break; - case 'layout5': + case 'layout5': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; $layout_data["shadowColor"] = "#a7a5a5"; - $layout_data["hasShadow"] = true; + $layout_data["hasShadow"] = TRUE; $layout_data["fillColor"] = "#ffffff"; $layout_data["borderColor"] = "#000000"; $layout_data["borderWidth"] = "0.1"; @@ -163,10 +162,10 @@ class AnalogClockBlock extends BlockBase { $layout_data["fontSize"] = "10"; break; - case 'layout6': + case 'layout6': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; - $layout_data["hasShadow"] = false; + $layout_data["hasShadow"] = FALSE; $layout_data["fillColor"] = "#091921"; $layout_data["borderColor"] = "#000000"; $layout_data["borderWidth"] = "0.1"; @@ -185,10 +184,10 @@ class AnalogClockBlock extends BlockBase { $layout_data["fontSize"] = "10"; break; - case 'layout7': + case 'layout7': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; - $layout_data["hasShadow"] = false; + $layout_data["hasShadow"] = FALSE; $layout_data["fillColor"] = "#fcfcfc"; $layout_data["borderColor"] = "#ff0000"; $layout_data["borderWidth"] = "10"; @@ -211,10 +210,10 @@ class AnalogClockBlock extends BlockBase { $layout_data["fontSize"] = "10"; break; - case 'layout8': + case 'layout8': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; - $layout_data["hasShadow"] = false; + $layout_data["hasShadow"] = FALSE; $layout_data["fillColor"] = "#fcfcfc"; $layout_data["borderColor"] = "#6bcaef"; $layout_data["borderWidth"] = "10"; @@ -237,10 +236,11 @@ class AnalogClockBlock extends BlockBase { $layout_data["fontSize"] = "15"; break; - case 'layout9': + + case 'layout9': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; - $layout_data["hasShadow"] = false; + $layout_data["hasShadow"] = FALSE; $layout_data["fillColor"] = "#ffffff"; $layout_data["borderColor"] = "#000000"; $layout_data["borderWidth"] = "0.1"; @@ -263,11 +263,12 @@ class AnalogClockBlock extends BlockBase { $layout_data["fontSize"] = "10"; break; - case 'layout10': + + case 'layout10': $layout_data["majorTicksWidth"] = "0.005"; $layout_data["minorTicksWidth"] = "0.5"; $layout_data["shadowColor"] = "#858585"; - $layout_data["hasShadow"] = true; + $layout_data["hasShadow"] = TRUE; $layout_data["fillColor"] = "#ffffff"; $layout_data["borderColor"] = "#000000"; $layout_data["borderWidth"] = "3"; @@ -291,585 +292,588 @@ class AnalogClockBlock extends BlockBase { break; - case 'custom': - - $layout_data['majorTicksWidth'] = $this->configuration['majorTicksWidth']??''; - $layout_data['minorTicksWidth'] = $this->configuration['minorTicksWidth']??''; - if(isset($this->configuration['hasShadow']) && $this->configuration['hasShadow']) { - $layout_data['shadowColor'] = $this->configuration['shadowColor']??'#000000'; - $layout_data['hasShadow'] = true; - } else { - $layout_data['hasShadow'] = false; - } - if(isset($this->configuration['fillColor_transparent']) && $this->configuration['fillColor_transparent'] == TRUE) { + case 'custom': + + $layout_data['majorTicksWidth'] = $this->configuration['majorTicksWidth'] ?? ''; + $layout_data['minorTicksWidth'] = $this->configuration['minorTicksWidth'] ?? ''; + if (isset($this->configuration['hasShadow']) && $this->configuration['hasShadow']) { + $layout_data['shadowColor'] = $this->configuration['shadowColor'] ?? '#000000'; + $layout_data['hasShadow'] = TRUE; + } + else { + $layout_data['hasShadow'] = FALSE; + } + if (isset($this->configuration['fillColor_transparent']) && $this->configuration['fillColor_transparent'] == TRUE) { $layout_data['fillColor'] = 'transparent'; - } else { - $layout_data['fillColor'] = $this->configuration['fillColor']??''; - } - $layout_data['borderColor'] = $this->configuration['borderColor']??''; - $layout_data['borderWidth'] = $this->configuration['borderWidth']??''; - $layout_data['fontColor'] = $this->configuration['fontColor']??''; - $layout_data['fontWeight'] = $this->configuration['fontWeight']??'normal'; - $layout_data['pinColor'] = $this->configuration['pinColor']??''; - if(isset($this->configuration['minorTicksColor_transparent']) && $this->configuration['minorTicksColor_transparent'] == TRUE) { + } + else { + $layout_data['fillColor'] = $this->configuration['fillColor'] ?? ''; + } + $layout_data['borderColor'] = $this->configuration['borderColor'] ?? ''; + $layout_data['borderWidth'] = $this->configuration['borderWidth'] ?? ''; + $layout_data['fontColor'] = $this->configuration['fontColor'] ?? ''; + $layout_data['fontWeight'] = $this->configuration['fontWeight'] ?? 'normal'; + $layout_data['pinColor'] = $this->configuration['pinColor'] ?? ''; + if (isset($this->configuration['minorTicksColor_transparent']) && $this->configuration['minorTicksColor_transparent'] == TRUE) { $layout_data['majorTicksColor'] = 'transparent'; - } else { - $layout_data['majorTicksColor'] = $this->configuration['majorTicksColor']??''; - } - if(isset($this->configuration['minorTicksColor_transparent']) && $this->configuration['minorTicksColor_transparent'] == TRUE) { + } + else { + $layout_data['majorTicksColor'] = $this->configuration['majorTicksColor'] ?? ''; + } + if (isset($this->configuration['minorTicksColor_transparent']) && $this->configuration['minorTicksColor_transparent'] == TRUE) { $layout_data['minorTicksColor'] = 'transparent'; - } else { - $layout_data['minorTicksColor'] = $this->configuration['minorTicksColor']??''; - } - $layout_data['hourHandColor'] = $this->configuration['hourHandColor']??''; - $layout_data['minuteHandColor'] = $this->configuration['minuteHandColor']??''; - $layout_data['secondHandColor'] = $this->configuration['secondHandColor']??''; - $layout_data['secondHandWidth'] = $this->configuration['secondHandWidth']??''; - $layout_data['minuteHandWidth'] = $this->configuration['minuteHandWidth']??'2.0'; - $layout_data['hourHandWidth'] = $this->configuration['hourHandWidth']??'3.0'; - $layout_data['secondHandLength'] = $this->configuration['secondHandLength']??''; - $layout_data['majorTicksLength'] = $this->configuration['majorTicksLength']??'10.0'; - $layout_data['minorTicksLength'] = $this->configuration['minorTicksLength']??'7.0'; - $layout_data['minuteHandLength'] = $this->configuration['minuteHandLength']??''; - $layout_data['hourHandLength'] = $this->configuration['hourHandLength']??''; - $layout_data['fontSize'] = $this->configuration['fontSize']??''; - - break; + } + else { + $layout_data['minorTicksColor'] = $this->configuration['minorTicksColor'] ?? ''; + } + $layout_data['hourHandColor'] = $this->configuration['hourHandColor'] ?? ''; + $layout_data['minuteHandColor'] = $this->configuration['minuteHandColor'] ?? ''; + $layout_data['secondHandColor'] = $this->configuration['secondHandColor'] ?? ''; + $layout_data['secondHandWidth'] = $this->configuration['secondHandWidth'] ?? ''; + $layout_data['minuteHandWidth'] = $this->configuration['minuteHandWidth'] ?? '2.0'; + $layout_data['hourHandWidth'] = $this->configuration['hourHandWidth'] ?? '3.0'; + $layout_data['secondHandLength'] = $this->configuration['secondHandLength'] ?? ''; + $layout_data['majorTicksLength'] = $this->configuration['majorTicksLength'] ?? '10.0'; + $layout_data['minorTicksLength'] = $this->configuration['minorTicksLength'] ?? '7.0'; + $layout_data['minuteHandLength'] = $this->configuration['minuteHandLength'] ?? ''; + $layout_data['hourHandLength'] = $this->configuration['hourHandLength'] ?? ''; + $layout_data['fontSize'] = $this->configuration['fontSize'] ?? ''; + + break; default: + $layout_data['majorTicksWidth'] = "0.1"; + $layout_data['minorTicksWidth'] = "0.05"; + $layout_data['fillColor'] = "rgba(255, 255, 255, 0)"; + $layout_data['borderColor'] = "#fff"; + $layout_data['borderWidth'] = "3.0"; + $layout_data['fontColor'] = "#fff"; + $layout_data['fontWeight'] = "bold"; + $layout_data['pinColor'] = "#fff"; + $layout_data['majorTicksColor'] = "transparent"; + $layout_data['minorTicksColor'] = "transparent"; + $layout_data['hourHandColor'] = "#fff"; + $layout_data['minuteHandColor'] = "#fff"; + $layout_data['secondHandColor'] = "#fff"; + $layout_data['secondHandWidth'] = "2.0"; + $layout_data['secondHandLength'] = "70.0"; + $layout_data['minuteHandLength'] = "60.0"; + $layout_data['hourHandLength'] = "40.0"; - $layout_data['majorTicksWidth'] = "0.1"; - $layout_data['minorTicksWidth'] = "0.05"; - $layout_data['fillColor'] = "rgba(255, 255, 255, 0)"; - $layout_data['borderColor'] ="#fff"; - $layout_data['borderWidth'] = "3.0"; - $layout_data['fontColor'] = "#fff"; - $layout_data['fontWeight'] = "bold"; - $layout_data['pinColor'] = "#fff"; - $layout_data['majorTicksColor'] = "transparent"; - $layout_data['minorTicksColor'] = "transparent"; - $layout_data['hourHandColor'] = "#fff"; - $layout_data['minuteHandColor'] = "#fff"; - $layout_data['secondHandColor'] ="#fff"; - $layout_data['secondHandWidth'] = "2.0"; - $layout_data['secondHandLength'] = "70.0"; - $layout_data['minuteHandLength'] = "60.0"; - $layout_data['hourHandLength'] = "40.0"; - - break; - } + break; + } - $build = []; - $build['clock'] = [ - '#theme' => 'analog_clock', - '#data' => json_encode($layout_data), - '#content' => $content, -]; -$build['#attached']['drupalSettings']['layout_data'] = $layout_data; -$build['#attached']['library'][] = 'adc_block/adc_block.analog'; -return $build; + $build = []; + $build['clock'] = [ + '#theme' => 'analog_clock', + '#data' => json_encode($layout_data), + '#content' => $content, + ]; + $build['#attached']['drupalSettings']['layout_data'] = $layout_data; + $build['#attached']['library'][] = 'adc_block/adc_block.analog'; + return $build; -} + } - /** - * {@inheritdoc} - */ - public function buildConfigurationForm(array $form, FormStateInterface $form_state) { - $form = parent::buildConfigurationForm($form, $form_state); - $config = $this->getConfiguration(); - $local_timezone = array( - 'system_timezone' => $this->t('System Timezone'), - 'local_timezone' => $this->t('Local Timezone') - ); - $system_time_zones = system_time_zones(NULL, TRUE); - $timezones = $local_timezone + $system_time_zones; - $form['regional_settings'] = [ - '#type' => 'details', - '#title' => $this->t('Regional settings'), - '#open' => TRUE, - '#tree' => TRUE, + /** + * {@inheritdoc} + */ + public function buildConfigurationForm(array $form, FormStateInterface $form_state) { + $form = parent::buildConfigurationForm($form, $form_state); + $config = $this->getConfiguration(); + $local_timezone = [ + 'system_timezone' => $this->t('System Timezone'), + 'local_timezone' => $this->t('Local Timezone'), + ]; + $system_time_zones = system_time_zones(NULL, TRUE); + $timezones = $local_timezone + $system_time_zones; + $form['regional_settings'] = [ + '#type' => 'details', + '#title' => $this->t('Regional settings'), + '#open' => TRUE, + '#tree' => TRUE, ]; $form['regional_settings']['timezone'] = [ - '#type' => 'select', - '#title' => $this->t('Default time zone'), - '#default_value' => $config['timezone']??'', - '#options' => $timezones, - '#attributes' => ['class' => ['timezone-detect']], + '#type' => 'select', + '#title' => $this->t('Default time zone'), + '#default_value' => $config['timezone'] ?? '', + '#options' => $timezones, + '#attributes' => ['class' => ['timezone-detect']], ]; $form['layout_settings'] = [ - '#type' => 'details', - '#title' => $this->t('Layout settings'), - '#open' => TRUE, - '#tree' => TRUE, - ]; - $default_timezone = ''; - $options = array( - 'layout1' => 'Layout 1', - 'layout2' => 'Layout 2', - 'layout3' => 'Layout 3', - 'layout4' => 'Layout 4', - 'layout5' => 'Layout 5', - 'layout6' => 'Layout 6', - 'layout7' => 'Layout 7', - 'layout8' => 'Layout 8', - 'layout9' => 'Layout 9', - 'layout10' => 'Layout 10', - 'custom' => 'Custom Layout', - ); + '#type' => 'details', + '#title' => $this->t('Layout settings'), + '#open' => TRUE, + '#tree' => TRUE, + ]; + // $default_timezone = ''; + $options = [ + 'layout1' => 'Layout 1', + 'layout2' => 'Layout 2', + 'layout3' => 'Layout 3', + 'layout4' => 'Layout 4', + 'layout5' => 'Layout 5', + 'layout6' => 'Layout 6', + 'layout7' => 'Layout 7', + 'layout8' => 'Layout 8', + 'layout9' => 'Layout 9', + 'layout10' => 'Layout 10', + 'custom' => 'Custom Layout', + ]; $form['layout_settings']['layout'] = [ - '#type' => 'select', - '#title' => $this->t('Select Layout'), - '#default_value' => $config['layout']??'', - '#options' => $options, - '#attributes' => ['class' => ['timezone-detect']], + '#type' => 'select', + '#title' => $this->t('Select Layout'), + '#default_value' => $config['layout'] ?? '', + '#options' => $options, + '#attributes' => ['class' => ['timezone-detect']], ]; $form['layout_settings']['majorTicksWidth'] = [ - '#type' => 'number', - '#step' => '.001', - '#min' => '0', - '#max' => '1', - '#title' => $this->t('Major Ticks Width'), - '#default_value' => $config['majorTicksWidth']??'0.005', - '#attributes' => ['class' => ['major-ticks-width']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Major tick width. eg 0.005') + '#type' => 'number', + '#step' => '.001', + '#min' => '0', + '#max' => '1', + '#title' => $this->t('Major Ticks Width'), + '#default_value' => $config['majorTicksWidth'] ?? '0.005', + '#attributes' => ['class' => ['major-ticks-width']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Major tick width. eg 0.005'), ]; $form['layout_settings']['minorTicksWidth'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '0', - '#max' => '0.5', - '#title' => $this->t('Minor Ticks Width'), - '#default_value' => $config['minorTicksWidth']??'0.4', - '#attributes' => ['class' => ['major-ticks-width']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Minor tick width. eg 0.0025') + '#type' => 'number', + '#step' => '.1', + '#min' => '0', + '#max' => '0.5', + '#title' => $this->t('Minor Ticks Width'), + '#default_value' => $config['minorTicksWidth'] ?? '0.4', + '#attributes' => ['class' => ['major-ticks-width']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Minor tick width. eg 0.0025'), ]; $form['layout_settings']['minuteHandWidth'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '1', - '#max' => '5', - '#title' => $this->t('Minute Hand Width'), - '#default_value' => $config['minuteHandWidth']??'2.0', - '#attributes' => ['class' => ['major-ticks-width']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Minute Hand width. eg 2.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '1', + '#max' => '5', + '#title' => $this->t('Minute Hand Width'), + '#default_value' => $config['minuteHandWidth'] ?? '2.0', + '#attributes' => ['class' => ['major-ticks-width']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Minute Hand width. eg 2.0'), ]; $form['layout_settings']['hourHandWidth'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '1', - '#max' => '10', - '#title' => $this->t('Hour Hand Width'), - '#default_value' => $config['hourHandWidth']??'3.0', - '#attributes' => ['class' => ['major-ticks-width']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Hour Hand width. eg 3.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '1', + '#max' => '10', + '#title' => $this->t('Hour Hand Width'), + '#default_value' => $config['hourHandWidth'] ?? '3.0', + '#attributes' => ['class' => ['major-ticks-width']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Hour Hand width. eg 3.0'), ]; $form['layout_settings']['hasShadow'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Clock Has Shadow'), - '#default_value' => $config['hasShadow']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Clock has shadow') + '#type' => 'checkbox', + '#title' => $this->t('Clock Has Shadow'), + '#default_value' => $config['hasShadow'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Clock has shadow'), ]; $form['layout_settings']['shadowColor'] = [ - '#type' => 'color', - '#title' => $this->t('Clock Shadow Color'), - '#default_value' => $config['shadowColor']??'#000000', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][hasShadow]"]' => ['checked' => TRUE], - ) - ), - '#description' => $this->t('Ticks Shadow color. for eg #000000') + '#type' => 'color', + '#title' => $this->t('Clock Shadow Color'), + '#default_value' => $config['shadowColor'] ?? '#000000', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][hasShadow]"]' => ['checked' => TRUE], + ], + ], + '#description' => $this->t('Ticks Shadow color. for eg #000000'), ]; $form['layout_settings']['fillColor_transparent'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Fill transparent'), - '#default_value' => $config['fillColor_transparent']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Background transparent') + '#type' => 'checkbox', + '#title' => $this->t('Fill transparent'), + '#default_value' => $config['fillColor_transparent'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Background transparent'), ]; $form['layout_settings']['fillColor'] = [ - '#type' => 'color', - '#title' => $this->t('Clock Fill Color'), - '#default_value' => $config['fillColor']??'#333333', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][fillColor_transparent]"]' => ['checked' => FALSE] - ) - ), - '#description' => $this->t('Clock Background color') + '#type' => 'color', + '#title' => $this->t('Clock Fill Color'), + '#default_value' => $config['fillColor'] ?? '#333333', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][fillColor_transparent]"]' => ['checked' => FALSE], + ], + ], + '#description' => $this->t('Clock Background color'), ]; $form['layout_settings']['borderColor'] = [ - '#type' => 'color', - '#title' => $this->t('Clock Border Color'), - '#default_value' => $config['borderColor']??'#000000', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Clock Border color') + '#type' => 'color', + '#title' => $this->t('Clock Border Color'), + '#default_value' => $config['borderColor'] ?? '#000000', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Clock Border color'), ]; $form['layout_settings']['borderWidth'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '0.1', - '#max' => '15', - '#title' => $this->t('Clock Border Width'), - '#default_value' => $config['borderWidth']??'2.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Clock Border width. eg 2') + '#type' => 'number', + '#step' => '.1', + '#min' => '0.1', + '#max' => '15', + '#title' => $this->t('Clock Border Width'), + '#default_value' => $config['borderWidth'] ?? '2.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Clock Border width. eg 2'), ]; $form['layout_settings']['fontColor'] = [ - '#type' => 'color', - '#title' => $this->t('Font Color'), - '#default_value' => $config['fontColor']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Clock Hours Font color') + '#type' => 'color', + '#title' => $this->t('Font Color'), + '#default_value' => $config['fontColor'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Clock Hours Font color'), ]; $form['layout_settings']['fontSize'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '10', - '#max' => '35', - '#title' => $this->t('font Size'), - '#default_value' => $config['fontSize']??'10.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Clock Font size. eg 10.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '10', + '#max' => '35', + '#title' => $this->t('font Size'), + '#default_value' => $config['fontSize'] ?? '10.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Clock Font size. eg 10.0'), ]; $form['layout_settings']['fontWeight'] = [ - '#type' => 'select', - '#title' => $this->t('Font Weight'), - '#default_value' => $config['fontWeight']??'normal', - '#options' => array( - 'normal' => $this->t('Normal'), - 'bold' => $this->t('Bold'), - 'bolder' => $this->t('Bolder'), - 'lighter' => $this->t('Lighter'), - '100' => $this->t('100'), - '200' => $this->t('200'), - '300' => $this->t('300'), - '400' => $this->t('400'), - '500' => $this->t('500'), - '600' => $this->t('600'), - '700' => $this->t('700'), - '800' => $this->t('800'), - '900' => $this->t('900'), - ), - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Clock Font size. eg 10.0') + '#type' => 'select', + '#title' => $this->t('Font Weight'), + '#default_value' => $config['fontWeight'] ?? 'normal', + '#options' => [ + 'normal' => $this->t('Normal'), + 'bold' => $this->t('Bold'), + 'bolder' => $this->t('Bolder'), + 'lighter' => $this->t('Lighter'), + '100' => $this->t('100'), + '200' => $this->t('200'), + '300' => $this->t('300'), + '400' => $this->t('400'), + '500' => $this->t('500'), + '600' => $this->t('600'), + '700' => $this->t('700'), + '800' => $this->t('800'), + '900' => $this->t('900'), + ], + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Clock Font size. eg 10.0'), ]; $form['layout_settings']['pinColor'] = [ - '#type' => 'color', - '#title' => $this->t('Pin Color'), - '#default_value' => $config['pinColor']??'#ff8888', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Font color') + '#type' => 'color', + '#title' => $this->t('Pin Color'), + '#default_value' => $config['pinColor'] ?? '#ff8888', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Font color'), ]; $form['layout_settings']['majorTicksColor_transparent'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Major Ticks Color transparent'), - '#default_value' => $config['majorTicksColor_transparent']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Hide Major Ticks') + '#type' => 'checkbox', + '#title' => $this->t('Major Ticks Color transparent'), + '#default_value' => $config['majorTicksColor_transparent'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Hide Major Ticks'), ]; $form['layout_settings']['majorTicksColor'] = [ - '#type' => 'color', - '#title' => $this->t('Major Ticks Color'), - '#default_value' => $config['majorTicksColor']??'#ff8888', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][majorTicksColor_transparent]"]' => ['checked' => FALSE], - ) - ), - '#description' => $this->t('Major ticks color on the circle. For eg ticks on 12, 1, 2, 3 etc') + '#type' => 'color', + '#title' => $this->t('Major Ticks Color'), + '#default_value' => $config['majorTicksColor'] ?? '#ff8888', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][majorTicksColor_transparent]"]' => ['checked' => FALSE], + ], + ], + '#description' => $this->t('Major ticks color on the circle. For eg ticks on 12, 1, 2, 3 etc'), ]; $form['layout_settings']['minorTicksColor_transparent'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Minor Ticks Color Transparent'), - '#default_value' => $config['minorTicksColor_transparent']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Hide Major Ticks') + '#type' => 'checkbox', + '#title' => $this->t('Minor Ticks Color Transparent'), + '#default_value' => $config['minorTicksColor_transparent'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Hide Major Ticks'), ]; $form['layout_settings']['minorTicksColor'] = [ - '#type' => 'color', - '#title' => $this->t('Minor Ticks Color'), - '#default_value' => $config['minorTicksColor']??'#ffaa00', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][minorTicksColor_transparent]"]' => ['checked' => FALSE], - ) - ), - '#description' => $this->t('Minor ticks color on the circle. For eg. ticks between 12-1, 1-2, 2-3 etc') + '#type' => 'color', + '#title' => $this->t('Minor Ticks Color'), + '#default_value' => $config['minorTicksColor'] ?? '#ffaa00', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][minorTicksColor_transparent]"]' => ['checked' => FALSE], + ], + ], + '#description' => $this->t('Minor ticks color on the circle. For eg. ticks between 12-1, 1-2, 2-3 etc'), ]; $form['layout_settings']['hourHandColor'] = [ - '#type' => 'color', - '#title' => $this->t('Hour Hand Color'), - '#default_value' => $config['hourHandColor']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Hour hand color') + '#type' => 'color', + '#title' => $this->t('Hour Hand Color'), + '#default_value' => $config['hourHandColor'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Hour hand color'), ]; $form['layout_settings']['minuteHandColor'] = [ - '#type' => 'color', - '#title' => $this->t('Minute Hand Color'), - '#default_value' => $config['minuteHandColor']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Minute hand color') + '#type' => 'color', + '#title' => $this->t('Minute Hand Color'), + '#default_value' => $config['minuteHandColor'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Minute hand color'), ]; $form['layout_settings']['secondHandColor'] = [ - '#type' => 'color', - '#title' => $this->t('Second Hand Color'), - '#default_value' => $config['secondHandColor']??'#ff0000', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Second hand color') + '#type' => 'color', + '#title' => $this->t('Second Hand Color'), + '#default_value' => $config['secondHandColor'] ?? '#ff0000', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Second hand color'), ]; $form['layout_settings']['secondHandWidth'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '1', - '#max' => '15', - '#title' => $this->t('Second Hand Width'), - '#default_value' => $config['secondHandWidth']??'1.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Second hand width. eg 1.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '1', + '#max' => '15', + '#title' => $this->t('Second Hand Width'), + '#default_value' => $config['secondHandWidth'] ?? '1.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Second hand width. eg 1.0'), ]; $form['layout_settings']['secondHandLength'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '50', - '#max' => '100', - '#title' => $this->t('Second Hand Length'), - '#default_value' => $config['secondHandLength']??'90.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Second hand width. eg 90.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '50', + '#max' => '100', + '#title' => $this->t('Second Hand Length'), + '#default_value' => $config['secondHandLength'] ?? '90.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Second hand width. eg 90.0'), ]; $form['layout_settings']['minuteHandLength'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '50', - '#max' => '100', - '#title' => $this->t('Minute Hand Length'), - '#default_value' => $config['minuteHandLength']??'70.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Minute hand length. eg 70.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '50', + '#max' => '100', + '#title' => $this->t('Minute Hand Length'), + '#default_value' => $config['minuteHandLength'] ?? '70.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Minute hand length. eg 70.0'), ]; $form['layout_settings']['majorTicksLength'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '5', - '#max' => '30', - '#title' => $this->t('Major Ticks Length Length'), - '#default_value' => $config['majorTicksLength']??'10.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Major Ticks Length length. eg 10.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '5', + '#max' => '30', + '#title' => $this->t('Major Ticks Length Length'), + '#default_value' => $config['majorTicksLength'] ?? '10.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Major Ticks Length length. eg 10.0'), ]; $form['layout_settings']['minorTicksLength'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '5', - '#max' => '30', - '#title' => $this->t('Minor Ticks Length Length'), - '#default_value' => $config['minorTicksLength']??'7.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Minor Ticks Length length. eg 7.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '5', + '#max' => '30', + '#title' => $this->t('Minor Ticks Length Length'), + '#default_value' => $config['minorTicksLength'] ?? '7.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Minor Ticks Length length. eg 7.0'), ]; $form['layout_settings']['hourHandLength'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '50', - '#max' => '100', - '#title' => $this->t('Hour Hand Length'), - '#default_value' => $config['hourHandLength']??'50.0', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ), - '#description' => $this->t('Hour hand length. eg 50.0') + '#type' => 'number', + '#step' => '.1', + '#min' => '50', + '#max' => '100', + '#title' => $this->t('Hour Hand Length'), + '#default_value' => $config['hourHandLength'] ?? '50.0', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + '#description' => $this->t('Hour hand length. eg 50.0'), ]; $form['description_settings'] = [ - '#type' => 'details', - '#title' => $this->t('Text Content settings'), - '#open' => TRUE, - '#tree' => TRUE, + '#type' => 'details', + '#title' => $this->t('Text Content settings'), + '#open' => TRUE, + '#tree' => TRUE, ]; $form['description_settings']['heading'] = [ - '#type' => 'textfield', - '#title' => $this->t('Clock Heading'), - '#default_value' => $config['heading']??'', - '#attributes' => ['class' => ['timezone-detect']], + '#type' => 'textfield', + '#title' => $this->t('Clock Heading'), + '#default_value' => $config['heading'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], ]; $form['description_settings']['footer'] = [ - '#type' => 'textfield', - '#title' => $this->t('Clock Footer'), - '#default_value' => $config['footer']??'', - '#attributes' => ['class' => ['timezone-detect']], + '#type' => 'textfield', + '#title' => $this->t('Clock Footer'), + '#default_value' => $config['footer'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], ]; return $form; -} + } - /** - * {@inheritdoc} - */ - public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { - - $this->configuration['timezone'] = $form_state->getValue('regional_settings')['timezone']; - $this->configuration['layout'] = $form_state->getValue('layout_settings')['layout']; - - $this->configuration['majorTicksWidth'] = $form_state->getValue('layout_settings')['majorTicksWidth']; - $this->configuration['minorTicksWidth'] = $form_state->getValue('layout_settings')['minorTicksWidth']; - $this->configuration['minuteHandWidth'] = $form_state->getValue('layout_settings')['minuteHandWidth']; - $this->configuration['hourHandWidth'] = $form_state->getValue('layout_settings')['hourHandWidth']; - $this->configuration['fillColor'] = $form_state->getValue('layout_settings')['fillColor']; - $this->configuration['fillColor_transparent'] = $form_state->getValue('layout_settings')['fillColor_transparent']; - - $this->configuration['hasShadow'] = $form_state->getValue('layout_settings')['hasShadow']; - $this->configuration['shadowColor'] = $form_state->getValue('layout_settings')['shadowColor']; - $this->configuration['borderColor'] = $form_state->getValue('layout_settings')['borderColor']; - $this->configuration['borderWidth'] = $form_state->getValue('layout_settings')['borderWidth']; - $this->configuration['fontColor'] = $form_state->getValue('layout_settings')['fontColor']; - $this->configuration['fontWeight'] = $form_state->getValue('layout_settings')['fontWeight']; - $this->configuration['pinColor'] = $form_state->getValue('layout_settings')['pinColor']; - $this->configuration['majorTicksColor'] = $form_state->getValue('layout_settings')['majorTicksColor']; - $this->configuration['majorTicksColor_transparent'] = $form_state->getValue('layout_settings')['majorTicksColor_transparent']; - $this->configuration['minorTicksColor_transparent'] = $form_state->getValue('layout_settings')['minorTicksColor_transparent']; - $this->configuration['minorTicksColor'] = $form_state->getValue('layout_settings')['minorTicksColor']; - $this->configuration['hourHandColor'] = $form_state->getValue('layout_settings')['hourHandColor']; - $this->configuration['minuteHandColor'] = $form_state->getValue('layout_settings')['minuteHandColor']; - $this->configuration['secondHandColor'] = $form_state->getValue('layout_settings')['secondHandColor']; - $this->configuration['secondHandWidth'] = $form_state->getValue('layout_settings')['secondHandWidth']; - $this->configuration['secondHandLength'] = $form_state->getValue('layout_settings')['secondHandLength']; - $this->configuration['minuteHandLength'] = $form_state->getValue('layout_settings')['minuteHandLength']; - $this->configuration['majorTicksLength'] = $form_state->getValue('layout_settings')['majorTicksLength']; - $this->configuration['minorTicksLength'] = $form_state->getValue('layout_settings')['minorTicksLength']; - $this->configuration['hourHandLength'] = $form_state->getValue('layout_settings')['hourHandLength']; - $this->configuration['fontSize'] = $form_state->getValue('layout_settings')['fontSize']; - $this->configuration['heading'] = $form_state->getValue('description_settings')['heading']; - $this->configuration['footer'] = $form_state->getValue('description_settings')['footer']; + /** + * {@inheritdoc} + */ + public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { + + $this->configuration['timezone'] = $form_state->getValue('regional_settings')['timezone']; + $this->configuration['layout'] = $form_state->getValue('layout_settings')['layout']; + + $this->configuration['majorTicksWidth'] = $form_state->getValue('layout_settings')['majorTicksWidth']; + $this->configuration['minorTicksWidth'] = $form_state->getValue('layout_settings')['minorTicksWidth']; + $this->configuration['minuteHandWidth'] = $form_state->getValue('layout_settings')['minuteHandWidth']; + $this->configuration['hourHandWidth'] = $form_state->getValue('layout_settings')['hourHandWidth']; + $this->configuration['fillColor'] = $form_state->getValue('layout_settings')['fillColor']; + $this->configuration['fillColor_transparent'] = $form_state->getValue('layout_settings')['fillColor_transparent']; + + $this->configuration['hasShadow'] = $form_state->getValue('layout_settings')['hasShadow']; + $this->configuration['shadowColor'] = $form_state->getValue('layout_settings')['shadowColor']; + $this->configuration['borderColor'] = $form_state->getValue('layout_settings')['borderColor']; + $this->configuration['borderWidth'] = $form_state->getValue('layout_settings')['borderWidth']; + $this->configuration['fontColor'] = $form_state->getValue('layout_settings')['fontColor']; + $this->configuration['fontWeight'] = $form_state->getValue('layout_settings')['fontWeight']; + $this->configuration['pinColor'] = $form_state->getValue('layout_settings')['pinColor']; + $this->configuration['majorTicksColor'] = $form_state->getValue('layout_settings')['majorTicksColor']; + $this->configuration['majorTicksColor_transparent'] = $form_state->getValue('layout_settings')['majorTicksColor_transparent']; + $this->configuration['minorTicksColor_transparent'] = $form_state->getValue('layout_settings')['minorTicksColor_transparent']; + $this->configuration['minorTicksColor'] = $form_state->getValue('layout_settings')['minorTicksColor']; + $this->configuration['hourHandColor'] = $form_state->getValue('layout_settings')['hourHandColor']; + $this->configuration['minuteHandColor'] = $form_state->getValue('layout_settings')['minuteHandColor']; + $this->configuration['secondHandColor'] = $form_state->getValue('layout_settings')['secondHandColor']; + $this->configuration['secondHandWidth'] = $form_state->getValue('layout_settings')['secondHandWidth']; + $this->configuration['secondHandLength'] = $form_state->getValue('layout_settings')['secondHandLength']; + $this->configuration['minuteHandLength'] = $form_state->getValue('layout_settings')['minuteHandLength']; + $this->configuration['majorTicksLength'] = $form_state->getValue('layout_settings')['majorTicksLength']; + $this->configuration['minorTicksLength'] = $form_state->getValue('layout_settings')['minorTicksLength']; + $this->configuration['hourHandLength'] = $form_state->getValue('layout_settings')['hourHandLength']; + $this->configuration['fontSize'] = $form_state->getValue('layout_settings')['fontSize']; + $this->configuration['heading'] = $form_state->getValue('description_settings')['heading']; + $this->configuration['footer'] = $form_state->getValue('description_settings')['footer']; } - /** - * {@inheritdoc} - * - * disable block cache to keep it the Analog Clock update. - */ - public function getCacheMaxAge() - { - return 0; + /** + * {@inheritdoc} + * + * Disable block cache to keep it the Analog Clock update. + */ + public function getCacheMaxAge() { + return 0; } + } diff --git a/src/Plugin/Block/DigitalClockBlock.php b/src/Plugin/Block/DigitalClockBlock.php index 88a4079..88c3fd2 100644 --- a/src/Plugin/Block/DigitalClockBlock.php +++ b/src/Plugin/Block/DigitalClockBlock.php @@ -4,7 +4,9 @@ namespace Drupal\adc_block\Plugin\Block; use Drupal\Core\Block\BlockBase; use Drupal\Core\Form\FormStateInterface; -use Drupal\Core\Url; +use Drupal\Core\Datetime\DateFormatterInterface; +use Drupal\Core\Datetime\DrupalDateTime; +use Drupal\Core\Entity\EntityTypeManagerInterface; /** * Provides a Block to display last visited pages you visited on the website. @@ -16,61 +18,119 @@ use Drupal\Core\Url; */ class DigitalClockBlock extends BlockBase { + /** + * The date formatter service. + * + * @var \Drupal\Core\Datetime\DateFormatterInterface + */ + private $dateFormatter; + + /** + * The time service. + * + * @var \Drupal\Core\Datetime\DrupalDateTime + */ + private $dateTime; + + /** + * The entity type manager interface. + * + * @var \Drupal\Core\Entity\EntityTypeManagerInterface + */ + private $entityTypeManager; + + /** + * Constructs a new \Drupal\adc_block\Plugin\Block\DigitalClockBlock object. + * + * @param array $configuration + * A configuration array containing information about the plugin instance. + * @param string $plugin_id + * The plugin_id for the plugin instance. + * @param mixed $plugin_definition + * The plugin implementation definition. + * @param \Drupal\Core\Datetime\DateFormatterInterface $date_formatter + * The date formatter service. + * @param \Drupal\Core\Datetime\DrupalDateTime $dateTime + * The time service. + * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager + * The entity type manager interface. + */ + public function __construct(array $configuration, $plugin_id, $plugin_definition, DateFormatterInterface $date_formatter, DrupalDateTime $dateTime, EntityTypeManagerInterface $entityTypeManager) { + parent::__construct($configuration, $plugin_id, $plugin_definition); + $this->dateFormatter = $date_formatter; + $this->dateTime = $dateTime; + $this->entityTypeManager = $entityTypeManager; + } - /** - * {@inheritdoc} - */ - public function defaultConfiguration() { - $this->configuration['num_places'] = 5; - return ['label_display' => FALSE]; - } + /** + * {@inheritdoc} + */ + public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) { + return new static( + $configuration, + $plugin_id, + $plugin_definition, + $container->get('date.formatter'), + $container->get('datetime.time'), + $container->get('entity_type.manager') + ); + } + + /** + * {@inheritdoc} + */ + public function defaultConfiguration() { + $this->configuration['num_places'] = 5; + return ['label_display' => FALSE]; + } + + /** + * {@inheritdoc} + */ + public function build() { + // $uid = \Drupal::currentUser()->id(); + // Grab the number of items to display. + // $num_items = $this->configuration['num_places'] ?: 5; + $date_format = $this->configuration['date_format'] ?? 'medium'; + + $timezone = $this->configuration['timezone'] ?? ''; + $show_date = $this->configuration['show_date'] ?? FALSE; + $layout = $this->configuration['layout'] ?? ''; + $content['heading'] = $this->configuration['heading'] ?? ''; + $content['footer'] = $this->configuration['footer'] ?? ''; + + $current_date = ''; + + if ($show_date) { + $date_format = $this->configuration['date_format'] ?? 'medium'; + if ($date_format == 'custom') { + $custom_fromat = TRUE; + $date_format = $this->configuration['custom_date_format'] ?? 'medium'; + } + $current_timestamp = time(); - /** - * {@inheritdoc} - */ - public function build() { - $uid = \Drupal::currentUser()->id(); - - // Grab the number of items to display - $num_items = $this->configuration['num_places'] ?: 5; - $date_format = $this->configuration['date_format'] ??'medium'; - - $timezone = $this->configuration['timezone']??''; - $show_date = $this->configuration['show_date']??false; - $layout = $this->configuration['layout']??''; - $content['heading'] = $this->configuration['heading']??''; - $content['footer'] = $this->configuration['footer']??''; - - $current_date = ''; - - if($show_date) { - $date_format = $this->configuration['date_format'] ??'medium'; - if($date_format == 'custom') { - $custom_fromat = true; - $date_format = $this->configuration['custom_date_format'] ??'medium'; - } - $current_timestamp = time(); - - if($custom_fromat) { - $current_date = \Drupal::service('date.formatter')->format($current_timestamp,'custom', $date_format); - } else { - $current_date = \Drupal::service('date.formatter')->format($current_timestamp, $date_format); - } + if ($custom_fromat) { + $current_date = $this->dateFormatter->format($current_timestamp, 'custom', $date_format); + } + else { + $current_date = $this->dateFormatter->format($current_timestamp, $date_format); } + } - switch ($timezone) { - case 'system_timezone': + switch ($timezone) { + case 'system_timezone': $timezone = date_default_timezone_get(); break; - case 'local_timezone': + + case 'local_timezone': $timezone = ''; break; - } + } - $data['timezone'] = $timezone; + $data['timezone'] = $timezone; - switch ($layout) { - case 'layout1': + switch ($layout) { + case 'layout1': $data["current_date"] = ""; $data["layout"] = "custom"; $data["show_date"] = 0; @@ -93,36 +153,36 @@ class DigitalClockBlock extends BlockBase { $data["date_text_shadow_enable"] = 0; break; - case 'custom': + case 'custom': $data['current_date'] = $current_date; - $data['layout'] = $this->configuration['layout']??''; + $data['layout'] = $this->configuration['layout'] ?? ''; $data['show_date'] = $show_date; - $data['layout'] = $this->configuration['layout']??''; - $data['date_format'] = $this->configuration['date_format']??''; - $data['custom_date_format'] = $this->configuration['custom_date_format']??''; - $data['container_backgraound_color'] = $this->configuration['container_backgraound_color']??''; - $data['container_box_shadow_enable'] = $this->configuration['container_box_shadow_enable']??''; - $data['container_box_shadow'] = $this->configuration['container_box_shadow']??'#000'; - $data['time_color'] = $this->configuration['time_color']??''; - $data['date_color'] = $this->configuration['date_color']??''; - $data['description_color'] = $this->configuration['description_color']??''; - $data['time_text_shadow'] = $this->configuration['time_text_shadow']??''; - $data['date_text_shadow'] = $this->configuration['date_text_shadow']??''; - $data['description_text_shadow'] = $this->configuration['description_text_shadow']??''; - $data['time_font_size'] = $this->configuration['time_font_size']??''; - $data['date_font_size'] = $this->configuration['date_font_size']??''; - $data['description_font_size'] = $this->configuration['description_font_size']??''; - $data['description_text'] = $this->configuration['description_text']??''; - $data['time_text_shadow_enable'] = $this->configuration['time_text_shadow_enable']??FALSE; - - $data['date_text_shadow_enable'] = $this->configuration['date_text_shadow_enable']??FALSE; - $data['description_text_shadow_enable'] = $this->configuration['description_text_shadow_enable']??FALSE; + $data['layout'] = $this->configuration['layout'] ?? ''; + $data['date_format'] = $this->configuration['date_format'] ?? ''; + $data['custom_date_format'] = $this->configuration['custom_date_format'] ?? ''; + $data['container_backgraound_color'] = $this->configuration['container_backgraound_color'] ?? ''; + $data['container_box_shadow_enable'] = $this->configuration['container_box_shadow_enable'] ?? ''; + $data['container_box_shadow'] = $this->configuration['container_box_shadow'] ?? '#000'; + $data['time_color'] = $this->configuration['time_color'] ?? ''; + $data['date_color'] = $this->configuration['date_color'] ?? ''; + $data['description_color'] = $this->configuration['description_color'] ?? ''; + $data['time_text_shadow'] = $this->configuration['time_text_shadow'] ?? ''; + $data['date_text_shadow'] = $this->configuration['date_text_shadow'] ?? ''; + $data['description_text_shadow'] = $this->configuration['description_text_shadow'] ?? ''; + $data['time_font_size'] = $this->configuration['time_font_size'] ?? ''; + $data['date_font_size'] = $this->configuration['date_font_size'] ?? ''; + $data['description_font_size'] = $this->configuration['description_font_size'] ?? ''; + $data['description_text'] = $this->configuration['description_text'] ?? ''; + $data['time_text_shadow_enable'] = $this->configuration['time_text_shadow_enable'] ?? FALSE; + + $data['date_text_shadow_enable'] = $this->configuration['date_text_shadow_enable'] ?? FALSE; + $data['description_text_shadow_enable'] = $this->configuration['description_text_shadow_enable'] ?? FALSE; break; - default: + default: $data["current_date"] = ""; $data["layout"] = "custom"; $data["show_date"] = 0; @@ -133,375 +193,374 @@ class DigitalClockBlock extends BlockBase { $data["container_box_shadow"] = "#c4c4c4"; $data["time_color"] = "#000000"; $data["date_color"] = "#fbc1c1"; - $data['description_color'] = $this->configuration['description_color']??''; + $data['description_color'] = $this->configuration['description_color'] ?? ''; $data["time_text_shadow"] = "#00d68f"; - $data['description_text_shadow'] = $this->configuration['description_text_shadow']??''; + $data['description_text_shadow'] = $this->configuration['description_text_shadow'] ?? ''; $data["time_font_size"] = "50"; $data["date_font_size"] = "50"; - $data['date_text_shadow'] = $this->configuration['date_text_shadow']??''; - $data['description_font_size'] = $this->configuration['description_font_size']??''; - $data["description_text"] = $this->configuration['description_text']??''; - $data['time_text_shadow_enable'] = false; + $data['date_text_shadow'] = $this->configuration['date_text_shadow'] ?? ''; + $data['description_font_size'] = $this->configuration['description_font_size'] ?? ''; + $data["description_text"] = $this->configuration['description_text'] ?? ''; + $data['time_text_shadow_enable'] = FALSE; $data["date_text_shadow_enable"] = 0; - $data['description_text_shadow_enable'] = $this->configuration['description_text_shadow_enable']??FALSE; + $data['description_text_shadow_enable'] = $this->configuration['description_text_shadow_enable'] ?? FALSE; break; - } - - return array( - '#theme' => 'digital_clock', - '#data' => $data, - '#attached' => array( - 'library' => array( - 'adc_block/adc_block.digital', - ), - 'drupalSettings' => array( - 'config_data' => array() - ), - ), - ); - } - /** - * {@inheritdoc} - */ - public function buildConfigurationForm(array $form, FormStateInterface $form_state) { - $form = parent::buildConfigurationForm($form, $form_state); - $config = $this->getConfiguration(); - - $local_timezone = array( - 'system_timezone' => $this->t('System Timezone') - ); - $system_time_zones = system_time_zones(NULL, TRUE); - $timezones = $local_timezone + $system_time_zones; - - $form['regional_settings'] = [ - '#type' => 'details', - '#title' => $this->t('Regional settings'), - '#open' => TRUE, - '#tree' => TRUE, - ]; - $default_timezone = ''; - $form['regional_settings']['timezone'] = [ - '#type' => 'select', - '#title' => $this->t('Default time zone'), - '#default_value' => $config['timezone']??'', - '#options' => $timezones, - '#attributes' => ['class' => ['timezone-detect']], - ]; - $form['layout_settings'] = [ - '#type' => 'details', - '#title' => $this->t('Layout settings'), - '#open' => TRUE, - '#tree' => TRUE, - ]; - $default_timezone = ''; - $options = array( - 'layout1' => 'Layout 1', - 'custom' => 'Custom Layout', - ); - $form['layout_settings']['layout'] = [ - '#type' => 'select', - '#title' => $this->t('Select Layout'), - '#default_value' => $config['layout']??'', - '#options' => $options, - '#attributes' => ['class' => ['timezone-detect']], - ]; - - $form['layout_settings']['show_date'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Show Date'), - '#default_value' => $config['show_date']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - - $date_formats = []; - - $formats = \Drupal::entityTypeManager() - ->getStorage('date_format') - ->loadMultiple(); - - foreach ($formats as $machine_name => $value) { - $date_formats[$machine_name] = $this->t('@name format: @date', ['@name' => $value->label(), '@date' => \Drupal::service('date.formatter')->format(\Drupal::time()->getRequestTime(), $machine_name)]); - } + return [ + '#theme' => 'digital_clock', + '#data' => $data, + '#attached' => [ + 'library' => [ + 'adc_block/adc_block.digital', + ], + 'drupalSettings' => [ + 'config_data' => [], + ], + ], + ]; + + } - $date_formats['custom'] = $this->t('Custom'); - - $form['layout_settings']['date_format'] = [ - '#type' => 'select', - '#title' => $this->t('Date format'), - '#options' => $date_formats, - '#default_value' => $this->configuration['date_format']??'medium', - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][show_date]"]' => ['checked' => TRUE] - ) - ) - ]; - - $form['layout_settings']['custom_date_format'] = [ - '#type' => 'textfield', - '#title' => $this->t('Custom date format'), - '#description' => $this->t('See the documentation for PHP date formats.'), - '#default_value' => $this->configuration['custom_date_format']??'' - ]; - - $form['layout_settings']['custom_date_format']['#states']['visible'][] = [ - ':input[name="settings[layout_settings][date_format]"]' => ['value' => 'custom'], - ]; - - $form['layout_settings']['container_backgraound_color'] = [ - '#type' => 'color', - '#title' => $this->t('Container Backgraound Color'), - '#default_value' => $config['container_backgraound_color']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - $form['layout_settings']['container_box_shadow_enable'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Enable Container Box Shadow'), - '#default_value' => $config['container_box_shadow_enable']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - - $form['layout_settings']['container_box_shadow'] = [ - '#type' => 'color', - '#title' => $this->t('Container box shadow color'), - '#default_value' => $config['container_box_shadow']??'#000000', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][container_box_shadow_enable]"]' => ['checked' => TRUE], - ) - ), - '#description' => $this->t('Container box shadow color') - ]; - - $form['layout_settings']['time_color'] = [ - '#type' => 'color', - '#title' => $this->t('Time Color'), - '#default_value' => $config['time_color']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - $form['layout_settings']['date_color'] = [ - '#type' => 'color', - '#title' => $this->t('Date Color'), - '#default_value' => $config['date_color']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - - - $form['layout_settings']['time_text_shadow_enable'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Enable Time Shadow'), - '#default_value' => $config['time_text_shadow_enable']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - $form['layout_settings']['time_text_shadow'] = [ - '#type' => 'color', - '#title' => $this->t('Time Text Shadow'), - '#default_value' => $config['time_text_shadow']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][time_text_shadow_enable]"]' => ['checked' => TRUE], - ) - ) - ]; - - $form['layout_settings']['date_text_shadow_enable'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Enable Text Shadow'), - '#default_value' => $config['date_text_shadow_enable']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - $form['layout_settings']['date_text_shadow'] = [ - '#type' => 'color', - '#title' => $this->t('Date Text Shadow'), - '#default_value' => $config['date_text_shadow']??'#ffffff', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], - ':input[name="settings[layout_settings][date_text_shadow_enable]"]' => ['checked' => TRUE], - ) - ) - ]; - - $form['layout_settings']['time_font_size'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '1', - '#max' => '100', - '#title' => $this->t('Time Font Size'), - '#default_value' => $config['time_font_size']??'24', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - $form['layout_settings']['date_font_size'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '1', - '#max' => '100', - '#title' => $this->t('Date Font Size'), - '#default_value' => $config['date_font_size']??'26', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - - $form['description_settings'] = [ - '#type' => 'details', - '#title' => $this->t('Description settings'), - '#open' => TRUE, - '#tree' => TRUE, - ]; - - $form['description_settings']['description_text'] = [ - '#type' => 'textfield', - '#title' => $this->t('Description Text'), - '#default_value' => $config['description_text']??'', - '#attributes' => ['class' => ['timezone-detect']], - ]; - - $form['description_settings']['description_font_size'] = [ - '#type' => 'number', - '#step' => '.1', - '#min' => '1', - '#max' => '100', - '#title' => $this->t('Description Font Size'), - '#default_value' => $config['description_font_size']??'25', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[description_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - - $form['description_settings']['description_text_shadow_enable'] = [ - '#type' => 'checkbox', - '#title' => $this->t('Enable Description Text Shadow'), - '#default_value' => $config['description_text_shadow_enable']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[description_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - $form['description_settings']['description_text_shadow'] = [ - '#type' => 'color', - '#title' => $this->t('Description Text Shadow'), - '#default_value' => $config['description_text_shadow']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[description_settings][description_text_shadow_enable]"]' => ['checked' => TRUE], - ) - ) - ]; - - $form['description_settings']['description_color'] = [ - '#type' => 'color', - '#title' => $this->t('Description Color'), - '#default_value' => $config['description_color']??'', - '#attributes' => ['class' => ['timezone-detect']], - '#states' => array( - 'visible' => array( - ':input[name="settings[description_settings][layout]"]' => ['value' => 'custom'] - ) - ) - ]; - - return $form; + /** + * {@inheritdoc} + */ + public function buildConfigurationForm(array $form, FormStateInterface $form_state) { + $form = parent::buildConfigurationForm($form, $form_state); + $config = $this->getConfiguration(); + + $local_timezone = [ + 'system_timezone' => $this->t('System Timezone'), + ]; + $system_time_zones = system_time_zones(NULL, TRUE); + $timezones = $local_timezone + $system_time_zones; + + $form['regional_settings'] = [ + '#type' => 'details', + '#title' => $this->t('Regional settings'), + '#open' => TRUE, + '#tree' => TRUE, + ]; + // $default_timezone = ''; + $form['regional_settings']['timezone'] = [ + '#type' => 'select', + '#title' => $this->t('Default time zone'), + '#default_value' => $config['timezone'] ?? '', + '#options' => $timezones, + '#attributes' => ['class' => ['timezone-detect']], + ]; + $form['layout_settings'] = [ + '#type' => 'details', + '#title' => $this->t('Layout settings'), + '#open' => TRUE, + '#tree' => TRUE, + ]; + // $default_timezone = ''; + $options = [ + 'layout1' => 'Layout 1', + 'custom' => 'Custom Layout', + ]; + $form['layout_settings']['layout'] = [ + '#type' => 'select', + '#title' => $this->t('Select Layout'), + '#default_value' => $config['layout'] ?? '', + '#options' => $options, + '#attributes' => ['class' => ['timezone-detect']], + ]; + + $form['layout_settings']['show_date'] = [ + '#type' => 'checkbox', + '#title' => $this->t('Show Date'), + '#default_value' => $config['show_date'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + + $date_formats = []; + + $formats = $this->entityTypeManager->getStorage('date_format')->loadMultiple(); + + foreach ($formats as $machine_name => $value) { + $date_formats[$machine_name] = $this->t('@name format: @date', [ + '@name' => $value->label(), + '@date' => $this->dateFormatter->format($this->dateTime->getRequestTime(), $machine_name), + ]); } - /** - * {@inheritdoc} - */ - public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { - - $this->configuration['timezone'] = $form_state->getValue('regional_settings')['timezone']; - $this->configuration['layout'] = $form_state->getValue('layout_settings')['layout']; - - $this->configuration['majorTicksWidth'] = $form_state->getValue('layout_settings')['majorTicksWidth']; - - - $this->configuration['show_date'] = $form_state->getValue('layout_settings')['show_date']; - $this->configuration['layout'] = $form_state->getValue('layout_settings')['layout']; - $this->configuration['date_format'] = $form_state->getValue('layout_settings')['date_format']; - $this->configuration['custom_date_format'] = $form_state->getValue('layout_settings')['custom_date_format']; - $this->configuration['container_backgraound_color'] = $form_state->getValue('layout_settings')['container_backgraound_color']; - $this->configuration['container_box_shadow_enable'] = $form_state->getValue('layout_settings')['container_box_shadow_enable']; - $this->configuration['container_box_shadow'] = $form_state->getValue('layout_settings')['container_box_shadow']; - $this->configuration['time_color'] = $form_state->getValue('layout_settings')['time_color']; - $this->configuration['date_color'] = $form_state->getValue('layout_settings')['date_color']; - $this->configuration['description_color'] = $form_state->getValue('description_settings')['description_color']; - $this->configuration['time_text_shadow'] = $form_state->getValue('layout_settings')['time_text_shadow']; - $this->configuration['date_text_shadow'] = $form_state->getValue('layout_settings')['date_text_shadow']; - $this->configuration['description_text_shadow'] = $form_state->getValue('description_settings')['description_text_shadow']; - $this->configuration['time_text_shadow_enable'] = $form_state->getValue('layout_settings')['time_text_shadow_enable']; - $this->configuration['date_text_shadow_enable'] = $form_state->getValue('layout_settings')['date_text_shadow_enable']; - $this->configuration['description_text_shadow_enable'] = $form_state->getValue('description_settings')['description_text_shadow_enable']; - $this->configuration['time_font_size'] = $form_state->getValue('layout_settings')['time_font_size']; - $this->configuration['date_font_size'] = $form_state->getValue('layout_settings')['date_font_size']; - $this->configuration['description_font_size'] = $form_state->getValue('description_settings')['description_font_size']; - $this->configuration['description_text'] = $form_state->getValue('description_settings')['description_text']; + $date_formats['custom'] = $this->t('Custom'); + + $form['layout_settings']['date_format'] = [ + '#type' => 'select', + '#title' => $this->t('Date format'), + '#options' => $date_formats, + '#default_value' => $this->configuration['date_format'] ?? 'medium', + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][show_date]"]' => ['checked' => TRUE], + ], + ], + ]; + + $form['layout_settings']['custom_date_format'] = [ + '#type' => 'textfield', + '#title' => $this->t('Custom date format'), + '#description' => $this->t('See the documentation for PHP date formats.'), + '#default_value' => $this->configuration['custom_date_format'] ?? '', + ]; + + $form['layout_settings']['custom_date_format']['#states']['visible'][] = [ + ':input[name="settings[layout_settings][date_format]"]' => ['value' => 'custom'], + ]; + + $form['layout_settings']['container_backgraound_color'] = [ + '#type' => 'color', + '#title' => $this->t('Container Backgraound Color'), + '#default_value' => $config['container_backgraound_color'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + $form['layout_settings']['container_box_shadow_enable'] = [ + '#type' => 'checkbox', + '#title' => $this->t('Enable Container Box Shadow'), + '#default_value' => $config['container_box_shadow_enable'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + + $form['layout_settings']['container_box_shadow'] = [ + '#type' => 'color', + '#title' => $this->t('Container box shadow color'), + '#default_value' => $config['container_box_shadow'] ?? '#000000', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][container_box_shadow_enable]"]' => ['checked' => TRUE], + ], + ], + '#description' => $this->t('Container box shadow color'), + ]; + + $form['layout_settings']['time_color'] = [ + '#type' => 'color', + '#title' => $this->t('Time Color'), + '#default_value' => $config['time_color'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + $form['layout_settings']['date_color'] = [ + '#type' => 'color', + '#title' => $this->t('Date Color'), + '#default_value' => $config['date_color'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + + $form['layout_settings']['time_text_shadow_enable'] = [ + '#type' => 'checkbox', + '#title' => $this->t('Enable Time Shadow'), + '#default_value' => $config['time_text_shadow_enable'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + $form['layout_settings']['time_text_shadow'] = [ + '#type' => 'color', + '#title' => $this->t('Time Text Shadow'), + '#default_value' => $config['time_text_shadow'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][time_text_shadow_enable]"]' => ['checked' => TRUE], + ], + ], + ]; + + $form['layout_settings']['date_text_shadow_enable'] = [ + '#type' => 'checkbox', + '#title' => $this->t('Enable Text Shadow'), + '#default_value' => $config['date_text_shadow_enable'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + $form['layout_settings']['date_text_shadow'] = [ + '#type' => 'color', + '#title' => $this->t('Date Text Shadow'), + '#default_value' => $config['date_text_shadow'] ?? '#ffffff', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ':input[name="settings[layout_settings][date_text_shadow_enable]"]' => ['checked' => TRUE], + ], + ], + ]; + + $form['layout_settings']['time_font_size'] = [ + '#type' => 'number', + '#step' => '.1', + '#min' => '1', + '#max' => '100', + '#title' => $this->t('Time Font Size'), + '#default_value' => $config['time_font_size'] ?? '24', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + $form['layout_settings']['date_font_size'] = [ + '#type' => 'number', + '#step' => '.1', + '#min' => '1', + '#max' => '100', + '#title' => $this->t('Date Font Size'), + '#default_value' => $config['date_font_size'] ?? '26', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[layout_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + + $form['description_settings'] = [ + '#type' => 'details', + '#title' => $this->t('Description settings'), + '#open' => TRUE, + '#tree' => TRUE, + ]; + + $form['description_settings']['description_text'] = [ + '#type' => 'textfield', + '#title' => $this->t('Description Text'), + '#default_value' => $config['description_text'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + ]; + + $form['description_settings']['description_font_size'] = [ + '#type' => 'number', + '#step' => '.1', + '#min' => '1', + '#max' => '100', + '#title' => $this->t('Description Font Size'), + '#default_value' => $config['description_font_size'] ?? '25', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[description_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + + $form['description_settings']['description_text_shadow_enable'] = [ + '#type' => 'checkbox', + '#title' => $this->t('Enable Description Text Shadow'), + '#default_value' => $config['description_text_shadow_enable'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[description_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + $form['description_settings']['description_text_shadow'] = [ + '#type' => 'color', + '#title' => $this->t('Description Text Shadow'), + '#default_value' => $config['description_text_shadow'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[description_settings][description_text_shadow_enable]"]' => ['checked' => TRUE], + ], + ], + ]; + + $form['description_settings']['description_color'] = [ + '#type' => 'color', + '#title' => $this->t('Description Color'), + '#default_value' => $config['description_color'] ?? '', + '#attributes' => ['class' => ['timezone-detect']], + '#states' => [ + 'visible' => [ + ':input[name="settings[description_settings][layout]"]' => ['value' => 'custom'], + ], + ], + ]; + + return $form; + } - } + /** + * {@inheritdoc} + */ + public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { + + $this->configuration['timezone'] = $form_state->getValue('regional_settings')['timezone']; + $this->configuration['layout'] = $form_state->getValue('layout_settings')['layout']; + + $this->configuration['majorTicksWidth'] = $form_state->getValue('layout_settings')['majorTicksWidth']; + + $this->configuration['show_date'] = $form_state->getValue('layout_settings')['show_date']; + $this->configuration['layout'] = $form_state->getValue('layout_settings')['layout']; + $this->configuration['date_format'] = $form_state->getValue('layout_settings')['date_format']; + $this->configuration['custom_date_format'] = $form_state->getValue('layout_settings')['custom_date_format']; + $this->configuration['container_backgraound_color'] = $form_state->getValue('layout_settings')['container_backgraound_color']; + $this->configuration['container_box_shadow_enable'] = $form_state->getValue('layout_settings')['container_box_shadow_enable']; + $this->configuration['container_box_shadow'] = $form_state->getValue('layout_settings')['container_box_shadow']; + $this->configuration['time_color'] = $form_state->getValue('layout_settings')['time_color']; + $this->configuration['date_color'] = $form_state->getValue('layout_settings')['date_color']; + $this->configuration['description_color'] = $form_state->getValue('description_settings')['description_color']; + $this->configuration['time_text_shadow'] = $form_state->getValue('layout_settings')['time_text_shadow']; + $this->configuration['date_text_shadow'] = $form_state->getValue('layout_settings')['date_text_shadow']; + $this->configuration['description_text_shadow'] = $form_state->getValue('description_settings')['description_text_shadow']; + $this->configuration['time_text_shadow_enable'] = $form_state->getValue('layout_settings')['time_text_shadow_enable']; + $this->configuration['date_text_shadow_enable'] = $form_state->getValue('layout_settings')['date_text_shadow_enable']; + $this->configuration['description_text_shadow_enable'] = $form_state->getValue('description_settings')['description_text_shadow_enable']; + $this->configuration['time_font_size'] = $form_state->getValue('layout_settings')['time_font_size']; + $this->configuration['date_font_size'] = $form_state->getValue('layout_settings')['date_font_size']; + $this->configuration['description_font_size'] = $form_state->getValue('description_settings')['description_font_size']; + $this->configuration['description_text'] = $form_state->getValue('description_settings')['description_text']; - /** - * {@inheritdoc} - * - * disable block cache to keep it the Analog Clock update. - */ - public function getCacheMaxAge() - { - return 0; - } } + + /** + * {@inheritdoc} + * + * Disable block cache to keep it the Analog Clock update. + */ + public function getCacheMaxAge() { + return 0; + } + +} diff --git a/templates/analog-clock.html.twig b/templates/analog-clock.html.twig index 195418d..a28e721 100755 --- a/templates/analog-clock.html.twig +++ b/templates/analog-clock.html.twig @@ -25,5 +25,3 @@
{{ content.footer|raw }}
{% endif %} - - diff --git a/templates/digital-clock.html.twig b/templates/digital-clock.html.twig index 67feb94..5e3080b 100644 --- a/templates/digital-clock.html.twig +++ b/templates/digital-clock.html.twig @@ -46,4 +46,4 @@

{{ data.description_text|raw }}

{% endif %} - \ No newline at end of file +