Add slide with canvas demo

examples/presentation/js/Presentation.deploy.js

@@ -1,128 +1,276 @@
 smalltalk.addPackage('Presentation', {});
-smalltalk.addClass('Slide', smalltalk.Widget, ['presentation'], 'Presentation');
+smalltalk.addClass('PresentationNavigator', smalltalk.Widget, ['presentationBrush', 'currentPresentation', 'slideSelect'], 'Presentation');
 smalltalk.addMethod(
-unescape('_presentation'),
+unescape('_currentPresentation_'),
 smalltalk.method({
-selector: unescape('presentation'),
+selector: unescape('currentPresentation%3A'),
+fn: function (aPresentation){
+var self=this;
+(self['@currentPresentation']=aPresentation);
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_currentPresentation'),
+smalltalk.method({
+selector: unescape('currentPresentation'),
 fn: function (){
 var self=this;
-return self['@presentation'];
+return (($receiver = self['@currentPresentation']) == nil || $receiver == undefined) ? (function(){return (self['@currentPresentation']=smalltalk.send(smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_first", []), "_new", []));})() : $receiver;
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_presentation_'),
+unescape('_style'),
 smalltalk.method({
-selector: unescape('presentation%3A'),
-fn: function (aPresentation){
+selector: unescape('style'),
+fn: function (){
 var self=this;
-(self['@presentation']=aPresentation);
+return unescape("%0A%23navigator%20%7B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20margin-left%3A%20-150px%3B%0A%20%20%20%20padding%3A%205px%3B%0A%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20-moz-border-radius%3A%205px%3B%0A%20%20%20%20-webkit-border-radius%3A%205px%3B%0A%20%20%20%20background%3A%20%23333%3B%0A%20%20%20%20opacity%3A%200.3%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%7D%0A%0A%23navigator%20a%20%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20padding%3A%200%202px%3B%0A%20%20%20%20font-size%3A%2014px%3B%0A%7D%0A%0A%23navigator%3Ahover%20%7B%0A%20%20%20%20opacity%3A%200.8%3B%0A%7D%0A");
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_id'),
+unescape('_selectPresentation_'),
 smalltalk.method({
-selector: unescape('id'),
+selector: unescape('selectPresentation%3A'),
+fn: function (aPresentationClass){
+var self=this;
+smalltalk.send(self, "_currentPresentation_", [smalltalk.send(aPresentationClass, "_new", [])]);
+smalltalk.send(self, "_renderCurrentPresentation", []);
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_selectPresentationNamed_'),
+smalltalk.method({
+selector: unescape('selectPresentationNamed%3A'),
+fn: function (aString){
+var self=this;
+var presentationClass=nil;
+(presentationClass=smalltalk.send(smalltalk.send((smalltalk.Smalltalk || Smalltalk), "_current", []), "_at_", [aString]));
+(($receiver = presentationClass) != nil && $receiver != undefined) ? (function(){return smalltalk.send(self, "_selectPresentation_", [presentationClass]);})() : nil;
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_previousSlide'),
+smalltalk.method({
+selector: unescape('previousSlide'),
 fn: function (){
 var self=this;
-return smalltalk.send(smalltalk.send(self, "_class", []), "_name", []);
+smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_previousSlide", []);
+smalltalk.send(self, "_updateHash", []);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_cssClass'),
+unescape('_nextSlide'),
 smalltalk.method({
-selector: unescape('cssClass'),
+selector: unescape('nextSlide'),
 fn: function (){
 var self=this;
-return "slide";
+smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_nextSlide", []);
+smalltalk.send(self, "_updateHash", []);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_backgroundColor'),
+unescape('_reload'),
 smalltalk.method({
-selector: unescape('backgroundColor'),
+selector: unescape('reload'),
 fn: function (){
 var self=this;
-return unescape("%23555");
+var slideIndex=nil;
+(slideIndex=smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", []));
+smalltalk.send(self, "_currentPresentation_", [smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_new", [])]);
+smalltalk.send(self, "_renderCurrentPresentation", []);
+smalltalk.send(self, "_selectSlideAt_", [slideIndex]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_title'),
+unescape('_selectSlideAt_'),
 smalltalk.method({
-selector: unescape('title'),
+selector: unescape('selectSlideAt%3A'),
+fn: function (anInteger){
+var self=this;
+smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_moveAt_", [anInteger]);
+smalltalk.send(self, "_updateHash", []);
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_updateHash'),
+smalltalk.method({
+selector: unescape('updateHash'),
 fn: function (){
 var self=this;
-return smalltalk.send(self, "_id", []);
+smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash_", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_name", []), "__comma", [unescape("-")]), "__comma", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", [])])]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_show'),
+unescape('_checkHash'),
 smalltalk.method({
-selector: unescape('show'),
+selector: unescape('checkHash'),
 fn: function (){
 var self=this;
-(($receiver = smalltalk.send(self, "_backgroundColor", [])) != nil && $receiver != undefined) ? (function(){return smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [unescape("%23slides")]), "_css_color_", ["background", smalltalk.send(self, "_backgroundColor", [])]);})() : nil;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [".slide"]), "_hide_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [smalltalk.send(unescape("%23"), "__comma", [smalltalk.send(self, "_id", [])])]), "_show_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
+try{var hash=nil;
+var presentation=nil;
+(hash=smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash", []), "_replace_with_", [unescape("%5E%23"), ""]), "_tokenize_", [unescape("-")]));
+(presentation=smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_detect_ifNone_", [(function(aPresentationClass){return smalltalk.send(smalltalk.send(aPresentationClass, "_name", []), "__eq_eq", [smalltalk.send(hash, "_first", [])]);}), (function(){return (function(){throw({name: 'stReturn', selector: '_checkHash', fn: function(){return self}})})();})]));
+((($receiver = smalltalk.send(presentation, "__eq_eq", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", [])])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})]));
+return self;
+} catch(e) {if(e.name === 'stReturn' && e.selector === '_checkHash'){return e.fn()} throw(e)}}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_checkHashChange'),
+smalltalk.method({
+selector: unescape('checkHashChange'),
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof window == 'undefined' ? nil : window)]), "_bind_do_", ["hashchange", (function(){return smalltalk.send(self, "_checkHash", []);})]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderOn_'),
+unescape('_setKeybindings'),
 smalltalk.method({
-selector: unescape('renderOn%3A'),
+selector: unescape('setKeybindings'),
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_keyup_", [(function(e){var node=nil;
+(node=smalltalk.send(smalltalk.send(smalltalk.send(e, "_target", []), "_nodeName", []), "_asLowercase", []));return ((($receiver = smalltalk.send(smalltalk.send(node, "__eq", ["textarea"]), "_or_", [(function(){return smalltalk.send(node, "__eq", ["input"]);})])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})]));})]);
+return self;}
+}),
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_renderToolsOn_'),
+smalltalk.method({
+selector: unescape('renderToolsOn%3A'),
 fn: function (html){
 var self=this;
-(function($rec){smalltalk.send($rec, "_class_", [smalltalk.send(self, "_cssClass", [])]);smalltalk.send($rec, "_id_", [smalltalk.send(self, "_id", [])]);return smalltalk.send($rec, "_with_", [(function(){smalltalk.send(self, "_renderSlideOn_", [html]);return smalltalk.send(self, "_renderMetaOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
+(function($rec){smalltalk.send($rec, "_with_", ["IDE"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send((smalltalk.TabManager || TabManager), "_current", []), "_open", []);})]);})(smalltalk.send(html, "_a", []));
+(function($rec){smalltalk.send($rec, "_with_", ["Reload"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_reload", []);})]);})(smalltalk.send(html, "_a", []));
+(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2190")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]);})(smalltalk.send(html, "_a", []));
+(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2192")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]);})(smalltalk.send(html, "_a", []));
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderSlideOn_'),
+unescape('_renderPresentationSelectOn_'),
 smalltalk.method({
-selector: unescape('renderSlideOn%3A'),
+selector: unescape('renderPresentationSelectOn%3A'),
 fn: function (html){
 var self=this;
+var presentationSelect=nil;
+(presentationSelect=smalltalk.send(html, "_select", []));
+(function($rec){smalltalk.send($rec, "_onChange_", [(function(){return smalltalk.send(self, "_selectPresentationNamed_", [smalltalk.send(smalltalk.send(presentationSelect, "_asJQuery", []), "_val", [])]);})]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentationsDo_", [(function(aPresentationClass){return (function($rec){smalltalk.send($rec, "_value_", [smalltalk.send(aPresentationClass, "_name", [])]);return smalltalk.send($rec, "_with_", [smalltalk.send(aPresentationClass, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);})(presentationSelect);
+return self;}
+}),
+smalltalk.PresentationNavigator);
 
+smalltalk.addMethod(
+unescape('_open'),
+smalltalk.method({
+selector: unescape('open'),
+fn: function (){
+var self=this;
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_ready_", [(function(){return (function($rec){smalltalk.send($rec, "_appendToJQuery_", [smalltalk.send("body", "_asJQuery", [])]);smalltalk.send($rec, "_setKeybindings", []);return smalltalk.send($rec, "_checkHashChange", []);})(self);})]);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_renderMetaOn_'),
+unescape('_renderOn_'),
 smalltalk.method({
-selector: unescape('renderMetaOn%3A'),
+selector: unescape('renderOn%3A'),
 fn: function (html){
 var self=this;
-(function($rec){smalltalk.send($rec, "_id_", ["meta"]);return smalltalk.send($rec, "_with_", [(function(){(function($rec){smalltalk.send($rec, "_class_", ["title"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_title", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["description"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_description", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["author"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_author", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send("mailto:", "__comma", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_email", [])])]);})(smalltalk.send(html, "_a", []));return (function($rec){smalltalk.send($rec, "_class_", ["url"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);})(smalltalk.send(html, "_a", []));})]);})(smalltalk.send(html, "_div", []));
+(function($rec){smalltalk.send($rec, "_type_", [unescape("text/css")]);return smalltalk.send($rec, "_with_", [smalltalk.send(self, "_style", [])]);})(smalltalk.send(html, "_style", []));
+(function($rec){smalltalk.send($rec, "_id_", ["navigator"]);return smalltalk.send($rec, "_with_", [(function(){return (function($rec){smalltalk.send($rec, "_renderToolsOn_", [html]);smalltalk.send($rec, "_renderPresentationSelectOn_", [html]);return smalltalk.send($rec, "_renderSlideSelectOn_", [html]);})(self);})]);})(smalltalk.send(html, "_div", []));
+(self['@presentationBrush']=(function($rec){smalltalk.send($rec, "_id_", ["presentation"]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(html, "_div", [])));
+smalltalk.send(self, "_checkHash", []);
+smalltalk.send(self, "_renderCurrentPresentation", []);
 return self;}
 }),
-smalltalk.Slide);
+smalltalk.PresentationNavigator);
+
+smalltalk.addMethod(
+unescape('_renderCurrentPresentation'),
+smalltalk.method({
+selector: unescape('renderCurrentPresentation'),
+fn: function (){
+var self=this;
+smalltalk.send(self['@presentationBrush'], "_contents_", [(function(html){return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_renderOn_", [html]);})]);
+smalltalk.send(self, "_updateSlideSelect", []);
+return self;}
+}),
+smalltalk.PresentationNavigator);
 
+smalltalk.addMethod(
+unescape('_renderSlideSelectOn_'),
+smalltalk.method({
+selector: unescape('renderSlideSelectOn%3A'),
+fn: function (html){
+var self=this;
+(self['@slideSelect']=smalltalk.send(html, "_select", []));
+smalltalk.send(self['@slideSelect'], "_onChange_", [(function(){return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(smalltalk.send(self['@slideSelect'], "_asJQuery", []), "_val", [])]);})]);
+smalltalk.send(self, "_updateSlideSelect", []);
+return self;}
+}),
+smalltalk.PresentationNavigator);
 
 smalltalk.addMethod(
-unescape('_on_'),
+unescape('_updateSlideSelect'),
 smalltalk.method({
-selector: unescape('on%3A'),
-fn: function (aPresentation){
+selector: unescape('updateSlideSelect'),
+fn: function (){
 var self=this;
-return (function($rec){smalltalk.send($rec, "_presentation_", [aPresentation]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(self, "_new", []));
+smalltalk.send(self['@slideSelect'], "_contents_", [(function(html){var index=nil;
+(index=(0));return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_slidesDo_", [(function(aSlide){(index=((($receiver = index).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));return (function($rec){smalltalk.send($rec, "_value_", [index]);return smalltalk.send($rec, "_with_", [smalltalk.send(aSlide, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);
 return self;}
 }),
-smalltalk.Slide.klass);
+smalltalk.PresentationNavigator);
+
+
+smalltalk.addMethod(
+unescape('_initialize'),
+smalltalk.method({
+selector: unescape('initialize'),
+fn: function (){
+var self=this;
+return smalltalk.send(self, "_open", []);
+return self;}
+}),
+smalltalk.PresentationNavigator.klass);
+
+smalltalk.addMethod(
+unescape('_open'),
+smalltalk.method({
+selector: unescape('open'),
+fn: function (){
+var self=this;
+return smalltalk.send(smalltalk.send(self, "_new", []), "_open", []);
+return self;}
+}),
+smalltalk.PresentationNavigator.klass);
 
 
 smalltalk.addClass('Presentation', smalltalk.Widget, ['currentSlide', 'slides'], 'Presentation');
@@ -401,203 +549,85 @@ return self;}
 smalltalk.Presentation.klass);
 
 
-smalltalk.addClass('PresentationNavigator', smalltalk.Widget, ['presentationBrush', 'currentPresentation', 'slideSelect'], 'Presentation');
-smalltalk.addMethod(
-unescape('_currentPresentation_'),
-smalltalk.method({
-selector: unescape('currentPresentation%3A'),
-fn: function (aPresentation){
-var self=this;
-(self['@currentPresentation']=aPresentation);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_currentPresentation'),
-smalltalk.method({
-selector: unescape('currentPresentation'),
-fn: function (){
-var self=this;
-return (($receiver = self['@currentPresentation']) == nil || $receiver == undefined) ? (function(){return (self['@currentPresentation']=smalltalk.send(smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_first", []), "_new", []));})() : $receiver;
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_style'),
-smalltalk.method({
-selector: unescape('style'),
-fn: function (){
-var self=this;
-return unescape("%0A%23navigator%20%7B%0A%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20margin-left%3A%20-150px%3B%0A%20%20%20%20padding%3A%205px%3B%0A%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20-moz-border-radius%3A%205px%3B%0A%20%20%20%20-webkit-border-radius%3A%205px%3B%0A%20%20%20%20background%3A%20%23333%3B%0A%20%20%20%20opacity%3A%200.3%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%7D%0A%0A%23navigator%20a%20%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20color%3A%20%23eee%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20padding%3A%200%202px%3B%0A%20%20%20%20font-size%3A%2014px%3B%0A%7D%0A%0A%23navigator%3Ahover%20%7B%0A%20%20%20%20opacity%3A%200.8%3B%0A%7D%0A");
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_selectPresentation_'),
-smalltalk.method({
-selector: unescape('selectPresentation%3A'),
-fn: function (aPresentationClass){
-var self=this;
-smalltalk.send(self, "_currentPresentation_", [smalltalk.send(aPresentationClass, "_new", [])]);
-smalltalk.send(self, "_renderCurrentPresentation", []);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_selectPresentationNamed_'),
-smalltalk.method({
-selector: unescape('selectPresentationNamed%3A'),
-fn: function (aString){
-var self=this;
-var presentationClass=nil;
-(presentationClass=smalltalk.send(smalltalk.send((smalltalk.Smalltalk || Smalltalk), "_current", []), "_at_", [aString]));
-(($receiver = presentationClass) != nil && $receiver != undefined) ? (function(){return smalltalk.send(self, "_selectPresentation_", [presentationClass]);})() : nil;
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
+smalltalk.addClass('Slide', smalltalk.Widget, ['presentation'], 'Presentation');
 smalltalk.addMethod(
-unescape('_previousSlide'),
+unescape('_presentation'),
 smalltalk.method({
-selector: unescape('previousSlide'),
+selector: unescape('presentation'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_previousSlide", []);
-smalltalk.send(self, "_updateHash", []);
+return self['@presentation'];
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_nextSlide'),
+unescape('_presentation_'),
 smalltalk.method({
-selector: unescape('nextSlide'),
-fn: function (){
+selector: unescape('presentation%3A'),
+fn: function (aPresentation){
 var self=this;
-smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_nextSlide", []);
-smalltalk.send(self, "_updateHash", []);
+(self['@presentation']=aPresentation);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_reload'),
+unescape('_id'),
 smalltalk.method({
-selector: unescape('reload'),
+selector: unescape('id'),
 fn: function (){
 var self=this;
-var slideIndex=nil;
-(slideIndex=smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", []));
-smalltalk.send(self, "_currentPresentation_", [smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_new", [])]);
-smalltalk.send(self, "_renderCurrentPresentation", []);
-smalltalk.send(self, "_selectSlideAt_", [slideIndex]);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_selectSlideAt_'),
-smalltalk.method({
-selector: unescape('selectSlideAt%3A'),
-fn: function (anInteger){
-var self=this;
-smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_moveAt_", [anInteger]);
-smalltalk.send(self, "_updateHash", []);
+return smalltalk.send(smalltalk.send(self, "_class", []), "_name", []);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_updateHash'),
+unescape('_cssClass'),
 smalltalk.method({
-selector: unescape('updateHash'),
+selector: unescape('cssClass'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash_", [smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", []), "_name", []), "__comma", [unescape("-")]), "__comma", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_currentSlideIndex", [])])]);
+return "slide";
 return self;}
 }),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_checkHash'),
-smalltalk.method({
-selector: unescape('checkHash'),
-fn: function (){
-var self=this;
-try{var hash=nil;
-var presentation=nil;
-(hash=smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send((typeof document == 'undefined' ? nil : document), "_location", []), "_hash", []), "_replace_with_", [unescape("%5E%23"), ""]), "_tokenize_", [unescape("-")]));
-(presentation=smalltalk.send(smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentations", []), "_detect_ifNone_", [(function(aPresentationClass){return smalltalk.send(smalltalk.send(aPresentationClass, "_name", []), "__eq_eq", [smalltalk.send(hash, "_first", [])]);}), (function(){return (function(){throw({name: 'stReturn', selector: '_checkHash', fn: function(){return self}})})();})]));
-((($receiver = smalltalk.send(presentation, "__eq_eq", [smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_class", [])])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){smalltalk.send(self, "_selectPresentationNamed_", [presentation]);return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(hash, "_last", [])]);})]));
-return self;
-} catch(e) {if(e.name === 'stReturn' && e.selector === '_checkHash'){return e.fn()} throw(e)}}
-}),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_checkHashChange'),
+unescape('_backgroundColor'),
 smalltalk.method({
-selector: unescape('checkHashChange'),
+selector: unescape('backgroundColor'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof window == 'undefined' ? nil : window)]), "_bind_do_", ["hashchange", (function(){return smalltalk.send(self, "_checkHash", []);})]);
+return unescape("%23555");
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_setKeybindings'),
+unescape('_title'),
 smalltalk.method({
-selector: unescape('setKeybindings'),
+selector: unescape('title'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_keyup_", [(function(e){var node=nil;
-(node=smalltalk.send(smalltalk.send(smalltalk.send(e, "_target", []), "_nodeName", []), "_asLowercase", []));return ((($receiver = smalltalk.send(smalltalk.send(node, "__eq", ["textarea"]), "_or_", [(function(){return smalltalk.send(node, "__eq", ["input"]);})])).klass === smalltalk.Boolean) ? (! $receiver ? (function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})() : nil) : smalltalk.send($receiver, "_ifFalse_", [(function(){((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(39)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_nextSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]));return ((($receiver = smalltalk.send(smalltalk.send(e, "_keyCode", []), "__eq", [(37)])).klass === smalltalk.Boolean) ? ($receiver ? (function(){return smalltalk.send(self, "_previousSlide", []);})() : nil) : smalltalk.send($receiver, "_ifTrue_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]));})]));})]);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_renderToolsOn_'),
-smalltalk.method({
-selector: unescape('renderToolsOn%3A'),
-fn: function (html){
-var self=this;
-(function($rec){smalltalk.send($rec, "_with_", ["IDE"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(smalltalk.send((smalltalk.TabManager || TabManager), "_current", []), "_open", []);})]);})(smalltalk.send(html, "_a", []));
-(function($rec){smalltalk.send($rec, "_with_", ["Reload"]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_reload", []);})]);})(smalltalk.send(html, "_a", []));
-(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2190")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_previousSlide", []);})]);})(smalltalk.send(html, "_a", []));
-(function($rec){smalltalk.send($rec, "_with_", [unescape("%u2192")]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_nextSlide", []);})]);})(smalltalk.send(html, "_a", []));
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_renderPresentationSelectOn_'),
-smalltalk.method({
-selector: unescape('renderPresentationSelectOn%3A'),
-fn: function (html){
-var self=this;
-var presentationSelect=nil;
-(presentationSelect=smalltalk.send(html, "_select", []));
-(function($rec){smalltalk.send($rec, "_onChange_", [(function(){return smalltalk.send(self, "_selectPresentationNamed_", [smalltalk.send(smalltalk.send(presentationSelect, "_asJQuery", []), "_val", [])]);})]);return smalltalk.send($rec, "_with_", [(function(){return smalltalk.send((smalltalk.Presentation || Presentation), "_concretePresentationsDo_", [(function(aPresentationClass){return (function($rec){smalltalk.send($rec, "_value_", [smalltalk.send(aPresentationClass, "_name", [])]);return smalltalk.send($rec, "_with_", [smalltalk.send(aPresentationClass, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);})(presentationSelect);
+return smalltalk.send(self, "_id", []);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_open'),
+unescape('_show'),
 smalltalk.method({
-selector: unescape('open'),
+selector: unescape('show'),
 fn: function (){
 var self=this;
-smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [(typeof document == 'undefined' ? nil : document)]), "_ready_", [(function(){return (function($rec){smalltalk.send($rec, "_appendToJQuery_", [smalltalk.send("body", "_asJQuery", [])]);smalltalk.send($rec, "_setKeybindings", []);return smalltalk.send($rec, "_checkHashChange", []);})(self);})]);
+(($receiver = smalltalk.send(self, "_backgroundColor", [])) != nil && $receiver != undefined) ? (function(){return smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [unescape("%23slides")]), "_css_color_", ["background", smalltalk.send(self, "_backgroundColor", [])]);})() : nil;
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [".slide"]), "_hide_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
+smalltalk.send(smalltalk.send((typeof window == 'undefined' ? nil : window), "_jQuery_", [smalltalk.send(unescape("%23"), "__comma", [smalltalk.send(self, "_id", [])])]), "_show_options_duration_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_slideTransition", []), [], (300)]);
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
 unescape('_renderOn_'),
@@ -605,74 +635,44 @@ smalltalk.method({
 selector: unescape('renderOn%3A'),
 fn: function (html){
 var self=this;
-(function($rec){smalltalk.send($rec, "_type_", [unescape("text/css")]);return smalltalk.send($rec, "_with_", [smalltalk.send(self, "_style", [])]);})(smalltalk.send(html, "_style", []));
-(function($rec){smalltalk.send($rec, "_id_", ["navigator"]);return smalltalk.send($rec, "_with_", [(function(){return (function($rec){smalltalk.send($rec, "_renderToolsOn_", [html]);smalltalk.send($rec, "_renderPresentationSelectOn_", [html]);return smalltalk.send($rec, "_renderSlideSelectOn_", [html]);})(self);})]);})(smalltalk.send(html, "_div", []));
-(self['@presentationBrush']=(function($rec){smalltalk.send($rec, "_id_", ["presentation"]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(html, "_div", [])));
-smalltalk.send(self, "_checkHash", []);
-smalltalk.send(self, "_renderCurrentPresentation", []);
-return self;}
-}),
-smalltalk.PresentationNavigator);
-
-smalltalk.addMethod(
-unescape('_renderCurrentPresentation'),
-smalltalk.method({
-selector: unescape('renderCurrentPresentation'),
-fn: function (){
-var self=this;
-smalltalk.send(self['@presentationBrush'], "_contents_", [(function(html){return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_renderOn_", [html]);})]);
-smalltalk.send(self, "_updateSlideSelect", []);
+(function($rec){smalltalk.send($rec, "_class_", [smalltalk.send(self, "_cssClass", [])]);smalltalk.send($rec, "_id_", [smalltalk.send(self, "_id", [])]);return smalltalk.send($rec, "_with_", [(function(){smalltalk.send(self, "_renderSlideOn_", [html]);return smalltalk.send(self, "_renderMetaOn_", [html]);})]);})(smalltalk.send(html, "_div", []));
 return self;}
 }),
-smalltalk.PresentationNavigator);
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_renderSlideSelectOn_'),
+unescape('_renderSlideOn_'),
 smalltalk.method({
-selector: unescape('renderSlideSelectOn%3A'),
+selector: unescape('renderSlideOn%3A'),
 fn: function (html){
 var self=this;
-(self['@slideSelect']=smalltalk.send(html, "_select", []));
-smalltalk.send(self['@slideSelect'], "_onChange_", [(function(){return smalltalk.send(self, "_selectSlideAt_", [smalltalk.send(smalltalk.send(self['@slideSelect'], "_asJQuery", []), "_val", [])]);})]);
-smalltalk.send(self, "_updateSlideSelect", []);
-return self;}
-}),
-smalltalk.PresentationNavigator);
 
-smalltalk.addMethod(
-unescape('_updateSlideSelect'),
-smalltalk.method({
-selector: unescape('updateSlideSelect'),
-fn: function (){
-var self=this;
-smalltalk.send(self['@slideSelect'], "_contents_", [(function(html){var index=nil;
-(index=(0));return smalltalk.send(smalltalk.send(self, "_currentPresentation", []), "_slidesDo_", [(function(aSlide){(index=((($receiver = index).klass === smalltalk.Number) ? $receiver +(1) : smalltalk.send($receiver, "__plus", [(1)])));return (function($rec){smalltalk.send($rec, "_value_", [index]);return smalltalk.send($rec, "_with_", [smalltalk.send(aSlide, "_title", [])]);})(smalltalk.send(html, "_option", []));})]);})]);
 return self;}
 }),
-smalltalk.PresentationNavigator);
-
+smalltalk.Slide);
 
 smalltalk.addMethod(
-unescape('_initialize'),
+unescape('_renderMetaOn_'),
 smalltalk.method({
-selector: unescape('initialize'),
-fn: function (){
+selector: unescape('renderMetaOn%3A'),
+fn: function (html){
 var self=this;
-return smalltalk.send(self, "_open", []);
+(function($rec){smalltalk.send($rec, "_id_", ["meta"]);return smalltalk.send($rec, "_with_", [(function(){(function($rec){smalltalk.send($rec, "_class_", ["title"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_title", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["description"]);return smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_description", [])]);})(smalltalk.send(html, "_p", []));(function($rec){smalltalk.send($rec, "_class_", ["author"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_author", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send("mailto:", "__comma", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_email", [])])]);})(smalltalk.send(html, "_a", []));return (function($rec){smalltalk.send($rec, "_class_", ["url"]);smalltalk.send($rec, "_with_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);return smalltalk.send($rec, "_href_", [smalltalk.send(smalltalk.send(self, "_presentation", []), "_url", [])]);})(smalltalk.send(html, "_a", []));})]);})(smalltalk.send(html, "_div", []));
 return self;}
 }),
-smalltalk.PresentationNavigator.klass);
+smalltalk.Slide);
+
 
 smalltalk.addMethod(
-unescape('_open'),
+unescape('_on_'),
 smalltalk.method({
-selector: unescape('open'),
-fn: function (){
+selector: unescape('on%3A'),
+fn: function (aPresentation){
 var self=this;
-return smalltalk.send(smalltalk.send(self, "_new", []), "_open", []);
+return (function($rec){smalltalk.send($rec, "_presentation_", [aPresentation]);return smalltalk.send($rec, "_yourself", []);})(smalltalk.send(self, "_new", []));
 return self;}
 }),
-smalltalk.PresentationNavigator.klass);
+smalltalk.Slide.klass);
 
 
 smalltalk.addClass('ESUG2011Presentation', smalltalk.Presentation, [], 'Presentation');
@@ -1498,7 +1498,7 @@ smalltalk.method({
 selector: unescape('slideClasses'),
 fn: function (){
 var self=this;
-return [(smalltalk.FOSDEMIntroSlide || FOSDEMIntroSlide),(smalltalk.CountersSlide || CountersSlide),(smalltalk.JtalkAndJavascriptSlide || JtalkAndJavascriptSlide),(smalltalk.FOSDEMBookletSlide || FOSDEMBookletSlide),(smalltalk.FOSDEMJSPlayGroundSlide || FOSDEMJSPlayGroundSlide),(smalltalk.FOSDEMAmberBackend || FOSDEMAmberBackend)];
+return [(smalltalk.FOSDEMIntroSlide || FOSDEMIntroSlide),(smalltalk.CountersSlide || CountersSlide),(smalltalk.JtalkAndJavascriptSlide || JtalkAndJavascriptSlide),(smalltalk.FOSDEMBookletSlide || FOSDEMBookletSlide),(smalltalk.FOSDEMJSPlayGroundSlide || FOSDEMJSPlayGroundSlide),(smalltalk.FOSDEMCanvasSlide || FOSDEMCanvasSlide),(smalltalk.FOSDEMAmberBackend || FOSDEMAmberBackend)];
 return self;}
 }),
 smalltalk.FOSDEM2012Presentation);
@@ -1651,3 +1651,32 @@ smalltalk.FOSDEMJSPlayGroundSlide);
 
 
 
+smalltalk.addClass('FOSDEMCanvasSlide', smalltalk.Slide, ['c2d', 'canvas'], 'Presentation');
+smalltalk.addMethod(
+unescape('_renderSlideOn_'),
+smalltalk.method({
+selector: unescape('renderSlideOn%3A'),
+fn: function (html){
+var self=this;
+smalltalk.send(html, "_h1_", ["Canvas made easy"]);
+(self['@canvas']=(function($rec){smalltalk.send($rec, "_width_", [(700)]);smalltalk.send($rec, "_height_", [(400)]);return smalltalk.send($rec, "_onClick_", [(function(){return smalltalk.send(self, "_drawOnCanvas", []);})]);})(smalltalk.send(html, "_canvas", [])));
+return self;}
+}),
+smalltalk.FOSDEMCanvasSlide);
+
+smalltalk.addMethod(
+unescape('_drawOnCanvas'),
+smalltalk.method({
+selector: unescape('drawOnCanvas'),
+fn: function (){
+var self=this;
+var c2d=nil;
+(self['@c2d']=smalltalk.send(smalltalk.send(self['@canvas'], "_element", []), "_getContext_", ["2d"]));
+smalltalk.send(self['@c2d'], "_clearRect_y_width_height_", [(0), (0), smalltalk.send(smalltalk.send(self['@canvas'], "_element", []), "_width", []), smalltalk.send(smalltalk.send(self['@canvas'], "_element", []), "_height", [])]);
+smalltalk.send((20), "_timesRepeat_", [(function(){return (function($rec){smalltalk.send($rec, "_at_put_", ["fillStyle", smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(smalltalk.send(unescape("rgba%28"), "__comma", [smalltalk.send(smalltalk.send((255), "_atRandom", []), "_asString", [])]), "__comma", [unescape("%2C")]), "__comma", [smalltalk.send(smalltalk.send((255), "_atRandom", []), "_asString", [])]), "__comma", [unescape("%2C")]), "__comma", [smalltalk.send(smalltalk.send((255), "_atRandom", []), "_asString", [])]), "__comma", [unescape("%2C%200.4%29")])]);return smalltalk.send($rec, "_fillRect_y_width_height_", [smalltalk.send((600), "_atRandom", []), smalltalk.send((300), "_atRandom", []), smalltalk.send((200), "_atRandom", []), smalltalk.send((200), "_atRandom", [])]);})(self['@c2d']);})]);
+return self;}
+}),
+smalltalk.FOSDEMCanvasSlide);
+
+
+

examples/presentation/st/Presentation.st

@@ -1,70 +1,205 @@
 Smalltalk current createPackage: 'Presentation' properties: #{}!
-Widget subclass: #Slide
-	instanceVariableNames: 'presentation'
+Widget subclass: #PresentationNavigator
+	instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
 	category: 'Presentation'!
 
-!Slide methodsFor: 'accessing'!
+!PresentationNavigator methodsFor: 'accessing'!
 
-presentation
-	^presentation
+currentPresentation: aPresentation
+	currentPresentation := aPresentation.
 !
 
-presentation: aPresentation
-	presentation := aPresentation
+currentPresentation
+	^  currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
 !
 
-id
-	^ self class name
+style
+	^ '
+#navigator {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    margin-left: -150px;
+    padding: 5px;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    background: #333;
+    opacity: 0.3;
+    color: #eee;
+}
+
+#navigator a {
+    font-weight: bold;
+    color: #eee;
+    text-decoration: none;
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 14px;
+}
+
+#navigator:hover {
+    opacity: 0.8;
+}
+'
+! !
+
+!PresentationNavigator methodsFor: 'callbacks'!
+
+selectPresentation: aPresentationClass
+	self currentPresentation: aPresentationClass new.
+	self renderCurrentPresentation.
 !
 
-cssClass
-	^'slide'
+selectPresentationNamed: aString
+	|presentationClass|
+	presentationClass :=  (Smalltalk current at: aString).
+	presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
 !
 
-backgroundColor
-	^'#555'
+previousSlide
+	self currentPresentation previousSlide.
+	self updateHash.
 !
 
-title
-	^ self id
+nextSlide
+	self currentPresentation nextSlide.
+	self updateHash.
+!
+
+reload
+	|slideIndex|
+	slideIndex := self currentPresentation currentSlideIndex.
+	self currentPresentation: self currentPresentation class new.
+	self renderCurrentPresentation.
+	self selectSlideAt: slideIndex.
+!
+
+selectSlideAt: anInteger
+	self currentPresentation moveAt: anInteger.
+	self updateHash.
+!
+
+updateHash
+	document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex.
 ! !
 
-!Slide methodsFor: 'actions'!
+!PresentationNavigator methodsFor: 'hash'!
 
-show
-	self backgroundColor ifNotNil: [
-		(window jQuery: '#slides') css: 'background' color: self backgroundColor].
-	(window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
-	(window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
+checkHash
+	| hash presentation |
+	hash := (document location hash  replace: '^#' with: '') tokenize: '-'. 
+	presentation := Presentation concretePresentations 
+				detect: [:aPresentationClass | aPresentationClass name == hash first]
+				ifNone: [^ self].
+	presentation == self currentPresentation class ifFalse: [
+          	self selectPresentationNamed: presentation.
+          	self selectSlideAt: hash last
+        ].
+!
+
+checkHashChange
+	(window jQuery: window) bind: 'hashchange' do: [self checkHash]
 ! !
 
-!Slide methodsFor: 'rendering'!
+!PresentationNavigator methodsFor: 'keybindings'!
+
+setKeybindings
+	(window jQuery: document) keyup: [:e || node |
+		node := e target nodeName asLowercase.
+		(node = 'textarea' or: [node = 'input']) ifFalse: [
+			e keyCode = 39 ifTrue: [self nextSlide].
+			e keyCode = 37 ifTrue: [self previousSlide]]]
+! !
+
+!PresentationNavigator methodsFor: 'rendering'!
+
+renderToolsOn: html
+	html a 
+		with: 'IDE';
+		onClick: [TabManager current open].
+	html a
+		with: 'Reload';
+		onClick: [self reload].
+	html a
+		with: '←';
+		onClick: [self previousSlide].
+	html a
+		with: '→';
+		onClick: [self nextSlide].
+!
+
+renderPresentationSelectOn: html
+	|presentationSelect|
+	presentationSelect := html select.
+	presentationSelect
+		onChange: [self  selectPresentationNamed:  presentationSelect asJQuery val];
+		with: [	Presentation concretePresentationsDo: [:aPresentationClass |   
+                                                              							html option
+                                                              								value: aPresentationClass name;
+                                                              								with: aPresentationClass title ] ].
+!
+
+open
+	(window jQuery: document)  ready: [
+          	self 
+          		appendToJQuery: 'body' asJQuery;
+          		setKeybindings;
+          		checkHashChange.
+        ].
+!
 
 renderOn: html
-	html div class: self cssClass; id: self id; with: [
-		self renderSlideOn: html.
-		self renderMetaOn: html]
+	html style
+		type: 'text/css';
+		with: self style.
+	html div
+		id: 'navigator';
+		with: [	self
+					renderToolsOn: html;
+					renderPresentationSelectOn: html;
+                      			renderSlideSelectOn: html].
+
+	presentationBrush := html div 
+							id: 'presentation';
+							yourself.
+
+	self checkHash.
+	self renderCurrentPresentation.
 !
 
-renderSlideOn: html
+renderCurrentPresentation
+	presentationBrush contents: [:html |
+        	self currentPresentation renderOn: html.
+        ].
+	self updateSlideSelect.
 !
 
-renderMetaOn: html
-	html div 
-		id: 'meta';
-		with: [
-			html p class: 'title'; with: self presentation title.
-			html p class: 'description'; with: self presentation description.
-			html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
-			html a class: 'url'; with: self presentation url; href: self presentation url]
+renderSlideSelectOn: html
+	slideSelect := html select.
+	slideSelect onChange: [ self  selectSlideAt:  slideSelect asJQuery val ].
+	self updateSlideSelect.
+!
+
+updateSlideSelect
+	slideSelect contents: [:html| |index|
+		                       		index := 0.
+                		       		self currentPresentation slidesDo: [ :aSlide|  
+                                		                                    				index := index + 1.
+                                                		                    				html option
+                                                                		    					value: index;
+                                                            								with: aSlide title ] ].
 ! !
 
-!Slide class methodsFor: 'instance creation'!
+!PresentationNavigator class methodsFor: 'initialize'!
 
-on: aPresentation
-	^self new
-		presentation: aPresentation;
-		yourself
+initialize
+	^ self open
+!
+
+open
+	^ self new open
 ! !
 
 Widget subclass: #Presentation
@@ -213,207 +348,72 @@ isConcrete
 	^false
 ! !
 
-Widget subclass: #PresentationNavigator
-	instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
+Widget subclass: #Slide
+	instanceVariableNames: 'presentation'
 	category: 'Presentation'!
 
-!PresentationNavigator methodsFor: 'accessing'!
-
-currentPresentation: aPresentation
-	currentPresentation := aPresentation.
-!
-
-currentPresentation
-	^  currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
-!
-
-style
-	^ '
-#navigator {
-    z-index: 1;
-    position: fixed;
-    top: 0;
-    left: 50%;
-    margin-left: -150px;
-    padding: 5px;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    background: #333;
-    opacity: 0.3;
-    color: #eee;
-}
-
-#navigator a {
-    font-weight: bold;
-    color: #eee;
-    text-decoration: none;
-    cursor: pointer;
-    padding: 0 2px;
-    font-size: 14px;
-}
-
-#navigator:hover {
-    opacity: 0.8;
-}
-'
-! !
-
-!PresentationNavigator methodsFor: 'callbacks'!
-
-selectPresentation: aPresentationClass
-	self currentPresentation: aPresentationClass new.
-	self renderCurrentPresentation.
-!
-
-selectPresentationNamed: aString
-	|presentationClass|
-	presentationClass :=  (Smalltalk current at: aString).
-	presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
-!
+!Slide methodsFor: 'accessing'!
 
-previousSlide
-	self currentPresentation previousSlide.
-	self updateHash.
+presentation
+	^presentation
 !
 
-nextSlide
-	self currentPresentation nextSlide.
-	self updateHash.
+presentation: aPresentation
+	presentation := aPresentation
 !
 
-reload
-	|slideIndex|
-	slideIndex := self currentPresentation currentSlideIndex.
-	self currentPresentation: self currentPresentation class new.
-	self renderCurrentPresentation.
-	self selectSlideAt: slideIndex.
+id
+	^ self class name
 !
 
-selectSlideAt: anInteger
-	self currentPresentation moveAt: anInteger.
-	self updateHash.
+cssClass
+	^'slide'
 !
 
-updateHash
-	document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex.
-! !
-
-!PresentationNavigator methodsFor: 'hash'!
-
-checkHash
-	| hash presentation |
-	hash := (document location hash  replace: '^#' with: '') tokenize: '-'. 
-	presentation := Presentation concretePresentations 
-				detect: [:aPresentationClass | aPresentationClass name == hash first]
-				ifNone: [^ self].
-	presentation == self currentPresentation class ifFalse: [
-          	self selectPresentationNamed: presentation.
-          	self selectSlideAt: hash last
-        ].
+backgroundColor
+	^'#555'
 !
 
-checkHashChange
-	(window jQuery: window) bind: 'hashchange' do: [self checkHash]
+title
+	^ self id
 ! !
 
-!PresentationNavigator methodsFor: 'keybindings'!
+!Slide methodsFor: 'actions'!
 
-setKeybindings
-	(window jQuery: document) keyup: [:e || node |
-		node := e target nodeName asLowercase.
-		(node = 'textarea' or: [node = 'input']) ifFalse: [
-			e keyCode = 39 ifTrue: [self nextSlide].
-			e keyCode = 37 ifTrue: [self previousSlide]]]
+show
+	self backgroundColor ifNotNil: [
+		(window jQuery: '#slides') css: 'background' color: self backgroundColor].
+	(window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
+	(window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
 ! !
 
-!PresentationNavigator methodsFor: 'rendering'!
-
-renderToolsOn: html
-	html a 
-		with: 'IDE';
-		onClick: [TabManager current open].
-	html a
-		with: 'Reload';
-		onClick: [self reload].
-	html a
-		with: '←';
-		onClick: [self previousSlide].
-	html a
-		with: '→';
-		onClick: [self nextSlide].
-!
-
-renderPresentationSelectOn: html
-	|presentationSelect|
-	presentationSelect := html select.
-	presentationSelect
-		onChange: [self  selectPresentationNamed:  presentationSelect asJQuery val];
-		with: [	Presentation concretePresentationsDo: [:aPresentationClass |   
-                                                              							html option
-                                                              								value: aPresentationClass name;
-                                                              								with: aPresentationClass title ] ].
-!
-
-open
-	(window jQuery: document)  ready: [
-          	self 
-          		appendToJQuery: 'body' asJQuery;
-          		setKeybindings;
-          		checkHashChange.
-        ].
-!
+!Slide methodsFor: 'rendering'!
 
 renderOn: html
-	html style
-		type: 'text/css';
-		with: self style.
-	html div
-		id: 'navigator';
-		with: [	self
-					renderToolsOn: html;
-					renderPresentationSelectOn: html;
-                      			renderSlideSelectOn: html].
-
-	presentationBrush := html div 
-							id: 'presentation';
-							yourself.
-
-	self checkHash.
-	self renderCurrentPresentation.
-!
-
-renderCurrentPresentation
-	presentationBrush contents: [:html |
-        	self currentPresentation renderOn: html.
-        ].
-	self updateSlideSelect.
+	html div class: self cssClass; id: self id; with: [
+		self renderSlideOn: html.
+		self renderMetaOn: html]
 !
 
-renderSlideSelectOn: html
-	slideSelect := html select.
-	slideSelect onChange: [ self  selectSlideAt:  slideSelect asJQuery val ].
-	self updateSlideSelect.
+renderSlideOn: html
 !
 
-updateSlideSelect
-	slideSelect contents: [:html| |index|
-		                       		index := 0.
-                		       		self currentPresentation slidesDo: [ :aSlide|  
-                                		                                    				index := index + 1.
-                                                		                    				html option
-                                                                		    					value: index;
-                                                            								with: aSlide title ] ].
+renderMetaOn: html
+	html div 
+		id: 'meta';
+		with: [
+			html p class: 'title'; with: self presentation title.
+			html p class: 'description'; with: self presentation description.
+			html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
+			html a class: 'url'; with: self presentation url; href: self presentation url]
 ! !
 
-!PresentationNavigator class methodsFor: 'initialize'!
-
-initialize
-	^ self open
-!
+!Slide class methodsFor: 'instance creation'!
 
-open
-	^ self new open
+on: aPresentation
+	^self new
+		presentation: aPresentation;
+		yourself
 ! !
 
 Presentation subclass: #ESUG2011Presentation
@@ -1586,6 +1586,7 @@ slideClasses
 	JtalkAndJavascriptSlide.
 	FOSDEMBookletSlide.
 	FOSDEMJSPlayGroundSlide.
+	FOSDEMCanvasSlide.
 	FOSDEMAmberBackend
 }
 ! !
@@ -1726,3 +1727,32 @@ renderSnippet: aString on: html
 			editor)  setValue: aString.
 ! !
 
+Slide subclass: #FOSDEMCanvasSlide
+	instanceVariableNames: 'c2d canvas'
+	category: 'Presentation'!
+
+!FOSDEMCanvasSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1: 'Canvas made easy'.
+	canvas := html  canvas 
+				width: 700;
+				height: 400;
+				onClick: [self drawOnCanvas]
+!
+
+drawOnCanvas
+	|c2d|
+	c2d := canvas element getContext: '2d'.
+	c2d 
+		clearRect: 0 
+		y: 0 
+		width: canvas element width 
+		height: canvas element height.
+	
+	20 timesRepeat: [
+			c2d
+				at: 'fillStyle' put: 'rgba(', 255 atRandom asString, ',' , 255 atRandom asString, ',', 255 atRandom asString, ', 0.4)';
+				fillRect: 600 atRandom y: 300 atRandom width: 200 atRandom height: 200 atRandom ]
+! !
+