1
0

Canvas.st 17 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153
  1. Smalltalk createPackage: 'Canvas'!
  2. Object subclass: #BrowserInterface
  3. instanceVariableNames: ''
  4. package: 'Canvas'!
  5. !BrowserInterface commentStamp!
  6. I am platform interface class that tries to use window and jQuery; that is, one for browser environment.
  7. ## API
  8. self isAvailable. "true if window and jQuery exist".
  9. self alert: 'Hey, there is a problem'.
  10. self confirm: 'Affirmative?'.
  11. self prompt: 'Your name:'.
  12. self ajax: #{
  13. 'url' -> '/patch.js'. 'type' -> 'GET'. dataType->'script'
  14. }.!
  15. !BrowserInterface methodsFor: 'actions'!
  16. ajax: anObject
  17. ^ jQuery ajax: anObject
  18. !
  19. alert: aString
  20. ^ window alert: aString
  21. !
  22. confirm: aString
  23. ^ window confirm: aString
  24. !
  25. prompt: aString
  26. ^ window prompt: aString
  27. ! !
  28. !BrowserInterface methodsFor: 'testing'!
  29. isAvailable
  30. <return typeof window !!== "undefined" && typeof jQuery !!== "undefined">
  31. ! !
  32. Object subclass: #HTMLCanvas
  33. instanceVariableNames: 'root'
  34. package: 'Canvas'!
  35. !HTMLCanvas commentStamp!
  36. I am a canvas for building HTML.
  37. I provide the `#tag:` method to create a `TagBrush` (wrapping a DOM element) and convenience methods in the `tags` protocol.
  38. ## API
  39. My instances are used as the argument of the `#renderOn:` method of `Widget` objects.
  40. The `#with:` method is used to compose HTML, nesting tags. `#with:` can take a `TagBrush`, a `String`, a `BlockClosure` or a `Widget` as argument.
  41. ## Usage example:
  42. aCanvas a
  43. with: [ aCanvas span with: 'click me' ];
  44. onClick: [ window alert: 'clicked!!' ]!
  45. !HTMLCanvas methodsFor: 'accessing'!
  46. root
  47. ^ root
  48. !
  49. root: aTagBrush
  50. root := aTagBrush
  51. !
  52. snippet: anElement
  53. "Adds clone of anElement, finds [data-snippet=""*""] subelement
  54. and returns TagBrush as if that subelement was just added.
  55. Rarely needed to use directly, use `html foo` dynamically installed method
  56. for a snippet named foo."
  57. | clone caret |
  58. clone := anElement asJQuery clone.
  59. self with: (TagBrush fromJQuery: clone canvas: self).
  60. caret := clone find: '[data-snippet="*"]'.
  61. caret toArray isEmpty ifTrue: [ caret := clone ].
  62. ^ TagBrush fromJQuery: (caret removeAttr: 'data-snippet') canvas: self
  63. ! !
  64. !HTMLCanvas methodsFor: 'adding'!
  65. entity: aString
  66. "Adds a character representing html entity, eg.
  67. html entity: 'copy'
  68. adds a copyright sign.
  69. If a name does not represent valid HTML entity, error is raised."
  70. | result |
  71. result := ('<span />' asJQuery html: '&', aString, ';') text.
  72. result size = 1 ifFalse: [ self error: 'Not an HTML entity: ', aString ].
  73. self with: result
  74. !
  75. with: anObject
  76. ^ self root with: anObject
  77. ! !
  78. !HTMLCanvas methodsFor: 'initialization'!
  79. initialize
  80. super initialize.
  81. root ifNil: [ root := TagBrush fromString: 'div' canvas: self ]
  82. !
  83. initializeFromJQuery: aJQuery
  84. root := TagBrush fromJQuery: aJQuery canvas: self
  85. ! !
  86. !HTMLCanvas methodsFor: 'tags'!
  87. a
  88. ^ self tag: 'a'
  89. !
  90. abbr
  91. ^ self tag: 'abbr'
  92. !
  93. address
  94. ^ self tag: 'address'
  95. !
  96. area
  97. ^ self tag: 'area'
  98. !
  99. article
  100. ^ self tag: 'article'
  101. !
  102. aside
  103. ^ self tag: 'aside'
  104. !
  105. audio
  106. ^ self tag: 'audio'
  107. !
  108. base
  109. ^ self tag: 'base'
  110. !
  111. blockquote
  112. ^ self tag: 'blockquote'
  113. !
  114. body
  115. ^ self tag: 'body'
  116. !
  117. br
  118. ^ self tag: 'br'
  119. !
  120. button
  121. ^ self tag: 'button'
  122. !
  123. canvas
  124. ^ self tag: 'canvas'
  125. !
  126. caption
  127. ^ self tag: 'caption'
  128. !
  129. cite
  130. ^ self tag: 'cite'
  131. !
  132. code
  133. ^ self tag: 'code'
  134. !
  135. col
  136. ^ self tag: 'col'
  137. !
  138. colgroup
  139. ^ self tag: 'colgroup'
  140. !
  141. command
  142. ^ self tag: 'command'
  143. !
  144. datalist
  145. ^ self tag: 'datalist'
  146. !
  147. dd
  148. ^ self tag: 'dd'
  149. !
  150. del
  151. ^ self tag: 'del'
  152. !
  153. details
  154. ^ self tag: 'details'
  155. !
  156. div
  157. ^ self tag: 'div'
  158. !
  159. div: aBlock
  160. ^ self div with: aBlock
  161. !
  162. dl
  163. ^ self tag: 'dl'
  164. !
  165. dt
  166. ^ self tag: 'dt'
  167. !
  168. em
  169. ^ self tag: 'em'
  170. !
  171. embed
  172. ^ self tag: 'embed'
  173. !
  174. fieldset
  175. ^ self tag: 'fieldset'
  176. !
  177. figcaption
  178. ^ self tag: 'figcaption'
  179. !
  180. figure
  181. ^ self tag: 'figure'
  182. !
  183. footer
  184. ^ self tag: 'footer'
  185. !
  186. form
  187. ^ self tag: 'form'
  188. !
  189. h1
  190. ^ self tag: 'h1'
  191. !
  192. h1: anObject
  193. ^ self h1 with: anObject
  194. !
  195. h2
  196. ^ self tag: 'h2'
  197. !
  198. h2: anObject
  199. ^ self h2 with: anObject
  200. !
  201. h3
  202. ^ self tag: 'h3'
  203. !
  204. h3: anObject
  205. ^ self h3 with: anObject
  206. !
  207. h4
  208. ^ self tag: 'h4'
  209. !
  210. h4: anObject
  211. ^ self h4 with: anObject
  212. !
  213. h5
  214. ^ self tag: 'h5'
  215. !
  216. h5: anObject
  217. ^ self h5 with: anObject
  218. !
  219. h6
  220. ^ self tag: 'h6'
  221. !
  222. h6: anObject
  223. ^ self h6 with: anObject
  224. !
  225. head
  226. ^ self tag: 'head'
  227. !
  228. header
  229. ^ self tag: 'header'
  230. !
  231. hgroup
  232. ^ self tag: 'hgroup'
  233. !
  234. hr
  235. ^ self tag: 'hr'
  236. !
  237. html
  238. ^ self tag: 'html'
  239. !
  240. iframe
  241. ^ self tag: 'iframe'
  242. !
  243. iframe: aString
  244. ^ self iframe src: aString
  245. !
  246. img
  247. ^ self tag: 'img'
  248. !
  249. img: aString
  250. ^ self img src: aString
  251. !
  252. input
  253. ^ self tag: 'input'
  254. !
  255. label
  256. ^ self tag: 'label'
  257. !
  258. legend
  259. ^ self tag: 'legend'
  260. !
  261. li
  262. ^ self tag: 'li'
  263. !
  264. li: anObject
  265. ^ self li with: anObject
  266. !
  267. link
  268. ^ self tag: 'link'
  269. !
  270. map
  271. ^ self tag: 'map'
  272. !
  273. mark
  274. ^ self tag: 'mark'
  275. !
  276. menu
  277. ^ self tag: 'menu'
  278. !
  279. meta
  280. ^ self tag: 'meta'
  281. !
  282. nav
  283. ^ self tag: 'nav'
  284. !
  285. newTag: aString
  286. ^ TagBrush fromString: aString canvas: self
  287. !
  288. noscript
  289. ^ self tag: 'noscript'
  290. !
  291. object
  292. ^ self tag: 'object'
  293. !
  294. ol
  295. ^ self tag: 'ol'
  296. !
  297. ol: anObject
  298. ^ self ol with: anObject
  299. !
  300. optgroup
  301. ^ self tag: 'optgroup'
  302. !
  303. option
  304. ^ self tag: 'option'
  305. !
  306. output
  307. ^ self tag: 'output'
  308. !
  309. p
  310. ^ self tag: 'p'
  311. !
  312. p: anObject
  313. ^ self p with: anObject
  314. !
  315. param
  316. ^ self tag: 'param'
  317. !
  318. pre
  319. ^ self tag: 'pre'
  320. !
  321. progress
  322. ^ self tag: 'progress'
  323. !
  324. script
  325. ^ self tag: 'script'
  326. !
  327. section
  328. ^ self tag: 'section'
  329. !
  330. select
  331. ^ self tag: 'select'
  332. !
  333. small
  334. ^ self tag: 'small'
  335. !
  336. source
  337. ^ self tag: 'source'
  338. !
  339. span
  340. ^ self tag: 'span'
  341. !
  342. span: anObject
  343. ^ self span with: anObject
  344. !
  345. strong
  346. ^ self tag: 'strong'
  347. !
  348. strong: anObject
  349. ^ self strong with: anObject
  350. !
  351. style
  352. ^ self tag: 'style'
  353. !
  354. style: aString
  355. ^ self style with: aString; yourself
  356. !
  357. sub
  358. ^ self tag: 'sub'
  359. !
  360. summary
  361. ^ self tag: 'summary'
  362. !
  363. sup
  364. ^ self tag: 'sup'
  365. !
  366. table
  367. ^ self tag: 'table'
  368. !
  369. tag: aString
  370. ^ root addBrush: (self newTag: aString)
  371. !
  372. tbody
  373. ^ self tag: 'tbody'
  374. !
  375. td
  376. ^ self tag: 'td'
  377. !
  378. textarea
  379. ^ self tag: 'textarea'
  380. !
  381. tfoot
  382. ^ self tag: 'tfoot'
  383. !
  384. th
  385. ^ self tag: 'th'
  386. !
  387. thead
  388. ^ self tag: 'thead'
  389. !
  390. time
  391. ^ self tag: 'time'
  392. !
  393. title
  394. ^ self tag: 'title'
  395. !
  396. tr
  397. ^ self tag: 'tr'
  398. !
  399. ul
  400. ^ self tag: 'ul'
  401. !
  402. ul: anObject
  403. ^ self ul with: anObject
  404. !
  405. video
  406. ^ self tag: 'video'
  407. ! !
  408. !HTMLCanvas class methodsFor: 'initialization'!
  409. initialize
  410. "Allow JS method calls for the jQuery object.
  411. See boot.js DNU handling."
  412. jQuery basicAt: 'allowJavaScriptCalls' put: true
  413. ! !
  414. !HTMLCanvas class methodsFor: 'instance creation'!
  415. onJQuery: aJQuery
  416. ^ self basicNew
  417. initializeFromJQuery: aJQuery;
  418. initialize;
  419. yourself
  420. ! !
  421. Object subclass: #HTMLSnippet
  422. instanceVariableNames: 'snippets'
  423. package: 'Canvas'!
  424. !HTMLSnippet commentStamp!
  425. My sole instance is the registry of html snippets.
  426. `HTMLSnippet current` is the public singleton instance.
  427. On startup, it scans the document for any html elements
  428. with `'data-snippet="foo"'` attribute and takes them off the document,
  429. remembering them in the store under the specified name.
  430. It also install method #foo into HTMLCanvas dynamically.
  431. Every html snippet should mark a 'caret', a place where contents
  432. can be inserted, by 'data-snippet="*"' (a special name for caret).
  433. For example:
  434. `<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>`
  435. defines a list element with a link inside; the link itself is marked as a caret.
  436. You can later issue
  437. `html menuelement href: '/foo'; with: 'A foo'`
  438. to insert the whole snippet and directly manipulate the caret, so it renders:
  439. `<li class='...'><a href='/foo'>A foo</a></li>`
  440. For a self-careting tags (not very useful, but you do not need to fill class etc.
  441. you can use
  442. `<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>`
  443. and in code later do:
  444. `html bar with: [ xxx ]`
  445. to render
  446. `<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>`!
  447. !HTMLSnippet methodsFor: 'accessing'!
  448. snippetAt: aString
  449. ^ self snippets at: aString
  450. !
  451. snippets
  452. ^ snippets ifNil: [ snippets := #{} ]
  453. ! !
  454. !HTMLSnippet methodsFor: 'initialization'!
  455. initializeFromJQuery: aJQuery
  456. "Finds and takes out all snippets out of aJQuery.
  457. Installs it into self."
  458. (self snippetsFromJQuery: aJQuery) do: [ :each |
  459. self installSnippetFromJQuery: each asJQuery ]
  460. ! !
  461. !HTMLSnippet methodsFor: 'method generation'!
  462. snippetAt: aString compile: anElement
  463. "Method generation for the snippet.
  464. The selector is aString, the method block uses anElement"
  465. ClassBuilder new
  466. installMethod: ([ :htmlReceiver | htmlReceiver snippet: anElement ]
  467. currySelf asCompiledMethod: aString)
  468. forClass: HTMLCanvas
  469. protocol: '**snippets'
  470. ! !
  471. !HTMLSnippet methodsFor: 'private'!
  472. snippetsFromJQuery: aJQuery
  473. ^ (aJQuery find: '[data-snippet]') toArray
  474. ! !
  475. !HTMLSnippet methodsFor: 'snippet installation'!
  476. installSnippetFromJQuery: element
  477. | name |
  478. name := element attr: 'data-snippet'.
  479. name = '*' ifFalse: [
  480. ('^\*' asRegexp test: name)
  481. ifTrue: [
  482. name := name allButFirst.
  483. element attr: 'data-snippet' put: '*' ]
  484. ifFalse: [
  485. element removeAttr: 'data-snippet' ].
  486. self snippetAt: name install: (element detach get: 0) ]
  487. !
  488. snippetAt: aString install: anElement
  489. self snippets at: aString put: anElement.
  490. self snippetAt: aString compile: anElement
  491. ! !
  492. HTMLSnippet class instanceVariableNames: 'current'!
  493. !HTMLSnippet class methodsFor: 'initialization'!
  494. ensureCurrent
  495. current ifNil: [
  496. current := super new
  497. initializeFromJQuery: document asJQuery;
  498. yourself ]
  499. !
  500. initialize
  501. super initialize.
  502. self isDOMAvailable ifTrue: [
  503. self ensureCurrent ]
  504. ! !
  505. !HTMLSnippet class methodsFor: 'instance creation'!
  506. current
  507. ^ current
  508. !
  509. isDOMAvailable
  510. < return typeof document !!== 'undefined' >
  511. !
  512. new
  513. self shouldNotImplement
  514. ! !
  515. Object subclass: #TagBrush
  516. instanceVariableNames: 'canvas element'
  517. package: 'Canvas'!
  518. !TagBrush commentStamp!
  519. I am a brush for building a single DOM element (which I hold onto).
  520. All tags but `<style>` are instances of me (see the `StyleBrush` class).
  521. ## API
  522. 1. Nesting
  523. Use `#with:` to nest tags. `#with:` can take aString, `TagBrush` instance, a `Widget` or block closure as parameter.
  524. Example: `aTag with: aString with: aCanvas div`
  525. 2. Events
  526. The `events` protocol contains all methods related to events (delegating event handling to jQuery).
  527. Example: `aTag onClick: [ window alert: 'clicked' ]`
  528. 3. Attributes
  529. The `attribute` protocol contains methods for attribute manipulation (delegating to jQuery too).
  530. Example: `aTag at: 'value' put: 'hello world'`
  531. 4. Raw access and jQuery
  532. The `#element` method can be used to access to JavaScript DOM element object.
  533. Example: `aTag element cssStyle`
  534. Use `#asJQuery` to access to the receiver converted into a jQuery object.
  535. Example: `aTag asJQuery css: 'color' value: 'red'`!
  536. !TagBrush methodsFor: 'accessing'!
  537. element
  538. ^ element
  539. ! !
  540. !TagBrush methodsFor: 'adding'!
  541. addBrush: aTagBrush
  542. self appendChild: aTagBrush element.
  543. ^ aTagBrush
  544. !
  545. append: anObject
  546. anObject appendToBrush: self
  547. !
  548. appendBlock: aBlock
  549. | root |
  550. root := canvas root.
  551. canvas root: self.
  552. aBlock value: canvas.
  553. canvas root: root
  554. !
  555. appendChild: anElement
  556. "In IE7 and IE8 appendChild fails on several node types. So we need to check"
  557. <var element=self['@element'];
  558. if (null == element.canHaveChildren || element.canHaveChildren) {
  559. element.appendChild(anElement);
  560. } else {
  561. element.text = String(element.text) + anElement.innerHTML;
  562. } >
  563. !
  564. appendString: aString
  565. self appendChild: (self createTextNodeFor: aString)
  566. !
  567. appendToBrush: aTagBrush
  568. aTagBrush addBrush: self
  569. !
  570. contents: anObject
  571. self
  572. empty;
  573. append: anObject
  574. !
  575. empty
  576. self asJQuery empty
  577. !
  578. with: anObject
  579. self append: anObject
  580. ! !
  581. !TagBrush methodsFor: 'attributes'!
  582. accesskey: aString
  583. self at: 'accesskey' put: aString
  584. !
  585. action: aString
  586. self at: 'action' put: aString
  587. !
  588. align: aString
  589. self at: 'align' put: aString
  590. !
  591. alt: aString
  592. self at: 'alt' put: aString
  593. !
  594. at: aString
  595. ^ self at: aString ifAbsent: [ Collection new errorNotFound ]
  596. !
  597. at: aString ifAbsent: aBlock
  598. <return self['@element'].hasAttribute(aString) ? self['@element'].getAttribute(aString) : aBlock._value()>
  599. !
  600. at: aString put: aValue
  601. <self['@element'].setAttribute(aString, aValue); return aValue>
  602. !
  603. class: aString
  604. <self['@element'].className = aString>
  605. !
  606. cols: aString
  607. self at: 'cols' put: aString
  608. !
  609. contenteditable: aString
  610. self at: 'contenteditable' put: aString
  611. !
  612. contextmenu: aString
  613. self at: 'contextmenu' put: aString
  614. !
  615. draggable: aString
  616. self at: 'draggable' put: aString
  617. !
  618. for: aString
  619. self at: 'for' put: aString
  620. !
  621. height: aString
  622. self at: 'height' put: aString
  623. !
  624. hidden
  625. self at: 'hidden' put: 'hidden'
  626. !
  627. href: aString
  628. self at: 'href' put: aString
  629. !
  630. id: aString
  631. self at: 'id' put: aString
  632. !
  633. media: aString
  634. self at: 'media' put: aString
  635. !
  636. method: aString
  637. self at: 'method' put: aString
  638. !
  639. name: aString
  640. self at: 'name' put: aString
  641. !
  642. placeholder: aString
  643. self at: 'placeholder' put: aString
  644. !
  645. rel: aString
  646. self at: 'rel' put: aString
  647. !
  648. removeAt: aString
  649. <self['@element'].removeAttribute(aString)>
  650. !
  651. rows: aString
  652. self at: 'rows' put: aString
  653. !
  654. src: aString
  655. self at: 'src' put: aString
  656. !
  657. style: aString
  658. self at: 'style' put: aString
  659. !
  660. tabindex: aNumber
  661. self at: 'tabindex' put: aNumber
  662. !
  663. target: aString
  664. self at: 'target' put: aString
  665. !
  666. title: aString
  667. self at: 'title' put: aString
  668. !
  669. type: aString
  670. self at: 'type' put: aString
  671. !
  672. valign: aString
  673. self at: 'valign' put: aString
  674. !
  675. value: aString
  676. self at: 'value' put: aString
  677. !
  678. width: aString
  679. self at: 'width' put: aString
  680. ! !
  681. !TagBrush methodsFor: 'converting'!
  682. asJQuery
  683. ^ self element asJQuery
  684. !
  685. asJQueryInContext: aContext
  686. ^ self element asJQueryInContext: aContext
  687. ! !
  688. !TagBrush methodsFor: 'events'!
  689. onBlur: aBlock
  690. self asJQuery bind: 'blur' do: aBlock
  691. !
  692. onChange: aBlock
  693. self asJQuery bind: 'change' do: aBlock
  694. !
  695. onClick: aBlock
  696. self asJQuery bind: 'click' do: aBlock
  697. !
  698. onDblClick: aBlock
  699. self asJQuery bind: 'dblclick' do: aBlock
  700. !
  701. onFocus: aBlock
  702. self asJQuery bind: 'focus' do: aBlock
  703. !
  704. onFocusIn: aBlock
  705. self asJQuery bind: 'focusin' do: aBlock
  706. !
  707. onFocusOut: aBlock
  708. self asJQuery bind: 'focusout' do: aBlock
  709. !
  710. onHover: aBlock
  711. self asJQuery bind: 'hover' do: aBlock
  712. !
  713. onKeyDown: aBlock
  714. self asJQuery bind: 'keydown' do: aBlock
  715. !
  716. onKeyPress: aBlock
  717. self asJQuery bind: 'keypress' do: aBlock
  718. !
  719. onKeyUp: aBlock
  720. self asJQuery bind: 'keyup' do: aBlock
  721. !
  722. onMouseDown: aBlock
  723. self asJQuery bind: 'mousedown' do: aBlock
  724. !
  725. onMouseEnter: aBlock
  726. self asJQuery bind: 'mouseenter' do: aBlock
  727. !
  728. onMouseLeave: aBlock
  729. self asJQuery bind: 'mouseleave' do: aBlock
  730. !
  731. onMouseMove: aBlock
  732. self asJQuery bind: 'mousemove' do: aBlock
  733. !
  734. onMouseOut: aBlock
  735. self asJQuery bind: 'mouseout' do: aBlock
  736. !
  737. onMouseOver: aBlock
  738. self asJQuery bind: 'mouseover' do: aBlock
  739. !
  740. onMouseUp: aBlock
  741. self asJQuery bind: 'mouseup' do: aBlock
  742. !
  743. onSelect: aBlock
  744. self asJQuery bind: 'select' do: aBlock
  745. !
  746. onSubmit: aBlock
  747. self asJQuery bind: 'submit' do: aBlock
  748. !
  749. onUnload: aBlock
  750. self asJQuery bind: 'unload' do: aBlock
  751. ! !
  752. !TagBrush methodsFor: 'initialization'!
  753. initializeFromJQuery: aJQuery canvas: aCanvas
  754. element := aJQuery get: 0.
  755. canvas := aCanvas
  756. !
  757. initializeFromString: aString canvas: aCanvas
  758. element := self createElementFor: aString.
  759. canvas := aCanvas
  760. ! !
  761. !TagBrush methodsFor: 'private'!
  762. appendDocumentFragment: anElement
  763. <var element=self['@element'].appendChild(anElement["@element"])>
  764. !
  765. createElementFor: aString
  766. <return document.createElement(String(aString))>
  767. !
  768. createTextNodeFor: aString
  769. <return document.createTextNode(String(aString))>
  770. ! !
  771. !TagBrush class methodsFor: 'instance creation'!
  772. fromJQuery: aJQuery canvas: aCanvas
  773. ^ self new
  774. initializeFromJQuery: aJQuery canvas: aCanvas;
  775. yourself
  776. !
  777. fromString: aString canvas: aCanvas
  778. ^ self new
  779. initializeFromString: aString canvas: aCanvas;
  780. yourself
  781. ! !
  782. InterfacingObject subclass: #Widget
  783. instanceVariableNames: ''
  784. package: 'Canvas'!
  785. !Widget commentStamp!
  786. I am a presenter building HTML. Subclasses are typically reusable components.
  787. ## API
  788. Use `#renderContentOn:` to build HTML. (See `HTMLCanvas` and `TagBrush` classes for more about building HTML).
  789. To add a widget to the page, the convenience method `#appendToJQuery:` is very useful.
  790. Exemple:
  791. Counter new appendToJQuery: 'body' asJQuery!
  792. !Widget methodsFor: 'adding'!
  793. appendToBrush: aTagBrush
  794. self appendToJQuery: aTagBrush asJQuery
  795. !
  796. appendToJQuery: aJQuery
  797. self renderOn: (HTMLCanvas onJQuery: aJQuery)
  798. ! !
  799. !Widget methodsFor: 'rendering'!
  800. renderOn: html
  801. self
  802. ! !
  803. !Widget class methodsFor: 'helios'!
  804. heliosClass
  805. ^ 'widget'
  806. ! !
  807. !BlockClosure methodsFor: '*Canvas'!
  808. appendToBrush: aTagBrush
  809. aTagBrush appendBlock: self
  810. !
  811. appendToJQuery: aJQuery
  812. self value: (HTMLCanvas onJQuery: aJQuery)
  813. ! !
  814. !CharacterArray methodsFor: '*Canvas'!
  815. asSnippet
  816. ^ HTMLSnippet current snippetAt: self asString
  817. ! !
  818. !JSObjectProxy methodsFor: '*Canvas'!
  819. asJQuery
  820. <return jQuery(self['@jsObject'])>
  821. !
  822. asJQueryInContext: aContext
  823. <return jQuery(self['@jsObject'], aContext)>
  824. ! !
  825. !Object methodsFor: '*Canvas'!
  826. appendToBrush: aTagBrush
  827. aTagBrush append: self asString
  828. !
  829. appendToJQuery: aJQuery
  830. aJQuery append: self asString
  831. ! !
  832. !String methodsFor: '*Canvas'!
  833. appendToBrush: aTagBrush
  834. aTagBrush appendString: self
  835. !
  836. appendToJQuery: aJQuery
  837. aJQuery append: self
  838. !
  839. asJQuery
  840. <return jQuery(String(self))>
  841. !
  842. asJQueryInContext: aContext
  843. <return jQuery(String(self), aContext)>
  844. ! !