-
Notifications
You must be signed in to change notification settings - Fork 1
Examples
timlegrand edited this page Jun 17, 2014
·
20 revisions
<script src="./standalock.js"></script>
<script type="text/javascript" charset="utf-8">
var miniConfig = {
message: 'Slide to unlock extra info',
format: '<p>Well done!</p>'
};
StandaLock
.add(miniConfig)
.render();
</script>
In this example both StandaLock, welcome message and ouptut are printed immediately before the <script src="./standalock.js"></script> which is considered as an anchor by default.
<script src="./standalock.js"></script>
<script type="text/javascript" charset="utf-8">
function load(){
var config1 = {
message: 'Slide to reveal extra data',
data: {
mailto: 'cHJpdmF0ZUBleGFtcGxlLmNvbQ==',
tel: 'MSg1NTUpNTU1LTU1NTU='
},
decrypt: function(value) {
// your own decrypt function here:
return window.atob(value);
},
format: '<p>mail:{{mailto}} tel:{{tel}}</p>'
};
StandaLock
.add(config1)
.render();
}
window.addEventListener('load', load, false);
</script>
You can put explicit anchors for both StandaLock and output. You might then place the <script src="./standalock.js"></script> include in either the header or footer of your page for sake of performance or readability.
<body>
...
<div id="standalockhere"></div>
...
<div id="outputhere"></div>
...
<!-- Place the following anywhere you want (here in the footer is an example). -->
<script type="text/javascript" charset="utf-8">
function load(){
var myconf = {
message: 'Info will appear somewhere else',
anchor: '#standalockhere',
outputAnchor: '#outputhere',
data: {
mailto: 'cHJpdmF0ZUBleGFtcGxlLmNvbQ==',
tel: 'MSg1NTUpNTU1LTU1NTU='
},
decrypt: function(value) {
return window.atob(value);
},
format: '<p>mail:{{mailto}} tel:{{tel}}</p>'
};
StandaLock
.add(myconf)
.render();
}
window.addEventListener('load', load, false);
</script>
</body>
<body>
<div id="#standalock-3"></div>
<script type="text/javascript" charset="utf-8">
function load(){
var config3 = {
message: 'Slide to unlock a submit button',
anchor: '#standalock-3',
format: '<p><button onclick="alert(\'DONE\')">Click me</button></p>'
};
StandaLock
.add(config3)
.render();
}
window.addEventListener('load', load, false);
</script>
</body>
(so your decrypt function is kept secret)
<body>
<div id="#standalock-4"></div>
<script type="text/javascript" charset="utf-8">
function load(){
var config4 = {
anchor: '#standalock-4',
message: 'Slide to decrypt from a remote server',
data: {
mail: "AC:G2E6o6I2>A=6]4@>", // ROT47
tel: '`WdddXddd\dddd' // ROT47
},
decryptUrl: 'http://localhost:1337',
format: 'mail:{{mail}} tel:{{tel}}'
};
StandaLock
.add(config4)
.render();
}
window.addEventListener('load', load, false);
</script>
</body>
<body>
<div id="standalock-1"></div>
<div id="standalock-2"></div>
<script src="./standalock.js"></script>
<script type="text/javascript" charset="utf-8">
function load(){
var config1 = {
message: 'Are you Human?',
anchor: '#standalock-1',
...
};
var config2 = {
message: 'Are you sure?',
anchor: '#standalock-2',,
...
};
StandaLock
.add(config1)
.add(config2)
.render();
}
window.addEventListener('load', load, false);
</script>
</body>
Any feedback? Feel free to post at standalock@timlegrand.fr