Position of auto panel split is good

Now need to make sure the split slider updates panels either side.
jsbin · Mar 21, 2012 · 6c35fa6 · 6c35fa6
1 parent da4bd56
commit 6c35fa6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 25 deletions.
diff --git a/css/style.css b/css/style.css
@@ -139,7 +139,7 @@ a:hover {
 */}
 
 div.html {
-  left: 50%;
+  /*left: 50%;*/
 }
 
 /*.mozilla #bin div.html {
@@ -249,7 +249,7 @@ div.preview {
 }
 
 .javascript {
-  right: 50%;
+  /*right: 50%;*/
 }
 
 iframe.javascript {

diff --git a/js/editors/editors.js b/js/editors/editors.js
@@ -4,22 +4,47 @@
 //= require "unsaved"
 //= require "panel"
 
-var editors = window.editors = jsbin.panels = {
-  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 panelDefault = { editor: true, distribute: function () { 
+  panels.distribute() 
+} };
+
+var panels = {};
+
+// evenly distribute the width of all the visible panels
+panels.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]);
+  }
+
+  if (visible.length) {
+    x = 0;
+    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;
+    }
+  }
 };
 
-editors.distribute = function () {
-
+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 })
 };
 
 var editorsReady = setInterval(function () {
   var ready = true;
-  for (var panel in jsbin.panels) {
-    if (!jsbin.panels[panel].ready) ready = false;
+  for (var panel in panels.panels) {
+    if (!panels.panels[panel].ready) ready = false;
   }
 
   if (ready) {

diff --git a/js/editors/panel.js b/js/editors/panel.js
@@ -76,23 +76,25 @@ Panel.prototype = {
     // if there is, take it's size/2 and make this our
     // width
     var panel = this;
-    var prev = panel.$el.prev(':visible').prev(':visible'),
-        x,
-        width;
-    if (prev.length) {
-      width = prev.width() / 2;
-      x = prev.offset().left + width;
-      panel.$el.css('left', prev.offset().left + width);
-      if (width) panel.$el.width(width);
-    } else {
-      panel.$el.css({ width: '100%', left: 0 });
-      x = 0;
-    }
+    // var prev = panel.$el.prev(':visible').prev(':visible'),
+    //     x,
+    //     width;
+    // if (prev.length) {
+    //   width = prev.width() / 2;
+    //   x = prev.offset().left + width;
+    //   panel.$el.css('left', prev.offset().left + width);
+    //   if (width) panel.$el.width(width);
+    // } else {
+    //   panel.$el.css({ width: '100%', left: 0 });
+    //   x = 0;
+    // }
     panel.$el.show();
     panel.splitter.show();
-    panel.splitter.trigger('init', x);
+    // panel.splitter.trigger('init', x);
     panel.visible = true;
 
+    this.settings.distribute();
+
     panel.controlButton.hide();
 
     // update all splitter positions
@@ -105,6 +107,7 @@ Panel.prototype = {
 
     // update all splitter positions
     this.splitter.hide();
+    this.settings.distribute();
     this.controlButton.show();
   },
   toggle: function () {