I am trying to set up mouse events for an element stamped out by dom-repeat. The event should trigger a style change for a different element in the dom-repeat template, basically just a color change for an icon in a box on a box hover.
As automatic node finding is not available for dynamic nodes, the docs say I should use the $$ selector.
However, $$ only returns the first node in the local DOM that matches selector, and I want the hover effect for all boxes stamped out by the dom-repeat.
As $$ selects an element's property, that leaves me thinking I would need to set up a dynamic attribute for the icon from the dom-repeat, so that I can select every repeated icon instance in the mouse event change functions.
The repeater gives me the index, but how would I set a dynamic property with it, instead of a dynamic value?
What am I missing?
This should do what you want:
var nodes = Polymer.dom(this.root).querySelectorAll(...)
If you modify the DOM you might need to use the Polymer.dom(...) API for the individual nodes you are modifying.
Polymer.dom(nodes[i])...
Related
I have a custom filter component I'm giving Ag grid for each column. The component contains a dropdown. When user selects an option from dropdown, the filter closes immediately on selection rather than staying open like it should.
How can I keep the filter component to stay open on selection of option from dropdown?
Reading the docs more, I found the answer here:
https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element
Custom Filters Containing a Popup Element
Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.
There are two ways you can get fix this problem:
Add a mouse click listener to your floating element and set it to
preventDefault(). This way, the click event will not bubble up to the
grid. This is the best solution, but you can only do this if you are
writing the component yourself.
Add the ag-custom-component-popup CSS
class to your floating element. An example of this usage can be found
here: Custom Date Component
The webpage I'm testing has a collection of 35 checkboxes.
The input tag is styled in such a way that it is positioned outside the visible part of the page (-9999px). When I want to click on it an ElementNotVisibleException appears. I can click on the label of the checkbox instead so this is not a problem but how to get the information if a checkbox is selected or not. The only way I can imagine is by analysing the page source. Is there another more convenient possibility to get this information?
Things you could try:
you should already have a method like isChecked() to test this, find that method
find the element and check his attribute for when is checked (example checked="checked")
write another selector for that element and check that this selector exists(not visible), example with css: input#elementID[checked=checked] or by value, depending if is a checkbox or radio box
For invisible element you can get his attributes, you just are not able to interact with him and it will fail to check that is visible/displayed.
Use a method to find the element, this will return an object, and see what autocomplete offers, what methods you have available and you can use, you should have getAttribute, isChecked etc.
I'm using react-rte but am willing to extend it so let's talk about Draft-js.
I need to be able to "inline-style" a selection. Then on subsequent renders re-access that selection's dom.
So let's say I highlight a selection. Then I persist the document. Then I come back, reload the document, I need to be able get access to that highlighted section, but in the dom.
Basically on the side of the document I'm applying markers, outside of draft-js, and those markers need to line up with the highlighted part. So when I do the initial highlighting I can get the dom position from window.getSelection(), and i can place my marker. But the dom may change later and I won't be able to place my marker.
--edit--
So another use case is that I highlight a selection, and even in the same session, I need to change the color of the selection programatically so again I need to access the section of the document even if the cursor is not on that section.
--end edit--
So what I really need is something like an unique classname, id or even better a react ref for the new spans that are created when you do an inline style.
Please let me know if you need a better explanation.
The SelectionState records the selection, including start block, start offset, end block and end offset. It's not problem to save the selection in you code and apply to the editor later.
So what I really need is something like an unique classname, id or even better a react ref for the new spans that are created when you do an inline style.
So the id you want is a SelectionState, tell where the span is in draft-js editor.
UPDATE
You can find the block key which your inline styled text belongs to, in data-offset-key={blockkey}-xx-xx node attribute. The block key helps you find the node from SelectionState.getStartKey()/getEndKey(). Then find the span node by SelectionState.getStartOffset()/getEndOffset().
We are using slickgrid in our angular directive.
And we would like to use another list directive (simple select element with input) in a cell/column of Slickgrid.
I want the list element to be visible when the grid is available, so user knows there is a list. Therefor I am using the list directive as formatter. It Is visible when the grid is rendered.
The Problem:
When the cell that holds list element is clicked, the editor mode is never fired because of the list element click event.
We thought to use an image of list that user knows there is a list, and when clicked open the list.
Is there a better way to do it?
We have managed to get it done using list directive as our rendere/formatter as well as editor.
We made our list directive as ReadOnly so it does not fire click event. And now one sees a list element when grid is rendered. And when one clicks on the cell with list, the list is automatically opened via code. The only problem we have now with this solution is that how to copy selected Item from editor to formatter (if anyone knows, please share).
Any better solution is also welcomed.
I can add element to tree in extjs and I want to see it just after adding. How can I focus on than element (expand everything before it and put selection on it)?
You can use the method selectPath on your TreePanel as detailed here:
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.tree.Panel-method-selectPath
This method will open every nodes needed to access your element and select this element. The way you express the path is as follow:
Ext.getCmp('treePanel').selectPath('/Root/Leaf/Element', 'text')
Here, the text property of my TreeModel has been used (The second parameter), but you can change that for anything, like the id.
Ext.getCmp('treePanel').selectPath('/1/16/42', 'id')
To build this path, the better way is to use the method getPath on the particular item you want to select:
item.getPath('text')