Web.st 17 KB

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