Changeset 145 for trunk/web-app


Ignore:
Timestamp:
Jan 28, 2010, 5:34:50 PM (11 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
Files:
2 added
2 edited

Legend:

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

    r138 r145  
    9595}
    9696
     97/** START ::  HELP **/
    9798.wizard .element .helpIcon {
    9899    display: inline-block;
     
    122123    display: none;
    123124}
    124 
    125 .wizard .subjects {
    126     display: block;
    127     /*
    128     background-color: #c0ddea;
    129     border: 1px solid #575a5d;
    130     margin-top: 2px;
    131     */
     125/** END :: HELP **/
     126
     127/* START ::  TABLE */
     128.wizard .table {
     129    display: block;
    132130    border: 1px solid #575a5d;
    133131    background-color: #ebf7fc;
    134132    margin-top: 10px;
    135 }
    136 
    137 .wizard .subjects .subject {
    138     display: block;
    139 }
    140 
    141 .wizard .topborder {
     133    font-size: 11px;
     134    overflow: hidden;   
     135}
     136
     137.wizard .column {
     138    display: inline-block;
     139    padding: 2px 4px;
     140    width: 120px;
     141}
     142
     143.wizard .firstColumn {
     144    display: inline-block;
     145    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;
     159}
     160
     161.wizard .table .row {
     162    display: block;
     163    width: 2000px;
     164    height: 28px;
    142165    border-top: 1px solid #8e908f;
    143166}
    144167
    145 .wizard .subjects .subject .row {
    146     display: inline-block;
    147     /*
    148     border: 1px solid #575a5d;
    149     margin: 1px 1px 0px 0px;
    150     */
    151 }
     168.wizard .table input, .wizard .table select {
     169    border: 1px solid #8e908f;
     170    margin: 2px 0;
     171    padding: 2px 4px;
     172    background-color: transparent;
     173    width: 100px;
     174}
     175
     176.wizard .table .highlight, .wizard .table .highlight input, .wizard .table .highlight select {
     177    background-color: #006DBA;
     178    color: #fff;
     179}
     180/* END :: TABLE */
     181
     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; }
     187
     188.wizard .grouping {
     189    display: block;
     190}
     191
     192.wizard .subjects {
     193    display: inline-block;
     194}
     195
     196.wizard .groups {
     197    display: inline-block;
     198    height: 100%
     199}
     200
     201.droppable { width: 300px; }
     202
     203
  • 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.