wip
authorEugene Crosser <crosser@average.org>
Fri, 29 Aug 2008 09:59:48 +0000 (09:59 +0000)
committerEugene Crosser <crosser@average.org>
Fri, 29 Aug 2008 09:59:48 +0000 (09:59 +0000)
include/controls.js
include/gallery.css
include/gallery.js
include/show.js
include/showwin.js

index f27ac2a0e832248a380e836557735c1f221f86f9..0392bb77628584704143886b793375611d256b32 100644 (file)
@@ -26,36 +26,97 @@ var Controls = new Class({
        getOptions: function(){
                return {
                        onClick: $empty,
+                       zIndex: 3,
+                       buttonClass: 'controlButton',
+                       buttons: ['prev','stop','play','next','exit','comm'],
                }
        },
 
-       initialize: function(container, options){
+       initialize: function(name, parent, options){
                this.setOptions(this.getOptions(), options);
-               this.container = $(container);
-               var buttons = ['prev','stop','play','next','exit','comm'];
-               buttons.each(function(el){
+               this.parent = $(parent);
+               this.container = new Element('div').addClass(name).
+               setProperties({
+                       id: name,
+                       name: name,
+               }).setStyles({
+                       zIndex: this.options.zIndex,
+               }).addEvent('click', function(){
+                       this.options.onClick()
+               }.bind(this)).injectInside(this.parent);
+               this.options.buttons.each(function(el){
                        var sub = new Element('div');
-                       sub.addClass('controlButton').setProperties({
+                       sub.addClass(this.options.buttonClass).setProperties({
                                id: el,
                                name: el,
-                       }).injectInside(this.container);
-                       this[el] = sub;
+                               title: el,
+                       }).addEvent('click', function(){
+                               this[el]();
+                       }.bind(this)).injectInside(this.container);
+                       this[el+'box'] = sub;
                },this);
+               this.posbox = new Element('span').
+               addClass('controlPosition').setProperties({
+                       id: 'controlPosition',
+               }).injectInside(this.commbox);
+               this.refbox = new Element('a', {
+                       href: 'javascript: void();',
+                       html: 'title',
+               }).addClass('controlRef').setProperties({
+                       id: 'controlRef',
+               }).injectInside(this.commbox);
        },
 
        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);
        },
 
+       prev: function(){
+               if (this.show.prev) { this.show.prev() }
+               else { alert('no method for "prev", file complaint with UN') }
+       },
+
+       stop: function(){
+               if (this.show.stop) { this.show.stop() }
+               else { alert('no method for "stop", file complaint with UN') }
+       },
+
+       play: function(){
+               if (this.show.play) { this.show.play() }
+               else { alert('no method for "play", file complaint with UN') }
+       },
+
+       next: function(){
+               if (this.show.next) { this.show.next() }
+               else { alert('no method for "next", file complaint with UN') }
+       },
 
+       exit: function(){
+               if (this.show.exit) { this.show.exit() }
+               else { alert('no method for "exit", file complaint with UN') }
+       },
+
+       comm: function(){
+               if (this.show.comm) { this.show.comm() }
+               else { alert('no method for "comm", file complaint with UN') }
+       },
+
+       info: function(pos, max, ref, txt){
+               var msg = 'pos='+pos+', max='+max+', ref='+ref+', txt='+txt;
+               this.refbox.set('html',txt);
+               this.refbox.set('href',ref);
+               this.posbox.set('text',pos+' of '+max);
+       },
+
+       running: function(isrunning){
+               if (isrunning) {
+                       this.playbox.setStyle('display', 'none');
+                       this.stopbox.setStyle('display', 'block');
+               } else {
+                       this.stopbox.setStyle('display', 'none');
+                       this.playbox.setStyle('display', 'block');
+               }
+       },
 });
 Controls.implement(new Options);
 
index dfecd8d65dff99c5f2b98f25e678fa574d3bbca7..0a8c92807a31cfeb2098d1a982b67d14aa4d5fca 100644 (file)
@@ -92,6 +92,7 @@ table.picframe {
  height: 30px;
  z-index: 3;
  opacity: .15;
+ color: white;
 }
 
 .slideshowControls:hover {
@@ -117,22 +118,22 @@ table.picframe {
 }
 
 .controlButton#play {
- left: 53px;
+ left: 28px;
  background: url(play.png) no-repeat;
 }
 
 .controlButton#next {
- left: 78px;
+ left: 53px;
  background: url(right.png) no-repeat;
 }
 
 .controlButton#exit {
- left: 103px;
+ left: 78px;
  background: url(close.png) no-repeat;
 }
 
 .controlButton#comm {
- left: 128px;
+ left: 103px;
  width: auto;
  font-size: 20px;
  margin-left: .5ex;
@@ -144,7 +145,6 @@ table.picframe {
 }
 
 .controlButton#comm a {
- color: white;
  text-decoration: none;
 }
 
index 25a2a5a285d876297cd6b36c6d3edf3bd4d8da99..5cd2b5d9261718c67b0c160bbabda9739e336ca2 100644 (file)
@@ -9,82 +9,9 @@
 */
 
 /*
-       Slideshow
+       Use slideshow classes with the index generated by mkgallery.pl
 */
 
-var showWindow = new Class({
-
-       getOptions: function(){
-               return {
-                       embed: [],
-                       zIndex: 2,
-                       container: document.body,
-                       onClick: $empty,
-               }
-       },
-
-       initialize: function(name,options){
-               this.setOptions(this.getOptions(), options)
-
-               this.options.container = $(this.options.container)
-
-               this.container = new Element('div').addClass(name).
-               setProperties({
-                       id: name,
-                       name: name,
-               }).setStyles({
-                       position: 'absolute',
-                       left: '0px',
-                       top: '0px',
-                       width: '100%',
-                       zIndex: this.options.zIndex,
-                       overflow: 'hidden',
-                       display: 'none'
-               }).addEvent('click', function(){
-                       this.options.onClick()
-               }.bind(this)).injectInside(this.options.container);
-
-               this.embedded = []
-               this.options.embed.each(function(el){
-                       var sub = new Element('div')
-                       sub.addClass(el).setProperties({
-                               id: el,
-                               name: el,
-                       }).injectInside(this.container)
-                       this.embedded.push(sub)
-               },this)
-
-               this.position()
-
-               window.addEvent('resize', this.position.bind(this))
-               window.addEvent('scroll', this.position.bind(this))
-       },
-
-       position: function(){
-               if(this.options.container == document.body){
-                       this.h = window.getHeight()
-                       this.s = window.getScrollTop()
-               }else{
-                       var myCoords = this.options.container.getCoordinates()
-                       this.h = myCoords.height
-                       this.s = myCoords.top
-               }
-               this.container.setStyles({
-                       top: this.s+'px',
-                       height: this.h+'px'
-               })
-       },
-
-       show: function(){
-               this.container.setStyle('display', 'block')
-       },
-
-       hide: function(){
-               this.container.setStyle('display', 'none')
-       }
-})
-showWindow.implement(new Options)
-
 var showControls = new Class({
 
        getOptions: function(){
@@ -122,42 +49,21 @@ showControls.implement(new Options)
 
 /* Make overlay window and start slideshow */
 function showImage(id,doplay) {
- var i=rimgs[id]
- /* alert('show id='+id+' index='+i+' doplay='+doplay) */
- showwin.show()
- show.play(i)
- if (!doplay) {
-  show.stop()
- }
- return false
      var i=rimgs[id]
      /* alert('show id='+id+' index='+i+' doplay='+doplay) */
      showwin.show()
      show.play(i)
      if (!doplay) {
+               show.stop()
      }
      return false
 }
 
 /* Stop slideshow and return to index page */
 function showStop() {
- show.quit()
- showwin.hide()
- /*
- var img = show.newImage.getElement('img');
- if(img) {
-  alert('remove element: '+img.get('tag')+'.'+img.get('class')+
-   '#'+img.get('id')+' src='+img.get('src'))
-  img.dispose()
- }
-
- img = show.oldImage.getElement('img');
- if(img) {
-  alert('remove element: '+img.get('tag')+'.'+img.get('class')+
-   '#'+img.get('id')+' src='+img.get('src'))
-  img.dispose()
- }
-
- show.imagesHolder.getElements('img').each(function(el){
-  alert('remove element: '+el.get('tag')+'.'+el.get('class')+'#'+el.get('id')+
-   ' src='+el.get('src'))
-  el.dispose()
- })
- */
- return false
+       show.quit()
+       showwin.hide()
+       return false
 }
 
 /* List of lists of img variations. Each image variation is a three-element  */
@@ -165,97 +71,100 @@ function showStop() {
 var vimgs=[]
 /*
  * [
- *  [
- *   [width, height, url]
+ *  [ id, title, [
+ *                [ width, height, url ]
+ *                ...
+ *               ]
  *   ...
  *  ]
  *  ...
  * ]
 */
-/* resolve string ID to index */
+/* resolve string ID to index No which is the index in vimgs[] array */
 var rimgs=[]
 
 /* Initialize everything, to be called on domready */
 function init_gallery() {
- $$('.conceal').each(function(el){
-  el.setStyle('display', 'none')
- })
- $$('a.infoBox').each(function(el){
-  var url=el.get('href')
-  el.set('href',url+'?conceal')
- })
- $$('a.showStart').each(function(el){
-  el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
- })
- $$('a.showImage').each(function(el){
-  el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
- })
- $$('div.varimages').each(function(el,i){
-  rimgs[el.id] = i
-  vimgs[i] = []
-  el.getElements('a').each(function(ael,j){
-   dim = /(\d+)[^\d](\d+)/.exec(ael.text)
-   w = dim[1]
-   h = dim[2]
-   vimgs[i][j]=[w,h,ael.href,el.id,el.title]
-  })
- })
-   /* debugging output
- var msg='loaded '+vimgs.length+' image descriptions:'
- vimgs.each(function(vimg,i){
-  msg+='\nid='+i
-  vimg.each(function(vimg,i){
-   msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
-  })
- })
- alert(msg)
-   /* end debugging output */
-
- var ovlparams = {}
- ovl = new overlay(ovlparams)
-
- var iboxparams = {
-  overlay: ovl,
-  showNumbers: false,
-  showControls: true,
-  openFromLink: false,
-  movieWidth: 640,
-  movieHeight: 480,
-  descClassName: 'infoBoxDesc',
- }
- ibox = new multiBox('infoBox', iboxparams)
-
- var winparms = {
-  /* onClick: showStop,  /* temporarily */
-  embed: ['slideshowControls'],
- }
- showwin = new showWindow('slideshowContainer',winparms)
-
- var showparms = {
-  wait: 3000,
-  effect: 'fade',
-  duration: 1000,
-  loop: false, 
-  thumbnails: false,
-  onClick: function(i){alert(i)},
-  comment: 'comm',
- }
- show = new slideShow('slideshowContainer',vimgs,showparms)
+       $$('.conceal').each(function(el){
+               el.setStyle('display', 'none')
+       })
+       $$('a.infoBox').each(function(el){
+               var url=el.get('href')
+               el.set('href',url+'?conceal')
+       })
+       $$('a.showStart').each(function(el){
+               el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
+       })
+       $$('a.showImage').each(function(el){
+               el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
+       })
+       $$('div.varimages').each(function(el,i){
+               rimgs[el.id] = i
+               vimgs[i] = []
+               el.getElements('a').each(function(ael,j){
+                       dim = /(\d+)[^\d](\d+)/.exec(ael.text)
+                       w = dim[1]
+                       h = dim[2]
+                       vimgs[i][j]=[w,h,ael.href,el.id,el.title]
+               })
+       })
+
+                       /* debugging output
+       var msg='loaded '+vimgs.length+' image descriptions:'
+       vimgs.each(function(vimg,i){
+               msg+='\nid='+i
+               vimg.each(function(vimg,i){
+                       msg+='\n     w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
+               })
+       })
+       alert(msg)
+                       /* end debugging output */
+
+       var ovlparams = {}
+       ovl = new overlay(ovlparams)
+
+       var iboxparams = {
+               overlay: ovl,
+               showNumbers: false,
+               showControls: true,
+               openFromLink: false,
+               movieWidth: 640,
+               movieHeight: 480,
+               descClassName: 'infoBoxDesc',
+       }
+       ibox = new multiBox('infoBox', iboxparams)
 
- var ctlparams = {
-  next: function(){show.next()},
-  prev: function(){show.previous()},
-  stop: function(){show.stop()},
-  play: function(){show.play()},
-  exit: function(){showStop()},
- }
- ctl = new showControls('slideshowControls',ctlparams)
+       var winparms = {
+               /* onClick: showStop,  /* temporarily */
+               embed: ['slideshowControls'],
+       }
+       showwin = new showWindow('slideshowContainer',winparms)
+
+       var showparms = {
+               wait: 3000,
+               effect: 'fade',
+               duration: 1000,
+               loop: false, 
+               thumbnails: false,
+               onClick: function(i){alert(i)},
+               comment: 'comm',
+       }
+       show = new slideShow('slideshowContainer',vimgs,showparms)
+
+       var ctlparams = {
+               next: function(){show.next()},
+               prev: function(){show.previous()},
+               stop: function(){show.stop()},
+               play: function(){show.play()},
+               exit: function(){showStop()},
+       }
+       ctl = new showControls('slideshowControls',ctlparams)
 
- parsedurl = parseUrl(document.URL)
- /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
- if ($chk(parsedurl['anchor'])){
-  showImage(parsedurl['anchor'],0)
- }
      parsedurl = parseUrl(document.URL)
      /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
      if ($chk(parsedurl['anchor'])){
+               showImage(parsedurl['anchor'],0)
      }
 }
 
 /* Initialization */
index 066485c88cb597534ac27ce26ce77e942384ff8e..427cb38a834fc0fec1887cf59035b7b35fbc1b58 100644 (file)
@@ -37,6 +37,7 @@ var Show = new Class({
        getOptions: function(){
                return {
                        onClick: $empty,
+                       exit: function(){ alert('show exit undefined'); },
                }
        },
 
@@ -59,6 +60,37 @@ var Show = new Class({
                alert('show.scroller called');
        },
 
+       prev: function(){
+               this.controls.info(-1,this.vimgs.length,
+                               '<ref>','prev called');
+       },
+
+       stop: function(){
+               this.controls.info(0,this.vimgs.length,
+                               '<ref>','stop called');
+               this.controls.running(0);
+       },
+
+       play: function(){
+               this.controls.info(999,this.vimgs.length,
+                               '<ref>','play called');
+               this.controls.running(1);
+       },
+
+       next: function(){
+               this.controls.info(1,this.vimgs.length,
+                               '<ref>','next called');
+       },
+
+       exit: function(){
+               this.options.exit();
+       },
+
+       comm: function(){
+               alert('show.comm called, do nothing');
+       },
+
 });
 Show.implement(new Options);
+Show.implement(new Events);
 
index daec73a234cb46fab57ffcf3ae744df6acf11a5d..6171ba2ee47ab5538f4bb6392578a7d995576e73 100644 (file)
@@ -16,7 +16,6 @@ var showWindow = new Class({
 
        getOptions: function(){
                return {
-                       embed: [],
                        zIndex: 2,
                        container: document.body,
                        onClick: $empty,
@@ -44,16 +43,6 @@ var showWindow = new Class({
                        this.options.onClick()
                }.bind(this)).injectInside(this.options.container);
 
-               this.embedded = [];
-               this.options.embed.each(function(el){
-                       var sub = new Element('div');
-                       sub.addClass(el).setProperties({
-                               id: el,
-                               name: el,
-                       }).injectInside(this.container);
-                       this.embedded.push(sub);
-               },this);
-
                this.position();
 
                window.addEvent('resize', this.position.bind(this));