<!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 — 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… < / 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" > < ' + ' / s c r i p t > ' )
< / 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" > < ' + ' / s c r i p t > ' ) ;
document.write('< script src = "./Ply.ui.js" > < ' + ' / s c r i p t > ' ) ;
} else {
document.write('< script src = "./Ply.min.js" > < ' + ' / s c r i p t > ' ) ;
}
< / 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 >
