https://github.com/johnmanjohnston/blindfolds
Extremely lightweight presentation library made with JavaScript
https://github.com/johnmanjohnston/blindfolds
javascript javascript-library presentation presentation-tools
Last synced: 29 days ago
JSON representation
Extremely lightweight presentation library made with JavaScript
- Host: GitHub
- URL: https://github.com/johnmanjohnston/blindfolds
- Owner: johnmanjohnston
- Created: 2023-07-03T20:24:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-04T11:33:13.000Z (almost 3 years ago)
- Last Synced: 2025-01-20T23:46:58.748Z (over 1 year ago)
- Topics: javascript, javascript-library, presentation, presentation-tools
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blindfolds
Blindfolds is a JavaScript-based library I made for making presentations. I was probably drunk when I named it.
I made this last year when I was assigned to create a presentation, and was too lazy to create it within PowerPoint.
# Demo
To get started, create an HTML file and link `main.css` and create a JavaScript file that should be linked as a `module`. For example:
```js
Blindfolds
```
In your JavaScript file, import Blindfolds:
```js
import * as BLINDFOLDS from "./Blindfolds.js";
```
You can then initialize a new presentation like so:
```js
// Intiailize the Blindfolds library
var Presentation = new BLINDFOLDS.BlindfoldsPresentation({
SlideCount: 5,
FixedHTML: `
Blindfolds |SLCOUNT|
`,
PresentationName: "Blindfolds",
})
```
The parameters are pretty self-explanatory: `SlideCount` is the number of slides. `FixedHTML` is some HTML code that's overlaid over the presentation. `PresentationName` is the presentation name.
You may want to create a template for your slides for consistency in the slide designs:
```js
// Create Template
const SlideTemplateConfiguration = {
BackgroundColor: "rgb(30, 30, 35)",
FontColor: "#E5E5E5",
TitleFontSize: "4vw",
ContentFontSize: "2vw",
AdditionalTitleClasses: "Type",
AdditionalContentClasses: "Type",
ExtraHTML: `
`,
}
```
`BackgroundColor` is the background color used. `FontColor` is the color of the text. `TitleFontSize` controls the font size of the title, and `ContentFontSize` controls the font size of the content.
`AdditionalTitleClasses` and `AdditionalContentClasses` are additonal classes that are added to the title and the content. In the example above, the `Type` class adds a typing animation.
To create a slide, you can use the `BlindfoldsSlide` class:
```js
var TitleSlide = new BLINDFOLDS.BlindfoldsSlide({
...SlideTemplateConfiguration,
Title: "This Is {{Blindfolds}}.",
Content: "A {{JavaScript-based presentation library}} I programmed a while ago.",
AdditionalTitleStyling: "position: absolute; top: 45vh; left: 50%; transform: translate(-50%, -50%);",
AdditionalContentStyling: "text-align: center; position: absolute; top: 57%; left: 50%; transform: translate(-50%, -50%);",
ContentFontSize: "1.2vw",
TitleFontSize: "4.4vw",
})
```
The slide above would generate a slide resembling the following:
We import parameters from the template with `...SlideTemplateConfiguration`. `Title` is the title of the slide. `Content` is the content shown on the slide. `AdditionalTitleStyling` is CSS styling added to the title,
and `AdditionalContentStyling` is CSS styling added to the content. You may also wrap the title and content in `{{` and `}}` to apply the `Importance` class on them, which can be customized in `main.css`
You may create all your slides in the same manner. To finally run the presentation, we use the object we created to initialize the presentation, call the `Run()` function, and pass the slides in an array
as the only argument.
```js
Presentation.Run([TitleSlide, Slide2, Slide3, End]);
```
# Documentation/Reference
### class BlindfoldsPresentation(Options)
Takes an `Options` argument, which accepts:
`SlideCount` (type: Number)
`FixedHTML` (type: String)
`PresentationName` (type: String)
### class BlindfoldsSlide(Options)
Takes an `Options` argument, which accepts:
`ContentFontSize` (type: String) (Has to be a string, because the CSS measurement is also passed on with it, for example `1.5em`)
`TitleFontSize` (type: String) (Has to be a string, because the CSS measurement is also passed on with it, for example `1.5em`)
`Title` (type: String)
`Content` (type: String)
`BackgroundColor` (type: String) (accept CSS coloring method, for example `black`)
`FontColor` (type: String) (accept CSS coloring method, for example `indianred`)
`AdditionalTitleClasses` (type: String)
`AdditionalContentClasses` (type: String)
`AdditionalTitleStyling` (type: String)
`AdditionalContentStyling` (type: String)
`ExtraHTML` (type: String)
### BlindfoldsPresentation.Run(SlClasses)
`SlClasses` (type: Array of `BlindfoldsSlide`)