diff --git a/.gitignore b/.gitignore index e43b0f9..90ac674 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ +/.idea .DS_Store diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..84d5483 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# Customizable Radio Buttons Field Changelog + +## 1.0.0 - 2019-04-06 +### Added +- Initial release diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..08fcfe4 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,16 @@ +The MIT License (MIT) + +Copyright (c) 2018 Codemonauts + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated +documentation files (the "Software"), to deal in the Software without restriction, including without limitation the +rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit +persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the +Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE +WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..b50085a --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +# Customizable Radio Buttons Field for Craft CMS 3.x + +![Icon](resources/buttons.png) + +A field type that add customizable radio buttons to Craft CMS. + +## Background + +Pictures say more than many words. With this plugin you can add radio buttons as fields, which can be images, icons, CSS classes, texts or a combination of them. + +## Requirements + + * Craft CMS >= 3.0.0 + +## Installation + +Open your terminal and go to your Craft project: + +``` shell +cd /path/to/project +composer require codemonauts/craft-customizable-radio-buttons-field +``` + +In the control panel, go to Settings → Plugins and click the “install” button for *Customizable radio buttons field*. + +## Configuration + +Copy the ```config.php``` to your config folder as ```buttons.php```. Then add button groups like this: + +``` php + '@config/path/to/my.css', // optional path to a local CSS file. This will be automatically published. + 'cssUrl' => 'https://example.com/awesome.css' // Optional URL to an external CSS. + 'buttonGroups' => [ + 'myhandle' => [ + 'name' => 'My awesome buttons', // The name in the field's configuration dialog. + 'buttons' => [ + 'handle-button-1' => [ + 'image' => '@buttonsAssets/myimage.jpg', // Optional Image, overwrites 'label'. + 'title' => 'My button 1', // Title and Alt Attributes. + 'value' => 'myvalue', // The value to store (string) + 'class' => 'myclass', // Optional class(es) to add to the button. + 'label' => 'abc', // The button's text, will be overwritten when an image is set. + ], + 'handle-button-2' => [ + // ... + ], + // ... + ], + // ... + ], + ], +]; +``` + +You can have multiple button groups. They all share the same CSS file or CSS URL you can configure. See the [examples](examples/README.md). + +With ❤ by [codemonauts](https://codemonauts.com) diff --git a/composer.json b/composer.json index 6f68a9e..65b1ea2 100644 --- a/composer.json +++ b/composer.json @@ -1,42 +1,42 @@ { "name": "codemonauts/craft-customizable-radio-buttons-field", - "description": "Radio buttons field customizable with CSS classes, icons, images and text", + "description": "Craft CMS plugin to add a radio buttons field, customizable with CSS classes, icons, images and text.", "version": "1.0.0", "type": "craft-plugin", - "minimum-stability": "dev", "keywords": [ "craft", "cms", "craftcms", - "craft-plugin" + "craft-plugin", + "field", + "buttons" ], - "autoload": { - "psr-4": { - "codemonauts\\buttons\\": "src/" - } - }, + "license": "MIT", "authors": [ { "name": "codemonauts", - "homepage": "https://www.codemonauts.com" + "homepage": "https://codemonauts.com" } ], - "require": { - "craftcms/cms": "^3.0.0" - }, "support": { + "source": "https://github.com/codemonauts/craft-customizable-radio-buttons-field", "docs": "https://github.com/codemonauts/craft-customizable-radio-buttons-field/blob/master/README.md", "issues": "https://github.com/codemonauts/craft-customizable-radio-buttons-field/issues" }, - "license": "MIT", + "require": { + "craftcms/cms": "^3.0.0" + }, + "autoload": { + "psr-4": { + "codemonauts\\buttons\\": "src/" + } + }, "extra": { "handle": "buttons", - "name": "Customizable radio buttons field", - "developer": "codemonauts", - "developerUrl": "https://www.codemonauts.com", - "schemaVersion": "1.0.0", + "class": "codemonauts\\buttons\\Buttons", + "name": "Customizable Radio Buttons Field", + "description": "Radio buttons field, customizable with CSS classes, icons, images and text.", "hasCpSection": false, - "hasSettings": false, - "class": "codemonauts\\buttons\\Buttons" + "hasSettings": false } } diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..155dc6a --- /dev/null +++ b/examples/README.md @@ -0,0 +1,27 @@ +# Examples + +## Colorset + +![Screenshot Colorset](../resources/colorset.png) + +This example shows the usage of CSS classes and labels to let the user switch between preconfigured back- and foreground colors. So the user can see, how the color will look like. + +To run this example, copy the [```colorset/buttons.php```](colorset/buttons.php) to your Craft config folder and the [```colorset/colorset.css```](colorset/colorset.css) to a subfolder called ```buttons```. + +## Positions + +![Screenshot Positions](../resources/positions.png) + +This example uses images as buttons to switch between different positions. + +To run this example, copy the [```positions/buttons.php```](positions/buttons.php) to your Craft config folder and the folder [```positions/images```](positions/images) to a subfolder called ```buttons```. + +## Transport + +![Screenshot Transport](../resources/transport.png) + +In this example we use the Font Awesome Icons with our radio buttons. We add the Font Awesome CSS URL and the corresponding CSS classes to the buttons. + +To run this example, just copy the [```transport/buttons.php```](transport/buttons.php) to your Craft config folder. + + diff --git a/examples/colorset/buttons.php b/examples/colorset/buttons.php index b0cd252..5ec3555 100644 --- a/examples/colorset/buttons.php +++ b/examples/colorset/buttons.php @@ -1,10 +1,10 @@ '@config/buttons/colorset.css', 'buttonGroups' => [ 'colorset' => [ 'name' => 'Colorset', - 'cssFile' => '@config/buttons/colorset.css', 'buttons' => [ 'white' => [ 'label' => 'T', diff --git a/examples/positions/buttons.php b/examples/positions/buttons.php new file mode 100644 index 0000000..aebff0e --- /dev/null +++ b/examples/positions/buttons.php @@ -0,0 +1,56 @@ + [ + 'position' => [ + 'name' => 'Position', + 'buttons' => [ + 'left-top' => [ + 'image' => '@config/buttons/images/left-top.svg', + 'title' => 'Top left', + 'value' => 'left-top', + ], + 'center-top' => [ + 'image' => '@config/buttons/images/center-top.svg', + 'title' => 'Top center', + 'value' => 'center-top', + ], + 'right-top' => [ + 'image' => '@config/buttons/images/right-top.svg', + 'title' => 'Top right', + 'value' => 'right-top', + ], + 'left-middle' => [ + 'image' => '@config/buttons/images/left-middle.svg', + 'title' => 'Middle left', + 'value' => 'left-middle', + ], + 'center-middle' => [ + 'image' => '@config/buttons/images/center-middle.svg', + 'title' => 'Middle center', + 'value' => 'center-middle', + ], + 'right-middle' => [ + 'image' => '@config/buttons/images/right-middle.svg', + 'title' => 'Middle right', + 'value' => 'right-middle', + ], + 'left-bottom' => [ + 'image' => '@config/buttons/images/left-bottom.svg', + 'title' => 'Bottom left', + 'value' => 'left-bottom', + ], + 'center-bottom' => [ + 'image' => '@config/buttons/images/center-bottom.svg', + 'title' => 'Bottom center', + 'value' => 'center-bottom', + ], + 'right-bottom' => [ + 'image' => '@config/buttons/images/right-bottom.svg', + 'title' => 'Bottom right', + 'value' => 'right-bottom', + ], + ], + ], + ], +]; diff --git a/src/resources/images/center-bottom.svg b/examples/positions/images/center-bottom.svg similarity index 100% rename from src/resources/images/center-bottom.svg rename to examples/positions/images/center-bottom.svg diff --git a/src/resources/images/center-middle.svg b/examples/positions/images/center-middle.svg similarity index 100% rename from src/resources/images/center-middle.svg rename to examples/positions/images/center-middle.svg diff --git a/src/resources/images/center-top.svg b/examples/positions/images/center-top.svg similarity index 100% rename from src/resources/images/center-top.svg rename to examples/positions/images/center-top.svg diff --git a/src/resources/images/left-bottom.svg b/examples/positions/images/left-bottom.svg similarity index 100% rename from src/resources/images/left-bottom.svg rename to examples/positions/images/left-bottom.svg diff --git a/src/resources/images/left-middle.svg b/examples/positions/images/left-middle.svg similarity index 100% rename from src/resources/images/left-middle.svg rename to examples/positions/images/left-middle.svg diff --git a/src/resources/images/left-top.svg b/examples/positions/images/left-top.svg similarity index 100% rename from src/resources/images/left-top.svg rename to examples/positions/images/left-top.svg diff --git a/src/resources/images/right-bottom.svg b/examples/positions/images/right-bottom.svg similarity index 100% rename from src/resources/images/right-bottom.svg rename to examples/positions/images/right-bottom.svg diff --git a/src/resources/images/right-middle.svg b/examples/positions/images/right-middle.svg similarity index 100% rename from src/resources/images/right-middle.svg rename to examples/positions/images/right-middle.svg diff --git a/src/resources/images/right-top.svg b/examples/positions/images/right-top.svg similarity index 100% rename from src/resources/images/right-top.svg rename to examples/positions/images/right-top.svg diff --git a/examples/icons/buttons.php b/examples/transport/buttons.php similarity index 90% rename from examples/icons/buttons.php rename to examples/transport/buttons.php index 896ab8e..4ec9634 100644 --- a/examples/icons/buttons.php +++ b/examples/transport/buttons.php @@ -1,9 +1,9 @@ '@config/buttons/fontawesome.css', + 'cssUrl' => 'https://use.fontawesome.com/releases/v5.8.1/css/all.css', 'buttonGroups' => [ - 'icons' => [ + 'transport' => [ 'name' => 'Transport', 'buttons' => [ 'bicycle' => [ diff --git a/resources/colorset.png b/resources/colorset.png new file mode 100644 index 0000000..629ecd8 Binary files /dev/null and b/resources/colorset.png differ diff --git a/resources/positions.png b/resources/positions.png new file mode 100644 index 0000000..53ee5fc Binary files /dev/null and b/resources/positions.png differ diff --git a/resources/transport.png b/resources/transport.png new file mode 100644 index 0000000..65067d7 Binary files /dev/null and b/resources/transport.png differ diff --git a/src/config.php b/src/config.php index c9dd5e1..dda703c 100644 --- a/src/config.php +++ b/src/config.php @@ -1,56 +1,43 @@ [ - 'position' => [ - 'name' => 'Position', - 'buttons' => [ - 'left-top' => [ - 'image' => '@codemonauts/buttons/resources/images/left-top.svg', - 'title' => 'Top left', - 'value' => 'left-top', - ], - 'center-top' => [ - 'image' => '@codemonauts/buttons/resources/images/center-top.svg', - 'title' => 'Top center', - 'value' => 'center-top', - ], - 'right-top' => [ - 'image' => '@codemonauts/buttons/resources/images/right-top.svg', - 'title' => 'Top right', - 'value' => 'right-top', - ], - 'left-middle' => [ - 'image' => '@codemonauts/buttons/resources/images/left-middle.svg', - 'title' => 'Middle left', - 'value' => 'left-middle', - ], - 'center-middle' => [ - 'image' => '@codemonauts/buttons/resources/images/center-middle.svg', - 'title' => 'Middle center', - 'value' => 'center-middle', - ], - 'right-middle' => [ - 'image' => '@codemonauts/buttons/resources/images/right-middle.svg', - 'title' => 'Middle right', - 'value' => 'right-middle', - ], - 'left-bottom' => [ - 'image' => '@codemonauts/buttons/resources/images/left-bottom.svg', - 'title' => 'Bottom left', - 'value' => 'left-bottom', - ], - 'center-bottom' => [ - 'image' => '@codemonauts/buttons/resources/images/center-bottom.svg', - 'title' => 'Bottom center', - 'value' => 'center-bottom', - ], - 'right-bottom' => [ - 'image' => '@codemonauts/buttons/resources/images/right-bottom.svg', - 'title' => 'Bottom right', - 'value' => 'right-bottom', - ], - ], - ], - ], + /* + * An optional CSS file, that will be bundled and published for the control panel, when a button group is used. + * There can only be one CSS file for all button groups. + * + * You would normaly use something like '@config/buttons/style.css'. + */ + 'cssFile' => '', + + /* + * In addition to a local file, you can set an URL for an external CSS (e.g. Fontawesome) + */ + 'cssUrl' => '', + + /* + * This array sets the config for all button groups. The array key is the button group's handle. + * See the examples in the repository. + * + * E.g.: + * + * 'buttonGroups' => [ + * 'myhandle' => [ + * 'name' => 'My awesome buttons', // The name in the field's configuration dialog + * 'buttons' => [ + * 'handle-button-1' => [ + * 'image' => '@buttonsAssets/myimage.jpg', // Optional Image, overwrites 'label' + * 'title' => 'My button 1', // Title and Alt Attributes + * 'value' => 'myvalue', // The value to store (string) + * 'class' => 'myclass', // Optional class to add to the button + * 'label' => 'Abc', // The button's text, will be overwritten when an image is set + * ], + * 'handle-button-2' => [ + * ... + * ], + * ... + * ], + * ], + * ], + */ + 'buttonGroups' => [], ]; diff --git a/src/fields/Buttons.php b/src/fields/Buttons.php index cc54ed5..efbc2c6 100644 --- a/src/fields/Buttons.php +++ b/src/fields/Buttons.php @@ -9,13 +9,12 @@ use craft\base\Field; use craft\base\PreviewableFieldInterface; use LitEmoji\LitEmoji; -use yii\db\Schema; use codemonauts\buttons\Buttons as Plugin; class Buttons extends Field implements PreviewableFieldInterface { - /* - * @var string[] Default values for buttons + /** + * @var array Default values for buttons */ protected $defaultButton = [ 'image' => '', @@ -46,14 +45,6 @@ public function __construct(array $config = []) parent::__construct($config); } - /** - * @inheritdoc - */ - public function getContentColumnType(): string - { - return Schema::TYPE_STRING; - } - /** * @inheritdoc */ @@ -68,16 +59,15 @@ public function getSettingsHtml() ]; } - return Craft::$app->getView()->renderTemplateMacro('_includes/forms', 'selectField', + return Craft::$app->getView()->renderTemplateMacro('_includes/forms', 'selectField', [ [ - [ - 'label' => Craft::t('buttons', 'Button group'), - 'id' => 'configHandle', - 'name' => 'configHandle', - 'options' => $options, - 'value' => $this->configHandle, - ], - ]); + 'label' => Craft::t('buttons', 'Button group'), + 'id' => 'configHandle', + 'name' => 'configHandle', + 'options' => $options, + 'value' => $this->configHandle, + ], + ]); } /** @@ -85,26 +75,30 @@ public function getSettingsHtml() */ public function getInputHtml($value, ElementInterface $element = null): string { + $settings = Plugin::getInstance()->getSettings(); $group = Plugin::getInstance()->getSettings()->buttonGroups[$this->configHandle]; + if ($settings->cssUrl !== '') { + Craft::$app->getView()->registerCssFile($settings->cssUrl); + } + $buttons = []; foreach ($group['buttons'] as $handle => $button) { $buttons[$handle] = array_merge($this->defaultButton, $button); - if ($buttons[$handle]['image'] != '') { - $buttons[$handle]['image'] = Craft::$app->assetManager->getPublishedUrl($buttons[$handle]['image'], true); + if ($buttons[$handle]['image'] !== '') { + $buttons[$handle]['image'] = Craft::$app->assetManager->getPublishedUrl($buttons[$handle]['image'], false); } } Craft::$app->getView()->registerAssetBundle(ButtonsAssets::class); Craft::$app->getView()->registerAssetBundle(CustomAssets::class); - return Craft::$app->getView()->renderTemplate('buttons/input', - [ - 'name' => $this->handle, - 'value' => $value, - 'field' => $this, - 'buttons' => $buttons, - ]); + return Craft::$app->getView()->renderTemplate('buttons/input', [ + 'name' => $this->handle, + 'value' => $value, + 'field' => $this, + 'buttons' => $buttons, + ]); } /** diff --git a/src/models/Settings.php b/src/models/Settings.php index ae5832a..8621ba7 100644 --- a/src/models/Settings.php +++ b/src/models/Settings.php @@ -6,7 +6,18 @@ class Settings extends Model { + /** + * @var array The config for all button groups + */ public $buttonGroups = []; - public $cssFile = null; + /** + * @var string Optional CSS file to bundle + */ + public $cssFile = ''; + + /** + * @var string Optional URL to an external CSS + */ + public $cssUrl = ''; } diff --git a/src/resources/ButtonsAssets.php b/src/resources/ButtonsAssets.php index ea7270a..cae3f3e 100644 --- a/src/resources/ButtonsAssets.php +++ b/src/resources/ButtonsAssets.php @@ -2,10 +2,8 @@ namespace codemonauts\buttons\resources; -use codemonauts\buttons\Buttons; use craft\web\AssetBundle; use craft\web\assets\cp\CpAsset; -use Craft; class ButtonsAssets extends AssetBundle { diff --git a/src/resources/CustomAssets.php b/src/resources/CustomAssets.php index 6ad44f4..883309d 100644 --- a/src/resources/CustomAssets.php +++ b/src/resources/CustomAssets.php @@ -9,11 +9,14 @@ class CustomAssets extends AssetBundle { + /** + * @inheritDoc + */ public function init() { $cssFile = Buttons::getInstance()->getSettings()->cssFile; - if ($cssFile != '') { + if ($cssFile !== '') { $file = Craft::getAlias($cssFile); $this->sourcePath = pathinfo($file, PATHINFO_DIRNAME); diff --git a/src/translations/de/buttons.php b/src/translations/de/buttons.php index 52fe85f..2bc7b9b 100644 --- a/src/translations/de/buttons.php +++ b/src/translations/de/buttons.php @@ -2,13 +2,5 @@ return [ 'Customizable Radio Buttons' => 'Individuelle Radio-Buttons', - 'Top left' => 'Oben links', - 'Top center' => 'Oben zentriert', - 'Top right' => 'Oben rechts', - 'Middle left' => 'Links', - 'Middle center' => 'Zentriert', - 'Middle right' => 'Rechts', - 'Bottom left' => 'Unten links', - 'Bottom center' => 'Unten zentriert', - 'Bottom right' => 'Unten rechts', + 'Button group' => 'Schalterkonfiguration', ];