Set focus of codemirror instance based on container - javascript

I have multiple instances of codemirror running on my page. Some are hidden and you can move between them using tabs. What I would like to do is be able to set the focus based on the container.
At some point the instance was initiated like this:
var cmInstance = CodeMirror(target, options());
So I would either like to be able to get the instance that was initiated on that container by using the container, something like:
cm = target.getCodeMirror();
or perhaps set the focus based on the container, something like:
target.setFocus();
Is anything like this possible or should I rather keep a record of individual instances in an array or something?

Okay so I opted to track my instances of codemirror in an array and address them based on an ID that I keep track of and link to the target. Once I have my instance I can just set focus using the codemirror method cmInstance.focus();
Currently I feel this is the best solution.

Related

SAPUI5 SmartVariantManagement isn't working

I am trying to implement a SAPUI5 App and I want to use the SmartVariantManagement.
I've implemented my app based on the following sample:
https://sapui5.hana.ondemand.com/#/entity/sap.ui.comp.smartfilterbar.SmartFilterBar/sample/sap.ui.comp.sample.smartfilterbar.example2/code
I know that I have to set the ID of the SmartVariantManagement for the SmartFilterBar as well as the SmartTable.
The problem is, that my FilterBar and the Table are wrapped inside different Fragement so I cannot refer to that ID.
So I tried to set the ID of the SmartVariant during runtime with the method "setSmartVariant" like this:
var oSmartVariantManagement = this.getView().byId("SmartVariantManagement");
oSmartFilterBar.setSmartVariant(oSmartVariantManagement.getId());
I am doing this in the init event of the filterBar but somehow it is not working and the Smart Variant doens't show any value.
Does anyone know if I have to set the ID in a different event?

Aurelia JS - multi level binding/update?

I'm not sure whether I'm using the right terminology here - but here is an example:
https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55
This is how it looks like in Chromium:
Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.
Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.
The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.
My original question (which is why I started this post/example at all), was:
How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?
... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...
After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?
The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?
And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?
Boy, this was a pain, but here's what I think is the solution:
https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04
Here are some notes:
Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
Once we have a reference to the widget, re-apply it on each second level element, whenever they change
Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed
Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...
Though, would still love to know what is the proper way to do this...

Highlight last inserted document in Meteor

I have form and list of objects at the same page. When I insert a new row, it is not very easy to see where the newly inserted row is placed. Therefore, I thought I could color/highlight the newly inserted row (and perhaps remove the highlight after a few seconds).
How can I do this? I think a way to do this could be using a method on the server which returns the inserted id (return Collection.insert(doc);) and on the client use a callback with
Meteor.call('insertDoc', function(err,result) {
// do something with result
});
I think I can use a reactive-var to save the id of the last inserted row and in the loop highlight the row with
{{#each docs}}
<li class="{{isActive}}">{{name}}</li>
{{/each}}
and have a helper to return active if this._id equals the reactive var with the last inserted id.
But is this the best way to do it? How can I remove the color after some seconds? I have seen such behaviour on many pages but I cannot find any tutorials/code snippets to achieve this.
I wrote a package that uses Meteor's UI hooks to fade items in and out of a list as they are added and removed, to help users maintain context as data changes:
https://github.com/mizzao/meteor-animated-each
There is a demo at http://animated-each.meteor.com/. You can see that as items are added and removed, they are faded in and out. If items are inserted off the screen, the visible area does not scroll.
This isn't doing exactly what you want, but you can use the same idea to highlight items as they appear as well, as opposed to the simple fade in.
Note that all of this happens at the UI rendering level - not the template/code level. The UI hooks are also not well documented right now, but they've been around for a while.
I don't know if your method is the best, but that's how I'd go about doing it.
As for the animation, I'd use a CSS3 animation. Plenty to choose from ( https://developer.mozilla.org/en-US/docs/Web/CSS/animation ), and you can easily make them fade to the standard color. The animation would also only be applied to the last inserted item (because of the way you did it, only the last item would have the "active" class)

Ways to incorporate dynamic update in flash cc

Currently i'm working on a flash game where i want a certain value to appear on the right side when the user types in a value on the left side.
Where the default amount is 0 and when the person types a number, the price(on the right will update accordingly.
Is it possible for this to be achieved?
*The text's fields are all set to dynamic text fields
Picture below,
Yes it is possible, but its a little more effort as i see your using the timeline animation.
Easier way to reference everything is to set up a scope of variables that can be accesses anywhere:
In your situation its best to put your whole content movie inside an Empty movieClip as a container...
Now you will have your whole movie inside the MovieClip--
Your Project Structure:
Container ---- Price.
|
--- Actions.
|
--- BTN.
Put your actions on the container layer as now you can set your variables there and create functions to interact with your buttons.. // referencing from my movieClip. As you will not have any scoping issues if you need to go to and from frames.
Give your text boxes unique names so you can reference them.
You will need to set up Event handlers to respond to your functions ();
Note: Embedd your fonts on export as Dynamic texts boxes may show up empty
Further more for idea:
For simplicity you could use an enterframe function and just check if
textbox.text = "" else--> run your function...
But it will be more appropriate to check weather text box focus or any key press/down to then check the text boxes inputs... depending on the complexity of your application and your understanding on OOP..

Dynamicaly input values into webdatagrid rowadding

I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.

Categories

Resources