Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

Indri

Indri is a client-side web file dialog for selecting files or specifying a destination in a remote file repository. It can be styled to integrate with web applications, and provides full configuration through rendering and file system plugins.

screenshot

Getting Started

The Indri distribution comes with example files that show how Indri may be used with various popular frameworks. To view the files, make the indri/examples available via an HTTP server and browse to any of the test-*.html files.

Embedding Indri in a web page

Indri comes with standard configurations for open and save dialogs. The only additional configuration option that must be supplied is a callback for when file system items are selected or when the dialog is cancelled.

Upload the build/indri-current.version.number folder to a web server. In your HTML file, include the indri.min.css stylesheet and indri-min.js script. Then, given an empty div with the id mydialog, the simplest Indri setup script using jQueryUI has these components (version 0.5.0 is used in this example):

Include the javascript and CSS files:

    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jquery-ui-1.10.3.min.js"></script>
    <link href="indri-0.5.0/indri.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="indri-0.5.0/indri.min.js"></script>

Add framework specific styles (jQueryUI in this case):

    <style type="text/css">
      /* jQueryUI specific styles */
      .ui-widget[role="dialog"] {  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; padding: 0; width: 80%!important; height: 80%!important;  }
      .ui-widget #indriDialog { width: 100% !important; height: 100%!important; padding:0; border: 1px solid #ddd; background: none;}
    </style>

Provide a function for opening the Indri dialog:

    function showDialog() {
      jQuery('#myDialog').load('indri-0.5.0/templates/indri.html', function() {
        var initializer = jQuery.extend(true, {}, FileBrowser.prototype.OpenDialogInitializer, {

          resultCallback : function(result) { 
            jQuery('#myDialog').dialog('close');
            console.log(result);            
          }
        });

        FileBrowser.attach(jQuery("#indriui"), new FileSystemManager("http://indri-filesystem.herokuapp.com/"), initializer);
        jQuery('#myDialog').dialog(); 
      });
    }

You can attach the function to a button or other HTML element:

    jQuery("#openIndriBtn").click(function() { showDialog(); });

This uses the default settings for an Open File dialog, and provides a callback that closes the dialog and logs the result to the javascript console.

The full documentation (https://github.com/ikayzo/indri/wiki) explains the parameters to FileBrowser.attach() in detail, and covers how to customize Indri's functionality and appearance.

License

Indri is released under the LGPL License.

About

No description, website, or topics provided.

Resources

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.