Canvas.st 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972
  1. Smalltalk current createPackage: 'Canvas' properties: #{}!
  2. Object subclass: #HTMLCanvas
  3. instanceVariableNames: 'root'
  4. package: 'Canvas'!
  5. !HTMLCanvas methodsFor: 'accessing'!
  6. root
  7. ^root
  8. !
  9. root: aTagBrush
  10. root := aTagBrush
  11. ! !
  12. !HTMLCanvas methodsFor: 'adding'!
  13. with: anObject
  14. ^self root with: anObject
  15. ! !
  16. !HTMLCanvas methodsFor: 'initialization'!
  17. initialize
  18. super initialize.
  19. root ifNil: [root := TagBrush fromString: 'div' canvas: self]
  20. !
  21. initializeFromJQuery: aJQuery
  22. root := TagBrush fromJQuery: aJQuery canvas: self
  23. ! !
  24. !HTMLCanvas methodsFor: 'tags'!
  25. a
  26. ^self tag: 'a'
  27. !
  28. abbr
  29. ^self tag: 'abbr'
  30. !
  31. address
  32. ^self tag: 'address'
  33. !
  34. area
  35. ^self tag: 'area'
  36. !
  37. article
  38. ^self tag: 'article'
  39. !
  40. aside
  41. ^self tag: 'aside'
  42. !
  43. audio
  44. ^self tag: 'audio'
  45. !
  46. base
  47. ^self tag: 'base'
  48. !
  49. blockquote
  50. ^self tag: 'blockquote'
  51. !
  52. body
  53. ^self tag: 'body'
  54. !
  55. br
  56. ^self tag: 'br'
  57. !
  58. button
  59. ^self tag: 'button'
  60. !
  61. canvas
  62. ^self tag: 'canvas'
  63. !
  64. caption
  65. ^self tag: 'caption'
  66. !
  67. cite
  68. ^self tag: 'cite'
  69. !
  70. code
  71. ^self tag: 'code'
  72. !
  73. col
  74. ^self tag: 'col'
  75. !
  76. colgroup
  77. ^self tag: 'colgroup'
  78. !
  79. command
  80. ^self tag: 'command'
  81. !
  82. datalist
  83. ^self tag: 'datalist'
  84. !
  85. dd
  86. ^self tag: 'dd'
  87. !
  88. del
  89. ^self tag: 'del'
  90. !
  91. details
  92. ^self tag: 'details'
  93. !
  94. div
  95. ^self tag: 'div'
  96. !
  97. div: aBlock
  98. ^self div with: aBlock
  99. !
  100. dl
  101. ^self tag: 'dl'
  102. !
  103. dt
  104. ^self tag: 'dt'
  105. !
  106. em
  107. ^self tag: 'em'
  108. !
  109. embed
  110. ^self tag: 'embed'
  111. !
  112. fieldset
  113. ^self tag: 'fieldset'
  114. !
  115. figcaption
  116. ^self tag: 'figcaption'
  117. !
  118. figure
  119. ^self tag: 'figure'
  120. !
  121. footer
  122. ^self tag: 'footer'
  123. !
  124. form
  125. ^self tag: 'form'
  126. !
  127. h1
  128. ^self tag: 'h1'
  129. !
  130. h1: anObject
  131. ^self h1 with: anObject
  132. !
  133. h2
  134. ^self tag: 'h2'
  135. !
  136. h2: anObject
  137. ^ self h2 with: anObject
  138. !
  139. h3
  140. ^self tag: 'h3'
  141. !
  142. h3: anObject
  143. ^self h3 with: anObject
  144. !
  145. h4
  146. ^self tag: 'h4'
  147. !
  148. h4: anObject
  149. ^self h4 with: anObject
  150. !
  151. h5
  152. ^self tag: 'h5'
  153. !
  154. h5: anObject
  155. ^self h5 with: anObject
  156. !
  157. h6
  158. ^self tag: 'h6'
  159. !
  160. h6: anObject
  161. ^self h6 with: anObject
  162. !
  163. head
  164. ^self tag: 'head'
  165. !
  166. header
  167. ^self tag: 'header'
  168. !
  169. hgroup
  170. ^self tag: 'hgroup'
  171. !
  172. hr
  173. ^self tag: 'hr'
  174. !
  175. html
  176. ^self tag: 'html'
  177. !
  178. iframe
  179. ^self tag: 'iframe'
  180. !
  181. iframe: aString
  182. ^self iframe src: aString
  183. !
  184. img
  185. ^self tag: 'img'
  186. !
  187. img: aString
  188. ^self img src: aString
  189. !
  190. input
  191. ^self tag: 'input'
  192. !
  193. label
  194. ^self tag: 'label'
  195. !
  196. legend
  197. ^self tag: 'legend'
  198. !
  199. li
  200. ^self tag: 'li'
  201. !
  202. li: anObject
  203. ^self li with: anObject
  204. !
  205. link
  206. ^self tag: 'link'
  207. !
  208. map
  209. ^self tag: 'map'
  210. !
  211. mark
  212. ^self tag: 'mark'
  213. !
  214. menu
  215. ^self tag: 'menu'
  216. !
  217. meta
  218. ^self tag: 'meta'
  219. !
  220. nav
  221. ^self tag: 'nav'
  222. !
  223. newTag: aString
  224. ^TagBrush fromString: aString canvas: self
  225. !
  226. noscript
  227. ^self tag: 'noscript'
  228. !
  229. object
  230. ^self tag: 'object'
  231. !
  232. ol
  233. ^self tag: 'ol'
  234. !
  235. ol: anObject
  236. ^self ol with: anObject
  237. !
  238. optgroup
  239. ^self tag: 'optgroup'
  240. !
  241. option
  242. ^self tag: 'option'
  243. !
  244. output
  245. ^self tag: 'output'
  246. !
  247. p
  248. ^self tag: 'p'
  249. !
  250. p: anObject
  251. ^self p with: anObject
  252. !
  253. param
  254. ^self tag: 'param'
  255. !
  256. pre
  257. ^self tag: 'pre'
  258. !
  259. progress
  260. ^self tag: 'progress'
  261. !
  262. script
  263. ^self tag: 'script'
  264. !
  265. section
  266. ^self tag: 'section'
  267. !
  268. select
  269. ^self tag: 'select'
  270. !
  271. small
  272. ^self tag: 'small'
  273. !
  274. source
  275. ^self tag: 'source'
  276. !
  277. span
  278. ^self tag: 'span'
  279. !
  280. span: anObject
  281. ^self span with: anObject
  282. !
  283. strong
  284. ^self tag: 'strong'
  285. !
  286. strong: anObject
  287. ^self strong with: anObject
  288. !
  289. style
  290. ^ root addBrush: (StyleTag canvas: self)
  291. !
  292. style: aString
  293. ^ self style with: aString; yourself
  294. !
  295. sub
  296. ^self tag: 'sub'
  297. !
  298. summary
  299. ^self tag: 'summary'
  300. !
  301. sup
  302. ^self tag: 'sup'
  303. !
  304. table
  305. ^self tag: 'table'
  306. !
  307. tag: aString
  308. ^root addBrush: (self newTag: aString)
  309. !
  310. tbody
  311. ^self tag: 'tbody'
  312. !
  313. td
  314. ^self tag: 'td'
  315. !
  316. textarea
  317. ^self tag: 'textarea'
  318. !
  319. tfoot
  320. ^self tag: 'tfoot'
  321. !
  322. th
  323. ^self tag: 'th'
  324. !
  325. thead
  326. ^self tag: 'thead'
  327. !
  328. time
  329. ^self tag: 'time'
  330. !
  331. title
  332. ^self tag: 'title'
  333. !
  334. tr
  335. ^self tag: 'tr'
  336. !
  337. ul
  338. ^self tag: 'ul'
  339. !
  340. ul: anObject
  341. ^self ul with: anObject
  342. !
  343. video
  344. ^self tag: 'video'
  345. ! !
  346. !HTMLCanvas class methodsFor: 'instance creation'!
  347. browserVersion
  348. ^(jQuery at: #browser) version
  349. !
  350. isMSIE
  351. ^((jQuery at: #browser) at: #msie) notNil
  352. !
  353. isMozilla
  354. ^((jQuery at: #browser) at: #mozilla) notNil
  355. !
  356. isOpera
  357. ^((jQuery at: #browser) at: #opera) notNil
  358. !
  359. isWebkit
  360. ^((jQuery at: #browser) at: #webkit) notNil
  361. !
  362. onJQuery: aJQuery
  363. ^self basicNew
  364. initializeFromJQuery: aJQuery;
  365. initialize;
  366. yourself
  367. ! !
  368. Object subclass: #HtmlSnippet
  369. instanceVariableNames: 'snippets'
  370. package: 'Canvas'!
  371. !HtmlSnippet methodsFor: 'accessing'!
  372. addSnippet: anAssociation
  373. | snippet |
  374. (snippets ifNil: [ snippets := #{} ]) add: anAssociation.
  375. snippet := anAssociation value.
  376. ClassBuilder new
  377. installMethod: ([ :htmlReceiver | htmlReceiver snip: snippet ] currySelf asCompiledMethod: anAssociation key)
  378. forClass: HTMLCanvas
  379. category: '**snippets'
  380. !
  381. addSnippets: aCollection
  382. aCollection associationsDo: [ :each | self addSnippet: each ]
  383. !
  384. at: aString
  385. ^ snippets at: aString
  386. !
  387. at: aString ifAbsent: aBlock
  388. ^ snippets at: aString ifAbsent: aBlock
  389. ! !
  390. HtmlSnippet class instanceVariableNames: 'current'!
  391. !HtmlSnippet class methodsFor: 'action'!
  392. digFromJQuery: aJQuery
  393. "Finds and takes out all snippets out of aJQuery"
  394. | result |
  395. result := #{}.
  396. '[data-snippet]' asJQuery toArray do: [ :each |
  397. | jq name |
  398. jq := each asJQuery.
  399. name := jq attr: 'data-snippet'.
  400. name = '*' ifFalse: [
  401. ('^\*' asRegexp test: name) ifTrue: [ name := name allButFirst. jq attr: 'data-snippet' put: '*' ]
  402. ifFalse: [ jq removeAttr: 'data-snippet' ].
  403. result at: name put: (jq detach get: 0) ]].
  404. ^result
  405. ! !
  406. !HtmlSnippet class methodsFor: 'initialization'!
  407. initialize
  408. super initialize.
  409. self current
  410. ! !
  411. !HtmlSnippet class methodsFor: 'instance creation'!
  412. current
  413. ^ current ifNil: [
  414. current := self new addSnippets: (self digFromJQuery: document asJQuery); yourself ]
  415. ! !
  416. Object subclass: #TagBrush
  417. instanceVariableNames: 'canvas element'
  418. package: 'Canvas'!
  419. !TagBrush methodsFor: 'accessing'!
  420. element
  421. ^element
  422. ! !
  423. !TagBrush methodsFor: 'adding'!
  424. addBrush: aTagBrush
  425. self appendChild: aTagBrush element.
  426. ^aTagBrush
  427. !
  428. append: anObject
  429. anObject appendToBrush: self
  430. !
  431. appendBlock: aBlock
  432. | root |
  433. root := canvas root.
  434. canvas root: self.
  435. aBlock value: canvas.
  436. canvas root: root
  437. !
  438. appendChild: anElement
  439. "In IE7 and IE8 appendChild fails on several node types. So we need to check"
  440. <var element=self['@element'];
  441. if (null == element.canHaveChildren || element.canHaveChildren) {
  442. element.appendChild(anElement);
  443. } else {
  444. element.text = String(element.text) + anElement.innerHTML;
  445. } >
  446. !
  447. appendString: aString
  448. self appendChild: (self createTextNodeFor: aString)
  449. !
  450. appendToBrush: aTagBrush
  451. aTagBrush addBrush: self
  452. !
  453. contents: anObject
  454. self
  455. empty;
  456. append: anObject
  457. !
  458. empty
  459. self asJQuery empty
  460. !
  461. with: anObject
  462. self append: anObject
  463. ! !
  464. !TagBrush methodsFor: 'attributes'!
  465. accesskey: aString
  466. self at: 'accesskey' put: aString
  467. !
  468. action: aString
  469. self at: 'action' put: aString
  470. !
  471. align: aString
  472. self at: 'align' put: aString
  473. !
  474. alt: aString
  475. self at: 'alt' put: aString
  476. !
  477. at: aString put: aValue
  478. <self['@element'].setAttribute(aString, aValue)>
  479. !
  480. class: aString
  481. <self['@element'].className = aString>
  482. !
  483. cols: aString
  484. self at: 'cols' put: aString
  485. !
  486. contenteditable: aString
  487. self at: 'contenteditable' put: aString
  488. !
  489. contextmenu: aString
  490. self at: 'contextmenu' put: aString
  491. !
  492. draggable: aString
  493. self at: 'draggable' put: aString
  494. !
  495. for: aString
  496. self at: 'for' put: aString
  497. !
  498. height: aString
  499. self at: 'height' put: aString
  500. !
  501. hidden
  502. self at: 'hidden' put: 'hidden'
  503. !
  504. href: aString
  505. self at: 'href' put: aString
  506. !
  507. id: aString
  508. self at: 'id' put: aString
  509. !
  510. media: aString
  511. self at: 'media' put: aString
  512. !
  513. method: aString
  514. self at: 'method' put: aString
  515. !
  516. name: aString
  517. self at: 'name' put: aString
  518. !
  519. placeholder: aString
  520. self at: 'placeholder' put: aString
  521. !
  522. rel: aString
  523. self at: 'rel' put: aString
  524. !
  525. removeAt: aString
  526. <self['@element'].removeAttribute(aString)>
  527. !
  528. rows: aString
  529. self at: 'rows' put: aString
  530. !
  531. src: aString
  532. self at: 'src' put: aString
  533. !
  534. style: aString
  535. self at: 'style' put: aString
  536. !
  537. tabindex: aNumber
  538. self at: 'tabindex' put: aNumber
  539. !
  540. target: aString
  541. self at: 'target' put: aString
  542. !
  543. title: aString
  544. self at: 'title' put: aString
  545. !
  546. type: aString
  547. self at: 'type' put: aString
  548. !
  549. valign: aString
  550. self at: 'valign' put: aString
  551. !
  552. value: aString
  553. self at: 'value' put: aString
  554. !
  555. width: aString
  556. self at: 'width' put: aString
  557. ! !
  558. !TagBrush methodsFor: 'converting'!
  559. asJQuery
  560. ^window jQuery: self element
  561. ! !
  562. !TagBrush methodsFor: 'events'!
  563. onBlur: aBlock
  564. self asJQuery bind: 'blur' do: aBlock
  565. !
  566. onChange: aBlock
  567. self asJQuery bind: 'change' do: aBlock
  568. !
  569. onClick: aBlock
  570. self asJQuery bind: 'click' do: aBlock
  571. !
  572. onDblClick: aBlock
  573. self asJQuery bind: 'dblclick' do: aBlock
  574. !
  575. onFocus: aBlock
  576. self asJQuery bind: 'focus' do: aBlock
  577. !
  578. onFocusIn: aBlock
  579. self asJQuery bind: 'focusin' do: aBlock
  580. !
  581. onFocusOut: aBlock
  582. self asJQuery bind: 'focusout' do: aBlock
  583. !
  584. onHover: aBlock
  585. self asJQuery bind: 'hover' do: aBlock
  586. !
  587. onKeyDown: aBlock
  588. self asJQuery bind: 'keydown' do: aBlock
  589. !
  590. onKeyPress: aBlock
  591. self asJQuery bind: 'keypress' do: aBlock
  592. !
  593. onKeyUp: aBlock
  594. self asJQuery bind: 'keyup' do: aBlock
  595. !
  596. onMouseDown: aBlock
  597. self asJQuery bind: 'mousedown' do: aBlock
  598. !
  599. onMouseEnter: aBlock
  600. self asJQuery bind: 'mouseenter' do: aBlock
  601. !
  602. onMouseLeave: aBlock
  603. self asJQuery bind: 'mouseleave' do: aBlock
  604. !
  605. onMouseMove: aBlock
  606. self asJQuery bind: 'mousemove' do: aBlock
  607. !
  608. onMouseOut: aBlock
  609. self asJQuery bind: 'mouseout' do: aBlock
  610. !
  611. onMouseOver: aBlock
  612. self asJQuery bind: 'mouseover' do: aBlock
  613. !
  614. onMouseUp: aBlock
  615. self asJQuery bind: 'mouseup' do: aBlock
  616. !
  617. onSelect: aBlock
  618. self asJQuery bind: 'select' do: aBlock
  619. !
  620. onSubmit: aBlock
  621. self asJQuery bind: 'submit' do: aBlock
  622. !
  623. onUnload: aBlock
  624. self asJQuery bind: 'unload' do: aBlock
  625. ! !
  626. !TagBrush methodsFor: 'initialization'!
  627. initializeFromJQuery: aJQuery canvas: aCanvas
  628. element := aJQuery get: 0.
  629. canvas := aCanvas
  630. !
  631. initializeFromString: aString canvas: aCanvas
  632. element := self createElementFor: aString.
  633. canvas := aCanvas
  634. ! !
  635. !TagBrush methodsFor: 'private'!
  636. createElementFor: aString
  637. <return document.createElement(String(aString))>
  638. !
  639. createTextNodeFor: aString
  640. <return document.createTextNode(String(aString))>
  641. ! !
  642. !TagBrush class methodsFor: 'instance creation'!
  643. fromJQuery: aJQuery canvas: aCanvas
  644. ^self new
  645. initializeFromJQuery: aJQuery canvas: aCanvas;
  646. yourself
  647. !
  648. fromString: aString canvas: aCanvas
  649. ^self new
  650. initializeFromString: aString canvas: aCanvas;
  651. yourself
  652. ! !
  653. TagBrush subclass: #StyleTag
  654. instanceVariableNames: 'canvas element'
  655. package: 'Canvas'!
  656. !StyleTag commentStamp!
  657. I'm a <style> tag use to inline CSS or load a stylesheet.
  658. For inlining handle IE compatibility problems.!
  659. !StyleTag methodsFor: 'adding'!
  660. with: aString
  661. HTMLCanvas isMSIE
  662. ifTrue: [self element styleSheet cssText: aString ]
  663. ifFalse: [super with: aString ].
  664. ! !
  665. !StyleTag class methodsFor: 'instance creation'!
  666. canvas: aCanvas
  667. ^self new
  668. initializeFromString: 'style' canvas: aCanvas;
  669. yourself
  670. ! !
  671. Object subclass: #Widget
  672. instanceVariableNames: ''
  673. package: 'Canvas'!
  674. !Widget methodsFor: 'adding'!
  675. appendToBrush: aTagBrush
  676. self appendToJQuery: aTagBrush asJQuery
  677. !
  678. appendToJQuery: aJQuery
  679. self renderOn: (HTMLCanvas onJQuery: aJQuery)
  680. ! !
  681. !Widget methodsFor: 'rendering'!
  682. renderOn: html
  683. self
  684. ! !
  685. !Object methodsFor: '*Canvas'!
  686. appendToBrush: aTagBrush
  687. aTagBrush append: self asString
  688. !
  689. appendToJQuery: aJQuery
  690. aJQuery append: self asString
  691. ! !
  692. !BlockClosure methodsFor: '*Canvas'!
  693. appendToBrush: aTagBrush
  694. aTagBrush appendBlock: self
  695. !
  696. appendToJQuery: aJQuery
  697. self value: (HTMLCanvas onJQuery: aJQuery)
  698. ! !
  699. !CharacterArray methodsFor: '*Canvas'!
  700. asSnippet
  701. ^ HtmlSnippet current at: self asString
  702. ! !
  703. !String methodsFor: '*Canvas'!
  704. appendToBrush: aTagBrush
  705. aTagBrush appendString: self
  706. !
  707. appendToJQuery: aJQuery
  708. aJQuery append: self
  709. !
  710. asJQuery
  711. <return jQuery(String(self))>
  712. ! !
  713. !HTMLCanvas methodsFor: '*Canvas'!
  714. snip: anElement
  715. "Adds clone of anElement, finds [data-snippet=""*""] subelement
  716. and returns TagBrush as if that subelement was just added.
  717. Use with asSnippet -- (html snip: #mySnip asSnippet) with: [...]"
  718. | clone caret |
  719. clone := anElement asJQuery clone.
  720. self with: (TagBrush fromJQuery: clone canvas: self).
  721. caret := clone find: '[data-snippet="*"]'.
  722. caret toArray isEmpty ifTrue: [ caret := clone ].
  723. ^TagBrush fromJQuery: (caret removeAttr: 'data-snippet') canvas: self
  724. ! !
  725. !JSObjectProxy methodsFor: '*Canvas'!
  726. asJQuery
  727. <return jQuery(self['@jsObject'])>
  728. ! !