From 791a9cfacfba6952b18ede2c8245f98a0a5148aa Mon Sep 17 00:00:00 2001 From: Alex Arendsen Date: Fri, 1 Jul 2016 18:10:41 -0400 Subject: [PATCH 1/2] Adopted Facebook-style Arrow Key + Backspace Behavior for Inserted Texts Users can now move through inserted text using the arrow keys. Adding text to inserted texts invalidates the inserted text, and pressing backspace inside an inserted text deletes it altogether. Pre-existing inserted texts must now be initialized with a `data-atwho-chosen-value` attribute whose value must equal the contents of the inserted text (this should be later automated). --- src/editableController.coffee | 34 +++++++++++++++++++++------------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/editableController.coffee b/src/editableController.coffee index 36be57f3..6bd4ed07 100644 --- a/src/editableController.coffee +++ b/src/editableController.coffee @@ -4,6 +4,7 @@ class EditableController extends Controller sel = @app.window.getSelection() sel.getRangeAt(0) if sel.rangeCount > 0 + # AKA, the "move the cursor [before|after] the given node" function _setRange: (position, node, range=@_getRange()) -> return unless range node = $(node)[0] @@ -67,6 +68,7 @@ class EditableController extends Controller @_setRange 'after', $inserted.contents().last() # modifying inserted element + # Correcting atwho-inserted and atwho-query classes based on current cursor position $(range.startContainer) .closest '.atwho-inserted' .addClass 'atwho-query' @@ -75,25 +77,30 @@ class EditableController extends Controller if ($query = $ ".atwho-query", @app.document).length > 0 \ and $query.is(':empty') and $query.text().length == 0 $query.remove() + return + + # EVERYTHING BELOW HERE IS EXECUTED ONLY IF THERE IS AN .atwho-query ELEMENT if not @_movingEvent e $query.removeClass 'atwho-inserted' + else + return if $query.length > 0 - if $query.length > 0 - switch e.which - when KEY_CODE.LEFT - @_setRange 'before', $query.get(0), range - $query.removeClass 'atwho-query' - return - when KEY_CODE.RIGHT - @_setRange 'after', $query.get(0).nextSibling, range - $query.removeClass 'atwho-query' - return + if $query.length > 0 and query_content = $query.text() + chosen = $query.attr('data-atwho-chosen-value') + if e.which = KEY_CODE.BACKSPACE + $query.remove() + return + else if chosen and query_content != chosen + # $query.empty().html(query_content).attr('data-atwho-chosen-value', null) + $query.before(query_content).remove() + return + # This ensures that the cursor stays where it's supposed to be when the user is typing in their query + @_setRange 'after', $query.get(0), range # matching - if $query.length > 0 and query_content = $query.attr('data-atwho-at-query') - $query.empty().html(query_content).attr('data-atwho-at-query', null) - @_setRange 'after', $query.get(0), range + # We now build a _range that contains the query text + # Note: @at = whatever symbol this controller is registered for ('@', '#', etc); the `flag` _range = range.cloneRange() _range.setStart range.startContainer, 0 matched = @callbacks("matcher").call(this, @at, _range.toString(), @getOpt('startWithSpace'), @getOpt("acceptSpaceBar")) @@ -156,6 +163,7 @@ class EditableController extends Controller .addClass 'atwho-inserted' .html content .attr 'data-atwho-at-query', "" + data['atwho-at'] + @query.text + .attr 'data-atwho-chosen-value', "" + data['atwho-at'] + content if range = @_getRange() range.setEndAfter @query.el[0] range.collapse false From a62f6a09269b249108617f30cb041a2e5a96a5f6 Mon Sep 17 00:00:00 2001 From: Alex Arendsen Date: Sun, 3 Jul 2016 12:37:52 -0400 Subject: [PATCH 2/2] Delete Key Fix Delete and backspace keys now trigger more general change detection that works for both keys. --- src/default.coffee | 1 + src/editableController.coffee | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/default.coffee b/src/default.coffee index 4ebd6cb1..a19d5a50 100644 --- a/src/default.coffee +++ b/src/default.coffee @@ -14,6 +14,7 @@ KEY_CODE = DOWN:40 BACKSPACE: 8 SPACE: 32 + DELETE: 46 # Functions set for handling and rendering the data. # Others developers can override these methods to tweak At.js such as matcher. diff --git a/src/editableController.coffee b/src/editableController.coffee index 6bd4ed07..7f46666f 100644 --- a/src/editableController.coffee +++ b/src/editableController.coffee @@ -38,6 +38,15 @@ class EditableController extends Controller return unless range = @_getRange() return unless range.collapsed + # Check inserts for disparity on Backspace and delete + if e.which in [KEY_CODE.BACKSPACE, KEY_CODE.DELETE] + @$inputor.find('[data-atwho-chosen-value]') + .each () -> + console.log "Wre are compareking \"" + $(this).text() + "\" and \"" + $(this).attr('data-atwho-chosen-value') + "\"" + if $(this).text() != $(this).attr('data-atwho-chosen-value') + $(this).remove() + return + if e.which == KEY_CODE.ENTER ($query = $(range.startContainer).closest '.atwho-query') .contents().unwrap() @@ -74,7 +83,10 @@ class EditableController extends Controller .addClass 'atwho-query' .siblings().removeClass 'atwho-query' - if ($query = $ ".atwho-query", @app.document).length > 0 \ + $query = $ range.startContainer + .closest '.atwho-query' + + if $query.length > 0 \ and $query.is(':empty') and $query.text().length == 0 $query.remove() return @@ -88,10 +100,7 @@ class EditableController extends Controller if $query.length > 0 and query_content = $query.text() chosen = $query.attr('data-atwho-chosen-value') - if e.which = KEY_CODE.BACKSPACE - $query.remove() - return - else if chosen and query_content != chosen + if chosen and query_content != chosen # $query.empty().html(query_content).attr('data-atwho-chosen-value', null) $query.before(query_content).remove() return