Make buttons translatable

carlcs · Apr 19, 2022 · d59c491 · d59c491
1 parent 3c03c5c
commit d59c491
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+### Added
+- Button and dropdown titles are now translatable.
+
 ## 4.0.0 - 2022-04-14
 
 ### Added

diff --git a/src/Plugin.php b/src/Plugin.php
@@ -5,6 +5,8 @@
 use carlcs\redactorcustomstyles\assets\customcp\CustomCpAsset;
 use Craft;
 use craft\helpers\FileHelper;
+use craft\helpers\StringHelper;
+use craft\redactor\events\ModifyRedactorConfigEvent;
 use craft\redactor\Field as RedactorField;
 use craft\redactor\events\RegisterPluginPathsEvent;
 use yii\base\Event;
@@ -18,6 +20,7 @@ class Plugin extends \craft\base\Plugin
  // =========================================================================
 
  private ?array $_icons = null;
+ private array $_translations = [];
 
  // Public Methods
  // =========================================================================
@@ -39,6 +42,15 @@ public function init()
  fn($variables) => "Craft.RedactorCustomStyles = $variables",
  [['icons' => $this->_getIcons()]],
  );
+
+ Event::on(RedactorField::class, RedactorField::EVENT_DEFINE_REDACTOR_CONFIG, function(ModifyRedactorConfigEvent $event) use ($view) {
+ if (($config = $event->config['customStyles'] ?? $event->config['customstyles'] ?? null) !== null) {
+ $this->_prepareRedactorConfig($config);
+ $event->config['customStyles'] = $config;
+
+ $view->registerTranslations('redactor-custom-styles', $this->_translations);
+ }
+ });
  }
  }
 
@@ -67,4 +79,16 @@ private function _getIcons(): array
 
  return $this->_icons;
  }
+
+ private function _prepareRedactorConfig(array &$config)
+ {
+ foreach($config as $key => &$val) {
+ $this->_translations[] = $val['title'] = $val['title']
+ ?? StringHelper::toTitleCase(implode(' ', StringHelper::toWords($key, false, true)));
+
+ if (isset($val['dropdown'])) {
+ $this->_prepareRedactorConfig($val['dropdown']);
+ }
+ }
+ }
 }
diff --git a/src/redactor-plugins/customstyles.js b/src/redactor-plugins/customstyles.js
@@ -43,7 +43,7 @@
  },
  addButton: function(key, config) {
  var data = {
- title: config.title || this.getTitleFromKey(key),
+ title: Craft.t('redactor-custom-styles', config.title),
  icon: this.getIconHtml(config.icon || key),
  api: config.api || 'module.inline.format',
  args: config.args,
@@ -53,7 +53,7 @@
  },
  addDropdown: function(key, config) {
  var data = {
- title: config.title || this.getTitleFromKey(key),
+ title: Craft.t('redactor-custom-styles', config.title),
  icon: this.getIconHtml(config.icon || key),
  dropdown: {},
  };
@@ -62,18 +62,14 @@
  var itemConfig = config.dropdown[itemKey];
 
  data.dropdown[itemKey] = {
- title: itemConfig.title || this.getTitleFromKey(itemKey),
+ title: Craft.t('redactor-custom-styles', itemConfig.title),
  api: itemConfig.api || 'module.inline.format',
  args: itemConfig.args,
  };
  }
 
  this.toolbar.addButtonAfter(config.addAfter || this.defaultAddAfter, key, data);
  },
- getTitleFromKey: function(str) {
- str = str.replace(/([A-Z])/g, ' $1').trim();
- return str.charAt(0).toUpperCase()+str.slice(1);
- },
  getIconHtml: function(icon) {
  icon = icon.toLowerCase();