Ana Sayfa Keşfet Yardım
Giriş Yap
bh
/
ipi-jquery
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

Chargement HTML et JS dans l'éditeur

Benoît Hubert 8 yıl önce
ebeveyn
b85a884a09
işleme
7c614837de
9 değiştirilmiş dosya ile 153 ekleme ve 30 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 3 1
      .gitignore
  2. 34 10
      css/styles.css
  3. 1 0
      exemples/selecteurs-base/contenu.html
  4. 4 0
      exemples/selecteurs-base/script.js
  5. 24 19
      index.html
  6. 54 0
      js/editor.js
  7. 22 0
      js/vendor/loadJS.js
  8. 6 0
      package.json
  9. 5 0
      server.js

+ 3 - 1
.gitignore
Dosyayı Görüntüle 

@@ -1,4 +1,6 @@
 
 # Include your project-specific ignores in this file
 
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
 
 # Useful .gitignore templates: https://github.com/github/gitignore
 
-doc/
 
+doc/
 
+node_modules/
 
+package-lock.json

+ 34 - 10
css/styles.css
Dosyayı Görüntüle 

@@ -6,38 +6,58 @@
 
  * Grosse font pour le vidéo-proj
 
  */
 
 body {
 
-  font-size: 150%;
 
+  font-size: 120%;
 
 }
 
-
 
 #left-panel,
 
 #right-panel {
 
 	font-family: Arial, Helvetica;
 
+  position: absolute;
 
+  top: 0;
 
+  bottom: 0;
 
 }
 
 #left-panel {
 
   background: #fff;
 
   border-right: 1px solid #aaa;
 
-  position: absolute;
 
-  top: 0;
 
   right: 40%;
 
-  bottom: 0;
 
   left: 0;
 
 }
 
 #right-panel {
 
   background: #f4f4f4;
 
+  left: 60%;
 
+  right: 0;
 
 }
 
-nav {
 
-  max-width: 100%;
 
+.panel-inner {
 
+  padding: 10px;
 
+}
 
+nav ul {
 
+  padding-left: 0;
 
 }
 
 nav ul li {
 
   display: inline-block;
 
 }
 
+a {
 
+  text-decoration: none;
 
+  color: #59d;
 
+}
 
+button a {
 
+  color: #fff;
 
+}
 
+button.active {
 
+  background: #9ad;
 
+}
 
+#editor-js,#editor-html {
 
+  /*display: none;*/
 
+  position: absolute;
 
+  top: 510px;
 
+
 
+}
 
 /**
 
  * Styles pour l'éditeur Ace
 
  */
 
 #editor {
 
   font-size: 90%;
 
   position: absolute;
 
-  top: 100px;
 
+  top: 110px;
 
   right: 0;
 
   bottom: 200px;
 
   left: 0;
 
@@ -48,9 +68,12 @@ nav ul li {
 
 .container {
 
   margin: 150px auto;
 
 	background: #fff;
 
-	border: 1px solid #eee;
 
+	border: 1px solid #ddd;
 
 	padding: 30px;
 
-	width: 600px;
 
+  width: 96%;
 
+  border-radius: 4px;
 
+  box-sizing: border-box;
 
+	/*max-width: 600px;*/
 
 }
 
 input[type="submit"],
 
 button {
 
@@ -68,6 +91,7 @@ button {
 
 .green {
 
   background: #4d2;
 
 }
 
+select,
 
 input {
 
   border: 1px solid #ddd;  
   padding: 8px;

+ 1 - 0
exemples/selecteurs-base/contenu.html
Dosyayı Görüntüle 

@@ -0,0 +1 @@
 
+<button id="button1">Cliquez moi !</button>

+ 4 - 0
exemples/selecteurs-base/script.js
Dosyayı Görüntüle 

@@ -0,0 +1,4 @@
 
+$('#button1').click(function() {
 
+  $(this).html('Click me');
 
+  console.log('click');
 
+});

+ 24 - 19
index.html
Dosyayı Görüntüle 

@@ -12,31 +12,36 @@
 
 <body>
 
 
 <div id="left-panel">
 
-    <nav>
 
-    <ul>
 
-        <li><a href="#">Sélecteurs</a></li>
 
-        <li><a href="#">Evenements</a></li>
 
-    </ul>
 
-    </nav>
 
-    <div id="editor">function foo(items) {
 
-    var x = "All this is syntax highlighted";
 
-    return x;
 
-}</div>
 
+    <div class="panel-inner">
 
+        <nav>
 
+            <select id="fileSelect">
 
+                <option value="-">&mdash;</option>
 
+                <option value="selecteurs-base">Sélecteurs de base</option>
 
+                <option value="selecteurs-filtres">Sélecteurs : filtres</option>
 
+            </select>
 
+        </nav>
 
+        <nav id="tabs">
 
+            <ul>
 
+                <li><button id="show-html">HTML</button></li>
 
+                <li><button id="show-javascript">JavaScript</button></li>
 
+            </ul>
 
+        </nav>
 
+    </div>
 
+    <div id="editor"></div>
 
+    <script type="text/html" id="editor-javascript"></script>
 
+    <script type="text/html" id="editor-html"></script>
 
+</div>
 
+
 
+<div id="right-panel">
 
+    <div id="html-content" class="container"></div>
 
 </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/vendor/loadJS.js" ></script>
 
 <script src="js/plugins.js"></script>
 
 <script src="js/main.js"></script>
 
 <script src="ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
 
-<script>
 
-    var editor = ace.edit("editor");
 
-    editor.setTheme("ace/theme/eclipse");
 
-    editor.getSession().setMode("ace/mode/javascript");
 
-    editor.getSession().setUseWrapMode(true);
 
-    editor.getSession().on('change', function() {
 
-    console.log(arguments)
 
-    });
 
-</script>
 
+<script src="js/editor.js"></script>
 
 </body>
 
 </html>

+ 54 - 0
js/editor.js
Dosyayı Görüntüle 

@@ -0,0 +1,54 @@
 
+$(document).ready(function() {
 
+  var $editor = $('#editor');
 
+  var $editorJs = $('#editor-javascript');
 
+  var $editorHtml = $('#editor-html');
 
+  var $htmlContent = $('#html-content');
 
+  var activeTab = 'show-html';
 
+
 
+  var editor = ace.edit("editor");
 
+  editor.setTheme("ace/theme/eclipse");
 
+  editor.getSession().setMode("ace/mode/javascript");
 
+  editor.getSession().setUseWrapMode(true);
 
+  editor.getSession().on('change', function() {
 
+    console.log(arguments)
 
+  });
 
+
 
+  function setActiveTab(which) {
 
+    var elementId = 'show-' + which;
 
+    $('#' + activeTab).removeClass('active');
 
+    activeTab = elementId;
 
+    $('#' + elementId).addClass('active');
 
+    var ed = $('#editor-' + which);
 
+    editor.getSession().setValue('');
 
+    console.log(which);
 
+    editor.getSession().setMode("ace/mode/" + which);
 
+    console.log('set editor content to', ed.html());
 
+    editor.getSession().setValue(ed.html());
 
+  }
 
+
 
+  $('#tabs button').click(function() {
 
+    var which = $(this).prop('id').substr(5);
 
+    setActiveTab(which);
 
+  })
 
+
 
+  function loadExample() {
 
+    var exampleName = $(this).val();
 
+    var serverPath = 'exemples/' + exampleName + '/';
 
+    $.get(serverPath + 'script.js', function(javascript) {
 
+      $editorJs.html(javascript);
 
+    }, 'text');
 
+    $.get(serverPath + '/contenu.html', function(html) {
 
+      $editorHtml.html(html);
 
+      $htmlContent.html(html);
 
+      setActiveTab('html');
 
+      loadJS(serverPath + 'script.js');
 
+    }, 'text');
 
+
 
+    
+  }
 
+
 
+  var fileSelect = $('#fileSelect');
 
+  fileSelect.change(loadExample);
 
+
 
+  setActiveTab('html');
 
+});

+ 22 - 0
js/vendor/loadJS.js
Dosyayı Görüntüle 

@@ -0,0 +1,22 @@
 
+/*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
 
+(function( w ){
 
+	var loadJS = function( src, cb ){
 
+		"use strict";
 
+		var ref = w.document.getElementsByTagName( "script" )[ 0 ];
 
+		var script = w.document.createElement( "script" );
 
+		script.src = src;
 
+		script.async = true;
 
+		ref.parentNode.insertBefore( script, ref );
 
+		if (cb && typeof(cb) === "function") {
 
+			script.onload = cb;
 
+		}
 
+		return script;
 
+	};
 
+	// commonjs
 
+	if( typeof module !== "undefined" ){
 
+		module.exports = loadJS;
 
+	}
 
+	else {
 
+		w.loadJS = loadJS;
 
+	}
 
+}( typeof global !== "undefined" ? global : this ));

+ 6 - 0
package.json
Dosyayı Görüntüle 

@@ -0,0 +1,6 @@
 
+{
 
+  "name": "ipi-inline-editor",
 
+  "dependencies": {
 
+    "express": "^4.16.2"
 
+  }
 
+}

+ 5 - 0
server.js
Dosyayı Görüntüle 

@@ -0,0 +1,5 @@
 
+var express = require('express');
 
+var app     = express();
 
+
 
+app.use(express.static(__dirname));
 
+app.listen(3000);