WIP
To create new slides certain steps need to be done. This section will give a brief overview on how slides are structured in the projector service.
The following files are relevant for a slide of type slide_name
:
pkg/
├─ projector/
│ ├─ slide/
│ │ ├─ <slide_name>.go
│ │ ├─ slide.go
templates/
├─ slides/
│ ├─ <slide_name>.html
web/
├─ src/
│ ├─ slide/
│ │ ├─ <slide_name>.css
│ │ ├─ <slide_name>.js
│ ├─ projector.js
The projector decides on which slide to display by the field type
of a projection.
A projection type needs to be registered in slide.go
in the function New
to be handled by the projector service.
Projections not registered there will be ignored.
routes["projection_type"] = ProjectionTypeSlideHandler
Projection handlers are functions that provide the data needed for a projection.
Handlers should be created in an individual file per projection type in pkg/projector/slide/<projection_type>.go
.
A handler receives a projectionRequest
struct which contains the projection and other relevant data to create the projection.
The return value of the handler is a map[string]any
which contains the data that will be passed to the template.
When returning a nil
map the slide will not be rendered.
The function signature of a handler needs to be as following:
func ProjectionTypeSlideHandler(ctx context.Context, req *projectionRequest) (map[string]any, error)
After a handler is executed the provided data will be automatically passed to the template in templates/slides/<projection_type>.html
.
A custom template can be used by passing a _template
field in the map returned by the handler.
In that case templates/slides/<_template>.html
is used.
The templates are parsed with Go html/template
library.
Stylesheets and JavaScript can be added in web/src/slide/
.
When adding stylesheets the filename should contain the projection type. The created stylesheet should be added in the projection template at the top as following:
<link rel="stylesheet" type="text/css" href="/system/projector/static/slide/<projection_type>.css" />
The preferred way of adding JavaScript to a slide is by creating a custom html element.
For this web components should be used.
A guide for this can be found here.
The web component needs to be registered in web/src/projector.js
.
After changing stylesheets or JavaScript they need to be bundled.
The make targets build-web-assets
and build-watch-web-assets
can be used for this.