Changeset 238 for trunk/web-app


Ignore:
Timestamp:
Mar 5, 2010, 3:21:52 PM (11 years ago)
Author:
duh
Message:

Refectored version of the wizard

  • initial template page has been removed, now is a generic 'start' page where one (in the future) may create a new study, or load and modify an already stored study
  • study page incorporates study template select element, but does not yet incorporate the study template fields
  • subjects page now allows creation of subjects based on a template. This change also implied the study page altogether had to change into a seperate table entity. Now the the page lists as many tables as unique templates have been selected. These tables contain all subjects that were added using that particular template. NOTE: data is not stored yet, due to the fact that templateEntity does not work properly yey (key/value pairs need to be set correctly when calling the setTemplate method)
  • the JavaScript? now handles multiple tables in a page as well, and automatically initializes any underlying slider div if that is required
Location:
trunk/web-app
Files:
2 edited

Legend:

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

    r217 r238  
    3737.wizard .sliderContainer {
    3838    display: block;
    39     padding-top: 10px;
     39    margin-top: 10px;
    4040    width: 150px;
    4141}
  • trunk/web-app/js/wizard.js

    r213 r238  
    3939    // table handlers
    4040    attachTableEvents();
    41     resizeWizardTable();
    42     attachTableSlider();
    43     new TableEditor().init('div.table','div.row','div.column');
     41    handleWizardTable();
     42    new TableEditor().init('div.table', 'div.row', 'div.column');
    4443
    4544    // accordeon(s)
     
    158157// the header and the rows is automatically scaled to
    159158// the cummalative width of the columns in the header
    160 function resizeWizardTable() {
    161     var wizardTable = $("div#wizard").find('div.table');
    162 
    163     if (wizardTable) {
     159function handleWizardTable() {
     160    var that = this;
     161    var wizardTables = $("div#wizard").find('div.table');
     162
     163    wizardTables.each(function() {
     164        var wizardTable = $(this);
     165        var sliderContainer = (wizardTable.next().attr('class') == 'sliderContainer') ? wizardTable.next() : null;
    164166        var header = wizardTable.find('div.header')
     167        var width = 20;
     168
    165169        // calculate total width of elements in header
    166         var width = 20;
    167170        header.children().each(function() {
    168171            // calculate width per column
     
    183186            $(this).css({ width: width + 'px' });
    184187        });
    185     }
    186 }
    187 
    188 // if we have a table and a slider, make the slider
    189 // slide the contents of the table if the content of
    190 // the table is wider than the table itself
    191 function attachTableSlider() {
    192     var slider = $("div#wizard").find('div.slider');
    193     var header = $("div#wizard").find('div.header');
    194     var table = $("div#wizard").find('div.table');
    195 
    196     if (slider && table && header) {
    197         // do we really need a slider?
    198         if (header.width() < table.width()) {
    199             // no, so hide it
    200             slider.css({ 'display': 'none '});
    201         } else {
    202             slider.slider({
    203                 value   : 1,
    204                 min     : 1,
    205                 max     : header.width() - table.width(),
    206                 step    : 1,
    207                 slide: function(event, ui) {
    208                     $("div#wizard").find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
    209                 }
    210             });
     188
     189        // got a slider for this table?
     190        if (sliderContainer) {
     191            // handle slider
     192            if (header.width() < wizardTable.width()) {
     193                // no, so hide it
     194                sliderContainer.css({ 'display': 'none '});
     195            } else {
     196                sliderContainer.slider({
     197                    value   : 1,
     198                    min     : 1,
     199                    max     : header.width() - wizardTable.width(),
     200                    step    : 1,
     201                    slide: function(event, ui) {
     202                        wizardTable.find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
     203                    }
     204                });
     205            }
    211206        }
    212     }
    213 }
     207    });
     208}
Note: See TracChangeset for help on using the changeset viewer.