Changeset 157 for trunk/web-app/js


Ignore:
Timestamp:
Feb 2, 2010, 10:31:25 AM (13 years ago)
Author:
duh
Message:
  • temporary commit
File:
1 edited

Legend:

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

    r145 r157  
    3636    attachTableEvents();
    3737    attachGroupingEvents();
     38
     39    resizeWizardTable();
     40    attachSubjectSlider();
    3841}
    3942
     
    4952        if (specialContent) {
    5053            // replace content by calling a helper function
    51             eval(specialContent[1]+"('"+specialContent[2]+"',helpContent)");
     54            eval(specialContent[1] + "('" + specialContent[2] + "',helpContent)");
    5255        }
    5356
     
    8790
    8891// insert a youtube player in a certain element
    89 function youtube(video,element) {
     92function youtube(video, element) {
    9093    // insert a div we will replace with a youtube player
    91     element.html("<div id='"+video+"'></div>")
     94    element.html("<div id='" + video + "'></div>")
    9295
    9396    // insert youtube player
    9497    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    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)
    98101}
    99102
    100103// when a youtube player is ready, play the video
    101104function onYouTubePlayerReady(playerId) {
    102     ytplayer = document.getElementById("my"+playerId);
     105    ytplayer = document.getElementById("my" + playerId);
    103106    ytplayer.playVideo();
    104107}
     
    119122    $('div#wizard').find('div.row').each(function() {
    120123        $(this).hover(
    121             function() {
    122                 $(this).addClass('highlight');
    123             },
    124             function() {
    125                 $(this).removeClass('highlight');
    126             }
     124                function() {
     125                    $(this).addClass('highlight');
     126                },
     127                function() {
     128                    $(this).removeClass('highlight');
     129                }
    127130        )
    128131    });
    129132}
    130133
     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
    131193function attachGroupingEvents() {
    132194    console.log('attach drag and drop events')
    133195
    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({
     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({
    142246        stop: function() {
    143247            // remove draggable from unselected items
    144248            $('.ui-selectee:not(.ui-selected)', this).each(function() {
    145                 $(this).draggable('destroy')   
     249                $(this).draggable('destroy')
    146250            })
    147251
     
    156260                D.draggable({
    157261                    revert: 'invalid',
     262                    containment: '.grouping',
     263                    corsor: 'move',
    158264                    start: function(event, ui) {
    159265                        // change dragged item's content to summarize selected items
     
    164270                            if (this != d) {
    165271                                $(this).animate(
    166                                     {
    167                                         opacity: 0
    168                                     },
     272                                    { opacity: 0 },
    169273                                    200
    170274                                );
    171275                            }
    172276                        });
    173                     },                 
     277                    },
    174278                    stop: function(event, ui) {
    175279                        // restore original content
     
    180284                            if (this != d) {
    181285                                $(this).animate(
    182                                     {
    183                                         opacity: 100
    184                                     },
     286                                    {opacity: 100},
    185287                                    200
    186288                                );
Note: See TracChangeset for help on using the changeset viewer.