Home Explore Help
Sign In
bh
/
ipi-jquery
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

sandbox the loaded example in an iframe

Benoît Hubert 8 years ago
parent
b4b35bd424
commit
f82aa53225
6 changed files with 75 additions and 13 deletions
Unified View Show Diff Stats
  1. 1 1
      css/styles.css
  2. 26 0
      exemples/start-iframe.html
  3. 27 0
      exemples/template.html
  4. 1 7
      index.html
  5. 9 4
      js/editor.js
  6. 11 1
      sandboxApp.js

+ 1 - 1
css/styles.css
View File 

@@ -117,7 +117,7 @@ body {
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
 
   overflow-y: scroll;
 
   overflow-y: scroll;
 
-
 
+  border: none;
 
   min-width: 200px;
 
   min-width: 200px;
 
   background: #eee;
 
   background: #eee;
 
 }
 
 }

+ 26 - 0
exemples/start-iframe.html
View File 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+<title>Sandbox iframe</title>
 
+    <link rel="stylesheet" href="../css/normalize.css">
 
+    <link rel="stylesheet" href="../css/main.css">
 
+    <link rel="stylesheet" href="../css/styles.css">
 
+<!--     <link rel="stylesheet" href="css/bootstrap.min.css"> -->
 
+<style type="text/css" media="screen">
 
+body {
 
+    font-family: Arial, Helvetica;
 
+}
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<div class="container">
 
+    <h2>Choisissez un exemple avec le sélecteur pour commencer...</h2>
 
+</div>
 
+
 
+
 
+<script src="../js/vendor/modernizr-3.5.0.min.js"></script>
 
+<script src="../js/vendor/jquery-3.2.1.min.js" ></script>
 
+<script src="../js/plugins.js"></script>
 
+</body>
 
+</html>

+ 27 - 0
exemples/template.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+<title>Sandbox iframe</title>
 
+    <link rel="stylesheet" href="../css/normalize.css">
 
+    <link rel="stylesheet" href="../css/main.css">
 
+    <link rel="stylesheet" href="../css/styles.css">
 
+<!--     <link rel="stylesheet" href="css/bootstrap.min.css"> -->
 
+<style type="text/css" media="screen">
 
+body {
 
+    font-family: Arial, Helvetica;
 
+}
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<div class="container">
 
+    __body__
 
+</div>
 
+
 
+
 
+<script src="../js/vendor/modernizr-3.5.0.min.js"></script>
 
+<script src="../js/vendor/jquery-3.2.1.min.js" ></script>
 
+<script src="../js/plugins.js"></script>
 
+<script src="../exemples/__slug__/script.js"></script>
 
+</body>
 
+</html>

+ 1 - 7
index.html
View File 

@@ -47,13 +47,7 @@
 
     <div class="splitter">
 
     <div class="splitter">
 
     </div>
 
     </div>
 
 
 
-    <div class="panel-right">
 
-        <div id="html-content" class="container"></div>
 
-        <div id="tests" style="display:none">
 
-            <div id="qunit"></div>
 
-            <div id="qunit-fixture"></div>
 
-        </div>
 
-    </div>
 
+    <iframe class="panel-right" src="exemples/start-iframe.html"></iframe>
 
 </div>
 
 </div>
 
 
 
 <script src="js/vendor/modernizr-3.5.0.min.js"></script>
 
 <script src="js/vendor/modernizr-3.5.0.min.js"></script>

+ 9 - 4
js/editor.js
View File 

@@ -122,7 +122,9 @@ $(document).ready(function() {
 
     .then(() => loadAsync(serverPath + '/contenu.html', 'text'))
 
     .then(() => loadAsync(serverPath + '/contenu.html', 'text'))
 
     .then(html => {
 
     .then(html => {
 
       $editorHtml.html(html);
 
       $editorHtml.html(html);
 
-      setHtmlContent(html);
 
+      // setHtmlContent(html);
 
+      $('iframe.panel-right')
 
+      .prop('src', '/examples/' + exampleSlug)
 
       setActiveTab('html');
 
       setActiveTab('html');
 
       setCurrentHash(exampleSlug);
 
       setCurrentHash(exampleSlug);
 
       var sources = {
 
       var sources = {
 
@@ -130,7 +132,7 @@ $(document).ready(function() {
 
         javascript: $editorJs.html()
 
         javascript: $editorJs.html()
 
       };
 
       };
 
       editorStorage.init(exampleSlug, sources);
 
       editorStorage.init(exampleSlug, sources);
 
-      loadJS(serverPath + 'script.js');
 
+      // loadJS(serverPath + 'script.js');
 
     })
 
     })
 
     .then(() => {
 
     .then(() => {
 
       var item = _.find(exampleList, { slug: exampleSlug });
 
       var item = _.find(exampleList, { slug: exampleSlug });
 
@@ -167,9 +169,12 @@ $(document).ready(function() {
 
         }
 
         }
 
         else {
 
         else {
 
           $editorHtml.html(restoredDraft.sources.html);
 
           $editorHtml.html(restoredDraft.sources.html);
 
-          setHtmlContent(restoredDraft.sources.html);
 
+          // setHtmlContent(restoredDraft.sources.html);
 
           $editorJs.html(restoredDraft.sources.javascript);
 
           $editorJs.html(restoredDraft.sources.javascript);
 
-          loadJS('exemples/' + item.slug + '/script.js');
 
+          $('iframe.panel-right')
 
+          .prop('src', '/examples/' + item.slug)
 
+
 
+          // loadJS('exemples/' + item.slug + '/script.js');
 
           // if(item.test) {
 
           // if(item.test) {
 
           //   loadJS('exemples/' + item.slug + '/test.js', function() {
 
           //   loadJS('exemples/' + item.slug + '/test.js', function() {
 
           //     $('#tests').show();
 
           //     $('#tests').show();

+ 11 - 1
sandboxApp.js
View File 

@@ -7,9 +7,11 @@ var fs           = require('fs');
 
 var Promise      = require('bluebird');
 
 var Promise      = require('bluebird');
 
 var app          = express();
 
 var app          = express();
 
 var examplesJSON = __dirname + '/exemples/liste.json';
 
 var examplesJSON = __dirname + '/exemples/liste.json';
 
+var sandboxTpml  = fs.readFileSync(__dirname + '/exemples/template.html').toString();
 
 var examples     = require(examplesJSON);
 
 var examples     = require(examplesJSON);
 
 Promise.promisifyAll(fs);
 
 Promise.promisifyAll(fs);
 
 
 
+// Initialize Express app: root folder as static, body parsers
 
 app.use(express.static(__dirname));
 
 app.use(express.static(__dirname));
 
 app.use(bodyParser.json());
 
 app.use(bodyParser.json());
 
 app.use(bodyParser.urlencoded({ extended: true }));
 
 app.use(bodyParser.urlencoded({ extended: true }));
 
@@ -40,7 +42,15 @@ app.post('/examples', function(req, res) {
 
 });
 
 });
 
 
 
 app.get('/examples/:slug', function(req, res) {
 
 app.get('/examples/:slug', function(req, res) {
 
-
 
+  var slug = req.params.slug;
 
+  fs.readFileAsync(__dirname + '/exemples/' + slug + '/contenu.html')
 
+  .then(buf => buf.toString())
 
+  .then(body => (
 
+    sandboxTpml
 
+    .replace('__body__', body)
 
+    .replace('__slug__', slug)
 
+  ))
 
+  .then(html => res.send(html));
 
 });
 
 });
 
 
 
 app.put('/examples/:slug', function(req, res) {
 
 app.put('/examples/:slug', function(req, res) {