- Create PostFiles top-level component managing file display state - Add FileCarousel component for thumbnail navigation - Add DisplayedFile component for content rendering - Add FileDetails component for metadata display - Update props_for_post_files helper to generate HTML content server-side - Replace HTML/JS carousel with prerendered React components - Maintain single file layout compatibility - Add proper TypeScript interfaces and error handling - Register components in application and server bundles Components now handle: - Multiple file carousel display above content - File content switching via React state - Server-side rendered HTML injection - File details metadata display - Responsive thumbnail grid with selection states
31 lines
1.2 KiB
JavaScript
31 lines
1.2 KiB
JavaScript
import ReactOnRails from 'react-on-rails';
|
|
|
|
import UserSearchBar from '../bundles/Main/components/UserSearchBar';
|
|
import { PostHoverPreviewWrapper } from '../bundles/Main/components/PostHoverPreviewWrapper';
|
|
import { UserHoverPreviewWrapper } from '../bundles/Main/components/UserHoverPreviewWrapper';
|
|
import { TrackedObjectsChart } from '../bundles/Main/components/TrackedObjectsChart';
|
|
import { PostFiles } from '../bundles/Main/components/PostFiles';
|
|
import { initCollapsibleSections } from '../bundles/UI/collapsibleSections';
|
|
import { IpAddressInput } from '../bundles/UI/components';
|
|
import { StatsPage } from '../bundles/Main/components/StatsPage';
|
|
import VisualSearchForm from '../bundles/Main/components/VisualSearchForm';
|
|
import { initUserMenu } from '../bundles/UI/userMenu';
|
|
|
|
// This is how react_on_rails can see the components in the browser.
|
|
ReactOnRails.register({
|
|
UserSearchBar,
|
|
PostHoverPreviewWrapper,
|
|
UserHoverPreviewWrapper,
|
|
TrackedObjectsChart,
|
|
PostFiles,
|
|
IpAddressInput,
|
|
StatsPage,
|
|
VisualSearchForm,
|
|
});
|
|
|
|
// Initialize UI components
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
initCollapsibleSections();
|
|
initUserMenu();
|
|
});
|