first commit
This commit is contained in:
commit
eb2f504652
32490 changed files with 5731109 additions and 0 deletions
1
node_modules/amator/demo/hash-chat/.npmignore
generated
vendored
Normal file
1
node_modules/amator/demo/hash-chat/.npmignore
generated
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bundle.js
|
||||
107
node_modules/amator/demo/hash-chat/index.html
generated
vendored
Normal file
107
node_modules/amator/demo/hash-chat/index.html
generated
vendored
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta property="og:title" content="Hash chat" />
|
||||
<meta property="og:image" content="https://raw.githubusercontent.com/anvaka/amator/master/demo/hash-chat/thumbnail_question.png" />
|
||||
<meta property="og:description" content="Communicate via query string" />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge' >
|
||||
<meta charset="utf-8">
|
||||
<title>Hash chat - communicate via query string with style</title>
|
||||
<meta name="Description" content="Chat via query string">
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.scene {
|
||||
font-size: 32px;
|
||||
}
|
||||
.letter {
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
body {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.edit-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input#text-input {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
width: 500px;
|
||||
border-width: 0px;
|
||||
border-bottom: 1px dotted #3399aa;
|
||||
text-align: center;
|
||||
font-size: 34px;
|
||||
outline: none;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
input#text-input:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
opacity: 0;
|
||||
color: #444;
|
||||
padding-top: 3px;
|
||||
}
|
||||
input#text-input:focus ~ .help-text {
|
||||
opacity: 1;
|
||||
}
|
||||
#current-url {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -1000px;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
input#text-input:focus {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class='scene'></div>
|
||||
<div class='edit-text'>
|
||||
<input type='text' id='text-input'></input>
|
||||
<div class='help-text'>
|
||||
Enter your response and send them the link.
|
||||
</div>
|
||||
</div>
|
||||
<input id='current-url' tyle='text'></input>
|
||||
<script src='bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
109
node_modules/amator/demo/hash-chat/index.js
generated
vendored
Normal file
109
node_modules/amator/demo/hash-chat/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
var amator = require('../../index.js');
|
||||
var queryState = require('query-state');
|
||||
|
||||
var qs = queryState({
|
||||
text: 'hello world'
|
||||
});
|
||||
|
||||
|
||||
var currentUrl = document.getElementById('current-url');
|
||||
var inputText = document.getElementById('text-input');
|
||||
inputText.addEventListener('keyup', updateQueryState);
|
||||
inputText.addEventListener('blur', updateQueryState);
|
||||
inputText.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
document.body.addEventListener('click', function() {
|
||||
inputText.focus();
|
||||
})
|
||||
|
||||
function handleKeyDown(e) {
|
||||
updateQueryState();
|
||||
if (e.which === 13) {
|
||||
animateText(qs.get('text'));
|
||||
currentUrl.focus();
|
||||
currentUrl.select();
|
||||
}
|
||||
}
|
||||
|
||||
function updateQueryState() {
|
||||
qs.set('text', inputText.value);
|
||||
currentUrl.value = window.location.href;
|
||||
}
|
||||
|
||||
function updateInputBox(appState) {
|
||||
inputText.value = appState.name || '';
|
||||
}
|
||||
|
||||
qs.onChange(function(appState) {
|
||||
animateText(appState.text);
|
||||
updateInputBox(appState.text);
|
||||
});
|
||||
|
||||
var scene = document.querySelector('.scene');
|
||||
animateText(qs.get('text'));
|
||||
function animateText(text) {
|
||||
var letters = [];
|
||||
amator.sharedScheduler.clearAll();
|
||||
scene.innerHTML = '';
|
||||
|
||||
Array.from(text).forEach(function (letter, idx, arr){
|
||||
let wrapper = document.createElement('span');
|
||||
wrapper.classList.add('letter')
|
||||
wrapper.innerText = letter;
|
||||
scene.appendChild(wrapper);
|
||||
letters.push(wrapper);
|
||||
var translateDirection = idx < arr.length / 2 ? -1 : 1;
|
||||
scheduleAnimation(wrapper, translateDirection);
|
||||
});
|
||||
}
|
||||
|
||||
function scheduleAnimation(dom, translateDirection) {
|
||||
var fadeOutAfter = Math.random() * 1500 + 500;
|
||||
var fadeOutDuration = Math.random() * 2000 + 500;
|
||||
var offsetLength = translateDirection * (Math.random() * 35 + 35);
|
||||
|
||||
|
||||
setTimeout(fadeOutAnimation, fadeOutAfter)
|
||||
setTimeout(moveOutAnimation, fadeOutAfter * 1.1)
|
||||
setTimeout(blurAnimation, fadeOutAfter * 0.9)
|
||||
|
||||
function fadeOutAnimation() {
|
||||
amator(
|
||||
{ opacity: 1.0 },
|
||||
{ opacity: 0. },
|
||||
{
|
||||
scheduler: amator.sharedScheduler,
|
||||
duration: fadeOutDuration,
|
||||
step: function(v) {
|
||||
dom.style.opacity = v.opacity;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function moveOutAnimation() {
|
||||
amator(
|
||||
{ left: 0.0 },
|
||||
{ left: offsetLength },
|
||||
{
|
||||
scheduler: amator.sharedScheduler,
|
||||
duration: fadeOutDuration,
|
||||
step: function(v) {
|
||||
dom.style.transform = 'translateX(' + v.left + 'px)';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function blurAnimation() {
|
||||
amator(
|
||||
{ blur: 0.0 },
|
||||
{ blur: 5 },
|
||||
{
|
||||
scheduler: amator.sharedScheduler,
|
||||
duration: fadeOutDuration,
|
||||
step: function(v) {
|
||||
dom.style.filter = 'blur(' + v.blur + 'px)';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
8
node_modules/amator/demo/hash-chat/package.json
generated
vendored
Normal file
8
node_modules/amator/demo/hash-chat/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"scripts": {
|
||||
"start": "browserify index.js > bundle.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"query-state": "^3.0.4"
|
||||
}
|
||||
}
|
||||
BIN
node_modules/amator/demo/hash-chat/thumbnail_question.png
generated
vendored
Normal file
BIN
node_modules/amator/demo/hash-chat/thumbnail_question.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Loading…
Add table
Add a link
Reference in a new issue