<html> <head> <title>Test page for the egw action stuff</title> <!-- Basic action stuff --> <script src="../egw_action.js"></script> <script src="../egw_action_common.js"></script> <!-- JQuery is just used in this example. The egw_action scripts do not need JQuery! --> <script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <!-- Popup stuff --> <link rel="stylesheet" type="text/css" href="skins/dhtmlxmenu_egw.css"> <script src="js/dhtmlxcommon.js"></script> <script src="js/dhtmlxmenu.js"></script> <script src="js/dhtmlxmenu_ext.js"></script> <script src="../egw_action_popup.js"></script> <script src="../egw_action_dragdrop.js"></script> <script src="../egw_menu.js"></script> <script src="../egw_menu_dhtmlx.js"></script> <style> body, table { font-family: Arial, sans-serif; font-size: 10pt; } .listbox { width: 250px; border: 2px groove gray; margin: 5px; border-collapse: collapse; } .listbox tr { -moz-user-select: none; -khtml-user-select: none; user-select: none; cursor: default; padding: 2px; } .listbox tr.odd { background-color: #eeeeee; } .listbox tr.selected { background-color: #2b5d9b; color: white; } .listbox tr.odd.selected { background-color: #234b7d !important; } .listbox .focused { border: 1px dotted black; padding: 1px; } .listbox tr.draggedOver { color: red !important; } .egw_action_ddHelper { padding: 5px 5px 5px 26px; background-image: url(imgs/page.png); background-position: 5px 5px; background-repeat: no-repeat; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: white 0px 0px 5px; } </style> </head> <body> <table class="listbox" id="lb1"> <tr id="folder1"><td><img src="imgs/folder.png"/></td><td style="width: 200px">Folder 1</td><td><input type="checkbox"></td></tr> <tr id="file1"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 1</td><td><input type="checkbox"></td></tr> <tr id="file2"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 2</td><td><input type="checkbox"></td></tr> <tr id="file3"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 3</td><td><input type="checkbox"></td></tr> <tr id="file4"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 4</td><td><input type="checkbox"></td></tr> <tr id="file5"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 5</td><td><input type="checkbox"></td></tr> </table> <button id="performAction">Perform action...</button><button id="selectAll">Select All</button> <script> var actionManager = null; var objectManager = null; $j(document).ready(function() { init(); }); // An action object interface for the listbox - "inherits" from // egwActionObjectInterface function listboxItemAOI(_node) { var aoi = new egwActionObjectInterface(); aoi.node = _node; aoi.checkBox = ($j(":checkbox", aoi.node))[0]; aoi.checkBox.checked = false; aoi.doGetDOMNode = function() { return aoi.node; } function getShiftState(e) { var state = EGW_AO_SHIFT_STATE_NONE; state = egwSetBit(state, EGW_AO_SHIFT_STATE_MULTI, e.ctrkKey || e.metaKey); state = egwSetBit(state, EGW_AO_SHIFT_STATE_BLOCK, e.shiftKey); return state; } // Now append some action code to the node $j(_node).click(function(e) { if (e.target != aoi.checkBox) { var selected = egwBitIsSet(aoi.getState(), EGW_AO_STATE_SELECTED); var state = getShiftState(e); // "Normal" Listbox behaviour aoi.updateState(EGW_AO_STATE_SELECTED, !egwBitIsSet(state, EGW_AO_SHIFT_STATE_MULTI) || !selected, state); // "PHPMyAdmin" Listbox behaviour // aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED, // !selected), false, EGW_AO_SHIFT_STATE_MULTI); } }); $j(aoi.checkBox).change(function() { aoi.updateState(EGW_AO_STATE_SELECTED, this.checked, EGW_AO_SHIFT_STATE_MULTI); }); aoi.doTriggerEvent = function(_event) { if (_event == EGW_AI_DRAG_OVER) { $j(this.node).addClass("draggedOver"); } if (_event == EGW_AI_DRAG_OUT) { $j(this.node).removeClass("draggedOver"); } } aoi.doSetState = function(_state) { var selected = egwBitIsSet(_state, EGW_AO_STATE_SELECTED); this.checkBox.checked = selected; $j(this.node).toggleClass('focused', egwBitIsSet(_state, EGW_AO_STATE_FOCUSED)); $j(this.node).toggleClass('selected', selected); } return aoi; } function alertClicked(_action, _senders, _target) { var ids = ""; for (var i = 0; i < _senders.length; i++) ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : ""); alert("Action '" + _action.caption + "' executed on elements '" + ids + "', target '" + (_target ? _target.id : "null") + "'"); } function returnDDHelper(_action, _senders) { var text = []; for (var i = 0; i < _senders.length; i++) { text.push(_senders[i].id); } return $j("<div class=\"ddhelper\">" + _senders.length + " (" + text.join(", ") + ") Elements selected </div>") } function init() { //Initialize the action manager and add some actions to it actionManager = new egwActionManager(); objectManager = new egwActionObjectManager("", actionManager); actionManager.updateActions( [ { "id": "folder_open", "iconUrl": "imgs/folder.png", "caption": "Open folder", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", "default": true }, { "id": "file_view", "iconUrl": "imgs/view.png", "caption": "View", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", "default": true }, { "id": "file_preview", "iconUrl": "imgs/preview.png", "caption": "Preview", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup" }, { "id": "file_delete", "iconUrl": "imgs/delete.png", "caption": "Delete", "onExecute": alertClicked, "type": "popup", "group": 2 }, { "id": "file_edit", "iconUrl": "imgs/edit.png", "caption": "Edit file", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup" }, { "id": "file_compress", "iconUrl": "imgs/compress.png", "caption": "Create ZIP archive", "onExecute": alertClicked, "type": "popup", "group": 1, "order": 1 }, { "id": "file_email", "iconUrl": "imgs/email.png", "caption": "E-Mail", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", "group": 1, "order": 0 }, { "id": "file_compress_email", "caption": "Create ZIP and E-Mail", "onExecute": alertClicked, "type": "popup", "group": 1, "order": 2, "allowOnMultiple": "only", "hint": "Compresses multiple files and mails them" }, { "id": "send_to", "caption": "Send to", "type": "popup", "group": 10, "children": [ { "id": "send_to_1", "caption": "Folder 1", "onExecute": alertClicked, "type": "popup" }, { "id": "send_to_2", "caption": "Folder 2", "onExecute": alertClicked, "type": "popup" }, { "id": "send_to_3", "caption": "Folder 3", "onExecute": alertClicked, "type": "popup" }, { "id": "send_to_add", "caption": "Add target", "onExecute": alertClicked, "type": "popup", "group": -1 } ] }, { "id": "file_drag", "type": "drag", "dragType": "file" }, { "id": "folder_drop", "type": "drop", "caption": "Move files here", "iconUrl": "imgs/move.png", "acceptedTypes": "file", "onExecute": alertClicked, "children": [ { "id": "sub1", "type": "popup", "caption": "Use insecure but super fast move algorithm" }, { "id": "sub2", "type": "popup", "caption": "Use standard move algorithm", "default": true }, { "id": "sub3", "type": "popup", "caption": "Only simulate moving" } ], "default": true }, { "id": "folder_drop2", "type": "drop", "caption": "Copy files here", "iconUrl": "imgs/copy.png", "onExecute": alertClicked, "acceptedTypes": "file" }, { "id": "chk1", "type": "popup", "checkbox": true, "checked": true, "caption": "Test1" }, { "id": "chk2", "type": "popup", "checkbox": true, "checked": false, "caption": "Test2", "onExecute": function(_action) { _action.checked = true; } } ] ); //Links which will be assigned to each listbox item var listboxFileLinks = [ {"actionId": "file_view", "enabled": true}, {"actionId": "file_preview", "enabled": true}, {"actionId": "file_edit", "enabled": true}, {"actionId": "file_email", "enabled": true}, {"actionId": "file_compress_email", "enabled": true}, {"actionId": "file_compress", "enabled": true}, {"actionId": "file_delete", "enabled": true}, {"actionId": "send_to", "enabled": true}, "file_drag", "chk1", "chk2" ]; var listboxFolderLinks = [ {"actionId": "folder_open", "enabled": true}, {"actionId": "file_compress_email", "enabled": true}, {"actionId": "file_compress", "enabled": true}, {"actionId": "file_delete", "enabled": true}, "send_to", "folder_drop", "folder_drop2" ]; $j('#lb1 tr:odd').addClass('odd'); //Create an object representation for each listbox-row and append //each to its own listboxItemAOI $j('#lb1 tr').each(function(index, elem) { var obj = objectManager.addObject(elem.id, new listboxItemAOI(elem)); //Apply the links to the actions if (elem.id.substr(0,4) == "file") obj.updateActionLinks(listboxFileLinks); else obj.updateActionLinks(listboxFolderLinks); }); $j("#selectAll").click(function() { objectManager.toggleAllSelected(); }); $j("#performAction").click(function(e) { if (!objectManager.executeActionImplementation(this, "popup")) alert("Please select one or more objects."); return false; }); } </script> </body> </html>