Changeset 145 for trunk/web-app/js


Ignore:
Timestamp:
Jan 28, 2010, 5:34:50 PM (13 years ago)
Author:
duh
Message:
  • wizard subjects page now build a table with features, does not work properly yet
  • youtube autoplay help items are possible now
  • development grouping page for selecting subjects and grouping them by dragging and dropping
Location:
trunk/web-app/js
Files:
2 added
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/web-app/js/wizard.js

    r107 r145  
    1414 */
    1515$(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...
    1618    re = /Firefox\/3\.6/gi;
    1719    if (navigator.userAgent.match(re)) {
     
    2224
    2325    // 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();
    2434    attachHelpTooltips();
    25 });
     35    attachDatePickers();
     36    attachTableEvents();
     37    attachGroupingEvents();
     38}
    2639
    2740// attach help tooltips
     
    2942    // attach help action on all wizard help icons
    3043    $('div#wizard').find('div.helpIcon').each(function() {
    31         $(this).qtip({
     44        helpIcon = $(this)
     45        helpContent = helpIcon.parent().parent().find('div.helpContent')
     46
     47        // handle special content
     48        var specialContent = helpContent.html().match(/\[([^:]+)\:([^\]]+)\]/)
     49        if (specialContent) {
     50            // replace content by calling a helper function
     51            eval(specialContent[1]+"('"+specialContent[2]+"',helpContent)");
     52        }
     53
     54        // attach tooltip
     55        helpIcon.qtip({
    3256            content: 'leftMiddle',
    3357            position: {
     
    4771                name: 'blue'
    4872            },
    49             content: $(this).parent().parent().find('div.helpContent').html(),
     73            content: helpContent.html(),
    5074            show: 'mouseover',
    51             hide: 'mouseout'
     75            hide: 'mouseout',
     76            api: {
     77                beforeShow: function() {
     78                    // not used at this moment
     79                }
     80            }
    5281        })
     82
     83        // remove helpcontent div as we don't need it anymore
     84        helpContent.remove();
    5385    });
    5486}
     87
     88// insert a youtube player in a certain element
     89function youtube(video,element) {
     90    // insert a div we will replace with a youtube player
     91    element.html("<div id='"+video+"'></div>")
     92
     93    // insert youtube player
     94    var params = { allowScriptAccess: "always" };
     95    var atts = { id: 'myytplayer_'+video };
     96    swfobject.embedSWF("http://www.youtube.com/v/"+video+"?enablejsapi=1&playerapiid=ytplayer_"+video,
     97                       video, "200", "150", "8", null, null, params, atts)
     98}
     99
     100// when a youtube player is ready, play the video
     101function onYouTubePlayerReady(playerId) {
     102    ytplayer = document.getElementById("my"+playerId);
     103    ytplayer.playVideo();
     104}
     105
     106// add datepickers to date fields
     107function attachDatePickers() {
     108    $('div#wizard').find("input[type=text][name$='Date']").each(function() {
     109        $(this).datepicker({
     110            dateFormat  : 'dd/mm/yy',
     111            altField    : '#' + $(this).attr('name') + 'Example',
     112            altFormat   : 'DD, d MM, yy'
     113        });
     114    })
     115}
     116
     117// attach subject events
     118function attachTableEvents() {
     119    $('div#wizard').find('div.row').each(function() {
     120        $(this).hover(
     121            function() {
     122                $(this).addClass('highlight');
     123            },
     124            function() {
     125                $(this).removeClass('highlight');
     126            }
     127        )
     128    });
     129}
     130
     131function attachGroupingEvents() {
     132    console.log('attach drag and drop events')
     133
     134    $(".groups").find('div.droppable').droppable({
     135                drop: function(event, ui) {
     136                        $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
     137                }
     138        });
     139
     140
     141    $(".subjects").find(".selectable").selectable({
     142        stop: function() {
     143            // remove draggable from unselected items
     144            $('.ui-selectee:not(.ui-selected)', this).each(function() {
     145                $(this).draggable('destroy')   
     146            })
     147
     148            // attach draggable to selected items
     149            var subjects = $('.ui-selected', this);
     150            subjects.each(function() {
     151                var d = this
     152                var D = $(this)
     153                var content = D.html()
     154                var offset = D.offset()
     155
     156                D.draggable({
     157                    revert: 'invalid',
     158                    start: function(event, ui) {
     159                        // change dragged item's content to summarize selected items
     160                        D.html(subjects.length + ' subjects');
     161
     162                        // hide the other items
     163                        subjects.each(function() {
     164                            if (this != d) {
     165                                $(this).animate(
     166                                    {
     167                                        opacity: 0
     168                                    },
     169                                    200
     170                                );
     171                            }
     172                        });
     173                    },                 
     174                    stop: function(event, ui) {
     175                        // restore original content
     176                        D.html(content);
     177
     178                        // make selected items visible
     179                        subjects.each(function() {
     180                            if (this != d) {
     181                                $(this).animate(
     182                                    {
     183                                        opacity: 100
     184                                    },
     185                                    200
     186                                );
     187                            }
     188                        });
     189                    }
     190                });
     191            });
     192        }
     193    });
     194}
     195
Note: See TracChangeset for help on using the changeset viewer.