1
0

canvas.st 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. Object subclass: #HTMLCanvas
  2. instanceVariableNames: 'root'
  3. category: 'Canvas'!
  4. !HTMLCanvas methodsFor: 'accessing'!
  5. root: aTagBrush
  6. root := aTagBrush
  7. !
  8. root
  9. ^root
  10. ! !
  11. !HTMLCanvas methodsFor: 'initialization'!
  12. initialize
  13. super initialize.
  14. root := TagBrush fromString: 'div' canvas: self
  15. ! !
  16. !HTMLCanvas methodsFor: 'tags'!
  17. newTag: aString
  18. ^TagBrush fromString: aString canvas: self
  19. !
  20. tag: aString
  21. ^root addBrush: (self newTag: aString)
  22. !
  23. h1
  24. ^self tag: 'h1'
  25. !
  26. h2
  27. ^self tag: 'h2'
  28. !
  29. h3
  30. ^self tag: 'h3'
  31. !
  32. h4
  33. ^self tag: 'h4'
  34. !
  35. h5
  36. ^self tag: 'h5'
  37. !
  38. h6
  39. ^self tag: 'h6'
  40. !
  41. p
  42. ^self tag: 'p'
  43. !
  44. div
  45. ^self tag: 'div'
  46. !
  47. span
  48. ^self tag: 'span'
  49. !
  50. img
  51. ^self tag: 'img'
  52. !
  53. ul
  54. ^self tag: 'ul'
  55. !
  56. ol
  57. ^self tag: 'ol'
  58. !
  59. li
  60. ^self tag: 'li'
  61. !
  62. table
  63. ^self tag: 'table'
  64. !
  65. tr
  66. ^self tag: 'tr'
  67. !
  68. td
  69. ^self tag: 'td'
  70. !
  71. th
  72. ^self tag: 'th'
  73. !
  74. form
  75. ^self tag: 'form'
  76. !
  77. input
  78. ^self tag: 'input'
  79. !
  80. button
  81. ^self tag: 'button'
  82. !
  83. select
  84. ^self tag: 'select'
  85. !
  86. option
  87. ^self tag: 'option'
  88. !
  89. textarea
  90. ^self tag: 'textarea'
  91. !
  92. a
  93. ^self tag: 'a'
  94. ! !
  95. !HTMLCanvas methodsFor: '*JQuery'!
  96. appendToJQuery: aJQuery
  97. aJQuery appendElement: root element
  98. ! !
  99. Object subclass: #TagBrush
  100. instanceVariableNames: 'element'
  101. category: 'Canvas'!
  102. !TagBrush class methodsFor: 'instance creation'!
  103. fromString: aString canvas: aCanvas
  104. ^self new
  105. initializeFromString: aString canvas: aCanvas;
  106. yourself
  107. ! !
  108. !TagBrush methodsFor: 'adding'!
  109. contents: anObject
  110. self asJQuery empty.
  111. self append: anObject
  112. !
  113. addBrush: aTagBrush
  114. self appendChild: aTagBrush element.
  115. ^aTagBrush
  116. !
  117. with: anObject
  118. self append: anObject
  119. !
  120. append: anObject
  121. anObject appendToBrush: self
  122. !
  123. appendToBrush: aTagBrush
  124. aTagBrush addBrush: self
  125. !
  126. appendBlock: aBlock
  127. | root |
  128. root := canvas root.
  129. canvas root: self.
  130. aBlock value: canvas.
  131. canvas root: root
  132. !
  133. appendChild: anElement
  134. {'self[''@element''].appendChild(anElement)'}
  135. !
  136. appendString: aString
  137. self appendChild: (self createTextNodeFor: aString)
  138. ! !
  139. !TagBrush methodsFor: 'attributes'!
  140. at: aString put: aValue
  141. {'self[''@element''].setAttribute(aString, aValue)'}
  142. !
  143. removeAt: aString
  144. {'self[''@element''].removeAttribute(aString)'}
  145. !
  146. class: aString
  147. self at: 'class' put: aString
  148. !
  149. id: aString
  150. self at: 'id' put: aString
  151. !
  152. src: aString
  153. self at: 'src' put: aString
  154. !
  155. href: aString
  156. self at: 'href' put: aString
  157. !
  158. title: aString
  159. self at: 'title' put: aString
  160. !
  161. style: aString
  162. self at: 'style' put: aString
  163. ! !
  164. !TagBrush methodsFor: 'initialization'!
  165. initializeFromString: aString canvas: aCanvas
  166. element := self createElementFor: aString.
  167. canvas := aCanvas
  168. ! !
  169. !TagBrush methodsFor: 'accessing'!
  170. element
  171. ^element
  172. ! !
  173. !TagBrush methodsFor: 'converting'!
  174. asJQuery
  175. ^{'return smalltalk.JQuery._from_(jQuery(self[''@element'']))'}
  176. ! !
  177. !TagBrush methodsFor: 'events'!
  178. onKeyDown: aBlock
  179. self asJQuery on: 'keydown' do: aBlock
  180. !
  181. onKeyPress: aBlock
  182. self asJQuery on: 'keypress' do: aBlock
  183. !
  184. onKeyUp: aBlock
  185. self asJQuery on: 'keyup' do: aBlock
  186. !
  187. onFocus: aBlock
  188. self asJQuery on: 'focus' do: aBlock
  189. !
  190. onBlur: aBlock
  191. self asJQuery on: 'blur' do: aBlock
  192. !
  193. onChange: aBlock
  194. self asJQuery on: 'change' do: aBlock
  195. !
  196. onClick: aBlock
  197. self asJQuery on: 'click' do: aBlock
  198. ! !
  199. !TagBrush methodsFor: 'private'!
  200. createElementFor: aString
  201. ^{'return document.createElement(String(aString))'}
  202. !
  203. createTextNodeFor: aString
  204. ^{'return document.createTextNode(String(aString))'}
  205. ! !
  206. Object subclass: #Widget
  207. instanceVariableNames: 'root'
  208. category: 'Canvas'!
  209. !Widget methodsFor: 'accessing'!
  210. root
  211. ^root
  212. ! !
  213. !Widget methodsFor: 'adding'!
  214. appendToBrush: aTagBrush
  215. self appendToJQuery: aTagBrush asJQuery
  216. !
  217. appendToJQuery: aJQuery
  218. self render.
  219. aJQuery append: self root asJQuery
  220. ! !
  221. !Widget methodsFor: 'actions'!
  222. confirm: aString
  223. ^{'return window.confirm(aString)'}
  224. !
  225. prompt: aString
  226. ^self prompt: aString default: ''
  227. !
  228. prompt: aString default: anotherString
  229. ^{'return window.prompt(aString, anotherString)'}
  230. !
  231. update
  232. | canvas |
  233. canvas := HTMLCanvas new.
  234. canvas root: self root.
  235. self root asJQuery empty.
  236. self renderOn: canvas
  237. ! !
  238. !Widget methodsFor: 'rendering'!
  239. render
  240. | canvas |
  241. canvas := HTMLCanvas new.
  242. root := canvas root.
  243. self renderOn: canvas
  244. !
  245. renderOn: html
  246. self
  247. ! !
  248. Widget subclass: #Counter
  249. instanceVariableNames: 'count'
  250. category: 'Canvas'!
  251. !Counter methodsFor: 'initialization'!
  252. initialize
  253. super initialize.
  254. count := 0
  255. ! !
  256. !Counter methodsFor: 'rendering'!
  257. renderOn: html
  258. html h1 with: count asString.
  259. html button
  260. with: '++';
  261. onClick: [self increase].
  262. html button
  263. with: '--';
  264. onClick: [self decrease]
  265. ! !
  266. !Counter methodsFor: 'actions'!
  267. increase
  268. count := count + 1.
  269. self update
  270. !
  271. decrease
  272. count := count - 1.
  273. self update
  274. ! !