Add basic language selector
This commit is contained in:
Kacper Donat
parent
51f448aad6
commit
be428859b7
@ -43,3 +43,17 @@
|
||||
.demo__time-split--formatting {
|
||||
background: darken($color-accent, 20%);
|
||||
}
|
||||
|
||||
.demo__languages {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: -.5rem;
|
||||
margin-right: -.5rem;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import 'bootstrap'
|
||||
import '@fortawesome/fontawesome-pro/css/all.min.css'
|
||||
import 'typeface-raleway'
|
||||
import '../sass/style.scss'
|
||||
import './try-form'
|
||||
import './demo'
|
||||
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
|
||||
@ -1,9 +1,38 @@
|
||||
import * as React from "react";
|
||||
import { useState } from "react";
|
||||
import * as ReactDOM from "react-dom"
|
||||
import { useFetch } from "react-async";
|
||||
|
||||
const formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
|
||||
|
||||
type Language = {
|
||||
name: string;
|
||||
class: string;
|
||||
embeddable: boolean;
|
||||
standalone: boolean;
|
||||
}
|
||||
|
||||
type LanguageSelectorProps = {
|
||||
language: string;
|
||||
onSelect(language: Language): void;
|
||||
}
|
||||
|
||||
const LanguageSelector = ({ language, onSelect }: LanguageSelectorProps) => {
|
||||
const { data: languages, isPending } = useFetch<Language[]>("/languages", { headers: { "Accept": "application/json" }});
|
||||
|
||||
const regex = language && new RegExp(`${language}`);
|
||||
const matching = languages && languages.filter(current => !language || current.name.match(regex));
|
||||
const isValidLanguage = languages && typeof languages.find(current => current.name === language) !== "undefined";
|
||||
|
||||
return isPending ? null : <ul className="demo__languages">
|
||||
{ (isValidLanguage ? languages : matching).map(language => <li key={ language.name }>
|
||||
<button type="button" className="btn btn-outline-primary btn-sm" onClick={ () => onSelect(language) }>
|
||||
{ language.name }
|
||||
</button>
|
||||
</li>) }
|
||||
</ul>
|
||||
};
|
||||
|
||||
type HighlightFormProps = {
|
||||
onSubmit(code: string, language: string);
|
||||
}
|
||||
@ -19,6 +48,8 @@ const HighlightForm = ({ onSubmit }: HighlightFormProps) => {
|
||||
|
||||
const handleSubmit = () => onSubmit && onSubmit(code, language);
|
||||
|
||||
const handleLanguageSelection = language => setLanguage(language.name);
|
||||
|
||||
return (
|
||||
<form className="demo__form">
|
||||
<div className="form-group">
|
||||
@ -42,8 +73,7 @@ const HighlightForm = ({ onSubmit }: HighlightFormProps) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div id="language-selector" className="standalone languages">
|
||||
</div>
|
||||
<LanguageSelector language={ language } onSelect={ handleLanguageSelection }/>
|
||||
</div>
|
||||
<div className="demo__actions">
|
||||
<button type="button" className="btn btn-sm btn-outline-danger" onClick={ handleReset }>
|
||||
@ -2,4 +2,3 @@ twig:
|
||||
default_path: '%kernel.project_dir%/templates'
|
||||
globals:
|
||||
versioner: '@twig.versioner'
|
||||
keylighter: '@twig.keylighter'
|
||||
|
||||
@ -61,7 +61,6 @@ services:
|
||||
League\CommonMark\HtmlRenderer: ~
|
||||
|
||||
twig.versioner: '@App\Service\KeyLighterVersioner'
|
||||
twig.keylighter: '@App\Twig\KeyLighterTwigAccess'
|
||||
|
||||
# controllers are imported separately to make sure they're public
|
||||
# and have a tag that allows actions to type-hint services
|
||||
|
||||
@ -31,5 +31,7 @@
|
||||
"watch": "encore dev --watch",
|
||||
"build": "encore production --progress"
|
||||
},
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"react-async": "^10.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
59
src/Controller/LanguagesAction.php
Normal file
59
src/Controller/LanguagesAction.php
Normal file
@ -0,0 +1,59 @@
|
||||
<?php
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use App\Service\KeyLighterVersioner;
|
||||
use Kadet\Highlighter\KeyLighter;
|
||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
|
||||
class LanguagesAction
|
||||
{
|
||||
private $keylighter;
|
||||
private $versioner;
|
||||
|
||||
public function __construct(KeyLighter $keylighter, KeyLighterVersioner $versioner)
|
||||
{
|
||||
$this->keylighter = $keylighter;
|
||||
$this->versioner = $versioner;
|
||||
}
|
||||
|
||||
/**
|
||||
* @Route("/languages", name="ajax_languages", methods={"GET"})
|
||||
*/
|
||||
public function __invoke()
|
||||
{
|
||||
return new JsonResponse($this->getLanguages()->values()->all());
|
||||
}
|
||||
|
||||
private function getLanguages()
|
||||
{
|
||||
switch (true) {
|
||||
case version_compare(KeyLighter::VERSION, '0.9-dev', '>='):
|
||||
$languages = require $this->versioner->getCurrentDir() . '/Config/metadata.php';
|
||||
|
||||
return collect($languages)->flatMap(function ($metadata) {
|
||||
return collect($metadata['name'])->map(function ($name) use ($metadata) {
|
||||
return [
|
||||
'class' => $metadata[0],
|
||||
'name' => $name,
|
||||
'standalone' => $metadata['standalone'],
|
||||
'embeddable' => $metadata['injectable'],
|
||||
];
|
||||
});
|
||||
});
|
||||
|
||||
default:
|
||||
$languages = collect($this->keylighter->registeredLanguages('name', true));
|
||||
|
||||
return $languages->map(function ($class, $language) {
|
||||
return [
|
||||
'name' => $language,
|
||||
'class' => $class,
|
||||
'standalone' => true,
|
||||
'embeddable' => true,
|
||||
];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace App\Twig;
|
||||
|
||||
|
||||
use App\Service\KeyLighterVersioner;
|
||||
use Kadet\Highlighter\KeyLighter;
|
||||
use Tightenco\Collect\Support\Collection;
|
||||
|
||||
class KeyLighterTwigAccess
|
||||
{
|
||||
private $keylighter;
|
||||
private $versioner;
|
||||
|
||||
public function __construct(KeyLighter $keylighter, KeyLighterVersioner $versioner)
|
||||
{
|
||||
$this->keylighter = $keylighter;
|
||||
$this->versioner = $versioner;
|
||||
}
|
||||
|
||||
public function getLanguages()
|
||||
{
|
||||
switch (true) {
|
||||
case version_compare(KeyLighter::VERSION, '0.9.0', '>'):
|
||||
$languages = require $this->versioner->getCurrentDir().'/Config/metadata.php';
|
||||
$languages = collect($languages);
|
||||
|
||||
$languages = $languages->reduce(function (Collection $collection, $language) {
|
||||
return $collection->merge(array_fill_keys($language['name'], [
|
||||
'class' => $language[0],
|
||||
'standalone' => $language['standalone'],
|
||||
'embeddable' => $language['injectable']
|
||||
]));
|
||||
}, collect());
|
||||
|
||||
return $languages;
|
||||
|
||||
default:
|
||||
$languages = collect($this->keylighter->registeredLanguages('name', true));
|
||||
|
||||
return $languages->mapWithKeys(function ($class, $language) {
|
||||
return [
|
||||
$language => [
|
||||
'class' => $class,
|
||||
'standalone' => true,
|
||||
'embeddable' => true,
|
||||
]
|
||||
];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,9 +24,6 @@
|
||||
|
||||
<div class="collapse navbar-collapse right" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item {% if showForm %}visible active{% endif %}" data-toggle="form" data-id="try-form" id="form-toggle">
|
||||
<a href="#try-form" class="nav-link slim"><i class="{{ fa('chevron-down', 'solid') }}"></i></a>
|
||||
</li>
|
||||
{{ helper.menu_entry('https://github.com/kadet1090/keylighter', 'GitHub', fa('github', 'brand'), current == 'github') }}
|
||||
{{ helper.menu_entry(url('changelog'), 'Changelog', fa('history'), current == 'changelog') }}
|
||||
{{ helper.menu_entry(url('documentation_show'), 'Docs', fa('book'), current == 'docs') }}
|
||||
|
||||
@ -5626,6 +5626,11 @@ raw-body@2.4.0:
|
||||
iconv-lite "0.4.24"
|
||||
unpipe "1.0.0"
|
||||
|
||||
react-async@^10.0.1:
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-async/-/react-async-10.0.1.tgz#575c083f808303d2f6ca52d11ec7554dbdbd9fcd"
|
||||
integrity sha512-ORUz5ca0B57QgBIzEZM5SuhJ6xFjkvEEs0gylLNlWf06vuVcLZsjIw3wx58jJkZG38p+0nUAxRgFW2b7mnVZzA==
|
||||
|
||||
react-dom@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user