click to replace value, shift + click to append value using jquery - keyboard

I have a list with items.
When I click any of these items, I copy its id-value into a form text-field.
Everytime I click, it replaces the value, which is correct by default. But what I would like to add, is a way for the user to hold down a key on their keyboard, and when they then click, they just .append whatever they just clicked into the same form field.
Here's my jQuery-code I'm using for the first/default scenario:
$(function(){
$('ul#filter-results li').click(function(){
var from = $(this).attr('id'); // get the list ID and
$('input#search').val(from+' ').keyup(); // insert into text-field then trigger the search and
$('input#search').focus(); // make sure the field is focused so the user can start typing immediately
});
});
Is there a way to implement some sort of keyboard key-listener?
Something like:
if (e.shiftKey){
.append('this text instead')
}
haven't tried out to see if shiftKey is even any valid name here

shiftKey is of one of the properties of the event object and is valid to be used. try this:
$(document).on('keyup click', function(e){
if (e.shiftKey) {
$('input#search').focus()
$('input#search').val(e.target.id)
}
})
DEMO

$('ul#filter-results').on('click', 'li', function(e) {
if(e.shiftKey) {
do something;
} else {
do something else;
}
});

There is a jQuery plugin for extended click.
You could try that or see how they have done it and implement it yourself.
ExtendedClick plugin
Hope this helps.

This is what I ended up with:
I switched over to altKey because shiftKey marked a lot of text when I clicked.
Didn't do anything besides it doesn't look good...
$(function(){
$('ul#filter-results li').click(function(e){
var text = $(this).attr('id'); // get the ID
var input = $('#search'); // form field to insert text into
if (e.altKey){ input.val(input.val()+', '+text+' ').keyup(); } // fetch whatever is already there, and add some more
else { input.val(text+' ').keyup(); } // just replace whatever is already there
$('#search').focus();
});
});
Thanks for good suggestions...

Related

Cypress: How to know if element is visible or not in using If condition?

I want to know if an element is visible or not. I am not sure how to do that.
I know that we can run this:
cy.get('selector').should('be.visible')
But if element is invisible then test is failed. So I just want a boolean value if element is not visible so I can decide through if condition.
Use case:
I want to open a side menu by clicking on the button only if sidebar is invisible.
if(sidebarIsInvisible){
cy.get('#sideMenuToggleButton').click();
}
Is this possible?
I really appreciate for any contribution.
Thanks in advance
Cypress allows jQuery to work with DOM elements so this will work for you:
cy.get("selector_for_your_button").then($button => {
if ($button.is(':visible')){
//you get here only if button is visible
}
})
UPDATE: You need to differentiate between button existing and button being visible. The code below differentiates between 3 various scenarios (exists & visible, exists & not visible, not exists). If you want to pass the test if the button doesn't exist, you can just do assert.isOk('everything','everything is OK')
cy.get("body").then($body => {
if ($body.find("selector_for_your_button").length > 0) {
//evaluates as true if button exists at all
cy.get("selector_for_your_button']").then($header => {
if ($header.is(':visible')){
//you get here only if button EXISTS and is VISIBLE
} else {
//you get here only if button EXISTS but is INVISIBLE
}
});
} else {
//you get here if the button DOESN'T EXIST
assert.isOk('everything','everything is OK');
}
});
You can also use my plugin cypress-if to write conditional command chains
cy.get('...').if('visible').click()
Read https://glebbahmutov.com/blog/cypress-if/
try this code:
isElementVisible(xpathLocater) {
this.xpath(xpathLocater).should('be.visible');
};
isElementNotVisible(xpathLocater) {
this.xpath(xpathLocater).should('not.exist');
};
then use these two methods with if statement like shown below:
if(isElementNotVisible) {
}
or
if(isElementVisible) {
}

How to display standby dialog in XPages view when expanding a section

In my XPages application I am using the xe:dynamicViewPanel control and would like to add a standby/wait dialog/popup when a section is being expanded by the user (click on the expand-icon to open the section).
Sometimes the view index is not up-to-date and opening a category holding a lot of documents will last a while, in the meantime I want to display some "loading dialog" (which I already have, so, no need to explain how to do this).
My problem is, that I can not find any event or entry point where to start from.
Thank you all !
Alex
You can try code from this link:
https://openntf.org/XSnippets.nsf/snippet.xsp?id=standby-dialog-custom-control
If you want to show stanby dialog on the current section, replace the 79 line
var forms=dojo.body()
with some other container. For example, a partial refresh element
var forms = dojo.byId(refreshId)
In this case you need to replace lines 75 and 140 to pass the id parameter
function StandbyDialog_Started(refreshId) {
try{
if(StandbyDialog_Do==true){
if(this.StandbyDialog_Obj==null) {
var forms= (refreshId)?dojo.byId(refreshId):dojo.body();
this.StandbyDialog_Obj = new dojox.widget.Standby({
target: forms,
zIndex: 10000
});
document.body.appendChild(this.StandbyDialog_Obj.domNode);
this.StandbyDialog_Obj.startup();
}
StandbyDialog_StoreField()
setTimeout("if(StandbyDialog_Do==true){StandbyDialog_StoreField()}",50);
setTimeout("if(StandbyDialog_Do==true){this.StandbyDialog_Obj.show()}",200);
}
}catch(e){
console.log("StandbyDialog_Started:"+e.toString())
}
}
and
dojo.subscribe( 'partialrefresh-start', null, function( method, form, refreshId ){
StandbyDialog_Do=true
StandbyDialog_Started(refreshId)
});
I didn't test it, but I hope it can help you to go further.

Material Angular md-autocomplete clear and blur after selection (multi select)

I am trying to use md-autocomplete in Angular Material as a multi selector. The idea is, that the selected element from the autocomplete will be added to an object array after selection and then the selection will be removed from the md-autocomplete. I was able to clear the md-autocomplete, but the focus stays on the md-autocomplete input and so the autocomplete suggestions are still visible.
Example:
http://cdpn.io/QjQGVQ
Code:
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
if(item)
{
//check if item is already selected
if($filter('filter')(vm.contactsSelected, function (d) {return d.id === item.id;})[0])
{
$log.info('Item already selected. Will not add it again.');
}
else
{
//add id to object
vm.contactsSelected.push(item);
}
// clear search field
vm.searchText = '';
vm.selectedItem = undefined;
//somehow blur the autocomplete focus
//$mdAutocompleteCtrl.blur();
}
}
PS: I am aware I could use the contact chips of Angular Material instead, but I was still wondering how the blur could be achieved.
If you set md-no-cache="true" property inside your the list will dissapear, but input field will not be cleared. I think is better solution than clearing input field but leaving the list visible, but is up to you.

How to Inject strings into tinyMCE from a Chrome Extension?

My background_script.js sends a message such as this:
function genericOnClick(info, tab) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, {message: 'insert_string'}, function(){} );
});
};
The receiver.js catches this as:
function insert_string() {
var field = document.activeElement;
if(field.tagName == "IFRAME") {
field = field.contentDocument.activeElement;
}
field.value += 'This is my string';
}
Now, the extension works perfectly well on regular editable fields and textareas (it even works properly in tinyMCE on the textarea-tab!) but in the case of Visual-tab of tinyMCE I can't get this to work. I have noticed that the Visual-tab, as it's a WYSIWYG editor, is special and the only way I so far have figured out on how to solve this issue would be to mimic tinyMCE's behaviour for updating the Visual-tab. However, I would like to know if there's something simple and obvious I've missed. If not, how would I go about editing the Visual-tab contents?
All you need to issue to fill the editor is
tinymce.get('your_editor_id').setContent('This is my string');

CKEditor 3 Dialog Positioning

I have checked and tried the method posted here to set where CKEditor dialogs pop up:
Programatically set the position of CKEditor's dialogs
This seems to either be deprecated or incomplete. When attempting this for the 'link' dialog, the dialog box does not format correctly, as if this onShow definition replaces the default action rather than adding to it. Any suggestions to alter this code or a new method to position the link dialog closer to the menu bar?
CKEDITOR.on('dialogDefinition', function(e) {
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(200, 100);
}
})
You're right. Your code is overwriting the basic onShow definition.
What you have to do is simply to save a default (generic) onShow, then overwrite it so it calls the saved one and eventually executes your code:
CKEDITOR.on( 'dialogDefinition', function( event ) {
var dialogDefinition = event.data.definition,
genericOnShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
genericOnShow.apply( this );
this.move( 10, 10 );
// ...or anything you want ;)
}
});
VoilĂ !
PS. Remember to always pass the context with apply or call.

Resources