source: trunk/web-app/js/wizard.js @ 157

Last change on this file since 157 was 157, checked in by duh, 8 years ago
  • temporary commit
File size: 9.8 KB
Line 
1/**
2 * wizard javascript functions
3 *
4 * @author  Jeroen Wesbeek
5 * @since   20100115
6 * @package wizard
7 * @see     dbnp.studycapturing.WizardTagLib
8 * @see     dbnp.studycapturing.WizardController
9 *
10 * Revision information:
11 * $Rev$
12 * $Author$
13 * $Date$
14 */
15$(document).ready(function() {
16    // check if user is using Firefox 3.6 and warm the user
17    // about the XMLHttpRequest bug that causes the wizard to break...
18    re = /Firefox\/3\.6/gi;
19    if (navigator.userAgent.match(re)) {
20        // http://code.google.com/p/fbug/issues/detail?id=1899
21        var wizard = $('div#wizard')
22        wizard.html('<span style="color:red;font-size:8px;">Firefox 3.6 contains <a href="http://code.google.com/p/fbug/issues/detail?id=2746" target="_new">a bug</a> in combination with Firebug\'s XMLHttpRequest spy which causes the wizard to not function anymore. Please make sure you have firebug\'s XMLHttpRequest spy disabled use use Firefox 3.5.7 instead...</span>' + wizard.html())
23    }
24
25    // attach Tooltips
26    onWizardPage();
27});
28
29// runs when document is ready or a wizard action has been performs
30// @see _wizard.gsp, _navigation.gsp, _subjects.gsp
31function onWizardPage() {
32    // attach help tooltips
33    //insertYoutubePlayers();
34    attachHelpTooltips();
35    attachDatePickers();
36    attachTableEvents();
37    attachGroupingEvents();
38
39    resizeWizardTable();
40    attachSubjectSlider();
41}
42
43// attach help tooltips
44function attachHelpTooltips() {
45    // attach help action on all wizard help icons
46    $('div#wizard').find('div.helpIcon').each(function() {
47        helpIcon = $(this)
48        helpContent = helpIcon.parent().parent().find('div.helpContent')
49
50        // handle special content
51        var specialContent = helpContent.html().match(/\[([^:]+)\:([^\]]+)\]/)
52        if (specialContent) {
53            // replace content by calling a helper function
54            eval(specialContent[1] + "('" + specialContent[2] + "',helpContent)");
55        }
56
57        // attach tooltip
58        helpIcon.qtip({
59            content: 'leftMiddle',
60            position: {
61                corner: {
62                    tooltip: 'leftMiddle',
63                    target: 'rightMiddle'
64                }
65            },
66            style: {
67                border: {
68                    width: 5,
69                    radius: 10
70                },
71                padding: 10,
72                textAlign: 'center',
73                tip: true,
74                name: 'blue'
75            },
76            content: helpContent.html(),
77            show: 'mouseover',
78            hide: 'mouseout',
79            api: {
80                beforeShow: function() {
81                    // not used at this moment
82                }
83            }
84        })
85
86        // remove helpcontent div as we don't need it anymore
87        helpContent.remove();
88    });
89}
90
91// insert a youtube player in a certain element
92function youtube(video, element) {
93    // insert a div we will replace with a youtube player
94    element.html("<div id='" + video + "'></div>")
95
96    // insert youtube player
97    var params = { allowScriptAccess: "always" };
98    var atts = { id: 'myytplayer_' + video };
99    swfobject.embedSWF("http://www.youtube.com/v/" + video + "?enablejsapi=1&playerapiid=ytplayer_" + video,
100            video, "200", "150", "8", null, null, params, atts)
101}
102
103// when a youtube player is ready, play the video
104function onYouTubePlayerReady(playerId) {
105    ytplayer = document.getElementById("my" + playerId);
106    ytplayer.playVideo();
107}
108
109// add datepickers to date fields
110function attachDatePickers() {
111    $('div#wizard').find("input[type=text][name$='Date']").each(function() {
112        $(this).datepicker({
113            dateFormat  : 'dd/mm/yy',
114            altField    : '#' + $(this).attr('name') + 'Example',
115            altFormat   : 'DD, d MM, yy'
116        });
117    })
118}
119
120// attach subject events
121function attachTableEvents() {
122    $('div#wizard').find('div.row').each(function() {
123        $(this).hover(
124                function() {
125                    $(this).addClass('highlight');
126                },
127                function() {
128                    $(this).removeClass('highlight');
129                }
130        )
131    });
132}
133
134// if the wizard page contains a table, the width of
135// the header and the rows is automatically scaled to
136// the cummalative width of the columns in the header
137function resizeWizardTable() {
138    var wizardTable = $("div#wizard").find('div.table');
139
140    if (wizardTable) {
141        var header = wizardTable.find('div.header')
142        // calculate total width of elements in header
143        var width = 20;
144        header.children().each(function() {
145            // calculate width per column
146            var c = $(this);
147            var columnWidth = c.width();
148            columnWidth += parseInt(c.css("padding-left"), 10) + parseInt(c.css("padding-right"), 10);          // padding width
149            columnWidth += parseInt(c.css("margin-left"), 10) + parseInt(c.css("margin-right"), 10);            // margin width
150            columnWidth += parseInt(c.css("borderLeftWidth"), 10) + parseInt(c.css("borderRightWidth"), 10);    // border width
151            width += columnWidth;
152        });
153
154        // resize the header
155        header.css({ width: width + 'px' });
156
157        // set table row width and assume column widths are
158        // identical to those in the header (css!)
159        wizardTable.find('div.row').each(function() {
160            $(this).css({ width: width + 'px' });
161        });
162    }
163}
164
165// if we have a table and a slider, make the slider
166// slide the contents of the table if the content of
167// the table is wider than the table itself
168function attachSubjectSlider() {
169    var slider = $("div#wizard").find('div.slider');
170    var header = $("div#wizard").find('div.header');
171    var table = $("div#wizard").find('div.table');
172
173    if (slider && table && header) {
174        // do we really need a slider?
175        if (header.width() < table.width()) {
176            // no, so hide it
177            slider.css({ 'display': 'none '});
178        } else {
179            slider.slider({
180                value   : 1,
181                min     : 1,
182                max     : header.width() - table.width(),
183                step    : 1,
184                slide: function(event, ui) {
185                    $("div#wizard").find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
186                }
187            });
188        }
189    }
190}
191
192// handle selecting and grouping of subjects
193function attachGroupingEvents() {
194    console.log('attach drag and drop events')
195
196    $(".groups").find('div.group').droppable({
197        accept: '.subjects > ol > li',
198        drop: function(event, ui) {
199            /*
200            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
201deleteImage(ui.draggable);
202            function deleteImage($item) {
203                $item.fadeOut(function() {
204                    var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
205
206                    $item.find('a.ui-icon-trash').remove();
207                    $item.append(recycle_icon).appendTo($list).fadeIn(function() {
208                        $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
209                    });
210                });
211            }
212*/
213
214            //console.log($(this))
215            //console.log(ui.draggable)
216            var group = $(this)
217            var list = $('ul',group).length ? $('ul',group) : $('<ul class="gallery ui-helper-reset"/>').appendTo(group);
218
219            // append selected subjects to this group
220            $(".subjects").find(".ui-selected").each(function() {
221                // append to group
222                $(this).appendTo(list);
223
224                // make undraggable
225                /*
226                $(this).draggable('destroy');
227
228                //$(this).css({ 'position': 'absolute' });
229
230                // make all visible
231                $(this).animate(
232                    {opacity: 100},
233                    200
234                );
235                */
236            });
237
238
239
240        }
241    });
242
243
244    //$(".subjects").find(".selectable").selectable({
245    $(".selectable").selectable({
246        stop: function() {
247            // remove draggable from unselected items
248            $('.ui-selectee:not(.ui-selected)', this).each(function() {
249                $(this).draggable('destroy')
250            })
251
252            // attach draggable to selected items
253            var subjects = $('.ui-selected', this);
254            subjects.each(function() {
255                var d = this
256                var D = $(this)
257                var content = D.html()
258                var offset = D.offset()
259
260                D.draggable({
261                    revert: 'invalid',
262                    containment: '.grouping',
263                    corsor: 'move',
264                    start: function(event, ui) {
265                        // change dragged item's content to summarize selected items
266                        D.html(subjects.length + ' subjects');
267
268                        // hide the other items
269                        subjects.each(function() {
270                            if (this != d) {
271                                $(this).animate(
272                                    { opacity: 0 },
273                                    200
274                                );
275                            }
276                        });
277                    },
278                    stop: function(event, ui) {
279                        // restore original content
280                        D.html(content);
281
282                        // make selected items visible
283                        subjects.each(function() {
284                            if (this != d) {
285                                $(this).animate(
286                                    {opacity: 100},
287                                    200
288                                );
289                            }
290                        });
291                    }
292                });
293            });
294        }
295    });
296}
297
Note: See TracBrowser for help on using the repository browser.