Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<body>
​
  <script type="text/x-handlebars">
    <div class="header">
      <h1 id='title'>{{#link-to 'index'}}PatternLab{{/link-to}}</h1>
      {{#link-to 'patterns'}}Recent Patterns{{/link-to}}
      {{#link-to 'about'}}About{{/link-to}}
    </div>
​
    {{outlet}}
​
    {{partial 'footer'}}
  </script>
  
  <script type="text/x-handlebars" id="_footer">
    <hr class="footer"/>&copy; OctoLabs
  </script>
​
  <script type="text/x-handlebars" id="index">
    <h2>Welcome to the Pattern Lab!</h2>
    <p>Your home for procedurally generated patterns.</p>
    <p>This is a small demo app built with Ember and Ember Data.</p>
    <p>{{#link-to 'patterns'}}You probably want to check out the patterns.{{/link-to}}</p>
    <p>Version : {{version}}</p>
  </script>
  
  <script type="text/x-handlebars" id="about">
    <h2>About</h2>
​
    <p>PatternLab is a small demo appliction of Ember.</p>
​
    <p>Pattern generation is done with <a href="http://amsqr.github.io/chromanin.js/texgen.html">Chromanin.js</a> by <a href="http://www.amsqr.com/">Alejandro Mosquera</a></p>
​
    <p>You can <a href="https://github.com/jagthedrummer/pattern-lab">find the source on GitHub.</a></p>
  </script>
  
  <script type="text/x-handlebars" id="loading">
    <h1>Loading...</h1>
  </script>
  
  <script type="text/x-handlebars" id="pattern">
    <h2>{{name}}</h2>
    {{pattern-display pattern=model width="256" height="256"}}
  </script>
  
  <script type="text/x-handlebars" id="patterns">
    <h2>Latest Patterns</h2>
    <ul id="pattern-list">
      
      {{#each pattern in content}}
        <li>{{#link-to 'pattern' pattern}}{{pattern-display pattern=pattern width=120 height=50}} {{!pattern.name}}{{/link-to}}</li>
      {{/each}}
    </ul>
​
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" id="components/pattern-display">
    <canvas {{bind-attr id=canvasId width=width height=height}}></canvas>
    {{yield}}
  </script>
   
  
  <!-- CSS and JS Files -->
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.6.1/ember.js"></script>
​
  <script src="http://builds.emberjs.com/tags/v1.0.0-beta.8/ember-data.prod.js"></script>
  
  <script src="http://amsqr.github.io/chromanin.js/TextureGenerator.js"></script>
  
</body>
<head>
<meta name="description" content="Rendering a pattern" />
  <meta charset="utf-8">
  <title>Rendering a pattern</title>
</head>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jagthedrummer_revealpro
0viewers