Canvas.st 16 KB

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