Changeset 238 for trunk/web-app

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:

• css/wizard.css (modified) (1 diff)
• js/wizard.js (modified) (3 diffs)

trunk/web-app/css/wizard.css

@@ -37 +37 @@
 .wizard .sliderContainer {
     display: block;
-    padding-top: 10px;
+    margin-top: 10px;
     width: 150px;
 }

trunk/web-app/js/wizard.js

@@ -39 +39 @@
     // table handlers
     attachTableEvents();
-    resizeWizardTable();
-    attachTableSlider();
-    new TableEditor().init('div.table','div.row','div.column');
+    handleWizardTable();
+    new TableEditor().init('div.table', 'div.row', 'div.column');
 
     // accordeon(s)
@@ -158 +157 @@
 // the header and the rows is automatically scaled to
 // the cummalative width of the columns in the header
-function resizeWizardTable() {
-    var wizardTable = $("div#wizard").find('div.table');
-
-    if (wizardTable) {
+function handleWizardTable() {
+    var that = this;
+    var wizardTables = $("div#wizard").find('div.table');
+
+    wizardTables.each(function() {
+        var wizardTable = $(this);
+        var sliderContainer = (wizardTable.next().attr('class') == 'sliderContainer') ? wizardTable.next() : null;
         var header = wizardTable.find('div.header')
+        var width = 20;
+
         // calculate total width of elements in header
-        var width = 20;
         header.children().each(function() {
             // calculate width per column
@@ -183 +186 @@
             $(this).css({ width: width + 'px' });
         });
-    }
-}
-
-// if we have a table and a slider, make the slider
-// slide the contents of the table if the content of
-// the table is wider than the table itself
-function attachTableSlider() {
-    var slider = $("div#wizard").find('div.slider');
-    var header = $("div#wizard").find('div.header');
-    var table = $("div#wizard").find('div.table');
-
-    if (slider && table && header) {
-        // do we really need a slider?
-        if (header.width() < table.width()) {
-            // no, so hide it
-            slider.css({ 'display': 'none '});
-        } else {
-            slider.slider({
-                value   : 1,
-                min     : 1,
-                max     : header.width() - table.width(),
-                step    : 1,
-                slide: function(event, ui) {
-                    $("div#wizard").find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
-                }
-            });
+
+        // got a slider for this table?
+        if (sliderContainer) {
+            // handle slider
+            if (header.width() < wizardTable.width()) {
+                // no, so hide it
+                sliderContainer.css({ 'display': 'none '});
+            } else {
+                sliderContainer.slider({
+                    value   : 1,
+                    min     : 1,
+                    max     : header.width() - wizardTable.width(),
+                    step    : 1,
+                    slide: function(event, ui) {
+                        wizardTable.find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
+                    }
+                });
+            }
         }
-    }
-}
+    });
+}