-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (66 loc) · 1.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>Heyo!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wip">[WIP]</div>
<div>
<input type="text" placeholder="What even is this?" class="linktest" />
<span class="linktest"></span>
</div>
<div>
<pre>
!(function(global, undefined) {
"use strict";
var AA;
var hasOwn = {}.hasOwnProperty;
var forEach = [].forEach;
global.AA = AA = {
linkWorks: false
};
if (typeof Object.observe !== 'function') {
AA.link = function() {
console.log('Object.observe is not defined. I\'ll get to your browser soon...');
};
return;
}
AA.linkWorks = true;
function updateObjectFromDOM(object, className, event) {
var newValue = event.target.value;
if (newValue !== object[className]) {
object[className] = event.target.value;
}
}
function updateDomFromObject(domNode, prop, changes) {
var newValue = changes[0].object[prop];
var contentProperty;
if (typeof domNode.value === 'undefined') {
contentProperty = 'textContent';
} else {
contentProperty = 'value';
}
if (newValue !== domNode[contentProperty]) {
domNode[contentProperty] = newValue;
}
}
AA.link = function(domNode, object) {
for (var prop in object) {
if (hasOwn.call(object, prop)) {
var targetNodes = domNode.querySelectorAll('.' + prop);
forEach.call(targetNodes, function(targetNode) {
targetNode.addEventListener('change', updateObjectFromDOM.bind(null, object, prop));
targetNode.addEventListener('keyup', updateObjectFromDOM.bind(null, object, prop));
Object.observe(object, updateDomFromObject.bind(null, targetNode, prop));
});
}
}
}
}).call(null, (1,eval)("this"));
</pre>
</div>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>