c9-core/plugins/c9.ide.editors/imgview.js

define(function(require, exports, module) {
    main.consumes = ["Editor", "editors", "ui", "save", "vfs"];
    main.provides = ["imgview"];
    return main;

    function main(options, imports, register) {
        var ui = imports.ui;
        var vfs = imports.vfs;
        var save = imports.save;
        var Editor = imports.Editor;
        var editors = imports.editors;
        
        /***** Initialization *****/
        
        var extensions = ["gif", "ico"];
                          
        function ImageEditor() {
            var plugin = new Editor("Ajax.org", main.consumes, extensions);
            var editor;
            
            var BGCOLOR = "#3D3D3D";
            
            plugin.on("draw", function(e) {
                // Create UI element
                editor = e.tab.appendChild(new ui.img({
                    flex: "1",
                    anchors: "0 0 0 0",
                    visible: "false",
                    style: "background-color:" + BGCOLOR
                }));
                
                plugin.addElement(editor);
    
                save.on("beforeSave", function(e) {
                    var path = e.document.tab.path;
                    if (!path)
                        return;
    
                    // don't save images for now.
                    if (editor.value == path)
                        return false;
                }, plugin);
        
                editor.show();
            });
            
            /***** Method *****/
            
            function setPath(path, doc) {
                if (!path) return;
                
                // Caption is the filename
                doc.title = (doc.changed ? "*" : "") + 
                    path.substr(path.lastIndexOf("/") + 1);
                
                // Tooltip is the full path
                doc.tooltip = path;
                
                var fullpath = path.match(/^\w+:\/\//)
                    ? path
                    : vfs.url(path);
                    
                editor.setProperty("value", fullpath);
            }
            
            /***** Lifecycle *****/
            
            plugin.on("documentLoad", function(e) {
                var doc = e.doc;
                doc.tab.on("setPath", function(e) {
                    setPath(e.path, doc);
                }, doc.getSession());
                doc.tab.backgroundColor = BGCOLOR;
                doc.tab.classList.add("dark");
            });
            
            plugin.on("documentActivate", function(e) {
                setPath(e.doc.tab.path || e.doc.value, e.doc);
            });
            
            /***** Register and define API *****/
            
            /**
             * The imgview handle, responsible for events that involve all 
             * ImageEditor instances. This is the object you get when you request 
             * the imgview service in your plugin.
             * 
             * Example:
             * 
             *     define(function(require, exports, module) {
             *         main.consumes = ["imgview"];
             *         main.provides = ["myplugin"];
             *         return main;
             *     
             *         function main(options, imports, register) {
             *             var imgviewHandle = imports.imgview;
             *         });
             *     });
             * 
             * 
             * @class imgview
             * @extends Plugin
             * @singleton
             */
            /**
             * Read Only Image Viewer for Cloud9
             * 
             * Example of instantiating a new terminal:
             * 
             *     tabManager.openFile("/test.png", true, function(err, tab) {
             *         if (err) throw err;
             * 
             *         var imgview = tab.editor;
             *     });
             * 
             * @class imgview.ImageEditor
             * @extends Editor
             **/
            /**
             * The type of editor. Use this to create the terminal using
             * {@link tabManager#openEditor} or {@link editors#createEditor}.
             * @property {"imgview"} type
             * @readonly
             */
            plugin.freezePublicAPI({});
            
            plugin.load(null, "imgview");
            
            return plugin;
        }
        ImageEditor.autoload = false;
        
        register(null, {
            imgview: editors.register("imgview", "Image Viewer", 
                                      ImageEditor, extensions)
        });
    }
});