2
0

Presentation.st 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292
  1. Widget subclass: #Slide
  2. instanceVariableNames: 'presentation'
  3. category: 'Presentation'!
  4. !Slide methodsFor: 'accessing'!
  5. presentation
  6. ^presentation
  7. !
  8. presentation: aPresentation
  9. presentation := aPresentation
  10. !
  11. id
  12. self subclassResponsibility
  13. !
  14. cssClass
  15. ^'slide'
  16. !
  17. backgroundColor
  18. ^'#555'
  19. !
  20. title
  21. ^ self id
  22. ! !
  23. !Slide methodsFor: 'actions'!
  24. show
  25. self backgroundColor ifNotNil: [
  26. (window jQuery: '#slides') css: 'background' color: self backgroundColor].
  27. (window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
  28. (window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
  29. ! !
  30. !Slide methodsFor: 'rendering'!
  31. renderOn: html
  32. html div class: self cssClass; id: self id; with: [
  33. self renderSlideOn: html.
  34. self renderMetaOn: html]
  35. !
  36. renderSlideOn: html
  37. !
  38. renderMetaOn: html
  39. html div
  40. id: 'meta';
  41. with: [
  42. html p class: 'title'; with: self presentation title.
  43. html p class: 'description'; with: self presentation description.
  44. html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
  45. html a class: 'url'; with: self presentation url; href: self presentation url]
  46. ! !
  47. !Slide class methodsFor: 'instance creation'!
  48. on: aPresentation
  49. ^self new
  50. presentation: aPresentation;
  51. yourself
  52. ! !
  53. Widget subclass: #Presentation
  54. instanceVariableNames: 'currentSlide slides'
  55. category: 'Presentation'!
  56. !Presentation methodsFor: 'accessing'!
  57. title
  58. ^ self class title.
  59. !
  60. author
  61. ^'John Smith'
  62. !
  63. url
  64. ^'http://jtalk-project.org'
  65. !
  66. description
  67. ^'A presentation written in Jtalk'
  68. !
  69. email
  70. ^'john@smith.com'
  71. !
  72. slides
  73. slides ifNil: [self initSlides].
  74. ^slides
  75. !
  76. slideClasses
  77. ^self subclassResponsibility
  78. !
  79. currentSlide
  80. ^currentSlide
  81. !
  82. currentSlide: aSlide
  83. currentSlide := aSlide
  84. !
  85. slideTransition
  86. ^'fade'
  87. !
  88. style
  89. "Should return a CSS style"
  90. ^ ''
  91. ! !
  92. !Presentation methodsFor: 'actions'!
  93. nextSlide
  94. | next |
  95. self currentSlide ifNotNil: [
  96. next := self slides
  97. at: (self currentSlideIndex) + 1
  98. ifAbsent: [nil].
  99. next ifNotNil: [currentSlide := next. next show]]
  100. !
  101. showCurrentSlide
  102. self currentSlide ifNotNil: [
  103. '.slide' asJQuery hide.
  104. ('#', self currentSlide id) asJQuery show.
  105. 'title' asJQuery text: self title, ' - ', self currentSlide id.
  106. ]
  107. !
  108. previousSlide
  109. | next |
  110. self currentSlide ifNotNil: [
  111. next := self slides
  112. at: (self currentSlideIndex) - 1
  113. ifAbsent: [nil].
  114. next ifNotNil: [currentSlide := next. next show]]
  115. !
  116. moveAt: anInteger
  117. | next |
  118. next := self slides
  119. at: anInteger
  120. ifAbsent: [nil].
  121. next ifNotNil: [currentSlide := next. next show]
  122. !
  123. currentSlideIndex
  124. ^ self slides indexOf: self currentSlide ifAbsent: [1]
  125. ! !
  126. !Presentation methodsFor: 'enumerating'!
  127. slidesDo: aBlockWithArg
  128. self slides do: [:aSlide| aBlockWithArg value: aSlide].
  129. ! !
  130. !Presentation methodsFor: 'initialization'!
  131. initSlides
  132. slides := self slideClasses collect: [:each | each on: self]
  133. ! !
  134. !Presentation methodsFor: 'rendering'!
  135. renderOn: html
  136. html style
  137. type: 'text/css';
  138. with: self style.
  139. html div
  140. id: 'slides';
  141. with: [self renderSlidesOn: html]
  142. !
  143. renderSlidesOn: html
  144. self slides do: [:each |
  145. each renderOn: html].
  146. currentSlide ifNil: [currentSlide := self slides first].
  147. self showCurrentSlide
  148. ! !
  149. Presentation class instanceVariableNames: 'current'!
  150. !Presentation class methodsFor: 'accessing'!
  151. concretePresentations
  152. ^ self allSubclasses select: [:aPresentationClass| aPresentationClass isConcrete]
  153. !
  154. title
  155. ^ 'Slides'
  156. ! !
  157. !Presentation class methodsFor: 'enumerating'!
  158. concretePresentationsDo: aBlockWithArg
  159. self concretePresentations do: aBlockWithArg.
  160. ! !
  161. !Presentation class methodsFor: 'testing'!
  162. isConcrete
  163. ^false
  164. ! !
  165. Presentation subclass: #ESUG2011Presentation
  166. instanceVariableNames: ''
  167. category: 'Presentation'!
  168. !ESUG2011Presentation methodsFor: 'accessing'!
  169. description
  170. ^'ESUG 2011, Edinburgh'
  171. !
  172. author
  173. ^'Nicolas Petton'
  174. !
  175. email
  176. ^'nico@objectfusion.fr'
  177. !
  178. url
  179. ^'http://jtalk-project.org'
  180. !
  181. slideClasses
  182. ^Array new
  183. add: IntroSlide;
  184. add: AboutSlide;
  185. add: WhatIsJtalkSlide;
  186. add: JtalkFeaturesSlide;
  187. add: WorkspaceSlide;
  188. add: IDESlide;
  189. add: CountersSlide;
  190. add: JtalkAndJavascriptSlide;
  191. add: JtalkAndJavascriptSlide2;
  192. add: JtalkAndJavascriptSlide3;
  193. add: JtalkAndJavascriptSlide4;
  194. add: JtalkAndCLI;
  195. add: JtalkAndNode;
  196. add: JtalkAndNode2;
  197. add: JtalkAndNode3;
  198. add: JtalkAndWebOS;
  199. add: JtalkAndEnyo;
  200. add: ContributionsSlide;
  201. yourself
  202. !
  203. style
  204. ^'
  205. body {
  206. font-family: Helvetica,Arial,sans;
  207. }
  208. #slides {
  209. width: 100%;
  210. height: 100%;
  211. overflow: hidden;
  212. position: absolute;
  213. top: 0;
  214. bottom: 0;
  215. left: 0;
  216. right: 0;
  217. background: #555;
  218. }
  219. .slide {
  220. background: #fff;
  221. color: #444;
  222. text-align: left;
  223. font-size: 20px;
  224. line-height: 1.8em;
  225. height: 500px;
  226. width: 700px;
  227. padding: 60px;
  228. position: absolute;
  229. left: 50%;
  230. top: 50%;
  231. margin-left: -420px;
  232. margin-top: -320px;
  233. box-shadow: 0 0 20px #111;
  234. -moz-box-shadow: 0 0 20px #111;
  235. -webkit-box-shadow: 0 0 20px #111;
  236. }
  237. .slide.transparent {
  238. background: transparent;
  239. box-shadow: 0 0 0 none;
  240. -moz-box-shadow: 0 0 0 transparent;
  241. -webkit-box-shadow: 0 0 0 transparent;
  242. color: #fff !!important;
  243. }
  244. .slide.black {
  245. background: black;
  246. background-image: -webkit-gradient(
  247. linear,
  248. left bottom,
  249. left top,
  250. color-stop(0.38, rgb(79,79,79)),
  251. color-stop(0.69, rgb(33,33,33)),
  252. color-stop(0.86, rgb(4,4,4))
  253. );
  254. background-image: -moz-linear-gradient(
  255. center bottom,
  256. rgb(79,79,79) 38%,
  257. rgb(33,33,33) 69%,
  258. rgb(4,4,4) 86%
  259. );
  260. color: #fff !!important;
  261. }
  262. .slide.black h1, .slide.black h2, .slide.black h3,
  263. .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
  264. color: #fff;
  265. text-shadow: 0 1px 4px #aaa;
  266. }
  267. .slide.black a, .slide.transparent a {
  268. color: #ccc;
  269. }
  270. .slide.white {
  271. color: #333 !!important;
  272. }
  273. .slide.white h1, .slide.white h2, .slide.white h3 {
  274. color: #333;
  275. }
  276. .slide.white a {
  277. color: #333;
  278. }
  279. .slide h1, .slide h2, .slide h3 {
  280. color: #333;
  281. /* text-align: center; */
  282. }
  283. .slide h1 {
  284. font-family: "Droid Sans";
  285. font-size: 36px;
  286. text-shadow: 0 1px 4px #aaa;
  287. margin-top: 30px;
  288. margin-bottom: 50px;
  289. }
  290. /* .slide ul, .slide li { */
  291. /* padding: 0; */
  292. /* margin: 0; */
  293. /* } */
  294. .slide button {
  295. font-size: 18px;
  296. }
  297. .slide a {
  298. color: #555;
  299. text-decoration: none;
  300. cursor: pointer;
  301. }
  302. .slide a:hover {
  303. color: #fff;
  304. background: #555;
  305. }
  306. .slide .right {
  307. text-align: right;
  308. }
  309. .slide .section.center {
  310. text-align: center;
  311. display: table-cell;
  312. vertical-align: middle;
  313. width: 700px;
  314. height: 500px;
  315. }
  316. .slide code {
  317. font-family: "Droid Sans Mono";
  318. color: #444;
  319. border: 1px solid #ddd;
  320. background: #eee;
  321. border-radius: 4px;
  322. padding: 2px;
  323. font-size: 16px;
  324. }
  325. .slide .code2 {
  326. font-family: "Droid Sans Mono";
  327. line-height: 1.2em;
  328. color: #444;
  329. padding: 2px;
  330. font-size: 16px;
  331. }
  332. .slide .CodeMirror {
  333. width: 500px;
  334. height: 300px;
  335. text-align: left;
  336. }
  337. .slide .CodeMirror-scroll {
  338. text-align: left;
  339. }
  340. .slide .fancy {
  341. margin-top: 30px;
  342. -webkit-transform: rotate(-10deg);
  343. -moz-transform: rotate(-10deg);
  344. transform: rotate(-10deg);
  345. color: red;
  346. }
  347. .slide .comment {
  348. opacity: 0.6;
  349. font-weight: normal;
  350. }
  351. .slide .red {
  352. color: red;
  353. }
  354. .slide .blue {
  355. color: blue;
  356. }
  357. .slide#WhatIsJtalk {
  358. background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat;
  359. }
  360. .slide#ide {
  361. background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
  362. }
  363. .slide#JtalkAndCLI {
  364. background: white url("esug2011/images/terminal.png") 620px 20px no-repeat;
  365. }
  366. .slide#JtalkAndNode {
  367. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  368. }
  369. .slide#JtalkAndNode2 {
  370. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  371. }
  372. .slide#JtalkAndNode3 {
  373. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  374. }
  375. .slide#JtalkAndWebOS {
  376. background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat;
  377. }
  378. .slide#JtalkAndEnyo {
  379. background: white url("esug2011/images/enyo.png") 130px 150px no-repeat;
  380. }
  381. .slide#links {
  382. background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
  383. }
  384. .slide#links .section {
  385. margin-left: 250px;
  386. margin-top: 200px;
  387. font-family: "Droid Sans";
  388. font-size: 26px;
  389. font-weight: bold;
  390. }
  391. #meta {
  392. position: absolute;
  393. font-size: 12px;
  394. opacity: 0.6;
  395. bottom: 0;
  396. right: 0;
  397. z-index: 2;
  398. background: #333;
  399. text-align: right;
  400. padding: 0 10px;
  401. line-height: 1.8em;
  402. color: #eee;
  403. border-top-left-radius: 5px;
  404. }
  405. #meta:hover {
  406. opacity: 0.8;
  407. }
  408. #meta p {
  409. display: inline;
  410. padding: 0 5px;
  411. }
  412. #meta a {
  413. //background: #ccc;
  414. color: #ccc;
  415. text-decoration: none;
  416. padding: 0 5px;
  417. }
  418. .slide {
  419. }
  420. '
  421. ! !
  422. ESUG2011Presentation class instanceVariableNames: 'current'!
  423. !ESUG2011Presentation class methodsFor: 'accessing'!
  424. title
  425. ^'Jtalk'
  426. ! !
  427. !ESUG2011Presentation class methodsFor: 'testing'!
  428. isConcrete
  429. ^true
  430. ! !
  431. Slide subclass: #IntroSlide
  432. instanceVariableNames: ''
  433. category: 'Presentation'!
  434. !IntroSlide methodsFor: 'accessing'!
  435. id
  436. ^'intro'
  437. !
  438. cssClass
  439. ^'slide black'
  440. ! !
  441. !IntroSlide methodsFor: 'rendering'!
  442. renderSlideOn: html
  443. html div class: 'section center'; with: [
  444. html h1 with: 'Jtalk, the Smalltalk for Web developers'.
  445. html p with: self presentation author, ' & Göran Krampe - ', self presentation description.
  446. html p with: [
  447. html a
  448. with: self presentation email;
  449. href: 'mailto:', self presentation email].
  450. html p with: [
  451. html a
  452. with: 'goran@krampe.se';
  453. href: 'mailto:goran@krampe.se'].
  454. html p with: [
  455. html a
  456. with: 'objectfusion.fr';
  457. href: 'http://www.objectfusion.fr']]
  458. ! !
  459. Slide subclass: #WhatIsJtalkSlide
  460. instanceVariableNames: ''
  461. category: 'Presentation'!
  462. !WhatIsJtalkSlide methodsFor: 'accessing'!
  463. id
  464. ^'WhatIsJtalk'
  465. ! !
  466. !WhatIsJtalkSlide methodsFor: 'rendering'!
  467. renderSlideOn: html
  468. html div class: 'section center'; with: [
  469. html h1 with: 'Jtalk in a nutshell'.
  470. html h2 with: 'Jtalk is an implementation of Smalltalk'.
  471. html h2 with: 'Jtalk runs on top of the JavaScript runtime'.
  472. html h2 with: 'Jtalk is an opensource project (MIT)'.
  473. html h2 class: 'fancy'; with: 'Jtalk is cool!!']
  474. ! !
  475. Slide subclass: #JtalkFeaturesSlide
  476. instanceVariableNames: ''
  477. category: 'Presentation'!
  478. !JtalkFeaturesSlide methodsFor: 'accessing'!
  479. id
  480. ^'features'
  481. ! !
  482. !JtalkFeaturesSlide methodsFor: 'rendering'!
  483. renderSlideOn: html
  484. html h1 with: 'Jtalk features'.
  485. html ul with: [
  486. html li with: 'Jtalk is (mostly) written in itself, including the parser & compiler'.
  487. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
  488. html li with: 'Core libraries (streams, collections, RegExp, etc)'.
  489. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
  490. html li with: 'Full featured IDE'.
  491. html li with: [
  492. html with:'Advanced Smalltalk features, including '.
  493. html code with: '#doesNotUnderstand:'.
  494. html with: ' support and '.
  495. html code with: 'thisContext']]
  496. ! !
  497. Slide subclass: #AboutSlide
  498. instanceVariableNames: ''
  499. category: 'Presentation'!
  500. !AboutSlide methodsFor: 'accessing'!
  501. id
  502. ^'about'
  503. !
  504. cssClass
  505. ^'slide transparent white'
  506. !
  507. backgroundColor
  508. ^'white'
  509. ! !
  510. !AboutSlide methodsFor: 'rendering'!
  511. renderSlideOn: html
  512. html div class: 'section center'; with: [
  513. html h1 with: 'About this presentation'.
  514. html p with: 'This presentation is entirely written in Jtalk and is licensed under CC BY-SA.'.
  515. html p with: [
  516. html with: 'Press '.
  517. html code with: '←'.
  518. html with: ' to move backward and '.
  519. html code with: ' →'.
  520. html with: ' to move forward.'].
  521. html p with: [
  522. html with: 'Open a '.
  523. html button
  524. with: 'browser';
  525. onClick: [Browser openOn: Presentation].
  526. html with: ' to edit the source code.']]
  527. ! !
  528. Slide subclass: #JtalkAndJavascriptSlide3
  529. instanceVariableNames: ''
  530. category: 'Presentation'!
  531. !JtalkAndJavascriptSlide3 methodsFor: 'accessing'!
  532. id
  533. ^'jtalkAndJs3'
  534. !
  535. backgroundColor
  536. ^'#08C'
  537. ! !
  538. !JtalkAndJavascriptSlide3 methodsFor: 'rendering'!
  539. renderSlideOn: html
  540. html h1 with: [
  541. html with: 'Smalltalk '.
  542. html span class: 'red'; with: '♥'.
  543. html with: ' JavaScript'].
  544. html h2 with: 'Smalltalk ⇒ JavaScript'.
  545. html ol with: [
  546. html li
  547. with: 'Unary messages begin with an underscore: ';
  548. with: [html code with: 'yourself'];
  549. with: ' becomes ';
  550. with: [html code with: '_yourself()'].
  551. html li
  552. with: 'Binary messages are prefixed with 2 underscores: ';
  553. with: [html code with: '3@4'];
  554. with: ' becomes ';
  555. with: [html code with: '(3).__at(4)'].
  556. html li
  557. with: 'Keyword message follow the same rules as unary messages, with a final underscore: ';
  558. with: [html code with: 'aDictionary at: 3 put: 4'];
  559. with: ' becomes ';
  560. with: [html code with: 'aDictionary._at_put_(3, 4)']]
  561. ! !
  562. Slide subclass: #JtalkAndJavascriptSlide2
  563. instanceVariableNames: ''
  564. category: 'Presentation'!
  565. !JtalkAndJavascriptSlide2 methodsFor: 'accessing'!
  566. id
  567. ^'jtalkAndJs2'
  568. !
  569. backgroundColor
  570. ^'#08C'
  571. ! !
  572. !JtalkAndJavascriptSlide2 methodsFor: 'rendering'!
  573. renderSlideOn: html
  574. html h1 with: [
  575. html with: 'Smalltalk '.
  576. html span class: 'red'; with: '♥'.
  577. html with: ' JavaScript'].
  578. html h2 with: 'Jtalk maps one to one with the JavaScript equivalent:'.
  579. html ul with: [
  580. html li with: 'String ⇔ String'.
  581. html li with: 'Number ⇔ Number'.
  582. html li with: 'BlockClosure ⇔ function'.
  583. html li with: 'Dictionary ⇔ Object'.
  584. html li with: 'Error ⇔ Error'.
  585. html li with: 'etc.']
  586. ! !
  587. Slide subclass: #JtalkAndJavascriptSlide
  588. instanceVariableNames: ''
  589. category: 'Presentation'!
  590. !JtalkAndJavascriptSlide methodsFor: 'accessing'!
  591. id
  592. ^'jtalkAndJs'
  593. !
  594. cssClass
  595. ^'slide transparent'
  596. !
  597. backgroundColor
  598. ^'#08C'
  599. ! !
  600. !JtalkAndJavascriptSlide methodsFor: 'rendering'!
  601. renderSlideOn: html
  602. html div class: 'section center'; with: [
  603. html h1 with: [
  604. html with: 'Smalltalk '.
  605. html span class: 'red'; with: '♥'.
  606. html with: ' JavaScript']]
  607. ! !
  608. Slide subclass: #WorkspaceSlide
  609. instanceVariableNames: ''
  610. category: 'Presentation'!
  611. !WorkspaceSlide methodsFor: 'accessing'!
  612. id
  613. ^'workspace'
  614. !
  615. backgroundColor
  616. ^'#18bd7d'
  617. !
  618. renderSlideOn: html
  619. | workspace |
  620. workspace := SourceArea new.
  621. html div class: 'section center'; with: [
  622. html h1 with: 'Give Jtalk a try!!'.
  623. workspace renderOn: html.
  624. html div with: [
  625. html button
  626. with: 'DoIt';
  627. onClick: [workspace doIt].
  628. html button
  629. with: 'PrintIt';
  630. onClick: [workspace printIt].
  631. html button
  632. with: 'InspectIt';
  633. onClick: [workspace inspectIt]]]
  634. ! !
  635. Slide subclass: #CountersSlide
  636. instanceVariableNames: ''
  637. category: 'Presentation'!
  638. !CountersSlide methodsFor: 'accessing'!
  639. id
  640. ^'counters'
  641. !
  642. backgroundColor
  643. ^'#18bd7d'
  644. ! !
  645. !CountersSlide methodsFor: 'rendering'!
  646. renderSlideOn: html
  647. html div class: 'section center'; with: [
  648. html h1 with: 'The counter example'.
  649. html div with: [
  650. 2 timesRepeat: [Counter new renderOn: html]]]
  651. ! !
  652. Slide subclass: #JtalkAndJavascriptSlide4
  653. instanceVariableNames: ''
  654. category: 'Presentation'!
  655. !JtalkAndJavascriptSlide4 methodsFor: 'accessing'!
  656. id
  657. ^'jtalkAndJs4'
  658. !
  659. backgroundColor
  660. ^'#08C'
  661. ! !
  662. !JtalkAndJavascriptSlide4 methodsFor: 'rendering'!
  663. renderSlideOn: html
  664. html h1 with: [
  665. html with: 'JavaScript '.
  666. html span class: 'red'; with: '♥'.
  667. html with: ' Smalltalk too!! ';
  668. with: [html span class: 'comment'; with: '(how cute)']].
  669. html h2 with: 'JavaScript ⇒ Smalltalk'.
  670. html ol with: [
  671. html li
  672. with: [html code with: 'someUser.name'];
  673. with: ' becomes ';
  674. with: [html code with: 'someUser name'].
  675. html li
  676. with: [html code with: 'someUser name = "John"'];
  677. with: ' becomes ';
  678. with: [html code with: 'someUser name: ''John'''].
  679. html li
  680. with: [html code with: 'console.log(''hello world'')'];
  681. with: ' becomes ';
  682. with: [html code with: 'console log: ''hello world'''].
  683. html li
  684. with: [html code with: 'window.jQuery(''foo'').css(''background'', ''red'')'];
  685. with: ' becomes ';
  686. with: [html br];
  687. with: [html code with: '(window jQuery: ''foo'') css: ''background'' color: ''red''']]
  688. ! !
  689. Slide subclass: #IDESlide
  690. instanceVariableNames: ''
  691. category: 'Presentation'!
  692. !IDESlide methodsFor: 'accessing'!
  693. id
  694. ^'ide'
  695. !
  696. backgroundColor
  697. ^'black'
  698. !
  699. cssClass
  700. ^'slide transparent'
  701. ! !
  702. !IDESlide methodsFor: 'rendering'!
  703. renderSlideOn: html
  704. " html div class: 'section center'; with: [
  705. html h1
  706. with: 'The wonderful Jtalk ';
  707. with: [
  708. html a
  709. with: 'development tools';
  710. onClick: [TabManager current open]];
  711. with: '.']
  712. "
  713. ! !
  714. Slide subclass: #ContributionsSlide
  715. instanceVariableNames: ''
  716. category: 'Presentation'!
  717. !ContributionsSlide methodsFor: 'accessing'!
  718. id
  719. ^'links'
  720. ! !
  721. !ContributionsSlide methodsFor: 'rendering'!
  722. renderSlideOn: html
  723. html div class: 'section'; with: [
  724. html p with: [
  725. html a href: 'http://jtalk-project.org'; with: 'jtalk-project.org'].
  726. html p with: [
  727. html a href: 'https://github.com/NicolasPetton/jtalk'; with: 'github.com/NicolasPetton/jtalk'].
  728. html p with: [
  729. html a href: 'http://http://groups.google.com/group/jtalk-project'; with: 'groups.google.com/group/jtalk-project']]
  730. ! !
  731. Slide subclass: #JtalkAndCLI
  732. instanceVariableNames: ''
  733. category: 'Presentation'!
  734. !JtalkAndCLI methodsFor: 'not yet classified'!
  735. backgroundColor
  736. ^'#0A1'
  737. !
  738. id
  739. ^'JtalkAndCLI'
  740. !
  741. renderSlideOn: html
  742. html h1 with: [
  743. html with: 'Jtalk and '.
  744. html span class: 'blue'; with: 'the command line'].
  745. html h2 with: 'jtalkc - a fairly elaborate bash script that:'.
  746. html ul with: [
  747. html li with: 'Uses Node.js to run the Jtalk Compiler'.
  748. html li with: 'Compiles .st files to .js'.
  749. html li with: 'Links .js files into a single one'.
  750. html li with: 'Adds class initilization and/or call to main'.
  751. html li with: 'Optionally runs Google Closure compiler']
  752. ! !
  753. Slide subclass: #JtalkAndNode
  754. instanceVariableNames: ''
  755. category: 'Presentation'!
  756. !JtalkAndNode methodsFor: 'not yet classified'!
  757. backgroundColor
  758. ^'#0A1'
  759. !
  760. id
  761. ^'JtalkAndNode'
  762. !
  763. renderSlideOn: html
  764. html h1 with: [
  765. html with: 'Jtalk and '.
  766. html span class: 'blue'; with: 'Node.js'].
  767. html h2 with: 'Hello.st:'.
  768. html pre with: [
  769. html div class: 'code2'; with: 'Object subclass: #Hello
  770. instanceVariableNames: ''''
  771. category: ''Hello''!!
  772. !!Hello class methodsFor: ''main''!!
  773. main
  774. console log: ''Hello world from JTalk in Node.js''
  775. !! !!']
  776. ! !
  777. Slide subclass: #JtalkAndNode2
  778. instanceVariableNames: ''
  779. category: 'Presentation'!
  780. !JtalkAndNode2 methodsFor: 'not yet classified'!
  781. backgroundColor
  782. ^'#0A1'
  783. !
  784. id
  785. ^'JtalkAndNode2'
  786. !
  787. renderSlideOn: html
  788. html h1 with: [
  789. html with: 'Jtalk and '.
  790. html span class: 'blue'; with: 'Node.js'].
  791. html h2 with: 'Makefile:'.
  792. html pre with: [
  793. html div class: 'code2'; with: 'Program.js: Hello.st
  794. ../../bin/jtalkc -N -m Hello Hello.st Program
  795. run: Program.js
  796. ./hello
  797. clean:
  798. rm -f Program.js Hello.js
  799. '].
  800. html h2 with: 'hello:'.
  801. html pre with: [
  802. html div class: 'code2'; with: 'node Program.js $@']
  803. ! !
  804. Slide subclass: #JtalkAndNode3
  805. instanceVariableNames: ''
  806. category: 'Presentation'!
  807. !JtalkAndNode3 methodsFor: 'not yet classified'!
  808. backgroundColor
  809. ^'#0A1'
  810. !
  811. id
  812. ^'JtalkAndNode3'
  813. !
  814. renderSlideOn: html
  815. html h1 with: [
  816. html with: 'Jtalk and '.
  817. html span class: 'blue'; with: 'Node.js'].
  818. html h2 with: 'make clean && make run:'.
  819. html pre with: [
  820. html div class: 'code2'; with: 'rm -f Program.js Hello.js
  821. ../../bin/jtalkc -N -m Hello Hello.st Program
  822. Loading libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js
  823. /home/gokr/jtalk/js/Parser.js /home/gokr/jtalk/js/Compiler.js
  824. /home/gokr/jtalk/js/init.js /home/gokr/jtalk/nodejs/nodecompile.js
  825. and compiling ...
  826. Compiling in debugMode: false
  827. Reading file Hello.st
  828. Exporting category Hello as Hello.js
  829. Adding libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js ...
  830. Adding Jtalk code Hello.js ...
  831. Adding initializer /home/gokr/jtalk/js/init.js ...
  832. Adding call to Hello class >> main ...
  833. Writing Program.js ...
  834. Done.
  835. ./hello'.
  836. html span class: 'blue'; with:'Hello world from JTalk in Node.js']
  837. ! !
  838. Slide subclass: #JtalkAndWebOS
  839. instanceVariableNames: ''
  840. category: 'Presentation'!
  841. !JtalkAndWebOS methodsFor: 'not yet classified'!
  842. backgroundColor
  843. ^'#0A1'
  844. !
  845. id
  846. ^'JtalkAndWebOS'
  847. !
  848. renderSlideOn: html
  849. html h1 with: [
  850. html with: 'Jtalk and '.
  851. html span class: 'blue'; with: 'webOS'].
  852. html h2 with: 'A really cool mobile OS based on Linux:'.
  853. html ul with: [
  854. html li with: 'The primary language in webOS is Javascript'.
  855. html li with: 'The new UI framework for webOS 3.0 is called Enyo'.
  856. html li with: 'Regular apps run in V8 + Webkit'.
  857. html li with: 'Background services run in Node.js']
  858. ! !
  859. Slide subclass: #JtalkAndEnyo
  860. instanceVariableNames: ''
  861. category: 'Presentation'!
  862. !JtalkAndEnyo methodsFor: 'not yet classified'!
  863. id
  864. ^'JtalkAndEnyo'
  865. !
  866. backgroundColor
  867. ^'#0A1'
  868. !
  869. renderSlideOn: html
  870. html h1 with: [
  871. html with: 'Jtalk and '.
  872. html span class: 'blue'; with: 'Enyo'].
  873. ! !
  874. Widget subclass: #PresentationNavigator
  875. instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
  876. category: 'Presentation'!
  877. !PresentationNavigator methodsFor: 'accessing'!
  878. currentPresentation: aPresentation
  879. currentPresentation := aPresentation.
  880. !
  881. currentPresentation
  882. ^ currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
  883. !
  884. style
  885. ^ '
  886. #navigator {
  887. z-index: 1;
  888. position: fixed;
  889. top: 0;
  890. left: 50%;
  891. margin-left: -150px;
  892. padding: 5px;
  893. border-radius: 5px;
  894. -moz-border-radius: 5px;
  895. -webkit-border-radius: 5px;
  896. background: #333;
  897. opacity: 0.3;
  898. color: #eee;
  899. }
  900. #navigator a {
  901. font-weight: bold;
  902. color: #eee;
  903. text-decoration: none;
  904. cursor: pointer;
  905. padding: 0 2px;
  906. font-size: 14px;
  907. }
  908. #navigator:hover {
  909. opacity: 0.8;
  910. }
  911. '
  912. ! !
  913. !PresentationNavigator methodsFor: 'callbacks'!
  914. selectPresentation: aPresentationClass
  915. self currentPresentation: aPresentationClass new.
  916. self renderCurrentPresentation.
  917. !
  918. selectPresentationNamed: aString
  919. |presentationClass|
  920. presentationClass := (Smalltalk current at: aString).
  921. presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
  922. !
  923. previousSlide
  924. self currentPresentation previousSlide.
  925. self updateHash.
  926. !
  927. nextSlide
  928. self currentPresentation nextSlide.
  929. self updateHash.
  930. !
  931. reload
  932. self currentPresentation: self currentPresentation class new.
  933. self renderCurrentPresentation.
  934. !
  935. selectSlideAt: anInteger
  936. self currentPresentation moveAt: anInteger.
  937. self updateHash.
  938. !
  939. updateHash
  940. document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex.
  941. ! !
  942. !PresentationNavigator methodsFor: 'hash'!
  943. checkHash
  944. | hash presentation |
  945. hash := (document location hash replace: '^#' with: '') tokenize: '-'.
  946. presentation := Presentation concretePresentations
  947. detect: [:aPresentationClass | aPresentationClass name == hash first]
  948. ifNone: [^ self].
  949. presentation == self currentPresentation class ifFalse: [
  950. self selectPresentationNamed: presentation.
  951. self selectSlideAt: hash last
  952. ].
  953. !
  954. checkHashChange
  955. (window jQuery: window) bind: 'hashchange' do: [self checkHash]
  956. ! !
  957. !PresentationNavigator methodsFor: 'keybindings'!
  958. setKeybindings
  959. (window jQuery: document) keyup: [:e || node |
  960. node := e target nodeName asLowercase.
  961. (node = 'textarea' or: [node = 'input']) ifFalse: [
  962. e keyCode = 39 ifTrue: [self nextSlide].
  963. e keyCode = 37 ifTrue: [self previousSlide]]]
  964. ! !
  965. !PresentationNavigator methodsFor: 'rendering'!
  966. renderToolsOn: html
  967. html a
  968. with: 'IDE';
  969. onClick: [TabManager current open].
  970. html a
  971. with: 'Reload';
  972. onClick: [self reload].
  973. html a
  974. with: '←';
  975. onClick: [self previousSlide].
  976. html a
  977. with: '→';
  978. onClick: [self nextSlide].
  979. !
  980. renderPresentationSelectOn: html
  981. |presentationSelect|
  982. presentationSelect := html select.
  983. presentationSelect
  984. onChange: [self selectPresentationNamed: presentationSelect asJQuery val];
  985. with: [ Presentation concretePresentationsDo: [:aPresentationClass |
  986. html option
  987. value: aPresentationClass name;
  988. with: aPresentationClass title ] ].
  989. !
  990. open
  991. (window jQuery: document) ready: [
  992. self
  993. appendToJQuery: 'body' asJQuery;
  994. setKeybindings;
  995. checkHashChange.
  996. ].
  997. !
  998. renderOn: html
  999. html style
  1000. type: 'text/css';
  1001. with: self style.
  1002. html div
  1003. id: 'navigator';
  1004. with: [ self
  1005. renderToolsOn: html;
  1006. renderPresentationSelectOn: html;
  1007. renderSlideSelectOn: html].
  1008. presentationBrush := html div
  1009. id: 'presentation';
  1010. yourself.
  1011. self checkHash.
  1012. self renderCurrentPresentation.
  1013. !
  1014. renderCurrentPresentation
  1015. presentationBrush contents: [:html |
  1016. self currentPresentation renderOn: html.
  1017. ].
  1018. self updateSlideSelect.
  1019. !
  1020. renderSlideSelectOn: html
  1021. slideSelect := html select.
  1022. slideSelect onChange: [ self selectSlideAt: slideSelect asJQuery val ].
  1023. self updateSlideSelect.
  1024. !
  1025. updateSlideSelect
  1026. slideSelect contents: [:html| |index|
  1027. index := 0.
  1028. self currentPresentation slidesDo: [ :aSlide|
  1029. index := index + 1.
  1030. html option
  1031. value: index;
  1032. with: aSlide title ] ].
  1033. ! !
  1034. !PresentationNavigator class methodsFor: 'initialize'!
  1035. initialize
  1036. ^ self open
  1037. !
  1038. open
  1039. ^ self new open
  1040. ! !