Rename components to have *.jsx extension

This is a preliminary step to the actual conversion to JSX.

scripts/components/app.js → scripts/components/app.jsx

@@ -1,9 +1,9 @@
 import m from 'mithril';
 import App from '../models/app.js';
-import UpdateNotificationComponent from './update-notification.js';
-import AppHeaderComponent from './app-header.js';
-import StoryComponent from './story.js';
-import StorageUpgraderComponent from './storage-upgrader.js';
+import UpdateNotificationComponent from './update-notification.jsx';
+import AppHeaderComponent from './app-header.jsx';
+import StoryComponent from './story.jsx';
+import StorageUpgraderComponent from './storage-upgrader.jsx';
 
 class AppComponent {
 

scripts/components/control.js

@@ -1,6 +1,6 @@
 import m from 'mithril';
 import classNames from '../classnames.js';
-import PanelComponent from './panel.js';
+import PanelComponent from './panel.jsx';
 
 class ControlComponent {
 

scripts/components/control.jsx

@@ -0,0 +1,34 @@
+import m from 'mithril';
+import classNames from '../classnames.js';
+import PanelComponent from './panel.jsx';
+
+class ControlComponent {
+
+  view({attrs: {id, title, icon = null, label = null, action = null, panel = null, panelPosition = 'top'}}) {
+    return m(`div.control.control-${id}`, {
+      class: classNames({'control-has-label': label})
+    }, [
+      panel ? m(PanelComponent, {id, position: panelPosition}, panel) : null,
+      m('button.control-button', {
+        title,
+        onclick: ({target}) => {
+          if (panel) {
+            PanelComponent.togglePanel(id);
+          } else if (action) {
+            // Do not close the panel where the clicked control resides
+            if (!target.closest('.panel')) {
+              PanelComponent.closeAllPanels();
+            }
+            action();
+          }
+        }
+      }, [
+        icon ? m('img.control-icon', {src: `icons/${icon}.svg`, alt: title}) : null,
+        label ? m('span.control-label', label) : null
+      ])
+    ]);
+  }
+
+}
+
+export default ControlComponent;

scripts/components/drawing-area.js → scripts/components/drawing-area.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import FrameComponent from './frame.js';
+import FrameComponent from './frame.jsx';
 
 class DrawingAreaComponent extends FrameComponent {
 

scripts/components/export-gif.js → scripts/components/export-gif.jsx

@@ -1,7 +1,7 @@
 import m from 'mithril';
 import classNames from '../classnames.js';
-import ControlComponent from './control.js';
-import ProgressBarComponent from './progress-bar.js';
+import ControlComponent from './control.jsx';
+import ProgressBarComponent from './progress-bar.jsx';
 
 class ExportGifComponent {
 

scripts/components/export.js → scripts/components/export.jsx

@@ -1,10 +1,10 @@
 import m from 'mithril';
 import GIF from 'gif.js.optimized';
 import GIFWorkerUrl from 'gif.js.optimized/dist/gif.worker.js?url';
-import FrameComponent from './frame.js';
-import ControlComponent from './control.js';
-import ProgressBarComponent from './progress-bar.js';
-import ExportGifComponent from './export-gif.js';
+import FrameComponent from './frame.jsx';
+import ControlComponent from './control.jsx';
+import ProgressBarComponent from './progress-bar.jsx';
+import ExportGifComponent from './export-gif.jsx';
 
 class ExportComponent {
 

scripts/components/import.js → scripts/components/import.jsx

@@ -1,8 +1,8 @@
 import m from 'mithril';
 import Story from '../models/story.js';
-import ControlComponent from './control.js';
-import PanelComponent from './panel.js';
-import ProgressBarComponent from './progress-bar.js';
+import ControlComponent from './control.jsx';
+import PanelComponent from './panel.jsx';
+import ProgressBarComponent from './progress-bar.jsx';
 
 class ImportComponent {
 

scripts/components/modal.js → scripts/components/modal.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import OverlayComponent from './overlay.js';
+import OverlayComponent from './overlay.jsx';
 
 class ModalComponent {
 

scripts/components/settings.js → scripts/components/settings.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import ControlComponent from './control.js';
+import ControlComponent from './control.jsx';
 
 class SettingsComponent {
 

scripts/components/storage-upgrader.js → scripts/components/storage-upgrader.jsx

@@ -1,8 +1,8 @@
 import m from 'mithril';
-import DismissableOverlayComponent from './overlay.js';
-import LoadingComponent from './loading.js';
+import DismissableOverlayComponent from './overlay.jsx';
+import LoadingComponent from './loading.jsx';
 import StorageUpgrader from '../models/storage-upgrader.js';
-import ModalComponent from './modal.js';
+import ModalComponent from './modal.jsx';
 import _ from 'underscore';
 
 class StorageUpgraderComponent {

scripts/components/story-controls.js → scripts/components/story-controls.jsx

@@ -1,8 +1,8 @@
 import m from 'mithril';
-import ControlComponent from './control.js';
-import SettingsComponent from './settings.js';
-import ExportComponent from './export.js';
-import TimelineComponent from './timeline.js';
+import ControlComponent from './control.jsx';
+import SettingsComponent from './settings.jsx';
+import ExportComponent from './export.jsx';
+import TimelineComponent from './timeline.jsx';
 
 class StoryControlsComponent {
 

scripts/components/story-editor.js → scripts/components/story-editor.jsx

@@ -1,8 +1,8 @@
 import m from 'mithril';
 import classNames from '../classnames.js';
-import FrameComponent from './frame.js';
-import DrawingAreaComponent from './drawing-area.js';
-import StoryControlsComponent from './story-controls.js';
+import FrameComponent from './frame.jsx';
+import DrawingAreaComponent from './drawing-area.jsx';
+import StoryControlsComponent from './story-controls.jsx';
 
 class StoryEditorComponent {
 

scripts/components/story-header.js → scripts/components/story-header.jsx

@@ -1,8 +1,8 @@
 import m from 'mithril';
-import ControlComponent from './control.js';
-import PanelComponent from './panel.js';
-import StoryListComponent from './story-list.js';
-import ImportComponent from './import.js';
+import ControlComponent from './control.jsx';
+import PanelComponent from './panel.jsx';
+import StoryListComponent from './story-list.jsx';
+import ImportComponent from './import.jsx';
 
 class StoryHeaderComponent {
 

scripts/components/story-list.js → scripts/components/story-list.jsx

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import PanelComponent from './panel.js';
+import PanelComponent from './panel.jsx';
 
 class StoryListComponent {
 

scripts/components/story.js → scripts/components/story.jsx

@@ -1,6 +1,6 @@
 import m from 'mithril';
-import StoryHeaderComponent from './story-header.js';
-import StoryEditorComponent from './story-editor.js';
+import StoryHeaderComponent from './story-header.jsx';
+import StoryEditorComponent from './story-editor.jsx';
 
 class StoryComponent {
 

scripts/components/timeline.js → scripts/components/timeline.jsx

@@ -1,6 +1,6 @@
 import m from 'mithril';
 import classNames from '../classnames.js';
-import FrameComponent from './frame.js';
+import FrameComponent from './frame.jsx';
 
 const FRAME_THUMBNAIL_WIDTH = 128;
 const FRAME_THUMBNAIL_HEIGHT = 72;

scripts/index.js

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import AppComponent from './components/app.js';
+import AppComponent from './components/app.jsx';
 import '../styles/index.scss';
 import '@fontsource/roboto-slab/400.css';
 import '@fontsource/roboto-slab/600.css';