mirror of https://github.com/RubaXa/Ply.git
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.
267 lines
6.4 KiB
267 lines
6.4 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Ply — Amazing layer/modal/dialog system. Wow!</title> |
|
|
|
<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> |
|
<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-content">Hello %username%!</div> |
|
<div class="ply-footer"><button class="ply-ok">OK</button></div> |
|
</div> |
|
</div> |
|
|
|
<div class="col-right"> |
|
<code> |
|
Ply.dialog("alert", "Hello %username%!"); |
|
</code> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<h2>Confirm</h2> |
|
|
|
<div class="col-left"> |
|
<div class="ply-layer confirm example"> |
|
<div class="ply-content">Continue?</div> |
|
<div class="ply-footer"><button class="ply-ok">OK</button><button class="ply-cancel">Cancel</button></div> |
|
</div> |
|
</div> |
|
|
|
<div class="col-right"> |
|
<code> |
|
Ply.dialog( |
|
"confirm", |
|
{ effect: "3d-sign" }, |
|
"Continue?" |
|
); |
|
</code> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<h2>Prompt</h2> |
|
|
|
<div class="col-left"> |
|
<div class="ply-layer prompt example"> |
|
<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-ok">OK</button><button class="ply-cancel">Cancel</button></div> |
|
</div> |
|
</div> |
|
|
|
<div class="col-right"> |
|
<code> |
|
Ply.dialog("prompt", { |
|
title: "Spam subscribe", |
|
form: { email: "E-mail" } |
|
}); |
|
</code> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div style="height: 100px"></div> |
|
|
|
|
|
<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> |
|
jQuery(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].match(/^\s+/)[0].length; |
|
|
|
$.each(code, function (i) { |
|
code[i] = code[i].substr(offset); |
|
}); |
|
|
|
code = code.slice(1).join('\n'); |
|
$code.text(code); |
|
$el.data('code', code); |
|
|
|
hljs.highlightBlock($code.wrap('<pre/>').parent().addClass('javascript')[0]) |
|
}) |
|
.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 |
|
}], |
|
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' |
|
} |
|
}); |
|
}); |
|
}); |
|
</script> |
|
|
|
|
|
<!-- Background --> |
|
<script> |
|
(function () { |
|
function setNoiseBackground(el, color, width, height, opacity) { |
|
var canvas = document.createElement("canvas"); |
|
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>
|
|
|