Skip to content
Snippets Groups Projects
Commit 76ef931d authored by David Galeano's avatar David Galeano
Browse files

Resolve #3471865 "Move iconify icons"

parent 46f31c33
No related branches found
No related tags found
1 merge request!20Resolve #3471865 "Move iconify icons"
Pipeline #272731 passed with warnings
......@@ -29,4 +29,4 @@ iconify_icons_icons:
library: iconify_icons/iconify_icons.editor
elements:
- <img class src alt>
#class: Drupal\iconify_icons\Plugin\CKEditor5Plugin\IconifyIcons
class: Drupal\iconify_icons\Plugin\CKEditor5Plugin\IconifyIcons
iconify_icons.settings:
title: 'Iconify Icons'
parent: system.admin_config_content
description: 'Iconify Icons.'
route_name: iconify_icons.settings
......@@ -14,11 +14,3 @@ iconify_icons.dialog:
_title: 'Select Iconify Icon'
requirements:
_permission: 'access content'
iconify_icons.settings:
path: '/admin/config/content/iconify_icons'
defaults:
_form: '\Drupal\iconify_icons\Form\Settings'
_title: 'Iconify Icon Settings'
requirements:
_permission: 'administer iconify icons'
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.iconifyIcons=t())}(self,(()=>(()=>{var e={"ckeditor5/src/core.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/widget.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function o(i){var r=t[i];if(void 0!==r)return r.exports;var s=t[i]={exports:{}};return e[i](s,s.exports,o),s.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var i={};return(()=>{"use strict";o.d(i,{default:()=>d});var e=o("ckeditor5/src/core.js"),t=o("ckeditor5/src/widget.js");class r extends e.Command{execute(e){this.editor.model.change((t=>{const o={src:e.icon_src,alt:e.icon_alt,class:"iconify-icons-ckeditor"},i=t.createElement("iconifyIconImg",o),r=t.createDocumentFragment();t.append(i,r),this.editor.model.insertContent(r)}))}refresh(){const{model:e}=this.editor,{selection:t}=e.document,o=e.schema.findAllowedParent(t.getFirstPosition(),"iconifyIconImg");this.isEnabled=null!==o}}class s extends e.Plugin{static get requires(){return[t.Widget]}init(){this._defineSchema(),this._defineConverters(),this._defineCommands()}_defineSchema(){const{schema:e}=this.editor.model;e.register("iconifyIconImg",{isObject:!0,isInline:!0,allowWhere:"$text",allowAttributes:["class","src","alt"]})}_defineConverters(){const{conversion:e}=this.editor;e.attributeToAttribute({model:"class",view:"class"}),e.attributeToAttribute({model:"src",view:"src"}),e.attributeToAttribute({model:"alt",view:"alt"}),e.for("downcast").elementToElement({model:"iconifyIconImg",view:(e,{writer:t})=>{const o=e.getAttribute("class"),i=e.getAttribute("src"),r=e.getAttribute("alt");return t.createEmptyElement("img",{class:o,src:i,alt:r})}}),e.for("upcast").elementToElement({view:{name:"img",classes:"iconify-icons-ckeditor"},model:(e,{writer:t})=>{const o=e.getAttribute("class"),i=e.getAttribute("src"),r=e.getAttribute("alt");return t.createElement("iconifyIconImg",{class:o,src:i,alt:r})}})}_defineCommands(){this.editor.commands.add("insertIconifyIcons",new r(this.editor))}}var n=o("ckeditor5/src/ui.js");class c extends e.Plugin{init(){const{editor:e}=this,t=this.editor.config.get("iconifyIcons");if(!t)return;const{openDialog:o,dialogSettings:i={}}=t;"function"==typeof o&&e.ui.componentFactory.add("iconifyIcons",(t=>{const r=new n.ButtonView(t);return r.set({label:Drupal.t("Iconify Icons"),icon:'<?xml version="1.0" encoding="utf-8"?>\x3c!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --\x3e\n<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M12 19.5c3.75 0 7.159-3.379 6.768-4.125-.393-.75-2.268 1.875-6.768 1.875s-6-2.625-6.375-1.875S8.25 19.5 12 19.5zm4.125-12c.623 0 1.125.502 1.125 1.125v1.5c0 .623-.502 1.125-1.125 1.125A1.123 1.123 0 0115 10.125v-1.5c0-.623.502-1.125 1.125-1.125zm-8.25 0C8.498 7.5 9 8.002 9 8.625v1.5c0 .623-.502 1.125-1.125 1.125a1.123 1.123 0 01-1.125-1.125v-1.5c0-.623.502-1.125 1.125-1.125zM12 0C5.381 0 0 5.381 0 12s5.381 12 12 12 12-5.381 12-12S18.619 0 12 0zm0 1.5c5.808 0 10.5 4.692 10.5 10.5S17.808 22.5 12 22.5 1.5 17.808 1.5 12 6.192 1.5 12 1.5Z"/></svg>',tooltip:!0}),this.listenTo(r,"execute",(()=>{o(Drupal.url("iconify_icons/dialog"),(({settings:t})=>{e.execute("insertIconifyIcons",t)}),i)})),r}))}}class l extends e.Plugin{static get requires(){return[s,c]}static get pluginName(){return"IconifyIcons"}}const d={IconifyIcons:l}})(),i=i.default})()));
\ No newline at end of file
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.iconifyIcons=t())}(self,(()=>(()=>{var e={"ckeditor5/src/core.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/widget.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function o(i){var r=t[i];if(void 0!==r)return r.exports;var s=t[i]={exports:{}};return e[i](s,s.exports,o),s.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var i={};return(()=>{"use strict";o.d(i,{default:()=>d});var e=o("ckeditor5/src/core.js"),t=o("ckeditor5/src/widget.js");class r extends e.Command{execute(e){this.editor.model.change((t=>{const o={src:e.icon_src,alt:e.icon_alt,class:"iconify-icons-ckeditor"},i=t.createElement("iconifyIconImg",o),r=t.createDocumentFragment();t.append(i,r),this.editor.model.insertContent(r)}))}refresh(){const{model:e}=this.editor,{selection:t}=e.document,o=e.schema.findAllowedParent(t.getFirstPosition(),"iconifyIconImg");this.isEnabled=null!==o}}class s extends e.Plugin{static get requires(){return[t.Widget]}init(){this._defineSchema(),this._defineConverters(),this._defineCommands()}_defineSchema(){const{schema:e}=this.editor.model;e.register("iconifyIconImg",{isObject:!0,isInline:!0,allowWhere:"$text",allowAttributes:["class","src","alt"]})}_defineConverters(){const{conversion:e}=this.editor;e.attributeToAttribute({model:"class",view:"class"}),e.attributeToAttribute({model:"src",view:"src"}),e.attributeToAttribute({model:"alt",view:"alt"}),e.for("downcast").elementToElement({model:"iconifyIconImg",view:(e,{writer:t})=>{const o=e.getAttribute("class"),i=e.getAttribute("src"),r=e.getAttribute("alt");return t.createEmptyElement("img",{class:o,src:i,alt:r})}}),e.for("upcast").elementToElement({view:{name:"img",classes:"iconify-icons-ckeditor"},model:(e,{writer:t})=>{const o=e.getAttribute("class"),i=e.getAttribute("src"),r=e.getAttribute("alt");return t.createElement("iconifyIconImg",{class:o,src:i,alt:r})}})}_defineCommands(){this.editor.commands.add("insertIconifyIcons",new r(this.editor))}}var c=o("ckeditor5/src/ui.js");class n extends e.Plugin{init(){const{editor:e}=this,t=this.editor.config.get("iconifyIcons");if(!t)return;const{openDialog:o,dialogSettings:i,collections:r={}}=t;"function"==typeof o&&(i.collections=r,e.ui.componentFactory.add("iconifyIcons",(t=>{const r=new c.ButtonView(t);return r.set({label:Drupal.t("Iconify Icons"),icon:'<?xml version="1.0" encoding="utf-8"?>\x3c!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --\x3e\n<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M12 19.5c3.75 0 7.159-3.379 6.768-4.125-.393-.75-2.268 1.875-6.768 1.875s-6-2.625-6.375-1.875S8.25 19.5 12 19.5zm4.125-12c.623 0 1.125.502 1.125 1.125v1.5c0 .623-.502 1.125-1.125 1.125A1.123 1.123 0 0115 10.125v-1.5c0-.623.502-1.125 1.125-1.125zm-8.25 0C8.498 7.5 9 8.002 9 8.625v1.5c0 .623-.502 1.125-1.125 1.125a1.123 1.123 0 01-1.125-1.125v-1.5c0-.623.502-1.125 1.125-1.125zM12 0C5.381 0 0 5.381 0 12s5.381 12 12 12 12-5.381 12-12S18.619 0 12 0zm0 1.5c5.808 0 10.5 4.692 10.5 10.5S17.808 22.5 12 22.5 1.5 17.808 1.5 12 6.192 1.5 12 1.5Z"/></svg>',tooltip:!0}),this.listenTo(r,"execute",(()=>{o(Drupal.url("iconify_icons/dialog"),(({settings:t})=>{e.execute("insertIconifyIcons",t)}),i)})),r})))}}class l extends e.Plugin{static get requires(){return[s,n]}static get pluginName(){return"IconifyIcons"}}const d={IconifyIcons:l}})(),i=i.default})()));
\ No newline at end of file
......@@ -17,11 +17,14 @@ export default class IconifyIconsUI extends Plugin {
return;
}
const { openDialog, dialogSettings = {} } = options;
const { openDialog, dialogSettings, collections = {} } = options;
if (typeof openDialog !== 'function') {
return;
}
// Add collections to dialogSettings
dialogSettings.collections = collections;
// This will register the iconify icons toolbar button.
editor.ui.componentFactory.add('iconifyIcons', (locale) => {
const buttonView = new ButtonView(locale);
......
......@@ -69,8 +69,8 @@ class IconDialog extends FormBase {
*/
public function buildForm(array $form, FormStateInterface $form_state) {
// Get selected collections from settings.
$settings = $this->configFactory->get('iconify_icons.settings');
$collections = (array) $settings->get('collections');
$user_input = $form_state->getUserInput();
$collections = explode(',', $user_input['dialogOptions']['collections'] ?? '');
$field_wrapper_id = 'iconify-icons-widget-modal';
......@@ -143,7 +143,7 @@ class IconDialog extends FormBase {
'#type' => 'color',
'#title' => $this->t('Color'),
'#description' => $this->t('Icon color. Sets color for monotone icons.'),
'#default_value' => 'currentColor',
'#default_value' => '#000000',
];
$form['settings']['flip'] = [
......
<?php
namespace Drupal\iconify_icons\Form;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Config\TypedConfigManagerInterface;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Link;
use Drupal\Core\Url;
use Drupal\iconify_icons\IconifyServiceInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Admin settings for Iconify Icons.
*
* @package Drupal\iconify_icons\Form
*/
class Settings extends ConfigFormBase {
/**
* The iconify icons service.
*
* @var \Drupal\iconify_icons\IconifyServiceInterface
*/
protected $iconify;
/**
* Constructs a Settings object.
*
* @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
* The factory for configuration objects.
* @param \Drupal\Core\Config\TypedConfigManagerInterface $typedConfigManager
* The typed config manager.
* @param \Drupal\iconify_icons\IconifyServiceInterface $iconify
* The iconify icons service.
*/
public function __construct(ConfigFactoryInterface $config_factory, TypedConfigManagerInterface $typedConfigManager, IconifyServiceInterface $iconify) {
parent::__construct($config_factory, $typedConfigManager);
$this->iconify = $iconify;
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('config.factory'),
$container->get('config.typed'),
$container->get('iconify_icons.iconify_service')
);
}
/**
* {@inheritdoc}
*/
protected function getEditableConfigNames() {
return ['iconify_icons.settings'];
}
/**
* {@inheritdoc}
*/
public function getFormId() {
return 'iconify_icons_settings';
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
$config = $this->config('iconify_icons.settings');
$form = parent::buildForm($form, $form_state);
$form['ckeditor5'] = [
'#type' => 'details',
'#title' => $this->t('CKEditor5 settings'),
'#open' => TRUE,
];
$form['ckeditor5']['search'] = [
'#type' => 'textfield',
'#title' => $this->t('Icon Collections'),
'#size' => 60,
'#maxlength' => 128,
'#placeholder' => $this->t('Filter collections'),
'#attributes' => [
'class' => ['iconify-icons-widget-checkboxes-filter'],
],
'#attached' => [
'library' => ['iconify_icons/default'],
],
];
$form['ckeditor5']['collections'] = [
'#type' => 'checkboxes',
'#options' => $this->getOptions(),
'#default_value' => $config->get('collections') ?? [],
'#description' => $this->t('Select the collections which are going to provide the set of icons. See @collectionIconsLink list. Leave empty to select all.', [
'@collectionIconsLink' => Link::fromTextAndUrl($this->t('the Iconify icon collections'), Url::fromUri('https://icon-sets.iconify.design/', [
'attributes' => [
'target' => '_blank',
],
]))->toString(),
]),
'#attributes' => [
'class' => ['iconify-icons-widget-collections'],
],
'#attached' => [
'library' => ['iconify_icons/default'],
],
];
return $form;
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state) {
$collections = array_filter($form_state->getValue('collections'));
$this->configFactory->getEditable('iconify_icons.settings')
->set('collections', array_combine($collections, $collections))
->save();
parent::submitForm($form, $form_state);
}
/**
* Gets a custom name for an icon collection.
*
* This method formats a custom name for the icon collection using its name,
* category, total number of icons, and a link to view the icons.
*
* @param array $collection
* An associative array containing the details of the collection.
* @param string $collection_id
* The unique identifier for the collection.
*
* @return string
* The formatted custom name for the collection.
*/
protected function getCustomCollectionName(array $collection, string $collection_id): string {
return sprintf(
'<strong>%s</strong> - %s (%d) <a href="https://icon-sets.iconify.design/%s" target="_blank">See icons</a>',
$collection['name'] ?? 'Unknown Name',
$collection['category'] ?? 'Uncategorized',
$collection['total'] ?? 0,
$collection_id
);
}
/**
* Gets and sorts icon collections.
*
* This method fetches the icon collections and sorts them by the 'total'
* key in descending order. It then generates an array of options where each
* option is the custom name of the collection.
*
* @return array
* An associative array of collection IDs and their custom names.
*
* @throws \GuzzleHttp\Exception\GuzzleException
* @throws \JsonException
*/
protected function getOptions(): array {
// Fetch and sort collections by 'total' in descending order.
$collections = $this->iconify->getCollections();
uasort($collections, fn($a, $b) => $b['total'] <=> $a['total']);
$options = [];
foreach ($collections as $collection_id => $collection) {
$options[$collection_id] = $this->getCustomCollectionName($collection, $collection_id);
}
return $options;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment