Teuta Koraqi Teuta Koraqi - 5 months ago 34
jQuery Question

Issue with at.js plugin

I'm using

at.js
plugin, it works all fine, expect the moment when I use arrow keys up/down when the dropdown is shown. In this moment it focuses second list and the dropdown is hidden.

I know that the problem is that I used
JQuery
to navigate through list, but is there any way to prevent this?

Thanks in advance!



var li = $('li.test');
var liSelected;
$(document).keydown(function(e) {
if (e.which === 40) {
e.preventDefault();
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if (e.which === 38) {
e.preventDefault();
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
// liSelected = li.last().addClass('selected');
}
} else {
// liSelected = li.last().addClass('selected');
}
}
$('li.selected .single-line').focus();
});
$('.single-line').atwho({
at: "@",
data:['Person1', 'Person2', 'Person3', 'Person4']
})

.atwho-view {
position:absolute;
top: 0;
left: 0;
display: none;
margin-top: 18px;
background: white;
color: black;
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
min-width: 120px;
z-index: 11110 !important;
}

.atwho-view .atwho-header {
padding: 5px;
margin: 5px;
cursor: pointer;
border-bottom: solid 1px #eaeff1;
color: #6f8092;
font-size: 11px;
font-weight: bold;
}

.atwho-view .atwho-header .small {
color: #6f8092;
float: right;
padding-top: 2px;
margin-right: -5px;
font-size: 12px;
font-weight: normal;
}

.atwho-view .atwho-header:hover {
cursor: default;
}

.atwho-view .cur {
background: #3366FF;
color: white;
}
.atwho-view .cur small {
color: white;
}
.atwho-view strong {
color: #3366FF;
}
.atwho-view .cur strong {
color: white;
font:bold;
}
.atwho-view ul {
/* width: 100px; */
list-style:none;
padding:0;
margin:auto;
max-height: 200px;
overflow-y: auto;
}
.atwho-view ul li {
display: block;
padding: 5px 10px;
border-bottom: 1px solid #DDD;
cursor: pointer;
/* border-top: 1px solid #C8C8C8; */
}
.atwho-view small {
font-size: smaller;
color: #777;
font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Caret.js/0.3.1/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.0/js/jquery.atwho.min.js"></script>


<div id = 'main'>
<ul>
<li class="test"><div id = 'n1' contenteditable=true class="single-line">Pres @ character</div></li>
<li class="test"> <div id = 'n2' contenteditable=true class="single-line">Test</div></li>
<li class="test"> <div id = 'n3' contenteditable=true class="single-line"> Content 3</div></li>
<li class="test"> <div id = 'n4' contenteditable=true class="single-line"> Content 4</div></li>
</ul>




</div>




Answer

This may help to understant what you code does...
Maybe you tought it was doing something else.
See comments in code.

var li = $('li.test');
var liSelected;
$(document).keydown(function(e) {
    if (e.which === 40) {
        e.preventDefault();
        if (liSelected) {                                   // Undefined on first keydown, Always equals li.eq[0] rest of the time.
            liSelected.removeClass('selected');
            next = liSelected.next();
            if (next.length > 0) {                          // Will NEVER be more than zero since .next selects one element.
            liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected'); // So you define it to your first li here too.
            }
        } else {
        liSelected = li.eq(0).addClass('selected');         // liSelected is defined here on first keydown only.
        }                                                   // li.eq[0] is you first li, the one with id = 'n1'
    } else if (e.which === 38) {
        e.preventDefault();
        if (liSelected) {                                   // Exact same comments as above for this part.
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if (next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
            // liSelected = li.last().addClass('selected');
            }
        } else {
        // liSelected = li.last().addClass('selected');
        }
    }
    $('li.selected .single-line').focus();
});

Like I said in comments, the arrows are already usable with at.js.
As liSelected is undefined the if condition result in false.
Read on .eq() here

2nd EDIT
-------------------

Here is something working.

$(".single-line").on("focus", function(){
    $(".single-line").removeClass("selected");  // Clear all other "selected" class
    $(this).addClass("selected");               // Add "selected" class on focus... And on the editable div instead of on a li
});

$(".single-line").keydown(function(e) {

    console.log(e.which);                       // usefull console.log

    atwho_Query_Opened=$(this).find(".atwho-query");
    atwho_triggers=["@",":"];                   // etc... Add the one you will use.

    if(!$.inArray(atwho_Query_Opened.html(),atwho_triggers)){
        console.log("query openned");
        Switch=false;
    }else{
        console.log("query closed");
        Switch=true;
    }

    if(Switch){                                 // if atwho query is NOT opened

        if (e.which === 40) {                   // Arrow down
            console.log("arrow down");
            $(this).parent().next().children(".single-line").focus();   // Set focus on next li.

        }if (e.which === 38) {                  // Arrow up
            console.log("arrow up");
            $(this).parent().prev().children(".single-line").focus();   // Set previous on next li.
        }
    }
});


// This was your code
$('.single-line').atwho({
    at: "@",
    data:['Person1', 'Person2', 'Person3', 'Person4']
})