1
0

Canvas.st 16 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124
  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. ^TagBrush fromString: aString canvas: self
  257. !
  258. noscript
  259. ^self tag: 'noscript'
  260. !
  261. object
  262. ^self tag: 'object'
  263. !
  264. ol
  265. ^self tag: 'ol'
  266. !
  267. ol: anObject
  268. ^self ol with: anObject
  269. !
  270. optgroup
  271. ^self tag: 'optgroup'
  272. !
  273. option
  274. ^self tag: 'option'
  275. !
  276. output
  277. ^self tag: 'output'
  278. !
  279. p
  280. ^self tag: 'p'
  281. !
  282. p: anObject
  283. ^self p with: anObject
  284. !
  285. param
  286. ^self tag: 'param'
  287. !
  288. pre
  289. ^self tag: 'pre'
  290. !
  291. progress
  292. ^self tag: 'progress'
  293. !
  294. script
  295. ^self tag: 'script'
  296. !
  297. section
  298. ^self tag: 'section'
  299. !
  300. select
  301. ^self tag: 'select'
  302. !
  303. small
  304. ^self tag: 'small'
  305. !
  306. source
  307. ^self tag: 'source'
  308. !
  309. span
  310. ^self tag: 'span'
  311. !
  312. span: anObject
  313. ^self span with: anObject
  314. !
  315. strong
  316. ^self tag: 'strong'
  317. !
  318. strong: anObject
  319. ^self strong with: anObject
  320. !
  321. style
  322. ^ root addBrush: (StyleTag canvas: self)
  323. !
  324. style: aString
  325. ^ self style with: aString; yourself
  326. !
  327. sub
  328. ^self tag: 'sub'
  329. !
  330. summary
  331. ^self tag: 'summary'
  332. !
  333. sup
  334. ^self tag: 'sup'
  335. !
  336. table
  337. ^self tag: 'table'
  338. !
  339. tag: aString
  340. ^root addBrush: (self newTag: aString)
  341. !
  342. tbody
  343. ^self tag: 'tbody'
  344. !
  345. td
  346. ^self tag: 'td'
  347. !
  348. textarea
  349. ^self tag: 'textarea'
  350. !
  351. tfoot
  352. ^self tag: 'tfoot'
  353. !
  354. th
  355. ^self tag: 'th'
  356. !
  357. thead
  358. ^self tag: 'thead'
  359. !
  360. time
  361. ^self tag: 'time'
  362. !
  363. title
  364. ^self tag: 'title'
  365. !
  366. tr
  367. ^self tag: 'tr'
  368. !
  369. ul
  370. ^self tag: 'ul'
  371. !
  372. ul: anObject
  373. ^self ul with: anObject
  374. !
  375. video
  376. ^self tag: 'video'
  377. ! !
  378. !HTMLCanvas class methodsFor: 'instance creation'!
  379. browserVersion
  380. ^(jQuery at: #browser) version
  381. !
  382. isMSIE
  383. ^((jQuery at: #browser) at: #msie) notNil
  384. !
  385. isMozilla
  386. ^((jQuery at: #browser) at: #mozilla) notNil
  387. !
  388. isOpera
  389. ^((jQuery at: #browser) at: #opera) notNil
  390. !
  391. isWebkit
  392. ^((jQuery at: #browser) at: #webkit) notNil
  393. !
  394. onJQuery: aJQuery
  395. ^self basicNew
  396. initializeFromJQuery: aJQuery;
  397. initialize;
  398. yourself
  399. ! !
  400. Object subclass: #HTMLSnippet
  401. instanceVariableNames: 'snippets'
  402. package: 'Canvas'!
  403. !HTMLSnippet commentStamp!
  404. My sole instance is the registry of html snippets.
  405. `HTMLSnippet current` is the public singleton instance.
  406. On startup, it scans the document for any html elements
  407. with `'data-snippet="foo"'` attribute and takes them off the document,
  408. remembering them in the store under the specified name.
  409. It also install method #foo into HTMLCanvas dynamically.
  410. Every html snippet should mark a 'caret', a place where contents
  411. can be inserted, by 'data-snippet="*"' (a special name for caret).
  412. For example:
  413. `<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>`
  414. defines a list element with a link inside; the link itself is marked as a caret.
  415. You can later issue
  416. `html menuelement href: '/foo'; with: 'A foo'`
  417. to insert the whole snippet and directly manipulate the caret, so it renders:
  418. `<li class='...'><a href='/foo'>A foo</a></li>`
  419. For a self-careting tags (not very useful, but you do not need to fill class etc.
  420. you can use
  421. `<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>`
  422. and in code later do:
  423. `html bar with: [ xxx ]`
  424. to render
  425. `<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>`!
  426. !HTMLSnippet methodsFor: 'accessing'!
  427. snippetAt: aString
  428. ^ self snippets at: aString
  429. !
  430. snippets
  431. ^snippets ifNil: [ snippets := #{} ]
  432. ! !
  433. !HTMLSnippet methodsFor: 'initialization'!
  434. initializeFromJQuery: aJQuery
  435. "Finds and takes out all snippets out of aJQuery.
  436. Installs it into self."
  437. (self snippetsFromJQuery: aJQuery) do: [ :each |
  438. self installSnippetFromJQuery: each asJQuery ]
  439. ! !
  440. !HTMLSnippet methodsFor: 'method generation'!
  441. snippetAt: aString compile: anElement
  442. "Method generation for the snippet.
  443. The selector is aString, the method block uses anElement"
  444. ClassBuilder new
  445. installMethod: ([ :htmlReceiver | htmlReceiver snippet: anElement ]
  446. currySelf asCompiledMethod: aString)
  447. forClass: HTMLCanvas
  448. category: '**snippets'
  449. ! !
  450. !HTMLSnippet methodsFor: 'private'!
  451. snippetsFromJQuery: aJQuery
  452. ^ (aJQuery find: '[data-snippet]') toArray
  453. ! !
  454. !HTMLSnippet methodsFor: 'snippet installation'!
  455. installSnippetFromJQuery: element
  456. | name |
  457. name := element attr: 'data-snippet'.
  458. name = '*' ifFalse: [
  459. ('^\*' asRegexp test: name)
  460. ifTrue: [
  461. name := name allButFirst.
  462. element attr: 'data-snippet' put: '*' ]
  463. ifFalse: [
  464. element removeAttr: 'data-snippet' ].
  465. self snippetAt: name install: (element detach get: 0) ]
  466. !
  467. snippetAt: aString install: anElement
  468. self snippets at: aString put: anElement.
  469. self snippetAt: aString compile: anElement
  470. ! !
  471. HTMLSnippet class instanceVariableNames: 'current'!
  472. !HTMLSnippet class methodsFor: 'initialization'!
  473. ensureCurrent
  474. current ifNil: [
  475. current := super new
  476. initializeFromJQuery: document asJQuery;
  477. yourself ]
  478. !
  479. initialize
  480. super initialize.
  481. self isDOMAvailable ifTrue: [
  482. self ensureCurrent ]
  483. ! !
  484. !HTMLSnippet class methodsFor: 'instance creation'!
  485. current
  486. ^ current
  487. !
  488. isDOMAvailable
  489. < return typeof document !!== 'undefined' >
  490. !
  491. new
  492. self shouldNotImplement
  493. ! !
  494. Object subclass: #TagBrush
  495. instanceVariableNames: 'canvas element'
  496. package: 'Canvas'!
  497. !TagBrush commentStamp!
  498. I am a brush for building a single DOM element (which I hold onto).
  499. All tags but `<style>` are instances of me (see the `StyleBrush` class).
  500. ## API
  501. 1. Nesting
  502. Use `#with:` to nest tags. `#with:` can take aString, `TagBrush` instance, a `Widget` or block closure as parameter.
  503. Example: `aTag with: aString with: aCanvas div`
  504. 2. Events
  505. The `events` protocol contains all methods related to events (delegating event handling to jQuery).
  506. Example: `aTag onClick: [ window alert: 'clicked' ]`
  507. 3. Attributes
  508. The `attribute` protocol contains methods for attribute manipulation (delegating to jQuery too).
  509. Example: `aTag at: 'value' put: 'hello world'`
  510. 4. Raw access and jQuery
  511. The `#element` method can be used to access to JavaScript DOM element object.
  512. Example: `aTag element cssStyle`
  513. Use `#asJQuery` to access to the receiver converted into a jQuery object.
  514. Example: `aTag asJQuery css: 'color' value: 'red'`!
  515. !TagBrush methodsFor: 'accessing'!
  516. element
  517. ^element
  518. ! !
  519. !TagBrush methodsFor: 'adding'!
  520. addBrush: aTagBrush
  521. self appendChild: aTagBrush element.
  522. ^aTagBrush
  523. !
  524. append: anObject
  525. anObject appendToBrush: self
  526. !
  527. appendBlock: aBlock
  528. | root |
  529. root := canvas root.
  530. canvas root: self.
  531. aBlock value: canvas.
  532. canvas root: root
  533. !
  534. appendChild: anElement
  535. "In IE7 and IE8 appendChild fails on several node types. So we need to check"
  536. <var element=self['@element'];
  537. if (null == element.canHaveChildren || element.canHaveChildren) {
  538. element.appendChild(anElement);
  539. } else {
  540. element.text = String(element.text) + anElement.innerHTML;
  541. } >
  542. !
  543. appendString: aString
  544. self appendChild: (self createTextNodeFor: aString)
  545. !
  546. appendToBrush: aTagBrush
  547. aTagBrush addBrush: self
  548. !
  549. contents: anObject
  550. self
  551. empty;
  552. append: anObject
  553. !
  554. empty
  555. self asJQuery empty
  556. !
  557. with: anObject
  558. self append: anObject
  559. ! !
  560. !TagBrush methodsFor: 'attributes'!
  561. accesskey: aString
  562. self at: 'accesskey' put: aString
  563. !
  564. action: aString
  565. self at: 'action' put: aString
  566. !
  567. align: aString
  568. self at: 'align' put: aString
  569. !
  570. alt: aString
  571. self at: 'alt' put: aString
  572. !
  573. at: aString put: aValue
  574. <self['@element'].setAttribute(aString, aValue)>
  575. !
  576. class: aString
  577. <self['@element'].className = aString>
  578. !
  579. cols: aString
  580. self at: 'cols' put: aString
  581. !
  582. contenteditable: aString
  583. self at: 'contenteditable' put: aString
  584. !
  585. contextmenu: aString
  586. self at: 'contextmenu' put: aString
  587. !
  588. draggable: aString
  589. self at: 'draggable' put: aString
  590. !
  591. for: aString
  592. self at: 'for' put: aString
  593. !
  594. height: aString
  595. self at: 'height' put: aString
  596. !
  597. hidden
  598. self at: 'hidden' put: 'hidden'
  599. !
  600. href: aString
  601. self at: 'href' put: aString
  602. !
  603. id: aString
  604. self at: 'id' put: aString
  605. !
  606. media: aString
  607. self at: 'media' put: aString
  608. !
  609. method: aString
  610. self at: 'method' put: aString
  611. !
  612. name: aString
  613. self at: 'name' put: aString
  614. !
  615. placeholder: aString
  616. self at: 'placeholder' put: aString
  617. !
  618. rel: aString
  619. self at: 'rel' put: aString
  620. !
  621. removeAt: aString
  622. <self['@element'].removeAttribute(aString)>
  623. !
  624. rows: aString
  625. self at: 'rows' put: aString
  626. !
  627. src: aString
  628. self at: 'src' put: aString
  629. !
  630. style: aString
  631. self at: 'style' put: aString
  632. !
  633. tabindex: aNumber
  634. self at: 'tabindex' put: aNumber
  635. !
  636. target: aString
  637. self at: 'target' put: aString
  638. !
  639. title: aString
  640. self at: 'title' put: aString
  641. !
  642. type: aString
  643. self at: 'type' put: aString
  644. !
  645. valign: aString
  646. self at: 'valign' put: aString
  647. !
  648. value: aString
  649. self at: 'value' put: aString
  650. !
  651. width: aString
  652. self at: 'width' put: aString
  653. ! !
  654. !TagBrush methodsFor: 'converting'!
  655. asJQuery
  656. ^window jQuery: self element
  657. ! !
  658. !TagBrush methodsFor: 'events'!
  659. onBlur: aBlock
  660. self asJQuery bind: 'blur' do: aBlock
  661. !
  662. onChange: aBlock
  663. self asJQuery bind: 'change' do: aBlock
  664. !
  665. onClick: aBlock
  666. self asJQuery bind: 'click' do: aBlock
  667. !
  668. onDblClick: aBlock
  669. self asJQuery bind: 'dblclick' do: aBlock
  670. !
  671. onFocus: aBlock
  672. self asJQuery bind: 'focus' do: aBlock
  673. !
  674. onFocusIn: aBlock
  675. self asJQuery bind: 'focusin' do: aBlock
  676. !
  677. onFocusOut: aBlock
  678. self asJQuery bind: 'focusout' do: aBlock
  679. !
  680. onHover: aBlock
  681. self asJQuery bind: 'hover' do: aBlock
  682. !
  683. onKeyDown: aBlock
  684. self asJQuery bind: 'keydown' do: aBlock
  685. !
  686. onKeyPress: aBlock
  687. self asJQuery bind: 'keypress' do: aBlock
  688. !
  689. onKeyUp: aBlock
  690. self asJQuery bind: 'keyup' do: aBlock
  691. !
  692. onMouseDown: aBlock
  693. self asJQuery bind: 'mousedown' do: aBlock
  694. !
  695. onMouseEnter: aBlock
  696. self asJQuery bind: 'mouseenter' do: aBlock
  697. !
  698. onMouseLeave: aBlock
  699. self asJQuery bind: 'mouseleave' do: aBlock
  700. !
  701. onMouseMove: aBlock
  702. self asJQuery bind: 'mousemove' do: aBlock
  703. !
  704. onMouseOut: aBlock
  705. self asJQuery bind: 'mouseout' do: aBlock
  706. !
  707. onMouseOver: aBlock
  708. self asJQuery bind: 'mouseover' do: aBlock
  709. !
  710. onMouseUp: aBlock
  711. self asJQuery bind: 'mouseup' do: aBlock
  712. !
  713. onSelect: aBlock
  714. self asJQuery bind: 'select' do: aBlock
  715. !
  716. onSubmit: aBlock
  717. self asJQuery bind: 'submit' do: aBlock
  718. !
  719. onUnload: aBlock
  720. self asJQuery bind: 'unload' do: aBlock
  721. ! !
  722. !TagBrush methodsFor: 'initialization'!
  723. initializeFromJQuery: aJQuery canvas: aCanvas
  724. element := aJQuery get: 0.
  725. canvas := aCanvas
  726. !
  727. initializeFromString: aString canvas: aCanvas
  728. element := self createElementFor: aString.
  729. canvas := aCanvas
  730. ! !
  731. !TagBrush methodsFor: 'private'!
  732. createElementFor: aString
  733. <return document.createElement(String(aString))>
  734. !
  735. createTextNodeFor: aString
  736. <return document.createTextNode(String(aString))>
  737. ! !
  738. !TagBrush class methodsFor: 'instance creation'!
  739. fromJQuery: aJQuery canvas: aCanvas
  740. ^self new
  741. initializeFromJQuery: aJQuery canvas: aCanvas;
  742. yourself
  743. !
  744. fromString: aString canvas: aCanvas
  745. ^self new
  746. initializeFromString: aString canvas: aCanvas;
  747. yourself
  748. ! !
  749. TagBrush subclass: #StyleTag
  750. instanceVariableNames: 'canvas element'
  751. package: 'Canvas'!
  752. !StyleTag commentStamp!
  753. I'm a `<style>` tag use to inline CSS or load a stylesheet.
  754. ## Motivation
  755. The need for a specific class comes from Internet Explorer compatibility issues.!
  756. !StyleTag methodsFor: 'adding'!
  757. with: aString
  758. HTMLCanvas isMSIE
  759. ifTrue: [self element styleSheet cssText: aString ]
  760. ifFalse: [super with: aString ].
  761. ! !
  762. !StyleTag class methodsFor: 'instance creation'!
  763. canvas: aCanvas
  764. ^self new
  765. initializeFromString: 'style' canvas: aCanvas;
  766. yourself
  767. ! !
  768. Object subclass: #Widget
  769. instanceVariableNames: ''
  770. package: 'Canvas'!
  771. !Widget commentStamp!
  772. I am a presenter building HTML. Subclasses are typically reusable components.
  773. ## API
  774. Use `#renderContentOn:` to build HTML. (See `HTMLCanvas` and `TagBrush` classes for more about building HTML).
  775. To add a widget to the page, the convenience method `#appendToJQuery:` is very useful.
  776. Exemple:
  777. Counter new appendToJQuery: 'body' asJQuery!
  778. !Widget methodsFor: 'adding'!
  779. appendToBrush: aTagBrush
  780. self appendToJQuery: aTagBrush asJQuery
  781. !
  782. appendToJQuery: aJQuery
  783. self renderOn: (HTMLCanvas onJQuery: aJQuery)
  784. ! !
  785. !Widget methodsFor: 'rendering'!
  786. renderOn: html
  787. self
  788. ! !
  789. !Widget class methodsFor: 'helios'!
  790. heliosClass
  791. ^ 'widget'
  792. ! !
  793. !Object methodsFor: '*Canvas'!
  794. appendToBrush: aTagBrush
  795. aTagBrush append: self asString
  796. !
  797. appendToJQuery: aJQuery
  798. aJQuery append: self asString
  799. ! !
  800. !BlockClosure methodsFor: '*Canvas'!
  801. appendToBrush: aTagBrush
  802. aTagBrush appendBlock: self
  803. !
  804. appendToJQuery: aJQuery
  805. self value: (HTMLCanvas onJQuery: aJQuery)
  806. ! !
  807. !CharacterArray methodsFor: '*Canvas'!
  808. asSnippet
  809. ^ HTMLSnippet current snippetAt: self asString
  810. ! !
  811. !String methodsFor: '*Canvas'!
  812. appendToBrush: aTagBrush
  813. aTagBrush appendString: self
  814. !
  815. appendToJQuery: aJQuery
  816. aJQuery append: self
  817. !
  818. asJQuery
  819. <return jQuery(String(self))>
  820. ! !
  821. !JSObjectProxy methodsFor: '*Canvas'!
  822. asJQuery
  823. <return jQuery(self['@jsObject'])>
  824. ! !