Reorder parameters in WebStorm - javascript

In ReSharper I used to have a Ctrl+Alt+Shift+Left arrow bound to reordering values. It would take whatever paramater/value/argument I had selected and move it one to the right. For example:
first, second third
would become
first, third, second
I've since switched to WebStorm and don't have my old ReSharper settings and can't find any such similar bind. Is this possible in WebStorm? Is there any macro functionality in WebStorm so that I could implement it myself?
It's worth noting that there is a Move Element Left, however this doesn't appear to do anything in JS files.
Edit
There is macro functionality, however the only way to implement it would be to:
select the current word -> cut -> delete the proceeding comma -> move the cursor one word left -> paste -> add comma
This results in a lot of undo's if I decided I don't want that.

Currently the only way to reorder parameters is Refactor | Change signature. If you miss the other way to change parameters order, please file a feature request to youtrack. See also https://youtrack.jetbrains.com/issue/WEB-2175

Related

How can I add multiple variables to 'Blobs in a Jar' animation?

I am trying to modify the classic "Blobs in a Jar" code to include more than one character variable. I want several different "blobs" to appear at the same time; currently the standard version has only the one "blob". But, every time I try to add more than one variable, only the first or last one will be read, and the rest will be ignored.
Here is the entire original code for reference. The line that I am referencing is at the start of the code, var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect
I have tried the following lists:
var charc='hello', 'hi', 'bonjour', 'hola', 'aloha';
I have also tried removing the commas, which stopped any variables from being read.
var charc='hello'
charc=,'hi'
charc=,'bonjour'
charc=,'hola'
charc=,'aloha';
This has also been tried with repeating lines of 'var charc' individually, instead of them being nested like this.
As far as I understand, this single line should be the only part of the code I need to edit, but I am afraid there's something else I'm missing here. Do I need to have additional instructions for multiple variables to be read at once? My very very very last resort will be using the entire script for every instance of blob that I want to have and hoping that's acceptable web-coding practice.
EDIT: I did try doing this, with some interesting results. The last instance is read and duplicated for every other instance, but the others are frozen in their first frame of animation while the last instance moves. Pretty cool, but it would be way cooler if I could get the other words to show up as well.
I've looked through as many Javascript help articles as I can stand, but they only go so far when I have no previous experience with Javascript. Sorry if the answer is kinda obvious ^^"
Defining more variables with the same name won't do anything, as only the most recently defined one will be accessible.
The code on the page doesn't support multiple words, and such a feature would need to be implemented.

How can I limit an overlay to a specific range?

I want to add an overlay to my editor that will only apply in a given range (e.g. from line 3, column 44 to line 8, column 5).
The problem is that I couldn't come up with any way to find what the current line is in my token() method, since overlays are stateless, so I can't store the current line in the state.
I pored over the extensions in multiplex.js and overlay.js, and tried to grok how nested modes work, but I could not figure out a way to use any of these tools to help me here. Keep in mind I still want this to behave like an overlay, so without disturbing the base mode.
My alternative is to scan elements for the added class and manually modify them, using element.getBoundingClientRect() and cm.coorsChar() to check their position. But this is ugly, needs manual refreshing, and causes bugs when marked elements span across my range boundaries. Any idea on how to solve this properly?
You can't bound an overlay like that. But you also don't have to manually mess with the dom. The markText method provides a more convenient way to style specific pieces of your document.

JQuery and ACE-Editor not playing well together

I am building some modules to teach intro coding concepts to some of my students
http://jsbin.com/pacaxoza/3/edit
When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).
In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.
The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.
Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?
Thanks
Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example

Grabbing the sentence that a selected word appears in

Using Javascript, I need to allow a user to double click a word on a page and retrieve the sentence that it appears in. Not just any sentence, but that specific one. I've toyed with retrieving all sentences that that word appears in and somehow choosing the correct sentence, so maybe that's an option.
I've scoured the web looking for this beast, and I've thought a lot about it. Some have recommended using Rangy but I haven't been able to find the functionality I'm looking for, or even functionality that would help me get where I need to be.
Any ideas?
You could turn your page into one or multiple read-only textareas, use clever CSS styling to mask it, then use the onselect event as described here: Detect selected text in a text area with javascript
Depends of course, how your page looks like and where it's used.

What kind of algorithm does an HTML SELECT element uses to show results as you type?

I'm trying to replicate an HTML SELECT element (drop-down-list or combobox) in Flash (AS3).
In most browsers, when you have one in focus and you type something, the combobox will try to find the value within its options and show the closest one. I was wondering what kind of algorithm is used for that.
I don't think its Levenshtein or similar since it only works with the beginning of the string.
I'm thinking that it works by keeping a buffer of what has been written, and tries to find a string starting with that... if it doesn't find anything, it clears the buffer, and searches a string beginning with the last character pressed.
I already prototyped this, and it works quite ok, with one caveat... In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character. I think I could fix this, but was wondering if someone has already done it, to compare the algorithms... its turning into quite a complex code to test and debug, and I'm not sure I'm covering all the possibilities...
The reaction of form widgets to keyboard interaction is not standardised and different browsers don't agree. This is always an issue when creating ersatz form controls from script.
In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character.
This feature comes from Windows and is quite unintuitive. The exact rule isn't that exactly, is quite obscure, and gives different results in IE and Opera versus the other browsers.
IMO this behaviour is highly undesirable. Since no average user is going to be able to predict how the rule works, I personally would leave it out and simply select the first option to match the typed leftstring. This is easier for you to code and easier for the user to understand.
Just did some tests on firefox, and I noticed (this is not official information, just pure speculation):
Key pressed event:
Esc (firefox only): clear buffer
Arrow up/down: move up/down on the list, clear buffer
Page up/down: move up/down by 20 on the list, clear buffer
Home: move to the top of the list, clear buffer
End: move to the end of the list, clear buffer
Other:
Empty buffer?
Yes: add key to buffer
buffer.length == 1 AND key is same as last key pressed?
Yes: go on next item starting with key.
No: add key to buffer and search next item starting with buffer.
1.5 seconds passed event: clear buffer
This will need a timer of course.
I don't know what algorithm is used in the browsers but one that comes to mind that would do what you want is sequence alignment or a longest common subsequence algorithm. It would allow you to match any part of the string to any other part of the string (with possible gaps between the matched sub strings). It's not massively quick though.
http://en.wikipedia.org/wiki/Sequence_alignment
there's also some very good lecture videos online at MIT open course ware
http://ocw.mit.edu/OcwWeb/Electrical-Engineering-and-Computer-Science/6-046JFall-2005/VideoLectures/detail/embed15.htm
In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character. I think I could fix this, but was wondering if someone has already done it, to compare the algorithms
You might want to reset to the top of the dropdown after every key press and then search for the appended buffer.

Categories

Resources