Add proper selector for keybinding event in Atom editor - atom-editor

I develop a package, which allows user to use Home button to toggle cursor position in soft-wrapped lines, as it is in Komodo Edit editor.
In my toggle() function I try to get active text editor from Atom Workspace using getActiveTextEditor function and then I do my logic.
atom.workspace.getActiveTextEditor()
I bind a Home key with a selector atom-text-editor.editor, and it mainly works fine until triggered inside Search&Replace pane or Command Palette.
"atom-text-editor.editor": {
"home": "toggle-home:toggle"
}
In this case, getActiveTextEditor returns always a currently edited file's text editor. It leads to a situation, when a cursor is moved inside an edited file's pane, but not inside focused field. When I use a Home inside a text field in Settings pane, Atom throws an exception, as it can't find any active text editor.
I did a research through Atom Docs, Atom API, even community packages, but all I found, was adding 'mini' to my event selector, to narrow event scope a bit.
"atom-text-editor.editor:not([mini])": {
"home": "toggle-home:toggle"
}
Nevertheless it still causes exception or misbehaviour in text fields without 'mini' (ie. textarea of Git/GitHub package).
What I want to achieve is:
1) to find a proper keybinding selector, that would fire only inside currently edited file pane;
OR
2) to find a method to get focused instance (Search&Replace, Command Palette or any other field) for further processing.
Solution
As DamnedScholar mentioned here:
the selector atom-workspace-axis.vertical atom-pane-container atom-text-editor:not([mini]) will do it.
Already tested, works fine.

Related

Get text of clicked button in Google Analytics

I want to be able to know exactly which element from a class has been clicked. I enabled the text option in Tag Manager:
But it's still not visible in the click object. But it wouldn't pick it up, since the tag containing the text is nested in the clickable element. Can I add a custom HTML attribute to be able to identify which element has been clicked?
<div class="card-content"> //<---- clickable element
<i aria-hidden="true" class="card-icon material-icons">business</i>
<h3 class="card-title">Company details</h3> //<--- clicked text
</div>
The best way to figure it out is to use the "Preview & Debug":
Activate it
Go to the page where you want to test (you should see now a new box at the bottom)
Click on the element
Check the variables in the debug box. Especially check the click.element data.
My guess is that since there is no "real" text in the div box, just children tags, no text can be discovered.
There are different options to solve it:
add the text as data-attribute to the div and use the click.element data
use a data-layer push event
if you know JS you can use the click.element data in a JS variable and traverse down to the h3
If you are going to keep your code as it is, you could create a custom variable, using Custom JavaScript.
In order to do so you need to first create the custom variable, choosing the Custom JavaScript type:
This code should do the job (I tested id)
function() {
return {{Click Element}}.closest('.card-content').getElementsByClassName('card-title')[0].innerText;
}
The custom variable will return the text inside .card-title.
To test the custom variable, you may create a dumb HTML tag with a console.log script, replacing Inside TXT with the name you gave to your custom variable:
<script>console.log( {{Inside TXT}} )</script>
The trigger should be a Click All Elements.
When previewing this tag, the captured text should appear in your console, as well as in the debugger panel.
Reading again your question, I wonder if you are going to have several .card-title items inside the .card-content. In that case, this custom variable will not work. Let me know what is the case.
Also, the code could be simpler, but I am not really sure on how is it really going to work in your site, so this one seems more reliable, since it works clicking anywhere in the element.
EDIT:
In order to test it, after you click an element, a new "Click" will appear in the left pane (Summary). There, in the Variables tab, you will see the variables captured by the click. The data will be stored under the variable name you gave to the variable.

How can I change the font of the Time4J CalendarPicker in JavaFX?

Is there a way to change the font of Time4J CalenderPicker in css-style?
I needed a Persian DatePicker in my program so i used Time4J CalenderPicker.
using this code i could change only the font of cells:
CalendarPicker<PersianCalendar> MyDatePicker = CalendarPicker.persianWithSystemDefaults();
MyDatePicker.setCellCustomizer(
(cell, column, row, model, date) -> {
cell.setStyle("-fx-font-family: MyFont;");
}
);
I tried this code but nothing changed:
MyDatePicker.setStyle("-fx-font-family: MyFont;");
But i want to change the font of hole CalendarPicker.
In order to apply the changes, you need to use the following code and set new css styles for calender picker and applying the customizations.
private CalendarPicker<PersianCalendar> MyDatePicker = CalendarPicker.persianWithSystemDefaults();
MyDatePicker.getStylesheets().add("/MyCSS-Style.css");
The following gif, demonstrates my customizations.
The calendar picker itself is only the combination of a text editor and a popup button (bundled in a HBox). However, the calendar view is another component which pops up if users press the button. And this component whose font you wish to change is not yet publicly accessible (with the exception of the cells via a special customizer).
I agree that this should be more flexible. Therefore I have opened a new issue to track this request for enhancement.
Feel free to fork Time4J and do your experiments and submit a pull request on time4j-github. Actually I am busy with other things but can look deeper then.

Next and previous control button in winAPI to go to next page (c++)

I am creating an winAPI application in c++ I have a photo in preview pane and I want to create two buttons NEXT and PREVIOUS on clicking them I will go to the next page .
Could you please give me the idea how to do that in c++ ??
Do I need to use QT libraray or it can be done using the in built function of WinAPI like -
HWND hwndButton1 = CreateWindow(L"BUTTON",L"NEXT",WS_TABSTOP | WS_VISIBLE | WS_CHILD | BS_DEFPUSHBUTTON,550,800,100,30,m_hwndPreview,(HMENU)buttonid1,(HINSTANCE)GetWindowLong(m_hwndPreview, -6),NULL);
HWND hwndButton2 = CreateWindow(L"BUTTON",L"PREVIOUS",WS_TABSTOP | WS_VISIBLE | WS_CHILD | BS_DEFPUSHBUTTON,650,800,100,30,m_hwndPreview,(HMENU)buttonid2,(HINSTANCE)GetWindowLong(m_hwndPreview, -6),NULL);
and then using WM_COMMAND for both the button clicks.
Am I going right?
I just want my API application work like a .pdf extension file...as in PDF files we have up and down arrow and on clicking upon them we can go to the next page..In winAPIc++ I couldn't find any such arrow function.. please tell me if there is any such arrow up/down function present to go to next page (because I am very less interested in creating NEXT and PREVIOUS button using createwindow function.. It looks odd).
You have not mentioned what tools you are using, so we don't know if you have a resouce editor. You should research that in a forum appropriate for the tools. If you think writing one line of code to create a button is "very complicated" then you need a better tool.
If you do not want the buttons to appear on top of the picture then you need another place to put them. One common possibility is a toolbar. It is a strip for buttons along the top or bottom of the main window:
http://msdn.microsoft.com/en-us/library/windows/desktop/bb760435(v=vs.85).aspx
With a resource editor you can draw an arrow on the button. Without a resource editor you can set the button text to a unicode arrow:
SetWindowText(hwndButton1, L"\x25bc"); // down arrow, use 25b2 for up arrow
Most buttons (and other controls) are created using a resource editor, placing the controls on a dialog template or a toolbar resource. If you do that Windows will create the buttons when you create the dialog or toolbar. This method is much preferred because Windows will adjust the size of the buttons as required for the screen settings in use.
If you can't do that you must use CreateWindow as you are doing.
Finally it is done.. I have created the buttons neither using Qt or nor using any createWindowEx..The best and easy approach to follow is resource editor ...just put some button on dialog and use IDD_MAINDIALOG (in my case)
m_hwndPreview = CreateDialogParam( g_hInst,MAKEINTRESOURCE(IDD_MAINDIALOG), m_hwndParent,(DLGPROC)DialogProc, (LPARAM)this);
and then
BOOL CALLBACK AMEPreviewHandler::DialogProc(HWND m_hwndPreview, UINT Umsg, WPARAM wParam, LPARAM lParam)
{
switch(Umsg) // handle these messages
{ .........
}
....
}
and thats done. Very easy task.

JQuery load() function disables links and :hover effects?

I'm trying to load content from a different file into a div element within the current file using the jQuery load() function. Nothing fancy, just loading it and that's it. However the links that are contained in the loaded file become "disabled", you cannot click them, and pseudo-classes like :hover seem to be left out as well. Is there a solution to this?
$(document).ready(function() {
$("div.content").load("content.html");
});
let's say content.html contains just this line:
xxx
When it is loaded into the <div class="content"> the link is not clickable. It is colored according to the css, however the :hover effect doesn't work, and it behaves like normal text - not a link. This is a problem because the content I'm trying to load has a couple of links, and none of them work after being load()'ed.
I believe your issue is:
You use $('div.content').load('content.html') to send a request for content to (later) be inserted into the DOM.
You then run some code to specify handlers for nodes using $(document).click, $(document).bind etc - but this code runs before the new nodes have been added to the DOM.
New nodes are then added when the .load call completes.
The behaviour that you defined on all the origional nodes isn't being followed on the new nodes.
If that is the issue your're describing - then you need to add all the same bindings to the new nodes once they're created.
i.e. you need to provide a callback to add the bindings to the new elements:
function on_data_loaded() {
$('div.content ...').hover(.....);
// etc.
}
$('div.content').load('content.html', null, onloaded);
(note that's not a particularly clean way of doing it, but it should explain what needs to be done).

GWT: FileUpload Browse Button styling

I need to style the browse button of file upload in GWT.... I found the way through this link http://www.dreamincode.net/forums/topic/15621-styling-a-file-browse-button/. But I am not able to use the same in GWT. Any idea how to go about it?.
I am using GWT 2.4.0
I tried the following approach and it worked for me.
I hid the file upload field and used a trigger box on the screen instead. Trigger box click is delegated back to file upload browse button click using JSNI approach
private static native void fileClick (Element el) /*-{
el.click();
}*-/;
And used the fileupload.getfilename() and set the trigger text box with file location details.

Resources