open.empeg.net zk-filebrowser

ZK-filebrowser Componentset

ZK-filebrowser Componentset is a set of filebrowser related components:

Filebrowser: a fullblown windows explorer like filebrowser with tree, listwindow and filebreadcrumb.
Filebrowsertree: a specialised tree component used in filebrowser above.
Filebrowsertreeitem: a specialized treeitemcomponent used in filebrowsertree above.

This component set and also this repository here is under construction... also to evaluate the codebeamer tooling for further projects.

Download

Download the lates files from the download section in the Documents area.

Sourcecode

Sourcecode is available in the SCM-Repository area.

License

ZK-Filebroser is released under GNU Lesser General Public License 3.0 (LGPL 3.0)

Demo

A demo ist hosted at empego.net:8095/open.empego.net-demo/

. Play around with the browser, download or upload files by rightclick on files or directories. Try drag and drop. Its the first alpha. The demo runs also in the demo in the iframe below. Feel free to play around with it!

) </p></span></div> </div> </td> <td class="navigation"> <div class="wikiNavigationBar noPrint"> <div id="wikiNavigationBarInner"> <span style="white-space: normal;"> <span class="wikiContent">This <b>sidebar</b> is visible beside all project pages. Hints for best use: <ul><li> Include project status information </li><li> Add the most important project links </li><li> Add other project references </li></ul>Click <i>edit</i> at the bottom to modify its content.</span> </span> <div class="propertiesBar"> <a class="wikiNavigationLink" href="../proj/wiki/displayWikiPageProperties.spr-jsessionid-D3EF2C19C71AD2326F764486259D8235-doc_id-95070-forward_doc_id-95888.html"> properties </a> </div> </div> </div> </td> </tr> </table>  </div> </div> </div> <div id="west" class="ui-layout-west no-right-border"> <div class="header actionBar" id="headerDiv" style="margin:0px;">   <input type="text" id="searchBox" style="width:80px;"/> <script type="text/javascript"> var initSearch = function () { var $s = $("#searchBox"); $s.Watermark("Type to filter"); $s.keyup(function () { var v = this.value; if (v.length < 2) { $("#treePane").jstree("clear_search"); } else { $("#treePane").jstree("search", v); } }); }; initSearch(); </script> </div> <div id="treePane" style="height:96%;overflow:auto;"></div> </div> </div> <script type="text/javascript"> var browsingHistory = false; var canEdit = false; $(document).ready(function() { $(document).ajaxError(ajaxErrorHandler); $("#treePane").bind("rename.jstree", function (e, d) { $.ajax({ "url": contextPath + "/ajax/wikis/renamePage.spr", "type": "POST", "data": { "nodeId": d.rslt.obj.attr("id"), "newName": d.rslt.new_name }, "success": function(data) { } }); }); $("#treePane").bind("reopen.jstree", function () { var $t = $("#treePane"); $t.jstree("select_node", "#5-95888"); }); codebeamer.initializeInlineSectionEditing("95888", !browsingHistory && canEdit); }); var populateTree = function (node) { return { "project_id": "3841", "nodeId": node.attr ? node.attr("id") : "" }; }; function onNodeClicked(node, data) { var docId = $(node[0]).attr("id"); docId = docId.split("-")[1]; var revison = null; if (docId.indexOf("/") >= 0) { var s = docId.split("/"); docId = s[0]; revision = s[1]; } var data = {"doc_id": docId}; var editable = true; if ((typeof revision) !== "undefined" && revision !== null) { data["revision"] = revision; editable = false; } // showing the ajax loading indicator var busySignHTML = ajaxBusyIndicator.getBusysignHTML('', false); var d = $("<div>").attr("style", "text-align:center;width:100%;"); d.append(busySignHTML); $("#rightPane").empty().append(d); try { // if the global message box is left there from a previous import // remove it var gm = $("#globalMessages"); if (gm) { gm.remove(); } if (codebeamer.resizeHandler) { //codebeamer.resizeHandler(); var $p = $("#panes"); if ($p) { $p.layout().resizeAll(); } } } catch (e) {} $.ajax({ "type": "GET", "url": contextPath + "/ajax/wiki/getWikiContentAsHtml.spr", "data": data, "success": function (data) { var container = $("#rightPane"); try { container.html(data.content); } catch (e) {} try { $("#mainActionBar").html(data.actionBar); } catch(e) {} container.find(".yuimenubar").each(function() { initPopupMenu($(this).attr("id"), {}); }); codebeamer.initializeInlineSectionEditing(docId, editable); // change the url in the address bar /*if (window.history.pushState) { // replace the whole url window.history.pushState({},"", contextPath + "/wiki/" + docId); } else { // just change the hash location.hash = "_" + docId; }*/ uploaderExtensions.initFileUploader("uploadConversationId_dropZone", "importFromWord", {"dndControlMessageCode": "wiki.import.from.upload", "flatBox": true, "debug": false, getPreviouslyUploadedFiles: false }); initializeJSPWikiScripts(); codebeamer.bindHandlerToUpload("uploadConversationId_dropZone", null, "importFromWord", "/cb/dndupload/saveasnote.spr?doc_id=" + docId, "uploadConversationId"); alignElementsToViewportEdge.init(".editsection", "centerDiv"); var l = $("#panes").layout(); codebeamer.addOpenerButton(l); } }); } function wikiNodeMoved (o, np, position, r) { $.ajax({ "url": contextPath + "/ajax/wikis/movePage.spr", "type": "POST", "data": { "newParentId": np.attr("id"), // TODO: handle top level new parent "nodeId": o.attr("id") }, "success": function(data) { } }); } function checkMove (np, o, op) { if (op === -1 || np === -1) { return true; } if (op.attr("id") != np.attr("id")) { return true; } return false; }; function populateContextMenu (node) { if (browsingHistory) { return {}; } return { "rename": { "label": i18n.message("document.rename.label"), "action": renameWikiPage} }; } function renameWikiPage (node) { $("#treePane").jstree("rename", "#" + node.attr("id")); } </script> <script type="text/javascript"> var tree = new codebeamer.trees.Tree({ "contextPath": "", "treeContainerId": "treePane", "layoutContainerId": "panes", "rightPaneId": "rightPane", "url": "/ajax/wikis/tree.spr;jsessionid=D3EF2C19C71AD2326F764486259D8235?revision=", "editable": true, "headerDivId": "headerDiv", "clicked": onNodeClicked, "contextmenu": { "items": populateContextMenu }, "moved": wikiNodeMoved, "checkMove": checkMove, "disableCookies": true, "cookieNameOpenNodes": "3841-opened", "layoutCookie": "codebeamer-wiki-layout", "data": populateTree }); $(document).ready(function() { tree.init(); }); codebeamer.initTreeLayout("panes", "treePane", "headerDiv", "codebeamer-wiki-layout"); </script> <script type="text/javascript" src="http://www.javaforge.com/js/jquery/jquery-padolsey-autoresize/jquery.autoresize.js;jsessionid=D3EF2C19C71AD2326F764486259D8235?CB_VERSION=6.0.3-201207051634"></script> <script type="text/javascript" src="http://www.javaforge.com/js/dynaWysiwygEditor.js;jsessionid=D3EF2C19C71AD2326F764486259D8235?CB_VERSION=6.0.3-201207051634"></script> <div id="editorTemplateDiv" style="display: none;"> <div class="ditch-tab-skin-cb-box wysiwyg-tabs"> <div id="containerIdTemplate" class="ditch-tab-container"> <div class="ditch-tab-wrap"> <div id="containerIdTemplate-wysiwyg-tab" onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);inplaceDefaultWikiTabListener(new org.ditchnet.jsp.TabEvent(this));" class="ditch-tab ditch-focused ditch-tab-first"> <span class="ditch-tab-bg-left"> </span>WYSIWYG </div> <div id="containerIdTemplate-markup-tab" onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);inplaceDefaultWikiTabListener(new org.ditchnet.jsp.TabEvent(this));" class="ditch-tab ditch-unfocused"> <span class="ditch-tab-bg-left"> </span>Markup </div> <div id="containerIdTemplate-preview-tab" onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);inplaceDefaultWikiTabListener(new org.ditchnet.jsp.TabEvent(this));" class="ditch-tab ditch-unfocused ditch-tab-last"> <span class="ditch-tab-bg-left"> </span>Preview </div><div class="ditch-tabs-right-aligned"> <table border="0" width="100%"> <tr> <td> <input type="hidden" name="dynaWysiwygEditorUpload" value="86448671"/> <div id="dynaWysiwygEditorUpload_dropZone" class="fileUpload_dropZone " style="display:none; "> <h3>Drop files here</h3> </div> </td> <td class="smallLink"> <a href="#" onclick="cbwiki.setDefaultEditorMode('../wiki/editorTemplateTA.html', wikiModeCallback); return false;" title="Set default editor mode" id="editorModeLink" style="visibility:hidden"> Make default </a>   </td> <td class="smallLink"><div style="float:right"> <a title="Help" href="../help/wiki.do-jsessionid-D3EF2C19C71AD2326F764486259D8235.html" onclick="launch_url('../help/wiki.do-jsessionid-D3EF2C19C71AD2326F764486259D8235.html',null);return false;" class="" style=""> Help </a> </div></td> </tr> </table> </div> <br class="ditch-clear"/> </div> <div class="ditch-tab-pane-wrap"> <table width="100%" class="containerInplaceTable"> <tr> <td> <textarea id="editorTemplateTA" style="width:100%" rows="editorRowsTemplate">editorContentTemplate</textarea> </td> </tr> <tr> <td> <div id="editorTemplateTA-preview" class="wikiEditorPreview"></div> </td> </tr> </table> <div id="containerIdTemplate-wysiwyg" class="ditch-tab-pane" style="display:block;"> <div style="display:none;" class="ditch-tab-title">WYSIWYG </div> </div> <div id="containerIdTemplate-markup" class="ditch-tab-pane" style="display:none;"> <div style="display:none;" class="ditch-tab-title">Markup </div> </div> <div id="containerIdTemplate-preview" class="ditch-tab-pane" style="display:none;"> <div style="display:none;" class="ditch-tab-title">Preview </div> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready( function() { if (!codebeamer.selectedMode) { codebeamer.selectedMode = "containerIdTemplate-wysiwyg".split("-")[1]; } var wysiwygTab = document.getElementById('containerIdTemplate-wysiwyg'); var visible = wysiwygTab && wysiwygTab.style.display!="none"; if (visible) { $("#editorTemplateTA").attr("defaultMode","wysiwyg"); } else { $("#editorTemplateTA").attr("defaultMode","markup"); }; $("#editorTemplateTA").attr("cbProjectID","3841"); $("#editorTemplateTA").attr("cbEntityTypeID","5"); $("#editorTemplateTA").attr("cbEntityID","95888"); // This is autoresize in tinyMCE editor // This is autoresize of textarea $("#editorTemplateTA").attr("useTextAreaAutoResize","true"); // This is wether to focus the editor upon init $("#editorTemplateTA").attr("shouldFocus","true"); }); </script> <script type="text/javascript"> $(disableTabbingToWysiwygTabs); </script> </div> </div> </div> <div class="ui-layout-south" style="border:0;overflow:hidden;margin-top:5px;">  <div id="footer" class="noPrint"> <table align="center"> <tr> <td>This site is powered by codeBeamer (6.0.3 mysql). | <a href="https://codebeamer.com/cb/proj/wiki/displayPage.do?doc_id=12091" target="_blank" title="Report a bug or request a feature">Bug / Feature Request</a>  | Knowledge Base</td> </tr> </table> </div>  </div>   <script type="text/javascript"> $("#wikiPageContent").ready(function() { alignElementsToViewportEdge.init(".editsection", "centerDiv"); }); </script>  <script type="text/javascript">initPopupMenu('actionMenu907455808', {});</script>  <script type="text/javascript"> var codebeamer = codebeamer || {}; codebeamer.bindHandlerToUpload = function (elementId, onAllUploadsCompleteSuccessCallback, uploadConversationId, submitUrl, conversationFieldName) { $("#" + elementId).bind('onUploadComplete', function(event, id, fileName, responseJSON) { // when all uploads (on the page) are complete submit the form if (isFileUploadsFinished(false /*, "dynaWysiwygEditorUpload" */)) { if (onAllUploadsCompleteSuccessCallback) { onAllUploadsCompleteSuccessCallback.call(uploadConversationId); } if (submitUrl && "" !== submitUrl) { //var submitUrl = ""; var data = {}; data["" + conversationFieldName] = uploadConversationId; jQuery.ajax({ url: submitUrl, type: "POST", data: data, cache: false, async: false, success:function(data, textStaus, jqXHR) { // after the uploads are done reload the page }, error:function(jqXHR, textStatus, errorThrown) { console.log("Failed to send files:" + textStatus +", error=" + errorThrown); } }); } } }); }; (function(){ // init fileupload var init = function() { try { var elementId = "dynaWysiwygEditorUpload_dropZone"; uploaderExtensions.initFileUploader(elementId, '86448671', { debug: false, getPreviouslyUploadedFiles: false, integrateWithWysiwygEditor: 'editorTemplateTA' }); } catch (ex) { console.log("Exception in init-fileupload:" + ex); } }; if (true) { YAHOO.util.Event.onDOMReady(init); } else { init(); } })(); </script>  <script type="text/javascript">initInlineMenu('actionMenu1503803065', {context:['actionMenu1503803065', 'tl', 'bl', ['beforeShow', 'windowResize']]});</script>  <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-8912524-3']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })(); </script> </body> </html>