Changeset 33106 for main

Show
Ignore:
Timestamp:
24.05.2019 00:19:32 (5 months ago)
Author:
ak19
Message:

First working version of Delete Selected berry baskets. I suspect code is not fully optimal despite trying what I thought were better ways. In any case there's code duplication in deleteAll and deleteSelected and the deletion in the ygDDPlayer's deletion callbacks. Will attempt to refactor as much as possible next time. But this commit works. Will still need to add a selectAll option.

Location:
main/trunk/greenstone3/web/interfaces/default
Files:
2 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/berrybasket/berrycheckout.js

    r33104 r33106  
    1919var options = ['fullview', 'textview', 'email']; 
    2020 
     21function deleteSelected() { 
     22     
     23    if(docList.length == 0) return; // no berries on page, nothing to delete 
     24 
     25    // https://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html 
     26    //https://stackoverflow.com/questions/590018/getting-all-selected-checkboxes-in-an-array 
     27    //https://www.w3schools.com/jsref/met_document_queryselectorall.asp 
     28    //https://www.w3schools.com/cssref/css_selectors.asp 
     29    var selectedCheckboxList = document.querySelectorAll('input[name=select-berry-checkbox]:checked'); 
     30    if(selectedCheckboxList.length == 0) return; // nothing selected, so nothing to delete 
     31   
     32    doDelete(selectedCheckboxList); 
     33} 
    2134 
    2235function deleteAll() { 
     
    7184    YAHOO.util.Connect.asyncRequest(request_type, delurl , delcallback); 
    7285     
     86} 
     87 
     88 
     89function doDelete(selectedList) { // given list of selected checkboxes 
     90     
     91    var idsToDelete = []; 
     92 
     93    // construct the deletion url by concatenating the ids with | which is %7C in URL-encoded form 
     94    var  delurl = delurlPath; // var delurlPath is declared in ygDDPlayer.js. 
     95     
     96    for(var i = 0; i < selectedList.length; i++) { 
     97    selected_id = selectedList[i].id; 
     98    // Format of checkbox id: "<docid>-checkbox" 
     99    var end = selected_id.indexOf("-checkbox"); 
     100    var doc_id = selected_id.substring(0, end); 
     101 
     102    idsToDelete[i] = doc_id; 
     103 
     104    // Now just need to append each doc_id to the deletion URL separated by |, 
     105    // but this character needs to be URL encoded, else the delete doesn't work. 
     106    if((i+1) == selectedList.length) { // if it's the last id to process, don't append separator 
     107        delurl += doc_id; 
     108    } else { // there's more ids to process, so append separator 
     109        delurl += doc_id + "%7C"; // url-encoded version of | 
     110    } 
     111     
     112    } 
     113     
     114    // The following is a modified version of methods internal to 
     115    // ygDDPlayer.js's ygDDPlayer.prototype.onDragDrop 
     116    var delSuccess = function(o) { 
     117    var result = o.responseXML; 
     118 
     119    var deleteAll = false; 
     120    if(selectedList.length === docList.length) { // deleting all berries, can optimise 
     121        deleteAll = true; 
     122    } 
     123    else { // Not deleting all berries, just a subset 
     124        // Remove id of selected doc to be deleted from docList.         
     125        // No ordering of berry indexes according to the order they're added, 
     126        // So can't optimise comparison further than traversing the docList array in reverse 
     127        for (var i = docList.length - 1; i >= 0; i--) { 
     128        var berry = docList[i]; 
     129        var berry_id = berry['collection'] + ":" + berry['name']; 
     130         
     131        for(var j = 0; j < idsToDelete.length; j++) { 
     132            if(idsToDelete[j] == berry_id) { 
     133            docList.splice(i, 1); // i indexes into docList, delete element i from docList 
     134            break; 
     135            } 
     136        } 
     137        } 
     138 
     139        // remove the selected documents' HTML display elements 
     140        var berryDocsList = YAHOO.util.Dom.get('berryDocsList'); // ordered list item containing the berries     
     141        for(var i = 0; i < selectedList.length; i++) { 
     142        var li = selectedList[i].parentNode; // list item parent of checkbox 
     143        // remove the list item from its containing orderedList      
     144        berryDocsList.removeChild(li); 
     145        } 
     146    } 
     147 
     148    // if all docs are deleted, then display "berry basket is empty" message 
     149    if (deleteAll || !berryDocsList.hasChildNodes()) {       
     150        if(deleteAll) { 
     151        // if deleting all docs, just use the easy way to empty the docList array 
     152        docList.length = 0; // https://www.jstips.co/en/javascript/two-ways-to-empty-an-array/ 
     153        } 
     154 
     155        // Removing all child nodes (done one at a time) is more optimal 
     156        // than setting innerHTML to empty string, see 
     157        // https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript 
     158        var content =  YAHOO.util.Dom.get('berryBasketContent'); 
     159        while (content.hasChildNodes()) { 
     160        content.removeChild(content.firstChild); 
     161        }   
     162        content.appendChild(document.createTextNode('Your berry basket is empty.')); 
     163     
     164        var trashbin =  YAHOO.util.Dom.get('trashbin'); 
     165        if ( trashbin !=null){ 
     166        trashbin.style.background = 'url("interfaces/default/images/trash-full.png") 0 0 no-repeat'; 
     167        } 
     168    } 
     169 
     170    // deselect the delete-all and delete-selected checkboxes 
     171    YAHOO.util.Dom.get('delall-checkbox').checked = false;  
     172    YAHOO.util.Dom.get('delselected-checkbox').checked = false;  
     173    } 
     174 
     175    var delFailure = function(o){ alert("Deletion failed" + o);} 
     176     
     177    var delcallback = { 
     178    success:delSuccess, 
     179    failure:delFailure,   
     180    argument:null // supposed to be the ygDDPlayer object, but don't have a ref to it here, so trying null 
     181    } 
     182 
     183    // Finally send the actual delete request 
     184    // request_type defaults to GET, which is what's used for add and del, see ygDDPlayer.js. 
     185    YAHOO.util.Connect.asyncRequest(request_type, delurl , delcallback); 
    73186} 
    74187 
     
    195308    dlist.appendChild(ol); 
    196309 
     310    ol.setAttribute("id", "berryDocsList"); 
     311     
    197312    for (var i in docList){ 
    198313        var doc = docList[i]; 
    199314        var li = document.createElement('li'); 
    200         var a = document.createElement('a'); 
    201315        var img = document.createElement('img'); 
    202316        var text =""; 
    203          
     317 
     318        var doc_id = doc['collection']+":"+ doc['name'];         
     319         
    204320        img.setAttribute("src", "interfaces/default/images/berry.png"); 
    205         img.setAttribute("id", doc['collection']+":"+ doc['name']); 
     321        img.setAttribute("id", doc_id); 
    206322        img.setAttribute("height", "15px"); 
    207323        img.setAttribute("width", "15px"); 
    208324        li.appendChild(img); 
    209325 
    210             generateDocDisplay(li, doc) 
     326        generateDocDisplay(li, doc, doc_id) 
    211327        li.className = 'berrydoc'; 
    212328        ol.appendChild(li); 
     
    216332} 
    217333 
    218 function generateDocDisplay(li, doc) { 
    219  
     334function generateDocDisplay(li, doc, doc_id) { 
     335    var checkbox = document.createElement('input'); 
     336    checkbox.setAttribute("type", "checkbox"); 
     337    checkbox.setAttribute("id", doc_id+"-checkbox"); 
     338    checkbox.setAttribute("name", "select-berry-checkbox"); 
     339    checkbox.setAttribute("value", "select-"+doc_id); 
     340     
    220341    var a = document.createElement('a'); 
    221342    var text=""; 
     
    226347    li.appendChild(document.createTextNode(doc['root_Title']+": "));  
    227348    } 
     349    li.appendChild(checkbox); 
    228350    li.appendChild(a); 
    229351    li.appendChild(document.createTextNode(" ("+doc['collection']+")")); 
  • main/trunk/greenstone3/web/interfaces/default/transform/pages/berry.xsl

    r33104 r33106  
    5151            <div class="clear"><xsl:text> </xsl:text></div> 
    5252        </table> 
     53        <input type="checkbox" name="delsel-checkbox" id="delselected-checkbox" value="delete-all" onclick="deleteSelected()">Delete Selected</input> 
    5354        <input type="checkbox" name="delall-checkbox" id="delall-checkbox" value="delete-all" onclick="deleteAll()">Delete All</input> 
    5455        <div id="berryBasketContent"><span><xsl:text> </xsl:text></span></div>