Re: [Proto-Scripty] Assistance with clicks

Thu, 07 Jan 2010 03:55:57 -0800 

Walter Lee Davis wrote:
I just did something very similar (also a calendar) and what I came up with was this: I had a single overlay DIV hidden at the top of the page, and after a click on an empty cell, I would load the overlay with the Create Appointment screen, use Element.clonePosition() to set the top and left of the overlay to match the cell that was clicked on, and then Effect.Grow to cause it to appear. 
Thanks Walter,
Obviously I will need study this for a bit - thanks

bill
For an existing appointment, the same thing would happen except that I would load the Edit Appointment screen by following the link on the A tag that represented the existing appointment.
Here's the relevant code, note that there are some optimizations I have not made (substitute Event.findElement for my business with the tagName attribute). References to combinator() are simply setting up combo box behavior on select elements. 

    document.observe('click',function(evt){
        var elm = evt.element();
        var o = $('overlay');
        if($('table_week') && elm.descendantOf($('table_week'))){
            evt.stop();
            if(elm.tagName.toLowerCase() == 'a'){
                if(o.visible()) o.hide();
o.clonePosition(elm.up('td'),{setWidth:false,setHeight:false}); 
                new Ajax.Updater('overlay',elm.href,{
                    onComplete:function(){
                        o.grow({direction:'top-left',
                            duration:0.5,
                            afterFinish:function(){
                                o.down('img.close').show();
                                o.down('form').focusFirstElement();
                                o.setOpacity(0.999);
                            }
                        });
                        combinator();
                    },
                    evalScripts: true
                });
            }else{
                if(elm.tagName.toLowerCase() != 'td') elm = elm.up('td');
                if(elm.id && !elm.hasClassName('disabled')){
                    evt.stop();
                    if(o.visible()) o.hide();
o.clonePosition(elm,{setWidth:false,setHeight:false}); 
                    var parts = elm.id.split(/_/);
var date = parts[1] + '-' + parts[2] + '-' + parts[3] + ' ' + parts[4]; 
                    new Ajax.Updater('overlay','appointments/create',{
                        parameters:{
                            start_at: date + ':00:00',
                            calendars_id: $F('calendars_id'),
                            parent: elm.id
                        },
                        onComplete:function(){
                            o.grow({direction:'top-left',
                                duration:0.5,
                                afterFinish:function(){
                                    o.down('img.close').show();
                                    o.down('form').focusFirstElement();
                                    o.setOpacity(0.999);
                                }
                            });
                            combinator();
                        },
                        evalScripts: true
                    });
                }
            }
        }
    });
    $('overlay').observe('click',function(evt){
        if(evt.element().hasClassName('close')) this.hide();
    });


Walter


On Jan 6, 2010, at 7:42 AM, bill wrote:
I am trying am ambitious project - a scheduling system (as part of another application) and need some assistance. 
Via AJAX I will load a div with:
  a header div
  a main div.
The main div will contain 0..40 small divs that are displayed as a 7 day schedule. 
I can do all this.
The user will click on a spot in the main div to create an appointment or will click on one of the small divs that represent existing appointments. 

now for the part with which I need help.
If they click on a spot in the main div that does not have a appointment div I need to determine the coordinates of the click both in terms of the main div and the viewport (as the content of the main div will scroll) so I can display a div near the click with a form to fill in to create an appointment.
If they click on an existing appointment div I need to determine the coordinates and the div's ID.
From what little I know about prototype I presume I need an observer of the main div, but I do not understand how to write it and then process the event information. 

Suggestions, links, and/or a tutorial would be much appreciated.
--
Bill Drescher
william {at} TechServSys {dot} com
--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. 




--
Bill Drescher
william {at} TechServSys {dot} com
--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected].
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to