moka: Use a clone helper for splitters

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:",
+selector: "onResize:helper:",
 category: 'actions',
-fn: function (anEvent){
+fn: function (anEvent,aJQuery){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
 self._subclassResponsibility();
-return self}, function($ctx1) {$ctx1.fill(self,"onResize:",{anEvent:anEvent},smalltalk.MKSplitController)})},
-args: ["anEvent"],
-source: "onResize: anEvent\x0a\x09self 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",
 messageSends: ["subclassResponsibility"],
 referencedClasses: []
 }),
@@ -952,22 +952,16 @@ smalltalk.addClass('MKBottomFixedVerticalSplitController', smalltalk.MKSplitCont
 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:",
+selector: "onResize:helper:",
 category: 'actions',
-fn: function (anEvent){
+fn: function (anEvent,aJQuery){
 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"],
+self._placeSplitter_(_st(_st(_st(self._view())._domSize())._y()).__minus(_st(_st(aJQuery)._position())._top()));
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKBottomFixedVerticalSplitController)})},
+args: ["anEvent", "aJQuery"],
+source: "onResize: anEvent helper: aJQuery\x0a\x09self placeSplitter: self view domSize y - aJQuery position top",
+messageSends: ["placeSplitter:", "-", "y", "domSize", "view", "top", "position"],
 referencedClasses: []
 }),
 smalltalk.MKBottomFixedVerticalSplitController);
@@ -1021,16 +1015,16 @@ smalltalk.addClass('MKLeftFixedHorizontalSplitController', smalltalk.MKSplitCont
 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:",
+selector: "onResize:helper:",
 category: 'actions',
-fn: function (anEvent){
+fn: function (anEvent,aJQuery){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-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"],
+self._placeSplitter_(_st(_st(aJQuery)._position())._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 position left",
+messageSends: ["placeSplitter:", "left", "position"],
 referencedClasses: []
 }),
 smalltalk.MKLeftFixedHorizontalSplitController);
@@ -1076,22 +1070,16 @@ 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:",
+selector: "onResize:helper:",
 category: 'actions',
-fn: function (anEvent){
+fn: function (anEvent,aJQuery){
 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)._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"],
+self._placeSplitter_(_st(_st(_st(self._view())._domSize())._x()).__minus(_st(_st(aJQuery)._position())._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 position left",
+messageSends: ["placeSplitter:", "-", "x", "domSize", "view", "left", "position"],
 referencedClasses: []
 }),
 smalltalk.MKRightFixedHorizontalSplitController);
@@ -1145,16 +1133,16 @@ smalltalk.addClass('MKTopFixedVerticalSplitController', smalltalk.MKSplitControl
 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:",
+selector: "onResize:helper:",
 category: 'actions',
-fn: function (anEvent){
+fn: function (anEvent,aJQuery){
 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"],
+self._placeSplitter_(_st(_st(aJQuery)._position())._top());
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKTopFixedVerticalSplitController)})},
+args: ["anEvent", "aJQuery"],
+source: "onResize: anEvent helper: aJQuery\x0a\x09self placeSplitter: aJQuery position top",
+messageSends: ["placeSplitter:", "top", "position"],
 referencedClasses: []
 }),
 smalltalk.MKTopFixedVerticalSplitController);

js/Moka-Views.js

@@ -2159,29 +2159,31 @@ category: 'private',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$4,$5,$6,$2;
+var $1,$3,$4,$5,$6,$7,$2;
 $1=_st(self["@splitter"])._asJQuery();
 $ctx1.sendIdx["asJQuery"]=1;
 $3="axis".__minus_gt("x");
 $ctx1.sendIdx["->"]=1;
 $4="containment".__minus_gt(_st(_st(self["@splitter"])._asJQuery())._parent());
 $ctx1.sendIdx["->"]=2;
-$5="cursor".__minus_gt("ew-resize");
+$5="helper".__minus_gt("clone");
 $ctx1.sendIdx["->"]=3;
-$6="stop".__minus_gt((function(){
+$6="cursor".__minus_gt("ew-resize");
+$ctx1.sendIdx["->"]=4;
+$7="stop".__minus_gt((function(){
 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(event){
+$ctx1.sendIdx["->"]=5;
+$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,$7,"drag".__minus_gt((function(event,ui){
 return smalltalk.withContext(function($ctx2) {
-return _st(self._controller())._onResize_(event);
-}, function($ctx2) {$ctx2.fillBlock({event:event},$ctx1,2)})}))]);
+return _st(self._controller())._onResize_helper_(event,ui);
+}, function($ctx2) {$ctx2.fillBlock({event:event,ui:ui},$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' -> [ :event | self controller onResize: event ] }",
-messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:", "controller"],
+source: "setupEventHandlers\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'helper' -> 'clone'.\x0a\x09\x09'cursor' -> 'ew-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :event :ui | self controller onResize: event helper: ui ] }",
+messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:helper:", "controller"],
 referencedClasses: []
 }),
 smalltalk.MKHorizontalSplitView);
@@ -2243,35 +2245,6 @@ referencedClasses: ["MKTopFixedVerticalSplitController"]
 }),
 smalltalk.MKVerticalSplitView);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "resize:",
-category: 'actions',
-fn: function (aNumber){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1,$2,$3,$4;
-$1=_st(self._firstView())._asJQuery();
-$ctx1.sendIdx["asJQuery"]=1;
-$2=_st(aNumber)._asMokaCssString();
-$ctx1.sendIdx["asMokaCssString"]=1;
-_st($1)._css_put_("right",$2);
-$ctx1.sendIdx["css:put:"]=1;
-$3=_st(self["@splitter"])._asJQuery();
-$ctx1.sendIdx["asJQuery"]=2;
-$4=_st(aNumber)._asMokaCssString();
-$ctx1.sendIdx["asMokaCssString"]=2;
-_st($3)._css_put_("left",$4);
-$ctx1.sendIdx["css:put:"]=2;
-_st(_st(self._secondView())._asJQuery())._css_put_("left",_st(aNumber)._asMokaCssString());
-return self}, function($ctx1) {$ctx1.fill(self,"resize:",{aNumber:aNumber},smalltalk.MKVerticalSplitView)})},
-args: ["aNumber"],
-source: "resize: aNumber\x0a    self firstView asJQuery css: 'right' put: aNumber asMokaCssString.\x0a\x09splitter asJQuery css: 'left' put: aNumber asMokaCssString.\x0a\x09self secondView asJQuery css: 'left' put: aNumber asMokaCssString",
-messageSends: ["css:put:", "asJQuery", "firstView", "asMokaCssString", "secondView"],
-referencedClasses: []
-}),
-smalltalk.MKVerticalSplitView);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "secondView:",
@@ -2299,7 +2272,7 @@ category: 'private',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$4,$5,$6,$2;
+var $1,$3,$4,$5,$6,$7,$2;
 $1=_st(self["@splitter"])._asJQuery();
 $ctx1.sendIdx["asJQuery"]=1;
 $3="axis".__minus_gt("y");
@@ -2308,20 +2281,22 @@ $4="containment".__minus_gt(_st(_st(self["@splitter"])._asJQuery())._parent());
 $ctx1.sendIdx["->"]=2;
 $5="cursor".__minus_gt("ns-resize");
 $ctx1.sendIdx["->"]=3;
-$6="stop".__minus_gt((function(){
+$6="helper".__minus_gt("clone");
+$ctx1.sendIdx["->"]=4;
+$7="stop".__minus_gt((function(){
 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(event){
+$ctx1.sendIdx["->"]=5;
+$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,$7,"drag".__minus_gt((function(event,ui){
 return smalltalk.withContext(function($ctx2) {
-return _st(self._controller())._onResize_(event);
-}, function($ctx2) {$ctx2.fillBlock({event:event},$ctx1,2)})}))]);
+return _st(self._controller())._onResize_helper_(event,ui);
+}, function($ctx2) {$ctx2.fillBlock({event:event,ui:ui},$ctx1,2)})}))]);
 _st($1)._draggable_($2);
 return self}, function($ctx1) {$ctx1.fill(self,"setupEventHandlers",{},smalltalk.MKVerticalSplitView)})},
 args: [],
-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"],
+source: "setupEventHandlers\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'y'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ns-resize'.\x0a\x09\x09'helper' -> 'clone'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :event :ui | self controller onResize: event helper: ui ] }",
+messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:helper:", "controller"],
 referencedClasses: []
 }),
 smalltalk.MKVerticalSplitView);

st/Moka-Controllers.st

@@ -330,7 +330,7 @@ I am the abstract controller for `MKSplitView`.!
 
 !MKSplitController methodsFor: 'actions'!
 
-onResize: anEvent
+onResize: anEvent helper: aJQuery
 	self subclassResponsibility
 ! !
 
@@ -344,8 +344,8 @@ When the splitter is moved, the second view is set a fixed size, thus resizing w
 
 !MKBottomFixedVerticalSplitController methodsFor: 'actions'!
 
-onResize: anEvent
-	self placeSplitter: self view domSize y - self view splitter asJQuery position top
+onResize: anEvent helper: aJQuery
+	self placeSplitter: self view domSize y - aJQuery position top
 !
 
 placeSplitter: aNumber
@@ -370,8 +370,8 @@ When the splitter is moved, the left view is set a fixed size, thus resizing wil
 
 !MKLeftFixedHorizontalSplitController methodsFor: 'actions'!
 
-onResize: anEvent
-	self placeSplitter: self view splitter asJQuery position left
+onResize: anEvent helper: aJQuery
+	self placeSplitter: aJQuery position left
 !
 
 placeSplitter: aNumber
@@ -390,8 +390,8 @@ When the splitter is moved, the second view is set a fixed size, thus resizing w
 
 !MKRightFixedHorizontalSplitController methodsFor: 'actions'!
 
-onResize: anEvent
-	self placeSplitter: self view domSize x - self view splitter asJQuery position left
+onResize: anEvent helper: aJQuery
+	self placeSplitter: self view domSize x - aJQuery position left
 !
 
 placeSplitter: aNumber
@@ -416,8 +416,8 @@ When the splitter is moved, the top view is set a fixed size, thus resizing will
 
 !MKTopFixedVerticalSplitController methodsFor: 'actions'!
 
-onResize: anEvent
-	self placeSplitter: self view splitter asJQuery position top
+onResize: anEvent helper: aJQuery
+	self placeSplitter: aJQuery position top
 !
 
 placeSplitter: aNumber

st/Moka-Views.st

@@ -769,9 +769,10 @@ setupEventHandlers
 	splitter asJQuery draggable: #{ 
     	'axis' -> 'x'. 
         'containment' -> splitter asJQuery parent.
+		'helper' -> 'clone'.
 		'cursor' -> 'ew-resize'.
 		'stop' -> [ self resized ].
-        'drag' -> [ :event | self controller onResize: event ] }
+        'drag' -> [ :event :ui | self controller onResize: event helper: ui ] }
 ! !
 
 MKSplitView subclass: #MKVerticalSplitView
@@ -803,14 +804,6 @@ topThickness: aNumber
 	self controller: MKTopFixedVerticalSplitController new
 ! !
 
-!MKVerticalSplitView methodsFor: 'actions'!
-
-resize: aNumber
-    self firstView asJQuery css: 'right' put: aNumber asMokaCssString.
-	splitter asJQuery css: 'left' put: aNumber asMokaCssString.
-	self secondView asJQuery css: 'left' put: aNumber asMokaCssString
-! !
-
 !MKVerticalSplitView methodsFor: 'defaults'!
 
 defaultControllerClass
@@ -824,8 +817,9 @@ setupEventHandlers
     	'axis' -> 'y'. 
         'containment' -> splitter asJQuery parent.
 		'cursor' -> 'ns-resize'.
+		'helper' -> 'clone'.
 		'stop' -> [ self resized ].
-        'drag' -> [ :event | self controller onResize: event ] }
+        'drag' -> [ :event :ui | self controller onResize: event helper: ui ] }
 ! !
 
 MKSingleAspectView subclass: #MKTextAreaView