typed
This commit is contained in:
parent
9f896f58d7
commit
4c82603c64
15
.eslintrc.js
Normal file
15
.eslintrc.js
Normal file
@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true
|
||||
},
|
||||
extends: [
|
||||
'standard'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 12,
|
||||
sourceType: 'module'
|
||||
},
|
||||
rules: {
|
||||
}
|
||||
}
|
||||
7
dist/theme/bitnik.css
vendored
7
dist/theme/bitnik.css
vendored
@ -104,9 +104,12 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||
/*********************************************
|
||||
* OTHER
|
||||
*********************************************/
|
||||
.reveal p {
|
||||
.reveal p, .typed-insert {
|
||||
margin: 20px 0;
|
||||
line-height: 1.3; }
|
||||
line-height: 1.3;
|
||||
color: #82CFAD !important;
|
||||
|
||||
}
|
||||
|
||||
/* Remove trailing margins after titles */
|
||||
.reveal h1:last-child,
|
||||
|
||||
52
index.html
52
index.html
@ -1,5 +1,6 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
@ -13,22 +14,37 @@
|
||||
<!-- Theme used for syntax highlighted code -->
|
||||
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<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 data-prevent-swipe>
|
||||
<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>
|
||||
<section>
|
||||
<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 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>
|
||||
@ -40,18 +56,8 @@
|
||||
<script src="plugin/notes/notes.js"></script>
|
||||
<script src="plugin/markdown/markdown.js"></script>
|
||||
<script src="plugin/highlight/highlight.js"></script>
|
||||
<script>
|
||||
// More info about initialization & config:
|
||||
// - https://revealjs.com/initialization/
|
||||
// - 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>
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
58
main.js
Normal file
58
main.js
Normal 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
1521
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal 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
21
plugin/typed/LICENSE.txt
Normal 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
318
plugin/typed/README.md
Normal file
@ -0,0 +1,318 @@
|
||||
[](https://travis-ci.org/mattboldt/typed.js)
|
||||
[](https://codeclimate.com/github/mattboldt/typed.js)
|
||||
[]()
|
||||
[](https://img.shields.io/npm/dt/typed.js.svg)
|
||||
[](http://standardjs.com)
|
||||
[](https://gratipay.com/Typed.js/)
|
||||
[](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.", "& 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
1049
plugin/typed/typed.js
Normal file
File diff suppressed because it is too large
Load Diff
3
start_server.sh
Executable file
3
start_server.sh
Executable file
@ -0,0 +1,3 @@
|
||||
#!/usr/bin/bash
|
||||
# sudo npm install -g browser-sync
|
||||
browser-sync start --server --files "*.css" "*.html" "*.js"
|
||||
Loading…
Reference in New Issue
Block a user