First Commit

Plugin.php

@@ -0,0 +1,76 @@
+<?php namespace LucasPalomba\YearPicker;
+
+use Event;
+use System\Classes\PluginBase;
+use System\Classes\PluginManager;
+/**
+ * Plugin Information File
+ */
+class Plugin extends PluginBase
+{
+    /**
+     * Returns information about this plugin.
+     *
+     * @return array
+     */
+    public function pluginDetails()
+    {
+        return [
+            'name'        => 'YearPicker',
+            'description' => 'Add a Year Picker form widget',
+            'author'      => 'LucasPalomba',
+            'icon'        => 'icon-leaf'
+        ];
+    }
+
+    /**
+     * Register method, called when the plugin is first registered.
+     *
+     * @return void
+     */
+    public function register()
+    {
+
+    }
+
+    /**
+     * Boot method, called right before the request route.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+
+        $properties = [
+            'minYear' => [
+                'title' => 'Min. Year',
+                'type' => 'string'
+            ],
+            'maxYear' => [
+                'title' => 'Max. Year',
+                'type' => 'string'
+
+            ],
+        ];
+
+        if(PluginManager::instance()->exists('RainLab.Builder')){
+            Event::listen('pages.builder.registerControls', function($controlLibrary) use($properties) {
+                $controlLibrary->registerControl(
+                    'yearpicker',
+                    'Year Picker',
+                    'Sélecteur d\'année',
+                    \RainLab\Builder\Classes\ControlLibrary::GROUP_WIDGETS,
+                    'icon-file-image-o',
+                    $controlLibrary->getStandardProperties([], $properties),
+                    'LucasPalomba\YearPicker\Classes\ControlDesignTimeProvider'
+                );
+            });
+        }
+    }
+    public function registerFormWidgets()
+    {
+        return [
+            \LucasPalomba\YearPicker\FormWidgets\YearPicker::class => 'yearpicker'
+        ];
+    }
+}

classes/ControlDesignTimeProvider.php

@@ -0,0 +1,9 @@
+<?php namespace LucasPalomba\YearPicker\Classes;
+
+use RainLab\Builder\Widgets\DefaultControlDesignTimeProvider;
+
+class ControlDesignTimeProvider extends DefaultControlDesignTimeProvider {
+    public function __construct(){
+        $this->defaultControlsTypes[] = 'yearpicker';
+    }
+}

classes/controldesigntimeprovider/_control-yearpicker.htm

@@ -0,0 +1,3 @@
+<div class="builder-blueprint-control-text">
+    <i class="icon-calendar"></i><?= e(trans('lucaspalomba.yearpicker::lang.yearpicker.placeholder')) ?>
+</div>

composer.json

@@ -0,0 +1,8 @@
+{
+    "name": "lucaspalomba/yearpicker-plugin",
+    "type": "october-plugin",
+    "description": "No description provided yet...",
+    "require": {
+        "composer/installers": "~1.0"
+    }
+}

formwidgets/YearPicker.php

@@ -0,0 +1,58 @@
+<?php namespace LucasPalomba\YearPicker\FormWidgets;
+
+use Backend\Classes\FormField;
+use Backend\Classes\FormWidgetBase;
+use Config;
+
+class YearPicker extends FormWidgetBase
+{
+    /**
+     * @var string defaultAlias to identify this widget.
+     */
+    protected $defaultAlias = 'yearpicker';
+
+
+    public $minYear = null;
+
+    public $maxYear = null;
+
+
+    /**
+     * {@inheritDoc}
+     */
+    public function init()
+    {
+        $this->fillFromConfig([
+            'minYear',
+            'maxYear',
+        ]);
+    }
+
+    public function render(){
+        $this->prepareVars();
+        $this->addCss('css/yearpicker.css');
+        $this->addJs('js/yearpicker.js');
+        return $this->makePartial('yearpicker');
+    }
+
+    public function prepareVars(){
+        $this->vars['name'] = $this->getFieldName();
+        $this->vars['value'] = $this->getLoadValue();
+        $this->vars['field'] = $this->formField;
+        $this->vars['minYear'] = $this->minYear;
+        $this->vars['maxYear'] = $this->maxYear;
+    }
+
+
+    /**
+     * @inheritDoc
+     */
+    public function getSaveValue($value)
+    {
+        if (!strlen($value)) {
+            return null;
+        }
+
+        return $value;
+    }
+}

formwidgets/yearpicker/assets/css/yearpicker.css

@@ -0,0 +1,105 @@
+:root {
+    --background-color: #fff;
+    --border-color: #95a6a733;
+    --text-color: #555;
+    --selected-text-color: #6bc48d;
+    --hover-background-color: #eee;
+}
+
+.yearpicker-container {
+    position: absolute;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    box-shadow: 0 0 32px rgb(67 86 100 / 20%);;
+    border-radius: 8px;
+    font-family: sans-serif;
+    font-size: 12px;
+    margin-top: 5px;
+    width: 310px;
+    z-index: 10100;
+}
+
+.yearpicker-header {
+    display: flex;
+    width: 100%;
+    height: 2.5rem;
+    border-bottom: 1px solid var(--border-color);
+    align-items: center;
+    justify-content: space-between;
+    padding:0.25rem 1rem;
+}
+
+.yearpicker-prev,
+.yearpicker-next {
+    background-color: transparent;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 75% 75%;
+    border: 0;
+    cursor: pointer;
+    display: block;
+    height: 30px;
+    opacity: .5;
+    outline: none;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    *position: absolute;
+    text-indent: 100%;
+    *top: 0;
+    white-space: nowrap;
+    width: 20px;
+}
+
+.yearpicker-prev{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==);
+}
+.yearpicker-next{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=);
+}
+
+.yearpicker-prev:hover,
+.yearpicker-next:hover {
+    opacity: 1;
+}
+
+.yearpicker-current{
+    line-height: 1;
+}
+
+.yearpicker-year {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0.5rem;
+}
+
+.yearpicker-items {
+    list-style: none;
+    padding: 1rem 0.5rem;
+    flex: 0 0 33.3%;
+    width: 100%;
+}
+
+.yearpicker-items:hover {
+    background-color: var(--hover-background-color);
+    color: var(--selected-text-color);
+    cursor: pointer;
+}
+
+.yearpicker-items.selected {
+    background: var(--selected-text-color);
+    color:#fff;
+}
+
+.hide {
+    display: none;
+}
+
+.yearpicker-items.disabled {
+    pointer-events: none;
+    color: #bbb;
+}