Load colour presets through public API endpoint.

src/mami.css/controls/throbber.css

@@ -9,6 +9,8 @@
     display: inline-flex;
     min-width: 0;
     min-height: 0;
+    width: var(--throbber-container-width, auto);
+    height: var(--throbber-container-height, auto);
 }
 
 .throbber-frame {

src/mami.js/colpick/picker.jsx

@@ -12,6 +12,7 @@ const MamiColourPicker = function(options) {
         define('colour').default(0).filter(value => Math.min(0xFFFFFF, Math.max(0, value))).done();
         define('posX').default(-1).done();
         define('posY').default(-1).done();
+        define('flashii').type('object').default(null).done();
         define('presets').default([]).constraint(value => Array.isArray(value)).done();
         define('showPresetsTab').default(true).done();
         define('showGridTab').default(true).done();
@@ -114,8 +115,8 @@ const MamiColourPicker = function(options) {
         },
     });
 
-    if(options.showPresetsTab && options.presets.length > 0)
-        tabs.add(new MamiColourPickerPresetsTab(options.presets));
+    if(options.showPresetsTab && (options.flashii !== null || options.presets.length > 0))
+        tabs.add(new MamiColourPickerPresetsTab(options.flashii ?? options.presets));
     if(options.showGridTab)
         tabs.add(new MamiColourPickerGridTab);
     if(options.showSlidersTab)

src/mami.js/colpick/tpresets.jsx

@@ -1,14 +1,35 @@
 #include colour.js
+#include controls/throbber.jsx
 
 const MamiColourPickerPresetsTab = function(presets) {
     let onChange = () => {};
 
     const html = <div/>;
 
-    for(const preset of presets)
-        html.appendChild(<button class={['colpick-presets-option', `colpick-presets-option-${preset.c}`]}
-            style={{ background: MamiColour.hex(preset.c) }} title={preset.n}
-            type="button" onclick={() => onChange(preset.c)}/>);
+    const appendColours = (presets, titleParam, rgbParam) => {
+        for(const preset of presets)
+            html.appendChild(<button class={['colpick-presets-option', `colpick-presets-option-${preset[rgbParam]}`]}
+                style={{ background: MamiColour.hex(preset[rgbParam]) }} title={preset[titleParam]}
+                type="button" onclick={() => onChange(preset[rgbParam])}/>);
+    };
+
+    // todo: make this not bad
+    if(Array.isArray(presets)) {
+        appendColours(presets, 'n', 'c');
+    } else {
+        const throbber = <Throbber containerWidth="100%" containerHeight="230px" />;
+        $appendChild(html, throbber);
+
+        presets.v1.colours.presets({ fields: ['title', 'rgb'] })
+            .then(presets => {
+                $removeChild(html, throbber);
+                appendColours(presets, 'title', 'rgb');
+            })
+            .catch(ex => {
+                console.error(ex);
+                throbber.icon.stop().then(() => { throbber.icon.batsu(); });
+            });
+    }
 
     return {
         get name() { return 'presets'; },

src/mami.js/html.js

@@ -43,6 +43,24 @@ const $appendChildren = function(element, ...children) {
         $appendChild(element, child);
 };
 
+const $removeChild = function(element, child) {
+    switch(typeof child) {
+        case 'function':
+            $removeChild(element, child());
+            break;
+
+        case 'object':
+            if(child === null)
+                break;
+
+            if(child instanceof Node)
+                element.removeChild(child);
+            else if(child?.element instanceof Node)
+                element.removeChild(child.element);
+            break;
+    }
+};
+
 const $removeChildren = function(element) {
     while(element.lastChild)
         element.removeChild(element.lastChild);

src/mami.js/main.js

@@ -300,7 +300,7 @@ const MamiInit = async args => {
                 onclick: ev => {
                     if(bbCode.tag === 'color') {
                         if(colourPicker === undefined) {
-                            colourPicker = new MamiColourPicker({ presets: futami.get('colours') });
+                            colourPicker = new MamiColourPicker({ flashii: ctx.flashii });
                             layout.element.appendChild(colourPicker.element);
                         }