JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
track editor focus with textarea
authorJason Woofenden <jason@jasonwoof.com>
Thu, 18 May 2017 17:52:19 +0000 (13:52 -0400)
committerJason Woofenden <jason@jasonwoof.com>
Thu, 18 May 2017 17:52:19 +0000 (13:52 -0400)
editor.js

index 104bbae..66b835b 100644 (file)
--- a/editor.js
+++ b/editor.js
@@ -805,6 +805,7 @@ function PeachHTML5Editor (in_el, options) {
        this.init_1_called = false // when iframes have loaded
        this.outer_iframe // iframe to hold editor
        this.outer_idoc // "document" object for this.outer_iframe
+       this.input_el = null
        this.wrap2 = null // scrollbar is on this
        this.wrap2_offset = null
        this.wrap2_height = null // including padding
@@ -814,7 +815,6 @@ function PeachHTML5Editor (in_el, options) {
        this.cursor_el = null
        this.cursor_visible = false
        this.cursor_ideal_x = null
-       this.poll_for_blur_timeout = null
        opt_fragment = this.options.fragment != null ? this.options.fragment : true
        this.parser_opts = {}
        if (opt_fragment) {
@@ -832,6 +832,9 @@ function PeachHTML5Editor (in_el, options) {
                        domify(_this.outer_idoc, {text: css})
                ]}})
                _this.outer_idoc.head.appendChild(icss)
+               _this.input_el = domify(_this.outer_idoc, {textarea: {style: "position: relative; left: 100px"}}) // {style: "display: block; position: absolute; top: -1000px; left: 0; height: 500px; width 50em"}})
+               _this.input_el.onblur = _this.onblur.bind(_this)
+               _this.outer_idoc.body.appendChild(_this.input_el)
                _this.iframe = domify(_this.outer_idoc, {iframe: {sandbox: 'allow-same-origin allow-scripts'}})
                _this.iframe.onload = function() {
                        return _this.init_1()
@@ -894,36 +897,18 @@ PeachHTML5Editor.prototype.init_1 = function() { // this.iframe has loaded (but
        }
 }
 PeachHTML5Editor.prototype.init_2 = function() { // this.iframe and it's css file(s) are ready
-       this.overlay.onclick = (function(_this) {
-               return function(e) {
+       var _this = this
+       var this_event_bind = function (cb) {
+               return function (e) {
                        _this.have_focus()
-                       return event_return(e, _this.onclick(e))
+                       event_return(e, _this[cb](e))
                }
-       })(this)
-       this.overlay.ondoubleclick = (function(_this) {
-               return function(e) {
-                       _this.have_focus()
-                       return event_return(e, _this.ondoubleclick(e))
-               }
-       })(this)
-       this.outer_idoc.body.onkeyup = (function(_this) {
-               return function(e) {
-                       _this.have_focus()
-                       return event_return(e, _this.onkeyup(e))
-               }
-       })(this)
-       this.outer_idoc.body.onkeydown = (function(_this) {
-               return function(e) {
-                       _this.have_focus()
-                       return event_return(e, _this.onkeydown(e))
-               }
-       })(this)
-       this.outer_idoc.body.onkeypress = (function(_this) {
-               return function(e) {
-                       _this.have_focus()
-                       return event_return(e, _this.onkeypress(e))
-               }
-       })(this)
+       }
+       this.overlay.onmousedown = this_event_bind('onclick')
+       this.overlay.ondoubleclick = this_event_bind('ondoubleclick')
+       this.outer_idoc.body.onkeyup = this_event_bind('onkeyup')
+       this.outer_idoc.body.onkeydown = this_event_bind('onkeydown')
+       this.outer_idoc.body.onkeypress = this_event_bind('onkeypress')
        this.load_html(this.in_el.value)
        if (this.options.on_init != null) {
                return this.options.on_init()
@@ -2535,27 +2520,14 @@ PeachHTML5Editor.prototype.pretty_html = function(tree, indent, parent_flags) {
        return ret
 }
 PeachHTML5Editor.prototype.onblur = function() {
+       this.editor_is_focused = false
        this.kill_cursor()
 }
 PeachHTML5Editor.prototype.have_focus = function() {
-       this.editor_is_focused = true
-       this.poll_for_blur()
-}
-PeachHTML5Editor.prototype.poll_for_blur = function() {
-       if (this.poll_for_blur_timeout != null) {
-               return
+       if (!this.editor_is_focused) {
+               this.input_el.focus()
+               this.editor_is_focused = true
        }
-       this.poll_for_blur_timeout = timeout(150, (function(_this) { return function() {
-               next_frame(function() { // pause polling when browser knows we're not active/visible/etc.
-                       _this.poll_for_blur_timeout = null
-                       if (document.activeElement === _this.outer_iframe) {
-                               _this.poll_for_blur()
-                       } else {
-                               _this.editor_is_focused = false
-                               _this.onblur()
-                       }
-               })
-       }})(this))
 }
 
 window.peach_html5_editor = function() {