Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-06-06 22:26:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #934 from estebanrfp/master

Browse Source 
added vanilla js version of user.html
This commit is contained in:
Mark Nadal 2020-05-16 01:57:16 -07:00 committed by GitHub
commit c7f017191e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 182 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/vanilla/screen.html
View File

@ -1,12 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<video id="video" width="100%"></video> <video id="video" width="100%"></video>
<center> <center>
<button id="record">Record</button> <button id="record">Record</button>
<button id="play">Play</button> <button id="play">Play</button>
</center> </center>
<script src="../../../gun/gun.js"></script> <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script> <script>
const gun = Gun(`${window.location.origin}/gun`) const gun = Gun(`${window.location.origin}/gun`)
@ -54,9 +61,10 @@
record.playing = false record.playing = false
return return
} }
playButton.innerText = 'Stop'
playButton.innerText = 'Stop'
record.playing = true record.playing = true
gun.get('test').get('screen').once(data => { gun.get('test').get('screen').once(data => {
if (!data) { return } if (!data) { return }
video.src = data video.src = data
@ -64,3 +72,6 @@
}) })
}, false) }, false)
</script> </script>
</body>
</html>

80
examples/vanilla/todo.html
View File

@ -1,5 +1,11 @@
<!DOCTYPE html>
<html> <html>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body> <body>
<h1>Thoughts</h1> <h1>Thoughts</h1>
@ -9,44 +15,50 @@
</form> </form>
<ul id="parentList"></ul> <ul id="parentList"></ul>
<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script> <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<link href="style.css" rel="stylesheet">
<script> <script>
var gun = Gun().get('thoughts'); const gun = Gun(`${window.location.origin}/gun`).get('thoughts')
document.getElementById('form').addEventListener('submit', function (e) {
e.preventDefault(); // attaches event listener and prevent default form action const parentList = document.getElementById('parentList')
var data = document.getElementById('input').value; const input = document.getElementById('input')
gun.set(data); const form = document.getElementById('form')
document.getElementById('input').value = "";
}); const dynamicEvent = e => {
gun.map().on(function (thought, id) { const target = e.target
var li = document.getElementById(id) || document.getElementById('parentList').insertAdjacentHTML('beforeend', '<li id =' + id + '> ' + thought + '</li>');
var $ = function (selector) { gun.get(target.id).put(null)
return document.querySelector(selector);
}; target.innerHTML = document.getElementById(target.innerHTML)
// attach the event listener to the selected li items
var links = $('#parentList').getElementsByTagName('li'); if (target.innerHTML === ' null' || target.innerHTML === ' ' || target.innerHTML === '') {
for (var i = 0; i < links.length; i++) { target.style.display = 'none'
var link = links[i];
// console.log(link.innerHTML);
link.ondblclick = dynamicEvent;
if (link.innerHTML === " null" || link.innerHTML === " " || link.innerHTML === "") {
link.style.display = "none";
} else { } else {
link.style.display = "list-item"; target.style.display = 'list-item'
}; }
}; }
});
function dynamicEvent() { gun.map().on((thought, id) => {
gun.get(this.id).put(null); parentList.insertAdjacentHTML('beforeend', `<li id =${id}> ${thought}</li>`)
this.innerHTML = document.getElementById(this.id.innerHTML);
if (this.innerHTML === " null" || this.innerHTML === " " || this.innerHTML === "") { const links = parentList.getElementsByTagName('li')
this.style.display = "none";
for (const link of links) {
if (link.innerHTML === ' null' || link.innerHTML === ' ' || link.innerHTML === '') {
link.style.display = 'none'
} else { } else {
this.style.display = "list-item"; link.style.display = 'list-item'
}; }
}; link.ondblclick = dynamicEvent
}
})
form.addEventListener('submit', e => {
e.preventDefault()
gun.set(input.value)
input.value = ''
})
</script> </script>
</body> </body>

58
examples/vanilla/user.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<h1>User</h1>
<form id="sign">
<input id="alias" placeholder="username">
<input id="pass" type="password" placeholder="passphrase">
<input id="signup" type="button" value="sign up">
<input id="signin" type="button" value="sign in">
</form>
<ul id="list"></ul>
<form id="said">
<input id="say">
<input id="speak" type="submit" value="speak">
</form>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
<script>
const gun = Gun(`${window.location.origin}/gun`)
const user = gun.user().recall({ sessionStorage: true })
const alias = document.querySelector('#alias')
const pass = document.querySelector('#pass')
const sign = document.querySelector('#sign')
const signup = document.querySelector('#signup')
const signin = document.querySelector('#signin')
const said = document.querySelector('#said')
const say = document.querySelector('#say')
const ul = document.querySelector('#list')
function UI (say, id) {
const li = document.createElement('li')
li.setAttribute('id', id)
li.appendChild(document.createTextNode(say))
ul.appendChild(li)
return false
}
signup.addEventListener('click', () => user.create(alias.value, pass.value, () => user.auth(alias.value, pass.value)))
signin.addEventListener('click', () => user.auth(alias.value, pass.value))
said.addEventListener('submit', e => {
e.preventDefault()
// if(!user.is){ return }
user.get('said').set(say.value)
said.value = ''
})
gun.on('auth', () => {
sign.style.display = 'none'
user.get('said').map().on(UI)
})
</script>