Changeset 157 for trunk/web-app


Ignore:
Timestamp:
Feb 2, 2010, 10:31:25 AM (11 years ago)
Author:
duh
Message:
  • temporary commit
Location:
trunk/web-app
Files:
2 edited

Legend:

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

    r145 r157  
    1111}
    1212
     13.wizard .sliderContainer {
     14    display: block;
     15    padding-top: 10px;
     16    width: 150px;
     17}
     18
    1319.wizard .tabs {
    1420    display: block;
     
    1925
    2026.wizard .tabs .element {
    21     background-color:#EEEEEE;
    22     border-bottom:4px solid #006DBA;
    23     border-right:1px solid #006DBA;
    24     color:#006DBA;
    25     cursor:default;
    26     display:inline;
    27     font-size:10px;
    28     height:20px;
    29     margin:0px 0px 0px 0px;
    30     padding:20px 15px 0px 15px;
    31     text-align:center;
    32     text-decoration:none;
     27    background-color: #EEEEEE;
     28    border-bottom: 4px solid #006DBA;
     29    border-right: 1px solid #006DBA;
     30    color: #006DBA;
     31    cursor: default;
     32    display: inline;
     33    font-size: 10px;
     34    height: 20px;
     35    margin: 0px 0px 0px 0px;
     36    padding: 20px 15px 0px 15px;
     37    text-align: center;
     38    text-decoration: none;
    3339}
    3440
     
    4753    color: #666666;
    4854    font-size: 10px;
     55    padding-top: 10px;
    4956}
    5057
     
    6370}
    6471
    65 
    6672.wizard .error {
    6773    display: block;
     
    123129    display: none;
    124130}
     131
    125132/** END :: HELP **/
    126133
     
    132139    margin-top: 10px;
    133140    font-size: 11px;
    134     overflow: hidden;   
     141    overflow: hidden;
     142}
     143
     144.wizard .table .header {
     145    display: block;
     146    background-color: #006DBA;
     147    color: #fff;
     148    font-weight: bold;
     149    width: auto;
    135150}
    136151
     
    144159    display: inline-block;
    145160    padding: 2px 4px;
    146     width: 40px;
    147 }
    148 
    149 .wizard .table .header {
    150     display: block;
    151     background-color: #006DBA;
    152     color: #fff;
    153     font-weight: bold;
    154     width: 2000px;
    155 }
    156 
    157 .wizard .table .header .column .first {
    158     width: 40px;
     161    width: 20px;
    159162}
    160163
    161164.wizard .table .row {
    162165    display: block;
    163     width: 2000px;
    164166    height: 28px;
    165167    border-top: 1px solid #8e908f;
     168    width: auto;
    166169}
    167170
     
    178181    color: #fff;
    179182}
     183
     184.wizard .table .highlight input, .wizard .table .highlight select {
     185    background-color: #6e99d4;
     186    color: #fff;
     187}
     188
    180189/* END :: TABLE */
    181190
    182 
    183 .selectable .ui-selecting { background: #FECA40; }
    184 .selectable .ui-selected { background: #F39814; color: white; }
    185 .selectable { list-style-type: none; margin: 0; padding: 0; width: 200px; }
    186 .selectable li { margin: 3px; padding: 0.4em; font-size: 1em; height: 18px; }
     191.selectable .ui-selecting {
     192    background: #add9ef;
     193}
     194
     195.selectable .ui-selected {
     196    background: #006dbd;
     197    color: white;
     198}
     199
     200.selectable {
     201    list-style-type: none;
     202    margin: 0;
     203    padding: 0;
     204    width: 200px;
     205}
     206
     207.selectable li {
     208    margin: 3px;
     209    padding: 0.4em;
     210    font-size: 1em;
     211    height: 18px;
     212}
    187213
    188214.wizard .grouping {
    189215    display: block;
     216    height: auto;
     217    vertical-align: top;
    190218}
    191219
    192220.wizard .subjects {
    193221    display: inline-block;
     222    vertical-align: top;
    194223}
    195224
    196225.wizard .groups {
    197226    display: inline-block;
    198     height: 100%
    199 }
    200 
    201 .droppable { width: 300px; }
    202 
    203 
     227    height: 100%;
     228    vertical-align: top;
     229}
     230
     231.wizard .groups .groupbla {
     232    margin: 3px;
     233    padding: 0.4em;
     234    font-size: 1em;
     235}
     236
     237.droppable {
     238    width: 300px;
     239}
     240
     241.wizard .groups .group {
     242    display: inline-block;
     243    float: right;
     244    width: 250px;
     245    min-height: 18em;
     246    margin: 3px;
     247    padding: 0.4em;
     248
     249} * html #trash {
     250    height: 18em;
     251} /* IE6 */
     252
     253.wizard .groups .group h4 {
     254    line-height: 16px;
     255    margin: 0 0 0.4em;
     256}
     257/*
     258.wizard .groups .group .gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
     259.wizard .groups .group .gallery.custom-state-active { background: #eee; }
     260.wizard .groups .group .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
     261.wizard .groups .group .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
     262.wizard .groups .group .gallery li a { float: right; }
     263.wizard .groups .group .gallery li a.ui-icon-zoomin { float: left; }
     264.wizard .groups .group .gallery li img { width: 100%; cursor: move; }
     265*/
     266.wizard .groups .group .gallery {
     267    display: block;
     268    float: left;
     269}
     270
     271.wizard .groups .group .gallery li {
     272    display: inline-block;
     273}
     274
     275
     276
  • 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.