This commit is contained in:
doma 2020-10-06 11:31:07 +02:00
parent 9f896f58d7
commit 4c82603c64
10 changed files with 3069 additions and 52 deletions

15
.eslintrc.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
rules: {
}
}

View File

@ -104,9 +104,12 @@ section.has-light-background, section.has-light-background h1, section.has-light
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p, .typed-insert {
margin: 20px 0; margin: 20px 0;
line-height: 1.3; } line-height: 1.3;
color: #82CFAD !important;
}
/* Remove trailing margins after titles */ /* Remove trailing margins after titles */
.reveal h1:last-child, .reveal h1:last-child,

View File

@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@ -12,23 +13,38 @@
<!-- Theme used for syntax highlighted code --> <!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme"> <link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
</head> </head>
<body>
<body>
<div class="reveal"> <div class="reveal">
<div class="slides"> <div class="slides">
<section> <section>
<h1>Hi! 🌐</h1>
<h2>Welcome to Following the Scooter<br>🛴🛴🛴</h2> <div class="typed-content""><p>Hi! Following the crisis</p></div>
<span class="typed-insert"></span>
</section> </section>
<section data-prevent-swipe> <section>
<h2>What's better for you?<br><a class="r-frame" href="#/7">German</a> or <a class="r-frame" href="#/2">English?</a><br><br><a class="r-frame" href="#/7">Deutsch</a> oder <a class="r-frame" href="#/2">Englisch?</a></h2> <div class="typed-content""><p>Second slide</p></div>
<span class=" typed-insert"></span>
</section>
<section data-background-color="#82CFAD">
<h3>Great!</h3>
</section>
<section>
<h2>You will be exploring the state of Berlin's subcultural networks with us.</h2>
</section>
<section>
<h3>Hopefully being led through spaces unknown or into the river Spree 🤷.</h3>
</section>
<section>
<h3>You will be asked to give up your autonomy by choosing to 👠 follow another person and documenting their movement in stealth mode 💊. Please do this respectfully and discreetly.</h3>
</section>
<section>
<h3>Are you ready?</h3>
</section>
<section>
<h3>Grossartig!</h3>
</section> </section>
<section data-background-color="#82CFAD"><h3>Great!</h3></section>
<section><h3>You will be exploring the state of Berlin's subcultural networks with us.</h3></section>
<section><h3>Hopefully being led through spaces unknown or into the river Spree 🤷.</h3></section>
<section><h3>You will be asked to give up your autonomy by choosing to 👠 follow another person and documenting their movement in stealth mode 💊. Please do this respectfully and discreetly.</h3></section>
<section><h3>Are you ready?</h3></section>
<section><h3>Grossartig!</h3></section>
<section>Are you ready?</section> <section>Are you ready?</section>
<section>Are you ready?</section> <section>Are you ready?</section>
<section>Are you ready?</section> <section>Are you ready?</section>
@ -40,18 +56,8 @@
<script src="plugin/notes/notes.js"></script> <script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script> <script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script> <script src="plugin/highlight/highlight.js"></script>
<script> <script src="main.js"></script>
// More info about initialization & config:
// - https://revealjs.com/initialization/ </body>
// - https://revealjs.com/config/
Reveal.initialize({
width: 375,
height: 812,
hash: true,
controls: false,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
</script>
</body>
</html> </html>

58
main.js Normal file
View File

@ -0,0 +1,58 @@
Reveal.initialize({
width: 375,
height: 812,
hash: true,
controls: false,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
dependencies: [{
src: 'plugin/typed/typed.js',
async: false,
callback: function () {
callTypedJs()
}
}
]
})
function init_type (event) {
console.log('SLIDE CHANGE.')
// console.log(event);
// console.log(event.currentSlide);
// console.log(event.indexh);
index = event.indexh
div_typed_content = event.currentSlide.getElementsByClassName('typed-content')[0]
if (div_typed_content == undefined) {
console.log('Nothing to do. No type div found.')
return false
}
div_typed_content.id = 'typed-content-' + index
div_typed_insert = event.currentSlide.getElementsByClassName('typed-insert')[0]
div_typed_insert.id = 'typed-insert-' + index
if (typeof window['typed' + index] === 'undefined') {
window['typed' + index] = new Typed('#' + div_typed_insert.id, {
stringsElement: '#' + div_typed_content.id,
loop: false,
startDelay: 500,
typeSpeed: 50,
backSpeed: 0
})
}
}
Reveal.on('slidechanged', event => {
init_type(event)
})
// Hit on first slide
Reveal.on('ready', event => {
init_type(event)
})

1521
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

23
package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "followthescooter",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "eslint"
},
"repository": {
"type": "git",
"url": "gitea@git.bitnik.org:anton/followthescooter.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^7.10.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1"
}
}

21
plugin/typed/LICENSE.txt Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2017 Matt Boldt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

318
plugin/typed/README.md Normal file
View File

@ -0,0 +1,318 @@
[![Build Status](https://travis-ci.org/mattboldt/typed.js.svg?branch=typed-2.0)](https://travis-ci.org/mattboldt/typed.js)
[![Code Climate](https://codeclimate.com/github/mattboldt/typed.js/badges/gpa.svg)](https://codeclimate.com/github/mattboldt/typed.js)
[![GitHub release](https://img.shields.io/github/release/mattboldt/typed.js.svg)]()
[![npm](https://img.shields.io/npm/dt/typed.js.svg)](https://img.shields.io/npm/dt/typed.js.svg)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
[![Gratipay User](https://img.shields.io/gratipay/user/mattboldt.svg)](https://gratipay.com/Typed.js/)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)
<img src="https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png" width="450px" title="Typed.js" />
### [View the Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://www.mattboldt.com/typed.js) | [View Full Docs](http://www.mattboldt.com/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)
Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
---
Installation
------------
#### NPM
~~~
npm install typed.js
~~~
#### Yarn
~~~
yarn add typed.js
~~~
#### Bower
~~~
bower install typed.js
~~~
#### Setup
This is really all you need to get going.
~~~ javascript
// Can also be included with a regular script tag
import Typed from 'typed.js';
var options = {
strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
typeSpeed: 40
}
var typed = new Typed(".element", options);
~~~
Wonderful sites using Typed.js
---
https://slack.com/
https://envato.com/
https://productmap.co/
https://www.typed.com/
https://apeiron.io
https://git.market/
http://allison.house/404
http://www.maxcdn.com/
https://commando.io/
http://testdouble.com/agency.html
http://www.stephanemartinw.com/
http://www.trelab.fi/en/
http://jessejohnson.github.io/
---
### Strings from static HTML (SEO Friendly)
Rather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
~~~ javascript
<script>
var typed = new Typed('.element', {
stringsElement: '#typed-strings'
});
</script>
~~~
~~~ html
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
~~~
### Type Pausing
You can pause in the middle of a string for a given amount of time by including an escape character.
~~~ javascript
var typed = new Typed(".element", {
// Waits 1000ms after typing "First"
strings: ["First ^1000 sentence.", "Second sentence."]
});
~~~
### Smart Backspacing
In the following example, this would only backspace the words after "This is a"
~~~ javascript
var typed = new Typed(".element", {
strings: ["This is a JavaScript library", "This is an ES6 module"],
smartBackspace: true // Default value
});
~~~
### Bulk Typing
The following example would emulate how a terminal acts when typing a command and seeing its result.
~~~ javascript
var typed = new Typed(".element", {
strings: [
"git push --force ^1000\n `pushed to origin with option force`"
]
});
~~~
### CSS
CSS animations are build upon initialzation in JavaScript. But, you can customize them at your will! These classes are:
```css
/* Cursor */
.typed-cursor {}
/* If fade out option is set */
.typed-fade-out {}
```
### Use with ReactJS
Check out this example React app using Typed.js in a component: https://jsfiddle.net/mattboldt/ovat9jmp/
Customization
----
~~~ javascript
var typed = new Typed(".element", {
/**
* @property {array} strings strings to be typed
* @property {string} stringsElement ID of element containing string children
*/
strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
stringsElement: null,
/**
* @property {number} typeSpeed type speed in milliseconds
*/
typeSpeed: 0,
/**
* @property {number} startDelay time before typing starts in milliseconds
*/
startDelay: 0,
/**
* @property {number} backSpeed backspacing speed in milliseconds
*/
backSpeed: 0,
/**
* @property {boolean} smartBackspace only backspace what doesn't match the previous string
*/
smartBackspace: true,
/**
* @property {boolean} shuffle shuffle the strings
*/
shuffle: false,
/**
* @property {number} backDelay time before backspacing in milliseconds
*/
backDelay: 700,
/**
* @property {boolean} fadeOut Fade out instead of backspace
* @property {string} fadeOutClass css class for fade animation
* @property {boolean} fadeOutDelay Fade out delay in milliseconds
*/
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
/**
* @property {boolean} loop loop strings
* @property {number} loopCount amount of loops
*/
loop: false,
loopCount: Infinity,
/**
* @property {boolean} showCursor show cursor
* @property {string} cursorChar character for cursor
* @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
*/
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
* @property {string} attr attribute for typing
* Ex: input placeholder, value, or just HTML text
*/
attr: null,
/**
* @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
*/
bindInputFocusEvents: false,
/**
* @property {string} contentType 'html' or 'null' for plaintext
*/
contentType: 'html',
/**
* All typing is complete
* @param {Typed} self
*/
onComplete: (self) => {},
/**
* Before each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: (arrayPos, self) => {},
/**
* After each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: (arrayPos, self) => {},
/**
* During looping, after last string is typed
* @param {Typed} self
*/
onLastStringBackspaced: (self) => {},
/**
* Typing has been stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: (arrayPos, self) => {},
/**
* Typing has been started after being stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: (arrayPos, self) => {},
/**
* After reset
* @param {Typed} self
*/
onReset: (self) => {},
/**
* After stop
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: (arrayPos, self) => {},
/**
* After start
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: (arrayPos, self) => {},
/**
* After destroy
* @param {Typed} self
*/
onDestroy: (self) => {}
});
~~~
## Contributing
### [View Contribution Guidelines](./.github/CONTRIBUTING.md)
end
---
Thanks for checking this out. If you have any questions, I'll be on [Twitter](http://www.twitter.com/atmattb).
If you're using this, let me know! I'd love to see it.
It would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http://www.mattboldt.com)

1049
plugin/typed/typed.js Normal file

File diff suppressed because it is too large Load Diff

3
start_server.sh Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/bash
# sudo npm install -g browser-sync
browser-sync start --server --files "*.css" "*.html" "*.js"