From 3b3037c153b79442ffba8cfa4d064add5e595597 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Wed, 23 Mar 2016 22:03:30 -0400 Subject: [PATCH] scroll cursor into view when it moves --- editor.coffee | 221 ++++++++++++++++++++++++++++++++------------------------- 1 file changed, 125 insertions(+), 96 deletions(-) diff --git a/editor.coffee b/editor.coffee index 012079c..73d863e 100644 --- a/editor.coffee +++ b/editor.coffee @@ -235,99 +235,6 @@ domify = (doc, hash) -> el.setAttribute k, v return el -outer_css = (args) -> - w = args.w ? 300 - h = args.h ? 300 - inner_padding = args.inner_padding ? overlay_padding - frame_width = args.frame_width ? inner_padding - # TODO editor controls height... - occupy = (left, top = left, right = left, bottom = top) -> - w -= left + right - h -= top + bottom - return Math.max(left, top, right, bottom) - ret = '' - ret += 'body {' - ret += 'margin: 0;' - ret += 'padding: 0;' - ret += 'color: black;' - ret += 'background: white;' - ret += '}' - ret += '#wrap1 {' - ret += "border: #{occupy 1}px solid black;" - ret += "padding: #{occupy frame_width}px;" - ret += '}' - ret += '#wrap2 {' - ret += "border: #{occupy 1}px solid black;" - ret += "padding: #{occupy inner_padding}px;" - ret += "padding-right: #{inner_padding + occupy 0, 0, 15, 0}px;" # for scroll bar - ret += "width: #{w}px;" - ret += "height: #{h}px;" - ret += 'overflow-x: hidden;' - ret += 'overflow-y: scroll;' - ret += '}' - ret += '#wrap3 {' - ret += 'position: relative;' - ret += "width: #{w}px;" - ret += "min-height: #{h}px;" - ret += '}' - ret += 'iframe {' - ret += 'box-sizing: border-box;' - ret += 'margin: 0;' - ret += 'border: none;' - ret += 'padding: 0;' - ret += "width: #{w}px;" - #ret += "height: #{h}px;" # height auto-set when content set/changed - ret += '-ms-user-select: none;' - ret += '-webkit-user-select: none;' - ret += '-moz-user-select: none;' - ret += 'user-select: none;' - ret += '}' - ret += '#overlay {' - ret += 'position: absolute;' - ret += "left: -#{inner_padding}px;" - ret += "top: -#{inner_padding}px;" - ret += "right: -#{inner_padding}px;" - ret += "bottom: -#{inner_padding}px;" - ret += 'overflow: hidden;' - ret += '}' - ret += '.lightbox {' - ret += 'position: absolute;' - ret += 'background: rgba(100,100,100,0.2);' - ret += '}' - ret += '#cursor {' - ret += 'position: absolute;' - ret += 'width: 2px;' - ret += 'background: linear-gradient(0deg, rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1));' - ret += 'background-size: 200% 200%;' - ret += '-webkit-animation: blink 1s linear normal infinite;' - ret += 'animation: blink 1s linear normal infinite;' - ret += '}' - ret += '@-webkit-keyframes blink {' - ret += '0%{background-position:0% 0%}' - ret += '100%{background-position:0% -100%}' - ret += '}' - ret += '@keyframes blink { ' - ret += '0%{background-position:0% 0%}' - ret += '100%{background-position:0% -100%}' - ret += '}' - ret += '.ann_box {' - ret += 'z-index: 5;' - ret += 'position: absolute;' - ret += 'border: 1px solid rgba(0,0,0,0.1);' - ret += 'outline: 1px solid rgba(255,255,255,0.1);' # in case there's a black background - ret += '}' - ret += '.ann_tag {' - ret += 'z-index: 10;' - ret += 'position: absolute;' - ret += 'font-size: 8px;' - ret += 'white-space: pre;' - ret += 'background: rgba(255,255,255,0.4);' - ret += '-ms-user-select: none;' - ret += '-webkit-user-select: none;' - ret += '-moz-user-select: none;' - ret += 'user-select: none;' - ret += '}' - return ret ignore_key_codes = @@ -698,14 +605,14 @@ class PeachHTML5Editor @outer_iframe # iframe to hold editor @outer_idoc # "document" object for @outer_iframe @wrap2 = null # scrollbar is on this + @wrap2_offset = null + @wrap2_height = null # including padding @iframe = null # iframe to hold editable content @idoc = null # "document" object for @iframe @cursor = null @cursor_el = null @cursor_visible = false @poll_for_blur_timeout = null - @wrap2_offset = null - @iframe_height = null opt_fragment = @options.fragment ? true @parser_opts = {} if opt_fragment @@ -746,7 +653,7 @@ class PeachHTML5Editor outer_bounds.h = 300 outer_iframe_style += "width: #{outer_bounds.w}px; height: #{outer_bounds.h}px;" @outer_iframe.setAttribute 'style', outer_iframe_style - css = outer_css w: outer_bounds.w, h: outer_bounds.h + css = @generate_outer_css w: outer_bounds.w, h: outer_bounds.h outer_wrap.appendChild @outer_iframe init_1: -> # @iframe has loaded (but not it's css) @idoc = @iframe.contentDocument @@ -783,6 +690,99 @@ class PeachHTML5Editor @load_html @in_el.value if @options.on_init? @options.on_init() + generate_outer_css: (args) -> + w = args.w ? 300 + h = args.h ? 300 + inner_padding = args.inner_padding ? overlay_padding + frame_width = args.frame_width ? inner_padding + occupy = (left, top = left, right = left, bottom = top) -> + w -= left + right + h -= top + bottom + return Math.max(left, top, right, bottom) + ret = '' + ret += 'body {' + ret += 'margin: 0;' + ret += 'padding: 0;' + ret += 'color: black;' + ret += 'background: white;' + ret += '}' + ret += '#wrap1 {' + ret += "border: #{occupy 1}px solid black;" + ret += "padding: #{occupy frame_width}px;" + ret += '}' + ret += '#wrap2 {' + ret += "border: #{occupy 1}px solid black;" + @wrap2_height = h # including padding because padding scrolls + ret += "padding: #{occupy inner_padding}px;" + ret += "padding-right: #{inner_padding + occupy 0, 0, 15, 0}px;" # for scroll bar + ret += "width: #{w}px;" + ret += "height: #{h}px;" + ret += 'overflow-x: hidden;' + ret += 'overflow-y: scroll;' + ret += '}' + ret += '#wrap3 {' + ret += 'position: relative;' + ret += "width: #{w}px;" + ret += "min-height: #{h}px;" + ret += '}' + ret += 'iframe {' + ret += 'box-sizing: border-box;' + ret += 'margin: 0;' + ret += 'border: none;' + ret += 'padding: 0;' + ret += "width: #{w}px;" + #ret += "height: #{h}px;" # height auto-set when content set/changed + ret += '-ms-user-select: none;' + ret += '-webkit-user-select: none;' + ret += '-moz-user-select: none;' + ret += 'user-select: none;' + ret += '}' + ret += '#overlay {' + ret += 'position: absolute;' + ret += "left: -#{inner_padding}px;" + ret += "top: -#{inner_padding}px;" + ret += "right: -#{inner_padding}px;" + ret += "bottom: -#{inner_padding}px;" + ret += 'overflow: hidden;' + ret += '}' + ret += '.lightbox {' + ret += 'position: absolute;' + ret += 'background: rgba(100,100,100,0.2);' + ret += '}' + ret += '#cursor {' + ret += 'position: absolute;' + ret += 'width: 2px;' + ret += 'background: linear-gradient(0deg, rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1));' + ret += 'background-size: 200% 200%;' + ret += '-webkit-animation: blink 1s linear normal infinite;' + ret += 'animation: blink 1s linear normal infinite;' + ret += '}' + ret += '@-webkit-keyframes blink {' + ret += '0%{background-position:0% 0%}' + ret += '100%{background-position:0% -100%}' + ret += '}' + ret += '@keyframes blink { ' + ret += '0%{background-position:0% 0%}' + ret += '100%{background-position:0% -100%}' + ret += '}' + ret += '.ann_box {' + ret += 'z-index: 5;' + ret += 'position: absolute;' + ret += 'border: 1px solid rgba(0,0,0,0.1);' + ret += 'outline: 1px solid rgba(255,255,255,0.1);' # in case there's a black background + ret += '}' + ret += '.ann_tag {' + ret += 'z-index: 10;' + ret += 'position: absolute;' + ret += 'font-size: 8px;' + ret += 'white-space: pre;' + ret += 'background: rgba(255,255,255,0.4);' + ret += '-ms-user-select: none;' + ret += '-webkit-user-select: none;' + ret += '-moz-user-select: none;' + ret += 'user-select: none;' + ret += '}' + return ret overlay_event_to_inner_xy: (e) -> unless @wrap2_offset? @wrap2_offset = get_el_bounds @wrap2 @@ -1086,6 +1086,35 @@ class PeachHTML5Editor @cursor_el.style.top = "#{cursor.y + overlay_padding + Math.round(height * .07)}px" @cursor_el.style.height = "#{Math.round height * 0.82}px" @annotate cursor.n + @scroll_into_view cursor.y, height + scroll_into_view: (y, h = 0) -> + closest = 30 # setting: smallest pixels from top/bottom of screet that's OK + y += overlay_padding # convert units from @idoc to @wrap2 + # very top of document + if y <= closest + @wrap2.scrollTop = 0 + return + # very bottom of document + if y + h >= @wrap2.scrollHeight - closest + @wrap2.scrollTop = @wrap2.scrollHeight - @wrap2_height + return + # The most scrolled up (lowest value for scrollTop) that would be OK + upmost = y + h + closest - @wrap2_height + upmost = Math.max(upmost, 0) + # the most scrolled down (highest value for scrollTop) that would be OK + downmost = y - closest + downmost = Math.min(downmost, @wrap2.scrollHeight - @wrap2_height) + if upmost > downmost # means h is too big to fit + # scroll so top is visible + @wrap2.scrollTop = downmost + return + if @wrap2.scrollTop < upmost + @wrap2.scrollTop = upmost + return + if @wrap2.scrollTop > downmost + @wrap2.scrollTop = downmost + return + return annotate: (n) -> while @matting.length > 0 @overlay.removeChild @matting[0] -- 1.7.10.4