Canvas.st 17 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132
  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: 'instance creation'!
  409. onJQuery: aJQuery
  410. ^ self basicNew
  411. initializeFromJQuery: aJQuery;
  412. initialize;
  413. yourself
  414. ! !
  415. Object subclass: #HTMLSnippet
  416. instanceVariableNames: 'snippets'
  417. package: 'Canvas'!
  418. !HTMLSnippet commentStamp!
  419. My sole instance is the registry of html snippets.
  420. `HTMLSnippet current` is the public singleton instance.
  421. On startup, it scans the document for any html elements
  422. with `'data-snippet="foo"'` attribute and takes them off the document,
  423. remembering them in the store under the specified name.
  424. It also install method #foo into HTMLCanvas dynamically.
  425. Every html snippet should mark a 'caret', a place where contents
  426. can be inserted, by 'data-snippet="*"' (a special name for caret).
  427. For example:
  428. `<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>`
  429. defines a list element with a link inside; the link itself is marked as a caret.
  430. You can later issue
  431. `html menuelement href: '/foo'; with: 'A foo'`
  432. to insert the whole snippet and directly manipulate the caret, so it renders:
  433. `<li class='...'><a href='/foo'>A foo</a></li>`
  434. For a self-careting tags (not very useful, but you do not need to fill class etc.
  435. you can use
  436. `<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>`
  437. and in code later do:
  438. `html bar with: [ xxx ]`
  439. to render
  440. `<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>`!
  441. !HTMLSnippet methodsFor: 'accessing'!
  442. snippetAt: aString
  443. ^ self snippets at: aString
  444. !
  445. snippets
  446. ^ snippets ifNil: [ snippets := #{} ]
  447. ! !
  448. !HTMLSnippet methodsFor: 'initialization'!
  449. initializeFromJQuery: aJQuery
  450. "Finds and takes out all snippets out of aJQuery.
  451. Installs it into self."
  452. (self snippetsFromJQuery: aJQuery) do: [ :each |
  453. self installSnippetFromJQuery: each asJQuery ]
  454. ! !
  455. !HTMLSnippet methodsFor: 'method generation'!
  456. snippetAt: aString compile: anElement
  457. "Method generation for the snippet.
  458. The selector is aString, the method block uses anElement"
  459. ClassBuilder new
  460. installMethod: ([ :htmlReceiver | htmlReceiver snippet: anElement ]
  461. currySelf asCompiledMethod: aString)
  462. forClass: HTMLCanvas
  463. protocol: '**snippets'
  464. ! !
  465. !HTMLSnippet methodsFor: 'private'!
  466. snippetsFromJQuery: aJQuery
  467. ^ (aJQuery find: '[data-snippet]') toArray
  468. ! !
  469. !HTMLSnippet methodsFor: 'snippet installation'!
  470. installSnippetFromJQuery: element
  471. | name |
  472. name := element attr: 'data-snippet'.
  473. name = '*' ifFalse: [
  474. ('^\*' asRegexp test: name)
  475. ifTrue: [
  476. name := name allButFirst.
  477. element attr: 'data-snippet' put: '*' ]
  478. ifFalse: [
  479. element removeAttr: 'data-snippet' ].
  480. self snippetAt: name install: (element detach get: 0) ]
  481. !
  482. snippetAt: aString install: anElement
  483. self snippets at: aString put: anElement.
  484. self snippetAt: aString compile: anElement
  485. ! !
  486. HTMLSnippet class instanceVariableNames: 'current'!
  487. !HTMLSnippet class methodsFor: 'initialization'!
  488. ensureCurrent
  489. current ifNil: [
  490. current := super new
  491. initializeFromJQuery: document asJQuery;
  492. yourself ]
  493. !
  494. initialize
  495. super initialize.
  496. self isDOMAvailable ifTrue: [
  497. self ensureCurrent ]
  498. ! !
  499. !HTMLSnippet class methodsFor: 'instance creation'!
  500. current
  501. ^ current
  502. !
  503. isDOMAvailable
  504. < return typeof document !!== 'undefined' >
  505. !
  506. new
  507. self shouldNotImplement
  508. ! !
  509. Object subclass: #TagBrush
  510. instanceVariableNames: 'canvas element'
  511. package: 'Canvas'!
  512. !TagBrush commentStamp!
  513. I am a brush for building a single DOM element (which I hold onto).
  514. All tags but `<style>` are instances of me (see the `StyleBrush` class).
  515. ## API
  516. 1. Nesting
  517. Use `#with:` to nest tags. `#with:` can take aString, `TagBrush` instance, a `Widget` or block closure as parameter.
  518. Example: `aTag with: aString with: aCanvas div`
  519. 2. Events
  520. The `events` protocol contains all methods related to events (delegating event handling to jQuery).
  521. Example: `aTag onClick: [ window alert: 'clicked' ]`
  522. 3. Attributes
  523. The `attribute` protocol contains methods for attribute manipulation (delegating to jQuery too).
  524. Example: `aTag at: 'value' put: 'hello world'`
  525. 4. Raw access and jQuery
  526. The `#element` method can be used to access to JavaScript DOM element object.
  527. Example: `aTag element cssStyle`
  528. Use `#asJQuery` to access to the receiver converted into a jQuery object.
  529. Example: `aTag asJQuery css: 'color' value: 'red'`!
  530. !TagBrush methodsFor: 'accessing'!
  531. element
  532. ^ element
  533. ! !
  534. !TagBrush methodsFor: 'adding'!
  535. addBrush: aTagBrush
  536. self appendChild: aTagBrush element.
  537. ^ aTagBrush
  538. !
  539. append: anObject
  540. anObject appendToBrush: self
  541. !
  542. appendBlock: aBlock
  543. | root |
  544. root := canvas root.
  545. canvas root: self.
  546. aBlock value: canvas.
  547. canvas root: root
  548. !
  549. appendChild: anElement
  550. "In IE7 and IE8 appendChild fails on several node types. So we need to check"
  551. <var element=self['@element'];
  552. if (null == element.canHaveChildren || element.canHaveChildren) {
  553. element.appendChild(anElement);
  554. } else {
  555. element.text = String(element.text) + anElement.innerHTML;
  556. } >
  557. !
  558. appendString: aString
  559. self appendChild: (self createTextNodeFor: aString)
  560. !
  561. appendToBrush: aTagBrush
  562. aTagBrush addBrush: self
  563. !
  564. contents: anObject
  565. self
  566. empty;
  567. append: anObject
  568. !
  569. empty
  570. self asJQuery empty
  571. !
  572. with: anObject
  573. self append: anObject
  574. ! !
  575. !TagBrush methodsFor: 'attributes'!
  576. accesskey: aString
  577. self at: 'accesskey' put: aString
  578. !
  579. action: aString
  580. self at: 'action' put: aString
  581. !
  582. align: aString
  583. self at: 'align' put: aString
  584. !
  585. alt: aString
  586. self at: 'alt' put: aString
  587. !
  588. at: aString
  589. ^ self at: aString ifAbsent: [ Collection new errorNotFound ]
  590. !
  591. at: aString ifAbsent: aBlock
  592. <return self['@element'].hasAttribute(aString) ? self['@element'].getAttribute(aString) : aBlock._value()>
  593. !
  594. at: aString put: aValue
  595. <self['@element'].setAttribute(aString, aValue); return aValue>
  596. !
  597. class: aString
  598. <self['@element'].className = aString>
  599. !
  600. cols: aString
  601. self at: 'cols' put: aString
  602. !
  603. contenteditable: aString
  604. self at: 'contenteditable' put: aString
  605. !
  606. contextmenu: aString
  607. self at: 'contextmenu' put: aString
  608. !
  609. draggable: aString
  610. self at: 'draggable' put: aString
  611. !
  612. for: aString
  613. self at: 'for' put: aString
  614. !
  615. height: aString
  616. self at: 'height' put: aString
  617. !
  618. hidden
  619. self at: 'hidden' put: 'hidden'
  620. !
  621. href: aString
  622. self at: 'href' put: aString
  623. !
  624. id: aString
  625. self at: 'id' put: aString
  626. !
  627. media: aString
  628. self at: 'media' put: aString
  629. !
  630. method: aString
  631. self at: 'method' put: aString
  632. !
  633. name: aString
  634. self at: 'name' put: aString
  635. !
  636. placeholder: aString
  637. self at: 'placeholder' put: aString
  638. !
  639. rel: aString
  640. self at: 'rel' put: aString
  641. !
  642. removeAt: aString
  643. <self['@element'].removeAttribute(aString)>
  644. !
  645. rows: aString
  646. self at: 'rows' put: aString
  647. !
  648. src: aString
  649. self at: 'src' put: aString
  650. !
  651. style: aString
  652. self at: 'style' put: aString
  653. !
  654. tabindex: aNumber
  655. self at: 'tabindex' put: aNumber
  656. !
  657. target: aString
  658. self at: 'target' put: aString
  659. !
  660. title: aString
  661. self at: 'title' put: aString
  662. !
  663. type: aString
  664. self at: 'type' put: aString
  665. !
  666. valign: aString
  667. self at: 'valign' put: aString
  668. !
  669. value: aString
  670. self at: 'value' put: aString
  671. !
  672. width: aString
  673. self at: 'width' put: aString
  674. ! !
  675. !TagBrush methodsFor: 'converting'!
  676. asJQuery
  677. ^ self element asJQuery
  678. ! !
  679. !TagBrush methodsFor: 'events'!
  680. onBlur: aBlock
  681. self asJQuery bind: 'blur' do: aBlock
  682. !
  683. onChange: aBlock
  684. self asJQuery bind: 'change' do: aBlock
  685. !
  686. onClick: aBlock
  687. self asJQuery bind: 'click' do: aBlock
  688. !
  689. onDblClick: aBlock
  690. self asJQuery bind: 'dblclick' do: aBlock
  691. !
  692. onFocus: aBlock
  693. self asJQuery bind: 'focus' do: aBlock
  694. !
  695. onFocusIn: aBlock
  696. self asJQuery bind: 'focusin' do: aBlock
  697. !
  698. onFocusOut: aBlock
  699. self asJQuery bind: 'focusout' do: aBlock
  700. !
  701. onHover: aBlock
  702. self asJQuery bind: 'hover' do: aBlock
  703. !
  704. onKeyDown: aBlock
  705. self asJQuery bind: 'keydown' do: aBlock
  706. !
  707. onKeyPress: aBlock
  708. self asJQuery bind: 'keypress' do: aBlock
  709. !
  710. onKeyUp: aBlock
  711. self asJQuery bind: 'keyup' do: aBlock
  712. !
  713. onMouseDown: aBlock
  714. self asJQuery bind: 'mousedown' do: aBlock
  715. !
  716. onMouseEnter: aBlock
  717. self asJQuery bind: 'mouseenter' do: aBlock
  718. !
  719. onMouseLeave: aBlock
  720. self asJQuery bind: 'mouseleave' do: aBlock
  721. !
  722. onMouseMove: aBlock
  723. self asJQuery bind: 'mousemove' do: aBlock
  724. !
  725. onMouseOut: aBlock
  726. self asJQuery bind: 'mouseout' do: aBlock
  727. !
  728. onMouseOver: aBlock
  729. self asJQuery bind: 'mouseover' do: aBlock
  730. !
  731. onMouseUp: aBlock
  732. self asJQuery bind: 'mouseup' do: aBlock
  733. !
  734. onSelect: aBlock
  735. self asJQuery bind: 'select' do: aBlock
  736. !
  737. onSubmit: aBlock
  738. self asJQuery bind: 'submit' do: aBlock
  739. !
  740. onUnload: aBlock
  741. self asJQuery bind: 'unload' do: aBlock
  742. ! !
  743. !TagBrush methodsFor: 'initialization'!
  744. initializeFromJQuery: aJQuery canvas: aCanvas
  745. element := aJQuery get: 0.
  746. canvas := aCanvas
  747. !
  748. initializeFromString: aString canvas: aCanvas
  749. element := self createElementFor: aString.
  750. canvas := aCanvas
  751. ! !
  752. !TagBrush methodsFor: 'private'!
  753. appendDocumentFragment: anElement
  754. <var element=self['@element'].appendChild(anElement["@element"])>
  755. !
  756. createElementFor: aString
  757. <return document.createElement(String(aString))>
  758. !
  759. createTextNodeFor: aString
  760. <return document.createTextNode(String(aString))>
  761. ! !
  762. !TagBrush class methodsFor: 'instance creation'!
  763. fromJQuery: aJQuery canvas: aCanvas
  764. ^ self new
  765. initializeFromJQuery: aJQuery canvas: aCanvas;
  766. yourself
  767. !
  768. fromString: aString canvas: aCanvas
  769. ^ self new
  770. initializeFromString: aString canvas: aCanvas;
  771. yourself
  772. ! !
  773. InterfacingObject subclass: #Widget
  774. instanceVariableNames: ''
  775. package: 'Canvas'!
  776. !Widget commentStamp!
  777. I am a presenter building HTML. Subclasses are typically reusable components.
  778. ## API
  779. Use `#renderContentOn:` to build HTML. (See `HTMLCanvas` and `TagBrush` classes for more about building HTML).
  780. To add a widget to the page, the convenience method `#appendToJQuery:` is very useful.
  781. Exemple:
  782. Counter new appendToJQuery: 'body' asJQuery!
  783. !Widget methodsFor: 'adding'!
  784. appendToBrush: aTagBrush
  785. self appendToJQuery: aTagBrush asJQuery
  786. !
  787. appendToJQuery: aJQuery
  788. self renderOn: (HTMLCanvas onJQuery: aJQuery)
  789. ! !
  790. !Widget methodsFor: 'rendering'!
  791. renderOn: html
  792. self
  793. ! !
  794. !Widget class methodsFor: 'helios'!
  795. heliosClass
  796. ^ 'widget'
  797. ! !
  798. !Object methodsFor: '*Canvas'!
  799. appendToBrush: aTagBrush
  800. aTagBrush append: self asString
  801. !
  802. appendToJQuery: aJQuery
  803. aJQuery append: self asString
  804. ! !
  805. !BlockClosure methodsFor: '*Canvas'!
  806. appendToBrush: aTagBrush
  807. aTagBrush appendBlock: self
  808. !
  809. appendToJQuery: aJQuery
  810. self value: (HTMLCanvas onJQuery: aJQuery)
  811. ! !
  812. !CharacterArray methodsFor: '*Canvas'!
  813. asSnippet
  814. ^ HTMLSnippet current snippetAt: self asString
  815. ! !
  816. !String methodsFor: '*Canvas'!
  817. appendToBrush: aTagBrush
  818. aTagBrush appendString: self
  819. !
  820. appendToJQuery: aJQuery
  821. aJQuery append: self
  822. !
  823. asJQuery
  824. <return jQuery(String(self))>
  825. ! !
  826. !JSObjectProxy methodsFor: '*Canvas'!
  827. asJQuery
  828. <return jQuery(self['@jsObject'])>
  829. ! !