Add smileys in editing tools (#82)

The `line-height` change fixes excess spacing between the color palette
and the smileys.

Resolves #41.

src/config.ts

@@ -64,6 +64,7 @@ export const CLASS = {
     button_youtube: c("button-youtube"),
     splitQuote: c("split-quote"),
     colorPalette: c("color-palette"),
+    smileys: c("smileys"),
     preference: c("preference"),
     preferenceDescription: c("preference-description"),
     inlinePreference: c("inline-preference"),

src/operations/editing-tools.tsx

@@ -9,7 +9,8 @@ import { Position } from "~src/preferences/editing-tools";
 import * as SITE from "~src/site";
 import * as T from "~src/text";
 
-import { BUTTON, BUTTONS, Button, COLORS, colorButton, insertButton, tagButton } from "./logic/editing-tools";
+import { BUTTON, BUTTONS, Button, COLORS, colorButton, insertButton, smileyButton, tagButton } from "./logic/editing-tools";
+import { SMILEYS } from "./logic/smileys";
 
 export default (e: { textarea: HTMLElement }) => {
     const textarea = e.textarea;
@@ -31,6 +32,7 @@ interface EditingToolsConfig {
     embed: boolean
     doge: boolean
     color_palette: boolean
+    smileys: boolean
 }
 
 // Needs to be a function because it's used "live" in the preferences menu:
@@ -45,6 +47,7 @@ export function getEditingToolsConfig(): EditingToolsConfig {
         embed: Preferences.get(P.editing_tools._.embed),
         doge: Preferences.get(P.editing_tools._.doge),
         color_palette: Preferences.get(P.editing_tools._.color_palette),
+        smileys: Preferences.get(P.editing_tools._.smileys),
     } as const;
 }
 
@@ -58,6 +61,7 @@ export function EditingTools(props: {
     const connectedTagButton = compose(connected, tagButton);
     const connectedInsertButton = compose(connected, insertButton);
     const connectedColorButton = compose(connected, colorButton);
+    const connectedSmileyButton = compose(connected, smileyButton);
     return (
         <div id={CONFIG.ID.editingTools} class={classNames(
             CONFIG.CLASS.editingTools,
@@ -92,6 +96,11 @@ export function EditingTools(props: {
                     {COLORS.map(connectedColorButton)}
                 </fieldset>
             ) : null}
+            {props.config.smileys ? (
+                <fieldset class={CONFIG.CLASS.smileys}>
+                    {SMILEYS.map(connectedSmileyButton)}
+                </fieldset>
+            ) : null}
         </div>
     );
 }

src/operations/logic/editing-tools.tsx

@@ -1,4 +1,5 @@
 import * as BB from "bbcode-tags";
+import classNames from "classnames";
 import { lines, unlines } from "lines-unlines";
 import { h } from "preact";
 
@@ -13,6 +14,7 @@ import * as T from "~src/text";
 import { InsertButtonDescription } from "~src/types";
 import { fromMaybeUndefined, r } from "~src/utilities";
 
+import * as Smileys from "./smileys";
 import { Action, CursorBehavior, insert, insertIn, placeCursorIn, selectedTextIn, wrapIn, wrap_tag, wrap_verbatim } from "./textarea";
 
 export const BUTTON = {
@@ -137,6 +139,7 @@ type ButtonDescription = Readonly<{
     parameterized?: boolean,
     block?: boolean,
     icon?: Icon,
+    custom?: boolean,
     cursor?: CursorBehavior,
     action: Action,
     style?: string,
@@ -181,13 +184,23 @@ export function colorButton(color: string): Button {
     });
 }
 
-export function generalButton(button: Pick<ButtonDescription, "label" | "tooltip" | "class" | "icon" | "action" | "style">): Button {
+export function smileyButton(smiley: Smileys.Smiley): Button {
+    return generalButton({
+        label: "",
+        tooltip: Smileys.codeFor(smiley),
+        custom: true,
+        class: classNames(SITE.CLASS.smiley, Smileys.classFor(smiley)),
+        action: insert(" " + Smileys.codeFor(smiley) + " "), // Spaces are necessary around a smiley. (Multiple ones collapse.)
+    });
+}
+
+export function generalButton(button: Pick<ButtonDescription, "label" | "tooltip" | "class" | "icon" | "custom" | "action" | "style">): Button {
     return textarea => {
         const icon = button.icon;
         const label = (icon === undefined ? "" : icon.type === "URL" ? `<img src="${icon.image}" />` : icon.image) + fromMaybeUndefined("", button.label);
         const className = [
             button.class || "",
-            SITE.CLASS.button,
+            button.custom ? "" : SITE.CLASS.button,
             icon === undefined ? "" : " " + CONFIG.CLASS.iconButton,
         ].join(" ").trim();
         return (

src/operations/logic/smileys.ts

@@ -0,0 +1,32 @@
+export type Smiley = readonly [string, string]
+
+export const SMILEYS: ReadonlyArray<Smiley> = [
+    // Pairs of BBCode code and CSS class:
+    [ ":)", "smiley-smile" ],
+    [ ";)", "smiley-wink" ],
+    [ ":D", "smiley-biggrin" ],
+    [ ":P", "smiley-tongue" ],
+    [ ":O", "smiley-surprised" ],
+    [ ":(", "smiley-frown" ],
+    [ ";(", "smiley-cry" ],
+    [ ":|", "smiley-speechless" ],
+    [ ":arrow:", "smiley-arrow" ],
+    [ ":up:", "smiley-up" ],
+    [ ":down:", "smiley-down" ],
+    [ ":confused:", "smiley-confused" ],
+    [ ":mad:", "smiley-mad" ],
+    [ ":lol:", "smiley-lol" ],
+    [ ":joyful:", "smiley-joyful" ],
+    [ ":cool:", "smiley-cool" ],
+    [ ":ninja:", "smiley-ninja" ],
+    [ ":innocent:", "smiley-innocent" ],
+    [ ":rolleyes:", "smiley-rolleyes" ],
+];
+
+export function codeFor(smiley: Smiley): string {
+    return smiley[0];
+}
+
+export function classFor(smiley: Smiley): string {
+    return smiley[1];
+}

src/preferences/editing-tools.ts

@@ -152,4 +152,11 @@ export default {
         extras: { class: CONFIG.CLASS.editingTools },
         dependencies,
     }),
+    smileys: new BooleanPreference({
+        key: "editing_tools_smileys",
+        default: true,
+        label: T.preferences.editing_tools.smileys,
+        extras: { class: CONFIG.CLASS.editingTools },
+        dependencies,
+    }),
 } as const;

src/site.ts

@@ -67,6 +67,7 @@ export const CLASS = {
     socialMediaButtons: [ `threadShare`, `greyContentShare`, `sideShare` ],
     sideBox: "sideBox",
     signinSection: "signin",
+    smiley: "smiley",
     subforumLink: "link",
     toolbarGroup: "tbGroup",
     toolbarButton: "tbButton iconButton noselect",

src/stylesheets/editing-tools.scss

@@ -18,6 +18,8 @@
     $FADE_BRIGHT: linear-gradient(to bottom, rgba(255,255,255,2*$FADE_OPACITY) 0%,rgba(100,100,100,2*$FADE_OPACITY) 100%);
     $FADE_INVERTED: linear-gradient(to top, rgba(255,255,255,$FADE_OPACITY) 0%,rgba(0,0,0,$FADE_OPACITY) 100%);
 
+    line-height: 0;
+
     big {
         font-size: 1.25em;
     }
@@ -30,9 +32,6 @@
         height: 23px;
         box-sizing: border-box;
         margin: 0 1px 0 0;
-        * {
-            line-height: 0;
-        }
     }
 
     .#{getGlobal("SITE.CLASS.button")}:last-of-type {
@@ -73,6 +72,18 @@
         opacity: 1;
     }
 
+    .#{getGlobal("CONFIG.CLASS.smileys")} {
+        > * {
+            // Size is set by SweClockers.
+            opacity: 0.5;
+            padding: 0 1px;
+            transition: opacity 50ms linear;
+
+            &:hover, &:active {
+                opacity: 1;
+            }
+        }
+    }
 
     $RAINBOW_OPACITY: 0.7;
     $RAINBOW: linear-gradient(to right, rgba(255,0,0,$RAINBOW_OPACITY) 0%,rgba(255,153,50,$RAINBOW_OPACITY) 16%,rgba(247,227,49,$RAINBOW_OPACITY) 33%,rgba(62,211,42,$RAINBOW_OPACITY) 49%,rgba(46,117,232,$RAINBOW_OPACITY) 66%,rgba(90,45,226,$RAINBOW_OPACITY) 83%,rgba(152,25,198,$RAINBOW_OPACITY) 100%);

src/text.ts

@@ -161,6 +161,7 @@ export const preferences = {
         doge_description: `            wow`,
         color_palette: `Färgpaletten`,
         color_palette_description: `Ändra textfärg snabbt och enkelt`,
+        smileys: `Smileys`,
     },
 
     dark_theme: {