summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorrobin.ingelbrecht2017-06-11 16:57:51 +0200
committerrobin.ingelbrecht2017-06-11 16:57:51 +0200
commitb6a53835499388dea49b55bd4dc7c65e406192ef (patch)
tree2d87ea36cab793d3a5c145c2ce151ee4b522871c
Init commit
-rw-r--r--README.md46
-rw-r--r--flipclock.info.yml8
-rw-r--r--flipclock.install29
-rw-r--r--flipclock.libraries.yml20
-rw-r--r--flipclock.module28
-rw-r--r--js/flipclock.load.js17
-rw-r--r--src/Plugin/Block/FlipClockBlock.php127
-rw-r--r--templates/flipclock.html.twig1
8 files changed, 276 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9b1022f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,46 @@
+The FlipClock.js module integrates the FlipClock.js plugin with Drupal.
+FlipClock.js is an extendible API to create any kind of clock or counter. It can be used as a
+
+* Clock
+* Timer
+* Countdown
+
+This module exposes a new FlipClock.js block type and
+exposes a new formatter that can be uqsed on date fields
+
+## Installation
+
+### Using Composer
+
+ * Edit your project's `composer.json` file and add to the repositories section:
+ ```
+ "objectivehtml/FlipClock": {
+ "type": "package",
+ "package": {
+ "name": "objectivehtml/FlipClock",
+ "type": "drupal-library",
+ "version": "0.7.7",
+ "dist": {
+ "url": "https://github.com/objectivehtml/FlipClock/archive/0.7.7.zip",
+ "type": "zip"
+ }
+ }
+ }
+ ```
+ * Execute `composer require drupal/flipclock`.
+
+### Manually
+
+ * Download the [FlipClock.js library](https://github.com/objectivehtml/FlipClock)
+ and place the resulting directory into the libraries directory. Ensure
+ `/libraries/flipclock/compiled/flipclock.min.js` exists.
+ * Download theFlipClock.js module and follow the instruction for
+ [installing contributed modules](https://www.drupal.org/docs/8/extending-drupal-8/installing-contributed-modules-find-import-enable-configure-drupal-8).
+
+## Usage
+
+### Blocks
+
+* Navigate to `admin/structure/block`
+* Click `place block`
+* Add a new instance of the block "Clock" and configure it. \ No newline at end of file
diff --git a/flipclock.info.yml b/flipclock.info.yml
new file mode 100644
index 0000000..689922b
--- /dev/null
+++ b/flipclock.info.yml
@@ -0,0 +1,8 @@
+name: FlipClock.js
+description: Integrates the FlipClock.js plugin with Drupal.
+package: Other
+type: module
+core: 8.x
+
+dependencies:
+ - block
diff --git a/flipclock.install b/flipclock.install
new file mode 100644
index 0000000..6f6ef92
--- /dev/null
+++ b/flipclock.install
@@ -0,0 +1,29 @@
+<?php
+
+/**
+ * Implements hook_requirements().
+ */
+function flipclock_requirements($phase) {
+ $requirements = [];
+
+ if ($phase == 'runtime') {
+ $requirements['flipclock']['title'] = 'FlipClock.js';
+ $requirements['flipclock']['value'] = t('Installed');
+
+ if (file_exists(DRUPAL_ROOT . '/libraries/flipclock/compiled/flipclock.min.js')) {
+ $requirements['flipclock']['severity'] = REQUIREMENT_OK;
+ }
+ else {
+ // Required library wasn't found.
+ $requirements['flipclock']['value'] = t('Not found');
+
+ // Provide a download link to the lightgallery jQuery plugin.
+ $requirements['flipclock']['description'] = t('The <a href="@flipclock" target="_blank">FlipClock.js</a> jQuery plugin is missing. Make sure /libraries/flipclock/compiled/flipclock.min.js exists', [
+ '@flipclock' => 'http://flipclockjs.com/',
+ ]);
+ $requirements['flipclock']['severity'] = REQUIREMENT_ERROR;
+ }
+ }
+
+ return $requirements;
+} \ No newline at end of file
diff --git a/flipclock.libraries.yml b/flipclock.libraries.yml
new file mode 100644
index 0000000..66cfd1f
--- /dev/null
+++ b/flipclock.libraries.yml
@@ -0,0 +1,20 @@
+flipclock:
+ title: 'FlipClock'
+ remote: 'http://flipclockjs.com/'
+ license:
+ name: 'MIT LICENSE'
+ url: 'https://github.com/objectivehtml/FlipClock/blob/master/README.md'
+ gpl-compatible: false
+ js:
+ /libraries/flipclock/compiled/flipclock.min.js: {}
+ css:
+ theme:
+ /libraries/flipclock/compiled/flipclock.css: {}
+ dependencies:
+ - core/jquery
+flipclock.load:
+ js:
+ js/flipclock.load.js: {}
+ dependencies:
+ - core/drupalSettings
+ - flipclock/flipclock \ No newline at end of file
diff --git a/flipclock.module b/flipclock.module
new file mode 100644
index 0000000..4407b6d
--- /dev/null
+++ b/flipclock.module
@@ -0,0 +1,28 @@
+<?php
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+function flipclock_help($route_name, RouteMatchInterface $route_match) {
+ switch ($route_name) {
+ case 'help.page.flipclock':
+ $output = file_get_contents(drupal_get_path('module', 'flipclock') . '/README.md');
+ return '<pre>' . $output . '</pre>';
+ }
+}
+
+/**
+ * Implements hook_theme().
+ */
+function flipclock_theme() {
+ return [
+ 'flipclock' => [
+ 'variables' => [
+ 'id' => NULL,
+ ],
+ 'template' => 'flipclock',
+ ],
+ ];
+} \ No newline at end of file
diff --git a/js/flipclock.load.js b/js/flipclock.load.js
new file mode 100644
index 0000000..3d05693
--- /dev/null
+++ b/js/flipclock.load.js
@@ -0,0 +1,17 @@
+(function ($, drupalSettings) {
+ Drupal.behaviors.FlipClock = {
+ attach: function (context, settings) {
+ // Init all clocks.
+ for (id in settings.flipClock.instances) {
+ _flipclock_init(id, settings.flipClock.instances[id], context);
+ }
+ }
+ };
+
+ function _flipclock_init(id, optionset, context) {
+ var timestamp = optionset.timestamp * 1000;
+ var seconds_to_go = (new Date(timestamp).getTime() - new Date().getTime()) / 1000;
+ // Init timer.
+ $('#' + id).FlipClock(seconds_to_go, optionset.options);
+ }
+})(jQuery, drupalSettings); \ No newline at end of file
diff --git a/src/Plugin/Block/FlipClockBlock.php b/src/Plugin/Block/FlipClockBlock.php
new file mode 100644
index 0000000..ea4b189
--- /dev/null
+++ b/src/Plugin/Block/FlipClockBlock.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace Drupal\flipclock\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Block\BlockPluginInterface;
+use Drupal\Core\Datetime\DrupalDateTime;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * @Block(
+ * id = "flipclock_block",
+ * admin_label = @Translation("Clock"),
+ * )
+ */
+class FlipClockBlock extends BlockBase implements BlockPluginInterface {
+
+ /**
+ * {@inheritdoc}
+ */
+ public function blockForm($form, FormStateInterface $form_state) {
+ $config = $this->getConfiguration();
+
+ $date = new DrupalDateTime($config['date']);
+ $date->setTimezone(new \DateTimeZone(drupal_get_user_timezone()));
+ $form['date'] = [
+ '#type' => 'datetime',
+ '#title' => $this->t('Date'),
+ '#date_increment' => 1,
+ '#date_timezone' => drupal_get_user_timezone(),
+ '#description' => $this->t('The date you want to initialize the clock with.'),
+ '#required' => TRUE,
+ '#default_value' => isset($config['date']) ? $date : NULL,
+ ];
+
+ $form['clock_face'] = [
+ '#type' => 'select',
+ '#title' => $this->t('Clock'),
+ '#options' => [
+ 'HourlyCounter' => $this->t('Hourly Counter'),
+ 'MinuteCounter' => $this->t('Minute Counter'),
+ 'DailyCounter' => $this->t('Daily Counter'),
+ 'TwelveHourClock' => $this->t('12hr Clock'),
+ 'TwentyFourHourClock' => $this->t('24hr Clock'),
+ ],
+ '#description' => $this->t('This is the name of the clock that is used to build the clock display.'),
+ '#required' => TRUE,
+ '#default_value' => $config['clock_face'],
+ ];
+
+ $form['auto_play'] = [
+ '#type' => 'checkbox',
+ '#title' => $this->t('Auto play'),
+ '#description' => $this->t('Indicate if the clock should automatically add the play class to start the animation.'),
+ '#default_value' => isset($config['auto_play']) ? $config['auto_play'] : TRUE,
+ ];
+
+ $form['auto_start'] = [
+ '#type' => 'checkbox',
+ '#title' => $this->t('Auto start'),
+ '#description' => $this->t('Indicate if the clock should start automatically.'),
+ '#default_value' => isset($config['auto_start']) ? $config['auto_start'] : TRUE,
+ ];
+
+ $form['countdown'] = [
+ '#type' => 'checkbox',
+ '#title' => $this->t('Countdown'),
+ '#description' => $this->t('Indicate if the clock will count down instead of up.'),
+ '#default_value' => $config['countdown'],
+ ];
+
+ $form['show_seconds'] = [
+ '#type' => 'checkbox',
+ '#title' => $this->t('Show seconds'),
+ '#description' => $this->t('Indicate if the clock should include a seconds display.'),
+ '#default_value' => isset($config['show_seconds']) ? $config['show_seconds'] : TRUE,
+ ];
+
+ return $form;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function blockSubmit($form, FormStateInterface $form_state) {
+ /** @var \Drupal\Core\Datetime\DrupalDateTime $date */
+ $date = $form_state->getValue('date');
+ $this->setConfigurationValue('date', $date->format(DATETIME_DATETIME_STORAGE_FORMAT));
+ $this->setConfigurationValue('clock_face', $form_state->getValue('clock_face'));
+ $this->setConfigurationValue('auto_play', $form_state->getValue('auto_play'));
+ $this->setConfigurationValue('auto_start', $form_state->getValue('auto_start'));
+ $this->setConfigurationValue('countdown', $form_state->getValue('countdown'));
+ $this->setConfigurationValue('show_seconds', $form_state->getValue('show_seconds'));
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function build() {
+ $id = 'flipclock-' . uniqid();
+
+ $instance = [
+ 'timestamp' => (int) strtotime($this->configuration['date']),
+ 'options' => [
+ 'clockFace' => $this->configuration['clock_face'],
+ 'autoPlay' => ($this->configuration['auto_play']) ? TRUE : FALSE,
+ 'autoStart' => ($this->configuration['auto_start']) ? TRUE : FALSE,
+ 'countdown' => ($this->configuration['countdown']) ? TRUE : FALSE,
+ 'showSeconds' => ($this->configuration['show_seconds']) ? TRUE : FALSE,
+ ],
+ ];
+
+ $build = [
+ '#theme' => 'flipclock',
+ '#id' => $id,
+ '#attached' => [
+ 'library' => ['flipclock/flipclock.load'],
+ ],
+ ];
+
+ $build['#attached']['drupalSettings']['flipClock']['instances'][$id] = $instance;
+
+ return $build;
+ }
+
+
+} \ No newline at end of file
diff --git a/templates/flipclock.html.twig b/templates/flipclock.html.twig
new file mode 100644
index 0000000..a440c26
--- /dev/null
+++ b/templates/flipclock.html.twig
@@ -0,0 +1 @@
+<div id="{{ id }}" class="clock"></div> \ No newline at end of file