I have two columns that I would like to animate separately with a trigger. As I understand it: Skrollr only allows one instantiation on a page. Does anyone know if it's possible to have multiple instances that can be turned off and on?
I've started a working example here:
The grey column will activate the Skrollr instance when clicking on its "Activate!" button. (The "Destroy!" button will remove its instance.)
I would like to isolate the Skrollr animation to just the grey column, but as you can see in this example, the yellow/orange column is also being activated.
Three ways
Remove/add the data attributes between the destroy/init calls and only add them to the elements you want
Use two constants, defined as a function and toggle them between 0 and 1e6 (or something really large). Now the elements with the large one will effectively not be rendered (given you're using edgeStrategy reset)
Monkey patch the refresh method (without touching the skrollr code itself). Skrollr uses it internally when using init. Now you can patch it to use leftColumn.getElementsByTagName('*') or all elements in the right column when no parameter is passed. This way initializing will only affect elements inside one of the columns.
Related
In my app there's a page where I am showing several snackbars depending on results from server.
There can be several triggered by the server's result. They are also triggered from different components, so I don't have a single controller that could render them where I want.
So, they all display at once and overlap each other. I linked the official Vuetify docs page because the problem is clearly visible there. Just click on two of the buttons in short enough succession.
Is there any way I could render them such that they would stack one above the other instead of all bottom-centering over each other?
I was thinking I'd need a way to tell them the component that would be their rendering parent. But I can't seem to find a way to do this. Slots don't seem to be much help with this either since I can't declare global ones.
Is there any way I can do this?
I have a leaflet map (using Vue and vue2-leaflet) with many predefined nodes and connections between them (stored in a neo4j database). When the user clicks on a node (#mouseup, actually), all its connections are shown as a polyline. I want to be able to click on any of these connections on the map (the lines) and do stuff with it, like delete for example (there would be a popup or something with actions, but that's not important here).
The problem I'm having is that the click event doesn't record the connection ID (or anything that would identify which connection was in fact clicked). I could of course create one polyline for each connection, but I suspect the problem would persist, and it's not a really solution in my case, as I don't know how many connections each node has, and v-for doesn't seem to work with polylines (at least I wasn't able to make it work).
This is the nodes markers code:
<l-marker v-for="mapNode in MapStore.mapNodes"
#mouseup="nodeClick($event, mapNode.index)"
:lat-lng="[mapNode.latLng.lat, mapNode.latLng.lng]"
:key="mapNode.index"
</l-marker>
... and this is the polyline code:
<l-polyline
#mouseup="connectionClick($event)"
:lat-lngs="MapStore.selectedConnections.latlngs"
/>
The nodeClick function populates the MapStore.selectedConnections correctly as the polylines are shown as expected.
The problem is that I don't see anything being passed to the connectionClick function that would identify which connection was clicked, so that I could work with it.
Is that even possible?
Ok, so it turns out I was wrong and v-for works (there was something wrong with my code, I think, but I'm not sure what).
My solution is:
<l-polyline v-for="connection in MapStore.selectedConnections.latlngs"
#mouseup="connectionClick($event, connection)"
:lat-lngs="connection" />
This way it iterates through the connections, generates a separate polyline for each and passes to the connectionClick function the latlngs of the clicked connection.
I get all the concept of components but one thing I am stuck at is - when to create a component? In other words, what part of the page should be a component?
Link to sample problem image
Taking above image as example, what I think is progress bar can be one component and form, quotes list, blue alert can be second component.
Please advise as necessary.
There can be many reasons for creating components, such as when you need to create a reusable element, splitting the code to make it easier to understand and reduce code complexity.
In your case 1. you can put both of the sections into a single component or you can put them into separate components if you want to reuse them somewhere. 2. if your code is too much and you want to make it simpler to understand in that case you can also create separate components.
I'm using Dgrid with an Observable JsonRest store. The JsonRest store is queried for 50 rows at a time. Now I have a function where the user can 'quicksearch' the data and the search is processed on the serverside. This works, and in this case the server returns for example "Content-Range: 210-260/1500". It returns 50 rows of data but Dgrid renders the full grid at the beginning, so the user can't scroll 'up' for previous entries.
How can I make Dgrid behave like that?
Not entirely sure if I'm completely grasping your problem, but if I am, it may require some thinking outside the box or compromising to get what you want. I assume your UI is basically jumping to the first match rather than simply filtering the grid to only show matches.
If your UI is such that the grid is always present and the search is basically intended to scroll the grid, you can use grid.scrollTo({ y: valueInPixels }) to scroll the grid. While this accepts a pixel value (not rows), if your rows are consistent height, you can multiply by grid.rowHeight (which is a property set by OnDemandList) to get the correct offset.
Another option, though probably not what you want, would be to use the Pagination extension and navigate to a specific page.
Of course, if you would rather actually filter the grid to only display matching items, that's possible too (assuming your server behaves as dojo/store/JsonRest expects, anyway). The Using Grids and Stores tutorial has an example towards the end.
I'd like to find out the position of a clicked DOMElement in a WebView. In my delegate -[webView:decidePolicyForNavigationAction:request:frame:
decisionListener:] gets called. I can extract the clicked DOM element from the dictionary passed as actionInformation parameter. But I cannot figure out how to retrieve its position.
I tried get the click location through webview.window.currentEvent, but that returned some an WebKit event with a bogus location.
Any ideas how to solve this without dropping down into JavaScript?
The easiest way that should work without actual JavaScript is to use the Objective-C properties of DOMElement, which mirror the underlying JS properties. Unfortunately, there does not seem to be good documentation, but you can read the headers, e. g. WebKit/Headers/DOMElement.h etc.
Here, your best bet would be offsetLeft/Top/Width/Height. You need to add these to the scrollLeft/Top values of the document element. Also, for some elements, especially text or spans across multiple lines, calling the JS function getBoundingClientRect() would return better results. But you can do that from Objective-C as well, using the WebScriptObject API. If you need assistance with that, I can help.