IframeViewer for Brackets

gistfile1.txt

/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 *  
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"), 
 * to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
 * and/or sell copies of the Software, and to permit persons to whom the 
 * Software is furnished to do so, subject to the following conditions:
 *  
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *  
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
 * DEALINGS IN THE SOFTWARE.
 * 
 */


/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
/*global define, brackets, $ */

define(function (require, exports, module) {
    'use strict';
    
    // Brackets modules
    var EditorManager           = brackets.getModule("editor/EditorManager"),
        CommandManager          = brackets.getModule("command/CommandManager"),
        Commands                = brackets.getModule("command/Commands"),
        ProjectManager          = brackets.getModule("project/ProjectManager");
    
    // Local modules
    var IframeViewer       = require("IframeViewer");
    
    /**
     * Return the token string that is at the specified position.
     *
     * @param hostEditor {!Editor} editor
     * @param {!{line:Number, ch:Number}} pos
     * @return {String} token string at the specified position
     */
    function _getStringAtPos(hostEditor, pos) {
        var token = hostEditor._codeMirror.getTokenAt(pos);
        
        // If the pos is at the beginning of a name, token will be the 
        // preceding whitespace or dot. In that case, try the next pos.
        if (token.string.trim().length === 0 || token.string === ".") {
            token = hostEditor._codeMirror.getTokenAt({line: pos.line, ch: pos.ch + 1});
        }
        
        if (token.className === "tag") {
            var string = token.string.replace('<', '').replace('>', '');
            return string;
        }
        
        return "";
    }
    
    /**
     * This function is registered with EditManager as an inline editor provider. It creates an inline editor
     * when cursor is on a JavaScript function name, find all functions that match the name
     * and show (one/all of them) in an inline editor.
     *
     * @param {!Editor} editor
     * @param {!{line:Number, ch:Number}} pos
     * @return {$.Promise} a promise that will be resolved with an InlineWidget
     *      or null if we're not going to provide anything.
     */
    function inlineMDNLookup(hostEditor, pos) {
        console.log('called inline MDN lookup');
        if (hostEditor._codeMirror.getOption("mode") !== "htmlmixed" && hostEditor._codeMirror.getOption("mode") !== "html") {
            return null;
        }
      
        // Only provide lookup if the selection is within a single line
        var sel = hostEditor.getSelection(false);
        if (sel.start.line !== sel.end.line) {
            return null;
        }
        
        // how to grab current word?
        // Always use the selection start for determining the image file name. The pos
        // parameter is usually the selection end.        
        var tagName = _getStringAtPos(hostEditor, hostEditor.getSelection(false).start);
        if (tagName === "") {
            return null;
        }
        // Check that its a valid HTML tag name, hard code URLs to MDN or caniuse?
        var result = new $.Deferred();

        var iframeViewer = new IframeViewer(tagName, 'https://developer.mozilla.org/en/HTML/Element/' + tagName);
        iframeViewer.load(hostEditor);
        
        result.resolve(iframeViewer);
        
        return result.promise();
    }
  
    // new handler that tells commandmanager to call other command
    function showOtherStuff() {
        CommandManager.execute(Commands.SHOW_INLINE_EDITOR, inlineMDNLookup);
    }
  
    CommandManager.register(Commands.SHOW_OTHER_STUFF, showOtherStuff);
    //EditorManager.registerInlineEditProvider(inlineMDNLookup);
});

IframeViewer.js

/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 *  
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"), 
 * to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
 * and/or sell copies of the Software, and to permit persons to whom the 
 * Software is furnished to do so, subject to the following conditions:
 *  
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *  
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
 * DEALINGS IN THE SOFTWARE.
 * 
 */


/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
/*global define, brackets, $, window */

define(function (require, exports, module) {
    'use strict';
    
    // Load Brackets modules
    var InlineWidget        = brackets.getModule("editor/InlineWidget").InlineWidget;
    
    function IframeViewer(title, fullPath) {
        this.title = title;
        this.fullPath = fullPath;
        InlineWidget.call(this);
    }
    IframeViewer.prototype = new InlineWidget();
    IframeViewer.prototype.constructor = IframeViewer;
    IframeViewer.prototype.parentClass = InlineWidget.prototype;
    
    IframeViewer.prototype.title = null;
    IframeViewer.prototype.fullPath = null;
    IframeViewer.prototype.$wrapperDiv = null;
    IframeViewer.prototype.$iframe = null;
    
    IframeViewer.prototype.load = function (hostEditor) {
        this.parentClass.load.call(this, hostEditor);
            
        // Header
        var $iframeDiv = $("<div/>")
            .addClass("filename")
            .append($("<span></span>").text(this.title));

        // Image
        this.$iframe = $("<iframe/>")
            .css("display", "block")
            .css("margin", "20px auto")
            .css("opacity", 0)
            .css("width", "100%")
            .css("height", "100%")
            .attr("src", this.fullPath);
         
        // Wrapper
        this.$wrapperDiv = $("<div/>")
            .css("height", "600px")
            .append($iframeDiv)
            .append(this.$iframe);
        
        this.$htmlContent.append(this.$wrapperDiv);
        this.$htmlContent.click(this.close.bind(this));
    };

    IframeViewer.prototype.close = function () {
        this.hostEditor.removeInlineWidget(this);
    };
    
    IframeViewer.prototype.onAdded = function () {
        window.setTimeout(this._sizeEditorToContent.bind(this));
    };
    
    IframeViewer.prototype._sizeEditorToContent = function () {
        this.hostEditor.setInlineWidgetHeight(this, this.$wrapperDiv.height() + 20, true);
        this.$iframe.css("opacity", 1);
    };
    
    module.exports = IframeViewer;
});