This repository has been archived by the owner on Dec 17, 2024. It is now read-only.
forked from cygnusb2b/fortnight-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (123 loc) · 11.4 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<title>FortnightJS Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- create command queue -->
<script>
(function (i,r) {
i['FortnightObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments);
}
})(window, 'fortnight');
(function() {
var i = window,
r = 'p1events';
i['__p1e'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments);
};
})();
</script>
<!-- load the module -->
<script type="module" src="./src/index.js" async defer></script>
<script type="module" src="https://cdn.parameter1.com/p1-events/v1.3.3/lib.min.js" async defer></script>
<script>
p1events('init', {
tenant: 'randallreilly',
realm: '5fce561dd28860bc33b823ce',
env: 'development',
debug: true,
uri: 'https://db0y8smio0.execute-api.us-east-2.amazonaws.com/default/p1-website-events-enqueue',
});
fortnight('init', {
domain: 'https://indm.native-x.parameter1.com',
debug: true,
onLinkTrack: (...args) => {
console.info('onLinkTrack', ...args)
},
});
fortnight('event', 'load', { pid: '1234' }, {
callback: (...args) => {
console.info('event callback', ...args);
}
});
fortnight('event', 'load', {"uuid":"48289cf0-dcf7-4882-9ba6-66d2c45d799b","pid":"5aa1552b4795e6000122d9f5","kv":{"chan_id":"1234"}}, {
callback: (...args) => {
console.info('event callback with KVs', ...args);
}
});
const loadMore = () => {
const now = Date.now();
const p = document.createElement('p');
p.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id facilisis urna.';
p.setAttribute('data-fortnight-fields', encodeURIComponent(JSON.stringify({ uuid: '1234', pid: '789' })));
p.setAttribute('data-fortnight-action', 'view');
const script = document.createElement('script');
script.textContent = "fortnight('event', 'load', { pid: '6789' }, {});"
p.appendChild(script);
document.getElementById('list').appendChild(p);
};
const addLink = () => {
const now = Date.now();
const rand = Math.random();
const p = document.createElement('p');
const a = document.createElement('a');
a.setAttribute('data-fortnight-fields', 'foo');
a.setAttribute('data-fortnight-action', 'click');
a.href = 'http://www.google.com?r=' + rand + '&_=' + now;
a.target = '_blank';
a.textContent = 'New Link';
p.appendChild(a);
document.getElementById('list').appendChild(p);
};
</script>
</head>
<body>
<nav class="navbar navbar-dark bg-primary sticky-top">
<a class="navbar-brand" href="#">FortnightJS Example</a>
</nav>
<div class="container my-3">
<div class="row">
<div class="col">
<button onclick="javascript:loadMore(1)" class="btn btn-primary">Load More (With Beacon)</button>
<button onclick="javascript:loadMore(0)" class="btn btn-secondary">Load More (Without Beacon)</button>
<button onclick="javascript:addLink()" class="btn btn-dark">Add a Link</button>
</div>
</div>
<hr>
<div class="row">
<div id="list" class="col">
<h1>Aenean Eget Dui Et</h1>
<h3>Nulla ultricies tincidunt lacus, id gravida sem volutpat at. Proin quam lectus, luctus vitae maximus et, ornare rutrum justo.</h3>
<hr>
<p data-fortnight-action="view"><strong>Lorem</strong> ipsum dolor sit amet, <a data-fortnight-action="click" data-fortnight-fields="true" href="https://www.google.com">consectetur adipiscing elit</a>. Sed id facilisis urna. Vivamus nec nisl non arcu viverra efficitur. Cras ultricies nisi nec elit ultrices, et ornare arcu lacinia. Ut a mi lacinia, feugiat magna ut, pretium ante. Proin a varius ex, in accumsan ipsum. Cras tempus risus nec mauris venenatis imperdiet. Aliquam finibus ligula nec efficitur euismod. Mauris vehicula nec nunc ac volutpat.</p>
<p>Maecenas a <a href="http://www.google.com" target="_blank">suscipit (not tracked)</a> nisl. Praesent bibendum felis sit amet dignissim porttitor. Nulla interdum felis mattis libero mollis, in tincidunt orci imperdiet. Proin semper sodales dolor consequat fringilla. Sed lacinia aliquam est, sit amet gravida elit ultrices in. In hendrerit magna ex, a volutpat nulla sodales in. Maecenas dictum leo ac tincidunt mattis. Etiam pharetra bibendum ipsum, ultricies commodo sem rutrum a. Duis sed porttitor diam.</p>
<p data-fortnight-action="view"><strong>Suspendisse</strong> lacus purus, email <a href="mailto:[email protected]">luctus (at) eget (dot) com</a>. Felis faucibus, sagittis fringilla dolor. Curabitur quis placerat elit. Etiam quis lectus sit amet nisi pharetra dictum in ut odio. Mauris blandit vulputate imperdiet. Aenean viverra elit turpis. Proin lorem metus, maximus ac sodales in, faucibus et eros. Aenean lacinia hendrerit leo, et luctus purus gravida vel. Proin quis sapien orci. Praesent fermentum metus sagittis aliquam auctor. Suspendisse congue elementum lobortis.</p>
<p>Maecenas placerat, augue a luctus commodo, augue tortor consequat odio, sit amet aliquam sem ipsum ac mi. Vestibulum porta nulla feugiat lorem tempor, ac porttitor quam fermentum. Integer dignissim lacinia lectus volutpat consequat. Sed euismod aliquet est, sit amet commodo purus ultrices eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet euismod pharetra. Proin elementum nulla id enim venenatis, in ornare lacus imperdiet. Pellentesque sagittis nisl cursus nisi finibus fermentum. Maecenas eget tempor sapien, a tempor ex. Quisque vehicula, libero vitae blandit ullamcorper, magna ipsum cursus dolor, fringilla sollicitudin augue diam dapibus ex.</p>
<p>Curabitur vitae venenatis lectus. Suspendisse volutpat, justo et pellentesque aliquam, velit nulla vestibulum ante, vitae rutrum velit massa id mi. Maecenas volutpat lobortis tellus non imperdiet. Vivamus viverra massa vel justo ultricies, in elementum est viverra. Maecenas vel lorem eget sem aliquet convallis. Mauris rutrum euismod mollis. Aenean ut orci in orci luctus tristique. Nulla fringilla luctus est nec placerat. Etiam sed orci vel lorem condimentum faucibus.</p>
<p>Donec <a data-fortnight-action="click" data-fortnight-fields="%7B%22pid%22%3A%225ab2b3c4b0997c0001c0c716%22%2C%22uuid%22%3A%22db1a4977-6ef8-4039-959d-99f95b839eae%22%7D" href="https://www.com" target="_blank" rel="noopener noreferrer">quis urna in nisl (target _blank)</a> egestas blandit. Pellentesque sagittis metus ipsum, non pretium ligula pellentesque id. Fusce pulvinar ex nec ex hendrerit tempus. In vel volutpat libero. Vivamus et turpis erat. Nullam volutpat posuere elit sit amet egestas. Nulla porttitor sed velit nec tristique. Proin nec hendrerit justo. Nullam vel consequat ante. Cras ac egestas ligula. Aliquam molestie felis non vulputate suscipit. Nunc congue pretium ante ut eleifend.</p>
<p data-fortnight-action="view"><strong>Sed</strong> ut lectus id nisi auctor facilisis non vitae ligula. Nullam imperdiet enim ut semper pretium. Sed pulvinar urna vitae ex blandit gravida. Nulla libero lorem, mollis id finibus sed, sodales eget enim. Praesent condimentum, risus id posuere bibendum, metus metus egestas magna, consequat sollicitudin lectus ante sed quam. Aenean vehicula mauris sed enim elementum vestibulum. Nunc scelerisque vel odio at dapibus. Cras tincidunt convallis justo, et tristique lacus eleifend non. Sed porta diam sit amet varius malesuada. Integer vel vulputate elit, nec scelerisque nulla. Maecenas dictum porta lectus eu pretium. Duis et velit non neque molestie pellentesque vitae ac metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Aenean ut leo nec lorem elementum suscipit ut nec lorem. Aenean mattis nibh lectus, at facilisis ex tempor et. Sed dolor ex, consectetur ut turpis vehicula, mattis aliquam tortor. Sed consectetur orci risus, hendrerit bibendum felis iaculis hendrerit. Quisque ullamcorper eleifend magna, vitae congue dolor. Donec suscipit justo quis sollicitudin facilisis. Curabitur eu dapibus nunc, in semper dolor. Ut ut placerat leo. Vestibulum blandit, augue vitae placerat tristique, diam erat auctor massa, quis faucibus ipsum libero vel mauris.</p>
<p data-fortnight-action="view" data-fortnight-fields="%7B%22pid%22%3A%225ab2b3c4b0997c0001c0c716%22%2C%22uuid%22%3A%22db1a4977-6ef8-4039-959d-99f95b839eae%22%7D"><strong>In</strong> vehicula dui sed eros tempus, et iaculis arcu mattis. Aenean quam enim, porta at commodo eget, pellentesque a ex. Vestibulum dapibus suscipit nibh, quis volutpat ex mollis at. Sed facilisis vel nisl sit amet volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi accumsan, velit sagittis faucibus hendrerit, leo lectus cursus nibh, eu rutrum nunc mi non arcu. Aenean enim nisi, auctor vitae ante sit amet, luctus fringilla ligula. Etiam ac tempor turpis. Morbi iaculis sagittis nisi et pulvinar. Nam sodales erat nec nunc eleifend sollicitudin. Mauris iaculis tortor at velit tincidunt vehicula quis quis magna.</p>
<p>Nam in rutrum dolor, non egestas odio. Nullam eu mi elit. Cras porta imperdiet odio, quis pharetra enim lobortis eu. Aliquam id tempor tellus. Ut non tempor lectus. Ut condimentum risus at neque interdum varius. In at placerat ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin pretium eu tortor a dapibus. Ut ut consectetur lacus, at tincidunt massa. Pellentesque lectus libero, eleifend eu feugiat lacinia, venenatis et sem. Nulla eget turpis in libero vestibulum fringilla. Ut eleifend velit velit, ut imperdiet nunc efficitur sit amet. Vivamus massa lacus, mollis et quam nec, consequat pharetra dolor. Vestibulum ac tellus eu urna posuere faucibus ac eget risus. Duis fermentum turpis a erat aliquam dignissim.</p>
</div>
</div>
<div class="row">
<div class="col">
<h3>Mindful</h3>
<p data-mindful-action="view" data-mindful-fields="%7B%22chan%22%3A%22654917592e4a2921881e0861%22%2C%22cre%22%3A%2265ef37a27190d91f12c64f94%22%2C%22li%22%3A%2265ef37a07190d91f12c64f7f%22%2C%22ns%22%3A%22rr%2Fdefault%22%2C%22unit%22%3A%226549176d2e4a2921881e186e%22%7D">
Hello <a href="https://google.com" target="_blank" data-mindful-action="click" data-mindful-fields="%7B%22chan%22%3A%22654917592e4a2921881e0861%22%2C%22cre%22%3A%2265ef37a27190d91f12c64f94%22%2C%22li%22%3A%2265ef37a07190d91f12c64f7f%22%2C%22ns%22%3A%22rr%2Fdefault%22%2C%22unit%22%3A%226549176d2e4a2921881e186e%22%7D">world</a>
</p>
</div>
</div>
<div class="row">
<div class="col">
<button onclick="javascript:loadMore(1)" class="btn btn-primary">Load More (With Beacon)</button>
<button onclick="javascript:loadMore(0)" class="btn btn-secondary">Load More (Without Beacon)</button>
<button onclick="javascript:addLink()" class="btn btn-dark">Add a Link</button>
</div>
</div>
</div>
</body>
</html>