Skip to content
Snippets Groups Projects
Commit 7ec9d83b authored by Giildo's avatar Giildo
Browse files

:sparkles: Add viewer

parent ed252a55
Branches
Tags 1.1.5-sr7
No related merge requests found
Pipeline #320855 passed with stages
in 1 minute and 45 seconds
Expand all Hide whitespace changes
Inline Side-by-side
index.html
+ 1
− 1
View file @ 7ec9d83b
......@@ -11,7 +11,7 @@
<!--FONT-->
<link href="https://fonts.googleapis.com/css?family=Bevan%7CPontano+Sans&amp;amp;subset=latin,latin"
rel="stylesheet">
<script src="/src/index.ts" type="module"></script>
<script src="./viewer/main.ts" type="module"></script>
</head>
<body>
<div id="timeline"></div>
......
src/assets/root.scss
+ 1
− 0
View file @ 7ec9d83b
......@@ -528,6 +528,7 @@
height: var(--tl-footer);
width: 100%;
display: flex;
color: var(--tl-text-color);
&__division {
--before-fs: 0.5rem;
......
tsconfig.json
+ 1
− 0
View file @ 7ec9d83b
......@@ -24,6 +24,7 @@
}
},
"include": [
"viewer/**/*.ts",
"src/**/*.ts",
"types/**/*.ts",
"tests/**/*.ts",
......
types/index.d.ts
+ 70
− 1
View file @ 7ec9d83b
......@@ -19,6 +19,24 @@ export class Timeline {
setEvents(events: TimelineData): void
}
export class TimelineCanvas {
constructor(el: HTMLElement | string, events: TimelineData, options?: TimelineCanvasOption)
get eventSelected(): TimelineEventObject | null
set eventSelected(id: string)
get locale(): LanguageCode
set locale(locale: LanguageCode)
get zoom(): Zoom
reset(): void
setEvents(events: TimelineData): void
}
export interface AppMessages {
[key: string]: string | AppMessages
}
......@@ -47,7 +65,6 @@ export type Zoom =
| 'halfMillennium'
| 'bicentenary'
| 'century'
| 'halfCentury'
| 'biDecade'
| 'decade'
| 'lustrum'
......@@ -63,6 +80,12 @@ export interface TimelineOption {
zoom?: Zoom
}
export interface TimelineCanvasOption {
dark?: boolean
eventSelected?: string
language?: LanguageCode
}
export type CustomEventName = 'back-to-start' | 'event-click' | 'nav-next' | 'nav-previous' | 'zoom'
export type Ref<T> = { value: T }
......@@ -76,3 +99,49 @@ export interface EventPosition {
}
export type LanguageCode = 'en' | 'fr'
export type ZoomCanvasDivisionType = 'year' | 'month'
export interface EventDate {
display: string | null
date: string
}
export interface ZoomCanvasEventCoordinates {
start: number
end: number | null
}
export interface ZoomCanvasEvent {
coordinates: ZoomCanvasEventCoordinates
}
export interface TimelineCanvasEvent {
date: {
start: EventDate
end: EventDate | null
}
id: string
isOnGoing: boolean
title: string
}
export interface ZoomCanvasData {
diffDivision: number
divisionNb: number
divisionType: ZoomCanvasDivisionType
events: Record<string, ZoomCanvasEvent>
limits: {
end: string
start: string
}
screenDivisionNb: number
zoom: Zoom
}
export interface TimelineCanvasData {
events: TimelineCanvasEvent[]
initialZoom: Zoom
isOnGoing: boolean
zooms: Record<Zoom, ZoomCanvasData>
}
viewer/data/events.json 0 → 100644
+ 311
− 0
View file @ 7ec9d83b
[
{
"id": "9e5fd58e-44c9-408c-8e18-5c2d999d8abd",
"title": "Utiliser Octant (conseils aux utilisateurs)",
"start_date": {
"year": 2023
},
"end_date": {
"year": 2025
},
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "97a272ef-ee2d-4ea7-b289-da39188129bc",
"title": "Communication et maquettes Octant",
"start_date": {
"year": 2018,
"month": 3
},
"end_date": null,
"is_on_going": true,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "55fbd2df-d3fa-4c16-9fa7-e8be25bda70e",
"title": "Acte de naissance d'Octant",
"start_date": {
"day": 15,
"year": 2018,
"month": 3
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "01007595-bc9c-49ef-a090-8ddcd8f77d1c",
"title": "Genèse du projet Octant",
"start_date": {
"year": 2017,
"month": 3
},
"end_date": {
"year": 2017,
"month": 10
},
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "93d5e53c-7115-4f38-bf2c-5bd236f23afa",
"title": "Octant - Des Données aux Savoirs - MISHA",
"start_date": {
"day": 5,
"year": 2018,
"month": 10
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "6bb79742-28cb-4d52-8e66-0cfa0d0a88e4",
"title": "Octant lauréat d'un deuxième IDEX",
"start_date": {
"year": 2019,
"month": 6
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "d7cc3bd5-8979-4d34-938c-e86d4b66bac0",
"title": "Octant lauréat d'un deuxième CPP",
"start_date": {
"year": 2023,
"month": 1
},
"end_date": {
"day": 30,
"year": 2023,
"month": 6
},
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "80c2b76f-4aad-4f5e-9cb8-0e5f50fba82d",
"title": "Octant, outil numérique innovant au service de la recherche et de la pédagogie par la recherche - Master MEMI",
"start_date": {
"day": 9,
"year": 2022,
"month": 9
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "ac73d4f7-f87b-4703-8c98-b4665f785fd5",
"title": "Octant, brève présentation d'un outil numérique innovant pour l'interdisciplinarité et les projets collaboratifs - AG de l'ITI LETHICA",
"start_date": {
"day": 15,
"year": 2021,
"month": 12
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "4a08a309-9280-4af1-8861-d2177f0dc436",
"title": "Octant, outil numérique innovant : quels usages en littérature et en histoire ? - Séminaire SEARCH",
"start_date": {
"day": 20,
"year": 2021,
"month": 9
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "9241313a-ed81-4c4f-874b-50863bf43763",
"title": "Octant - Journées J'IDIP",
"start_date": {
"day": 30,
"year": 2020,
"month": 6
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "ca0f45c5-efac-4ca0-918a-5731cb65e62f",
"title": "Octant, outil numérique innovant : quels usages en linguistique ? - Séminaire LILPA",
"start_date": {
"day": 21,
"year": 2021,
"month": 5
},
"end_date": null,
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "8a8ad723-5dcf-4268-a412-26a40f1adf3a",
"title": "Octant lauréat d'un CPP",
"start_date": {
"year": 2022,
"month": 1
},
"end_date": {
"day": 30,
"year": 2022,
"month": 6
},
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "d94984b1-5138-431c-bb2b-2dd7a1b3cd19",
"title": "Octant - Travail de positionnement",
"start_date": {
"year": 2018,
"month": 9
},
"end_date": {
"year": 2020,
"month": 2
},
"is_on_going": false,
"geo": {
"type": "FeatureCollection",
"features": []
}
},
{
"id": "de731033-13f6-4ebd-b9d4-299e8db00542",
"title": "Octant - Lyon",
"start_date": {
"day": 17,
"year": 2019,
"month": 6
},
"end_date": null,
"is_on_going": false,
"geo": {
"bbox": [
45.756505236755196,
4.830132722854615,
45.75912513764874,
4.833887815475465
],
"type": "FeatureCollection",
"features": [
{
"id": "3369e8e1-614f-48c3-82ed-3545125e35bc",
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
4.8320114,
45.7578137
]
},
"properties": {
"type": "administrative",
"osm_id": 120965,
"address": {
"city": "Lyon",
"state": "Auvergne-Rhône-Alpes",
"county": "Métropole de Lyon",
"region": "Metropolitan France",
"country": "France",
"country_code": "fr",
"municipality": "Lyon",
"ISO3166-2-lvl4": "FR-ARA",
"ISO3166-2-lvl6": "FR-69M",
"state_district": "Rhône"
},
"category": "boundary",
"osm_type": "relation",
"place_id": 297681191,
"importance": 0.6913775965432666,
"place_rank": 16,
"display_name": "Lyon, Métropole de Lyon, Rhône, Auvergne-Rhône-Alpes, Metropolitan France, France"
}
}
]
}
},
{
"id": "f6e28fa3-f977-47a2-be93-679ea58449e5",
"title": "Octant Réunion Bilan",
"start_date": {
"day": 17,
"year": 2023,
"month": 1
},
"end_date": null,
"is_on_going": false,
"geo": {
"bbox": [
32.24997445586331,
-98.96484375000001,
55.677584411089526,
-31.992187500000004
],
"type": "FeatureCollection",
"features": [
{
"id": "8070a5ef-02c3-428c-bbc1-7a80c2be7267",
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
7.745018,
48.579874
]
},
"properties": {
"display_name": ""
}
}
]
}
}
]
\ No newline at end of file
viewer/data/zooms.json 0 → 100644
+ 1193
− 0
View file @ 7ec9d83b
This diff is collapsed.
viewer/eventTranslater.ts 0 → 100644
+ 42
− 0
View file @ 7ec9d83b
import type { TimelineEvent } from '#/index'
interface TimelineDate {
year: number
month?: number
day?: number
}
interface Event {
id: string
title: string
start_date: TimelineDate
end_date: TimelineDate | null
is_on_going: boolean
}
export const translate = (events: Event[]): TimelineEvent[] => {
return (
events.map((event) => {
const timelineEvent: TimelineEvent = {
unique_id: event.id,
start_date: event.start_date,
text: {
headline: event.title,
},
}
if (event.end_date) {
timelineEvent.end_date = event.end_date
}
if (event.end_date === null && event.is_on_going) {
timelineEvent.end_date = {
year: new Date().getFullYear(),
today: true,
}
}
return timelineEvent
}) || []
)
}
viewer/index.css 0 → 100644
+ 4
− 0
View file @ 7ec9d83b
body {
background-color: #121212;
margin: 0;
}
\ No newline at end of file
viewer/main.ts 0 → 100644
+ 30
− 0
View file @ 7ec9d83b
import './index.css'
import { Timeline } from '@/index'
import events from './data/events.json'
import { translate } from './eventTranslater'
const timelineContainer = document.getElementById('timeline')!
timelineContainer!.classList.add('dark')
timelineContainer!.classList.add('timeline')
new Timeline(
timelineContainer,
{
events: translate(events),
},
{
headless: true,
language: 'fr',
debug: true,
track_events: ['nav_next', 'nav_previous'],
},
)
// const timelineContainerCanvas = document.getElementById('timeline_canvas')! as HTMLCanvasElement
// timelineContainerCanvas!.classList.add('dark')
// timelineContainerCanvas!.classList.add('timeline')
//
// new TimelineCanvas(timelineContainerCanvas, zooms as unknown as TimelineCanvasData, {
// language: 'fr',
// dark: true,
// })
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment