From 63a9bd9d849d20e6ca0c73e9c82f29fd51bdcf8b Mon Sep 17 00:00:00 2001
From: nbm <nbm@c91229c3-7414-0410-bfa2-8a42b809f60b>
Date: Fri, 7 Oct 2005 09:31:08 +0000
Subject: [PATCH] Javascript necessary for rich selection of a conditional fieldset

---
 presentation/lookAndFeel/knowledgeTree/js/conditional_usage.js | 306 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 306 insertions(+), 0 deletions(-)
 create mode 100644 presentation/lookAndFeel/knowledgeTree/js/conditional_usage.js

diff --git a/presentation/lookAndFeel/knowledgeTree/js/conditional_usage.js b/presentation/lookAndFeel/knowledgeTree/js/conditional_usage.js
new file mode 100644
index 0000000..28acf4b
--- /dev/null
+++ b/presentation/lookAndFeel/knowledgeTree/js/conditional_usage.js
@@ -0,0 +1,306 @@
+// simple event stacking.
+// i don't like Mochikit's one.
+
+function attachToElementEvent(elem, event_name, func) {
+    // catch IE (grumble)
+    if (elem.attachEvent) {
+        elem.attachEvent('on'+event_name, func);
+    } else {
+        elem.addEventListener(event_name, func, false);
+    }
+}
+
+function removeFromElementEvent(elem, event_name, func) {
+    // catch IE (grumble)
+    if (elem.detachEvent) {
+        elem.detachEvent('on'+event_name, func);
+    } else {
+        elem.removeEventListener(event_name, func, false);
+    }
+}
+
+// quick and dirty helper - find the nearest parent item matching tagName. 
+// FIXME steal the klass or tagName logic from MochiK.
+// FIXME add to a core js-lib, and add some unit-tests.
+function breadcrumbFind(elem, tagName) {
+    var stopTag = 'BODY';
+    var currentTag = elem.tagName;
+    var currentElem = elem;
+    while ((currentTag != stopTag) && (currentTag != tagName)) {
+        currentElem = currentElem.parentNode;
+        currentTag = currentElem.tagName;
+    }
+    if (currentTag == tagName) { 
+        return currentElem; 
+    } else {
+        return null;
+    }
+}
+
+/* Conditional Metadata Usage
+ *
+ * Allows the system to respond to conditional metadata events.
+ */
+
+/**
+
+== Basic process around Conditional Metadata JS/HTML interaction ==
+
+The system works based on 3 concepts:
+
+ 1. on the appropriate "activation" command, the entire "field" is serialised and replaced with a hidden
+    input var, and a "user friendly" label.
+ 2. a undo stack needs to be kept, which provides the user with a way to "un-fix" items.
+ 3. When an item is activated, the system:
+        (i)     polls the page for fixed input-vars:  this _includes_ (for example) fieldset_id, as well as later items.
+        (ii)    submits these to a targeturl (set as a "global var" - currently in _this_ file.)        // FIXME:  this needs to be programmatically settable.
+
+
+ // TODO make this operate on a particular subset of the page, and be _instantiable_. (use fieldset as the "controlling component".
+ // TODO lazy bind all activation handlers to ensure that the above problem is solveable.
+ // TODO ensure that this functions across the required browser sets.
+ // TODO verify that the entire set of "lookup" values works here: select and input seem to work.
+
+*/
+
+var conditional_usage_undostack = new Array();
+var conditional_usage_keys = new Array();
+
+// grow and go.
+function getStackForFieldset(fieldset) {
+    for (var i=0; i<conditional_usage_keys.length; i++) {
+        if (conditional_usage_keys[i] == fieldset) {
+            simpleLog('DEBUG','found undostack at keyindex '+i);
+            return conditional_usage_undostack[i];
+        }
+    }
+    // we would have returned by now.  onward, and upward.
+    // i == conditional_usage_keys.length == conditional_usage_undostack.length
+    conditional_usage_undostack.push(Array());
+    conditional_usage_keys.push(fieldset);
+    simpleLog('DEBUG','created undostack at keyindex '+i+' for fieldset '+fieldset);
+    simpleLog('DEBUG','undoStack: '+conditional_usage_undostack+'\nundoKeyStack: '+conditional_usage_keys)
+    return conditional_usage_undostack[i];      // must be the "new" element, which is 1 past the old size.
+}
+
+// Stack implementation
+function pushStack(fieldset, subtree) {
+    // FIXME how do I bind this to a particular fieldset object.
+    // FIXME at worst, we need to use the HTMLFieldSet object as a "key" of sorts into a stack it's O(n) initially, unless we can do some other magic ...
+    simpleLog('DEBUG','pushStack received: '+fieldset);
+    var undostack = getStackForFieldset(fieldset);    
+    undostack.push(subtree);        // onto the end, so it can be popped. 
+    simpleLog('ERROR','added item to undo stack..');
+}
+
+function popStack(fieldset) {
+    var undostack = getStackForFieldset(fieldset);
+    if (undostack.length == 0) {   
+        return ;
+    }
+    var last_item = undostack.pop();
+    last_item.parentNode.removeChild(last_item);
+}
+
+/** 
+    - creates a replacement widget,
+    - adds the _old_ widget to the correct stack.
+*/
+
+function createFixedWidget(fieldset, widget, i_name, i_value, i_label) {
+    var newWidget = DIV({'class':'widget fixed'},
+        INPUT({'type':'hidden','name':i_name, 'value':i_value,'class':'fixed'}),
+        SPAN(null, 'The value for field '+i_name+' is '+i_label+' ('+i_value+')')
+    );
+    swapDOM(widget, newWidget);
+    pushStack(fieldset, newWidget);
+    simpleLog('ERROR','conditional_usage passed in fieldset '+fieldset+' and widget '+newWidget); 
+}
+
+/** handles the "update" event. 
+    
+    needs to:
+        - "replace" the contents of the widget with a "fixed" input.
+        -  trigger the "updateFieldset"
+*/
+
+function handleSelectChange(fieldset, widget, select_object) { 
+    simpleLog('ERROR','call to stub: handleSelectChange on select with name "'+select_object.name+'"'); 
+    var i_name = select_object.name;
+    var i_value = select_object.value;
+    var i_label = scrapeText(select_object.options[select_object.selectedIndex]);
+
+    createFixedWidget(fieldset, widget, i_name, i_value, i_label);     
+    updateFieldset(fieldset);
+}
+
+function handleRadioChange(fieldset, widget, radio_object) { 
+    simpleLog('ERROR','call to stub: handleRadioChange on radio with name "'+radio_object.name+'"'); 
+    var i_name = radio_object.name;
+    var i_value = radio_object.value;
+
+
+    var oLabel = breadcrumbFind(radio_object, 'LABEL');
+    if (oLabel == null) {
+        simpleLog('ERROR','radiobutton ('+radio_object.name+':'+radio_object.value+') has no associated label.  failing.');
+        return false;
+    } else {
+        var i_label = scrapeText(oLabel);
+    }
+
+    createFixedWidget(fieldset, widget, i_name, i_value, i_label);     
+    updateFieldset(fieldset);
+}
+
+/** extract all the appropriate input-vars from a given fieldset, so that it can
+    be passed into a backed.  Returns an array ("formKeys" => array(), "formValues" => array())
+    that can be passed to be backend. 
+
+    // actually, this is ONLY and issue for the "fieldset_id" form-field:
+    // for the rest of them, the backend should handle this sanely (e.g. in what it sends _us_).   Suspect the "best" option is to call this
+    // 'fieldset_id[]' since the backend can then extract which fieldsets have been called.  other vars will get converted
+    // from <input type="radio" ... name="xxxx"> and <select ... name="xxxx"> to <input type="hidden" class="fixed">
+    // 
+*/
+function parseFieldsetToForm(fieldset) {
+    simpleLog('ERROR','call to untested fn: parseFieldsetToForm. ');
+    var formContent = new Array();
+
+    var input_vars = getElementsByTagAndClassName('input','fixed',fieldset);
+    formContent["formKeys"] = new Array();
+    formContent["formValues"] = new Array();
+
+    for (var i=0; i<input_vars.length; i++) {
+        var input_object = input_vars[i];
+        // don't delete the undo button.
+        if (input_object.type != 'button') {
+            formContent["formKeys"].push(input_object.name);
+            formContent["formValues"].push(input_object.value);
+        }
+    }
+
+    return formContent;
+}
+
+/** bind a "widget" to a particular fieldset, and populate the appropriate event-handlers
+      - find the various types of input objects and hook in appropriately:
+          make sure that the function binds:
+               - fieldset
+               - pseudo-widget (the div that surrounds each group of options.)
+                -handler.
+    // FIXME: this assumes that inputs are either "select" or "<input type='radio'>"
+    // FIXME: is that a valid assumption?
+*/
+function bindToConditionalFieldset(fieldset, widget) { 
+
+    // handleChange needs to be bound to each input widget.
+    // for <input type != "hidden"> type  variables this means binding to onclick
+    // for <select> this means binding to onchange
+    
+    var select_fields = widget.getElementsByTagName('SELECT');
+    var input_fields = widget.getElementsByTagName('INPUT');    // needs to be filtered - no "hidden" vars.
+
+    for (var i=0; i<select_fields.length; i++) {
+        var select_object = select_fields[i];
+        var handler = partial(handleSelectChange, fieldset, widget, select_object);
+        attachToElementEvent(select_object, 'change', handler);
+    }
+
+    for (var i=0; i<input_fields.length; i++) {
+        var input_object = input_fields[i];
+        var handler = partial(handleRadioChange, fieldset, widget, input_object);
+        if (input_object.type == 'radio') {
+            attachToElementEvent(input_object, 'click', handler);
+        } else if (input_object.type == 'hidden') {
+            ;       // this is OK, and expected.
+        } else {
+            simpleLog('ERROR','bindToConditionalFieldset found a non-hidden input field of type: '+input_object.type);
+        }
+    }
+    simpleLog('DEBUG','bindToConditionalFieldset complete');
+} 
+
+function clearUnfixedWidgets(fieldset) {
+    var widgets = getElementsByTagAndClassName('DIV', 'widget', fieldset);
+    for (var i=0; i<widgets.length; i++) {
+        var w = widgets[i];
+        if (hasElementClass(w, 'fixed')) {
+            simpleLog('DEBUG','Not deleting widget with class '+w.getAttribute('class'));
+        } else {
+            w.parentNode.removeChild(w);
+            simpleLog('DEBUG','Deleting widget with class '+w.getAttribute('class'));
+        }
+    }
+}
+
+/* XMLHttpRequest functions
+ *
+ */
+
+function updateFieldset(fieldset) {
+   var targeturl = '/presentation/lookAndFeel/knowledgeTree/ajaxConditional.php'; // test_metadata_update.txt';
+   simpleLog('DEBUG','AJAX function called: updateFieldset');
+
+   var formdata = parseFieldsetToForm(fieldset);
+   formdata.formKeys.push('action');
+   formdata.formValues.push('updateFieldset');
+   var POSTval = queryString(formdata.formKeys, formdata.formValues);
+
+   var req = getXMLHttpRequest();
+   req.open('POST',targeturl, true);        // MUST be async.
+   //simpleLog('DEBUG','form submission from updateFieldset: '+logFormSubmission(formdata));
+   simpleLog('DEBUG','form submission from updateFieldset: '+(formdata));
+   req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
+   var deferred = sendXMLHttpRequest(req, POSTval);
+
+   deferred.addErrback(partial(do_handleError, 'updateFieldset'));
+   deferred.addCallback(partial(do_updateFieldset, fieldset));
+}
+
+function do_handleError(function_name, err) {
+   simpleLog('ERROR','AJAX request from function '+function_name+' failed on exception: '+err);
+}
+
+function do_updateFieldset(fieldset, req) {
+   simpleLog('DEBUG','AJAX function do_updateFieldset received: \n'+req.responseText);    
+   // clear unfixed widgets before we start.
+   clearUnfixedWidgets(fieldset);
+   // create an unparented div for HTML insertion.
+   var t = DIV(null);
+   t.innerHTML = req.responseText;
+   var new_widgets = getElementsByTagAndClassName('div','widget', t);
+   for (var i=0; i<new_widgets.length; i++) {
+       var w = new_widgets[i];
+       fieldset.appendChild(w);
+       bindToConditionalFieldset(fieldset, w);
+   }
+   delete t; // clean this up.
+}
+
+/* HTML callbacks - functions called on-event.
+ *
+ */ 
+
+
+
+/* Fieldset creation and update.
+ *
+ */
+
+function initialiseConditionalFieldsets() {
+    simpleLog('ERROR','incomplete function called: initialiseFieldsets.');
+    var fieldsets = getElementsByTagAndClassName('FIELDSET','conditional_metadata');
+    simpleLog('DEBUG','found fieldsets: '+fieldsets.length);
+    // triggers initial update - since this contains no "fixed" vars, it'll remove "unfixed" widgets 
+    // and insert the initial (master) field. 
+    for (var i=0; i<fieldsets.length; i++) {
+        var undo_button = INPUT({'type':'button','value':'undo'},null);
+        attachToElementEvent(undo_button,'click',partial(popStack, fieldsets[i]));
+        fieldsets[i].appendChild(undo_button);
+        // initialise the stack.
+        getStackForFieldset(fieldsets[i]);
+        updateFieldset(fieldsets[i]);
+    }
+}
+
+addLoadEvent(initialiseConditionalFieldsets);
--
libgit2 0.21.4