Helios-Layout.st 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. Smalltalk current createPackage: 'Helios-Layout'!
  2. HLWidget subclass: #HLContainer
  3. instanceVariableNames: 'splitter'
  4. package: 'Helios-Layout'!
  5. !HLContainer methodsFor: 'accessing'!
  6. splitter
  7. ^ splitter
  8. !
  9. splitter: aSplitter
  10. splitter := aSplitter
  11. ! !
  12. !HLContainer methodsFor: 'rendering'!
  13. renderOn: html
  14. html div
  15. class: 'tool_container';
  16. with: self splitter
  17. ! !
  18. !HLContainer class methodsFor: 'instance creation'!
  19. with: aSplitter
  20. ^ self new
  21. splitter: aSplitter;
  22. yourself
  23. ! !
  24. Widget subclass: #HLSplitter
  25. instanceVariableNames: 'firstWidget secondWidget firstPane secondPane splitter'
  26. package: 'Helios-Layout'!
  27. !HLSplitter methodsFor: 'accessing'!
  28. cssClass
  29. ^ 'splitter'
  30. !
  31. firstWidget
  32. ^ firstWidget
  33. !
  34. firstWidget: aWidget
  35. firstWidget := aWidget
  36. !
  37. secondWidget
  38. ^ secondWidget
  39. !
  40. secondWidget: aWidget
  41. secondWidget := aWidget
  42. ! !
  43. !HLSplitter methodsFor: 'rendering'!
  44. panesCssClass
  45. ^ 'panes'
  46. !
  47. renderOn: html
  48. html div class: self panesCssClass; with: [
  49. firstPane := html div class: 'pane'; with: self firstWidget.
  50. splitter := html div class: self cssClass.
  51. secondPane := html div class: 'pane'; with: self secondWidget ].
  52. self setupSplitter
  53. !
  54. resize
  55. !
  56. setupSplitter
  57. ! !
  58. !HLSplitter methodsFor: 'testing'!
  59. isHeliosSplitter
  60. ^ true
  61. ! !
  62. !HLSplitter class methodsFor: 'instance creation'!
  63. with: aWidget with: anotherWidget
  64. ^ self new
  65. firstWidget: aWidget;
  66. secondWidget: anotherWidget;
  67. yourself
  68. ! !
  69. HLSplitter subclass: #HLHorizontalSplitter
  70. instanceVariableNames: ''
  71. package: 'Helios-Layout'!
  72. !HLHorizontalSplitter methodsFor: 'accessing'!
  73. cssClass
  74. ^ super cssClass, ' horizontal'
  75. !
  76. panesCssClass
  77. ^ super panesCssClass, ' horizontal'
  78. ! !
  79. !HLHorizontalSplitter methodsFor: 'actions'!
  80. resize
  81. self resize: (splitter asJQuery css: 'top')
  82. !
  83. resize: anInteger
  84. | container size offset percentage |
  85. container := firstPane asJQuery parent.
  86. offset := firstPane asJQuery offset top.
  87. size := container height.
  88. percentage := (size - (anInteger - offset)) / size * 100.
  89. percentage := 80 min: (percentage max: 20).
  90. firstPane asJQuery css: 'bottom' put: percentage asString, '%'.
  91. splitter asJQuery css: 'top' put: (100 - percentage) asString, '%'.
  92. secondPane asJQuery css: 'top' put: (100 - percentage) asString, '%'
  93. !
  94. startResizing: aSplitter
  95. aSplitter width: splitter asJQuery width
  96. ! !
  97. !HLHorizontalSplitter methodsFor: 'rendering'!
  98. setupSplitter
  99. splitter asJQuery draggable: #{
  100. 'axis' -> 'y'.
  101. 'containment' -> splitter asJQuery parent.
  102. 'helper' -> 'clone'.
  103. 'start' -> [ :e :ui | self startResizing: ui helper ].
  104. 'drag' -> [ :e :ui | self resize: ui offset top ] }
  105. ! !
  106. HLSplitter subclass: #HLVerticalSplitter
  107. instanceVariableNames: ''
  108. package: 'Helios-Layout'!
  109. !HLVerticalSplitter methodsFor: 'accessing'!
  110. cssClass
  111. ^ super cssClass, ' vertical'
  112. !
  113. panesCssClass
  114. ^ super panesCssClass, ' vertical'
  115. ! !
  116. !HLVerticalSplitter methodsFor: 'actions'!
  117. resize
  118. self resize: (splitter asJQuery css: 'left')
  119. !
  120. resize: anInteger
  121. | container size offset percentage |
  122. container := firstPane asJQuery parent.
  123. offset := firstPane asJQuery offset left.
  124. size := container width.
  125. percentage := (size - (anInteger - offset)) / size * 100.
  126. percentage := 80 min: (percentage max: 20).
  127. firstPane asJQuery css: 'right' put: percentage asString, '%'.
  128. splitter asJQuery css: 'left' put: (100 - percentage) asString, '%'.
  129. secondPane asJQuery css: 'left' put: (100 - percentage) asString, '%'
  130. !
  131. startResizing: aSplitter
  132. aSplitter height: splitter asJQuery height
  133. ! !
  134. !HLVerticalSplitter methodsFor: 'rendering'!
  135. setupSplitter
  136. splitter asJQuery draggable: #{
  137. 'axis' -> 'x'.
  138. 'containment' -> splitter asJQuery parent.
  139. 'helper' -> 'clone'.
  140. 'start' -> [ :e :ui | self startResizing: ui helper ].
  141. 'drag' -> [ :e :ui | self resize: (ui offset left) ] }
  142. ! !
  143. !Object methodsFor: '*Helios-Layout'!
  144. isHeliosSplitter
  145. ^ false
  146. ! !