2
0

Canvas.st 18 KB

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