added source link to demo

liabru · Aug 25, 2015 · 1e756d3 · 1e756d3
1 parent 71df1b9
commit 1e756d3
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/demo/css/style.css b/demo/css/style.css
@@ -29,7 +29,11 @@ h1 {
     padding: 0 5px;
 }
 
-.nav a, .nav a:link, .nav a:visited, .nav a:active, .nav a:hover {
+.nav-links a, 
+.nav-links a:link, 
+.nav-links a:visited, 
+.nav-links a:active, 
+.nav-links a:hover {
     color: #aaa;
     text-decoration: none;
     border-bottom: 1px solid #555;
@@ -111,6 +115,13 @@ canvas:active {
     color: #000;
 }
 
+.demo-view-source {
+    display: inline-block;
+    margin: 0 0 0 22px;
+    font-size: 13px;
+    opacity: 0.5;
+}
+
 .dg.a {
     margin-right: 0;
 }

diff --git a/demo/dev.html b/demo/dev.html
@@ -31,7 +31,7 @@
     <body>
         <div class="container">
             <h1>Matter.js Demo (Dev. Build)</h1>
-            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
+            <p class="nav nav-links"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a> <span class="nav-sep">&middot;</span> <a href="http://twitter.com/liabru">@liabru</a></p>
             <div class="controls-container">
                 <select id="demo-select">
                     <option value="mixed">Mixed Shapes</option>
@@ -76,6 +76,9 @@ <h1>Matter.js Demo (Dev. Build)</h1>
                     <option value="stress2">Stress 2</option>
                 </select>
                 <input id="demo-reset" value="Reset" type="submit">
+                <div class="demo-view-source nav-links">
+                    <a id="demo-view-source" href="https://github.com/liabru/matter-js/blob/master/examples" target="_blank">view source</a>
+                </div>
             </div>
             <div id="canvas-container"></div>
         </div>

diff --git a/demo/js/Demo.js b/demo/js/Demo.js
@@ -150,6 +150,7 @@
 
         // initialise demo selector
         demoSelect.value = demo.sceneName;
+        Demo.setUpdateSourceLink(demo.sceneName);
 
         demoSelect.addEventListener('change', function(e) {
             Demo.reset(demo);
@@ -159,15 +160,23 @@
             var scrollY = window.scrollY;
             window.location.hash = demo.sceneName;
             window.scrollY = scrollY;
+            Demo.setUpdateSourceLink(demo.sceneName);
         });
 
         demoReset.addEventListener('click', function(e) {
             Demo.reset(demo);
             Example[demo.sceneName](demo);
             Gui.update(demo.gui);
+            Demo.setUpdateSourceLink(demo.sceneName);
         });
     };
 
+    Demo.setUpdateSourceLink = function(sceneName) {
+        var demoViewSource = document.getElementById('demo-view-source'),
+            sourceUrl = 'https://github.com/liabru/matter-js/blob/master/examples';
+        demoViewSource.setAttribute('href', sourceUrl + '/' + sceneName + '.js');
+    };
+
     Demo.fullscreen = function(demo) {
         var _fullscreenElement = demo.engine.render.canvas;