start "new" slideshow functionality
authorEugene Crosser <crosser@average.org>
Thu, 28 Aug 2008 09:36:41 +0000 (09:36 +0000)
committerEugene Crosser <crosser@average.org>
Thu, 28 Aug 2008 09:36:41 +0000 (09:36 +0000)
README
include/controls.js [new file with mode: 0644]
include/show.js [new file with mode: 0644]

diff --git a/README b/README
index 0e074612ddaf2d931a70f1593a9ccacf8a493841..9b0d39d0cfdc399fff77b0557716b675ea819450 100644 (file)
--- a/README
+++ b/README
@@ -72,26 +72,9 @@ http://www.average.org/mkgallery/
 
 TODO:
 - make index.html depend of .title and directory timestamps
+- rebuild htmls in .html when directory timestamp chnges (images added)
+- make links in the rss file relative
 - new javascript slideshow:
-  - On show image: find this and next urls; put in place
-    those that are already here; free unneeded; initiate download of
-    the rest; if needed image is ready then initiate "transitioning", else
-    initiate "loading".
-  - On load complete: if this is the target image, initiate "transitioning".
-  - On "loading": show "loading" image
-  - On "transitioning": hide "loading" image; initiate FX animation to the
-    needed image.
-  - On animation complete: blank previous image; if "playing" then schedule
-    autoswitch to next image in the future.
-  - On autoswitch to next image: if "playing" then switch to next image.
-  - On switch to next image: if next exists, show next image, else show
-    "last image" message.
-  - On switch to prev image: if prev exists, show prev image, else show
-    "first image" message.
-  - On "play": make "playing"; switch to next image.
-  - On "stop": if "playing" cancel autoswitch; break "playing".
-  - On "start show": set up things; set "playing" state; show needed image.
-  - On "stop show": cancel any schedules, hide things.
 - make "controls" and "slideshow" two "co-routine" style classes.
 
 Eugene Crosser <crosser at average dot org>
diff --git a/include/controls.js b/include/controls.js
new file mode 100644 (file)
index 0000000..8823d6c
--- /dev/null
@@ -0,0 +1,59 @@
+/*
+        This is a part of mkgallery.pl suite
+        http://www.average.org/mkgallery/
+
+       Uses mootools (1.2) http://www.mootools.net/
+       Inspired by slideshow http://www.phatfusion.net/slideshow/
+*/
+
+/*
+       Slideshow controls
+
+  - First, initialize "controls" without hooks to the "show".
+  - Then, initialize "show" passing "controls" object as an argument to
+    the constructor.
+  - From the "show" constructuor, call "controls"'s "complete initialization"
+    method passing them "this", so that they will be able to access "show"'s
+    methods.
+  - Because this is slightly simpler than symmetric "co-routine" approach,
+    and arguably better suits the task at hand.
+*/
+
+var Controls = new Class({
+
+       getOptions: function(){
+               return {
+                       onClick: $empty,
+               }
+       },
+
+       initialize: function(container, options){
+               this.setOptions(this.getOptions(), options);
+               this.container = $(container);
+               var buttons = ['prev','stop','play','next','exit','comm'];
+               buttons.each(function(el){
+                       var sub = new Element('div');
+                       sub.addClass('controlButton').setProperties({
+                               id: el,
+                               name: el,
+                       }).injectInside(this.container);
+                       this[el] = sub;
+               },this);
+       },
+
+       registershow: function(show){
+               alert('controls.registershow called');
+               this.show = show;
+               var buttons = ['prev','stop','play','next','exit'];
+               buttons.each(function(el){
+                       var sub = new Element('div');
+                       sub.addEvent('click', function() {
+                               this.show[el]();
+                       }.bind(this.show));
+               },this);
+       },
+
+
+});
+Controls.implement(new Options);
+
diff --git a/include/show.js b/include/show.js
new file mode 100644 (file)
index 0000000..cdd6af0
--- /dev/null
@@ -0,0 +1,62 @@
+/*
+        This is a part of mkgallery.pl suite
+        http://www.average.org/mkgallery/
+
+       Uses mootools (1.2) http://www.mootools.net/
+       Inspired by slideshow http://www.phatfusion.net/slideshow/
+*/
+
+/*
+       Slideshow
+
+  - On show image: find this and next urls; put in place
+    those that are already here; free unneeded; initiate download of
+    the rest; if needed image is ready then initiate "transitioning", else
+    initiate "loading".
+  - On load complete: if this is the target image, initiate "transitioning".
+  - On "loading": show "loading" image
+  - On "transitioning": hide "loading" image; initiate FX animation to the
+    needed image.
+  - On animation complete: blank previous image; if "playing" then schedule
+    autoswitch to next image in the future.
+  - On autoswitch to next image: if "playing" then switch to next image.
+  - On switch to next image: if next exists, show next image, else show
+    "last image" message.
+  - On switch to prev image: if prev exists, show prev image, else show
+    "first image" message.
+  - On "play": make "playing"; switch to next image.
+  - On "stop": if "playing" cancel autoswitch; break "playing".
+  - On "start show": set up things; set "playing" state; show needed image.
+  - On "stop show": cancel any schedules, hide things.
+*/
+
+var Show = new Class({
+
+       getOptions: function(){
+               return {
+                       onClick: $empty,
+               }
+       },
+
+       initialize: function(vimgs, container, controls, options){
+               this.setOptions(this.getOptions(), options);
+               this.vimgs = vimgs;
+               this.container = $(container);
+               this.controls = controls;
+               this.controls.registershow(this);
+
+               window.addEvent('resize', this.resizer.bind(this))
+               window.addEvent('scroll', this.scroller.bind(this))
+       },
+
+       resizer: function(){
+               alert('show.resizer called');
+       },
+
+       scroller: function(){
+               alert('show.scroller called');
+       },
+
+});
+Show.implement(new Options);
+