feat: migrate from Create React App to Vite
Rebuild the site on the stack the other converted sites share: Vite 8, React 19, TypeScript 7, react-router 8, Biome and sanitize.css, with the site data moved out of the bundle into static-contents/. - base the database, credits and pico code on cerebellum.neuroinf.jp, keeping this site's item types, rankings and menus - port the MediaWiki pages to function components - serve all module data from modules/, redirecting the old download and /database/file URLs - tile the plate texture and keep form controls on white - track page views with GA4
This commit is contained in:
+21
-32
@@ -1,36 +1,25 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.eslintcache
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# database contents
|
||||
/dl-limit-items.csv
|
||||
/public/database
|
||||
/public/credits
|
||||
/public/documents
|
||||
/public/hackathon
|
||||
/public/mediawiki
|
||||
/src/database/assets/*.json
|
||||
/src/credits/assets/*.json
|
||||
/src/pico/assets/*.json
|
||||
/src/mediawiki/assets/*.json
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
// Keep @types/node on the 24.x line to match the deployment target. Its
|
||||
// "latest" dist-tag points at the 22.x line, so the default target would
|
||||
// report no updates at all instead of offering 24.x patches.
|
||||
export default {
|
||||
target: (name) => (name === '@types/node' ? 'minor' : 'latest'),
|
||||
};
|
||||
@@ -1,44 +1,108 @@
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
# Dynamic Brain Platform
|
||||
|
||||
## Available Scripts
|
||||
Static front-end for the archived [Dynamic Brain Platform](https://dynamicbrain.neuroinf.jp/),
|
||||
built with [Vite](https://vite.dev/), React and TypeScript.
|
||||
|
||||
In the project directory, you can run:
|
||||
## Requirements
|
||||
|
||||
### `npm start`
|
||||
- Node.js 20.19+ / 22.12+ (Vite 8)
|
||||
- npm
|
||||
|
||||
Runs the app in the development mode.<br>
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
## Setup
|
||||
|
||||
The page will reload if you make edits.<br>
|
||||
You will also see any lint errors in the console.
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### `npm test`
|
||||
## Site data
|
||||
|
||||
Launches the test runner in the interactive watch mode.<br>
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
The pages are rendered from JSON dumped out of the original XOOPS installation
|
||||
by [xoops-static-exporter](https://git.ni.riken.jp/niu/xoops-static-exporter)
|
||||
(`sites/dynamicbrain.neuroinf.jp/`). All of it lives in `static-contents/`,
|
||||
which sits next to the repository rather than inside it:
|
||||
|
||||
### `npm run build`
|
||||
```
|
||||
dynamicbrain.neuroinf.jp/
|
||||
├── dynamicbrain.neuroinf.jp/ this repository
|
||||
└── static-contents/
|
||||
├── modules/ one directory per source XOOPS module
|
||||
│ ├── credits/ credits.json, images/
|
||||
│ ├── documents/ pico: config.json, <content id>.json, images/
|
||||
│ ├── hackathon/ pico: config.json, <content id>.json, images/, data/
|
||||
│ ├── mediawiki/ contents.json, contents/<id>.json, images/
|
||||
│ └── xoonips/ tree.json, items.json, rankings, file/<id>/
|
||||
├── conferences/ static conference sites, served as they are
|
||||
├── hetero/ static project site, served as it is
|
||||
└── rss.xml
|
||||
```
|
||||
|
||||
Builds the app for production to the `build` folder.<br>
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
The `RewriteBase` in every `modules/xoonips/file/<id>/.htaccess` carries the
|
||||
absolute path of that directory, and the image and file URLs inside the JSON
|
||||
carry `/modules/<module>/...`; both have to move with the layout.
|
||||
|
||||
The build is minified and the filenames include the hashes.<br>
|
||||
Your app is ready to be deployed!
|
||||
The dev and preview servers mount that directory at the site root. It is kept
|
||||
out of `dist/`, and it is not tracked in git.
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
## Scripts
|
||||
|
||||
### `npm run eject`
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| `npm run dev` | Start the dev server on http://localhost:5173 |
|
||||
| `npm run build` | Type-check and build into `dist/` |
|
||||
| `npm run preview` | Serve the production build on http://localhost:4173 |
|
||||
| `npm run lint` | Lint with [Biome](https://biomejs.dev/) |
|
||||
| `npm run format` | Format with Biome |
|
||||
| `npm run check` | Lint, format and organize imports, applying the safe fixes |
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
`@types/node` is pinned to the major that matches the Node runtime in use (24);
|
||||
`.ncurc.js` keeps `npm-check-updates` from bumping it past that.
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
There is currently no test suite.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
## Styles
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
The base stylesheet is `sanitize.css` with its `forms` and `typography` sheets,
|
||||
with its `box-sizing: border-box` kept. Where one of its defaults does not suit
|
||||
the theme, the theme rule for that place sets its own value rather than
|
||||
overriding the element everywhere.
|
||||
|
||||
## Learn More
|
||||
## Deployment
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
Build locally and copy the result up; the server does not need a toolchain.
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
```sh
|
||||
npm ci
|
||||
npm run check
|
||||
npm run build
|
||||
../deploy.sh
|
||||
```
|
||||
|
||||
`deploy.sh`, next to `static-contents/`, sends the data to
|
||||
`archive:/data/www/dynamicbrain.neuroinf.jp/static-contents/`, then `dist/` to
|
||||
`.../html/`, and finally links every top-level entry of `static-contents/` into
|
||||
the document root over ssh (`ln -sfn ../static-contents/* .`). The data has to
|
||||
go first: the document root's `rsync --delete` removes those links, and they
|
||||
are only put back at the end.
|
||||
|
||||
Apache needs `Options FollowSymLinks` and `AllowOverride All` on both
|
||||
directories. Use symlinks rather than `Alias`: an `Alias` maps the URL outside
|
||||
the document root, so `.htaccess` no longer applies and the SPA fallback and
|
||||
the redirects stop working.
|
||||
|
||||
### Redirects
|
||||
|
||||
`.htaccess` redirects these addresses with a 301:
|
||||
|
||||
| From | To |
|
||||
| --- | --- |
|
||||
| `/modules/xoonips/download.php?file_id=N` | `/modules/xoonips/file/N` |
|
||||
| `/database/file/...` | `/modules/xoonips/file/...` |
|
||||
|
||||
XOOPS-style addresses (`/modules/xoonips/detail.php?item_id=N`,
|
||||
`/modules/mediawiki/index.php/<page>`, `/modules/documents/...`,
|
||||
`/modules/credits/...`, `/index.php`) are redirected inside the app.
|
||||
|
||||
## Google Analytics
|
||||
|
||||
`GOOGLE_ANALYTICS_TRACKING_ID` in `src/config.ts` carries the GA4 measurement
|
||||
ID. Emptying it disables tracking. Only production builds send page views.
|
||||
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/2.5.13/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
"useIgnoreFile": true
|
||||
},
|
||||
"files": {
|
||||
"includes": ["**", "!**/dist", "!src/common/assets", "!src/mediawiki/assets"]
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space",
|
||||
"indentWidth": 4,
|
||||
"lineWidth": 120
|
||||
},
|
||||
"javascript": {
|
||||
"formatter": {
|
||||
"quoteStyle": "single",
|
||||
"jsxQuoteStyle": "double",
|
||||
"semicolons": "always",
|
||||
"trailingCommas": "es5",
|
||||
"arrowParentheses": "always"
|
||||
}
|
||||
},
|
||||
"linter": {
|
||||
"enabled": true,
|
||||
"rules": {
|
||||
"preset": "recommended"
|
||||
}
|
||||
},
|
||||
"assist": {
|
||||
"actions": {
|
||||
"source": {
|
||||
"organizeImports": "on"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
@@ -13,11 +13,12 @@
|
||||
<meta name="keywords" content="neuroinformatics, xoonips, database, dynamic brain platform, dynamic principles of brain functions" />
|
||||
<meta name="author" content="Neuroinformatics Unit, RIKEN Center for Brain Science" />
|
||||
<meta name="copyright" content="Copyright © 2019" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>Dynamic Brain Platform - Official Site</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+2104
File diff suppressed because it is too large
Load Diff
+41
-62
@@ -1,64 +1,43 @@
|
||||
{
|
||||
"name": "dynamicbrain",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@types/async-lock": "^1.1.1",
|
||||
"@types/jest": "26.0.23",
|
||||
"@types/lokijs": "^1.5.4",
|
||||
"@types/node": "15.6.1",
|
||||
"@types/react": "17.0.8",
|
||||
"@types/react-dom": "17.0.5",
|
||||
"@types/react-helmet": "^6.1.1",
|
||||
"@types/react-html-parser": "^2.0.1",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"@types/react-router-hash-link": "^2.4.0",
|
||||
"async-lock": "^1.3.0",
|
||||
"axios": "^0.21.1",
|
||||
"lokijs": "^1.5.12",
|
||||
"moment": "^2.29.1",
|
||||
"rc-tree": "^4.1.5",
|
||||
"react": "^17.0.2",
|
||||
"react-app-polyfill": "^2.0.0",
|
||||
"react-cookie": "^4.0.3",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-ga": "^3.3.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-html-parser": "^2.0.2",
|
||||
"react-image-lightbox": "^5.1.1",
|
||||
"react-overlays": "^5.0.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-router-hash-link": "^2.4.3",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-spinner-material": "^1.1.3",
|
||||
"react-twitter-widgets": "^1.10.0",
|
||||
"typescript": "4.3.2",
|
||||
"xregexp": "^5.0.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all",
|
||||
"ie 11"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version",
|
||||
"ie 11"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"less": "^4.1.1"
|
||||
}
|
||||
"name": "dynamicbrain",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "biome lint",
|
||||
"format": "biome format --write",
|
||||
"check": "biome check --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dr.pogodin/react-helmet": "^3.2.3",
|
||||
"@orrisroot/react-html-parser": "^3.0.1",
|
||||
"async-lock": "^1.4.1",
|
||||
"date-fns": "^4.4.0",
|
||||
"ky": "^2.1.0",
|
||||
"lokijs": "^1.5.12",
|
||||
"rc-tree": "^5.13.1",
|
||||
"react": "^19.3.0",
|
||||
"react-cookie": "^8.1.2",
|
||||
"react-dom": "^19.3.0",
|
||||
"react-ga4": "^3.0.1",
|
||||
"react-overlays": "^5.2.1",
|
||||
"react-router": "^8.3.1",
|
||||
"sanitize.css": "^13.0.0",
|
||||
"yet-another-react-lightbox": "^3.32.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^2.5.13",
|
||||
"@types/async-lock": "^1.4.2",
|
||||
"@types/lokijs": "^1.5.14",
|
||||
"@types/node": "^24.13.4",
|
||||
"@types/react": "^19.3.0",
|
||||
"@types/react-dom": "^19.3.0",
|
||||
"@vitejs/plugin-react": "^6.1.1",
|
||||
"sirv": "^3.0.2",
|
||||
"typescript": "~7.0.2",
|
||||
"vite": "^8.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
+4
-1
@@ -2,7 +2,10 @@ RewriteEngine on
|
||||
RewriteBase /
|
||||
|
||||
RewriteCond %{QUERY_STRING} (^|&)file_id=([0-9]+)($|&)
|
||||
RewriteRule ^modules/xoonips/download.php /database/file/%2? [R=301,L]
|
||||
RewriteRule ^modules/xoonips/download.php /modules/xoonips/file/%2? [R=301,L]
|
||||
|
||||
# File downloads moved under /modules/xoonips/ ; keep the v1.0.0 links alive.
|
||||
RewriteRule ^database/file/(.*)$ /modules/xoonips/file/$1 [R=301,L]
|
||||
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d [OR]
|
||||
|
||||
+13
-13
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"short_name": "Dynamic Brain Platform",
|
||||
"name": "Dynamic Brain Platform",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "32x32 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
"short_name": "Dynamic Brain Platform",
|
||||
"name": "Dynamic Brain Platform",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "32x32 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
||||
+1
-2
@@ -1,2 +1 @@
|
||||
@import url('./common/assets/xoops.css');
|
||||
@import url('./common/assets/theme/style.css');
|
||||
@import url("./common/assets/theme/style.css");
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
+11
-14
@@ -1,20 +1,17 @@
|
||||
import React, { Component } from 'react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { HelmetProvider } from '@dr.pogodin/react-helmet';
|
||||
import { CookiesProvider } from 'react-cookie';
|
||||
import { BrowserRouter } from 'react-router';
|
||||
import AppRoot from './common/AppRoot';
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CookiesProvider>
|
||||
<BrowserRouter>
|
||||
<AppRoot />
|
||||
</BrowserRouter>
|
||||
</CookiesProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
const App = () => (
|
||||
<HelmetProvider>
|
||||
<CookiesProvider>
|
||||
<BrowserRouter>
|
||||
<AppRoot />
|
||||
</BrowserRouter>
|
||||
</CookiesProvider>
|
||||
</HelmetProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
+47
-66
@@ -1,85 +1,66 @@
|
||||
import React, { Component } from 'react';
|
||||
import { ReactCookieProps, withCookies } from 'react-cookie';
|
||||
import ReactGA from 'react-ga';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { RouteComponentProps, withRouter } from 'react-router-dom';
|
||||
import Config, { MultiLang } from '../config';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useCookies } from 'react-cookie';
|
||||
import ReactGA from 'react-ga4';
|
||||
import { useLocation } from 'react-router';
|
||||
import Config, { type MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import CenterColumn from './CenterColumn';
|
||||
import Footer from './Footer';
|
||||
import Header from './Header';
|
||||
import LeftColumn from './LeftColumn';
|
||||
import Footer from './Footer';
|
||||
|
||||
const isAnalyticsEnabled = import.meta.env.PROD && Config.GOOGLE_ANALYTICS_TRACKING_ID !== '';
|
||||
|
||||
interface Props extends RouteComponentProps, ReactCookieProps { }
|
||||
interface State {
|
||||
lang: MultiLang;
|
||||
if (isAnalyticsEnabled) {
|
||||
// Page views are sent from the location effect below, the first one included;
|
||||
// gtag's own page_view on config would count the landing page twice.
|
||||
ReactGA.initialize(Config.GOOGLE_ANALYTICS_TRACKING_ID, { gtagOptions: { send_page_view: false } });
|
||||
}
|
||||
|
||||
class AppRoot extends Component<Props, State> {
|
||||
const toMultiLang = (value: unknown): MultiLang | null => (value === 'en' || value === 'ja' ? value : null);
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { lang: 'en' };
|
||||
if (process.env.NODE_ENV === 'production' && Config.GOOGLE_ANALYTICS_TRACKING_ID !== '') {
|
||||
ReactGA.initialize(Config.GOOGLE_ANALYTICS_TRACKING_ID);
|
||||
}
|
||||
}
|
||||
const AppRoot = () => {
|
||||
const location = useLocation();
|
||||
const [cookies, setCookie] = useCookies(['ml_lang']);
|
||||
const previousLocation = useRef<string | null>(null);
|
||||
|
||||
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
const params = new URLSearchParams(nextProps.location.search);
|
||||
const param_lang = params.get('ml_lang');
|
||||
const cookie_lang = typeof nextProps.cookies !== 'undefined' ? nextProps.cookies.get('ml_lang') : null;
|
||||
let lang = param_lang || (typeof cookie_lang === 'string' ? cookie_lang : null) || prevState.lang;
|
||||
if (lang !== 'en' && lang !== 'ja') {
|
||||
lang = 'en';
|
||||
}
|
||||
if (cookie_lang !== lang) {
|
||||
if (typeof nextProps.cookies !== 'undefined') {
|
||||
nextProps.cookies.set('ml_lang', lang, { path: '/' });
|
||||
}
|
||||
}
|
||||
if (prevState.lang !== lang) {
|
||||
return { lang };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const paramLang = toMultiLang(new URLSearchParams(location.search).get('ml_lang'));
|
||||
const cookieLang = toMultiLang(cookies.ml_lang);
|
||||
const lang: MultiLang = paramLang ?? cookieLang ?? 'en';
|
||||
|
||||
componentDidMount() {
|
||||
const { pathname } = this.props.location;
|
||||
if (process.env.NODE_ENV === 'production' && Config.GOOGLE_ANALYTICS_TRACKING_ID !== '') {
|
||||
ReactGA.set({ page: pathname });
|
||||
ReactGA.pageview(pathname);
|
||||
useEffect(() => {
|
||||
if (cookies.ml_lang !== lang) {
|
||||
setCookie('ml_lang', lang, { path: '/' });
|
||||
}
|
||||
}
|
||||
}, [cookies.ml_lang, lang, setCookie]);
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
const { pathname, search } = this.props.location;
|
||||
if (process.env.NODE_ENV === 'production' && Config.GOOGLE_ANALYTICS_TRACKING_ID !== '') {
|
||||
ReactGA.set({ page: pathname });
|
||||
ReactGA.pageview(pathname);
|
||||
useEffect(() => {
|
||||
if (isAnalyticsEnabled) {
|
||||
ReactGA.send({ hitType: 'pageview', page: location.pathname + location.search });
|
||||
}
|
||||
if (pathname !== prevProps.location.pathname || search !== prevProps.location.search) {
|
||||
const current = location.pathname + location.search;
|
||||
if (previousLocation.current !== null && previousLocation.current !== current) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}
|
||||
previousLocation.current = current;
|
||||
}, [location.pathname, location.search]);
|
||||
|
||||
render() {
|
||||
const { lang } = this.state;
|
||||
return (
|
||||
<div id="page">
|
||||
<Helmet>
|
||||
<title>{Functions.siteTitle(lang)} - {Functions.siteSlogan(lang)}</title>
|
||||
</Helmet>
|
||||
<Header lang={lang} />
|
||||
<div id="main" className="clearfix">
|
||||
<LeftColumn lang={lang} />
|
||||
<CenterColumn lang={lang} />
|
||||
</div>
|
||||
<Footer lang={lang} />
|
||||
return (
|
||||
<div id="page">
|
||||
<Helmet>
|
||||
<title>
|
||||
{Functions.siteTitle(lang)} - {Functions.siteSlogan(lang)}
|
||||
</title>
|
||||
</Helmet>
|
||||
<Header lang={lang} />
|
||||
<div id="main" className="clearfix">
|
||||
<LeftColumn lang={lang} />
|
||||
<CenterColumn lang={lang} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
<Footer lang={lang} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withCookies(withRouter(AppRoot));
|
||||
export default AppRoot;
|
||||
|
||||
+22
-18
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import { MultiLang } from '../config';
|
||||
import { Route, Routes } from 'react-router';
|
||||
import type { MultiLang } from '../config';
|
||||
import Welcome from '../custom/blocks/Welcome';
|
||||
import Rankings from '../database/blocks/Rankings';
|
||||
import RecentContents from '../database/blocks/RecentContents';
|
||||
@@ -25,7 +24,9 @@ const CenterBlocks = (props: Props) => {
|
||||
<div className="clearfix plate">
|
||||
<div className="centerLcolumn">
|
||||
<div className="block">
|
||||
<div className="blockTitle">{Functions.mlang('[en]XooNIps Rankings[/en][ja]XooNIps ランキング[/ja]', lang)}</div>
|
||||
<div className="blockTitle">
|
||||
{Functions.mlang('[en]XooNIps Rankings[/en][ja]XooNIps ランキング[/ja]', lang)}
|
||||
</div>
|
||||
<div className="blockContent">
|
||||
<Rankings lang={lang} />
|
||||
</div>
|
||||
@@ -33,33 +34,36 @@ const CenterBlocks = (props: Props) => {
|
||||
</div>
|
||||
<div className="centerRcolumn">
|
||||
<div className="block">
|
||||
<div className="blockTitle">{Functions.mlang('[en]XooNIps Update[/en][ja]XooNIps アップデート[/ja]', lang)}</div>
|
||||
<div className="blockTitle">
|
||||
{Functions.mlang('[en]XooNIps Update[/en][ja]XooNIps アップデート[/ja]', lang)}
|
||||
</div>
|
||||
<div className="blockContent">
|
||||
<RecentContents lang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const CenterColumn = (props: Props) => {
|
||||
const { lang } = props;
|
||||
|
||||
return (
|
||||
<div className="centercolumn">
|
||||
<Switch>
|
||||
<Route exact path="/" render={() => <CenterBlocks lang={lang} />} />
|
||||
<Route render={() =>
|
||||
<div className="block plate">
|
||||
<MainContent lang={lang} />
|
||||
</div>
|
||||
} />
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Route path="/" element={<CenterBlocks lang={lang} />} />
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<div className="block plate">
|
||||
<MainContent lang={lang} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CenterColumn;
|
||||
export default CenterColumn;
|
||||
|
||||
+25
-9
@@ -1,11 +1,10 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../config';
|
||||
import LinkImage from './lib/LinkImage';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import bannerPhysiome from './assets/theme/images/banner_physiome.png';
|
||||
import bannerCBS from './assets/theme/images/banner_riken-cbs.png';
|
||||
import bannerRIKEN from './assets/theme/images/banner_riken.png';
|
||||
import bannerCBS from './assets/theme/images/banner_riken-cbs.png';
|
||||
import bannerXooNIps from './assets/theme/images/banner_xoonips.png';
|
||||
import LinkImage from './lib/LinkImage';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -16,16 +15,33 @@ const Footer = (props: Props) => {
|
||||
return (
|
||||
<footer id="footer">
|
||||
<div className="plate">
|
||||
<div className="copyright">Copyright (C) 2018 Neuroinformatics Unit, RIKEN Center for Brain Science</div>
|
||||
<div className="copyright">
|
||||
Copyright (C) 2018 Neuroinformatics Unit, RIKEN Center for Brain Science
|
||||
</div>
|
||||
<div className="links">
|
||||
<LinkImage image={bannerPhysiome} title={'Physiome.jp'} url={'http://www.physiome.jp/'} />
|
||||
<LinkImage image={bannerRIKEN} title={Functions.mlang('[en]RIKEN[/en][ja]理化学研究所[/ja]', lang)} url={'http://www.riken.jp/'} />
|
||||
<LinkImage image={bannerCBS} title={Functions.mlang('[en]RIKEN Center for Brain Science[/en][ja]理化学研究所 脳神経科学研究センター[/ja]', lang)} url={'https://cbs.riken.jp/'} />
|
||||
<LinkImage image={bannerXooNIps} title={Functions.mlang('[en]The XooNIps Project[/en][ja]XooNIps 公式サイト[/ja]', lang)} url={'https://xoonips.osdn.jp/'} />
|
||||
<LinkImage
|
||||
image={bannerRIKEN}
|
||||
title={Functions.mlang('[en]RIKEN[/en][ja]理化学研究所[/ja]', lang)}
|
||||
url={'http://www.riken.jp/'}
|
||||
/>
|
||||
<LinkImage
|
||||
image={bannerCBS}
|
||||
title={Functions.mlang(
|
||||
'[en]RIKEN Center for Brain Science[/en][ja]理化学研究所 脳神経科学研究センター[/ja]',
|
||||
lang
|
||||
)}
|
||||
url={'https://cbs.riken.jp/'}
|
||||
/>
|
||||
<LinkImage
|
||||
image={bannerXooNIps}
|
||||
title={Functions.mlang('[en]The XooNIps Project[/en][ja]XooNIps 公式サイト[/ja]', lang)}
|
||||
url={'https://xoonips.osdn.jp/'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
+34
-44
@@ -1,58 +1,48 @@
|
||||
import React, { ChangeEvent, Component, MouseEvent } from 'react';
|
||||
import { RouteComponentProps, withRouter, Link } from 'react-router-dom';
|
||||
import imageJapanNode from '../common/assets/theme/images/icon_jnode.png';
|
||||
import Config, { MultiLang } from '../config';
|
||||
import { type ChangeEvent, type MouseEvent, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router';
|
||||
import Config, { type MultiLang } from '../config';
|
||||
import ItemUtil from '../database/lib/ItemUtil';
|
||||
import Functions from '../functions';
|
||||
import imageJapanNode from './assets/theme/images/icon_jnode.png';
|
||||
import LinkImage from './lib/LinkImage';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
keyword: string;
|
||||
}
|
||||
const Header = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const navigate = useNavigate();
|
||||
const [keyword, setKeyword] = useState('');
|
||||
|
||||
class Header extends Component<Props, State> {
|
||||
const handleChangeKeyword = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setKeyword(event.target.value);
|
||||
};
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.handleChangeKeyword = this.handleChangeKeyword.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.state = { keyword: '' };
|
||||
}
|
||||
|
||||
handleChangeKeyword(event: ChangeEvent<HTMLInputElement>) {
|
||||
const keyword = event.target.value;
|
||||
this.setState({ keyword });
|
||||
}
|
||||
|
||||
handleSubmit(event: MouseEvent<HTMLButtonElement>) {
|
||||
const handleSubmit = (event: MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
const keyword = this.state.keyword.trim();
|
||||
if (keyword !== '') {
|
||||
const url = ItemUtil.getSearchByKeywordUrl('all', this.state.keyword);
|
||||
this.props.history.push(url);
|
||||
if (keyword.trim() !== '') {
|
||||
void navigate(ItemUtil.getSearchByKeywordUrl('all', keyword));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const title = Functions.mlang(Config.SITE_TITLE, lang);
|
||||
return (
|
||||
<div id="header" className="clearfix">
|
||||
<div className="left logo">
|
||||
<Link to="/"><span className="hidden">{title}</span></Link>
|
||||
</div>
|
||||
<div className="right">
|
||||
<input className="searchInput" type="text" value={this.state.keyword} onChange={this.handleChangeKeyword} />
|
||||
<button className="searchButton" onClick={this.handleSubmit}>Search</button>
|
||||
<LinkImage image={imageJapanNode} title="INCF Japan Node" url={'https://www.neuroinf.jp/'} />
|
||||
</div>
|
||||
const title = Functions.mlang(Config.SITE_TITLE, lang);
|
||||
return (
|
||||
<div id="header" className="clearfix">
|
||||
<div className="left logo">
|
||||
<Link to="/">
|
||||
<span className="hidden">{title}</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="right">
|
||||
<input className="searchInput" type="text" value={keyword} onChange={handleChangeKeyword} />
|
||||
<button type="button" className="searchButton" onClick={handleSubmit}>
|
||||
Search
|
||||
</button>
|
||||
<LinkImage image={imageJapanNode} title="INCF Japan Node" url={'https://www.neuroinf.jp/'} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default withRouter(Header);
|
||||
export default Header;
|
||||
|
||||
+32
-22
@@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Route, Switch } from 'react-router';
|
||||
import { Timeline } from 'react-twitter-widgets';
|
||||
import { MultiLang } from '../config';
|
||||
import { Route, Routes } from 'react-router';
|
||||
import type { MultiLang } from '../config';
|
||||
import CreditsMenu from '../credits/block/CreditsMenu';
|
||||
import IndexTree from '../database/blocks/IndexTree';
|
||||
import Functions from '../functions';
|
||||
import MainMenu from './blocks/MainMenu';
|
||||
import SelectLang from './blocks/SelectLang';
|
||||
import TwitterTimeline from './lib/TwitterTimeline';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -28,31 +27,42 @@ const LeftColumn = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="block plate">
|
||||
<div className="blockTitle">{Functions.mlang('[en]Site Information[/en][ja]ウェブサイト情報[/ja]', lang)}</div>
|
||||
<div className="blockTitle">
|
||||
{Functions.mlang('[en]Site Information[/en][ja]ウェブサイト情報[/ja]', lang)}
|
||||
</div>
|
||||
<div className="blockContent">
|
||||
<CreditsMenu lang={lang} showAboutUs={false} />
|
||||
</div>
|
||||
</div>
|
||||
<Switch>
|
||||
<Route exact path="/" render={() =>
|
||||
<div className="block plate">
|
||||
<div className="blockTitle">Twitter</div>
|
||||
<div className="blockContent">
|
||||
<Timeline dataSource={{ sourceType: 'profile', screenName: 'DynamicBrainPF' }} options={{ height: '600', lang: lang }} />
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<div className="block plate">
|
||||
<div className="blockTitle">Twitter</div>
|
||||
<div className="blockContent">
|
||||
<TwitterTimeline lang={lang} screenName="DynamicBrainPF" height={600} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} />
|
||||
<Route path="/database" render={() =>
|
||||
<div className="block plate">
|
||||
<div className="blockTitle">{Functions.mlang('[en]Index Tree[/en][ja]インデックスツリー[/ja]', lang)}</div>
|
||||
<div className="blockContent">
|
||||
<IndexTree lang={lang} />
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/database/*"
|
||||
element={
|
||||
<div className="block plate">
|
||||
<div className="blockTitle">
|
||||
{Functions.mlang('[en]Index Tree[/en][ja]インデックスツリー[/ja]', lang)}
|
||||
</div>
|
||||
<div className="blockContent">
|
||||
<IndexTree lang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} />
|
||||
</Switch>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={null} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default LeftColumn;
|
||||
|
||||
+33
-29
@@ -1,50 +1,54 @@
|
||||
import React from 'react';
|
||||
import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import Config, { MultiLang } from '../config';
|
||||
import { Navigate, Route, Routes, useParams } from 'react-router';
|
||||
import Config, { type MultiLang } from '../config';
|
||||
import Credits from '../credits/Credits';
|
||||
import CreditsXoopsPathRedirect from '../credits/CreditsXoopsPathRedirect';
|
||||
import Database from '../database/Database';
|
||||
import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
|
||||
import MediaWikiUtils from '../mediawiki/lib/MediaWikiUtils';
|
||||
import MediaWiki from '../mediawiki/MediaWiki';
|
||||
import MediaWikiXoopsPathRedirect from '../mediawiki/MediaWikiXoopsPathRedirect';
|
||||
import Pico from '../pico/Pico';
|
||||
import PicoXoopsPathRedirect from '../pico/PicoXoopsPathRedirect';
|
||||
import XoopsPathRedirect from './XoopsPathRedirect';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
const MediaWikiRoute = (props: Props) => {
|
||||
const { name = '' } = useParams<{ name?: string }>();
|
||||
return <MediaWiki lang={props.lang} name={name} />;
|
||||
};
|
||||
|
||||
const MainContent = (props: Props) => {
|
||||
const { lang } = props;
|
||||
return (
|
||||
<div className="mainContent">
|
||||
<Switch>
|
||||
<Route path="/database" render={() => <Database {...props} />} />
|
||||
<Route path="/credits" render={() => <Credits lang={lang} />} />
|
||||
{Config.PICO_MODULES.map((name) =>
|
||||
<Route key={name} path={'/' + name} render={() => <Pico lang={lang} name={name} />} />
|
||||
)}
|
||||
<Route exact path="/mediawiki" render={() => {
|
||||
const name = lang === 'en' ? 'Main_Page' : 'メインページ';
|
||||
return <Redirect to={'/mediawiki/' + name} />;
|
||||
}} />
|
||||
<Route path="/mediawiki/:name" render={(props: RouteComponentProps<{ name: string }>) => {
|
||||
const { match } = props;
|
||||
const { params } = match;
|
||||
const name = params.name;
|
||||
return <MediaWiki lang={lang} name={name} />;
|
||||
}} />
|
||||
<Route path="/modules/xoonips" render={() => <DatabaseXoopsPathRedirect lang={lang} />} />
|
||||
<Route path="/modules/credits" render={() => <CreditsXoopsPathRedirect lang={lang} />} />
|
||||
{Config.PICO_MODULES.map((name) =>
|
||||
<Route key={name} path={'/' + name} render={() => <Pico lang={lang} name={name} />} />
|
||||
)}
|
||||
<Route path="/modules/mediawiki" render={() => <MediaWikiXoopsPathRedirect lang={lang} />} />
|
||||
|
||||
<Route component={XoopsPathRedirect} />
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Route path="/database/*" element={<Database lang={lang} />} />
|
||||
<Route path="/credits/*" element={<Credits lang={lang} />} />
|
||||
{Config.PICO_MODULES.map((name) => (
|
||||
<Route key={name} path={`/${name}/*`} element={<Pico lang={lang} name={name} />} />
|
||||
))}
|
||||
<Route
|
||||
path="/mediawiki"
|
||||
element={<Navigate to={`/mediawiki/${MediaWikiUtils.getMainPageName(lang)}`} replace />}
|
||||
/>
|
||||
<Route path="/mediawiki/:name" element={<MediaWikiRoute lang={lang} />} />
|
||||
<Route path="/modules/xoonips/*" element={<DatabaseXoopsPathRedirect lang={lang} />} />
|
||||
<Route path="/modules/credits/*" element={<CreditsXoopsPathRedirect lang={lang} />} />
|
||||
{Config.PICO_MODULES.map((name) => (
|
||||
<Route
|
||||
key={name}
|
||||
path={`/modules/${name}/*`}
|
||||
element={<PicoXoopsPathRedirect lang={lang} name={name} />}
|
||||
/>
|
||||
))}
|
||||
<Route path="/modules/mediawiki/*" element={<MediaWikiXoopsPathRedirect lang={lang} />} />
|
||||
<Route path="*" element={<XoopsPathRedirect lang={lang} />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default MainContent;
|
||||
|
||||
@@ -1,40 +1,30 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Redirect, RouteComponentProps } from 'react-router';
|
||||
import { MultiLang } from '../config';
|
||||
import { Navigate, useLocation } from 'react-router';
|
||||
import type { MultiLang } from '../config';
|
||||
import PageNotFound from './lib/PageNotFound';
|
||||
|
||||
interface Params {
|
||||
module: string;
|
||||
pathname: string;
|
||||
}
|
||||
|
||||
interface Props extends RouteComponentProps<Params> {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
class XoopsPathRedirect extends Component<Props> {
|
||||
|
||||
getRedirectUrl() {
|
||||
const { pathname } = this.props.location;
|
||||
switch (pathname || '') {
|
||||
case '/index.php': {
|
||||
return '/';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
const getRedirectUrl = (pathname: string): string => {
|
||||
switch (pathname || '') {
|
||||
case '/index.php':
|
||||
return '/';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
if (this.props.location.pathname === '/') {
|
||||
return null;
|
||||
}
|
||||
const url = this.getRedirectUrl();
|
||||
if (url === '') {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
return <Redirect to={url} />;
|
||||
const XoopsPathRedirect = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
if (location.pathname === '/') {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
const url = getRedirectUrl(location.pathname);
|
||||
if (url === '') {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
return <Navigate to={url} replace />;
|
||||
};
|
||||
|
||||
export default XoopsPathRedirect;
|
||||
|
||||
@@ -99,6 +99,8 @@ th {
|
||||
|
||||
.plate {
|
||||
background-image: url(images/plate.png);
|
||||
/* sanitize.css turns background repeating off; the plate texture tiles */
|
||||
background-repeat: repeat;
|
||||
border-left: 3px solid #999;
|
||||
border-right: 3px solid #999;
|
||||
color: #000;
|
||||
@@ -310,3 +312,9 @@ ul.mainmenu {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* sanitize.css forms.css leaves form controls transparent; keep the language
|
||||
selector on white. */
|
||||
.leftcolumn .blockContent select {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
+62
-17
@@ -1,17 +1,62 @@
|
||||
img {border: 0;}
|
||||
|
||||
#xoopsHiddenText {visibility: hidden; color: #000000; font-weight: normal; font-style: normal; text-decoration: none;}
|
||||
|
||||
.pagneutral {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/pagneutral.gif);}
|
||||
.pagact {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/pagact.gif);}
|
||||
.paginact {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/paginact.gif);}
|
||||
|
||||
|
||||
#mainmenu a {text-align:left; display: block; margin: 0; padding: 4px;}
|
||||
#mainmenu a.menuTop {padding-left: 3px;}
|
||||
#mainmenu a.menuMain {padding-left: 3px;}
|
||||
#mainmenu a.menuSub {padding-left: 9px;}
|
||||
|
||||
#usermenu a {text-align:left; display: block; margin: 0; padding: 4px;}
|
||||
#usermenu a.menuTop {}
|
||||
#usermenu a.highlight {color: #0000ff; background-color: #fcc;}
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#xoopsHiddenText {
|
||||
visibility: hidden;
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagneutral {
|
||||
font-size: 10px;
|
||||
width: 16px;
|
||||
height: 19px;
|
||||
text-align: center;
|
||||
background-image: url(./images/pagneutral.gif);
|
||||
}
|
||||
.pagact {
|
||||
font-size: 10px;
|
||||
width: 16px;
|
||||
height: 19px;
|
||||
text-align: center;
|
||||
background-image: url(./images/pagact.gif);
|
||||
}
|
||||
.paginact {
|
||||
font-size: 10px;
|
||||
width: 16px;
|
||||
height: 19px;
|
||||
text-align: center;
|
||||
background-image: url(./images/paginact.gif);
|
||||
}
|
||||
|
||||
#mainmenu a {
|
||||
text-align: left;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
#mainmenu a.menuTop {
|
||||
padding-left: 3px;
|
||||
}
|
||||
#mainmenu a.menuMain {
|
||||
padding-left: 3px;
|
||||
}
|
||||
#mainmenu a.menuSub {
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
#usermenu a {
|
||||
text-align: left;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
#usermenu a.menuTop {
|
||||
}
|
||||
#usermenu a.highlight {
|
||||
color: #0000ff;
|
||||
background-color: #fcc;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MultiLang } from '../../config.js';
|
||||
import { Link } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import mainMenus from '../assets/main-menu.json';
|
||||
|
||||
@@ -12,17 +11,22 @@ const MainMenu = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const links = mainMenus.map((item, idx) => {
|
||||
const title = Functions.mlang(item.title, lang);
|
||||
const style = idx === 0 ? "menuTop" : "menuMain";
|
||||
const link = item.link.match(/^https?:\/\//) ?
|
||||
<a className={style} href={item.link} target="_blank" rel="noopener noreferrer">{title}</a> :
|
||||
<Link className={style} to={item.link}>{title}</Link>;
|
||||
return <li key={idx}>{link}</li>
|
||||
const style = idx === 0 ? 'menuTop' : 'menuMain';
|
||||
return (
|
||||
<li key={item.link}>
|
||||
{/^https?:\/\//.test(item.link) ? (
|
||||
<a className={style} href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
{title}
|
||||
</a>
|
||||
) : (
|
||||
<Link className={style} to={item.link}>
|
||||
{title}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<ul className="mainmenu">
|
||||
{links}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
return <ul className="mainmenu">{links}</ul>;
|
||||
};
|
||||
|
||||
export default MainMenu;
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import React from 'react';
|
||||
import { RouteComponentProps, withRouter } from 'react-router';
|
||||
import { MultiLang } from '../../config';
|
||||
import { useLocation, useNavigate } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
const SelectLang = (props: Props) => {
|
||||
const { lang, history } = props;
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const langs: MultiLang[] = ['en', 'ja'];
|
||||
const titles = {
|
||||
en: 'English',
|
||||
@@ -15,20 +16,26 @@ const SelectLang = (props: Props) => {
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<select value={lang} onChange={(e) => {
|
||||
const xlang = e.target.value;
|
||||
const params = new URLSearchParams(history.location.search);
|
||||
params.set('ml_lang', xlang);
|
||||
const url = history.location.pathname + '?' + params.toString();
|
||||
history.push(url);
|
||||
}}>
|
||||
<select
|
||||
value={lang}
|
||||
onChange={(e) => {
|
||||
const xlang = e.target.value;
|
||||
const params = new URLSearchParams(location.search);
|
||||
params.set('ml_lang', xlang);
|
||||
const url = `${location.pathname}?${params.toString()}`;
|
||||
navigate(url);
|
||||
}}
|
||||
>
|
||||
{langs.map((xlang) => {
|
||||
return <option key={xlang} value={xlang}>{titles[xlang]}</option>;
|
||||
return (
|
||||
<option key={xlang} value={xlang}>
|
||||
{titles[xlang]}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default withRouter(SelectLang);
|
||||
export default SelectLang;
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { ComponentProps, MouseEvent } from 'react';
|
||||
import { Link, type To } from 'react-router';
|
||||
|
||||
type LinkProps = ComponentProps<typeof Link>;
|
||||
|
||||
const RETRY_INTERVAL_MS = 16;
|
||||
const RETRY_COUNT = 20;
|
||||
|
||||
const hashOf = (to: To): string => {
|
||||
if (typeof to === 'string') {
|
||||
const idx = to.indexOf('#');
|
||||
return idx === -1 ? '' : to.slice(idx + 1);
|
||||
}
|
||||
return (to.hash ?? '').replace(/^#/, '');
|
||||
};
|
||||
|
||||
const scrollToHash = (hash: string, remaining = RETRY_COUNT) => {
|
||||
if (hash === '') {
|
||||
return;
|
||||
}
|
||||
const id = decodeURIComponent(hash);
|
||||
const target = document.getElementById(id) ?? document.querySelector(`[name="${CSS.escape(id)}"]`);
|
||||
if (target !== null) {
|
||||
target.scrollIntoView();
|
||||
return;
|
||||
}
|
||||
// The target may not be in the DOM yet (pico pages fetch their content).
|
||||
if (remaining > 0) {
|
||||
setTimeout(() => {
|
||||
scrollToHash(hash, remaining - 1);
|
||||
}, RETRY_INTERVAL_MS);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* A `<Link>` that also scrolls to the element named by the URL fragment.
|
||||
* Replaces `react-router-hash-link`, which is unmaintained and still targets react-router v5.
|
||||
*/
|
||||
const HashLink = ({ onClick, to, ...rest }: LinkProps) => {
|
||||
const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
|
||||
onClick?.(e);
|
||||
if (e.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
// Let react-router commit the navigation before looking for the target.
|
||||
setTimeout(() => {
|
||||
scrollToHash(hashOf(to));
|
||||
}, 0);
|
||||
};
|
||||
return <Link {...rest} to={to} onClick={handleClick} />;
|
||||
};
|
||||
|
||||
export default HashLink;
|
||||
+14
-11
@@ -1,11 +1,9 @@
|
||||
import React from 'react';
|
||||
import { RouteComponentProps, withRouter } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MultiLang } from '../../config';
|
||||
import { Link, useLocation } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import mlangEnglish from '../assets/images/mlang_english.gif';
|
||||
import mlangJapanese from '../assets/images/mlang_japanese.gif';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
@@ -23,16 +21,21 @@ const langResources = {
|
||||
|
||||
const LangFlag = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const params = new URLSearchParams(props.location.search);
|
||||
const location = useLocation();
|
||||
const params = new URLSearchParams(location.search);
|
||||
const flagLang = lang === 'en' ? 'ja' : 'en';
|
||||
params.set('ml_lang', flagLang);
|
||||
const url = props.location.pathname + '?' + params.toString();
|
||||
const url = `${location.pathname}?${params.toString()}`;
|
||||
return (
|
||||
<Link style={styleLink} to={url}>
|
||||
<img style={styleImage} src={langResources[flagLang].image} alt={langResources[flagLang].title} title={langResources[flagLang].title}/>
|
||||
<img
|
||||
style={styleImage}
|
||||
src={langResources[flagLang].image}
|
||||
alt={langResources[flagLang].title}
|
||||
title={langResources[flagLang].title}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export default withRouter(LangFlag);
|
||||
export default LangFlag;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Component } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
|
||||
interface Props {
|
||||
url: string;
|
||||
@@ -13,7 +13,6 @@ interface State {
|
||||
}
|
||||
|
||||
class LinkImage extends Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@@ -26,14 +25,14 @@ class LinkImage extends Component<Props, State> {
|
||||
handleMouseOver() {
|
||||
const { imageHover } = this.props;
|
||||
if (typeof imageHover !== 'undefined') {
|
||||
this.setState({ image: imageHover })
|
||||
this.setState({ image: imageHover });
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseOut() {
|
||||
const { image: imageNormal, imageHover } = this.props;
|
||||
if (typeof imageHover !== 'undefined') {
|
||||
this.setState({ image: imageNormal })
|
||||
this.setState({ image: imageNormal });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,13 +41,27 @@ class LinkImage extends Component<Props, State> {
|
||||
const image = <img style={{ verticalAlign: 'middle' }} src={this.state.image} alt={title} title={title} />;
|
||||
if (url.match(/^(\/|\.)/) === null) {
|
||||
return (
|
||||
<a href={url} target="_blank" rel="noopener noreferrer" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onMouseOver={this.handleMouseOver}
|
||||
onMouseOut={this.handleMouseOut}
|
||||
onFocus={this.handleMouseOver}
|
||||
onBlur={this.handleMouseOut}
|
||||
>
|
||||
{image}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Link to={url} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
|
||||
<Link
|
||||
to={url}
|
||||
onMouseOver={this.handleMouseOver}
|
||||
onMouseOut={this.handleMouseOut}
|
||||
onFocus={this.handleMouseOver}
|
||||
onBlur={this.handleMouseOut}
|
||||
>
|
||||
{image}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin: 100px 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 8px solid #eeeeee;
|
||||
border-top-color: #cccccc;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.spinner {
|
||||
animation-duration: 4s;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,9 @@
|
||||
import React from 'react';
|
||||
import Spinner from 'react-spinner-material';
|
||||
import styles from './Loading.module.css';
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignContent: 'center', margin: '100px 0' }}>
|
||||
<Spinner radius={60} color={'#cccccc'} stroke={8} visible={true} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const Loading = () => (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.spinner} role="status" aria-label="Loading" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Loading;
|
||||
export default Loading;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../config';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
|
||||
interface Props {
|
||||
@@ -8,8 +7,9 @@ interface Props {
|
||||
|
||||
const NoticeSiteHasBeenArchived = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const notice = '[en]This site has been archived since FY2019 and is no longer updated.[/en][ja]このサイトは、2019年度よりアーカイブサイトとして運用されています。[/ja]';
|
||||
const notice =
|
||||
'[en]This site has been archived since FY2019 and is no longer updated.[/en][ja]このサイトは、2019年度よりアーカイブサイトとして運用されています。[/ja]';
|
||||
return <p style={{ color: 'red' }}>{Functions.mlang(notice, lang)}</p>;
|
||||
}
|
||||
};
|
||||
|
||||
export default NoticeSiteHasBeenArchived;
|
||||
export default NoticeSiteHasBeenArchived;
|
||||
|
||||
@@ -1,52 +1,44 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { RouteComponentProps, withRouter } from 'react-router';
|
||||
import { MultiLang } from '../../config';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
class PageNotFound extends Component<Props> {
|
||||
const TOP_URL = '/';
|
||||
|
||||
private url = '/';
|
||||
private timer: NodeJS.Timer | null = null;
|
||||
const PageNotFound = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
goToTopPage() {
|
||||
if (this.props.location.pathname !== '/') {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.timer = null;
|
||||
this.props.history.push(this.url);
|
||||
}, 5000);
|
||||
useEffect(() => {
|
||||
if (location.pathname === TOP_URL) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
const timer = setTimeout(() => {
|
||||
void navigate(TOP_URL);
|
||||
}, 5000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [location.pathname, navigate]);
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>Page Not Found - {Functions.siteTitle(lang)}</title>
|
||||
</Helmet>
|
||||
<h1>Page Not Found</h1>
|
||||
<section>
|
||||
<p>The page you were trying to access doesn't exist.</p>
|
||||
<p>
|
||||
If the page does not automatically reload, please go to the <a href={TOP_URL}>top page</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
this.goToTopPage();
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>Page Not Found - {Functions.siteTitle(lang)}</title>
|
||||
</Helmet>
|
||||
<h1>Page Not Found</h1>
|
||||
<section>
|
||||
<p>The page you were trying to access doesn't exist.</p>
|
||||
<p>If the page does not automatically reload, please click <a href={this.url}>here</a></p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(PageNotFound);
|
||||
export default PageNotFound;
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { MultiLang } from '../../config';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
screenName: string;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface TwitterWidgets {
|
||||
widgets: { load: (element?: HTMLElement) => void };
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
twttr?: TwitterWidgets;
|
||||
}
|
||||
}
|
||||
|
||||
const WIDGETS_URL = 'https://platform.twitter.com/widgets.js';
|
||||
|
||||
/**
|
||||
* The embedded profile timeline, rendered by Twitter's own widgets.js: the
|
||||
* script turns the anchor into the timeline, and the anchor stays a plain link
|
||||
* to the profile if the script cannot load.
|
||||
*/
|
||||
const TwitterTimeline = (props: Props) => {
|
||||
const { lang, screenName, height } = props;
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const container = ref.current;
|
||||
if (container === null) {
|
||||
return;
|
||||
}
|
||||
container.innerHTML = '';
|
||||
const anchor = document.createElement('a');
|
||||
anchor.className = 'twitter-timeline';
|
||||
anchor.href = `https://twitter.com/${screenName}`;
|
||||
anchor.dataset.height = String(height);
|
||||
anchor.dataset.lang = lang;
|
||||
anchor.textContent = `Tweets by ${screenName}`;
|
||||
container.appendChild(anchor);
|
||||
if (window.twttr) {
|
||||
window.twttr.widgets.load(container);
|
||||
} else if (document.querySelector(`script[src="${WIDGETS_URL}"]`) === null) {
|
||||
const script = document.createElement('script');
|
||||
script.src = WIDGETS_URL;
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}, [lang, screenName, height]);
|
||||
|
||||
return <div ref={ref} />;
|
||||
};
|
||||
|
||||
export default TwitterTimeline;
|
||||
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../config';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import imageRank2 from '../assets/images/rank3dbf8e94a6f72.gif';
|
||||
import imageRank3 from '../assets/images/rank3dbf8e9e7d88d.gif';
|
||||
import imageRank2 from '../assets/images/rank3dbf8e94a6f72.gif';
|
||||
import imageRank4 from '../assets/images/rank3dbf8ea81e642.gif';
|
||||
import imageRank5 from '../assets/images/rank3dbf8eb1a72e7.gif';
|
||||
import imageRank6 from '../assets/images/rank3dbf8edf15093.gif';
|
||||
@@ -19,7 +18,7 @@ const userRanks = [
|
||||
{ title: '[en]Just popping in[/en][ja]新米[/ja]', min: 0, max: 20, special: false, image: imageRank1 },
|
||||
{ title: '[en]Not too shy to talk[/en][ja]半人前[/ja]', min: 21, max: 40, special: false, image: imageRank2 },
|
||||
{ title: '[en]Quite a regular[/en][ja]常連[/ja]', min: 41, max: 70, special: false, image: imageRank3 },
|
||||
{ title: '[en]Just can\'t stay away[/en][ja]一人前[/ja]', min: 71, max: 150, special: false, image: imageRank4 },
|
||||
{ title: "[en]Just can't stay away[/en][ja]一人前[/ja]", min: 71, max: 150, special: false, image: imageRank4 },
|
||||
{ title: '[en]Home away from home[/en][ja]長老[/ja]', min: 151, max: 10000, special: false, image: imageRank5 },
|
||||
{ title: '[en]Moderator[/en][ja]モデレータ[/ja]', min: 0, max: 0, special: true, image: imageRank6 },
|
||||
{ title: '[en]Webmaster[/en][ja]管理人[/ja]', min: 0, max: 0, special: true, image: imageRank7 },
|
||||
@@ -35,11 +34,10 @@ const UserRankStarImage = (props: Props) => {
|
||||
return false;
|
||||
});
|
||||
return typeof rank !== 'undefined' ? rank : userRanks[0];
|
||||
|
||||
}
|
||||
};
|
||||
const userRank = rank > 0 && rank <= 7 ? userRanks[rank - 1] : findRank(posts);
|
||||
const title = Functions.mlang(userRank.title, lang);
|
||||
return <img src={userRank.image} alt={title} title={title} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default UserRankStarImage;
|
||||
export default UserRankStarImage;
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
import React, { ReactElement } from 'react';
|
||||
import ReactHtmlParser, { convertNodeToElement } from 'react-html-parser';
|
||||
import { HashLink } from 'react-router-hash-link';
|
||||
import { MultiLang } from '../../config';
|
||||
import ReactHtmlParser, {
|
||||
convertNodeToElement,
|
||||
type DomElement,
|
||||
type DomNode,
|
||||
type Transform,
|
||||
} from '@orrisroot/react-html-parser';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { useLocation } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import HashLink from './HashLink';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -16,101 +22,121 @@ interface Props {
|
||||
|
||||
const preConvertXCode = (text: string, doxcode: boolean): string => {
|
||||
if (doxcode) {
|
||||
return text.replace(/\[code\](.*)\[\/code\]/sg, (m0, m1) => {
|
||||
return '[code]' + Functions.base64Encode(m1) + '[/code]';
|
||||
return text.replace(/\[code\](.*)\[\/code\]/gs, (_m0, m1) => {
|
||||
return `[code]${Functions.base64Encode(m1)}[/code]`;
|
||||
});
|
||||
}
|
||||
return text;
|
||||
}
|
||||
};
|
||||
|
||||
const postConvertXCode = (text: string, doxcode: boolean, doimage: boolean): string => {
|
||||
if (doxcode) {
|
||||
return text.replace(/\[code\](.*)\[\/code\]/sg, (m0, m1) => {
|
||||
return text.replace(/\[code\](.*)\[\/code\]/gs, (_m0, m1) => {
|
||||
const text = convertXCode(Functions.htmlspecialchars(Functions.base64Decode(m1)), doimage);
|
||||
return '<div class="xoopsCode"><pre><code>' + text + '</code></pre></div>';
|
||||
return `<div class="xoopsCode"><pre><code>${text}</code></pre></div>`;
|
||||
});
|
||||
}
|
||||
return text;
|
||||
}
|
||||
};
|
||||
|
||||
const convertClickable = (text: string) => {
|
||||
text = text.replace(/(^|[^\]_a-zA-Z0-9-="'/]+)((?:https?|ftp)(?::\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+[a-zA-Z0-9=]))/g, (...matches) => {
|
||||
return matches[1] + '<a href="' + matches[2] + '" target="_blank" rel="external noopener noreferrer">' + matches[2] + '</a>';
|
||||
});
|
||||
text = text.replace(/(^|[^\]_a-zA-Z0-9-="'/:.]+)([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+)/g, (...matches) => {
|
||||
return matches[1] + '<a href="mailto:' + matches[2] + '">' + matches[2] + '</a>';
|
||||
});
|
||||
text = text.replace(
|
||||
/(^|[^\]_a-zA-Z0-9-="'/]+)((?:https?|ftp)(?::\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+[a-zA-Z0-9=]))/g,
|
||||
(...matches) => {
|
||||
return (
|
||||
matches[1] +
|
||||
'<a href="' +
|
||||
matches[2] +
|
||||
'" target="_blank" rel="external noopener noreferrer">' +
|
||||
matches[2] +
|
||||
'</a>'
|
||||
);
|
||||
}
|
||||
);
|
||||
text = text.replace(
|
||||
/(^|[^\]_a-zA-Z0-9-="'/:.]+)([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+)/g,
|
||||
(...matches) => {
|
||||
return `${matches[1]}<a href="mailto:${matches[2]}">${matches[2]}</a>`;
|
||||
}
|
||||
);
|
||||
return text;
|
||||
}
|
||||
};
|
||||
|
||||
const convertXCode = (text: string, doimage: boolean): string => {
|
||||
const convertXCode = (text: string, _doimage: boolean): string => {
|
||||
// TODO: implement
|
||||
return text;
|
||||
}
|
||||
};
|
||||
|
||||
const convertSmiley = (text: string) => {
|
||||
// TODO: implement
|
||||
return text;
|
||||
}
|
||||
};
|
||||
|
||||
const convertBr = (text: string): string => {
|
||||
return text.replace(/(\r?\n|\r)/g, '<br />');
|
||||
}
|
||||
};
|
||||
|
||||
interface TransformParsedNode {
|
||||
type: string;
|
||||
next: object | null;
|
||||
prev: object | null;
|
||||
parent: object | null;
|
||||
name: string;
|
||||
attribs: any;
|
||||
children: object[];
|
||||
data: string;
|
||||
}
|
||||
|
||||
const cssConvert = (text: string): object => {
|
||||
const ret: any = {};
|
||||
const cssConvert = (text: string): CSSProperties => {
|
||||
const ret: Record<string, string> = {};
|
||||
text.split(';').forEach((line) => {
|
||||
const line_ = line.trim();
|
||||
if (line.length === 0) {
|
||||
if (line_.length === 0) {
|
||||
return;
|
||||
}
|
||||
const kv = line_.split(':');
|
||||
const key = Functions.camelCase(kv[0].trim());
|
||||
const value = kv[1].trim();
|
||||
ret[key] = value;
|
||||
})
|
||||
return ret;
|
||||
}
|
||||
|
||||
const transform = (node: object, idx: number): ReactElement | null | void => {
|
||||
const node_ = node as TransformParsedNode;
|
||||
if (node_.type === 'tag' && node_.name === 'a') {
|
||||
const url = (node_.attribs && node_.attribs['href']) || '/';
|
||||
const download = (node_.attribs && node_.attribs['download']) || '';
|
||||
const rel = (node_.attribs && node_.attribs['rel']) || '';
|
||||
const klass = (node_.attribs && node_.attribs['class']) || '';
|
||||
const isFile = download !== '' || /\.(zip|pdf|png|gif|jpg)$/.test(url);
|
||||
const isExternal = /external/.test(rel) || /external/.test(klass) || /^(mailto|https?:?\/\/)/.test(url);
|
||||
if (!isFile && !isExternal) {
|
||||
const style = (node_.attribs && node_.attribs['style']) || '';
|
||||
const title = (node_.attribs && node_.attribs['title']) || null;
|
||||
return <HashLink key={idx} to={url} style={cssConvert(style)} title={title}>
|
||||
{node_.children.map((value: object, index: number) => {
|
||||
return convertNodeToElement(value, index, transform);
|
||||
})}
|
||||
</HashLink>;
|
||||
if (kv.length < 2) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (node_.type === 'tag' && node_.name === 'img') {
|
||||
const src = (node_.attribs && node_.attribs['src']) || '';
|
||||
node_.attribs['src'] = src.replace('`XOOPS_URL`', process.env.PUBLIC_URL);
|
||||
return convertNodeToElement(node_ as object, idx, transform);
|
||||
}
|
||||
}
|
||||
ret[Functions.camelCase(kv[0].trim())] = kv.slice(1).join(':').trim();
|
||||
});
|
||||
return ret as CSSProperties;
|
||||
};
|
||||
|
||||
/**
|
||||
* Stored content links are written relative to the page that contains them
|
||||
* (`node4.html`, `manual.html#SECTION1`, ...), so they have to be resolved the
|
||||
* way a browser resolves an `href`. react-router would instead resolve them
|
||||
* against the whole current pathname, turning `/manual_ja/node3.html` +
|
||||
* `node4.html` into `/manual_ja/node3.html/node4.html`.
|
||||
*/
|
||||
const resolveUrl = (href: string, basePath: string): string => {
|
||||
const url = new URL(href, window.location.origin + basePath);
|
||||
return url.pathname + url.search + url.hash;
|
||||
};
|
||||
|
||||
const makeTransform = (basePath: string): Transform => {
|
||||
const transform: Transform = (node: DomNode, idx: number | string) => {
|
||||
if (node.type !== 'tag') {
|
||||
return undefined;
|
||||
}
|
||||
const element = node as DomElement;
|
||||
if (element.name !== 'a') {
|
||||
return undefined;
|
||||
}
|
||||
const url = element.attribs?.href;
|
||||
const download = element.attribs?.download || '';
|
||||
const rel = element.attribs?.rel || '';
|
||||
const klass = element.attribs?.class || '';
|
||||
// Downloads, links to files and links marked external leave the app.
|
||||
const isFile = download !== '' || /\.(zip|pdf|png|gif|jpg)$/.test(url || '');
|
||||
const isExternal = !url || /external/.test(rel) || /external/.test(klass) || /^(mailto|https?:?\/\/)/.test(url);
|
||||
if (isFile || isExternal) {
|
||||
return undefined;
|
||||
}
|
||||
const style = element.attribs?.style || '';
|
||||
const title = element.attribs?.title || '';
|
||||
return (
|
||||
<HashLink key={idx} to={resolveUrl(url, basePath)} style={cssConvert(style)} title={title}>
|
||||
{element.children.map((child, index) => convertNodeToElement(child, index, transform))}
|
||||
</HashLink>
|
||||
);
|
||||
};
|
||||
return transform;
|
||||
};
|
||||
|
||||
const XoopsCode = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const { pathname } = useLocation();
|
||||
let text = props.text;
|
||||
const dohtml = !!props.dohtml;
|
||||
const dosmiley = !!props.dosmiley;
|
||||
@@ -133,7 +159,7 @@ const XoopsCode = (props: Props) => {
|
||||
}
|
||||
text = postConvertXCode(text, doxcode, doimage);
|
||||
text = Functions.mlang(text, lang);
|
||||
return <div>{ReactHtmlParser(text, { transform })}</div>;
|
||||
}
|
||||
return <div>{ReactHtmlParser(text, { transform: makeTransform(pathname) })}</div>;
|
||||
};
|
||||
|
||||
export default XoopsCode;
|
||||
export default XoopsCode;
|
||||
|
||||
+24
-3
@@ -1,9 +1,29 @@
|
||||
const SITE_TITLE = 'Dynamic Brain Platform';
|
||||
const SITE_SLOGAN = 'Official Site';
|
||||
const GOOGLE_ANALYTICS_TRACKING_ID = 'UA-23709948-1';
|
||||
const XOONIPS_ITEMTYPES = ['model', 'data', 'tool', 'book', 'paper', 'conference', 'url', 'presentation', 'simulator', 'stimulus', 'memo', 'files', 'binder'];
|
||||
// Replaces the Universal Analytics property (UA-23709948-1), shut down in 2023.
|
||||
const GOOGLE_ANALYTICS_TRACKING_ID = 'G-HZHCC88CP2';
|
||||
const XOONIPS_ITEMTYPES = [
|
||||
'model',
|
||||
'data',
|
||||
'tool',
|
||||
'book',
|
||||
'paper',
|
||||
'conference',
|
||||
'url',
|
||||
'presentation',
|
||||
'simulator',
|
||||
'stimulus',
|
||||
'memo',
|
||||
'files',
|
||||
'binder',
|
||||
];
|
||||
const PICO_MODULES = ['documents', 'hackathon'];
|
||||
|
||||
// Vite's BASE_URL always carries a trailing slash ('/' when the app is served
|
||||
// from the document root). Strip it so it can be concatenated the same way
|
||||
// CRA's Config.BASE_URL was.
|
||||
const BASE_URL = import.meta.env.BASE_URL.replace(/\/$/, '');
|
||||
|
||||
export type MultiLang = 'en' | 'ja';
|
||||
|
||||
const Config = {
|
||||
@@ -12,6 +32,7 @@ const Config = {
|
||||
GOOGLE_ANALYTICS_TRACKING_ID,
|
||||
XOONIPS_ITEMTYPES,
|
||||
PICO_MODULES,
|
||||
}
|
||||
BASE_URL,
|
||||
};
|
||||
|
||||
export default Config;
|
||||
|
||||
+12
-11
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { Route, Routes } from 'react-router';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import CreditsAboutUs from './CreditsAboutUs';
|
||||
import CreditsPage from './CreditsPage';
|
||||
@@ -17,15 +16,17 @@ const Credits = (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{CreditsUtils.getTitle(lang)} - {Functions.siteTitle(lang)}</title>
|
||||
<title>
|
||||
{CreditsUtils.getTitle(lang)} - {Functions.siteTitle(lang)}
|
||||
</title>
|
||||
</Helmet>
|
||||
<Switch>
|
||||
<Route exact path="/credits" render={() => <CreditsAboutUs {...props} />} />
|
||||
<Route exact path="/credits/:id" render={(props: RouteComponentProps<{ id: string }>) => <CreditsPage lang={lang} {...props} />} />
|
||||
<Route component={PageNotFound} />
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Route index element={<CreditsAboutUs lang={lang} />} />
|
||||
<Route path=":id" element={<CreditsPage lang={lang} />} />
|
||||
<Route path="*" element={<PageNotFound lang={lang} />} />
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Credits;
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React from 'react';
|
||||
import NoticeSiteHasBeenArchived from '../common/lib/NoticeSiteHasBeenArchived';
|
||||
import XoopsCode from '../common/lib/XoopsCode';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import CreditsUtil from './lib/CreditsUtils';
|
||||
import NoticeSiteHasBeenArchived from '../common/lib/NoticeSiteHasBeenArchived';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -19,6 +18,6 @@ const CreditsAboutUs = (props: Props) => {
|
||||
<XoopsCode lang={lang} text={CreditsUtil.getAboutUsContent()} dohtml={true} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CreditsAboutUs;
|
||||
|
||||
+18
-18
@@ -1,29 +1,24 @@
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { format } from 'date-fns';
|
||||
import { useParams } from 'react-router';
|
||||
import NoticeSiteHasBeenArchived from '../common/lib/NoticeSiteHasBeenArchived';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import XoopsCode from '../common/lib/XoopsCode';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import CreditsUtils from './lib/CreditsUtils';
|
||||
import NoticeSiteHasBeenArchived from '../common/lib/NoticeSiteHasBeenArchived';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
interface Params {
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface Props extends RouteComponentProps<Params> {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
const CreditsPage = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const params = props.match.params;
|
||||
if (params.id === '') {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
if (!id) {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
const pageId = parseInt(props.match.params.id, 10);
|
||||
const pageId = parseInt(id, 10);
|
||||
const page = CreditsUtils.getPage(pageId);
|
||||
if (page === null) {
|
||||
return <PageNotFound lang={lang} />;
|
||||
@@ -32,15 +27,20 @@ const CreditsPage = (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{title} - {Functions.siteTitle(lang)}</title>
|
||||
<title>
|
||||
{title} - {Functions.siteTitle(lang)}
|
||||
</title>
|
||||
</Helmet>
|
||||
<h3>{title}</h3>
|
||||
<NoticeSiteHasBeenArchived lang={lang} />
|
||||
<div style={{ textAlign: 'right' }}>{Functions.mlang('[en]Last Update[/en][ja]最終更新日[/ja]', lang)} : {moment(new Date(page.lastupdate * 1000)).format('MMMM Do, YYYY')}</div>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
{Functions.mlang('[en]Last Update[/en][ja]最終更新日[/ja]', lang)} :{' '}
|
||||
{format(new Date(page.lastupdate * 1000), 'MMMM do, yyyy')}
|
||||
</div>
|
||||
<hr />
|
||||
<XoopsCode lang={lang} text={page.content} dohtml={true} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CreditsPage;
|
||||
export default CreditsPage;
|
||||
|
||||
@@ -1,53 +1,42 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Redirect, RouteComponentProps, withRouter } from 'react-router';
|
||||
import { Navigate, useLocation } from 'react-router';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
class CreditsXoopsPathRedirect extends Component<Props> {
|
||||
const NAME = 'credits';
|
||||
|
||||
getRedirectUrl(): string {
|
||||
const { location } = this.props;
|
||||
const name = 'credits';
|
||||
const pathname = location.pathname || '';
|
||||
const query = new URLSearchParams(location.search);
|
||||
const search = new RegExp(`^/modules/${name}(?:/+(.*))?$`);
|
||||
const matches = pathname.match(search);
|
||||
if (matches === null) {
|
||||
return '';
|
||||
}
|
||||
const path = matches[1] || '';
|
||||
switch (path) {
|
||||
case '':
|
||||
case 'index.php': {
|
||||
const id = query.get('id');
|
||||
if (id !== null) {
|
||||
if (id.match(/^\d+$/) !== null) {
|
||||
return '/' + name + '/' + id;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
return '/' + name;
|
||||
|
||||
}
|
||||
case 'aboutus.php': {
|
||||
return '/' + name;
|
||||
}
|
||||
}
|
||||
const getRedirectUrl = (pathname: string, search: string): string => {
|
||||
const query = new URLSearchParams(search);
|
||||
const matches = (pathname || '').match(new RegExp(`^/modules/${NAME}(?:/+(.*))?$`));
|
||||
if (matches === null) {
|
||||
return '';
|
||||
}
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const url = this.getRedirectUrl();
|
||||
if (url === '') {
|
||||
return <PageNotFound lang={lang} />;
|
||||
switch (matches[1] || '') {
|
||||
case '':
|
||||
case 'index.php': {
|
||||
const id = query.get('id');
|
||||
if (id !== null) {
|
||||
return id.match(/^\d+$/) !== null ? `/${NAME}/${id}` : '';
|
||||
}
|
||||
return `/${NAME}`;
|
||||
}
|
||||
return <Redirect to={url} />;
|
||||
case 'aboutus.php':
|
||||
return `/${NAME}`;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
export default withRouter(CreditsXoopsPathRedirect);
|
||||
const CreditsXoopsPathRedirect = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const url = getRedirectUrl(location.pathname, location.search);
|
||||
if (url === '') {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
return <Navigate to={url} replace />;
|
||||
};
|
||||
|
||||
export default CreditsXoopsPathRedirect;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MultiLang } from '../../config';
|
||||
import { Link } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import CreditsUtils from '../lib/CreditsUtils';
|
||||
|
||||
@@ -15,13 +14,15 @@ const CreditsMenu = (props: Props) => {
|
||||
const links = menu.map((item, idx) => {
|
||||
const title = Functions.mlang(item.title, lang);
|
||||
const style = idx === 0 ? 'menuTop' : 'menuMain';
|
||||
return <li key={idx}><Link className={style} to={item.link}>{title}</Link></li>
|
||||
return (
|
||||
<li key={item.link}>
|
||||
<Link className={style} to={item.link}>
|
||||
{title}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<ul className="mainmenu">
|
||||
{links}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
return <ul className="mainmenu">{links}</ul>;
|
||||
};
|
||||
|
||||
export default CreditsMenu;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { MultiLang } from '../../config';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import creditsJson from '../assets/credits.json';
|
||||
|
||||
export interface CreditsPageData {
|
||||
pid: number;
|
||||
@@ -9,7 +8,7 @@ export interface CreditsPageData {
|
||||
lastupdate: number;
|
||||
}
|
||||
|
||||
interface CreditsData {
|
||||
export interface CreditsData {
|
||||
organization: string;
|
||||
pages: CreditsPageData[];
|
||||
}
|
||||
@@ -20,12 +19,19 @@ export interface CreditsMenu {
|
||||
}
|
||||
|
||||
class CreditsUtils {
|
||||
private data: CreditsData;
|
||||
private data: CreditsData | null = null;
|
||||
|
||||
constructor(json: CreditsData) {
|
||||
init(json: CreditsData): void {
|
||||
this.data = json;
|
||||
}
|
||||
|
||||
private get credits(): CreditsData {
|
||||
if (this.data === null) {
|
||||
throw new Error('credits data was read before loadSiteData() completed');
|
||||
}
|
||||
return this.data;
|
||||
}
|
||||
|
||||
getTitle(lang: MultiLang): string {
|
||||
return Functions.mlang('[en]Site Information[/en][ja]サイト情報[/ja]', lang);
|
||||
}
|
||||
@@ -35,12 +41,12 @@ class CreditsUtils {
|
||||
}
|
||||
|
||||
getPageUrl(pageId: number): string {
|
||||
return this.getIndexUrl() + '/' + pageId;
|
||||
return `${this.getIndexUrl()}/${pageId}`;
|
||||
}
|
||||
|
||||
getMenu(showAboutUs: boolean): CreditsMenu[] {
|
||||
getMenu(showAboutUs = true): CreditsMenu[] {
|
||||
const menu: CreditsMenu[] = [];
|
||||
this.data.pages.forEach((page) => {
|
||||
this.credits.pages.forEach((page) => {
|
||||
menu.push({ title: page.title, link: this.getPageUrl(page.pid) });
|
||||
});
|
||||
if (showAboutUs) {
|
||||
@@ -50,7 +56,9 @@ class CreditsUtils {
|
||||
}
|
||||
|
||||
getPage(pageId: number): CreditsPageData | null {
|
||||
const page = this.data.pages.find((page) => { return page.pid === pageId; });
|
||||
const page = this.credits.pages.find((page) => {
|
||||
return page.pid === pageId;
|
||||
});
|
||||
if (typeof page === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
@@ -58,7 +66,7 @@ class CreditsUtils {
|
||||
}
|
||||
|
||||
countPages(): number {
|
||||
return this.data.pages.length;
|
||||
return this.credits.pages.length;
|
||||
}
|
||||
|
||||
getAboutUsTitle(): string {
|
||||
@@ -66,8 +74,8 @@ class CreditsUtils {
|
||||
}
|
||||
|
||||
getAboutUsContent(): string {
|
||||
return this.data.organization;
|
||||
return this.credits.organization;
|
||||
}
|
||||
}
|
||||
|
||||
export default new CreditsUtils(creditsJson);
|
||||
export default new CreditsUtils();
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import NoticeSiteHasBeenArchived from '../../common/lib/NoticeSiteHasBeenArchived';
|
||||
import { MultiLang } from '../../config';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -12,67 +11,81 @@ const articles = {
|
||||
en: [
|
||||
{
|
||||
title: 'Minoru Tsukada, Memory and Learning mechanism in the Hippocampal Network',
|
||||
link: '/mediawiki/Memory_and_Learning_mechanism_in_the_Hippocampal_Network'
|
||||
link: '/mediawiki/Memory_and_Learning_mechanism_in_the_Hippocampal_Network',
|
||||
},
|
||||
{
|
||||
title: 'Yoko Yamaguchi, Theta Rhythm and Memory Formation in Rat Hippocampus',
|
||||
link: '/mediawiki/Theta_Rhythm_and_Memory_Formation_in_Rat_Hippocampus'
|
||||
link: '/mediawiki/Theta_Rhythm_and_Memory_Formation_in_Rat_Hippocampus',
|
||||
},
|
||||
{
|
||||
title: 'Hatsuo Hayashi, Dynamical features of neurons and the brain: Chaos, synchronization, and propagation',
|
||||
link: '/mediawiki/Dynamical_features_of_neurons_and_the_brain:_Chaos,_synchronization,_and_propagation'
|
||||
link: '/mediawiki/Dynamical_features_of_neurons_and_the_brain:_Chaos,_synchronization,_and_propagation',
|
||||
},
|
||||
{
|
||||
title: 'Ichiro Tsuda, Computational Life Science',
|
||||
link: '/mediawiki/Computational_Life_Science'
|
||||
link: '/mediawiki/Computational_Life_Science',
|
||||
},
|
||||
{
|
||||
title: 'Yutaka Sakai, From synapse to behavior',
|
||||
link: '/mediawiki/From_synapse_to_behavior'
|
||||
link: '/mediawiki/From_synapse_to_behavior',
|
||||
},
|
||||
],
|
||||
ja: [
|
||||
{
|
||||
title: '塚田稔「学習と記憶の理論的・実験的研究」',
|
||||
link: '/mediawiki/学習と記憶の理論的・実験的研究'
|
||||
link: '/mediawiki/学習と記憶の理論的・実験的研究',
|
||||
},
|
||||
{
|
||||
title: '山口陽子「ラット海馬のシータリズムと記憶形成」',
|
||||
link: '/mediawiki/ラット海馬のシータリズムと記憶形成'
|
||||
link: '/mediawiki/ラット海馬のシータリズムと記憶形成',
|
||||
},
|
||||
{
|
||||
title: '林初男「ニューロンと脳のダイナミクス：カオス、同期、伝搬」',
|
||||
link: '/mediawiki/ニューロンと脳のダイナミクス：カオス、同期、伝搬'
|
||||
link: '/mediawiki/ニューロンと脳のダイナミクス：カオス、同期、伝搬',
|
||||
},
|
||||
{
|
||||
title: '津田一郎 「Computational Life Science」',
|
||||
link: '/mediawiki/Computational_Life_Science'
|
||||
link: '/mediawiki/Computational_Life_Science',
|
||||
},
|
||||
{
|
||||
title: '酒井裕「シナプスから行動へ」 ',
|
||||
link: '/mediawiki/From_synapse_to_behavior'
|
||||
link: '/mediawiki/From_synapse_to_behavior',
|
||||
},
|
||||
]
|
||||
],
|
||||
};
|
||||
|
||||
const Welcome = (props: Props) => {
|
||||
const { lang } = props;
|
||||
return (
|
||||
<div className="welcome">
|
||||
<NoticeSiteHasBeenArchived lang={lang} />
|
||||
<p className="concept">{Functions.mlang('[en]This site promotes studies on the dynamic principles of brain functions through unifying experimental and computational approaches in cellular, local circuit, global network and behavioral levels. Our goal is to capture the autonomy and the creativity in living organisms which enlightens the complexity of nature and society.[/en][ja]当サイトでは、脳の動的原理を解明することを目的として、細胞、局所回路、脳全域、行動などの様々なレベルでの実験的計算論的アプローチの統合的な研究を推進します。これらの研究から生命の自律性と情報創成の原理を捉え、さらに自然や人間社会の複雑性の理解を進めることを目指します。[/ja]', lang)}</p>
|
||||
<NoticeSiteHasBeenArchived lang={lang} />
|
||||
<p className="concept">
|
||||
{Functions.mlang(
|
||||
'[en]This site promotes studies on the dynamic principles of brain functions through unifying experimental and computational approaches in cellular, local circuit, global network and behavioral levels. Our goal is to capture the autonomy and the creativity in living organisms which enlightens the complexity of nature and society.[/en][ja]当サイトでは、脳の動的原理を解明することを目的として、細胞、局所回路、脳全域、行動などの様々なレベルでの実験的計算論的アプローチの統合的な研究を推進します。これらの研究から生命の自律性と情報創成の原理を捉え、さらに自然や人間社会の複雑性の理解を進めることを目指します。[/ja]',
|
||||
lang
|
||||
)}
|
||||
</p>
|
||||
<h3>{Functions.mlang('[en]Feature Articles[/en][ja]特集記事[/ja]', lang)}</h3>
|
||||
<ul className="articles">
|
||||
{articles[lang].map((i) => {
|
||||
return <li key={i.title} className="article"><Link to={i.link}><span className="title">{i.title}</span></Link></li>;
|
||||
return (
|
||||
<li key={i.title} className="article">
|
||||
<Link to={i.link}>
|
||||
<span className="title">{i.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<h3>{Functions.mlang('[en]Announcements[/en][ja]お知らせ[/ja]', lang)}</h3>
|
||||
<p className="announce">
|
||||
<Link to={lang === 'en' ? '/hackathon/nix-odml2017_eng.html' : '/hackathon/nix-odml2017.html'}>NIX-odML Global Workshop & Hackathon 2017 in Japan ({Functions.mlang('[en]Sept. 25-28, 2017[/en][ja]2017年9月25-28日[/ja]', lang)})</Link>
|
||||
<Link to={lang === 'en' ? '/hackathon/nix-odml2017_eng.html' : '/hackathon/nix-odml2017.html'}>
|
||||
NIX-odML Global Workshop & Hackathon 2017 in Japan (
|
||||
{Functions.mlang('[en]Sept. 25-28, 2017[/en][ja]2017年9月25-28日[/ja]', lang)})
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Welcome;
|
||||
export default Welcome;
|
||||
|
||||
@@ -68,3 +68,13 @@
|
||||
.database :global(.advancedSearch .fieldDate input) {
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
/* sanitize.css forms.css leaves form controls transparent; keep them on white. */
|
||||
.database :global(.formButton),
|
||||
.database :global(.fieldInputText),
|
||||
.database :global(.fieldSelect),
|
||||
.database :global(.fieldDate select),
|
||||
.database :global(.fieldDate input),
|
||||
.database :global(.listTable select) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
+24
-20
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { Route, Routes } from 'react-router';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import styles from './Database.module.css';
|
||||
import DatabaseAdvancedSearch from './DatabaseAdvancedSearch';
|
||||
@@ -22,23 +21,28 @@ const Database = (props: Props) => {
|
||||
return (
|
||||
<div className={styles.database}>
|
||||
<Helmet>
|
||||
<title>{Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}</title>
|
||||
<title>
|
||||
{Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}
|
||||
</title>
|
||||
</Helmet>
|
||||
<Switch>
|
||||
<Route exact path="/database" render={(props: RouteComponentProps) => <DatabaseTop lang={lang} {...props} />} />
|
||||
<Route exact path="/database/item/:id" render={(props: RouteComponentProps<{ id: string }>) => <DatabaseDetailItem lang={lang} {...props} />} />
|
||||
<Route exact path="/database/item/id/:doi" render={(props: RouteComponentProps<{ doi: string }>) => <DatabaseDetailItem lang={lang} {...props} />} />
|
||||
<Route exact path="/database/advanced" render={(props: RouteComponentProps) => <DatabaseAdvancedSearch lang={lang} {...props} />} />
|
||||
<Route exact path="/database/list" render={(props: RouteComponentProps) => <DatabaseSearchByIndexId lang={lang} {...props} />} />
|
||||
<Route exact path="/database/list/:id" render={(props: RouteComponentProps<{ id: string }>) => <DatabaseSearchByIndexId lang={lang} {...props} />} />
|
||||
<Route exact path="/database/search" render={(props: RouteComponentProps) => <DatabaseSearchByKeyword lang={lang} {...props} />} />
|
||||
<Route exact path="/database/search/advanced" render={(props: RouteComponentProps) => <DatabaseSearchByAdvancedKeyword lang={lang} {...props} />} />
|
||||
<Route exact path="/database/search/itemtype/:itemType" render={(props: RouteComponentProps<{ itemType: string }>) => <DatabaseSearchByItemType lang={lang} {...props} />} />
|
||||
<Route exact path="/database/search/itemtype/:itemType/:subItemType" render={(props: RouteComponentProps<{ itemType: string; subItemType: string }>) => <DatabaseSearchByItemType lang={lang} {...props} />} />
|
||||
<Route component={PageNotFound} />
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Route index element={<DatabaseTop lang={lang} />} />
|
||||
<Route path="item/:id" element={<DatabaseDetailItem lang={lang} />} />
|
||||
<Route path="item/id/:doi" element={<DatabaseDetailItem lang={lang} />} />
|
||||
<Route path="advanced" element={<DatabaseAdvancedSearch lang={lang} />} />
|
||||
<Route path="list" element={<DatabaseSearchByIndexId lang={lang} />} />
|
||||
<Route path="list/:id" element={<DatabaseSearchByIndexId lang={lang} />} />
|
||||
<Route path="search" element={<DatabaseSearchByKeyword lang={lang} />} />
|
||||
<Route path="search/advanced" element={<DatabaseSearchByAdvancedKeyword lang={lang} />} />
|
||||
<Route path="search/itemtype/:itemType" element={<DatabaseSearchByItemType lang={lang} />} />
|
||||
<Route
|
||||
path="search/itemtype/:itemType/:subItemType"
|
||||
element={<DatabaseSearchByItemType lang={lang} />}
|
||||
/>
|
||||
<Route path="*" element={<PageNotFound lang={lang} />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Database;
|
||||
export default Database;
|
||||
|
||||
@@ -1,48 +1,45 @@
|
||||
import React, { Component } from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import Config, { MultiLang } from '../config';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import Config, { type MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import ItemType from './item-type';
|
||||
import AdvancedSearchQuery from './lib/AdvancedSearchQuery';
|
||||
import ItemUtil from './lib/ItemUtil';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
class DatabaseAdvancedSearch extends Component<Props> {
|
||||
const DatabaseAdvancedSearch = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const navigate = useNavigate();
|
||||
// The child fields mutate this instance directly, so it must survive re-renders.
|
||||
const [query] = useState(() => new AdvancedSearchQuery());
|
||||
|
||||
private query: AdvancedSearchQuery = new AdvancedSearchQuery();
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.handleClickSearchButton = this.handleClickSearchButton.bind(this);
|
||||
}
|
||||
|
||||
handleClickSearchButton() {
|
||||
if (!this.query.empty()) {
|
||||
const url = ItemUtil.getSearchByAdvancedKeywordsUrl(this.query);
|
||||
this.props.history.push(url);
|
||||
const handleClickSearchButton = () => {
|
||||
if (!query.empty()) {
|
||||
void navigate(ItemUtil.getSearchByAdvancedKeywordsUrl(query));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
return (
|
||||
<div className="advancedSearch">
|
||||
<h3>{Functions.mlang('[en]Search Items[/en][ja]アイテム検索[/ja]', lang)}</h3>
|
||||
<div className="search">
|
||||
<button className="formButton" onClick={this.handleClickSearchButton}>Search</button>
|
||||
</div>
|
||||
{Config.XOONIPS_ITEMTYPES.map((type) => {
|
||||
return <ItemType.AdvancedSearch key={type} type={'xnp' + type} lang={lang} query={this.query} />;
|
||||
})}
|
||||
<div className="search">
|
||||
<button className="formButton" onClick={this.handleClickSearchButton}>Search</button>
|
||||
</div>
|
||||
return (
|
||||
<div className="advancedSearch">
|
||||
<h3>{Functions.mlang('[en]Search Items[/en][ja]アイテム検索[/ja]', lang)}</h3>
|
||||
<div className="search">
|
||||
<button type="button" className="formButton" onClick={handleClickSearchButton}>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
{Config.XOONIPS_ITEMTYPES.map((type) => {
|
||||
return <ItemType.AdvancedSearch key={type} type={`xnp${type}`} lang={lang} query={query} />;
|
||||
})}
|
||||
<div className="search">
|
||||
<button type="button" className="formButton" onClick={handleClickSearchButton}>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseAdvancedSearch;
|
||||
export default DatabaseAdvancedSearch;
|
||||
|
||||
@@ -1,89 +1,64 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import Loading from '../common/lib/Loading';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import ItemType from './item-type';
|
||||
import ItemUtil, { Item } from './lib/ItemUtil';
|
||||
import ItemUtil, { type Item } from './lib/ItemUtil';
|
||||
|
||||
interface Params {
|
||||
id?: string;
|
||||
doi?: string;
|
||||
}
|
||||
|
||||
interface Props extends RouteComponentProps<Params> {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
loading: boolean;
|
||||
item: Item | null;
|
||||
}
|
||||
const DatabaseDetailItem = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const params = useParams<{ id?: string; doi?: string }>();
|
||||
const id = typeof params.id !== 'undefined' ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : 0;
|
||||
const doi = params.doi ?? '';
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [item, setItem] = useState<Item | null>(null);
|
||||
|
||||
class DatabaseDetailItem extends Component<Props, State> {
|
||||
|
||||
private id: number;
|
||||
private doi: string;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: true,
|
||||
item: null,
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
const receive = (found: Item | null) => {
|
||||
if (active) {
|
||||
setItem(found);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const { params } = this.props.match;
|
||||
this.id = typeof params.id !== 'undefined' ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : 0;
|
||||
this.doi = typeof params.doi !== 'undefined' ? params.doi : '';
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateItem();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const { params } = this.props.match;
|
||||
const id = typeof params.id !== 'undefined' ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : 0;
|
||||
const doi = typeof params.doi !== 'undefined' ? params.doi : '';
|
||||
if (this.id !== id || this.doi !== doi) {
|
||||
this.id = id;
|
||||
this.doi = doi;
|
||||
this.updateItem();
|
||||
if (doi !== '') {
|
||||
ItemUtil.getByDoi(doi, receive);
|
||||
} else if (id !== 0) {
|
||||
ItemUtil.get(id, receive);
|
||||
} else {
|
||||
receive(null);
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [id, doi]);
|
||||
|
||||
updateItem() {
|
||||
if (this.doi !== '') {
|
||||
ItemUtil.getByDoi(this.doi, (item) => {
|
||||
this.setState({ loading: false, item });
|
||||
});
|
||||
} else if (this.id !== 0) {
|
||||
ItemUtil.get(this.id, (item) => {
|
||||
this.setState({ loading: false, item });
|
||||
});
|
||||
}
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
if (this.state.loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
if (this.state.item === null) {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{Functions.mlang(this.state.item.title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}</title>
|
||||
</Helmet>
|
||||
<h3>{Functions.mlang('[en]Item Detail[/en][ja]アイテム詳細[/ja]', lang)}</h3>
|
||||
<br />
|
||||
<ItemType.Detail lang={lang} item={this.state.item} />
|
||||
</>
|
||||
);
|
||||
if (item === null) {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{Functions.mlang(item.title, lang)} -{' '}
|
||||
{Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}
|
||||
</title>
|
||||
</Helmet>
|
||||
<h3>{Functions.mlang('[en]Item Detail[/en][ja]アイテム詳細[/ja]', lang)}</h3>
|
||||
<br />
|
||||
<ItemType.Detail lang={lang} item={item} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseDetailItem;
|
||||
export default DatabaseDetailItem;
|
||||
|
||||
@@ -1,56 +1,31 @@
|
||||
import React, { Component } from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { MultiLang } from '../config';
|
||||
import AdvancedSearchQuery from './lib/AdvancedSearchQuery';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useLocation } from 'react-router';
|
||||
import type { MultiLang } from '../config';
|
||||
import DatabaseListItem from './lib/DatabaseListItem';
|
||||
import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
|
||||
import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
lang: MultiLang
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
search: string;
|
||||
query: AdvancedSearchQuery;
|
||||
}
|
||||
const DatabaseSearchByAdvancedKeyword = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const query = useMemo(() => ItemUtil.getAdvancedSearchQueryByQuery(location.search), [location.search]);
|
||||
|
||||
class DatabaseSearchByAdvancedKeyword extends Component<Props, State> {
|
||||
const searchFunc = useCallback(
|
||||
(condition: SortCondition, func: SearchCallbackFunc) => {
|
||||
ItemUtil.getListByAdvancedSearchQuery(query, condition, func);
|
||||
},
|
||||
[query]
|
||||
);
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
const search = props.location.search;
|
||||
const query = ItemUtil.getAdvancedSearchQueryByQuery(search);
|
||||
this.state = { search, query };
|
||||
this.searchFunc = this.searchFunc.bind(this);
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
const search = nextProps.location.search;
|
||||
if (prevState.search !== search) {
|
||||
const query = ItemUtil.getAdvancedSearchQueryByQuery(search);
|
||||
return { search, query };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getUrl() {
|
||||
return ItemUtil.getSearchByAdvancedKeywordsUrl(this.state.query);
|
||||
}
|
||||
|
||||
searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
|
||||
ItemUtil.getListByAdvancedSearchQuery(this.state.query, condition, func);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const baseUrl = this.getUrl();
|
||||
return (
|
||||
<div className="list">
|
||||
<h3>Listing item</h3>
|
||||
<DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="list">
|
||||
<h3>Listing item</h3>
|
||||
<DatabaseListItem lang={lang} url={ItemUtil.getSearchByAdvancedKeywordsUrl(query)} search={searchFunc} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseSearchByAdvancedKeyword;
|
||||
|
||||
@@ -1,89 +1,60 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Helmet } from '@dr.pogodin/react-helmet';
|
||||
import { Fragment, useCallback } from 'react';
|
||||
import { Link, useParams } from 'react-router';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import DatabaseListIndex from './lib/DatabaseListIndex';
|
||||
import DatabaseListItem from './lib/DatabaseListItem';
|
||||
import IndexUtil, { Index, INDEX_ID_PUBLIC } from './lib/IndexUtil';
|
||||
import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
|
||||
import IndexUtil, { INDEX_ID_PUBLIC, type Index } from './lib/IndexUtil';
|
||||
import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
|
||||
|
||||
interface Params {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface Props extends RouteComponentProps<Params> {
|
||||
export interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
indexId: number;
|
||||
}
|
||||
const DatabaseSearchByIndexId = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const { id } = useParams<{ id?: string }>();
|
||||
const indexId = id ? (id.match(/^\d+$/) !== null ? parseInt(id, 10) : 0) : INDEX_ID_PUBLIC;
|
||||
|
||||
class DatabaseSearchByIndexId extends Component<Props, State> {
|
||||
const searchFunc = useCallback(
|
||||
(condition: SortCondition, func: SearchCallbackFunc) => {
|
||||
if (indexId === 0) {
|
||||
func({ total: 0, data: [] });
|
||||
} else {
|
||||
ItemUtil.getListByIndexId(indexId, condition, func);
|
||||
}
|
||||
},
|
||||
[indexId]
|
||||
);
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
const { params } = props.match;
|
||||
this.state = {
|
||||
indexId: params.id ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : INDEX_ID_PUBLIC,
|
||||
}
|
||||
this.searchFunc = this.searchFunc.bind(this);
|
||||
const index = IndexUtil.get(indexId);
|
||||
if (index === null) {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
const { params } = nextProps.match;
|
||||
const indexId = params.id ? (params.id.match(/^\d+$/) !== null ? parseInt(params.id, 10) : 0) : INDEX_ID_PUBLIC;
|
||||
if (prevState.indexId !== indexId) {
|
||||
return { indexId };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getUrl() {
|
||||
if (this.state.indexId === 0) {
|
||||
return '/';
|
||||
}
|
||||
return IndexUtil.getUrl(this.state.indexId);
|
||||
}
|
||||
|
||||
searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
|
||||
if (this.state.indexId === 0) {
|
||||
const res = { total: 0, data: [] };
|
||||
func(res);
|
||||
} else {
|
||||
ItemUtil.getListByIndexId(this.state.indexId, condition, func);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const index = IndexUtil.get(this.state.indexId);
|
||||
if (index === null) {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
const baseUrl = this.getUrl();
|
||||
const pIndexes = IndexUtil.getParents(this.state.indexId);
|
||||
const parents = pIndexes.map((value: Index) => {
|
||||
const url: string = IndexUtil.getUrl(value.id);
|
||||
const title = Functions.mlang(value.title, lang);
|
||||
return <Fragment key={value.id}>/ <Link to={url}>{title}</Link> </Fragment>;
|
||||
});
|
||||
const title = pIndexes.map((value) => { return '/' + Functions.mlang(value.title, lang); }).join('');
|
||||
return (
|
||||
<div className="list">
|
||||
<Helmet>
|
||||
<title>{Functions.mlang(title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} - {Functions.siteTitle(lang)}</title>
|
||||
</Helmet>
|
||||
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
||||
<div>{parents}</div>
|
||||
<DatabaseListIndex lang={lang} index={index} />
|
||||
<DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const baseUrl = indexId === 0 ? '/' : IndexUtil.getUrl(indexId);
|
||||
const pIndexes = IndexUtil.getParents(indexId);
|
||||
const parents = pIndexes.map((value: Index) => (
|
||||
<Fragment key={value.id}>
|
||||
/ <Link to={IndexUtil.getUrl(value.id)}>{Functions.mlang(value.title, lang)}</Link>{' '}
|
||||
</Fragment>
|
||||
));
|
||||
const title = pIndexes.map((value) => `/${Functions.mlang(value.title, lang)}`).join('');
|
||||
return (
|
||||
<div className="list">
|
||||
<Helmet>
|
||||
<title>
|
||||
{Functions.mlang(title, lang)} - {Functions.mlang('[en]Database[/en][ja]データベース[/ja]', lang)} -{' '}
|
||||
{Functions.siteTitle(lang)}
|
||||
</title>
|
||||
</Helmet>
|
||||
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
||||
<div>{parents}</div>
|
||||
<DatabaseListIndex lang={lang} index={index} />
|
||||
<DatabaseListItem lang={lang} url={baseUrl} search={searchFunc} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseSearchByIndexId;
|
||||
|
||||
@@ -1,73 +1,41 @@
|
||||
import React, { Component } from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { MultiLang } from '../config';
|
||||
import { useCallback } from 'react';
|
||||
import { useParams } from 'react-router';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import DatabaseListItem from './lib/DatabaseListItem';
|
||||
import ItemUtil, { SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
|
||||
import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
|
||||
|
||||
interface Params {
|
||||
itemType: string;
|
||||
subItemType?: string;
|
||||
}
|
||||
|
||||
interface Props extends RouteComponentProps<Params> {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
itemType: string;
|
||||
subItemType: string;
|
||||
}
|
||||
const DatabaseSearchByItemType = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const params = useParams<{ itemType?: string; subItemType?: string }>();
|
||||
const itemType = params.itemType ?? '';
|
||||
const subItemType = params.subItemType ?? '';
|
||||
|
||||
class DatabaseSearchByItemType extends Component<Props, State> {
|
||||
const searchFunc = useCallback(
|
||||
(condition: SortCondition, func: SearchCallbackFunc) => {
|
||||
if (itemType === '') {
|
||||
func({ total: 0, data: [] });
|
||||
} else {
|
||||
ItemUtil.getListByItemType(itemType, subItemType, condition, func);
|
||||
}
|
||||
},
|
||||
[itemType, subItemType]
|
||||
);
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
const { params } = this.props.match;
|
||||
this.state = {
|
||||
itemType: params.itemType ? params.itemType : '',
|
||||
subItemType: params.subItemType ? params.subItemType : '',
|
||||
};
|
||||
this.searchFunc = this.searchFunc.bind(this);
|
||||
let baseUrl = ItemUtil.getItemTypeSearchUrl(itemType);
|
||||
if (subItemType !== '') {
|
||||
baseUrl += `/${subItemType}`;
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
const { params } = nextProps.match;
|
||||
const item_type = params.itemType ? params.itemType : '';
|
||||
const sub_item_type = params.subItemType ? params.subItemType : '';
|
||||
if (prevState.itemType !== item_type || prevState.subItemType !== sub_item_type) {
|
||||
return { item_type, sub_item_type };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
|
||||
if (this.state.itemType === '') {
|
||||
const res = { total: 0, data: [] };
|
||||
func(res);
|
||||
} else {
|
||||
ItemUtil.getListByItemType(this.state.itemType, this.state.subItemType, condition, func);
|
||||
}
|
||||
}
|
||||
|
||||
getUrl() {
|
||||
let url = ItemUtil.getItemTypeSearchUrl(this.state.itemType);
|
||||
if (this.state.subItemType !== '') {
|
||||
url += '/' + this.state.subItemType;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const baseUrl = this.getUrl();
|
||||
return (
|
||||
<div className="list">
|
||||
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
||||
<DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="list">
|
||||
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
||||
<DatabaseListItem lang={lang} url={baseUrl} search={searchFunc} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseSearchByItemType;
|
||||
|
||||
@@ -1,60 +1,39 @@
|
||||
import React, { Component } from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { MultiLang } from '../config';
|
||||
import { useCallback } from 'react';
|
||||
import { useLocation } from 'react-router';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
import DatabaseListItem from './lib/DatabaseListItem';
|
||||
import ItemUtil, { KeywordSearchType, SearchCallbackFunc, SortCondition } from './lib/ItemUtil';
|
||||
import ItemUtil, { type SearchCallbackFunc, type SortCondition } from './lib/ItemUtil';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
type: KeywordSearchType;
|
||||
keyword: string;
|
||||
}
|
||||
const DatabaseSearchByKeyword = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const { type, keyword } = ItemUtil.getSearchKeywordByQuery(location.search);
|
||||
|
||||
class DatabaseSearchByKeyword extends Component<Props, State> {
|
||||
const searchFunc = useCallback(
|
||||
(condition: SortCondition, func: SearchCallbackFunc) => {
|
||||
if (keyword === '') {
|
||||
func({ total: 0, data: [] });
|
||||
} else {
|
||||
ItemUtil.getListByKeyword(type, keyword, condition, func);
|
||||
}
|
||||
},
|
||||
[type, keyword]
|
||||
);
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
const { type, keyword } = ItemUtil.getSearchKeywordByQuery(this.props.location.search);
|
||||
this.state = { type, keyword };
|
||||
this.searchFunc = this.searchFunc.bind(this);
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
const { type, keyword } = ItemUtil.getSearchKeywordByQuery(nextProps.location.search);
|
||||
if (prevState.type !== type || prevState.keyword !== keyword) {
|
||||
return { type, keyword };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getUrl() {
|
||||
return ItemUtil.getSearchByKeywordUrl(this.state.type, this.state.keyword);
|
||||
}
|
||||
|
||||
searchFunc(condition: SortCondition, func: SearchCallbackFunc) {
|
||||
if (this.state.keyword === '') {
|
||||
const res = { total: 0, data: [] };
|
||||
func(res);
|
||||
} else {
|
||||
ItemUtil.getListByKeyword(this.state.type, this.state.keyword, condition, func);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const baseUrl = this.getUrl();
|
||||
return (
|
||||
<div className="list">
|
||||
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
||||
<p>{Functions.mlang('[en]Search Keyword[/en][ja]検索キーワード[/ja]', lang)} : {this.state.keyword}</p>
|
||||
<DatabaseListItem lang={lang} url={baseUrl} search={this.searchFunc} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="list">
|
||||
<h3>{Functions.mlang('[en]Listing item[/en][ja]アイテム一覧[/ja]', lang)}</h3>
|
||||
<p>
|
||||
{Functions.mlang('[en]Search Keyword[/en][ja]検索キーワード[/ja]', lang)} : {keyword}
|
||||
</p>
|
||||
<DatabaseListItem lang={lang} url={ItemUtil.getSearchByKeywordUrl(type, keyword)} search={searchFunc} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatabaseSearchByKeyword;
|
||||
|
||||
@@ -10,4 +10,4 @@
|
||||
.itemTypes .itemType :global(table .itemTypeName) {
|
||||
vertical-align: middle;
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import Config, { MultiLang } from '../config';
|
||||
import Config, { type MultiLang } from '../config';
|
||||
import styles from './DatabaseTop.module.css';
|
||||
import ItemType from './item-type';
|
||||
|
||||
@@ -19,13 +18,13 @@ const DatabaseTop = (props: Props) => {
|
||||
return (
|
||||
<table className={styles.itemTypes}>
|
||||
<tbody>
|
||||
{types.map((value, idx) => {
|
||||
{types.map((value) => {
|
||||
return (
|
||||
<tr key={idx}>
|
||||
{value.map((type, idx) => {
|
||||
<tr key={value.join('-')}>
|
||||
{value.map((type) => {
|
||||
return (
|
||||
<td key={idx} className={styles.itemType}>
|
||||
{type !== '' && <ItemType.Top lang={lang} type={'xnp' + type} />}
|
||||
<td key={type} className={styles.itemType}>
|
||||
{type !== '' && <ItemType.Top lang={lang} type={`xnp${type}`} />}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
@@ -35,6 +34,6 @@ const DatabaseTop = (props: Props) => {
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DatabaseTop;
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Redirect, RouteComponentProps, withRouter } from 'react-router';
|
||||
import { Navigate, useLocation } from 'react-router';
|
||||
import PageNotFound from '../common/lib/PageNotFound';
|
||||
import { MultiLang } from '../config';
|
||||
import type { MultiLang } from '../config';
|
||||
import Functions from '../functions';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
|
||||
getRedirectUrl(): string {
|
||||
const { location } = this.props;
|
||||
const getRedirectUrl = (location: { pathname: string; search: string }): string => {
|
||||
{
|
||||
const pathname = location.pathname || '';
|
||||
const query = new URLSearchParams(location.search);
|
||||
const search = new RegExp('^/modules/xoonips(?:/+(.*))?$');
|
||||
const search = /^\/modules\/xoonips(?:\/+(.*))?$/;
|
||||
const matches = pathname.match(search);
|
||||
if (matches === null) {
|
||||
return '';
|
||||
@@ -28,11 +25,11 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
case 'detail.php': {
|
||||
const id = query.get('id');
|
||||
if (id !== null) {
|
||||
return '/database/item/id/' + Functions.escape(id);
|
||||
return `/database/item/id/${Functions.escape(id)}`;
|
||||
}
|
||||
const itemId = query.get('item_id');
|
||||
if (itemId !== null && itemId.match(/^\d+$/) !== null) {
|
||||
return '/database/item/' + Functions.escape(itemId);
|
||||
return `/database/item/${Functions.escape(itemId)}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
@@ -40,13 +37,13 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
const indexId = query.get('index_id');
|
||||
if (indexId !== null && indexId.match(/^\d+$/) !== null) {
|
||||
const params = new URLSearchParams();
|
||||
const map: any = {
|
||||
const map: Record<string, { key: string; isNumber: boolean }> = {
|
||||
orderby: { key: 'orderby', isNumber: false },
|
||||
order_dir: { key: 'order_dir', isNumber: true },
|
||||
itemcount: { key: 'itemcount', isNumber: true },
|
||||
page: { key: 'page', isNumber: true }
|
||||
page: { key: 'page', isNumber: true },
|
||||
};
|
||||
for (let k in map) {
|
||||
for (const k in map) {
|
||||
const v = query.get(k);
|
||||
if (v === null || v.length === 0) {
|
||||
continue;
|
||||
@@ -57,7 +54,7 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
params.set(map[k].key, v);
|
||||
}
|
||||
const paramStr = params.toString();
|
||||
return '/database/list/' + Functions.escape(indexId) + (paramStr.length > 0 ? '?' + paramStr : '');
|
||||
return `/database/list/${Functions.escape(indexId)}${paramStr.length > 0 ? `?${paramStr}` : ''}`;
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -78,13 +75,13 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
return '';
|
||||
}
|
||||
const params = new URLSearchParams({ type, keyword });
|
||||
const map: any = {
|
||||
const map: Record<string, { key: string; isNumber: boolean }> = {
|
||||
orderby: { key: 'orderby', isNumber: false },
|
||||
orderdir: { key: 'order_dir', isNumber: true },
|
||||
item_per_page: { key: 'itemcount', isNumber: true },
|
||||
page: { key: 'page', isNumber: true }
|
||||
page: { key: 'page', isNumber: true },
|
||||
};
|
||||
for (let k in map) {
|
||||
for (const k in map) {
|
||||
const v = query.get(k);
|
||||
if (v === null || v.length === 0) {
|
||||
continue;
|
||||
@@ -94,7 +91,7 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
}
|
||||
params.set(map[k].key, v);
|
||||
}
|
||||
return '/database/search?' + params.toString();
|
||||
return `/database/search?${params.toString()}`;
|
||||
}
|
||||
case 'itemtypesearch': {
|
||||
const itemType = query.get('search_itemtype');
|
||||
@@ -102,22 +99,22 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
return '';
|
||||
}
|
||||
const type = itemType.replace('xnp', '');
|
||||
return '/database/search/itemtype/' + Functions.escape(type);
|
||||
return `/database/search/itemtype/${Functions.escape(type)}`;
|
||||
}
|
||||
case 'itemsubtypesearch': {
|
||||
let type = '';
|
||||
let subtype = '';
|
||||
query.forEach((v, k) => {
|
||||
if (k.match(/^xnp[a-z]+$/) !== null && !!v) {
|
||||
if (k.match(/^xnp[a-z]+$/) !== null && v) {
|
||||
type = k.replace('xnp', '');
|
||||
return;
|
||||
}
|
||||
})
|
||||
});
|
||||
if (type === '') {
|
||||
return '';
|
||||
}
|
||||
query.forEach((v, k) => {
|
||||
if (k.match(`^xnp${type}_.+$`) !== null && !!v) {
|
||||
if (k.match(`^xnp${type}_.+$`) !== null && v) {
|
||||
subtype = v;
|
||||
return;
|
||||
}
|
||||
@@ -125,7 +122,7 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
if (subtype === '') {
|
||||
return '';
|
||||
}
|
||||
return '/database/search/itemtype/' + Functions.escape(type) + '/' + Functions.escape(subtype);
|
||||
return `/database/search/itemtype/${Functions.escape(type)}/${Functions.escape(subtype)}`;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
@@ -136,15 +133,16 @@ class DatabaseXoopsPathRedirect extends Component<Props> {
|
||||
}
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const url = this.getRedirectUrl();
|
||||
if (url === '') {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
return <Redirect to={url} />;
|
||||
const DatabaseXoopsPathRedirect = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const url = getRedirectUrl(location);
|
||||
if (url === '') {
|
||||
return <PageNotFound lang={lang} />;
|
||||
}
|
||||
}
|
||||
return <Navigate to={url} replace />;
|
||||
};
|
||||
|
||||
export default withRouter(DatabaseXoopsPathRedirect);
|
||||
export default DatabaseXoopsPathRedirect;
|
||||
|
||||
@@ -4,8 +4,10 @@
|
||||
border-bottom: 1px solid #404040;
|
||||
border-right: 1px solid #404040;
|
||||
background-color: white;
|
||||
height: 400px;
|
||||
width: calc(100% - 6px);
|
||||
/* border-box totals: 400 + 3px padding + 1px border per side, and a width
|
||||
that keeps the 2px the original content-box rule overflowed by. */
|
||||
height: 408px;
|
||||
width: calc(100% + 2px);
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
padding: 3px;
|
||||
@@ -14,6 +16,8 @@
|
||||
|
||||
.formButton {
|
||||
margin: 3px 3px 10px;
|
||||
/* sanitize.css forms.css leaves buttons transparent */
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.indexTree div span {
|
||||
@@ -44,7 +48,9 @@
|
||||
.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child)) {
|
||||
background-position: -9px 0;
|
||||
}
|
||||
.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child).rc-tree-indent-unit-end) {
|
||||
.indexTree:global(
|
||||
.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child).rc-tree-indent-unit-end
|
||||
) {
|
||||
background-position: -18px 0;
|
||||
}
|
||||
.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:last-child.rc-tree-indent-unit-end) {
|
||||
@@ -88,4 +94,4 @@
|
||||
.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper .rc-tree-title) {
|
||||
vertical-align: middle;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,124 +1,95 @@
|
||||
import Tree from 'rc-tree';
|
||||
import { DataNode, EventDataNode } from 'rc-tree/lib/interface';
|
||||
import React, { Component, ReactText } from 'react';
|
||||
import { RouteComponentProps, withRouter } from 'react-router';
|
||||
import { MultiLang } from '../../config';
|
||||
import type { DataNode, EventDataNode } from 'rc-tree/lib/interface';
|
||||
import { type Key, useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import IndexUtil, { Index, INDEX_ID_PUBLIC } from '../lib/IndexUtil';
|
||||
import IndexUtil, { INDEX_ID_PUBLIC, type Index } from '../lib/IndexUtil';
|
||||
import styles from './IndexTree.module.css';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
tree: DataNode[];
|
||||
interface TreeData {
|
||||
elements: DataNode[];
|
||||
expandableKeys: string[];
|
||||
expandedKeys: string[];
|
||||
selectedKeys: number[];
|
||||
defaultExpandedKeys: string[];
|
||||
}
|
||||
|
||||
class IndexTree extends Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.handleClickOpenAll = this.handleClickOpenAll.bind(this);
|
||||
this.handleClickCloseAll = this.handleClickCloseAll.bind(this);
|
||||
this.handleExpand = this.handleExpand.bind(this);
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
const res = this.load();
|
||||
this.state = {
|
||||
tree: res.elements,
|
||||
expandableKeys: res.keys,
|
||||
expandedKeys: res.expandedKeys,
|
||||
selectedKeys: [],
|
||||
};
|
||||
}
|
||||
|
||||
load() {
|
||||
const { lang } = this.props;
|
||||
let keys: string[] = [];
|
||||
let eKeys: string[] = [];
|
||||
const makeTreeNode = (index: Index, depth: number): DataNode => {
|
||||
const title = Functions.mlang(index.title, lang) + (index.numOfItems > 0 ? ' (' + index.numOfItems + ')' : '');
|
||||
const children = IndexUtil.getChildren(index.id);
|
||||
if (children.length === 0) {
|
||||
return { key: String(index.id), title: title };
|
||||
}
|
||||
const childTreeNodes = children.map((value: Index) => {
|
||||
return makeTreeNode(value, depth + 1);
|
||||
});
|
||||
if (depth < 1) {
|
||||
eKeys.push(String(index.id));
|
||||
}
|
||||
keys.push(String(index.id));
|
||||
return { key: String(index.id), title: title, children: childTreeNodes };
|
||||
};
|
||||
let elements: DataNode[] = [];
|
||||
const index = IndexUtil.get(INDEX_ID_PUBLIC);
|
||||
if (index !== null) {
|
||||
elements.push(makeTreeNode(index, 0));
|
||||
const load = (lang: MultiLang): TreeData => {
|
||||
const expandableKeys: string[] = [];
|
||||
const defaultExpandedKeys: string[] = [];
|
||||
const makeTreeNode = (index: Index, depth: number): DataNode => {
|
||||
const title = Functions.mlang(index.title, lang) + (index.numOfItems > 0 ? ` (${index.numOfItems})` : '');
|
||||
const children = IndexUtil.getChildren(index.id);
|
||||
if (children.length === 0) {
|
||||
return { key: String(index.id), title: title };
|
||||
}
|
||||
return {
|
||||
elements: elements,
|
||||
keys: keys,
|
||||
expandedKeys: eKeys,
|
||||
const childTreeNodes = children.map((value: Index) => makeTreeNode(value, depth + 1));
|
||||
if (depth < 1) {
|
||||
defaultExpandedKeys.push(String(index.id));
|
||||
}
|
||||
expandableKeys.push(String(index.id));
|
||||
return { key: String(index.id), title: title, children: childTreeNodes };
|
||||
};
|
||||
const elements: DataNode[] = [];
|
||||
const index = IndexUtil.get(INDEX_ID_PUBLIC);
|
||||
if (index !== null) {
|
||||
elements.push(makeTreeNode(index, 0));
|
||||
}
|
||||
return { elements, expandableKeys, defaultExpandedKeys };
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) {
|
||||
const { lang } = this.props;
|
||||
if (prevProps.lang !== lang) {
|
||||
const res = this.load();
|
||||
this.setState({
|
||||
tree: res.elements,
|
||||
selectedKeys: [],
|
||||
});
|
||||
const toStringKeys = (keys: Key[]): string[] => keys.map((key) => (typeof key === 'string' ? key : String(key)));
|
||||
|
||||
const IndexTree = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const data = useMemo(() => load(lang), [lang]);
|
||||
const [expandedKeys, setExpandedKeys] = useState<string[]>(data.defaultExpandedKeys);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleExpand = (
|
||||
keys: Key[],
|
||||
_info: { node: EventDataNode<DataNode>; expanded: boolean; nativeEvent: MouseEvent }
|
||||
) => {
|
||||
setExpandedKeys(toStringKeys(keys));
|
||||
};
|
||||
|
||||
const handleSelect = (
|
||||
selectedKeys: Key[],
|
||||
_info: {
|
||||
event: 'select';
|
||||
selected: boolean;
|
||||
node: EventDataNode<DataNode>;
|
||||
selectedNodes: DataNode[];
|
||||
nativeEvent: MouseEvent;
|
||||
}
|
||||
}
|
||||
) => {
|
||||
const selectedKey = selectedKeys[0] ?? 0;
|
||||
const key = typeof selectedKey === 'string' ? parseInt(selectedKey, 10) : Number(selectedKey);
|
||||
void navigate(IndexUtil.getUrl(key));
|
||||
};
|
||||
|
||||
handleClickOpenAll() {
|
||||
this.setState({ expandedKeys: this.state.expandableKeys })
|
||||
}
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<button type="button" className={styles.formButton} onClick={() => setExpandedKeys(data.expandableKeys)}>
|
||||
open all
|
||||
</button>
|
||||
<button type="button" className={styles.formButton} onClick={() => setExpandedKeys([])}>
|
||||
close all
|
||||
</button>
|
||||
<Tree
|
||||
className={styles.indexTree}
|
||||
expandedKeys={expandedKeys}
|
||||
selectedKeys={[]}
|
||||
onExpand={handleExpand}
|
||||
onSelect={handleSelect}
|
||||
showIcon={false}
|
||||
treeData={data.elements}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
handleClickCloseAll() {
|
||||
this.setState({ expandedKeys: [] })
|
||||
}
|
||||
|
||||
handleExpand(expandedKeys: ReactText[], info: {
|
||||
node: EventDataNode;
|
||||
expanded: boolean;
|
||||
nativeEvent: MouseEvent;
|
||||
}): void {
|
||||
const keys: string[] = expandedKeys.map((key) => {
|
||||
return typeof key === 'string' ? key : String(key);
|
||||
});
|
||||
this.setState({ expandedKeys: keys });
|
||||
}
|
||||
|
||||
handleSelect(selectedKeys: ReactText[], info: {
|
||||
event: 'select';
|
||||
selected: boolean;
|
||||
node: EventDataNode;
|
||||
selectedNodes: DataNode[];
|
||||
nativeEvent: MouseEvent;
|
||||
}): void {
|
||||
const selectedKey = selectedKeys.shift() || 0;
|
||||
const key = typeof selectedKey === 'string' ? parseInt(selectedKey, 10) : selectedKey;
|
||||
const url = IndexUtil.getUrl(key);
|
||||
this.props.history.push(url);
|
||||
this.setState({ selectedKeys: [] });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<button className={styles.formButton} onClick={this.handleClickOpenAll}>open all</button>
|
||||
<button className={styles.formButton} onClick={this.handleClickCloseAll}>close all</button>
|
||||
<Tree className={styles.indexTree} expandedKeys={this.state.expandedKeys} selectedKeys={this.state.selectedKeys} onExpand={this.handleExpand} onSelect={this.handleSelect} showIcon={false} treeData={this.state.tree} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(IndexTree);
|
||||
export default IndexTree;
|
||||
|
||||
@@ -25,4 +25,4 @@
|
||||
|
||||
.star {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MultiLang } from '../../config';
|
||||
import { Fragment } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import { siteData } from '../../siteData';
|
||||
import imageStar from '../assets/images/star.gif';
|
||||
import rankings from '../assets/rankings.json';
|
||||
import ItemUtil, { ItemCore } from '../lib/ItemUtil';
|
||||
import ItemUtil, { type ItemCore } from '../lib/ItemUtil';
|
||||
import styles from './Rankings.module.css';
|
||||
|
||||
interface Props {
|
||||
@@ -12,37 +12,56 @@ interface Props {
|
||||
}
|
||||
|
||||
const orderLabel = (order: number, lang: string) => {
|
||||
return String(order) + (lang === 'en' ? Functions.ordinal(order) : '位')
|
||||
}
|
||||
return String(order) + (lang === 'en' ? Functions.ordinal(order) : '位');
|
||||
};
|
||||
|
||||
const Rankings = (props: Props) => {
|
||||
const items = [
|
||||
{
|
||||
title: Functions.mlang('[en]Frequently accessed items[/en][ja]頻繁に閲覧されるアイテム[/ja]', props.lang),
|
||||
list: rankings.accessed.map((item, idx) => {
|
||||
list: siteData().rankings.accessed.map((item, idx) => {
|
||||
const url = ItemUtil.getUrl(item as ItemCore);
|
||||
const title = Functions.mlang(item.title, props.lang);
|
||||
const order = orderLabel(idx + 1, props.lang);
|
||||
return (
|
||||
<div key={idx} className={styles.item}>
|
||||
<div key={url} className={styles.item}>
|
||||
<div className={styles.order}>{order}</div>
|
||||
<div className={styles.title}><Link to={url} title={title}>{title}</Link></div>
|
||||
{idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
|
||||
<div className={styles.title}>
|
||||
<Link to={url} title={title}>
|
||||
{title}
|
||||
</Link>
|
||||
</div>
|
||||
{idx === 0 && (
|
||||
<div className={styles.star}>
|
||||
<img src={imageStar} alt={order} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: Functions.mlang('[en]Frequently downloaded items[/en][ja]頻繁にダウンロードされるアイテム[/ja]', props.lang),
|
||||
list: rankings.downloaded.map((item, idx) => {
|
||||
title: Functions.mlang(
|
||||
'[en]Frequently downloaded items[/en][ja]頻繁にダウンロードされるアイテム[/ja]',
|
||||
props.lang
|
||||
),
|
||||
list: siteData().rankings.downloaded.map((item, idx) => {
|
||||
const url = ItemUtil.getUrl(item as ItemCore);
|
||||
const title = Functions.mlang(item.title, props.lang);
|
||||
const order = orderLabel(idx + 1, props.lang);
|
||||
return (
|
||||
<div key={idx} className={styles.item}>
|
||||
<div key={url} className={styles.item}>
|
||||
<div className={styles.order}>{order}</div>
|
||||
<div className={styles.title}><Link to={url} title={title}>{title}</Link></div>
|
||||
{idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
|
||||
<div className={styles.title}>
|
||||
<Link to={url} title={title}>
|
||||
{title}
|
||||
</Link>
|
||||
</div>
|
||||
{idx === 0 && (
|
||||
<div className={styles.star}>
|
||||
<img src={imageStar} alt={order} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}),
|
||||
@@ -52,7 +71,7 @@ const Rankings = (props: Props) => {
|
||||
<div>
|
||||
{items.map((item, idx) => {
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
<Fragment key={item.title}>
|
||||
{idx !== 0 && <hr />}
|
||||
<h3 className={styles.heading}>{item.title}</h3>
|
||||
<div>{item.list}</div>
|
||||
@@ -61,6 +80,6 @@ const Rankings = (props: Props) => {
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Rankings;
|
||||
export default Rankings;
|
||||
|
||||
@@ -25,4 +25,4 @@
|
||||
|
||||
.star {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MultiLang } from '../../config';
|
||||
import { format } from 'date-fns';
|
||||
import { Link } from 'react-router';
|
||||
import type { MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import { siteData } from '../../siteData';
|
||||
import imageStar from '../assets/images/star.gif';
|
||||
import contents from '../assets/recent-contents.json';
|
||||
import ItemUtil, { ItemCore } from '../lib/ItemUtil';
|
||||
import ItemUtil, { type ItemCore } from '../lib/ItemUtil';
|
||||
import styles from './RecentContents.module.css';
|
||||
|
||||
interface Props {
|
||||
@@ -14,26 +13,36 @@ interface Props {
|
||||
|
||||
const RecentContents = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const list = contents.map((item, idx) => {
|
||||
const list = siteData().recentContents.map((item, idx) => {
|
||||
const url = ItemUtil.getUrl(item as ItemCore);
|
||||
const title = Functions.mlang(item.title, lang);
|
||||
const date = moment(new Date(item.last_update_date * 1000)).format('Y/M/D');
|
||||
const date = format(new Date(item.last_update_date * 1000), 'y/M/d');
|
||||
const order = String(idx + 1) + (lang === 'en' ? Functions.ordinal(idx + 1) : '位');
|
||||
return (
|
||||
<div key={idx} className={styles.item}>
|
||||
<div key={url} className={styles.item}>
|
||||
<div className={styles.order}>{order}</div>
|
||||
<div className={styles.title}><Link className={styles.title} to={url} title={title}>{title}</Link></div>
|
||||
<div className={styles.title}>
|
||||
<Link className={styles.title} to={url} title={title}>
|
||||
{title}
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.date}> ({date})</div>
|
||||
{idx === 0 && <div className={styles.star}><img src={imageStar} alt={order} /></div>}
|
||||
{idx === 0 && (
|
||||
<div className={styles.star}>
|
||||
<img src={imageStar} alt={order} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<h3 className={styles.heading}>{Functions.mlang('[en]Newly Arrived Items[/en][ja]新着アイテム[/ja]', lang)}</h3>
|
||||
<h3 className={styles.heading}>
|
||||
{Functions.mlang('[en]Newly Arrived Items[/en][ja]新着アイテム[/ja]', lang)}
|
||||
</h3>
|
||||
<div>{list}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default RecentContents;
|
||||
export default RecentContents;
|
||||
|
||||
@@ -1,90 +1,69 @@
|
||||
import React, { ChangeEvent, Component, FormEvent } from 'react';
|
||||
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
|
||||
import Config, { MultiLang } from '../../config';
|
||||
import { type ChangeEvent, type FormEvent, useEffect, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router';
|
||||
import Config, { type MultiLang } from '../../config';
|
||||
import Functions from '../../functions';
|
||||
import ItemUtil, { KeywordSearchType } from '../lib/ItemUtil';
|
||||
import ItemUtil, { type KeywordSearchType } from '../lib/ItemUtil';
|
||||
|
||||
interface Props extends RouteComponentProps {
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
interface State {
|
||||
type: KeywordSearchType;
|
||||
keyword: string;
|
||||
pathname: string;
|
||||
}
|
||||
const SEARCH_PATH = '/database/search';
|
||||
|
||||
class Search extends Component<Props, State> {
|
||||
const Search = (props: Props) => {
|
||||
const { lang } = props;
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [type, setType] = useState<KeywordSearchType>('all');
|
||||
const [keyword, setKeyword] = useState('');
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
type: 'all',
|
||||
keyword: '',
|
||||
pathname: '',
|
||||
};
|
||||
this.handleChangeType = this.handleChangeType.bind(this);
|
||||
this.handleChangeKeyword = this.handleChangeKeyword.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
const pathname = nextProps.location.pathname;
|
||||
if (pathname !== prevState.pathname) {
|
||||
if (pathname === '/database/search') {
|
||||
const { type, keyword } = ItemUtil.getSearchKeywordByQuery(nextProps.location.search);
|
||||
return { type, keyword, pathname };
|
||||
}
|
||||
return {
|
||||
type: prevState.type,
|
||||
keyword: prevState.keyword,
|
||||
pathname
|
||||
};
|
||||
// Landing on the results page adopts the query it was called with; moving
|
||||
// anywhere else leaves whatever the visitor has typed alone.
|
||||
useEffect(() => {
|
||||
if (location.pathname === SEARCH_PATH) {
|
||||
const parsed = ItemUtil.getSearchKeywordByQuery(location.search);
|
||||
setType(parsed.type);
|
||||
setKeyword(parsed.keyword);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}, [location.pathname, location.search]);
|
||||
|
||||
handleChangeKeyword(event: ChangeEvent<HTMLInputElement>) {
|
||||
const keyword = event.target.value.trim();
|
||||
this.setState({ keyword });
|
||||
}
|
||||
|
||||
handleChangeType(event: ChangeEvent<HTMLSelectElement>) {
|
||||
const type = event.target.value as KeywordSearchType;
|
||||
this.setState({ type });
|
||||
}
|
||||
|
||||
handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const url = ItemUtil.getSearchByKeywordUrl(this.state.type, this.state.keyword);
|
||||
this.props.history.push(url);
|
||||
}
|
||||
void navigate(ItemUtil.getSearchByKeywordUrl(type, keyword));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const options = [
|
||||
{ value: 'all', label: '[en]All[/en][ja]全て[/ja]' },
|
||||
{ value: 'basic', label: '[en]Title & Keyword[/en][ja]タイトル＆キーワード[/ja]' },
|
||||
];
|
||||
Config.XOONIPS_ITEMTYPES.forEach((type) => {
|
||||
options.push({value: type, label: Functions.pascalCase(type)})
|
||||
});
|
||||
return (
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input style={{width: '170px'}} type="text" value={this.state.keyword} onChange={this.handleChangeKeyword} />
|
||||
|
||||
<select value={this.state.type} onChange={this.handleChangeType}>
|
||||
{options.map((option) => {
|
||||
return <option key={option.value} value={option.value}>{Functions.mlang(option.label, lang)}</option>;
|
||||
})}
|
||||
</select>
|
||||
<br />
|
||||
<input className="formButton" type="submit" value="Search" />
|
||||
|
||||
<Link to="/database/advanced">{Functions.mlang('[en]Advanced[/en][ja]詳細検索[/ja]', lang)}</Link>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
const options = [
|
||||
{ value: 'all', label: '[en]All[/en][ja]全て[/ja]' },
|
||||
{ value: 'basic', label: '[en]Title & Keyword[/en][ja]タイトル＆キーワード[/ja]' },
|
||||
];
|
||||
Config.XOONIPS_ITEMTYPES.forEach((itemType) => {
|
||||
options.push({ value: itemType, label: Functions.pascalCase(itemType) });
|
||||
});
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
style={{ width: '170px' }}
|
||||
type="text"
|
||||
value={keyword}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => setKeyword(event.target.value.trim())}
|
||||
/>
|
||||
|
||||
<select
|
||||
value={type}
|
||||
onChange={(event: ChangeEvent<HTMLSelectElement>) => setType(event.target.value as KeywordSearchType)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{Functions.mlang(option.label, lang)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<br />
|
||||
<input className="formButton" type="submit" value="Search" />
|
||||
|
||||
<Link to="/database/advanced">{Functions.mlang('[en]Advanced[/en][ja]詳細検索[/ja]', lang)}</Link>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default withRouter(Search);
|
||||
export default Search;
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
|
||||
class BinderAdvancedSearch extends AdvancedSearchBase {
|
||||
|
||||
constructor(props: AdvancedSearchBaseProps) {
|
||||
super(props);
|
||||
this.type = 'binder';
|
||||
this.title = 'Binder';
|
||||
this.state.values['title'] = '';
|
||||
this.state.values['keyword'] = '';
|
||||
this.state.values['description'] = '';
|
||||
this.state.values['doi'] = '';
|
||||
this.state.values.title = '';
|
||||
this.state.values.keyword = '';
|
||||
this.state.values.description = '';
|
||||
this.state.values.doi = '';
|
||||
}
|
||||
|
||||
getRows() {
|
||||
const rows = [
|
||||
{ label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: this.renderFieldInputText('keyword', 50),
|
||||
},
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
|
||||
{ label: 'ID', value: this.renderFieldInputText('doi', 50) },
|
||||
];
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Component } from 'react';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import Functions from '../../../functions';
|
||||
import ItemUtil, { ItemBinder, Item } from '../../lib/ItemUtil';
|
||||
import ItemUtil, { type Item, type ItemBinder } from '../../lib/ItemUtil';
|
||||
import ItemType from '..';
|
||||
import DetailBase from '../lib/DetailBase';
|
||||
import ItemTypeField from '../lib/field';
|
||||
import { MultiLang } from '../../../config';
|
||||
import ItemType from '..';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -27,7 +27,7 @@ class BinderLinkItems extends Component<Props, State> {
|
||||
this.updateItems();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) {
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
const prevItemIds = prevProps.item.item_link;
|
||||
const nextItemIds = this.props.item.item_link;
|
||||
if (prevItemIds.toString() !== nextItemIds.toString()) {
|
||||
@@ -51,7 +51,13 @@ class BinderLinkItems extends Component<Props, State> {
|
||||
<tbody>
|
||||
{this.state.items.map((item, idx) => {
|
||||
const evenodd = idx % 2 ? 'even' : 'odd';
|
||||
return <tr key={item.item_id}><td className={evenodd}><ItemType.List lang={lang} item={item} /></td></tr>;
|
||||
return (
|
||||
<tr key={item.item_id}>
|
||||
<td className={evenodd}>
|
||||
<ItemType.List lang={lang} item={item} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -60,20 +66,37 @@ class BinderLinkItems extends Component<Props, State> {
|
||||
}
|
||||
|
||||
class BinderDetail extends DetailBase {
|
||||
|
||||
getFields() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemBinder;
|
||||
return [
|
||||
{ label: 'ID', value: item.doi },
|
||||
{ label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
|
||||
{ label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
|
||||
{ label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
|
||||
{ label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Description[/en][ja]概要[/ja]',
|
||||
value: <ItemTypeField.Description lang={lang} description={item.description} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Created Date[/en][ja]作成日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Contributor[/en][ja]登録者[/ja]',
|
||||
value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
|
||||
},
|
||||
{ label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
|
||||
{ label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
|
||||
{
|
||||
label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
|
||||
value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
|
||||
},
|
||||
{ label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
|
||||
];
|
||||
}
|
||||
@@ -92,4 +115,4 @@ class BinderDetail extends DetailBase {
|
||||
}
|
||||
}
|
||||
|
||||
export default BinderDetail;
|
||||
export default BinderDetail;
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link } from 'react-router';
|
||||
import Functions from '../../../functions';
|
||||
import iconFile from '../../assets/images/icon_binder.gif';
|
||||
import { ItemBinder } from '../../lib/ItemUtil';
|
||||
import ListBase, { ListBaseProps } from '../lib/ListBase';
|
||||
import type { ItemBinder } from '../../lib/ItemUtil';
|
||||
import ListBase, { type ListBaseProps } from '../lib/ListBase';
|
||||
|
||||
class BinderList extends ListBase {
|
||||
|
||||
constructor(props: ListBaseProps) {
|
||||
super(props);
|
||||
this.label = 'Binder';
|
||||
@@ -18,7 +16,8 @@ class BinderList extends ListBase {
|
||||
const item = this.props.item as ItemBinder;
|
||||
return (
|
||||
<>
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
|
||||
<br />
|
||||
{Functions.mlang(item.description, lang)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import TopBase, { TopBaseProps } from '../lib/TopBase';
|
||||
import iconFile from '../../assets/images/icon_binder.gif';
|
||||
import TopBase, { type TopBaseProps } from '../lib/TopBase';
|
||||
|
||||
class BinderTop extends TopBase {
|
||||
|
||||
constructor(props: TopBaseProps) {
|
||||
super(props);
|
||||
this.type = 'binder';
|
||||
@@ -12,4 +11,4 @@ class BinderTop extends TopBase {
|
||||
}
|
||||
}
|
||||
|
||||
export default BinderTop;
|
||||
export default BinderTop;
|
||||
|
||||
@@ -1,35 +1,43 @@
|
||||
import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
|
||||
class BookAdvancedSearch extends AdvancedSearchBase {
|
||||
|
||||
constructor(props: AdvancedSearchBaseProps) {
|
||||
super(props);
|
||||
this.type = 'book';
|
||||
this.title = 'Book';
|
||||
this.state.values['title'] = '';
|
||||
this.state.values['keyword'] = '';
|
||||
this.state.values['description'] = '';
|
||||
this.state.values['doi'] = '';
|
||||
this.state.values['author'] = '';
|
||||
this.state.values['editor'] = '';
|
||||
this.state.values['publisher'] = '';
|
||||
this.state.values['publication_year'] = '';
|
||||
this.state.values['isbn'] = '';
|
||||
this.state.values.title = '';
|
||||
this.state.values.keyword = '';
|
||||
this.state.values.description = '';
|
||||
this.state.values.doi = '';
|
||||
this.state.values.author = '';
|
||||
this.state.values.editor = '';
|
||||
this.state.values.publisher = '';
|
||||
this.state.values.publication_year = '';
|
||||
this.state.values.isbn = '';
|
||||
this.state.values['file.book_pdf.original_file_name'] = '';
|
||||
}
|
||||
|
||||
getRows() {
|
||||
const rows = [
|
||||
{ label: '[en]Book Title[/en][ja]著書名[/ja]', value: this.renderFieldInputText('title', 50) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: this.renderFieldInputText('keyword', 50),
|
||||
},
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
|
||||
{ label: 'ID', value: this.renderFieldInputText('doi', 50) },
|
||||
{ label: '[en]Author[/en][ja]著者[/ja]', value: this.renderFieldInputText('author', 50) },
|
||||
{ label: '[en]Editor[/en][ja]編集者[/ja]', value: this.renderFieldInputText('editor', 50) },
|
||||
{ label: '[en]Publisher[/en][ja]出版社[/ja]', value: this.renderFieldInputText('publisher', 50) },
|
||||
{ label: '[en]Publication Year[/en][ja]出版年[/ja]', value: this.renderFieldInputText('publication_year', 10) },
|
||||
{
|
||||
label: '[en]Publication Year[/en][ja]出版年[/ja]',
|
||||
value: this.renderFieldInputText('publication_year', 10),
|
||||
},
|
||||
{ label: 'ISBN', value: this.renderFieldInputText('isbn', 50) },
|
||||
{ label: '[en]PDF File[/en][ja]PDF ファイル[/ja]', value: this.renderFieldInputText('file.book_pdf.original_file_name', 50) },
|
||||
{
|
||||
label: '[en]PDF File[/en][ja]PDF ファイル[/ja]',
|
||||
value: this.renderFieldInputText('file.book_pdf.original_file_name', 50),
|
||||
},
|
||||
];
|
||||
return rows;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,72 @@
|
||||
import React from 'react';
|
||||
import Functions from '../../../functions';
|
||||
import { ItemBook } from '../../lib/ItemUtil';
|
||||
import type { ItemBook } from '../../lib/ItemUtil';
|
||||
import DetailBase from '../lib/DetailBase';
|
||||
import ItemTypeField from '../lib/field';
|
||||
|
||||
class BookDetail extends DetailBase {
|
||||
|
||||
getFields() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemBook;
|
||||
return [
|
||||
{ label: 'ID', value: item.doi },
|
||||
{ label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
|
||||
{
|
||||
label: '[en]Language[/en][ja]言語[/ja]',
|
||||
value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
|
||||
},
|
||||
{ label: '[en]Book Title[/en][ja]著書名[/ja]', value: Functions.mlang(item.title, lang) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
|
||||
{ label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
|
||||
{ label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
|
||||
{ label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Description[/en][ja]概要[/ja]',
|
||||
value: <ItemTypeField.Description lang={lang} description={item.description} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Created Date[/en][ja]作成日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Contributor[/en][ja]登録者[/ja]',
|
||||
value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
|
||||
},
|
||||
{ label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
|
||||
{ label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
|
||||
{
|
||||
label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
|
||||
value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
|
||||
},
|
||||
{ label: '[en]Author[/en][ja]著者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.author} /> },
|
||||
{ label: '[en]Editor[/en][ja]編集者[/ja]', value: Functions.mlang(item.editor, lang) },
|
||||
{ label: '[en]Publisher[/en][ja]出版社[/ja]', value: Functions.mlang(item.publisher, lang) },
|
||||
{ label: '[en]Publication Year[/en][ja]出版年[/ja]', value: item.publication_year },
|
||||
{ label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
|
||||
{ label: '[en]PDF File[/en][ja]PDF ファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="book_pdf" downloadLimit={item.attachment_dl_limit} /> },
|
||||
{
|
||||
label: 'URL',
|
||||
value: (
|
||||
<a href={item.url} target="_blank" rel="noopener noreferrer">
|
||||
{item.url}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: '[en]PDF File[/en][ja]PDF ファイル[/ja]',
|
||||
value: (
|
||||
<ItemTypeField.ItemFile
|
||||
lang={lang}
|
||||
file={item.file}
|
||||
type="book_pdf"
|
||||
downloadLimit={item.attachment_dl_limit}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
|
||||
{ label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
|
||||
{
|
||||
label: '[en]Related to[/en][ja]関連アイテム[/ja]',
|
||||
value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link } from 'react-router';
|
||||
import Functions from '../../../functions';
|
||||
import iconFile from '../../assets/images/icon_book.gif';
|
||||
import { ItemBook } from '../../lib/ItemUtil';
|
||||
import ListBase, { ListBaseProps } from '../lib/ListBase';
|
||||
import type { ItemBook } from '../../lib/ItemUtil';
|
||||
import ListBase, { type ListBaseProps } from '../lib/ListBase';
|
||||
|
||||
class BookList extends ListBase {
|
||||
|
||||
constructor(props: ListBaseProps) {
|
||||
super(props);
|
||||
this.label = 'Book';
|
||||
@@ -16,12 +14,11 @@ class BookList extends ListBase {
|
||||
renderBody() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemBook;
|
||||
const authors = item.author.map((author, i) => {
|
||||
return <Fragment key={i}>{i > 0 && ', '}{Functions.mlang(author, lang)}</Fragment>
|
||||
});
|
||||
const authors = item.author.map((author) => Functions.mlang(author, lang)).join(', ');
|
||||
return (
|
||||
<>
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
|
||||
<br />
|
||||
{authors}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import TopBase, { TopBaseProps } from '../lib/TopBase';
|
||||
import iconFile from '../../assets/images/icon_book.gif';
|
||||
import TopBase, { type TopBaseProps } from '../lib/TopBase';
|
||||
|
||||
class BookTop extends TopBase {
|
||||
|
||||
constructor(props: TopBaseProps) {
|
||||
super(props);
|
||||
this.type = 'book';
|
||||
@@ -12,4 +11,4 @@ class BookTop extends TopBase {
|
||||
}
|
||||
}
|
||||
|
||||
export default BookTop;
|
||||
export default BookTop;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import BookTop from './BookTop';
|
||||
import BookList from './BookList';
|
||||
import BookDetail from './BookDetail';
|
||||
import BookAdvancedSearch from './BookAdvancedSearch';
|
||||
import BookDetail from './BookDetail';
|
||||
import BookList from './BookList';
|
||||
import BookTop from './BookTop';
|
||||
|
||||
const ItemTypeBook = {
|
||||
Top: BookTop,
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React from 'react';
|
||||
import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
|
||||
import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
|
||||
class ConferenceAdvancedSearch extends AdvancedSearchBase {
|
||||
|
||||
constructor(props: AdvancedSearchBaseProps) {
|
||||
super(props);
|
||||
this.type = 'conference';
|
||||
@@ -12,15 +10,15 @@ class ConferenceAdvancedSearch extends AdvancedSearchBase {
|
||||
const year = String(now.getFullYear());
|
||||
const month = String(now.getMonth() + 1);
|
||||
const mday = String(now.getDate());
|
||||
this.state.values['title'] = '';
|
||||
this.state.values['presentation_type'] = '';
|
||||
this.state.values['author'] = '';
|
||||
this.state.values['conference_from_year'] = year;
|
||||
this.state.values['conference_from_month'] = month;
|
||||
this.state.values['conference_from_mday'] = mday;
|
||||
this.state.values['conference_to_year'] = year;
|
||||
this.state.values['conference_to_month'] = month;
|
||||
this.state.values['conference_to_mday'] = mday;
|
||||
this.state.values.title = '';
|
||||
this.state.values.presentation_type = '';
|
||||
this.state.values.author = '';
|
||||
this.state.values.conference_from_year = year;
|
||||
this.state.values.conference_from_month = month;
|
||||
this.state.values.conference_from_mday = mday;
|
||||
this.state.values.conference_to_year = year;
|
||||
this.state.values.conference_to_month = month;
|
||||
this.state.values.conference_to_mday = mday;
|
||||
this.setIgnoreKey('conference_from_year');
|
||||
this.setIgnoreKey('conference_from_month');
|
||||
this.setIgnoreKey('conference_from_mday');
|
||||
@@ -33,8 +31,12 @@ class ConferenceAdvancedSearch extends AdvancedSearchBase {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{this.renderFieldDate('From', 'conference_from_year', 'conference_from_month', 'conference_from_mday')}
|
||||
|
||||
{this.renderFieldDate(
|
||||
'From',
|
||||
'conference_from_year',
|
||||
'conference_from_month',
|
||||
'conference_from_mday'
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{this.renderFieldDate('To', 'conference_to_year', 'conference_to_month', 'conference_to_mday')}
|
||||
@@ -46,12 +48,15 @@ class ConferenceAdvancedSearch extends AdvancedSearchBase {
|
||||
getRows() {
|
||||
const rows = [
|
||||
{ label: '[en]Presentation Title[/en][ja]発表議題[/ja]', value: this.renderFieldInputText('title', 50) },
|
||||
{ label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]', value: this.renderFieldSelect('presentation_type', ItemConferenceSubTypes) },
|
||||
{
|
||||
label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]',
|
||||
value: this.renderFieldSelect('presentation_type', ItemConferenceSubTypes),
|
||||
},
|
||||
{ label: '[en]Author[/en][ja]発表者[/ja]', value: this.renderFieldInputText('author', 50) },
|
||||
{ label: '[en]Date[/en][ja]日付[/ja]', value: this.renderDate() }
|
||||
{ label: '[en]Date[/en][ja]日付[/ja]', value: this.renderDate() },
|
||||
];
|
||||
return rows;
|
||||
}
|
||||
}
|
||||
|
||||
export default ConferenceAdvancedSearch;
|
||||
export default ConferenceAdvancedSearch;
|
||||
|
||||
@@ -1,36 +1,67 @@
|
||||
import React from 'react';
|
||||
import Functions from '../../../functions';
|
||||
import { ItemConference } from '../../lib/ItemUtil';
|
||||
import type { ItemConference } from '../../lib/ItemUtil';
|
||||
import DetailBase from '../lib/DetailBase';
|
||||
import ItemTypeField from '../lib/field';
|
||||
import ConferenceUtil from './ConferenceUtil';
|
||||
|
||||
class ConferenceDetail extends DetailBase {
|
||||
|
||||
getFields() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemConference;
|
||||
return [
|
||||
{ label: 'ID', value: item.doi },
|
||||
{ label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
|
||||
{
|
||||
label: '[en]Language[/en][ja]言語[/ja]',
|
||||
value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
|
||||
},
|
||||
{ label: '[en]Conference Title[/en][ja]学会名[/ja]', value: Functions.mlang(item.conference_title, lang) },
|
||||
{ label: '[en]Place[/en][ja]開催地[/ja]', value: item.place },
|
||||
{ label: '[en]Date[/en][ja]日付[/ja]', value: <ConferenceUtil.ConferenceDate lang={lang} item={item} /> },
|
||||
{ label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
|
||||
{ label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
|
||||
{ label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
|
||||
{
|
||||
label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Created Date[/en][ja]作成日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Contributor[/en][ja]登録者[/ja]',
|
||||
value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
|
||||
},
|
||||
{ label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
|
||||
{ label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
|
||||
{
|
||||
label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
|
||||
value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
|
||||
},
|
||||
{ label: '[en]Presentation Title[/en][ja]発表議題[/ja]', value: Functions.mlang(item.title, lang) },
|
||||
{ label: '[en]Author[/en][ja]発表者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.author} /> },
|
||||
{ label: '[en]Abstract[/en][ja]要約[/ja]', value: <ItemTypeField.Description lang={lang} description={item.abstract} /> },
|
||||
{ label: '[en]Presentation File[/en][ja]発表資料[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_file" /> },
|
||||
{ label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]', value: <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} /> },
|
||||
{ label: '[en]Conference Paper[/en][ja]学会資料[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_paper" /> },
|
||||
{
|
||||
label: '[en]Author[/en][ja]発表者[/ja]',
|
||||
value: <ItemTypeField.Author lang={lang} author={item.author} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Abstract[/en][ja]要約[/ja]',
|
||||
value: <ItemTypeField.Description lang={lang} description={item.abstract} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Presentation File[/en][ja]発表資料[/ja]',
|
||||
value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_file" />,
|
||||
},
|
||||
{
|
||||
label: '[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]',
|
||||
value: <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Conference Paper[/en][ja]学会資料[/ja]',
|
||||
value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="conference_paper" />,
|
||||
},
|
||||
{ label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
|
||||
{ label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
|
||||
{
|
||||
label: '[en]Related to[/en][ja]関連アイテム[/ja]',
|
||||
value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export default ConferenceDetail;
|
||||
export default ConferenceDetail;
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ItemConference } from '../../lib/ItemUtil';
|
||||
import ListBase, { ListBaseProps } from '../lib/ListBase';
|
||||
import ConferenceUtil from './ConferenceUtil';
|
||||
import iconFile from '../../assets/images/icon_conference.gif';
|
||||
import { Link } from 'react-router';
|
||||
import Functions from '../../../functions';
|
||||
import iconFile from '../../assets/images/icon_conference.gif';
|
||||
import type { ItemConference } from '../../lib/ItemUtil';
|
||||
import ListBase, { type ListBaseProps } from '../lib/ListBase';
|
||||
import ConferenceUtil from './ConferenceUtil';
|
||||
|
||||
class ConferenceList extends ListBase {
|
||||
|
||||
constructor(props: ListBaseProps) {
|
||||
super(props);
|
||||
this.label = 'Conference';
|
||||
@@ -17,17 +15,17 @@ class ConferenceList extends ListBase {
|
||||
renderBody() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemConference;
|
||||
const authors = item.author.map((author, i) => {
|
||||
return <Fragment key={i}>{i > 0 && ', '}{Functions.mlang(author, lang)}</Fragment>
|
||||
});
|
||||
const authors = item.author.map((author) => Functions.mlang(author, lang)).join(', ');
|
||||
return (
|
||||
<>
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
|
||||
{Functions.mlang(item.conference_title, lang)} (<ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />)<br />
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
|
||||
<br />
|
||||
{Functions.mlang(item.conference_title, lang)} (
|
||||
<ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />)<br />
|
||||
{authors}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ConferenceList;
|
||||
export default ConferenceList;
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
|
||||
import TopBase, { TopBaseProps } from '../lib/TopBase';
|
||||
import iconFile from '../../assets/images/icon_conference.gif';
|
||||
import { ItemConferenceSubTypes } from '../../lib/ItemUtil';
|
||||
import TopBase, { type TopBaseProps } from '../lib/TopBase';
|
||||
|
||||
class ConferenceTop extends TopBase {
|
||||
|
||||
constructor(props: TopBaseProps) {
|
||||
super(props);
|
||||
this.type = 'conference';
|
||||
this.label = 'Conference';
|
||||
this.icon = iconFile;
|
||||
// DBPF:
|
||||
// this.description = '[en]Electrical presentation files for conference.[/en][ja]学会発表[/ja]';
|
||||
this.description = '[en]Presentations in conferences.[/en][ja]学術会議での発表[/ja]';
|
||||
this.subTypes = ItemConferenceSubTypes;
|
||||
}
|
||||
}
|
||||
|
||||
export default ConferenceTop;
|
||||
export default ConferenceTop;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../config';
|
||||
import { ItemConference, ItemConferenceSubType, ItemConferenceSubTypes } from '../../lib/ItemUtil';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import { type ItemConference, type ItemConferenceSubType, ItemConferenceSubTypes } from '../../lib/ItemUtil';
|
||||
|
||||
interface PresentationTypeProps {
|
||||
lang: MultiLang;
|
||||
@@ -9,12 +8,14 @@ interface PresentationTypeProps {
|
||||
|
||||
const PresentationType = (props: PresentationTypeProps) => {
|
||||
const { type } = props;
|
||||
const subtype = ItemConferenceSubTypes.find((value) => { return value.type === type; });
|
||||
const subtype = ItemConferenceSubTypes.find((value) => {
|
||||
return value.type === type;
|
||||
});
|
||||
if (typeof subtype === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
return (<span>{subtype.label}</span>);
|
||||
}
|
||||
return <span>{subtype.label}</span>;
|
||||
};
|
||||
|
||||
interface ConferenceDateProps {
|
||||
lang: MultiLang;
|
||||
@@ -24,14 +25,30 @@ interface ConferenceDateProps {
|
||||
const ConferenceDate = (props: ConferenceDateProps) => {
|
||||
const { item } = props;
|
||||
const monthStr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const from = 'From: ' + monthStr[item.conference_from_month - 1] + ' ' + item.conference_from_mday + ', ' + item.conference_from_year;
|
||||
const to = 'To: ' + monthStr[item.conference_to_month - 1] + ' ' + item.conference_to_mday + ', ' + item.conference_to_year;
|
||||
return (<span>{from} {to}</span>);
|
||||
}
|
||||
const from =
|
||||
'From: ' +
|
||||
monthStr[item.conference_from_month - 1] +
|
||||
' ' +
|
||||
item.conference_from_mday +
|
||||
', ' +
|
||||
item.conference_from_year;
|
||||
const to =
|
||||
'To: ' +
|
||||
monthStr[item.conference_to_month - 1] +
|
||||
' ' +
|
||||
item.conference_to_mday +
|
||||
', ' +
|
||||
item.conference_to_year;
|
||||
return (
|
||||
<span>
|
||||
{from} {to}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const ConferenceUtil = {
|
||||
PresentationType,
|
||||
ConferenceDate,
|
||||
}
|
||||
};
|
||||
|
||||
export default ConferenceUtil;
|
||||
export default ConferenceUtil;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import ConferenceTop from './ConferenceTop';
|
||||
import ConferenceList from './ConferenceList';
|
||||
import ConferenceDetail from './ConferenceDetail';
|
||||
import ConferenceAdvancedSearch from './ConferenceAdvancedSearch';
|
||||
import ConferenceDetail from './ConferenceDetail';
|
||||
import ConferenceList from './ConferenceList';
|
||||
import ConferenceTop from './ConferenceTop';
|
||||
|
||||
const ItemTypeConference = {
|
||||
Top: ConferenceTop,
|
||||
@@ -10,4 +10,4 @@ const ItemTypeConference = {
|
||||
AdvancedSearch: ConferenceAdvancedSearch,
|
||||
};
|
||||
|
||||
export default ItemTypeConference;
|
||||
export default ItemTypeConference;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { ItemDataSubTypes } from '../../lib/ItemUtil';
|
||||
import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
|
||||
class DataAdvancedSearch extends AdvancedSearchBase {
|
||||
|
||||
constructor(props: AdvancedSearchBaseProps) {
|
||||
super(props);
|
||||
this.type = 'data';
|
||||
@@ -11,15 +10,15 @@ class DataAdvancedSearch extends AdvancedSearchBase {
|
||||
const year = String(now.getFullYear());
|
||||
const month = String(now.getMonth() + 1);
|
||||
const mday = String(now.getDate());
|
||||
this.state.values['title'] = '';
|
||||
this.state.values['keyword'] = '';
|
||||
this.state.values['description'] = '';
|
||||
this.state.values['doi'] = '';
|
||||
this.state.values['data_type'] = '';
|
||||
this.state.values['experimenter'] = '';
|
||||
this.state.values['publication_year'] = year;
|
||||
this.state.values['publication_month'] = month;
|
||||
this.state.values['publication_mday'] = mday;
|
||||
this.state.values.title = '';
|
||||
this.state.values.keyword = '';
|
||||
this.state.values.description = '';
|
||||
this.state.values.doi = '';
|
||||
this.state.values.data_type = '';
|
||||
this.state.values.experimenter = '';
|
||||
this.state.values.publication_year = year;
|
||||
this.state.values.publication_month = month;
|
||||
this.state.values.publication_mday = mday;
|
||||
this.state.values['file.preview.caption'] = '';
|
||||
this.state.values['file.data_file.original_file_name'] = '';
|
||||
this.setIgnoreKey('publication_year');
|
||||
@@ -30,17 +29,32 @@ class DataAdvancedSearch extends AdvancedSearchBase {
|
||||
getRows() {
|
||||
const rows = [
|
||||
{ label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: this.renderFieldInputText('keyword', 50),
|
||||
},
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
|
||||
{ label: 'ID', value: this.renderFieldInputText('doi', 50) },
|
||||
{ label: '[en]Data Type[/en][ja]データタイプ[/ja]', value: this.renderFieldSelect('data_type', ItemDataSubTypes) },
|
||||
{
|
||||
label: '[en]Data Type[/en][ja]データタイプ[/ja]',
|
||||
value: this.renderFieldSelect('data_type', ItemDataSubTypes),
|
||||
},
|
||||
{ label: '[en]Experimenter[/en][ja]実験者[/ja]', value: this.renderFieldInputText('experimenter', 50) },
|
||||
{ label: '[en]Date[/en][ja]日付[/ja]', value: this.renderFieldDate('', 'publication_year', 'publication_month', 'publication_mday') },
|
||||
{ label: '[en]Caption[/en][ja]キャプション[/ja]', value: this.renderFieldInputText('file.preview.caption', 50) },
|
||||
{ label: '[en]Data File[/en][ja]データファイル[/ja]', value: this.renderFieldInputText('file.data_file.original_file_name', 50) },
|
||||
{
|
||||
label: '[en]Date[/en][ja]日付[/ja]',
|
||||
value: this.renderFieldDate('', 'publication_year', 'publication_month', 'publication_mday'),
|
||||
},
|
||||
{
|
||||
label: '[en]Caption[/en][ja]キャプション[/ja]',
|
||||
value: this.renderFieldInputText('file.preview.caption', 50),
|
||||
},
|
||||
{
|
||||
label: '[en]Data File[/en][ja]データファイル[/ja]',
|
||||
value: this.renderFieldInputText('file.data_file.original_file_name', 50),
|
||||
},
|
||||
];
|
||||
return rows;
|
||||
}
|
||||
}
|
||||
|
||||
export default DataAdvancedSearch;
|
||||
export default DataAdvancedSearch;
|
||||
|
||||
@@ -1,44 +1,113 @@
|
||||
import React from 'react';
|
||||
import Functions from '../../../functions';
|
||||
import ItemUtil, { ItemData } from '../../lib/ItemUtil';
|
||||
import ItemUtil, { type ItemData } from '../../lib/ItemUtil';
|
||||
import DetailBase from '../lib/DetailBase';
|
||||
import ItemTypeField from '../lib/field';
|
||||
import SimPFLinkIcon from '../lib/field/SimPFLinkIcon';
|
||||
import DataUtil from './DataUtil';
|
||||
|
||||
class DataDetail extends DetailBase {
|
||||
|
||||
getFields() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemData;
|
||||
const fields = [
|
||||
{ label: 'ID', value: item.doi },
|
||||
{ label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
|
||||
{
|
||||
label: '[en]Language[/en][ja]言語[/ja]',
|
||||
value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
|
||||
},
|
||||
{ label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
|
||||
{ label: '[en]Date[/en][ja]日付[/ja]', value: <ItemTypeField.PublicationDate lang={lang} year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
|
||||
{ label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
|
||||
{ label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
|
||||
{ label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Description[/en][ja]概要[/ja]',
|
||||
value: <ItemTypeField.Description lang={lang} description={item.description} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Date[/en][ja]日付[/ja]',
|
||||
value: (
|
||||
<ItemTypeField.PublicationDate
|
||||
lang={lang}
|
||||
year={item.publication_year}
|
||||
month={item.publication_month}
|
||||
mday={item.publication_mday}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Created Date[/en][ja]作成日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Contributor[/en][ja]登録者[/ja]',
|
||||
value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
|
||||
},
|
||||
{ label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
|
||||
{ label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
|
||||
{ label: '[en]Data Type[/en][ja]データタイプ[/ja]', value: <DataUtil.DataType lang={lang} type={item.data_type} /> },
|
||||
{ label: '[en]Experimenter[/en][ja]実験者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.experimenter} /> },
|
||||
{ label: '[en]Preview[/en][ja]プレビュー[/ja]', value: <ItemTypeField.Preview lang={lang} file={item.file} /> },
|
||||
{ label: '[en]Data File[/en][ja]データファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="data_file" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} /> },
|
||||
{
|
||||
label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
|
||||
value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Data Type[/en][ja]データタイプ[/ja]',
|
||||
value: <DataUtil.DataType lang={lang} type={item.data_type} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Experimenter[/en][ja]実験者[/ja]',
|
||||
value: <ItemTypeField.Author lang={lang} author={item.experimenter} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Preview[/en][ja]プレビュー[/ja]',
|
||||
value: <ItemTypeField.Preview lang={lang} file={item.file} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Data File[/en][ja]データファイル[/ja]',
|
||||
value: (
|
||||
<ItemTypeField.ItemFile
|
||||
lang={lang}
|
||||
file={item.file}
|
||||
type="data_file"
|
||||
rights={item.rights}
|
||||
useCc={item.use_cc}
|
||||
ccCommercialUse={item.cc_commercial_use}
|
||||
ccModification={item.cc_modification}
|
||||
downloadLimit={item.attachment_dl_limit}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ label: 'Readme', value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
|
||||
{ label: 'Rights', value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
|
||||
{
|
||||
label: 'Rights',
|
||||
value: (
|
||||
<ItemTypeField.Rights
|
||||
lang={lang}
|
||||
rights={item.rights}
|
||||
useCc={item.use_cc}
|
||||
ccCommercialUse={item.cc_commercial_use}
|
||||
ccModification={item.cc_modification}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
|
||||
{ label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
|
||||
{
|
||||
label: '[en]Related to[/en][ja]関連アイテム[/ja]',
|
||||
value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
|
||||
},
|
||||
];
|
||||
const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
|
||||
if (simpfLinkUrl !== '') {
|
||||
const field = { label: 'Online Simulation', value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
|
||||
const field = {
|
||||
label: 'Online Simulation',
|
||||
value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} />,
|
||||
};
|
||||
fields.splice(14, 0, field);
|
||||
}
|
||||
return fields;
|
||||
}
|
||||
}
|
||||
|
||||
export default DataDetail;
|
||||
export default DataDetail;
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link } from 'react-router';
|
||||
import Functions from '../../../functions';
|
||||
import iconFile from '../../assets/images/icon_data.gif';
|
||||
import { ItemData } from '../../lib/ItemUtil';
|
||||
import ListBase, { ListBaseProps } from '../lib/ListBase';
|
||||
import type { ItemData } from '../../lib/ItemUtil';
|
||||
import ListBase, { type ListBaseProps } from '../lib/ListBase';
|
||||
|
||||
class DataList extends ListBase {
|
||||
|
||||
constructor(props: ListBaseProps) {
|
||||
super(props);
|
||||
this.label = 'Data';
|
||||
@@ -16,16 +14,15 @@ class DataList extends ListBase {
|
||||
renderBody() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemData;
|
||||
const authors = item.experimenter.map((author, i) => {
|
||||
return <Fragment key={i}>{i > 0 && ', '}{Functions.mlang(author, lang)}</Fragment>
|
||||
});
|
||||
const authors = item.experimenter.map((author) => Functions.mlang(author, lang)).join(', ');
|
||||
return (
|
||||
<>
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
|
||||
<br />
|
||||
{authors}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DataList;
|
||||
export default DataList;
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import { ItemDataSubTypes } from '../../lib/ItemUtil';
|
||||
import TopBase, { TopBaseProps } from '../lib/TopBase';
|
||||
import iconFile from '../../assets/images/icon_data.gif';
|
||||
import { ItemDataSubTypes } from '../../lib/ItemUtil';
|
||||
import TopBase, { type TopBaseProps } from '../lib/TopBase';
|
||||
|
||||
class DataTop extends TopBase {
|
||||
|
||||
constructor(props: TopBaseProps) {
|
||||
super(props);
|
||||
this.type = 'data';
|
||||
this.label = 'Data';
|
||||
this.icon = iconFile;
|
||||
// DBPF:
|
||||
// this.description = '[en]Result data in numerical text/image/movie formats.[/en][ja]実験結果の数値データ/画像/動画など[/ja]';
|
||||
this.description = '[en]Data from experiments or simulations.[/en][ja]実験やシミュレーションで得られたデータ[/ja]';
|
||||
this.description =
|
||||
'[en]Data from experiments or simulations.[/en][ja]実験やシミュレーションで得られたデータ[/ja]';
|
||||
this.subTypes = ItemDataSubTypes;
|
||||
}
|
||||
}
|
||||
|
||||
export default DataTop;
|
||||
export default DataTop;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../config';
|
||||
import { ItemDataSubType, ItemDataSubTypes } from '../../lib/ItemUtil';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import { type ItemDataSubType, ItemDataSubTypes } from '../../lib/ItemUtil';
|
||||
|
||||
interface DataTypeProps {
|
||||
lang: MultiLang;
|
||||
@@ -9,15 +8,17 @@ interface DataTypeProps {
|
||||
|
||||
const DataType = (props: DataTypeProps) => {
|
||||
const { type } = props;
|
||||
const subtype = ItemDataSubTypes.find((value) => { return value.type === type; });
|
||||
const subtype = ItemDataSubTypes.find((value) => {
|
||||
return value.type === type;
|
||||
});
|
||||
if (typeof subtype === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
return (<span>{subtype.label}</span>);
|
||||
}
|
||||
return <span>{subtype.label}</span>;
|
||||
};
|
||||
|
||||
const DataUtil = {
|
||||
DataType,
|
||||
}
|
||||
};
|
||||
|
||||
export default DataUtil;
|
||||
export default DataUtil;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import DataTop from './DataTop';
|
||||
import DataList from './DataList';
|
||||
import DataDetail from './DataDetail';
|
||||
import DataAdvancedSearch from './DataAdvancedSearch';
|
||||
import DataDetail from './DataDetail';
|
||||
import DataList from './DataList';
|
||||
import DataTop from './DataTop';
|
||||
|
||||
const ItemTypeData = {
|
||||
Top: DataTop,
|
||||
@@ -10,4 +10,4 @@ const ItemTypeData = {
|
||||
AdvancedSearch: DataAdvancedSearch,
|
||||
};
|
||||
|
||||
export default ItemTypeData;
|
||||
export default ItemTypeData;
|
||||
|
||||
@@ -1,30 +1,41 @@
|
||||
import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
import AdvancedSearchBase, { type AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
|
||||
|
||||
class FilesAdvancedSearch extends AdvancedSearchBase {
|
||||
|
||||
constructor(props: AdvancedSearchBaseProps) {
|
||||
super(props);
|
||||
this.type = 'files';
|
||||
this.title = 'Files';
|
||||
this.state.values['title'] = '';
|
||||
this.state.values['data_file_name'] = '';
|
||||
this.state.values['data_file_mimetype'] = '';
|
||||
this.state.values['data_file_filetype'] = '';
|
||||
this.state.values['keyword'] = '';
|
||||
this.state.values['description'] = '';
|
||||
this.state.values.title = '';
|
||||
this.state.values.data_file_name = '';
|
||||
this.state.values.data_file_mimetype = '';
|
||||
this.state.values.data_file_filetype = '';
|
||||
this.state.values.keyword = '';
|
||||
this.state.values.description = '';
|
||||
}
|
||||
|
||||
getRows() {
|
||||
const rows = [
|
||||
{ label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
|
||||
{ label: '- [en]File Name[/en][ja]ファイル名[/ja]', value: this.renderFieldInputText('data_file_name', 50) },
|
||||
{ label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]', value: this.renderFieldInputText('data_file_mimetype', 50) },
|
||||
{ label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]', value: this.renderFieldInputText('data_file_filetype', 20) },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
|
||||
{
|
||||
label: '- [en]File Name[/en][ja]ファイル名[/ja]',
|
||||
value: this.renderFieldInputText('data_file_name', 50),
|
||||
},
|
||||
{
|
||||
label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]',
|
||||
value: this.renderFieldInputText('data_file_mimetype', 50),
|
||||
},
|
||||
{
|
||||
label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]',
|
||||
value: this.renderFieldInputText('data_file_filetype', 20),
|
||||
},
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: this.renderFieldInputText('keyword', 50),
|
||||
},
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
|
||||
];
|
||||
return rows;
|
||||
}
|
||||
}
|
||||
|
||||
export default FilesAdvancedSearch;
|
||||
export default FilesAdvancedSearch;
|
||||
|
||||
@@ -1,31 +1,56 @@
|
||||
import React from 'react';
|
||||
import Functions from '../../../functions';
|
||||
import { ItemFiles } from '../../lib/ItemUtil';
|
||||
import type { ItemFiles } from '../../lib/ItemUtil';
|
||||
import DetailBase from '../lib/DetailBase';
|
||||
import ItemTypeField from '../lib/field';
|
||||
|
||||
class FilesDetail extends DetailBase {
|
||||
|
||||
getFields() {
|
||||
const { lang } = this.props;
|
||||
const item = this.props.item as ItemFiles;
|
||||
return [
|
||||
{ label: 'ID', value: item.doi },
|
||||
{ label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
|
||||
{
|
||||
label: '[en]Language[/en][ja]言語[/ja]',
|
||||
value: <ItemTypeField.Language lang={lang} itemLang={item.lang} />,
|
||||
},
|
||||
{ label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
|
||||
{ label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
|
||||
{ label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
|
||||
{ label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
|
||||
{
|
||||
label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Created Date[/en][ja]作成日[/ja]',
|
||||
value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Contributor[/en][ja]登録者[/ja]',
|
||||
value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} />,
|
||||
},
|
||||
{ label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
|
||||
{ label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
|
||||
{ label: '[en]Data File[/en][ja]データファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="files_file" /> },
|
||||
{
|
||||
label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]',
|
||||
value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Data File[/en][ja]データファイル[/ja]',
|
||||
value: <ItemTypeField.ItemFile lang={lang} file={item.file} type="files_file" />,
|
||||
},
|
||||
{ label: '- [en]File Name[/en][ja]ファイル名[/ja]', value: item.data_file_name },
|
||||
{ label: '- [en]MIME Type[/en][ja]MIMEタイプ[/ja]', value: item.data_file_mimetype },
|
||||
{ label: '- [en]File Type[/en][ja]ファイルタイプ[/ja]', value: item.data_file_filetype },
|
||||
{ label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
|
||||
{ label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
|
||||
{
|
||||
label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]',
|
||||
value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} />,
|
||||
},
|
||||
{
|
||||
label: '[en]Description[/en][ja]概要[/ja]',
|
||||
value: <ItemTypeField.Description lang={lang} description={item.description} />,
|
||||
},
|
||||
{ label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} /> },
|
||||
{ label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} /> },
|
||||
{
|
||||
label: '[en]Related to[/en][ja]関連アイテム[/ja]',
|
||||
value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} />,
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Link } from 'react-router';
|
||||
import Functions from '../../../functions';
|
||||
import iconFile from '../../assets/images/icon_files.gif';
|
||||
import { ItemFiles } from '../../lib/ItemUtil';
|
||||
import type { ItemFiles } from '../../lib/ItemUtil';
|
||||
import Contributer from '../lib/field/Contributer';
|
||||
import ListBase, { ListBaseProps } from '../lib/ListBase';
|
||||
import ListBase, { type ListBaseProps } from '../lib/ListBase';
|
||||
|
||||
class FilesList extends ListBase {
|
||||
|
||||
constructor(props: ListBaseProps) {
|
||||
super(props);
|
||||
this.label = 'Files';
|
||||
@@ -19,12 +17,14 @@ class FilesList extends ListBase {
|
||||
const item = this.props.item as ItemFiles;
|
||||
return (
|
||||
<>
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
|
||||
<Contributer lang={lang} uname={item.uname} name={item.name} /><br />
|
||||
<Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
|
||||
<br />
|
||||
<Contributer lang={lang} uname={item.uname} name={item.name} />
|
||||
<br />
|
||||
{item.data_file_mimetype}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FilesList;
|
||||
export default FilesList;
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import TopBase, { TopBaseProps } from '../lib/TopBase';
|
||||
import iconFile from '../../assets/images/icon_files.gif';
|
||||
import { ItemFilesSubTypes } from '../../lib/ItemUtil';
|
||||
import TopBase, { type TopBaseProps } from '../lib/TopBase';
|
||||
|
||||
class FilesTop extends TopBase {
|
||||
|
||||
constructor(props: TopBaseProps) {
|
||||
super(props);
|
||||
this.type = 'files';
|
||||
@@ -14,4 +13,4 @@ class FilesTop extends TopBase {
|
||||
}
|
||||
}
|
||||
|
||||
export default FilesTop;
|
||||
export default FilesTop;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
const FilesUtil = {};
|
||||
|
||||
const FilesUtil = {
|
||||
}
|
||||
|
||||
export default FilesUtil;
|
||||
export default FilesUtil;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import FilesTop from './FilesTop';
|
||||
import FilesList from './FilesList';
|
||||
import FilesDetail from './FilesDetail';
|
||||
import FilesAdvancedSearch from './FilesAdvancedSearch';
|
||||
import FilesDetail from './FilesDetail';
|
||||
import FilesList from './FilesList';
|
||||
import FilesTop from './FilesTop';
|
||||
|
||||
const ItemTypeFiles = {
|
||||
Top: FilesTop,
|
||||
@@ -10,4 +10,4 @@ const ItemTypeFiles = {
|
||||
AdvancedSearch: FilesAdvancedSearch,
|
||||
};
|
||||
|
||||
export default ItemTypeFiles;
|
||||
export default ItemTypeFiles;
|
||||
|
||||
@@ -1,7 +1,21 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../config';
|
||||
import AdvancedSearchQuery from '../lib/AdvancedSearchQuery';
|
||||
import { Item, ItemBinder, ItemBook, ItemConference, ItemData, ItemFiles, ItemModel, ItemPaper, ItemPresentation, ItemSimulator, ItemStimulus, ItemTool, ItemUrl, ItemMemo } from '../lib/ItemUtil';
|
||||
import type { MultiLang } from '../../config';
|
||||
import type AdvancedSearchQuery from '../lib/AdvancedSearchQuery';
|
||||
import type {
|
||||
Item,
|
||||
ItemBinder,
|
||||
ItemBook,
|
||||
ItemConference,
|
||||
ItemData,
|
||||
ItemFiles,
|
||||
ItemMemo,
|
||||
ItemModel,
|
||||
ItemPaper,
|
||||
ItemPresentation,
|
||||
ItemSimulator,
|
||||
ItemStimulus,
|
||||
ItemTool,
|
||||
ItemUrl,
|
||||
} from '../lib/ItemUtil';
|
||||
import ItemTypeBinder from './binder';
|
||||
import ItemTypeBook from './book';
|
||||
import ItemTypeConference from './conference';
|
||||
@@ -52,7 +66,7 @@ const Top = (props: TopProps) => {
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
interface ListProps {
|
||||
lang: MultiLang;
|
||||
@@ -90,7 +104,7 @@ const List = (props: ListProps) => {
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
interface DetailProps {
|
||||
lang: MultiLang;
|
||||
@@ -128,7 +142,7 @@ const Detail = (props: DetailProps) => {
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
interface AdvancedSearchProps {
|
||||
lang: MultiLang;
|
||||
@@ -167,13 +181,13 @@ const AdvancedSearch = (props: AdvancedSearchProps) => {
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const ItemType = {
|
||||
Top,
|
||||
List,
|
||||
Detail,
|
||||
AdvancedSearch
|
||||
}
|
||||
AdvancedSearch,
|
||||
};
|
||||
|
||||
export default ItemType;
|
||||
export default ItemType;
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { ChangeEvent, Component } from 'react';
|
||||
import { MultiLang } from '../../../config';
|
||||
import type { ReactElement } from 'react';
|
||||
import { type ChangeEvent, Component } from 'react';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import Functions from '../../../functions';
|
||||
import AdvancedSearchQuery from '../../lib/AdvancedSearchQuery';
|
||||
import { ItemSubTypes } from '../../lib/ItemUtil';
|
||||
import type AdvancedSearchQuery from '../../lib/AdvancedSearchQuery';
|
||||
import type { ItemSubTypes } from '../../lib/ItemUtil';
|
||||
|
||||
export interface AdvancedSearchBaseProps {
|
||||
lang: MultiLang;
|
||||
@@ -11,12 +12,11 @@ export interface AdvancedSearchBaseProps {
|
||||
|
||||
interface State {
|
||||
show: boolean;
|
||||
values: any;
|
||||
values: Record<string, string>;
|
||||
}
|
||||
|
||||
class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
|
||||
protected type: string = 'base'
|
||||
protected type: string = 'base';
|
||||
protected title: string = 'Base';
|
||||
protected query: AdvancedSearchQuery;
|
||||
protected ignoreKeys: string[] = [];
|
||||
@@ -26,7 +26,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
this.state = {
|
||||
show: false,
|
||||
values: {},
|
||||
}
|
||||
};
|
||||
this.query = props.query;
|
||||
this.handleChangeTitleCheck = this.handleChangeTitleCheck.bind(this);
|
||||
}
|
||||
@@ -49,14 +49,14 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
deleteIgnoreKey(key: string) {
|
||||
if (this.ignoreKeys.includes(key)) {
|
||||
this.ignoreKeys = this.ignoreKeys.filter((v) => {
|
||||
return (v !== key);
|
||||
return v !== key;
|
||||
});
|
||||
}
|
||||
this.query.set(this.type, key, this.state.values[key]);
|
||||
}
|
||||
|
||||
updateField(key: string, value: string) {
|
||||
let values = Object.assign({}, this.state.values);
|
||||
const values = Object.assign({}, this.state.values);
|
||||
values[key] = value;
|
||||
this.updateQuery(key, value);
|
||||
this.setState({ values });
|
||||
@@ -75,7 +75,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
this.setState({ show });
|
||||
}
|
||||
|
||||
getRows(): { label: string, value: JSX.Element }[] {
|
||||
getRows(): { label: string; value: ReactElement }[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
@@ -84,20 +84,30 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
this.updateField(key, e.target.value);
|
||||
};
|
||||
return (
|
||||
<input className="fieldInputText" type="text" value={this.state.values[key]} size={size} onChange={onChange} />
|
||||
<input
|
||||
className="fieldInputText"
|
||||
type="text"
|
||||
value={this.state.values[key]}
|
||||
size={size}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
renderFieldSelect(key: string, values: ItemSubTypes<any>) {
|
||||
renderFieldSelect(key: string, values: ItemSubTypes<string>) {
|
||||
const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||
this.updateField(key, e.target.value);
|
||||
};
|
||||
const options = values.map(({ type, label }, i) => {
|
||||
return <option key={i} value={type}>{label}</option>;
|
||||
const options = values.map(({ type, label }) => {
|
||||
return (
|
||||
<option key={type} value={type}>
|
||||
{label}
|
||||
</option>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<select className="fieldSelect" value={this.state.values[key]} onChange={onChange}>
|
||||
<option value=''>Any</option>
|
||||
<option value="">Any</option>
|
||||
{options}
|
||||
</select>
|
||||
);
|
||||
@@ -107,37 +117,68 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.checked) {
|
||||
this.deleteIgnoreKey(keyYear);
|
||||
keyMonth !== '' && this.deleteIgnoreKey(keyMonth);
|
||||
keyMday !== '' && this.deleteIgnoreKey(keyMday);
|
||||
if (keyMonth !== '') {
|
||||
this.deleteIgnoreKey(keyMonth);
|
||||
}
|
||||
if (keyMday !== '') {
|
||||
this.deleteIgnoreKey(keyMday);
|
||||
}
|
||||
} else {
|
||||
this.setIgnoreKey(keyYear);
|
||||
keyMonth !== '' && this.setIgnoreKey(keyMonth);
|
||||
keyMday !== '' && this.setIgnoreKey(keyMday);
|
||||
if (keyMonth !== '') {
|
||||
this.setIgnoreKey(keyMonth);
|
||||
}
|
||||
if (keyMday !== '') {
|
||||
this.setIgnoreKey(keyMday);
|
||||
}
|
||||
}
|
||||
};
|
||||
const month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const monthOptions = month.map((value, i) => {
|
||||
return <option key={i} value={i + 1}>{value}</option>;
|
||||
})
|
||||
let mdayOptions: JSX.Element[] = [];
|
||||
return (
|
||||
<option key={value} value={i + 1}>
|
||||
{value}
|
||||
</option>
|
||||
);
|
||||
});
|
||||
const mdayOptions: ReactElement[] = [];
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
mdayOptions.push(<option key={i} value={i}>{i}</option>)
|
||||
mdayOptions.push(
|
||||
<option key={i} value={i}>
|
||||
{i}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="fieldDate">
|
||||
<input type="checkbox" onChange={onChange} />
|
||||
{label.length !== 0 && <label className="fieldDateLabel">{label}</label>}
|
||||
{keyMonth !== '' &&
|
||||
<select value={this.state.values[keyMonth]} onChange={(e) => this.updateField(keyMonth, e.target.value)}>
|
||||
<input type="checkbox" id={keyYear} onChange={onChange} />
|
||||
{label.length !== 0 && (
|
||||
<label className="fieldDateLabel" htmlFor={keyYear}>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
{keyMonth !== '' && (
|
||||
<select
|
||||
value={this.state.values[keyMonth]}
|
||||
onChange={(e) => this.updateField(keyMonth, e.target.value)}
|
||||
>
|
||||
{monthOptions}
|
||||
</select>
|
||||
}
|
||||
{keyMday !== '' &&
|
||||
<select value={this.state.values[keyMday]} onChange={(e) => this.updateField(keyMday, e.target.value)}>
|
||||
)}
|
||||
{keyMday !== '' && (
|
||||
<select
|
||||
value={this.state.values[keyMday]}
|
||||
onChange={(e) => this.updateField(keyMday, e.target.value)}
|
||||
>
|
||||
{mdayOptions}
|
||||
</select>
|
||||
}
|
||||
<input type="text" value={this.state.values[keyYear]} size={5} onChange={(e) => this.updateField(keyYear, e.target.value)} />
|
||||
)}
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.values[keyYear]}
|
||||
size={5}
|
||||
onChange={(e) => this.updateField(keyYear, e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -151,7 +192,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
const fields = rows.map((value, idx) => {
|
||||
const evenodd = idx % 2 === 0 ? 'even' : 'odd';
|
||||
return (
|
||||
<tr key={idx}>
|
||||
<tr key={value.label}>
|
||||
<td className="head">{Functions.mlang(value.label, lang)}</td>
|
||||
<td className={evenodd}>{value.value}</td>
|
||||
</tr>
|
||||
@@ -159,9 +200,7 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
});
|
||||
return (
|
||||
<table className="itemtypeFields outer">
|
||||
<tbody>
|
||||
{fields}
|
||||
</tbody>
|
||||
<tbody>{fields}</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
@@ -173,7 +212,11 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
<tbody>
|
||||
<tr>
|
||||
<th align="left">
|
||||
<input type="checkbox" checked={this.state.show} onChange={this.handleChangeTitleCheck} />
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.show}
|
||||
onChange={this.handleChangeTitleCheck}
|
||||
/>
|
||||
{this.title}
|
||||
</th>
|
||||
</tr>
|
||||
@@ -183,7 +226,6 @@ class AdvancedSearchBase extends Component<AdvancedSearchBaseProps, State> {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default AdvancedSearchBase;
|
||||
export default AdvancedSearchBase;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { Component, ReactNode } from 'react';
|
||||
import { MultiLang } from '../../../config';
|
||||
import { Component, type ReactNode } from 'react';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import Functions from '../../../functions';
|
||||
import { Item } from '../../lib/ItemUtil';
|
||||
import type { Item } from '../../lib/ItemUtil';
|
||||
|
||||
export interface DetailBaseField {
|
||||
label: string;
|
||||
@@ -10,11 +10,10 @@ export interface DetailBaseField {
|
||||
|
||||
export interface DetailBaseProps {
|
||||
lang: MultiLang;
|
||||
item: Item
|
||||
item: Item;
|
||||
}
|
||||
|
||||
class DetailBase extends Component<DetailBaseProps> {
|
||||
|
||||
getFields(): DetailBaseField[] {
|
||||
return [];
|
||||
}
|
||||
@@ -24,20 +23,18 @@ class DetailBase extends Component<DetailBaseProps> {
|
||||
const elements = this.getFields().map((value, idx) => {
|
||||
const evenodd = idx % 2 === 0 ? 'even' : 'odd';
|
||||
return (
|
||||
<tr key={idx}>
|
||||
<tr key={value.label}>
|
||||
<td className="head">{Functions.mlang(value.label, lang)}</td>
|
||||
<td className={evenodd}>{value.value}</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
});
|
||||
return (
|
||||
<table className="outer itemDetail">
|
||||
<tbody>
|
||||
{elements}
|
||||
</tbody>
|
||||
<tbody>{elements}</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DetailBase;
|
||||
export default DetailBase;
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
import { MultiLang } from '../../../config';
|
||||
import ItemUtil, { Item } from '../../lib/ItemUtil';
|
||||
import { Component } from 'react';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import ItemUtil, { type Item } from '../../lib/ItemUtil';
|
||||
import SimPFLinkIcon from './field/SimPFLinkIcon';
|
||||
|
||||
export interface ListBaseProps {
|
||||
lang: MultiLang;
|
||||
item: Item
|
||||
};
|
||||
item: Item;
|
||||
}
|
||||
|
||||
class ListBase extends Component<ListBaseProps> {
|
||||
|
||||
protected label = '';
|
||||
protected icon = '';
|
||||
protected url: string;
|
||||
@@ -21,8 +20,8 @@ class ListBase extends Component<ListBaseProps> {
|
||||
this.simpfLinkUrl = ItemUtil.getSimPFLinkUrl(props.item.item_id);
|
||||
}
|
||||
|
||||
renderBody() {
|
||||
return <></>;
|
||||
renderBody(): React.ReactNode {
|
||||
return null;
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -34,9 +33,7 @@ class ListBase extends Component<ListBaseProps> {
|
||||
<td className="listIcon">
|
||||
<img src={this.icon} alt={this.label} />
|
||||
</td>
|
||||
<td>
|
||||
{this.renderBody()}
|
||||
</td>
|
||||
<td>{this.renderBody()}</td>
|
||||
<td className="listExtra">
|
||||
<SimPFLinkIcon lang={lang} url={this.simpfLinkUrl} isDetail={false} />
|
||||
</td>
|
||||
@@ -47,4 +44,4 @@ class ListBase extends Component<ListBaseProps> {
|
||||
}
|
||||
}
|
||||
|
||||
export default ListBase;
|
||||
export default ListBase;
|
||||
|
||||
@@ -1,26 +1,30 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MultiLang } from '../../../config';
|
||||
import { Component, Fragment } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import type { MultiLang } from '../../../config';
|
||||
import Functions from '../../../functions';
|
||||
import ItemUtil, { ItemSubTypes } from '../../lib/ItemUtil';
|
||||
import ItemUtil, { type ItemSubTypes } from '../../lib/ItemUtil';
|
||||
|
||||
export interface TopBaseProps {
|
||||
lang: MultiLang;
|
||||
}
|
||||
|
||||
class TopBase extends Component<TopBaseProps> {
|
||||
|
||||
protected type: string = '';
|
||||
protected label: string = '';
|
||||
protected icon: string = '';
|
||||
protected description: string = '';
|
||||
protected subTypes: ItemSubTypes<any> = [];
|
||||
protected subTypes: ItemSubTypes<string> = [];
|
||||
|
||||
render() {
|
||||
const { lang } = this.props;
|
||||
const url = ItemUtil.getItemTypeSearchUrl(this.type);
|
||||
const links = this.subTypes.map(({ type, label }, i) => {
|
||||
return <Fragment key={i}>{i > 0 && ' / '}<Link to={url + '/' + type}>{label}</Link></Fragment>;
|
||||
return (
|
||||
<Fragment key={type}>
|
||||
{i > 0 && ' / '}
|
||||
<Link to={`${url}/${type}`}>{label}</Link>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
@@ -44,4 +48,4 @@ class TopBase extends Component<TopBaseProps> {
|
||||
}
|
||||
}
|
||||
|
||||
export default TopBase;
|
||||
export default TopBase;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -13,9 +12,17 @@ const Author = (props: Props) => {
|
||||
}
|
||||
const elements = author.map((value, idx) => {
|
||||
const evenodd = idx % 2 === 0 ? 'even' : 'odd';
|
||||
return <tr key={idx}><td className={evenodd}>{value}</td></tr>;
|
||||
return (
|
||||
<tr key={value}>
|
||||
<td className={evenodd}>{value}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return <table><tbody>{elements}</tbody></table>;
|
||||
}
|
||||
return (
|
||||
<table>
|
||||
<tbody>{elements}</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
export default Author;
|
||||
export default Author;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
import Functions from '../../../../functions';
|
||||
import { ItemBasicChangeLog } from '../../../lib/ItemUtil';
|
||||
import type { ItemBasicChangeLog } from '../../../lib/ItemUtil';
|
||||
import DateTime from './DateTime';
|
||||
|
||||
interface Props {
|
||||
@@ -14,15 +13,21 @@ const ChangeLog = (props: Props) => {
|
||||
if (changelog.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const elements = changelog.map((value, i) => {
|
||||
const elements = changelog.map((value) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td><DateTime lang={lang} date={value.log_date} onlyDate={true} /></td>
|
||||
<tr key={`${value.log_date}:${value.log}`}>
|
||||
<td>
|
||||
<DateTime lang={lang} date={value.log_date} onlyDate={true} />
|
||||
</td>
|
||||
<td>{Functions.mlang(value.log, lang)}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
return (<table><tbody>{elements}</tbody></table>);
|
||||
}
|
||||
return (
|
||||
<table>
|
||||
<tbody>{elements}</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeLog;
|
||||
export default ChangeLog;
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
import Functions from '../../../../functions';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
uname: string;
|
||||
name: string
|
||||
name: string;
|
||||
}
|
||||
|
||||
const Contributer = (props: Props) => {
|
||||
const { lang, name, uname } = props;
|
||||
const unsubscribed = '([en]Unsubscribed User[/en][ja]退会済みユーザ[/ja])';
|
||||
const label = uname === '' ? unsubscribed : (name === '' ? uname : name + ' (' + uname + ')');
|
||||
const label = uname === '' ? unsubscribed : name === '' ? uname : `${name} (${uname})`;
|
||||
return <span>{Functions.mlang(label, lang)}</span>;
|
||||
}
|
||||
};
|
||||
|
||||
export default Contributer;
|
||||
export default Contributer;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
|
||||
export type CreativeCommonsType = 'by' | 'by-nc' | 'by-nc-nd' | 'by-nc-sa' | 'by-nd' | 'by-sa';
|
||||
|
||||
@@ -16,11 +15,10 @@ export const getCreativeCommonsType = (ccCommercialUse: number, ccModification:
|
||||
return 'by-nd';
|
||||
case 11:
|
||||
return 'by-sa';
|
||||
case 12:
|
||||
default:
|
||||
return 'by';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -29,28 +27,41 @@ interface Props {
|
||||
|
||||
const CreativeCommons = (props: Props) => {
|
||||
const { type } = props;
|
||||
const url = 'http://creativecommons.org/licenses/' + type + '/4.0/';
|
||||
const logoUrl = 'https://i.creativecommons.org/l/' + type + '/4.0/88x31.png';
|
||||
const url = `http://creativecommons.org/licenses/${type}/4.0/`;
|
||||
const logoUrl = `https://i.creativecommons.org/l/${type}/4.0/88x31.png`;
|
||||
const labels = {
|
||||
by: 'Attribution',
|
||||
nc: 'NonCommercial',
|
||||
nd: 'NoDerivatives',
|
||||
sa: 'ShareAlike',
|
||||
}
|
||||
const label = type.split('-').map((value) => {
|
||||
const prop = value as 'by' | 'nc' | 'nd' | 'sa';
|
||||
return labels[prop];
|
||||
}).join('-');
|
||||
};
|
||||
const label = type
|
||||
.split('-')
|
||||
.map((value) => {
|
||||
const prop = value as 'by' | 'nc' | 'nd' | 'sa';
|
||||
return labels[prop];
|
||||
})
|
||||
.join('-');
|
||||
return (
|
||||
<table style={{borderCollapse: 'separate', borderSpacing: '5px'}}>
|
||||
<table style={{ borderCollapse: 'separate', borderSpacing: '5px' }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href={url} target="_blank" rel="license noopener noreferrer"><img alt="Creative Commons License" src={logoUrl} /></a></td>
|
||||
<td>This work is licensed under a <a href={url} target="_blank" rel="license noopener noreferrer">Criative Commons {label} 4.0 International License</a>.</td>
|
||||
<td>
|
||||
<a href={url} target="_blank" rel="license noopener noreferrer">
|
||||
<img alt="Creative Commons License" src={logoUrl} />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
This work is licensed under a{' '}
|
||||
<a href={url} target="_blank" rel="license noopener noreferrer">
|
||||
Criative Commons {label} 4.0 International License
|
||||
</a>
|
||||
.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CreativeCommons;
|
||||
export default CreativeCommons;
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import { format } from 'date-fns';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
date: number;
|
||||
onlyDate?: boolean
|
||||
onlyDate?: boolean;
|
||||
}
|
||||
|
||||
const DateTime = (props: Props) => {
|
||||
const { date, onlyDate } = props;
|
||||
const d = moment(new Date(date * 1000));
|
||||
let format = 'MMM D, Y';
|
||||
if (typeof onlyDate === 'undefined' || !onlyDate) {
|
||||
format += ' HH:mm:ss';
|
||||
}
|
||||
return <span>{d.format(format)}</span>;
|
||||
}
|
||||
const pattern = onlyDate ? 'MMM d, y' : 'MMM d, y HH:mm:ss';
|
||||
return <span>{format(new Date(date * 1000), pattern)}</span>;
|
||||
};
|
||||
|
||||
export default DateTime;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import XoopsCode from '../../../../common/lib/XoopsCode';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -12,7 +11,7 @@ const Description = (props: Props) => {
|
||||
const { lang, description, className } = props;
|
||||
const textarea = <XoopsCode lang={lang} text={description} dobr={true} />;
|
||||
const name = typeof className === 'undefined' ? 'description' : className;
|
||||
return (<div className={name}>{textarea}</div>);
|
||||
}
|
||||
return <div className={name}>{textarea}</div>;
|
||||
};
|
||||
|
||||
export default Description;
|
||||
export default Description;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
.downloadButton {
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
text-decoration: none !important;
|
||||
font-weight: normal !important;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
background: #f0f0f0;
|
||||
color: #000 !important;
|
||||
color: #000;
|
||||
border: solid 1px #e0e0e0;
|
||||
box-shadow: 2px 2px #bbbbbb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.downloadButton:hover {
|
||||
background: #e8e8e8 !important;
|
||||
background: #e8e8e8;
|
||||
border: solid 1px #cccccc;
|
||||
}
|
||||
|
||||
.downloadButton:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import ItemUtil, { ItemBasicFile } from '../../../lib/ItemUtil';
|
||||
import { Component, type MouseEvent } from 'react';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
import ItemUtil, { type ItemBasicFile } from '../../../lib/ItemUtil';
|
||||
import styles from './FileDownloadButton.module.css';
|
||||
import LicenseAgreementDialog from './LicenseAgreementDialog';
|
||||
|
||||
@@ -18,7 +18,6 @@ interface State {
|
||||
}
|
||||
|
||||
class FileDownloadButton extends Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@@ -28,7 +27,7 @@ class FileDownloadButton extends Component<Props, State> {
|
||||
this.unsetShow = this.unsetShow.bind(this);
|
||||
}
|
||||
|
||||
handleClickDownload(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
|
||||
handleClickDownload(e: MouseEvent<HTMLAnchorElement>) {
|
||||
if (this.props.rights !== '') {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@@ -45,11 +44,29 @@ class FileDownloadButton extends Component<Props, State> {
|
||||
const url = ItemUtil.getFileUrl(this.props.file);
|
||||
return (
|
||||
<>
|
||||
<a className={styles.downloadButton} href={url} download={file.original_file_name} target="_blank" rel="noopener noreferrer" onClick={this.handleClickDownload}>Download</a>
|
||||
<LicenseAgreementDialog lang={lang} file={file} rights={rights} useCc={useCc} ccCommercialUse={ccCommercialUse} ccModification={ccModification} show={this.state.show} unsetShow={this.unsetShow} />
|
||||
<a
|
||||
className={styles.downloadButton}
|
||||
href={url}
|
||||
download={file.original_file_name}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={this.handleClickDownload}
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<LicenseAgreementDialog
|
||||
lang={lang}
|
||||
file={file}
|
||||
rights={rights}
|
||||
useCc={useCc}
|
||||
ccCommercialUse={ccCommercialUse}
|
||||
ccModification={ccModification}
|
||||
show={this.state.show}
|
||||
unsetShow={this.unsetShow}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FileDownloadButton;
|
||||
export default FileDownloadButton;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { MultiLang } from '../../../../config';
|
||||
import type { MultiLang } from '../../../../config';
|
||||
|
||||
interface Props {
|
||||
lang: MultiLang;
|
||||
@@ -10,8 +9,8 @@ const FileSize = (props: Props) => {
|
||||
const { size } = props;
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const power = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0;
|
||||
const label = Math.round(size / Math.pow(1024, power) * 10) / 10 + ' ' + units[power]
|
||||
const label = `${Math.round((size / 1024 ** power) * 10) / 10} ${units[power]}`;
|
||||
return <span>{label}</span>;
|
||||
}
|
||||
};
|
||||
|
||||
export default FileSize;
|
||||
export default FileSize;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user