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

Last change on this file since 159 was 159, checked in by duh, 9 years ago
  • tag library now handles (INT and STRINGLIST) templateFields correctly
  • development.js can now reload CSS and JS on the fly (extermely handy for testing within flows)
  • some CSS changes
File size: 9.1 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        if (wizard.find("#warning").length == 0) {
23            wizard.html('<span id="warning" 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())
24        }
25    }
26
27    // attach Tooltips
28    onWizardPage();
29});
30
31// runs when document is ready or a wizard action has been performs
32// @see _wizard.gsp, _navigation.gsp, _subjects.gsp
33function onWizardPage() {
34    // attach help tooltips
35    //insertYoutubePlayers();
36    attachHelpTooltips();
37    attachDatePickers();
38    attachTableEvents();
39    attachGroupingEvents();
40
41    resizeWizardTable();
42    attachSubjectSlider();
43}
44
45// attach help tooltips
46function attachHelpTooltips() {
47    // attach help action on all wizard help icons
48    $('div#wizard').find('div.helpIcon').each(function() {
49        helpIcon = $(this)
50        helpContent = helpIcon.parent().parent().find('div.helpContent')
51
52        // handle special content
53        var html = (helpContent.html()) ? helpContent.html() : '';
54        if (html) {
55            var specialContent = html.match(/\[([^:]+)\:([^\]]+)\]/)
56            if (specialContent) {
57                // replace content by calling a helper function
58                eval(specialContent[1] + "('" + specialContent[2] + "',helpContent)");
59            }
60
61            // attach tooltip
62            helpIcon.qtip({
63                content: 'leftMiddle',
64                position: {
65                    corner: {
66                        tooltip: 'leftMiddle',
67                        target: 'rightMiddle'
68                    }
69                },
70                style: {
71                    border: {
72                        width: 5,
73                        radius: 10
74                    },
75                    padding: 10,
76                    textAlign: 'center',
77                    tip: true,
78                    name: 'blue'
79                },
80                content: helpContent.html(),
81                show: 'mouseover',
82                hide: 'mouseout',
83                api: {
84                    beforeShow: function() {
85                        // not used at this moment
86                    }
87                }
88            })
89
90            // remove helpcontent div as we don't need it anymore
91            helpContent.remove();
92        }
93    });
94}
95
96// insert a youtube player in a certain element
97function youtube(video, element) {
98    // insert a div we will replace with a youtube player
99    element.html("<div id='" + video + "'></div>")
100
101    // insert youtube player
102    var params = { allowScriptAccess: "always" };
103    var atts = { id: 'myytplayer_' + video };
104    swfobject.embedSWF("http://www.youtube.com/v/" + video + "?enablejsapi=1&playerapiid=ytplayer_" + video,
105            video, "200", "150", "8", null, null, params, atts)
106}
107
108// when a youtube player is ready, play the video
109function onYouTubePlayerReady(playerId) {
110    ytplayer = document.getElementById("my" + playerId);
111    ytplayer.playVideo();
112}
113
114// add datepickers to date fields
115function attachDatePickers() {
116    $('div#wizard').find("input[type=text][name$='Date']").each(function() {
117        $(this).datepicker({
118            dateFormat  : 'dd/mm/yy',
119            altField    : '#' + $(this).attr('name') + 'Example',
120            altFormat   : 'DD, d MM, yy'
121        });
122    })
123}
124
125// attach subject events
126function attachTableEvents() {
127    $('div#wizard').find('div.row').each(function() {
128        $(this).hover(
129                function() {
130                    $(this).addClass('highlight');
131                },
132                function() {
133                    $(this).removeClass('highlight');
134                }
135                )
136    });
137}
138
139// if the wizard page contains a table, the width of
140// the header and the rows is automatically scaled to
141// the cummalative width of the columns in the header
142function resizeWizardTable() {
143    var wizardTable = $("div#wizard").find('div.table');
144
145    if (wizardTable) {
146        var header = wizardTable.find('div.header')
147        // calculate total width of elements in header
148        var width = 20;
149        header.children().each(function() {
150            // calculate width per column
151            var c = $(this);
152            var columnWidth = c.width();
153            columnWidth += parseInt(c.css("padding-left"), 10) + parseInt(c.css("padding-right"), 10);          // padding width
154            columnWidth += parseInt(c.css("margin-left"), 10) + parseInt(c.css("margin-right"), 10);            // margin width
155            columnWidth += parseInt(c.css("borderLeftWidth"), 10) + parseInt(c.css("borderRightWidth"), 10);    // border width
156            width += columnWidth;
157        });
158
159        // resize the header
160        header.css({ width: width + 'px' });
161
162        // set table row width and assume column widths are
163        // identical to those in the header (css!)
164        wizardTable.find('div.row').each(function() {
165            $(this).css({ width: width + 'px' });
166        });
167    }
168}
169
170// if we have a table and a slider, make the slider
171// slide the contents of the table if the content of
172// the table is wider than the table itself
173function attachSubjectSlider() {
174    var slider = $("div#wizard").find('div.slider');
175    var header = $("div#wizard").find('div.header');
176    var table = $("div#wizard").find('div.table');
177
178    if (slider && table && header) {
179        // do we really need a slider?
180        if (header.width() < table.width()) {
181            // no, so hide it
182            slider.css({ 'display': 'none '});
183        } else {
184            slider.slider({
185                value   : 1,
186                min     : 1,
187                max     : header.width() - table.width(),
188                step    : 1,
189                slide: function(event, ui) {
190                    $("div#wizard").find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
191                }
192            });
193        }
194    }
195}
196
197// handle selecting and grouping of subjects
198function attachGroupingEvents() {
199    console.log('attach drag and drop events')
200
201    $(".groups").find('div.group').droppable({
202        accept: '.subjects > ol > li',
203        drop: function(event, ui) {
204            var group = $(this)
205            var list = $('ul', group).length ? $('ul', group) : $('<ul class="henk"/>').appendTo(group);
206
207            // append selected subjects to this group
208            $(".subjects").find(".ui-selected").each(function() {
209                // append to group
210                $(this).appendTo(list);
211            });
212
213
214        }
215    });
216
217
218    //$(".subjects").find(".selectable").selectable({
219    $(".selectable").selectable({
220        stop: function() {
221            // remove draggable from unselected items
222            $('.ui-selectee:not(.ui-selected)', this).each(function() {
223                $(this).draggable('destroy')
224            })
225
226            // attach draggable to selected items
227            var subjects = $('.ui-selected', this);
228            subjects.each(function() {
229                var d = this
230                var D = $(this)
231                var content = D.html()
232                var offset = D.offset()
233
234                D.draggable({
235                    revert: 'invalid',
236                    containment: '.grouping',
237                    corsor: 'move',
238                    start: function(event, ui) {
239                        // change dragged item's content to summarize selected items
240                        D.html(subjects.length + ' subjects');
241
242                        // hide the other items
243                        subjects.each(function() {
244                            if (this != d) {
245                                $(this).animate(
246                                { opacity: 0 },
247                                        200
248                                        );
249                            }
250                        });
251                    },
252                    stop: function(event, ui) {
253                        // restore original content
254                        D.html(content);
255
256                        // make selected items visible
257                        subjects.each(function() {
258                            if (this != d) {
259                                $(this).animate(
260                                {opacity: 100},
261                                        200
262                                        );
263                            }
264                        });
265                    }
266                });
267            });
268        }
269    });
270}
271
Note: See TracBrowser for help on using the repository browser.