Browse Source

fix: iframe height in non-testing mode, example paths in testing mode

Benoît Hubert 8 years ago
parent
commit
0ca0b7455b
3 changed files with 13 additions and 5 deletions
  1. 1 0
      css/styles.css
  2. 2 2
      html/template.mustache.html
  3. 10 3
      sandboxApp.js

+ 1 - 0
css/styles.css

@@ -136,6 +136,7 @@ html, body {
 #sandbox-iframe {
   border: none;
   width: 100%;
+  height: 100%;
 }
 #sandbox-iframe.test-mode {
   max-height: 300px;

+ 2 - 2
html/template.mustache.html

@@ -11,7 +11,7 @@
     {{/libsCss}}
     <!-- Example's CSS -->
     {{#css}}
-    <link rel="stylesheet" href="/exemples/{{ repoSlug }}/{{ slug }}/{{ . }}">
+    <link rel="stylesheet" href="/{{examplesDir}}/{{ repoSlug }}/{{ slug }}/{{ . }}">
     {{/css}}
     <style type="text/css" media="screen">
     body {
@@ -34,7 +34,7 @@
     {{/libsJs}}
     <!-- Example's JS -->
     {{#js}}
-    <script src="/exemples/{{ repoSlug }}/{{ slug }}/{{ . }}"></script>
+    <script src="/{{examplesDir}}/{{ repoSlug }}/{{ slug }}/{{ . }}"></script>
     {{/js}}
 
   </body>

+ 10 - 3
sandboxApp.js

@@ -277,11 +277,18 @@ app.get('/examples/:repoSlug/:slug',
     var example = _.find(req.repo.examples, { slug });
     const { title, html, js, css, libsCss, libsJs } = example;
     console.log(example, title, html, js, css, libsCss, libsJs);
-    readFileAsync(__dirname + '/exemples/' + repoSlug + '/' + slug + '/example.html')
+    readFileAsync(examplesDir + '/' + repoSlug + '/' + slug + '/example.html')
     .then(body =>
-      Mustache.render(sandboxTpml, { body, repoSlug, slug, title, js, css, libsCss, libsJs })
+      Mustache.render(sandboxTpml, {
+        body, repoSlug, slug, title, js, css, libsCss, libsJs,
+        examplesDir: path.relative(__dirname, examplesDir)
+      })
     )
-    .then(html => res.send(html));
+    .then(html => res.send(html))
+    .catch(err => {
+      console.error(err);
+      res.status(500).send('Error: ' + err.message);
+    });
   }
 );