I have an angular 2 web application. I am using angular2-grid for it's drag item features. Sadly, angular2-grid is not touch enabled. Hence, I have integrated HammerJs. I am able to handle angular2-grid drag events and HammerJs press events separately.
Now, I need to allow the items in the grid to be draggable on press. For this I need to fire angular2-grid onDragStart event on HammerJS press event and angular2-grid onDragStop event on HammerJS pressup event. How do I achieve this?
Here is what my HTML looks like:
<div class="grid" [ngGrid]="{'max_cols': 3, 'auto_resize': true}">
<sticky-note *ngFor="let item of items"
[stickyNote]="sNotes" class="grid-item" [(ngGridItem)]='item.config'
(onDragStop)="dragged(item)" (press)="pressed($event, item)" (pressup)="pressedup($event, item)" > </sticky-note>
</div>
Can I extract the ngGridItem instance of this item?
Related
I'm trying to catch the click of a v-switch prior to it flipping to see if a preexisting condition has been met. While logging e.target of the event I am getting
<div class="v-input--selection-controls__ripple primary--text"></div>
as the result but every now and then I get
<input aria-checked="true" id="input-24" role="switch" type="checkbox" aria-disabled="false" value="Arizona">
Am I missing something in this or is this unexpected behavior?
Codepen Example
What is happening is that you're clicking on two different elements.
When you click on the ball or around it in the grey area you click on this element:
But when you click outside it but still inside the input you click on this other element:
However, both of then capture you click.
You could change your implementation to capture the change event:
<template v-slot:item.ia="{ item }">
<v-switch
v-model="ia_array"
:key="item.id"
:label="item.state"
:value="item.state"
#change="onChange"
></v-switch>
</template>
I'm having an issue with nested templates in Meteor.
If I have a template like this, with a child template inside it:
In parentTemplate.js
{{#if showParentTemplate}}
{{> parentTemplate}}
{{/if}}
<template name="parentTemplate">
{{> childTemplate}}
</template>
In childTemplate.js:
<template name="childTemplate">
<a class="someItem" href="#"></a>
</template>
When I register a click event on the element(anchor in this example), then show/hide the parent template on the DOM, I end up with an extra event listener on the anchor for each time I show the parent back on the DOM. I checked the Template.parentTemplate.onDestroy() and it is firing. That should mean the template and its events are being destroyed. I would imaging that includes destroying the child template and its events as well.
Here is a simple handler for the click event
Template.childTemplate.events({
'click .someItem' :(e,template)=>{
console.log('got it');
}
})
And to clarify, I am attaching the event listeners in the onCreated method, not the onRendered method.
I'm seeing that each time the parentTemplate is shown, the childTemplate fires the onCreated event, then multiple onRendered events. A new onRendered is added with each hide/show of the parentTemplate.
Is there something basic I'm missing here. It seems almost like there are multiple instances of the template on the DOM or the events are never destroyed. is there a correct way to destroy a Meteor template when it is hidden or removed form the DOM?
We have a 300x250 banner with 3 click events.
First click event will activate a lever.
Second click event is a CTA (i.e. exit event) that takes the user to a URL.
Third click event is the replay icon.
The issue is that every click will take the user to the URL (i.e. exit event).
How can I separate each click event? Is it done within Flash? Or after the Swiffy conversion (i.e. within the HTML/JS)?
Does this have anything to do with bubbling? Or is it that the exit event is somehow being tied to every click?
I thought about having the clicks timed but that screws up the whole experience.
I've tried stopPropigation but it prevents the add from working. Also, I don't want the first click to be stopped. It still needs to work accordingly.
HTML
<div id="bg-exit">
<div id="swiffycontainer" style="width: 300px; height: 250px">
<script type="text/javascript" src="test.js"></script>
</div>
JS
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, { });
stage.start();
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
We have our custom button that is ASP.NET custom server control. We use it on all our pages for action buttons (< NS:OurButton ID='btn' runat="server" Text="Search"/ >).
Now we want to use that button to open our custom search form to filter the records in jqGrid.
Our business requirement that the search button must be a part of jqGrid pager.
How I can do it? I tried to search google and wiki help for jqGrid, but didn't found any way how to add that custom search button to the jqGrid pager.
If it's matters, the button rendered to the client in that markup:
<div id="btn" class="OurCustomButton">
<div class="LeftSide"></div>
<div class="ButtonContent">Search</div>
<div class="RightSide"></div>
</div>
Or maybe it's possible to create totally my own custom pager, with my own design and buttons and then to tell the jqGrid to use it's controls as triggers or to trigger events on my own with correct parameters?
One solution I can think of is to use jQuery's insertBefore()(or insertAfter) and have the html for your button inserted on the document.ready() event.
The code could be:
jQuery(document).ready(function(){
$('<div class="ButtonContent">Search</div>').insertBefore('.RightSide');
});
I have created a jquery mobile application in jquery.mobile-1.1.0.min.js version where there are three select menus on a page each opens in new window using data-native-menu="false" and
$(document).bind('mobileinit',function(){
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
Here is the code I am using to create the Select menu :
<div data-role="fieldcontain" style="white-space: normal;">
#Html.DropDownList("a", (IEnumerable<SelectListItem>)ViewData["b"], "c",new Dictionary<string, object>{{"id", "a"},{"data-shadow","false"},{"data-iconshadow","false"},{"data-native-menu","false"},{"data-theme","a"}})
</div>
This drop down menu responds after two-three taps on it on ipad.
Please suggest possible solution for this.
I had to set the CSS of the element to
style="cursor:pointer"
in order to fully catch the click/tap events on iPad.