Created
March 13, 2013 09:04
-
-
Save teramako/5150399 to your computer and use it in GitHub Desktop.
Flow.js のテスト
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>flow.js Test</title> | |
| <script src="flow.js"></script> | |
| <style> | |
| #outSection { | |
| width: 40%; | |
| float: left; | |
| } | |
| #codeSection { | |
| overflow: auto; | |
| width: 59%; | |
| } | |
| #out { | |
| border: 3px solid #FFF7AA; | |
| border-radius: 4px; | |
| background-color: #DFECAA; | |
| white-space: pre; | |
| color: #1C1C1C; | |
| } | |
| #out > p { | |
| margin: 0; | |
| border-bottom: thin dotted ThreeDShadow; | |
| } | |
| #out > p:last-child { border-bottom: none; } | |
| #out time { | |
| text-align: right; | |
| display: inline-block; | |
| background-color: #FFEE55; | |
| padding-left: 0.5em; | |
| width: 5em; | |
| } | |
| #out time:after { | |
| content: "ms"; | |
| padding-right: 0.5em; | |
| } | |
| #out time + span { | |
| padding: 0 0.5em; | |
| } | |
| #code { | |
| margin: 1em; | |
| padding: 3px; | |
| background-color: #234378; | |
| border: 3px solid #758299; | |
| color: #E3E3E3; | |
| overflow: auto; | |
| max-height: 20em; | |
| } | |
| footer::before { | |
| content: ""; | |
| display: block; | |
| clear: both; | |
| } | |
| footer { | |
| margin: 1em auto 0 auto; | |
| border-top: thin solid ThreeDShadow; | |
| width: 80%; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Flow.js Test</h1> | |
| <p> | |
| <button onclick="ok1();" id="ok1button">OK 1</button> | |
| <button onclick="ok2();" id="ok2button">OK 2</button> | |
| </p> | |
| <section id="outSection"> | |
| <h2>Log</h2> | |
| <div id="out"></div> | |
| </section> | |
| <section id="codeSection"> | |
| <h2>Code</h2> | |
| <pre id="code"></pre> | |
| </section> | |
| <footer> | |
| <address>[email protected]</address> | |
| </footer> | |
| <script id="script"> | |
| function $(id){ | |
| return document.getElementById(id); | |
| } | |
| var $out = $("out"); | |
| var start = Date.now(); | |
| function log (...msgs) { | |
| console.log.apply(null, msgs); | |
| var deltaTime = Date.now() - start; | |
| var msg = msgs.join(" "); | |
| $out.insertAdjacentHTML("BeforeEnd", | |
| '<p><time>' + deltaTime + '</time><span>' + msg + '</span></p>'); | |
| } | |
| (function(global) { | |
| $("code").textContent = $("script").text.trim();; | |
| $("ok1button").disabled = $("ok2button").disabled = false; | |
| log("start"); | |
| var flow = new Flow(2, function(){ | |
| delete global.ok1; | |
| delete global.ok2; | |
| log("complete"); | |
| log("global.ok1 " + global.ok1); | |
| log("global.ok2 " + global.ok2); | |
| }); | |
| global.ok1 = function (){ | |
| $("ok1button").disabled = true; | |
| log("ok1", "clicked") | |
| flow.pass(); | |
| }; | |
| global.ok2 = function (){ | |
| $("ok2button").disabled = true; | |
| log("ok2", "clicked"); | |
| flow.pass(); | |
| } | |
| }(this)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment