Canvas.st 18 KB

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