Web.st 18 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181
  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. Smalltalk optOut: jQuery
  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. asJQuery
  818. ^ {self} asJQuery
  819. !
  820. asJQueryInContext: aContext
  821. ^ {self} asJQueryInContext: aContext
  822. ! !
  823. !CharacterArray methodsFor: '*Web'!
  824. asSnippet
  825. ^ HTMLSnippet current snippetAt: self asString
  826. ! !
  827. !JSObjectProxy methodsFor: '*Web'!
  828. asJQuery
  829. <return jQuery(self['@jsObject'])>
  830. !
  831. asJQueryInContext: aContext
  832. <return jQuery(self['@jsObject'], aContext)>
  833. ! !
  834. !Object methodsFor: '*Web'!
  835. appendToBrush: aTagBrush
  836. aTagBrush append: self asString
  837. !
  838. appendToJQuery: aJQuery
  839. aJQuery append: self asString
  840. !
  841. asJQuery
  842. <return jQuery(self)>
  843. !
  844. asJQueryInContext: aContext
  845. <return jQuery(self, aContext)>
  846. !
  847. postMessageTo: aFrame
  848. ^ self postMessageTo: aFrame origin: '*'
  849. !
  850. postMessageTo: aFrame origin: aString
  851. <return aFrame.postMessage(self, aString)>
  852. ! !
  853. !String methodsFor: '*Web'!
  854. appendToBrush: aTagBrush
  855. aTagBrush appendString: self
  856. !
  857. appendToJQuery: aJQuery
  858. aJQuery append: self
  859. !
  860. asJQuery
  861. <return jQuery(String(self))>
  862. !
  863. asJQueryInContext: aContext
  864. <return jQuery(String(self), aContext)>
  865. ! !