Focusin / focusout test

by kapik

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Namnlöst dokument</title>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/lib/log4javascript.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/src/js/core/core.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/src/js/core/dom.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/src/js/core/domrange.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/src/js/core/wrappedrange.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/src/js/core/wrappedselection.js"></script>
<script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/src/js/modules/rangy-selectionsaverestore.js"></script>
        <style type="text/css">
        .rangySelectionBoundary {
            display:inline-block !important;
            width:2px;
            background-color:red;
        }
    </style>
    </head>

<body>
    <iframe id="editor" src=""></iframe>
    <input type="button" value="Activate the editor" onclick="Editor.focus()" />
    <div id="message"></div>
</body>
</html>

JavaScript

var Editor = {
    document: false,
    frame: false,
    init: function(id) {
        var doc = this.document = $(id).contents();
        this.window = $(id)[0].contentWindow;
        this.document[0].designMode = "On";

        console.log(this.window.name);

        // append some text to the iframe
        var c = $("<p>The quick brown fox jumps over the lazy dog.</p>", this.document);
        $("body", this.document).append(c);

        // attach some focus event handlers
        if (document.all) {
            $(id).bind("beforedeactivate", function(event) {
                Editor.deactivate();
            });
            $(id).bind("beforeactivate", function(event) {
                Editor.activate();
            });
        } else {
            $(this.window).bind("blur", function(event) {
                Editor.deactivate();
            });
            $(this.window).bind("focus", function(event) {
                Editor.activate();
            });
        }
    },

/*
     * Focus the editor
    */
    focus: function() {
        this.window.focus();
    },

/*
     * Deactivate the editor
     */
    deactivate: function() {
        $("#message").html("<p>deactivating...</p>");

        // remove obsolete selections
        if (this._sel) rangy.removeMarkers(this._sel);
        this._sel = rangy.saveSelection(this.window);
        // highlight selection boundaries
        $(".rangySelectionBoundary", this.document).css({
            display: "inline-block",
            width: "4px",
            "background-color": "magenta",
            height: "1em"
        });
    },

/*
     * Deactivate the editor
     */
    activate: function() {
        if (this._sel === false) return;
        $("#message").html("<p>activating...</p>");


        var sel = this._sel;
        this._sel = false;
        rangy.restoreSelection(sel);
    },

    _sel: false
};
rangy.init();
Editor.init("#editor");