Splitter alignment working

Woot! Add new panel, and it'll automatically distribute existing panels and insert. Order is fixed, but it's a long way compared to before :)
jsbin · Mar 21, 2012 · fbea703 · fbea703
1 parent 6c35fa6
commit fbea703
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/index.php b/index.php
@@ -93,6 +93,12 @@
         <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="javascript"></textarea>
       </div>
     </div>
+    <div class="code stretch css panel">
+      <div class="label"><p><strong id="csslabel">CSS</strong></p></div>
+      <div class="editbox">
+        <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="css"></textarea>
+      </div>
+    </div>
     <div class="code stretch html panel">
       <div class="label">
         <p>HTML</p>
@@ -112,12 +118,6 @@
       <div class="editbox">
         <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="html"></textarea>
       </div>
-    </div>
-     <div class="code stretch css panel">
-      <div class="label"><p><strong id="csslabel">CSS</strong></p></div>
-      <div class="editbox">
-        <textarea spellcheck="false" autocapitalize="off" autocorrect="off" id="css"></textarea>
-      </div>
     </div>
     <div class="stretch console panel">
       <div class="label"><p>Console</p></div>

diff --git a/js/chrome/splitter.js b/js/chrome/splitter.js
@@ -23,6 +23,7 @@ $.fn.splitter = function () {
       if (split > 10 && split < 90) {
         $el.css('left', split + '%');
         $prev.css('right', (100 - split) + '%');
+        // console.log($prev, ('right', (100 - split) + '%'));
         $handle.css({
           left: split + '%'
         });
@@ -60,6 +61,7 @@ $.fn.splitter = function () {
       // TODO layer on div to block iframes from stealing focus
       width = $parent.width();
       left = $parent.offset().left;
+      $prev = $handle.prevAll(':visible:first');
       e.preventDefault();
     }).hover(function () {
       $handle.css('opacity', '1');

diff --git a/js/editors/editors.js b/js/editors/editors.js
@@ -4,41 +4,44 @@
 //= require "unsaved"
 //= require "panel"
 
-var panelDefault = { editor: true, distribute: function () { 
-  panels.distribute() 
-} };
-
 var panels = {};
 
 // evenly distribute the width of all the visible panels
-panels.distribute = function () {
+Panel.prototype.distribute = function () {
   var visible = [],
       width = 100,
-      x = 0,
-      pos = '';
-  for (var panel in this.panels) {
-    if (this.panels[panel].visible) visible.push(this.panels[panel]);
+      innerWidth = window.innerWidth,
+      left = 0,
+      right = 0;
+  for (var panel in panels.panels) {
+    if (panels.panels[panel].visible) visible.push(panels.panels[panel]);
   }
 
   if (visible.length) {
-    x = 0;
+    visible = visible.sort(function (a, b) {
+      return a.order < b.order ? -1 : 1;
+    });
+
+    console.log(visible);
+
     width = 100 / visible.length;
     for (var i = 0; i < visible.length; i++) {
-      pos = window.innerWidth * (width/100);
-      visible[i].$el.css({'width': width + '%', left: x});
-      visible[i].splitter.trigger('init', window.innerWidth * (x/100));
-      console.log(visible[i].name, window.innerWidth, width, x, pos)
-      x += width;
+
+      right = 100 - (width * (i+1));
+      visible[i].$el.css({ left: left + '%', right: right + '%' });
+      visible[i].splitter.trigger('init', innerWidth * left/100);
+      console.log(visible[i].name, width, left, innerWidth * left/100)
+      left += width;
     }
   }
 };
 
 var editors = jsbin.panels = panels.panels = {
-  javascript: new Panel('javascript', $.extend({}, { nosplitter: true }, panelDefault)),
-  css: new Panel('css', panelDefault),
-  html: new Panel('html', panelDefault),
-  console: new Panel('console', { distribute: panelDefault.distribute }),
-  live: new Panel('live', { distribute: panelDefault.distribute })
+  javascript: new Panel('javascript', { editor: true, nosplitter: true }),
+  css: new Panel('css', { editor: true }),
+  html: new Panel('html', { editor: true }),
+  console: new Panel('console'),
+  live: new Panel('live')
 };
 
 var editorsReady = setInterval(function () {

diff --git a/js/editors/panel.js b/js/editors/panel.js
@@ -12,6 +12,7 @@ var Panel = function (name, settings) {
   panel.name = name;
   panel.$el = $('.panel.' + name);
   panel.el = document.getElementById(name);
+  panel.order = Panel.order++;
 
   var splitterSettings = {};
 
@@ -59,6 +60,7 @@ var Panel = function (name, settings) {
   this.controlButton = $('<a class="button group" href="#' + name + '">' + name + '</a>');
   this.controlButton.click(function () {
     panel.toggle();
+    return false;
   });
   this.controlButton.appendTo('#panels');
 
@@ -69,6 +71,8 @@ var Panel = function (name, settings) {
   panel.hide();
 }
 
+Panel.order = 0;
+
 Panel.prototype = {
   visible: false,
   show: function () {
@@ -93,7 +97,7 @@ Panel.prototype = {
     // panel.splitter.trigger('init', x);
     panel.visible = true;
 
-    this.settings.distribute();
+    this.distribute();
 
     panel.controlButton.hide();
 
@@ -107,7 +111,7 @@ Panel.prototype = {
 
     // update all splitter positions
     this.splitter.hide();
-    this.settings.distribute();
+    this.distribute();
     this.controlButton.show();
   },
   toggle: function () {