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

Ajout séparateur vertical pour resizer

Benoît Hubert 8 years ago
parent
e7a2188460
commit
b9a7a3bd90
6 changed files with 122 additions and 43 deletions
Unified View Show Diff Stats
  1. 59 9
      css/styles.css
  2. 3 2
      exemples/validation-de-formulaires-bootstrap/contenu.html
  3. BIN
      img/vsizegrip.png
  4. 40 32
      index.html
  5. 18 0
      js/editor.js
  6. 2 0
      js/vendor/jquery-resizable.min.js

+ 59 - 9
css/styles.css
View File 

@@ -55,7 +55,7 @@ body {
 
 /**
 
 /**
 
  * Styles des panneaux gauche-droite
 
  * Styles des panneaux gauche-droite
 
  */
 
  */
 
-#left-panel,
 
+/*#left-panel,
 
 #right-panel {
 
 #right-panel {
 
 	font-family: Arial, Helvetica;
 
 	font-family: Arial, Helvetica;
 
   position: absolute;
 
   position: absolute;
 
@@ -65,26 +65,76 @@ body {
 
 #left-panel {
 
 #left-panel {
 
   background: #fff;
 
   background: #fff;
 
   border-right: 1px solid #aaa;
 
   border-right: 1px solid #aaa;
 
-  right: 40%;
 
+  right: 39%;
 
   left: 0;
 
   left: 0;
 
 }
 
 }
 
 #right-panel {
 
 #right-panel {
 
   background: #f4f4f4;
 
   background: #f4f4f4;
 
-  left: 60%;
 
+  left: 59%;
 
   right: 0;
 
   right: 0;
 
+}*/
 
+
 
+/* jQuery resizable: https://codepen.io/rstrahl/pen/eJZQej */
 
+/* horizontal panel*/
 
+
 
+.panel-container {
 
+  display: flex;
 
+  flex-direction: row;
 
+  border: 1px solid silver;
 
+  overflow: hidden;
 
+  height: 100%;
 
+
 
+  
+  /* avoid browser level touch actions */
 
+  xtouch-action: none;
 
+}
 
+
 
+.panel-left {
 
+  flex: 0 0 auto;
 
+  /* only manually resize */
 
+  padding: 10px;
 
+  width: 50%;
 
+  /*min-height: 200px;*/
 
+  height: 100%;
 
+  min-width: 150px;
 
+  white-space: nowrap;
 
+  background: #fff;
 
+  color: white;
 
+}
 
+
 
+.splitter {
 
+  flex: 0 0 auto;
 
+  width: 18px;
 
+  background: url(../img/vsizegrip.png) center center no-repeat #ddd;
 
+  min-height: 200px;
 
+  cursor: col-resize;  
+}
 
+
 
+.panel-right {
 
+  flex: 1 1 auto;
 
+  /* resizable */
 
+  padding: 10px;
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow-y: scroll;
 
+
 
+  min-width: 200px;
 
+  background: #eee;
 
 }
 
 }
 
+
 
+
 
 .panel-inner {
 
 .panel-inner {
 
   padding: 10px;
 
   padding: 10px;
 
 }
 
 }
 
-#left-panel nav,
 
+.panel-left nav,
 
 #add-example-form {
 
 #add-example-form {
 
   display: inline-block;
 
   display: inline-block;
 
 }
 
 }
 
-#left-panel nav ul {
 
+.panel-left nav ul {
 
   padding-left: 0;
 
   padding-left: 0;
 
   margin: 0;
 
   margin: 0;
 
 }
 
 }
 
-#left-panel nav ul li {
 
+.panel-left nav ul li {
 
   display: inline-block;
 
   display: inline-block;
 
 }
 
 }
 
 #notification {
 
 #notification {
 
@@ -136,8 +186,8 @@ button:hover {
 
   font-size: 90%;
 
   font-size: 90%;
 
   position: absolute;
 
   position: absolute;
 
   top: 90px;
 
   top: 90px;
 
-  right: 0;
 
-  bottom: 0; /*200px;*/
 
+  right: 500px;
 
+  bottom: 0;
 
   left: 0;
 
   left: 0;
 
   border-top: 1px solid #aaa;
 
   border-top: 1px solid #aaa;
 
   border-bottom: 1px solid #aaa;
 
   border-bottom: 1px solid #aaa;
 
@@ -197,7 +247,7 @@ button {
 
 #html-content p {
 
 #html-content p {
 
   margin: 10px 0;
 
   margin: 10px 0;
 
 }
 
 }
 
-button.rounded {
 
+button.d {
 
   padding: 0;
 
   padding: 0;
 
   width: 32px;
 
   width: 32px;
 
   height: 32px;
 
   height: 32px;

+ 3 - 2
exemples/validation-de-formulaires-bootstrap/contenu.html
View File 

@@ -1,8 +1,9 @@
 
 <form>
 
 <form>
 
   <div class="form-group">
 
   <div class="form-group">
 
     <label for="exampleInputUsername1">Username</label>
 
     <label for="exampleInputUsername1">Username</label>
 
-    <input type="email" class="form-control" id="exampleInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
 
-  </div>  <div class="form-group">
 
+    <input type="text" class="form-control" id="exampleInputUsername1" aria-describedby="usernameHelp" placeholder="Enter username" />
 
+  </div>
 
+  <div class="form-group">
 
     <label for="exampleInputEmail1">Email address</label>
 
     <label for="exampleInputEmail1">Email address</label>
 
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
 
     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
 
     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
 
     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

BIN
img/vsizegrip.png
View File


+ 40 - 32
index.html
View File 

@@ -4,7 +4,8 @@
 
 <title>Formation jQuery</title>
 
 <title>Formation jQuery</title>
 
     <link rel="stylesheet" href="css/normalize.css">
 
     <link rel="stylesheet" href="css/normalize.css">
 
     <link rel="stylesheet" href="css/main.css">
 
     <link rel="stylesheet" href="css/main.css">
 
-    <link rel="stylesheet" href="css/qunit-2.4.1.css">
 
+<!--     <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
 
+    <link rel="stylesheet" href="css/bootstrap.min.css">
 
     <link rel="stylesheet" href="css/styles.css">
 
     <link rel="stylesheet" href="css/styles.css">
 
 <style type="text/css" media="screen">
 
 <style type="text/css" media="screen">
 
 
 
@@ -12,44 +13,51 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 
 
-<div id="left-panel">
 
-    <div id="notification"></div>
 
-    <div class="panel-inner">
 
-        <button id="add-example-btn" class="icon-plus rounded blue"></button>
 
-        <form id="add-example-form" style="display: none;">
 
-            <input type="text" name="title" class="input-sm" value="" />
 
-            <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
 
-            --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
 
-        </form>
 
-        <nav id="selector">
 
-            <select id="file-select">
 
-                <option value="-">&mdash;</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>
 
-        <button id="save-changes" class="icon-cloud-upload green"></button>
 
+<div class="panel-container">
 
+
 
+    <div class="panel-left">
 
+        <div id="notification"></div>
 
+        <div class="panel-inner">
 
+            <button id="add-example-btn" class="icon-plus rounded blue"></button>
 
+            <form id="add-example-form" style="display: none;">
 
+                <input type="text" name="title" class="input-sm" value="" />
 
+                <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
 
+                --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
 
+            </form>
 
+            <nav id="selector">
 
+                <select id="file-select">
 
+                    <option value="-">&mdash;</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>
 
+            <button id="save-changes" class="icon-cloud-upload green"></button>
 
+        </div>
 
+        <div id="editor"></div>
 
+        <script type="text/html" id="editor-javascript"></script>
 
+        <script type="text/html" id="editor-html"></script>
 
+    </div>
 
+
 
+    <div class="splitter">
 
     </div>
 
     </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 id="tests" style="display:none">
 
-        <div id="qunit"></div>
 
-        <div id="qunit-fixture"></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>
 
     </div>
 
 </div>
 
 </div>
 
 
 
 <script src="js/vendor/modernizr-3.5.0.min.js"></script>
 
 <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/jquery-3.2.1.min.js" ></script>
 
-<script src="js/vendor/qunit-2.4.1.js" ></script>
 
+<script src="js/vendor/jquery-resizable.min.js" ></script>
 
+<!-- <script src="js/vendor/qunit-2.4.1.js" ></script> -->
 
 <script src="js/vendor/lodash.min.js" ></script>
 
 <script src="js/vendor/lodash.min.js" ></script>
 
 <script src="js/vendor/loadJS.js" ></script>
 
 <script src="js/vendor/loadJS.js" ></script>
 
 <script src="js/plugins.js"></script>
 
 <script src="js/plugins.js"></script>

+ 18 - 0
js/editor.js
View File 

@@ -11,6 +11,8 @@ $(document).ready(function() {
 
   var $exampleCancel = $('#add-example-cancel');
 
   var $exampleCancel = $('#add-example-cancel');
 
   var $saveChanges   = $('#save-changes');
 
   var $saveChanges   = $('#save-changes');
 
   var $notification  = $('#notification');
 
   var $notification  = $('#notification');
 
+  var $leftPanel     = $(".panel-left");
 
+  var $window        = $(window);
 
   var activeMode     = 'html';
 
   var activeMode     = 'html';
 
   var currentHash; 
   var currentHash; 
   var editor;
 
   var editor;
 
@@ -18,6 +20,22 @@ $(document).ready(function() {
 
   var saveTimeout;
 
   var saveTimeout;
 
   var exampleList;
 
   var exampleList;
 
 
 
+  $leftPanel.resizable({
 
+    handleSelector: ".splitter",
 
+    resizeHeight: false,
 
+    onDrag: function(e) {
 
+      $editor.width($leftPanel.width());
 
+    }
 
+  });
 
+  $window.resize(function() {
 
+    // $editor.height($window.height() - 96);
 
+    $(".panel-container").height($(window).height());
 
+
 
+  });
 
+  $(".panel-container").height($(window).height());
 
+  $editor.width($leftPanel.width());
 
+
 
+
 
   editor = ace.edit("editor");
 
   editor = ace.edit("editor");
 
   editor.setTheme("ace/theme/eclipse");
 
   editor.setTheme("ace/theme/eclipse");
 
   editor.$blockScrolling = Infinity;
 
   editor.$blockScrolling = Infinity;

File diff suppressed because it is too large
+ 2 - 0
js/vendor/jquery-resizable.min.js