moka: more work on splitters

css/moka.css

@@ -576,7 +576,7 @@
   border-width: 0;
   z-index: 10;
 }
-.moka_view.mk_split_view.horizontal .mk_splitter {
+.moka_view.mk_split_view.horizontal > .mk_splitter {
   height: 100%;
   width: 5px;
   cursor: ew-resize;
@@ -584,7 +584,7 @@
   margin-left: -1px;
   border-left: 1px solid #aaaaaa;
 }
-.moka_view.mk_split_view.vertical .mk_splitter {
+.moka_view.mk_split_view.vertical > .mk_splitter {
   height: 5px;
   margin-top: -1px;
   width: 100%;

css/moka.less

@@ -447,18 +447,17 @@
 	    z-index: 10;
 	}
 
-	&.horizontal .mk_splitter {
+	&.horizontal>.mk_splitter {
 	    height: 100%;
 	    width: 5px;
 	    cursor: ew-resize;
-
 	    float: left;
 	    margin-left: -1px;
 	    border-left: 1px solid @grey;
 
 	}
 
-	&.vertical .mk_splitter {
+	&.vertical>.mk_splitter {
 	    height: 5px;
 	    margin-top: -1px;
 	    width: 100%;

js/Moka-Controllers.js

@@ -932,15 +932,15 @@ smalltalk.addClass('MKSplitController', smalltalk.MKController, [], 'Moka-Contro
 smalltalk.MKSplitController.comment="I am the abstract controller for `MKSplitView`.";
 smalltalk.addMethod(
 smalltalk.method({
-selector: "onResize:helper:",
+selector: "onResize:",
 category: 'actions',
-fn: function (anEvent,aJQuery){
+fn: function (anEvent){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
 self._subclassResponsibility();
-return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKSplitController)})},
-args: ["anEvent", "aJQuery"],
-source: "onResize: anEvent helper: aJQuery\x0a\x09self subclassResponsibility",
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:",{anEvent:anEvent},smalltalk.MKSplitController)})},
+args: ["anEvent"],
+source: "onResize: anEvent\x0a\x09self subclassResponsibility",
 messageSends: ["subclassResponsibility"],
 referencedClasses: []
 }),
@@ -948,20 +948,89 @@ smalltalk.MKSplitController);
 
 
 
+smalltalk.addClass('MKBottomFixedVerticalSplitController', smalltalk.MKSplitController, [], 'Moka-Controllers');
+smalltalk.MKBottomFixedVerticalSplitController.comment="I am an alternative controller for `MKVerticalSplitView`.\x0a\x0aWhen the splitter is moved, the second view is set a fixed size, thus resizing will preserve the height of the second view, while the first view will be resized.";
+smalltalk.addMethod(
+smalltalk.method({
+selector: "onResize:",
+category: 'actions',
+fn: function (anEvent){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $4,$3,$2,$1;
+$4=self._view();
+$ctx1.sendIdx["view"]=1;
+$3=_st($4)._domSize();
+$2=_st($3)._y();
+$1=_st($2).__minus(_st(_st(_st(_st(self._view())._splitter())._asJQuery())._position())._top());
+self._placeSplitter_($1);
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:",{anEvent:anEvent},smalltalk.MKBottomFixedVerticalSplitController)})},
+args: ["anEvent"],
+source: "onResize: anEvent\x0a\x09self placeSplitter: self view domSize y - self view splitter asJQuery position top",
+messageSends: ["placeSplitter:", "-", "y", "domSize", "view", "top", "position", "asJQuery", "splitter"],
+referencedClasses: []
+}),
+smalltalk.MKBottomFixedVerticalSplitController);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "placeSplitter:",
+category: 'actions',
+fn: function (aNumber){
+var self=this;
+var splitter;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1,$5,$4,$3,$6,$7,$8,$9,$11,$12,$10;
+$2=self._view();
+$ctx1.sendIdx["view"]=1;
+$1=_st($2)._splitter();
+splitter=_st($1)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=1;
+$5=self._view();
+$ctx1.sendIdx["view"]=2;
+$4=_st($5)._secondView();
+$3=_st($4)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=2;
+$6=$3;
+$7=_st(aNumber)._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=1;
+_st($6)._css_put_("height",$7);
+$ctx1.sendIdx["css:put:"]=1;
+$8=_st($3)._css_put_("bottom",(0));
+$ctx1.sendIdx["css:put:"]=2;
+$9=splitter;
+_st($9)._css_put_("top","auto");
+$ctx1.sendIdx["css:put:"]=3;
+$11=$9;
+$12=_st(_st(aNumber).__minus(_st(splitter)._height()))._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=2;
+$10=_st($11)._css_put_("bottom",$12);
+$ctx1.sendIdx["css:put:"]=4;
+_st(_st(_st(self._view())._firstView())._asJQuery())._css_put_("bottom",_st(aNumber)._asMokaCssString());
+return self}, function($ctx1) {$ctx1.fill(self,"placeSplitter:",{aNumber:aNumber,splitter:splitter},smalltalk.MKBottomFixedVerticalSplitController)})},
+args: ["aNumber"],
+source: "placeSplitter: aNumber\x0a\x09| splitter |\x0a\x09splitter := self view splitter asJQuery.\x0a\x09self view secondView asJQuery \x0a\x09\x09css: 'height' put: aNumber asMokaCssString;\x0a\x09\x09css: 'bottom' put: 0.\x0a\x09splitter \x0a\x09\x09css: 'top' put: 'auto';\x0a\x09\x09css: 'bottom' put: (aNumber - splitter height) asMokaCssString.\x0a\x09self view firstView asJQuery css: 'bottom' put: aNumber asMokaCssString",
+messageSends: ["asJQuery", "splitter", "view", "css:put:", "secondView", "asMokaCssString", "-", "height", "firstView"],
+referencedClasses: []
+}),
+smalltalk.MKBottomFixedVerticalSplitController);
+
+
+
 smalltalk.addClass('MKLeftFixedHorizontalSplitController', smalltalk.MKSplitController, [], 'Moka-Controllers');
 smalltalk.MKLeftFixedHorizontalSplitController.comment="I am the controller for `MKHorizontalSplitView`.\x0a\x0aWhen the splitter is moved, the left view is set a fixed size, thus resizing will preserve the width of the first view, while the second view will be resized.";
 smalltalk.addMethod(
 smalltalk.method({
-selector: "onResize:helper:",
+selector: "onResize:",
 category: 'actions',
-fn: function (anEvent,aJQuery){
+fn: function (anEvent){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-self._placeSplitter_(_st(_st(aJQuery)._offset())._left());
-return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKLeftFixedHorizontalSplitController)})},
-args: ["anEvent", "aJQuery"],
-source: "onResize: anEvent helper: aJQuery\x0a\x09self placeSplitter: aJQuery offset left",
-messageSends: ["placeSplitter:", "left", "offset"],
+self._placeSplitter_(_st(_st(_st(_st(self._view())._splitter())._asJQuery())._position())._left());
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:",{anEvent:anEvent},smalltalk.MKLeftFixedHorizontalSplitController)})},
+args: ["anEvent"],
+source: "onResize: anEvent\x0a\x09self placeSplitter: self view splitter asJQuery position left",
+messageSends: ["placeSplitter:", "left", "position", "asJQuery", "splitter", "view"],
 referencedClasses: []
 }),
 smalltalk.MKLeftFixedHorizontalSplitController);
@@ -1007,16 +1076,22 @@ smalltalk.addClass('MKRightFixedHorizontalSplitController', smalltalk.MKSplitCon
 smalltalk.MKRightFixedHorizontalSplitController.comment="I am an alternative controller for `MKHorizontalSplitView`.\x0a\x0aWhen the splitter is moved, the second view is set a fixed size, thus resizing will preserve the width of the second view, while the first view will be resized.";
 smalltalk.addMethod(
 smalltalk.method({
-selector: "onResize:helper:",
+selector: "onResize:",
 category: 'actions',
-fn: function (anEvent,aJQuery){
+fn: function (anEvent){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-self._placeSplitter_(_st(_st(_st(self._view())._domSize())._x()).__minus(_st(_st(aJQuery)._offset())._left()));
-return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKRightFixedHorizontalSplitController)})},
-args: ["anEvent", "aJQuery"],
-source: "onResize: anEvent helper: aJQuery\x0a\x09self placeSplitter: self view domSize x - aJQuery offset left",
-messageSends: ["placeSplitter:", "-", "x", "domSize", "view", "left", "offset"],
+var $4,$3,$2,$1;
+$4=self._view();
+$ctx1.sendIdx["view"]=1;
+$3=_st($4)._domSize();
+$2=_st($3)._x();
+$1=_st($2).__minus(_st(_st(_st(_st(self._view())._splitter())._asJQuery())._position())._left());
+self._placeSplitter_($1);
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:",{anEvent:anEvent},smalltalk.MKRightFixedHorizontalSplitController)})},
+args: ["anEvent"],
+source: "onResize: anEvent\x0a\x09self placeSplitter: self view domSize x - self view splitter asJQuery position left",
+messageSends: ["placeSplitter:", "-", "x", "domSize", "view", "left", "position", "asJQuery", "splitter"],
 referencedClasses: []
 }),
 smalltalk.MKRightFixedHorizontalSplitController);
@@ -1029,7 +1104,7 @@ fn: function (aNumber){
 var self=this;
 var splitter;
 return smalltalk.withContext(function($ctx1) { 
-var $2,$1,$5,$4,$3,$6,$7,$8,$9,$10;
+var $2,$1,$5,$4,$3,$6,$7,$8,$9,$11,$12,$10;
 $2=self._view();
 $ctx1.sendIdx["view"]=1;
 $1=_st($2)._splitter();
@@ -1048,18 +1123,76 @@ $ctx1.sendIdx["css:put:"]=1;
 $8=_st($3)._css_put_("right",(0));
 $ctx1.sendIdx["css:put:"]=2;
 $9=splitter;
-$10=_st(_st(aNumber).__minus(_st(splitter)._width()))._asMokaCssString();
-$ctx1.sendIdx["asMokaCssString"]=2;
-_st($9)._css_put_("right",$10);
+_st($9)._css_put_("left","auto");
 $ctx1.sendIdx["css:put:"]=3;
+$11=$9;
+$12=_st(_st(aNumber).__minus(_st(splitter)._width()))._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=2;
+$10=_st($11)._css_put_("right",$12);
+$ctx1.sendIdx["css:put:"]=4;
 _st(_st(_st(self._view())._firstView())._asJQuery())._css_put_("right",_st(aNumber)._asMokaCssString());
 return self}, function($ctx1) {$ctx1.fill(self,"placeSplitter:",{aNumber:aNumber,splitter:splitter},smalltalk.MKRightFixedHorizontalSplitController)})},
 args: ["aNumber"],
-source: "placeSplitter: aNumber\x0a\x09| splitter |\x0a\x09splitter := self view splitter asJQuery.\x0a\x09self view secondView asJQuery \x0a\x09\x09css: 'width' put: aNumber asMokaCssString;\x0a\x09\x09css: 'right' put: 0.\x0a\x09splitter css: 'right' put: (aNumber - splitter width) asMokaCssString.\x0a\x09self view firstView asJQuery css: 'right' put: aNumber asMokaCssString",
+source: "placeSplitter: aNumber\x0a\x09| splitter |\x0a\x09splitter := self view splitter asJQuery.\x0a\x09self view secondView asJQuery \x0a\x09\x09css: 'width' put: aNumber asMokaCssString;\x0a\x09\x09css: 'right' put: 0.\x0a\x09splitter \x0a\x09\x09css: 'left' put: 'auto';\x0a\x09\x09css: 'right' put: (aNumber - splitter width) asMokaCssString.\x0a\x09self view firstView asJQuery css: 'right' put: aNumber asMokaCssString",
 messageSends: ["asJQuery", "splitter", "view", "css:put:", "secondView", "asMokaCssString", "-", "width", "firstView"],
 referencedClasses: []
 }),
 smalltalk.MKRightFixedHorizontalSplitController);
 
 
+
+smalltalk.addClass('MKTopFixedVerticalSplitController', smalltalk.MKSplitController, [], 'Moka-Controllers');
+smalltalk.MKTopFixedVerticalSplitController.comment="I am the controller for `MKVerticalSplitView`.\x0a\x0aWhen the splitter is moved, the top view is set a fixed size, thus resizing will preserve the height of the first view, while the second view will be resized.";
+smalltalk.addMethod(
+smalltalk.method({
+selector: "onResize:",
+category: 'actions',
+fn: function (anEvent){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self._placeSplitter_(_st(_st(_st(_st(self._view())._splitter())._asJQuery())._position())._top());
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:",{anEvent:anEvent},smalltalk.MKTopFixedVerticalSplitController)})},
+args: ["anEvent"],
+source: "onResize: anEvent\x0a\x09self placeSplitter: self view splitter asJQuery position top",
+messageSends: ["placeSplitter:", "top", "position", "asJQuery", "splitter", "view"],
+referencedClasses: []
+}),
+smalltalk.MKTopFixedVerticalSplitController);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "placeSplitter:",
+category: 'actions',
+fn: function (aNumber){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $3,$2,$1,$4,$7,$6,$5,$8;
+$3=self._view();
+$ctx1.sendIdx["view"]=1;
+$2=_st($3)._firstView();
+$1=_st($2)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=1;
+$4=_st(aNumber)._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=1;
+_st($1)._css_put_("height",$4);
+$ctx1.sendIdx["css:put:"]=1;
+$7=self._view();
+$ctx1.sendIdx["view"]=2;
+$6=_st($7)._splitter();
+$5=_st($6)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=2;
+$8=_st(aNumber)._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=2;
+_st($5)._css_put_("top",$8);
+$ctx1.sendIdx["css:put:"]=2;
+_st(_st(_st(self._view())._secondView())._asJQuery())._css_put_("top",_st(aNumber)._asMokaCssString());
+return self}, function($ctx1) {$ctx1.fill(self,"placeSplitter:",{aNumber:aNumber},smalltalk.MKTopFixedVerticalSplitController)})},
+args: ["aNumber"],
+source: "placeSplitter: aNumber\x0a\x09self view firstView asJQuery css: 'height' put: aNumber asMokaCssString.\x0a\x09self view splitter asJQuery css: 'top' put: aNumber asMokaCssString.\x0a\x09self view secondView asJQuery css: 'top' put: aNumber asMokaCssString",
+messageSends: ["css:put:", "asJQuery", "firstView", "view", "asMokaCssString", "splitter", "secondView"],
+referencedClasses: []
+}),
+smalltalk.MKTopFixedVerticalSplitController);
+
+
 });

js/Moka-Views.js

@@ -1918,10 +1918,11 @@ _st(html)._with_(self._firstView());
 $ctx1.sendIdx["with:"]=1;
 self["@splitter"]=_st(_st(html)._div())._class_(self._splitterCssClass());
 _st(html)._with_(self._secondView());
+_st(self._controller())._placeSplitter_(self._thickness());
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKSplitView)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html with: self firstView.\x0a\x09splitter := html div class: self splitterCssClass.\x0a\x09html with: self secondView",
-messageSends: ["with:", "firstView", "class:", "div", "splitterCssClass", "secondView"],
+source: "renderContentOn: html\x0a\x09html with: self firstView.\x0a\x09splitter := html div class: self splitterCssClass.\x0a\x09html with: self secondView.\x0a\x09\x0a\x09self controller placeSplitter: self thickness",
+messageSends: ["with:", "firstView", "class:", "div", "splitterCssClass", "secondView", "placeSplitter:", "controller", "thickness"],
 referencedClasses: []
 }),
 smalltalk.MKSplitView);
@@ -2113,23 +2114,6 @@ referencedClasses: ["MKLeftFixedHorizontalSplitController"]
 }),
 smalltalk.MKHorizontalSplitView);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "renderContentOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-smalltalk.MKHorizontalSplitView.superclass.fn.prototype._renderContentOn_.apply(_st(self), [html]);
-_st(self._controller())._placeSplitter_(self._defaultThickness());
-return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKHorizontalSplitView)})},
-args: ["html"],
-source: "renderContentOn: html\x0a\x09super renderContentOn: html.\x0a\x09self controller placeSplitter: self defaultThickness",
-messageSends: ["renderContentOn:", "placeSplitter:", "controller", "defaultThickness"],
-referencedClasses: []
-}),
-smalltalk.MKHorizontalSplitView);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "rightThickness:",
@@ -2189,15 +2173,15 @@ return smalltalk.withContext(function($ctx2) {
 return self._resized();
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
 $ctx1.sendIdx["->"]=4;
-$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,"drag".__minus_gt((function(e,ui){
+$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,"drag".__minus_gt((function(event){
 return smalltalk.withContext(function($ctx2) {
-return _st(self._controller())._onResize_helper_(e,ui);
-}, function($ctx2) {$ctx2.fillBlock({e:e,ui:ui},$ctx1,2)})}))]);
+return _st(self._controller())._onResize_(event);
+}, function($ctx2) {$ctx2.fillBlock({event:event},$ctx1,2)})}))]);
 _st($1)._draggable_($2);
 return self}, function($ctx1) {$ctx1.fill(self,"setupEventHandlers",{},smalltalk.MKHorizontalSplitView)})},
 args: [],
-source: "setupEventHandlers\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ew-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :e :ui | self controller onResize: e helper: ui ] }",
-messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:helper:", "controller"],
+source: "setupEventHandlers\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ew-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :event | self controller onResize: event ] }",
+messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:", "controller"],
 referencedClasses: []
 }),
 smalltalk.MKHorizontalSplitView);
@@ -2206,6 +2190,24 @@ smalltalk.MKHorizontalSplitView);
 
 smalltalk.addClass('MKVerticalSplitView', smalltalk.MKSplitView, [], 'Moka-Views');
 smalltalk.MKVerticalSplitView.comment="I split my child views horizontally.";
+smalltalk.addMethod(
+smalltalk.method({
+selector: "bottomThickness:",
+category: 'accessing',
+fn: function (aNumber){
+var self=this;
+function $MKBottomFixedVerticalSplitController(){return smalltalk.MKBottomFixedVerticalSplitController||(typeof MKBottomFixedVerticalSplitController=="undefined"?nil:MKBottomFixedVerticalSplitController)}
+return smalltalk.withContext(function($ctx1) { 
+self._thickness_(aNumber);
+self._controller_(_st($MKBottomFixedVerticalSplitController())._new());
+return self}, function($ctx1) {$ctx1.fill(self,"bottomThickness:",{aNumber:aNumber},smalltalk.MKVerticalSplitView)})},
+args: ["aNumber"],
+source: "bottomThickness: aNumber\x0a\x09self thickness: aNumber.\x0a\x09self controller: MKBottomFixedVerticalSplitController new",
+messageSends: ["thickness:", "controller:", "new"],
+referencedClasses: ["MKBottomFixedVerticalSplitController"]
+}),
+smalltalk.MKVerticalSplitView);
+
 smalltalk.addMethod(
 smalltalk.method({
 selector: "cssClass",
@@ -2224,6 +2226,23 @@ referencedClasses: []
 }),
 smalltalk.MKVerticalSplitView);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "defaultControllerClass",
+category: 'defaults',
+fn: function (){
+var self=this;
+function $MKTopFixedVerticalSplitController(){return smalltalk.MKTopFixedVerticalSplitController||(typeof MKTopFixedVerticalSplitController=="undefined"?nil:MKTopFixedVerticalSplitController)}
+return smalltalk.withContext(function($ctx1) { 
+return $MKTopFixedVerticalSplitController();
+}, function($ctx1) {$ctx1.fill(self,"defaultControllerClass",{},smalltalk.MKVerticalSplitView)})},
+args: [],
+source: "defaultControllerClass\x0a\x09^ MKTopFixedVerticalSplitController",
+messageSends: [],
+referencedClasses: ["MKTopFixedVerticalSplitController"]
+}),
+smalltalk.MKVerticalSplitView);
+
 smalltalk.addMethod(
 smalltalk.method({
 selector: "resize:",
@@ -2255,7 +2274,27 @@ smalltalk.MKVerticalSplitView);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "setupSplitter",
+selector: "secondView:",
+category: 'accessing',
+fn: function (aView){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1,$2;
+smalltalk.MKVerticalSplitView.superclass.fn.prototype._secondView_.apply(_st(self), [aView]);
+$1=self._secondView();
+_st($1)._bottom_((0));
+$2=_st($1)._top_("auto");
+return self}, function($ctx1) {$ctx1.fill(self,"secondView:",{aView:aView},smalltalk.MKVerticalSplitView)})},
+args: ["aView"],
+source: "secondView: aView\x0a\x09super secondView: aView.\x0a\x09self secondView \x0a\x09\x09bottom: 0;\x0a\x09\x09top: 'auto'",
+messageSends: ["secondView:", "bottom:", "secondView", "top:"],
+referencedClasses: []
+}),
+smalltalk.MKVerticalSplitView);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "setupEventHandlers",
 category: 'private',
 fn: function (){
 var self=this;
@@ -2263,7 +2302,7 @@ return smalltalk.withContext(function($ctx1) {
 var $1,$3,$4,$5,$6,$2;
 $1=_st(self["@splitter"])._asJQuery();
 $ctx1.sendIdx["asJQuery"]=1;
-$3="axis".__minus_gt("x");
+$3="axis".__minus_gt("y");
 $ctx1.sendIdx["->"]=1;
 $4="containment".__minus_gt(_st(_st(self["@splitter"])._asJQuery())._parent());
 $ctx1.sendIdx["->"]=2;
@@ -2274,19 +2313,37 @@ return smalltalk.withContext(function($ctx2) {
 return self._resized();
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
 $ctx1.sendIdx["->"]=4;
-$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,"drag".__minus_gt((function(e,ui){
+$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,"drag".__minus_gt((function(event){
 return smalltalk.withContext(function($ctx2) {
-return self._resize_(_st(_st(ui)._offset())._left());
-}, function($ctx2) {$ctx2.fillBlock({e:e,ui:ui},$ctx1,2)})}))]);
+return _st(self._controller())._onResize_(event);
+}, function($ctx2) {$ctx2.fillBlock({event:event},$ctx1,2)})}))]);
 _st($1)._draggable_($2);
-return self}, function($ctx1) {$ctx1.fill(self,"setupSplitter",{},smalltalk.MKVerticalSplitView)})},
+return self}, function($ctx1) {$ctx1.fill(self,"setupEventHandlers",{},smalltalk.MKVerticalSplitView)})},
 args: [],
-source: "setupSplitter\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ns-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :e :ui | self resize: (ui offset left) ] }",
-messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "resize:", "left", "offset"],
+source: "setupEventHandlers\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'y'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ns-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :event | self controller onResize: event ] }",
+messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:", "controller"],
 referencedClasses: []
 }),
 smalltalk.MKVerticalSplitView);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "topThickness:",
+category: 'accessing',
+fn: function (aNumber){
+var self=this;
+function $MKTopFixedVerticalSplitController(){return smalltalk.MKTopFixedVerticalSplitController||(typeof MKTopFixedVerticalSplitController=="undefined"?nil:MKTopFixedVerticalSplitController)}
+return smalltalk.withContext(function($ctx1) { 
+self._thickness_(aNumber);
+self._controller_(_st($MKTopFixedVerticalSplitController())._new());
+return self}, function($ctx1) {$ctx1.fill(self,"topThickness:",{aNumber:aNumber},smalltalk.MKVerticalSplitView)})},
+args: ["aNumber"],
+source: "topThickness: aNumber\x0a\x09self thickness: aNumber.\x0a\x09self controller: MKTopFixedVerticalSplitController new",
+messageSends: ["thickness:", "controller:", "new"],
+referencedClasses: ["MKTopFixedVerticalSplitController"]
+}),
+smalltalk.MKVerticalSplitView);
+
 
 
 smalltalk.addClass('MKTextAreaView', smalltalk.MKSingleAspectView, [], 'Moka-Views');

st/Moka-Controllers.st

@@ -330,10 +330,36 @@ I am the abstract controller for `MKSplitView`.!
 
 !MKSplitController methodsFor: 'actions'!
 
-onResize: anEvent helper: aJQuery
+onResize: anEvent
 	self subclassResponsibility
 ! !
 
+MKSplitController subclass: #MKBottomFixedVerticalSplitController
+	instanceVariableNames: ''
+	package: 'Moka-Controllers'!
+!MKBottomFixedVerticalSplitController commentStamp!
+I am an alternative controller for `MKVerticalSplitView`.
+
+When the splitter is moved, the second view is set a fixed size, thus resizing will preserve the height of the second view, while the first view will be resized.!
+
+!MKBottomFixedVerticalSplitController methodsFor: 'actions'!
+
+onResize: anEvent
+	self placeSplitter: self view domSize y - self view splitter asJQuery position top
+!
+
+placeSplitter: aNumber
+	| splitter |
+	splitter := self view splitter asJQuery.
+	self view secondView asJQuery 
+		css: 'height' put: aNumber asMokaCssString;
+		css: 'bottom' put: 0.
+	splitter 
+		css: 'top' put: 'auto';
+		css: 'bottom' put: (aNumber - splitter height) asMokaCssString.
+	self view firstView asJQuery css: 'bottom' put: aNumber asMokaCssString
+! !
+
 MKSplitController subclass: #MKLeftFixedHorizontalSplitController
 	instanceVariableNames: ''
 	package: 'Moka-Controllers'!
@@ -344,8 +370,8 @@ When the splitter is moved, the left view is set a fixed size, thus resizing wil
 
 !MKLeftFixedHorizontalSplitController methodsFor: 'actions'!
 
-onResize: anEvent helper: aJQuery
-	self placeSplitter: aJQuery offset left
+onResize: anEvent
+	self placeSplitter: self view splitter asJQuery position left
 !
 
 placeSplitter: aNumber
@@ -364,8 +390,8 @@ When the splitter is moved, the second view is set a fixed size, thus resizing w
 
 !MKRightFixedHorizontalSplitController methodsFor: 'actions'!
 
-onResize: anEvent helper: aJQuery
-	self placeSplitter: self view domSize x - aJQuery offset left
+onResize: anEvent
+	self placeSplitter: self view domSize x - self view splitter asJQuery position left
 !
 
 placeSplitter: aNumber
@@ -374,7 +400,29 @@ placeSplitter: aNumber
 	self view secondView asJQuery 
 		css: 'width' put: aNumber asMokaCssString;
 		css: 'right' put: 0.
-	splitter css: 'right' put: (aNumber - splitter width) asMokaCssString.
+	splitter 
+		css: 'left' put: 'auto';
+		css: 'right' put: (aNumber - splitter width) asMokaCssString.
 	self view firstView asJQuery css: 'right' put: aNumber asMokaCssString
 ! !
 
+MKSplitController subclass: #MKTopFixedVerticalSplitController
+	instanceVariableNames: ''
+	package: 'Moka-Controllers'!
+!MKTopFixedVerticalSplitController commentStamp!
+I am the controller for `MKVerticalSplitView`.
+
+When the splitter is moved, the top view is set a fixed size, thus resizing will preserve the height of the first view, while the second view will be resized.!
+
+!MKTopFixedVerticalSplitController methodsFor: 'actions'!
+
+onResize: anEvent
+	self placeSplitter: self view splitter asJQuery position top
+!
+
+placeSplitter: aNumber
+	self view firstView asJQuery css: 'height' put: aNumber asMokaCssString.
+	self view splitter asJQuery css: 'top' put: aNumber asMokaCssString.
+	self view secondView asJQuery css: 'top' put: aNumber asMokaCssString
+! !
+

st/Moka-Examples.st

@@ -63,9 +63,14 @@ Object subclass: #MKCounterBuilder
 !MKCounterBuilder methodsFor: 'accessing'!
 
 build
-	| pane |
-	pane := MKPanelView new
+	| pane splitter |
+	
+	splitter := MKVerticalSplitView new
+		top: 200;
+		bottomThickness: 50;
+		bottom: 0;
 		yourself.
+	pane := MKPanelView new.
 	
 	pane addView: ((MKHeadingView model: self counter aspect: #count)
 		level: 3;
@@ -140,13 +145,16 @@ build
 		top: 440;
 		yourself).
 	
-	(MKHorizontalSplitView 
+	splitter firstView: ((MKHorizontalSplitView 
 		firstView: (MKScrollDecorator decorate: pane)
 		secondView: MKLayoutView new)
 			leftThickness: 300;
-			top: 200;
+			top: 0;
 			bottom: 0;
-			render
+			yourself).
+		
+	splitter secondView: MKLayoutView new.
+	splitter render
 !
 
 counter

st/Moka-Views.st

@@ -714,7 +714,9 @@ defaultThickness
 renderContentOn: html
 	html with: self firstView.
 	splitter := html div class: self splitterCssClass.
-	html with: self secondView
+	html with: self secondView.
+	
+	self controller placeSplitter: self thickness
 ! !
 
 !MKSplitView class methodsFor: 'instance creation'!
@@ -769,14 +771,7 @@ setupEventHandlers
         'containment' -> splitter asJQuery parent.
 		'cursor' -> 'ew-resize'.
 		'stop' -> [ self resized ].
-        'drag' -> [ :e :ui | self controller onResize: e helper: ui ] }
-! !
-
-!MKHorizontalSplitView methodsFor: 'rendering'!
-
-renderContentOn: html
-	super renderContentOn: html.
-	self controller placeSplitter: self defaultThickness
+        'drag' -> [ :event | self controller onResize: event ] }
 ! !
 
 MKSplitView subclass: #MKVerticalSplitView
@@ -787,8 +782,25 @@ I split my child views horizontally.!
 
 !MKVerticalSplitView methodsFor: 'accessing'!
 
+bottomThickness: aNumber
+	self thickness: aNumber.
+	self controller: MKBottomFixedVerticalSplitController new
+!
+
 cssClass
 	^ super cssClass, ' vertical'
+!
+
+secondView: aView
+	super secondView: aView.
+	self secondView 
+		bottom: 0;
+		top: 'auto'
+!
+
+topThickness: aNumber
+	self thickness: aNumber.
+	self controller: MKTopFixedVerticalSplitController new
 ! !
 
 !MKVerticalSplitView methodsFor: 'actions'!
@@ -799,15 +811,21 @@ resize: aNumber
 	self secondView asJQuery css: 'left' put: aNumber asMokaCssString
 ! !
 
+!MKVerticalSplitView methodsFor: 'defaults'!
+
+defaultControllerClass
+	^ MKTopFixedVerticalSplitController
+! !
+
 !MKVerticalSplitView methodsFor: 'private'!
 
-setupSplitter
+setupEventHandlers
 	splitter asJQuery draggable: #{ 
-    	'axis' -> 'x'. 
+    	'axis' -> 'y'. 
         'containment' -> splitter asJQuery parent.
 		'cursor' -> 'ns-resize'.
 		'stop' -> [ self resized ].
-        'drag' -> [ :e :ui | self resize: (ui offset left) ] }
+        'drag' -> [ :event | self controller onResize: event ] }
 ! !
 
 MKSingleAspectView subclass: #MKTextAreaView