ontouchenter and ontouchleave in Blazor component not firing - asp.net

The Microsoft documentation mentions the #ontouchenter and #ontouchleave events.
I would like to utilize these to enable drag and drop in my Blazor app, but it doesn't seem like these events are firing. There is not a lot of examples of other mentions on the web.
Does anyone know whether they are supposed to work? Do I need to do any special to make them work?
UPDATE
I think it is because the element position is not changed, as the normal draggable ensures via mouse drag.
Is it possible to change/update the elements position (x,y) via c# in Blazor?
Example
The following is a minimal example
Index.razor
#page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<div style="height: 300px;width: 300px;background-color: cornflowerblue;touch-action: none; border: medium;"
ondragover="event.preventDefault();"
#ontouchenter="OnTouch"
#ontouchleave="OnTouch"
#ondragenter="OnDrag"
#ondragleave="OnDrag"
#ondrop="OnDrop">
Drag to Me
</div>
<DragItem></DragItem>
<DragItem></DragItem>
<DragItem></DragItem>
<DragItem></DragItem>
#code{
private void OnTouch(TouchEventArgs args)
{
Console.WriteLine("Index:OnTouch:" + args.Type);
}
void OnDrag(DragEventArgs args)
{
Console.WriteLine("Index:OnDrag:" + args.Type);
}
void OnDrop(DragEventArgs args)
{
Console.WriteLine("Index:OnDrop:" + args.Type);
}
}
DragItem.razor
<div
draggable="true"
#ontouchmove="OnTouchMove"
style=" cursor: move;
background-color: cornflowerblue;
touch-action: none;
user-select: none;
border: medium;
min-height: 100px;
min-width: 100px">
DragMe
</div>
#code {
private void OnTouch(TouchEventArgs args)
{
Console.WriteLine("OnTouch:" + args.Type);
}
private void OnTouchMove(TouchEventArgs args)
{
//double x = args.ChangedTouches[0].ClientX;
//double y = args.ChangedTouches[0].ClientY;
//--> I guess this is where I should update my dragitem position
//--> Normal drag via mouse automatically updates position, but not touchMove
}
void OnDrag(DragEventArgs args)
{
Console.WriteLine("OnDrag:" + args.Type);
}
void OnDrop(DragEventArgs args)
{
Console.WriteLine("OnDrop:" + args.Type);
}
void StoryClicked()
{
Console.WriteLine("StoryClicked");
}
}

Related

blazor dynamically change css on mouseover when multible divs are displayed

#foreach (var item in RootOfJson.results)
{
<div class="card" #onmouseout="#OnMouseOut" #onmouseover="#OnMouseOver">
<img class="#Imgdisplay" src=#item.image_url alt="...">
</div>
}
#code {
bool _IsHovering = false;
[Parameter]
public string Imgdisplay { get; set; }
protected void OnMouseOver(MouseEventArgs mouseEvent)
{
if (!_IsHovering)
{
_IsHovering = true;
Imgdisplay = "d-none";
StateHasChanged();
}
}
protected void OnMouseOut(MouseEventArgs mouseEvent)
{
Imgdisplay = String.Empty;
_IsHovering = false;
StateHasChanged();
}
Above code changes the css for all divs, can you assist.. i would like to change the class to d-none on the specific div that my mouse event occurs.

Can't select a bound attribute in Angular

I have a custom progress bar in angular. I'd like to bind to have a selector for the [value]. However if I bind the attribute in Angular it is no longer possible to select.
<progress-bar value="50"> works
<progress-bar [value]="value"> fails
The attribute doesn't exist in the second case it's just there as one of the ng-reflect-* attributes. Is this expected behavior?
component:
ProgressBar {
private currentValue;
#Input() set value(value: number) { this.currentValue = value; }
get value() { return this.currentValue; }
...
}
scss:
progress-bar {
display: block;
height: 4px;
width: 100%;
// determinate
&[value] {
background: map_get($color-palette, progress-bar-background);
.progress {
height: 100%;
background: map_get($color-palette, progress-bar-color);
animation: none;
transform-origin: top left;
transition: transform 250ms ease;
}
}
// indeterminate
&:not([value]) {
background: transparent;
}
}
Instead of property binding, you can use attribute binding:
<progress-bar [attr.value]="value">
export class ProgressBar {
constructor(private elementRef: ElementRef<HTMLElement>) {}
get value() {
const element = this.elementRef.nativeElement;
return element.getAttribute("value");
}
}
See this stackblitz for a demo.
A simpler solution is to set a class conditionally on the component with HostBinding:
export class ProgressBar {
private currentValue;
#Input()
get value() { return this.currentValue; }
set value(value: number) { this.currentValue = value; }
#HostBinding("class.has-value") get hasValue(): boolean {
return !!this.currentValue;
}
}
and to apply the styling according to the class selector:
progress-bar {
...
&.has-value {
...
}
&:not(.has-value) {
...
}
}
See this stackblitz for a demo.
You are trying to use a one way property binding between a object and method. Remove your getter and setter methods. They are kinda of useless since javascript doesn't have real private properties or methods.
ProgressBar {
#Input() public value: number
...
}

keydown trigger css background color change

What is the easiest way to trigger a background-color change through a keydown event? At the moment I have it where when you press a key it makes a sound but I want to have it change the background color to something every time I push a key.
Here is my JS:-
function play(id){
var audio = document.getElementById(id);
audio.play();
}
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}
const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
Thank You!
HTML:
<div id="box"></div>
CSS:
#box {
height: 200px;
width: 200px;
background-color:red;
}
JS:
document.addEventListener("keydown", changeBg);
function changeBg() {
document.getElementById("box").style.backgroundColor = "green";
}

UserControl inherit from another class to extend it

I have a third party control ClientPeoplePicker. The problem is that this control cannot be disabled. To disable it, I put the control inside a div with position:relative ("1") and add another with position:absolute and high z-index ("2"). So the aspx structure is:
<div id="1">
<div id=2/>
<clientpeoplepicker/>
</div>
Now, I want to create a user control which will render all of the above and also inherit from ClientPeoplePicker, so I can use inheritance and not have to map properties of ClientPeoplePicker created inside onto the control wrapper. How can I achive this (the best way)? If I merely create an instance inside the user control, to create it in CreateChildControls, I will lose inheritance. Or should I override rendering?
OK, so i went with overriding RenderControl
EDIT:
whole code:
private bool _enabled = true;
public new bool Enabled
{
get
{
return _enabled;
}
set
{
_enabled = value;
}
}
Panel divWrapper;
Panel divBlocker;
public override void RenderControl(HtmlTextWriter writer)
{
divWrapper = new Panel();
divWrapper.ID = base.ClientID + "_divWrapper";
divWrapper.CssClass = this.CssWraper;
divBlocker = new Panel();
divBlocker.ID = base.ClientID + "_divBlocker";
divBlocker.CssClass = this.CssBlocker;
if(this.Enabled)
{
divBlocker.Style.Add("display", "none");
}
divWrapper.RenderBeginTag(writer);
divBlocker.RenderControl(writer);
base.RenderControl(writer);
divWrapper.RenderEndTag(writer);
}
CSS
.cpp_blockdiv
{
z-index: 1000;
margin: 0px;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.1;
position: absolute;
}
.cpp_container
{
position:relative;
}

How to change the Css class for a button when the button is clicked

i have a css class for a button in my .aspx page,i want to change cssclass for the button when it is clicked
i used the below code
`.btnmbl1
{
font-weight: bold;
font-size: 15px;
color: Black;
font-family: Calibri;
width: 100px;
height: 70px;
border-style: none;
background-image: url(../images/Button_Mobile_R2.gif);
}
.btnmbl1:focus, .btnmbl1:hover
{
background-image: url(../images/Button_Mobile_R2_1.gif);
}`
Plz help me
If you want to use javascript on the client side (e.g. if there's no postback):
jQuery:
$("#buttonid").on("click", function() {
$(this).removeClass("btnmbl1").addClass("newClass");
}
On the server side, you can change the class in the click handler:
protected void button_click (object o, EventArgs e){
//do stuff
button.CssClass = "NewClass";
}

Resources