You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

343 lines
8.7 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Ply &mdash; Amazing layer/modal/dialog system. Wow!</title>
<meta property="og:image" content="./st/ply.jpg"/>
<meta name="keywords" content="ply, layer, modal, dialog, javascript, js, rubaxa"/>
<meta name="description" content=""/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/>
<link href='./st/app.css' rel='stylesheet' type='text/css'/>
<link href='./ply.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<a href="https://github.com/RubaXa/Ply"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div style="height: 50px;"></div>
<h1 title="Try demo!"><u>Ply</u></h1>
<div class="container">
<div class="row">
<h2>Alert</h2>
<div class="col-left">
<div class="ply-layer alert example">
<div class="ply-inside">
<div class="ply-content">Hello %username%!</div>
<div class="ply-footer"><button class="ply-ok">OK</button></div>
</div>
</div>
</div>
<div class="col-right">
<pre class="javascript"><code>
Ply.dialog("alert", "Hello %username%!");
</code></pre>
</div>
</div>
<div class="row">
<h2>Confirm</h2>
<div class="col-left">
<div class="ply-layer confirm example">
<div class="ply-inside">
<div class="ply-content">Continue?</div>
<div class="ply-footer"><button class="ply-ctrl ply-ok">OK</button><button class="ply-ctrl ply-cancel">Cancel</button></div>
</div>
</div>
</div>
<div class="col-right">
<pre class="javascript"><code>
Ply.dialog(
"confirm",
{ effect: "3d-sign" },
"Continue?"
);
</code></pre>
</div>
</div>
<div class="row">
<h2>Prompt</h2>
<div class="col-left">
<div class="ply-layer prompt example">
<div class="ply-inside">
<div class="ply-header">Spam subscribe</div>
<div class="ply-content">
<input class="ply-input" placeholder="E-mail"/>
</div>
<div class="ply-footer"><button class="ply-ctrl ply-ok">OK</button><button class="ply-ctrl ply-cancel">Cancel</button></div>
</div>
</div>
</div>
<div class="col-right">
<pre class="javascript"><code>
Ply.dialog("prompt", {
title: "Spam subscribe",
form: { email: "E-mail" }
});
</code></pre>
</div>
</div>
<br/>
<div class="row">
<h2>Dialogs / Multistep</h2>
<div class="col-left">
<div class="ply-layer confirm example">
<div class="ply-inside">
<div class="ply-content">You want to win?</div>
<div class="ply-footer"><button class="ply-ctrl ply-ok">Yes</button><button class="ply-ctrl ply-cancel">No</button></div>
</div>
</div>
</div>
<div class="col-right">
<pre class="javascript"><code>
Ply.dialog({
"intro": {
ui: "confirm",
data: {
text: "You want to win?",
ok: "Yes",
cancel: "No"
},
next: "congratulations",
nextEffect: "3d-flip[180,-180]"
},
"congratulations": {
data: {
children: [{
tag: "img",
src: "st/you-win.gif"
}],
ok: "Okay"
}
}
});
</code></pre>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div style="margin-top: 80px;">
<div id="rubaxa-repos">Loading&hellip;</div>
<script src="//rubaxa.github.io/repos.js"></script>
</div>
</div>
</div>
<div style="height: 100px"></div>
<script>
// Polyfills
![].forEach && document.writeln('<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.min.js"><' + '/script>')
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
<script>
if (/local/.test(location)) {
document.write('<script src="./Ply.js"><'+'/script>');
document.write('<script src="./Ply.ui.js"><'+'/script>');
} else {
document.write('<script src="./Ply.min.js"><'+'/script>');
}
</script>
<script>
(function ($) {
hljs.configure({ classPrefix: '' });
$('.example')
.each(function () {
var $el = $(this);
var $code = $el.closest('.row').find('code');
var code = $code.text().split('\n');
var offset = ((code[1] || code[0]).match(/^[\s\t]+/) || [''])[0].length;
$.each(code, function (i) {
code[i] = code[i].substr(offset);
});
code = code.slice(+(code.length > 1)).join('\n').replace(/\t/g, ' ');
$el.data('code', code);
$code.html(code);
try {
hljs.highlightBlock($code.parent()[0]);
} catch (err) {}
})
.on('click', function () {
Function($(this).data('code'))();
return false;
})
;
$('h1 u').click(function () {
Ply.dialog({
'welcome': {
data: {
children: [{
tag: 'img',
src: 'http://www.saintjn.org/wp-content/uploads/2013/07/welcome.png?1',
width: 400,
height: 116
}],
ok: "Next"
},
next: 'introduce',
nextEffect: '3d-flip[180,-180]'
},
'introduce': {
ui: 'prompt',
data: {
title: 'Your name?',
form: { name: '%username%' }
},
back: 'welcome',
backEffect: '3d-flip[-180,180]',
next: 'hi',
nextEffect: 'scale'
},
'hi': {
data: {
text: 'Hi, {{name}}!',
ok: 'Next'
},
prepare: function (data, dialogs) {
data.text = data.text.replace(/\{\{([^}]+)\}\}/g, function (_, name) {
return dialogs.introduce.val(name);
});
},
back: 'next',
next: 'question',
nextEffect: 'fall'
},
'question': {
ui: 'confirm',
data: {
text: 'You know Jonna Lee?',
ok: 'Yes',
cancel: 'No'
},
back: 'Jonna',
backEffect: 'inner',
next: 'Jonna-01',
nextEffect: '3d-sign'
},
'Jonna': {
data: {
children: [{
text: 'Jonna Lee is a singer-songwriter from Linköping, Sweden. Lee is best known for being the creator and artist of iamamiwhoami. Lee started her own label "To whom it may concern" in 2010.',
css: { maxWidth: '400px' }
}]
},
back: 'next',
next: 'Jonna-01',
nextEffect: 'fade'
},
'Jonna-01': {
data: {
title: 'Jonna Lee',
children: [{
tag: 'img',
src: 'http://www.movieviral.com/wp-content/uploads/2010/03/jonnalee.jpg',
width: 400
}],
ok: 'Next'
},
next: 'Jonna-02',
nextEffect: '3d-flip[180,-180]'
},
'Jonna-02': {
data: {
title: 'Jonna Lee',
children: [{
tag: 'img',
src: 'http://2020k.files.wordpress.com/2012/03/iamamiwhoami-good-worker.png',
width: 400
}],
ok: 'Close',
cancel: 'Rewind'
},
back: 'welcome'
}
});
});
})(jQuery);
</script>
<!-- Background -->
<script>
(function () {
function setNoiseBackground(el, color, width, height, opacity) {
var canvas = document.createElement("canvas");
if (canvas.getContext) {
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
for (var i = 0; i < width; i++) {
for (var j = 0; j < height; j++) {
var val = Math.floor(Math.random() * 255);
context.fillStyle = "rgba(" + val + "," + val + "," + val + "," + opacity + ")";
context.fillRect(i, j, 1, 1);
}
}
el.style.backgroundColor = color;
el.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
}
}
// Usage
setNoiseBackground(document.body, "trasparent", 50, 50, 0.02);
})();
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-16483888-3', 'rubaxa.github.io');
ga('send', 'pageview');
</script>
</body>
</html>