updates

Author: JustDeveloper1

lib/builder.js

@@ -42,7 +42,7 @@ const Builder = () => {
                 <div><span>{translate.raw('builder-file')}</span><input id='builder-filepath' placeholder='index' value="just.config.js" data-value="just" /></div>
                 <noscript><span>{translate.raw('builder-filecontent')}</span></noscript>
                 <div id="monaco" />
-                <div className='aic'><span>{translate.raw('builder-filelanguage')}</span><Select titles={[translate.raw('builder-langdropup-collapsed'), translate.raw('builder-langdropup-expanded')]} items={[['JavaScript', '/img/js.svg']]} /></div>
+                <div className='aic'><span>{translate.raw('builder-filelanguage')}</span><Select titles={[translate.raw('builder-langdropup-collapsed'), translate.raw('builder-langdropup-expanded'), translate.raw('builder-langdropup-switchToLang')]} items={[['JavaScript', '/img/js.svg']]} /></div>
             </div>
             <Script id="rewrite-fetch">
                 {`

lib/ui/select.js

@@ -30,29 +30,56 @@ const GoogleFonts_Icons_ArrowDropUp = (props) => (
     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3" {...props}>
         <path d="M328-400q-9 0-14.5-6t-5.5-14q0-2 6-14l145-145q5-5 10-7t11-2q6 0 11 2t10 7l145 145q3 3 4.5 6.5t1.5 7.5q0 8-5.5 14t-14.5 6H328Z" />
     </svg>
-)
+);
+const Img = (item) => (<img src={item[1]} title={item[0]} alt="" className='fi r2px ow' />);
+
+let selectID = 0;
 
 const Select = ({
     titles,
     items,
     variable
 }) => {
-    let id = 0;
+    const [id, setID] = useState(0);
     const [switch_, setSwitch] = useState(false);
+    const [hover, setHover] = useState(false);
+
+    selectID++;
 
     return (
         <>
             <button 
                 title={switch_ ? titles[1] : titles[0]} 
                 type='button' 
-                className='bb cw sb scp' 
+                className='bb cw sb scp cp' 
                 onClick={() => setSwitch(!switch_)}
+                onMouseEnter={() => setHover(true)}
+                onMouseLeave={() => setHover(false)}
             >
-                <GoogleFonts_Icons_ArrowDropUp id="arw" />
-                <img src={items[id][1]} title={items[id][0]} alt="" className='fi r2px ow' />
+                <GoogleFonts_Icons_ArrowDropUp id="arw" className="t" style={
+                    hover ? 'translate:0px 10px;-webkit-translate:0px 10px' : 'translate:none;-webkit-translate:none'
+                } />
+                <Img item={items[id]} />
                 {items[id][0]}
             </button>
-            {switch_ ? <div className='du'>items</div> : <div />}
+            {switch_ ? <div className='du'>{
+                items.forEach((item, iid) => (
+                    <button
+                        title={titles[2] ? titles[2] : ''}
+                        type='button' 
+                        className='bb cw sb scp cp'
+                        onClick={() => {
+                            setID(iid);
+                            useEffect(() => {
+                                document.body.style.setProperty(`--${variable || 'select'+selectID}`, item[2]);
+                            });
+                        }}
+                    >
+                        <Img item={items[iid]} />
+                        {item[0]}
+                    </button>
+                ))
+            }</div> : <></>}
         </>
     )
 }

locales/en.json

@@ -3,5 +3,6 @@
     "builder-filecontent": "Content",
     "builder-filelanguage": "Language:",
     "builder-langdropup-collapsed": "Click to expand the drop-up.",
-    "builder-langdropup-expanded": "Click to collapse the drop-up."
+    "builder-langdropup-expanded": "Click to collapse the drop-up.",
+    "builder-langdropup-switchToLang": "Switch to "
 }

locales/ru.json

@@ -3,5 +3,6 @@
     "builder-filecontent": "Содержание",
     "builder-filelanguage": "Язык:",
     "builder-langdropup-collapsed": "Нажмите, чтобы раскрыть раскрывающийся список.",
-    "builder-langdropup-expanded": "Нажмите, чтобы свернуть раскрывающийся список."
+    "builder-langdropup-expanded": "Нажмите, чтобы свернуть раскрывающийся список.",
+    "builder-langdropup-switchToLang": "Переключится на "
 }

pages/style.css

@@ -167,3 +167,12 @@ button {
 .ow { /* Outline - White */
     outline: 4px solid white;
 }
+
+.cp { /* Cursor - Pointer */
+    cursor: pointer;
+}
+
+.t { /* Transition */
+    transition: 300ms;
+    -webkit-transition: 300ms;
+}