Ignore:
Timestamp:
May 13, 2010 5:01:59 PM (14 years ago)
Author:
mylan
Message:

Initial reference popup integration

File:
1 edited

Legend:

Unmodified
Added
Removed

  • quintagroup.referencedatagridfield/branches/plone4/quintagroup/referencedatagridfield/skins/referencedatagridfield/referencebrowser.js

    r2300 r2311  
    1 // Crossbrowser event listeners adder 
    2 function addEvent(obj, evType, fn, useCap) { 
    3     var r = false; 
    4     if (obj.addEventListener){ 
    5         if (typeof(useCap) == 'undefined') 
    6             useCap = false; 
    7         obj.addEventListener(evType, fn, useCap); 
    8         r = true; 
    9      } 
    10      else if (obj.attachEvent) { 
    11          var id = obj.sourceIndex || -1; 
    12  
    13          if (!fn[evType + id]) { 
    14              var f = fn[evType + id] = function(e) { 
    15                  var o = document.all[id] || document; 
    16                  o._f = fn; 
    17                  var s = o._f(e); 
    18                  o._f = null; 
    19                  return s; 
    20              }; 
    21  
    22              r = obj.attachEvent("on" + evType, f); 
    23              obj = null; 
    24          } 
    25      } 
    26      return r; 
    27  }; 
    28  
    29 function triggerTitleClass(e) { 
    30     var currnode = window.event ? window.event.srcElement : e.currentTarget; 
    31      
    32         // fetch required data structure    
    33     var element = getThisOrParentElement(currnode, "INPUT"); 
    34     // If no input tag found - leave function 
    35     if (element == null || element.tagName.toUpperCase() == "BODY") 
    36         return; 
    37      
    38     var current = element.value; 
    39     var initial = element.getAttribute("default_value"); 
    40     if (initial == null || current == null) 
    41         return; 
    42  
    43     if (initial == current) { 
    44        setClassAttr(element, "not-changed-title-field") 
    45     } else { 
    46        setClassAttr(element, "changed-title-field") 
    47     } 
    48 } 
    49  
    50 function setClassAttr(element, value) { 
    51     if (element.className) { 
    52         element.className = value 
    53     } else { 
    54         element.setAttribute("CLASS", value) 
    55     }  
    56 } 
    57 // Trigger styles on focusing on the element 
    58 function triggerOnFocusStyles(e) { 
    59     var currnode = window.event ? window.event.srcElement : e.currentTarget; 
    60      
    61         // fetch required data structure    
    62     var element = getThisOrParentElement(currnode, "INPUT"); 
    63     // If no input tag found - leave function 
    64     if (element == null || element.tagName.toUpperCase() == "BODY") 
    65         return; 
    66     setClassAttr(element, "changed-title-field") 
    67 } 
    68  
    69 function getThisOrParentElement(currnode, tagname) { 
    70     /* Find the first parent node with the given tag name */ 
    71  
    72     tagname = tagname.toUpperCase(); 
    73     var parent = currnode; 
    74  
    75     while(parent.tagName.toUpperCase() != tagname) { 
    76         parent = parent.parentNode; 
    77         // Next line is a safety belt 
    78         if(parent.tagName.toUpperCase() == "BODY")  
    79             return null; 
    80     } 
    81  
    82     return parent; 
    83 } 
    84  
    85  
    86 // function to open the popup window 
    87 function getOrderIndex(currnode) { 
    88     if (typeof(dataGridFieldFunctions) == "object") { 
    89         var rows = dataGridFieldFunctions.getWidgetRows(currnode); 
    90         var row = dataGridFieldFunctions.getParentElementById(currnode, "datagridwidget-row");       
    91         if(row == null) { 
    92             alert("Couldn't find DataGridWidget row"); 
    93             return; 
    94         } 
    95  
    96         var idx = null 
    97  
    98         // We can't use nextSibling because of blank text nodes in some browsers 
    99         // Need to find the index of the row 
    100         for(var t = 0; t < rows.length; t++) { 
    101             if(rows[t] == row) { 
    102                 idx = t; 
    103                 break; 
    104             } 
    105         } 
    106  
    107         // Abort if the current row wasn't found 
    108         if(idx == null) 
    109             return; 
    110         return idx; 
    111     } 
    112     return; 
    113 } 
    114  
    115 function getOrderedElement(widget_id, order_idx) { 
    116     // First get first element for the current field 
    117     var element=document.getElementById(widget_id); 
    118  
    119     // If it is about DataGridField use it to chose correct element 
    120     if (typeof(dataGridFieldFunctions) == "object" && order_idx >= 0) { 
    121         var rows = dataGridFieldFunctions.getWidgetRows(element); 
    122         if (rows.length >= order_idx) { 
    123             var row = rows[order_idx] 
    124             var inputs = row.getElementsByTagName("input") 
    125             for (var i=0;i<=inputs.length;i++) { 
    126                 if (inputs[i].id == widget_id) { 
    127                     element = inputs[i]; 
    128                     break; 
    129                 } 
     1jq(function() { 
     2 
     3  // the overlay itself 
     4  jq('.addreference').overlay({ 
     5       closeOnClick: false, 
     6       onBeforeLoad: function() { 
     7           ov = jq('div#content').data('overlay'); 
     8           // close overlay, if there is one already 
     9           // we only allow one referencebrowser per time 
     10           if (ov) {ov.close(); } 
     11           var wrap = this.getContent().find('.overlaycontent'); 
     12           var src = this.getTrigger().attr('src'); 
     13           var srcfilter = src + ' >*'; 
     14           wrap.data('srcfilter', srcfilter); 
     15           jq('div#content').data('overlay', this); 
     16           resetHistory(); 
     17           wrap.load(srcfilter); 
     18           }, 
     19       onLoad: function() { 
     20           widget_id = this.getTrigger().attr('rel').substring(6); 
     21           disablecurrentrelations(widget_id); 
     22       }}); 
     23 
     24  // the breadcrumb-links and the links of the 'tree'-navigation 
     25  jq('[id^=atrb_] a.browsesite').live('click', function(event) { 
     26      var target = jq(this); 
     27      var src = target.attr('href'); 
     28      var wrap = target.parents('.overlaycontent'); 
     29      var srcfilter = src + ' >*'; 
     30      pushToHistory(wrap.data('srcfilter')); 
     31      wrap.data('srcfilter', srcfilter); 
     32      // the history we are constructing here is destinct from the 
     33      // srcfilter-history. here we construct a selection-widget, which 
     34      // is available, if the history_length-parameter is set on the widget 
     35      // the srcfilter-history is used for storing the URLs to make the 
     36      // 'Back'-link work. 
     37      var newoption = '<option value="' + src + '">' + target.attr('rel') + '</option>'; 
     38      refreshOverlay(wrap, srcfilter, newoption); 
     39      return false; 
     40      }); 
     41 
     42  // the links for inserting referencens 
     43  jq('[id^=atrb_] input.insertreference').live('click', function(event) { 
     44      var target = jq(this); 
     45      var wrap = target.parents('.overlaycontent'); 
     46      var fieldname = wrap.find('input[name=fieldName]').attr('value'); 
     47      var multi = wrap.find('input[name=multiValued]').attr('value'); 
     48      var close_window = wrap.find('input[name=close_window]').attr('value'); 
     49      var title = target.parents('tr').find('img').attr('alt'); 
     50      var uid = target.attr('rel'); 
     51      refbrowser_setReference(fieldname, uid, title, parseInt(multi)); 
     52      if (close_window === '1') { 
     53          overlay = jq('div#content').data('overlay'); 
     54          overlay.close(); 
     55      } else { 
     56          showMessage(title); 
     57      }; 
     58      jq(this).attr('disabled', 'disabled'); 
     59      }); 
     60 
     61 
     62  // the history menu 
     63  jq('[id^=atrb_] form#history select[name=path]').live('change', function(event) { 
     64      var target = jq(this); 
     65      var wrap = target.parents('.overlaycontent'); 
     66      src = jq('[id^=atrb_] form#history select[name=path] :selected').attr('value'); 
     67      var srcfilter = src + ' >*'; 
     68      refreshOverlay(wrap, srcfilter, ''); 
     69      return false; 
     70      }); 
     71 
     72  // the search form 
     73  jq('[id^=atrb_] form#search input[name=submit]').live('click', function(event) { 
     74      var target = jq(this); 
     75      var src = target.parents('form').attr('action'); 
     76      var wrap = target.parents('.overlaycontent'); 
     77      var fieldname = wrap.find('input[name=fieldName]').attr('value'); 
     78      var fieldrealname = wrap.find('input[name=fieldRealName]').attr('value'); 
     79      var at_url = wrap.find('input[name=at_url]').attr('value'); 
     80      var searchvalue = wrap.find('input[name=searchValue]').attr('value'); 
     81      var multi = wrap.find('input[name=multiValued]').attr('value'); 
     82      var close_window = wrap.find('input[name=close_window]').attr('value'); 
     83      qs = 'searchValue=' + searchvalue + '&fieldRealName=' + fieldrealname + 
     84        '&fieldName=' + fieldname + '&multiValued=' + multi + 
     85        '&close_window' + close_window + '&at_url=' + at_url; 
     86      var srcfilter = src + '?' + qs + ' >*'; 
     87      pushToHistory(wrap.data('srcfilter')); 
     88      wrap.data('srcfilter', srcfilter); 
     89      refreshOverlay(wrap, srcfilter, ''); 
     90      return false; 
     91      }); 
     92 
     93}); 
     94 
     95function disablecurrentrelations (widget_id) { 
     96   jq('ul#' + widget_id + ' :input').each( 
     97       function (intIndex) { 
     98         uid = jq(this).attr('value'); 
     99         cb = jq('input[rel=' + uid + ']'); 
     100         cb.attr('disabled', 'disabled'); 
     101         cb.attr('checked', 'checked'); 
     102       }); 
     103} 
     104 
     105// function to return a reference from the popup window back into the widget 
     106function refbrowser_setReference(widget_id, uid, label, multi) 
     107{ 
     108    var element = null, 
     109        label_element = null, 
     110        current_values = null, 
     111        i = null, 
     112        list = null, 
     113        li = null, 
     114        input = null, 
     115        up_element = null, 
     116        down_element = null, 
     117        container = null; 
     118    // differentiate between the single and mulitselect widget 
     119    // since the single widget has an extra label field. 
     120    if (multi === 0) { 
     121        jq('#' + widget_id).attr('value', uid); 
     122        jq('#' + widget_id + '_label').attr('value', label); 
     123    }  else { 
     124        // check if the item isn't already in the list 
     125        current_values = jq('#' + widget_id + ' input'); 
     126        for (i = 0; i < current_values.length; i++) { 
     127            if (current_values[i].value === uid) { 
     128                return false; 
    130129            } 
    131130        } 
    132     } 
    133     return element; 
    134 } 
    135  
    136  
    137 function referencebrowser_openBrowser(path, fieldName, at_url, fieldRealName, fieldTitleName, fieldLinkName, currnode) { 
    138     var url = path + '/referencebrowser_popup?fieldName=' + fieldName + '&fieldRealName=' + fieldRealName +'&at_url=' + at_url; 
    139  
    140     var order_idx = getOrderIndex(currnode); 
    141     url += (order_idx)? '&order_idx=' + order_idx: ""; 
    142     url += (typeof(fieldTitleName) != 'undefined')? '&fieldTitleName=' + fieldTitleName: ""; 
    143     url += (typeof(fieldLinkName) != 'undefined')? '&fieldLinkName=' + fieldLinkName: ""; 
    144  
    145     atrefpopup = window.open(url, 'referencebrowser_popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=550'); 
    146 } 
    147  
    148 // function for Array detecting 
    149 function typeOf(value) { 
    150     var s = typeof value; 
    151     if (s === 'object') { 
    152         if (value) { 
    153             if (value instanceof Array) { 
    154                 s = 'array'; 
     131        // now add the new item 
     132        list = document.getElementById(widget_id); 
     133        // add ul-element to DOM, if it is not there 
     134        if (list === null) { 
     135            container = jq('#archetypes-fieldname-' + widget_id + ' input + div'); 
     136            if (!container.length) { 
     137                // fix for Plone 3.3 collections, with a weird widget-id 
     138                container = jq('#archetypes-fieldname-value input + div'); 
    155139            } 
    156         } else { 
    157             s = 'null'; 
    158         } 
    159     } 
    160     return s; 
    161 } 
    162  
    163 // function to return a reference from the popup window back into the widget 
    164 function referencebrowser_setReference(widget_id, uid, label, multi, order_idx, widget_title_id, link_title, widget_link_id, link_path) 
    165 { 
    166     if (order_idx >= 0) { 
    167         // process ReferenceDataGridField 
    168         uid_element=getOrderedElement(widget_id, order_idx); 
    169         uid_element.value=uid; 
    170         title_element=getOrderedElement(widget_title_id, order_idx); 
    171         title_element.value=link_title; 
    172         title_element.className="not-changed-title-field"; 
    173         title_element.setAttribute("default_value", link_title); 
    174         addEvent(title_element, 'blur', triggerTitleClass, false) 
    175         addEvent(title_element, 'focus', triggerOnFocusStyles, false) 
    176         link_element=getOrderedElement(widget_link_id, order_idx); 
    177         link_element.readOnly=false; 
    178         link_element.value=link_path; 
    179         link_element.readOnly=true; 
    180         link_element.className="hidden-field" 
    181     } else if (multi==0) { 
    182         // differentiate between the single and mulitselect widget 
    183         // since the single widget has an extra label field. 
    184         element=document.getElementById(widget_id); 
    185         label_element=document.getElementById(widget_id + '_label'); 
    186         element.value=uid; 
    187         label_element.value=label; 
    188     } else { 
    189          // check if the item isn't already in the list 
    190          var current_values = cssQuery('#' + widget_id + ' input'); 
    191          for (var i=0; i < current_values.length; i++) { 
    192             if (current_values[i].value == uid) { 
     140            container.after( 
     141               '<ul class="visualNoMarker" id="' + widget_id + '"></ul>'); 
     142            list = document.getElementById(widget_id); 
     143        } 
     144        li = document.createElement('li'); 
     145        label_element = document.createElement('label'); 
     146        input = document.createElement('input'); 
     147        input.type = 'checkbox'; 
     148        input.value = uid; 
     149        input.checked = true; 
     150        input.name = widget_id + ':list'; 
     151        label_element.appendChild(input); 
     152        label_element.appendChild(document.createTextNode(' ' + label)); 
     153        li.appendChild(label_element); 
     154        li.id = 'ref-' + widget_id + '-' + current_values.length; 
     155 
     156        sortable = jq('input[name=' + widget_id + '-sortable]').attr('value'); 
     157        if (sortable === '1') { 
     158          up_element = document.createElement('a'); 
     159          up_element.title = 'Move Up'; 
     160          up_element.innerHTML = '&#x25b2;'; 
     161          up_element.onclick = function () { 
     162              refbrowser_moveReferenceUp(this); 
    193163              return false; 
    194             } 
    195           }          
    196           // now add the new item 
    197           list=document.getElementById(widget_id); 
    198           li = document.createElement('li'); 
    199           label_element = document.createElement('label'); 
    200           input = document.createElement('input'); 
    201           input.type = 'checkbox'; 
    202           input.value = uid; 
    203           input.checked = true; 
    204           input.name = widget_id + ':list'; 
    205           label_element.appendChild(input); 
    206           label_element.appendChild(document.createTextNode(label)); 
    207           li.appendChild(label_element); 
    208           list.appendChild(li); 
    209           // fix on IE7 - check *after* adding to DOM 
    210           input.checked = true; 
     164          }; 
     165 
     166          li.appendChild(up_element); 
     167 
     168          down_element = document.createElement('a'); 
     169          down_element.title = 'Move Down'; 
     170          down_element.innerHTML = '&#x25bc;'; 
     171          down_element.onclick = function () { 
     172              refbrowser_moveReferenceDown(this); 
     173              return false; 
     174          }; 
     175 
     176          li.appendChild(down_element); 
     177        } 
     178        list.appendChild(li); 
     179 
     180        // fix on IE7 - check *after* adding to DOM 
     181        input.checked = true; 
    211182    } 
    212183} 
    … …  
    214185// function to clear the reference field or remove items 
    215186// from the multivalued reference list. 
    216 function referencebrowser_removeReference(widget_id, multi) 
     187function refbrowser_removeReference(widget_id, multi) 
    217188{ 
     189    var x = null, 
     190        element = null, 
     191        label_element = null, 
     192        list = null; 
     193 
    218194    if (multi) { 
    219         list=document.getElementById(widget_id) 
    220         for (var x=list.length-1; x >= 0; x--) { 
    221           if (list[x].selected) { 
    222             list[x]=null; 
    223           } 
    224         } 
    225         for (var x=0; x < list.length; x++) { 
    226             list[x].selected='selected'; 
    227           }         
     195        list = document.getElementById(widget_id); 
     196        for (x = list.length - 1; x >= 0; x--) { 
     197            if (list[x].selected) { 
     198                list[x] = null; 
     199            } 
     200        } 
     201        for (x = 0; x < list.length; x++) { 
     202            list[x].selected = 'selected'; 
     203        } 
    228204    } else { 
    229         element=document.getElementById(widget_id); 
    230         label_element=document.getElementById(widget_id + '_label'); 
    231         label_element.value = ""; 
    232         element.value=""; 
    233     } 
    234 } 
    235  
    236  
     205        jq('#' + widget_id).attr('value', ""); 
     206        jq('#' + widget_id + '_label').attr('value', ""); 
     207    } 
     208} 
     209 
     210function refbrowser_moveReferenceUp(self) 
     211{ 
     212    var elem = self.parentNode, 
     213        eid = null, 
     214        pos = null, 
     215        widget_id = null, 
     216        newelem = null, 
     217        prevelem = null, 
     218        arrows = null, 
     219        cbs = null; 
     220    if (elem === null) { 
     221        return false; 
     222    } 
     223    eid = elem.id.split('-'); 
     224    pos = eid.pop(); 
     225    if (pos === 0) { 
     226        return false; 
     227    } 
     228    widget_id = eid.pop(); 
     229    newelem = elem.cloneNode(true); 
     230 
     231    //Fix: (IE keep the standard value) 
     232    cbs = newelem.getElementsByTagName("input"); 
     233    if (cbs.length > 0) { 
     234        cbs[0].checked = elem.getElementsByTagName("input")[0].checked; 
     235    } 
     236 
     237    prevelem = document.getElementById('ref-' + widget_id + '-' + (pos - 1)); 
     238 
     239    // up arrow 
     240    arrows = newelem.getElementsByTagName("a"); 
     241    arrows[0].onclick = function () { 
     242        refbrowser_moveReferenceUp(this); 
     243    }; 
     244    // down arrow 
     245    arrows[1].onclick = function () { 
     246        refbrowser_moveReferenceDown(this); 
     247    }; 
     248 
     249    elem.parentNode.insertBefore(newelem, prevelem); 
     250    elem.parentNode.removeChild(elem); 
     251    newelem.id = 'ref-' + widget_id + '-' + (pos - 1); 
     252    prevelem.id = 'ref-' + widget_id + '-' + pos; 
     253} 
     254 
     255function refbrowser_moveReferenceDown(self) 
     256{ 
     257    var elem = self.parentNode, 
     258        eid = null, 
     259        pos = null, 
     260        widget_id = null, 
     261        current_values = null, 
     262        newelem = null, 
     263        nextelem = null, 
     264        cbs = null, 
     265        arrows = null; 
     266    if (elem === null) { 
     267        return false; 
     268    } 
     269    eid = elem.id.split('-'); 
     270    pos = parseInt(eid.pop(), 10); 
     271    widget_id = eid.pop(); 
     272    current_values = jq('#' + widget_id + ' input'); 
     273    if ((pos + 1) === current_values.length) { 
     274        return false; 
     275    } 
     276 
     277    newelem = elem.cloneNode(true); 
     278    //Fix: (IE keep the standard value) 
     279    cbs = newelem.getElementsByTagName("input"); 
     280    if (cbs.length > 0) { 
     281        cbs[0].checked = elem.getElementsByTagName("input")[0].checked; 
     282    } 
     283 
     284    // up img 
     285    arrows = newelem.getElementsByTagName("a"); 
     286    arrows[0].onclick = function () { 
     287        refbrowser_moveReferenceUp(this); 
     288    }; 
     289    // down img 
     290    arrows[1].onclick = function () { 
     291        refbrowser_moveReferenceDown(this); 
     292    }; 
     293 
     294    nextelem = document.getElementById('ref-' + widget_id + '-' + (pos + 1)); 
     295 
     296    elem.parentNode.insertBefore(newelem, nextelem.nextSibling); 
     297    elem.parentNode.removeChild(elem); 
     298    newelem.id = 'ref-' + widget_id + '-' + (pos + 1); 
     299    nextelem.id = 'ref-' + widget_id + '-' + pos; 
     300} 
     301 
     302function showMessage(message) { 
     303    jq('#messageTitle').text(message); 
     304    jq('#message').show(); 
     305} 
     306 
     307function submitHistoryForm() { 
     308     var form = document.history; 
     309     var path = form.path.options[form.path.selectedIndex].value; 
     310     form.action = path; 
     311     form.submit(); 
     312} 
     313 
     314function pushToHistory(url) { 
     315  var history = jq(document).data('atrb_history'); 
     316  history.push(url); 
     317  jq(document).data('atrb_history', history); 
     318} 
     319 
     320function resetHistory() { 
     321  jq(document).data('atrb_history', []); 
     322} 
     323 
     324function popFromHistory() { 
     325  var history = jq(document).data('atrb_history'); 
     326  value = history.pop(); 
     327  jq(document).data('atrb_history', history); 
     328  return value; 
     329} 
     330 
     331function refreshOverlay(wrap, srcfilter, newoption) { 
     332    var oldhistory = jq('[id^=atrb_] form#history select'); 
     333    wrap.load(srcfilter, function() {  
     334        jq('[id^=atrb_] form#history select').append(newoption + oldhistory.html()); 
     335        ov = jq('div#content').data('overlay'); 
     336        widget_id = ov.getTrigger().attr('rel').substring(6); 
     337        disablecurrentrelations(widget_id); 
     338        }); 
     339} 
Note: See TracChangeset for help on using the changeset viewer.