Develop Reference

How to enable Keyboard navigation between full-screen images in ant design images

How to add keyboard navigation to this ant design full screen images as of now it is accessible only through click of pointer

This component adds a bit of bloat and I really can't see a callback for after it loads a preview. However, that being said... This code does what you want. It's pretty fragile, and might break on updates of the module.
Update: Because I felt like I was taking something away with this answer, I fixed it now so all arrows are in sync with keyboard actions.
*Final Update I fixed an issue where having more than one gallery would break things. Should be perfect now.
Here's a CodeSandbox Example
// Must be assigned to an onClick event
function onClickImage(e, parentContainer = null) {
let currentImgSRC;
if (e.currentTarget) {
currentImgSRC = e.currentTarget.querySelector("img").src;
// Keep track of our parent container, as not to include other containers
parentContainer = e.currentTarget.parentElement;
} else {
currentImgSRC = e;
}
let PreviewWrapDoms = document.getElementsByClassName(
"ant-image-preview-wrap"
);
let ImgPreviewBodyDom = document.getElementsByClassName(
"ant-image-preview-body"
)[0];
// I don't see any kind of callback accessible for when the target
// gets rendered, so we simply wait until the time is right.
setTimeout(function () {
// Previous viewers aren't self clearing, so I added that in.
// Otherwise this breaks with multiple galleries
if (typeof ImgPreviewBodyDom === "undefined" || PreviewWrapDoms.length > 1 ) {
for (let WrapIndex = 0; WrapIndex < PreviewWrapDoms.length; WrapIndex++) {
if ( window.getComputedStyle(PreviewWrapDoms[WrapIndex]).display === "none") {
PreviewWrapDoms[WrapIndex].parentElement.parentElement.remove();
}
}
onClickImage(currentImgSRC, parentContainer);
return;
}
let ImgPreviewDom = ImgPreviewBodyDom.getElementsByClassName(
"ant-image-preview-img"
)[0];
let LeftArrowDom = ImgPreviewBodyDom.getElementsByClassName(
"ant-image-preview-switch-left"
)[0];
let RightArrowDom = ImgPreviewBodyDom.getElementsByClassName(
"ant-image-preview-switch-right"
)[0];
// Assigning event listeners for the left and right arrows.
if (LeftArrowDom.getAttribute("listener") !== "true")
LeftArrowDom.addEventListener("click", (e) => {
e.preventDefault();
onClickImage(
LeftArrowDom.getAttribute("data-img-prev"),
parentContainer
);
});
LeftArrowDom.setAttribute("listener", "true");
// Now the right arrow
if (RightArrowDom.getAttribute("listener") !== "true")
RightArrowDom.addEventListener("click", (e) => {
e.preventDefault();
onClickImage(
LeftArrowDom.getAttribute("data-img-next"),
parentContainer
);
});
RightArrowDom.setAttribute("listener", "true");
// Set these previous and next img sources to the current
// for the edge cases that may be there is no next or previous
let previousImgSRC = currentImgSRC;
let nextImgSRC = currentImgSRC;
let ImgDoms = parentContainer.getElementsByClassName("ant-image-img");
// Cycle through the dom in the container to see which we are
for (let ImgDomIndex = 0; ImgDomIndex < ImgDoms.length; ImgDomIndex++) {
if (currentImgSRC === ImgDoms[ImgDomIndex].src) {
if (ImgDomIndex > 0) { //If greater than zero, we know there's a previous
previousImgSRC = ImgDoms[ImgDomIndex - 1].src;
LeftArrowDom.setAttribute("data-img-prev", previousImgSRC);
LeftArrowDom.classList.remove(
"ant-image-preview-switch-left-disabled"
);
} else {
LeftArrowDom.classList.add("ant-image-preview-switch-left-disabled");
}
if (ImgDomIndex + 1 < ImgDoms.length) { // if the next index doesn't exist, no next
nextImgSRC = ImgDoms[ImgDomIndex + 1].src;
LeftArrowDom.setAttribute("data-img-next", nextImgSRC);
RightArrowDom.classList.remove(
"ant-image-preview-switch-right-disabled"
);
} else {
RightArrowDom.classList.add(
"ant-image-preview-switch-right-disabled"
);
}
// Once we know where we are in the index, we can set the preview
// Image source to our desired result.
ImgPreviewDom.src = currentImgSRC;
// We break here because once we know our index, we don't need more
break;
}
}
// checks for keydown events on the dom.
this.onkeydown = (e) => {
e = e || window.event;
switch (e.keyCode) {
// we use recursion here to keep everything contained nicely.
case 37:
onClickImage(previousImgSRC, parentContainer);
break;
case 39:
onClickImage(nextImgSRC, parentContainer);
break;
default:
break;
}
};
}, 500);
}
Here's the code you'll need for an Image preview group:
<Image.PreviewGroup>
<Image
onClick={onClickImage}
width={200}
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
<Image
onClick={onClickImage}
width={200}
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
/>
</Image.PreviewGroup>

This Link can help you in similar way actually this is a image gallery that uses onclick event to open images you can use similar concept to get response.
https://www.codespeedy.com/how-to-create-a-tab-image-gallery-html-css-and-javascript/

Click event working, but not tap/touch. What am I missing?

So I'm using this js code:
var wrapper1 = document.getElementById("signature-pad-1"),
canvas1 = wrapper1.querySelector("canvas"),
signaturePad1;
var foremansiginput = document.getElementById("foremansiginput")
canvas1.addEventListener("mouseup", function(event) {
if (signaturePad1.isEmpty()) {
foremansiginput.value = '';
}
else {
foremansiginput.value = signaturePad1.toDataURL('image/png');
}
});
canvas1.addEventListener("click", function(event) {
if (signaturePad1.isEmpty()) {
foremansiginput.value = '';
}
else {
foremansiginput.value = signaturePad1.toDataURL('image/png');
}
});
canvas1.addEventListener("touchend", function(event) {
if (signaturePad1.isEmpty()) {
foremansiginput.value = '';
}
else {
foremansiginput.value = signaturePad1.toDataURL('image/png');
}
});
function clear1() {
signaturePad1.clear();
foremansiginput.value = '';
}
function resizeCanvas(canvas) {
var ratio = window.devicePixelRatio || 1;
canvas.width = 250;
canvas.height = 150;
}
resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);
$("#clear1").click(clear1);
Everything is working fine and dandy except for the touch/tap event. I've tried a bunch of different methods, and Google is telling me that "click" should work the same as touch or tap, so in theory, I shouldn't even be having this issue...
How do I make the tap/touch event work the same as click?
As of right now, when I sign the signature pad, everything else works. I was having an issue where if my final "pen stroke" was a click it would clear the value of the input. However, I fixed that by adding the "click" event listener. So now, with a mouse, I click and it adds to the value, instead of clearing it. However, if I tap/touch (without dragging my finger), it clears the value. I need that to stop. I need the user to be able to tap/touch the signature pad without it clearing the input value.
If it helps at all, I'm using szimek's signature_pad.min.js as well to handle all this fun stuff.
Any help is greatly appreciated. Thank you in advance.

How to give a div a higher z-index on click with JS?

I asked this question yesterday hopefully this one is clearer as I've now provided a working example of my store.
I'm developing a Shopify Theme. I've been using Timber as my base and I'm currently having a problem with my Quick Cart and Quick Shop/View drawers.
I have 2 drawers on the right of my site, 1 for the cart and 1 for the product quick view option. The drawers currently slide open - #PageContainer moves to the left on click to reveal each drawer.
As they are currently sitting on top of each other I need to alter the JS so that on click the z-index changes so that the correct drawer being called is highest in the stack.
I'm not great with JS so not sure if this is a simple task?
Here is a link to my Dev Store
JS:
timber.Drawers = (function () {
var Drawer = function (id, position, options) {
var defaults = {
close: '.js-drawer-close',
open: '.js-drawer-open-' + position,
openClass: 'js-drawer-open',
dirOpenClass: 'js-drawer-open-' + position
};
this.$nodes = {
parent: $('body, html'),
page: $('#PageContainer'),
moved: $('.is-moved-by-drawer')
};
this.config = $.extend(defaults, options);
this.position = position;
this.$drawer = $('#' + id);
if (!this.$drawer.length) {
return false;
}
this.drawerIsOpen = false;
this.init();
};
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
Drawer.prototype.open = function (evt) {
// Keep track if drawer was opened from a click, or called by another function
var externalCall = false;
// Prevent following href if link is clicked
if (evt) {
evt.preventDefault();
} else {
externalCall = true;
}
// Without this, the drawer opens, the click event bubbles up to $nodes.page
// which closes the drawer.
if (evt && evt.stopPropagation) {
evt.stopPropagation();
// save the source of the click, we'll focus to this on close
this.$activeSource = $(evt.currentTarget);
}
if (this.drawerIsOpen && !externalCall) {
return this.close();
}
// Add is-transitioning class to moved elements on open so drawer can have
// transition for close animation
this.$nodes.moved.addClass('is-transitioning');
this.$drawer.prepareTransition();
this.$nodes.parent.addClass(this.config.openClass + ' ' + this.config.dirOpenClass);
this.drawerIsOpen = true;
// Run function when draw opens if set
if (this.config.onDrawerOpen && typeof(this.config.onDrawerOpen) == 'function') {
if (!externalCall) {
this.config.onDrawerOpen();
}
}
if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
this.$activeSource.attr('aria-expanded', 'true');
}
// Lock scrolling on mobile
this.$nodes.page.on('touchmove.drawer', function () {
return false;
});
this.$nodes.page.on('click.drawer', $.proxy(function () {
this.close();
return false;
}, this));
};
Drawer.prototype.close = function () {
if (!this.drawerIsOpen) { // don't close a closed drawer
return;
}
// deselect any focused form elements
$(document.activeElement).trigger('blur');
// Ensure closing transition is applied to moved elements, like the nav
this.$nodes.moved.prepareTransition({ disableExisting: true });
this.$drawer.prepareTransition({ disableExisting: true });
this.$nodes.parent.removeClass(this.config.dirOpenClass + ' ' + this.config.openClass);
this.drawerIsOpen = false;
this.$nodes.page.off('.drawer');
};
return Drawer;
})();
Update
As instructed by Ciprian I have placed the following in my JS which is making the #CartDrawer have a higher z-index. I'm now unsure how I adapt this so that it knows which one to have higher dependant on which button is clicked. This is what I've tried:
...
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
$('.js-drawer-open-right-two').click(function(){
$(this).data('clicked', true);
});
if($('.js-drawer-open-right-two').data('clicked')) {
//clicked element, do-some-stuff
$('#QuickShopDrawer').css('z-index', '999');
} else {
//run function 2
$('#CartDrawer').css('z-index', '999');
}
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
...

The approach would be like this:
$('.yourselector').css('z-index', '999');
Add it (and adapt it to your needs) inside your onclick() function.

if you need to modify the z-index of your div when clicking a buton, you shoud put in this code on your onclick() function, else if you need to activate it when you looding the page you shoud put it on a $( document ).ready() function , the code is :
$('#yourID').css('z-index', '10');

You can use:
document.getElementById("your-element-id").style.zIndex = 5;
It's pure Javascript and sets the z-index to 5. Just bind this to onClick event!

How to make ondblclick event works on phone?

I want to achieve the double click event on a specific div like this:
<div id="divID" ondblclick = 'alert("double click!!");' >
it worked on the google chrome browser but when I open it with phone it didn't work, by the way the single click worked.
ps: i added this two things
<meta name="viewport" content="width=device-width, initial scale=1,user-scalable=no">
and this
body {
-ms-touch-action: manipulation;
touch-action: manipulation;}
but it didnt work!

I got the same issue. On touch devices, if you want to detect a double-tap gesture and you use the ondblclick event in most cases it will not work and also the problem is it will also fire an onclick. One of the solution is to implement a double tap detection pattern using the following code sample:
var doubletapDeltaTime_ = 700;
var doubletap1Function_ = null;
var doubletap2Function_ = null;
var doubletapTimer = null;
function tap(singleTapFunc, doubleTapFunc) {
if (doubletapTimer==null) {
// First tap, we wait X ms to the second tap
doubletapTimer_ = setTimeout(doubletapTimeout_, doubletapDeltaTime_);
doubletap1Function_ = singleTapFunc;
doubletap2Function_ = doubleTapFunc;
} else {
// Second tap
clearTimeout(doubletapTimer);
doubletapTimer_ = null;
doubletap2Function_();
}
}
function doubletapTimeout() {
// Wait for second tap timeout
doubletap1Function_();
doubleTapTimer_ = null;
}
And you can call it like
<div id="divID" onclick="tap(tapOnce, tapTwice)" >
tapOnce and tapTwice are your functions which will be called in respective cases. This solution will work on browsers too.
Reference

Here is the external function 'doubletap' which can be helpful:
/*
* jQuery Double Tap
* Developer: Sergey Margaritov (sergey#margaritov.net)
* Date: 22.10.2013
* Based on jquery documentation http://learn.jquery.com/events/event-extensions/
*/
(function($){
$.event.special.doubletap = {
bindType: 'touchend',
delegateType: 'touchend',
handle: function(event) {
var handleObj = event.handleObj,
targetData = jQuery.data(event.target),
now = new Date().getTime(),
delta = targetData.lastTouch ? now - targetData.lastTouch : 0,
delay = delay == null ? 300 : delay;
if (delta < delay && delta > 30) {
targetData.lastTouch = null;
event.type = handleObj.origType;
['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
event[property] = event.originalEvent.changedTouches[0][property];
})
// let jQuery handle the triggering of "doubletap" event handlers
handleObj.handler.apply(this, arguments);
} else {
targetData.lastTouch = now;
}
}
};
})(jQuery);

Load jQuery Mobile into your project and try using taphold or some of the other mobile specific touch events that are available to you through that API.
Here's the jQuery Mobile documentation with all the events you can use: http://api.jquerymobile.com/category/events/

Here is the snippet for TS React users. Pass in the click event, so that double click is only invoked if the same element is clicked twice
import React from "react";
type CallBack = () => any;
type TapParams = { onSingleTap?: CallBack; onDoubleTap?: CallBack };
var DELTA_TIME_THRESHOLD_MS = 700;
var timer: NodeJS.Timeout | null = null;
var target: EventTarget;
export function tap(
e: React.MouseEvent,
{ onSingleTap, onDoubleTap }: TapParams
) {
if (timer == null) {
// First tap
onSingleTap?.();
timer = setTimeout(() => {
timer = null;
}, DELTA_TIME_THRESHOLD_MS);
} else {
// Second tap
if (e.target === target) {
onDoubleTap?.();
}
clearTimeout(timer);
timer = null;
}
target = e.target;
}
Usage
<div
onClick={(e) => tap(e, { onSingleTap, onDoubleTap })}
>Tap or doubletap</div>

Using only JavaScript
You can use "touchstart" event for a single touch,
but with calculating the time when he should click again
I used 400 (0.4s) as it's the longer duration between two touches
It's only an estimate, but it's still a reasonable time
let expired
let doubleClick = function () {
console.log('double click')
}
let doubleTouch = function (e) {
if (e.touches.length === 1) {
if (!expired) {
expired = e.timeStamp + 400
} else if (e.timeStamp <= expired) {
// remove the default of this event ( Zoom )
e.preventDefault()
doubleClick()
// then reset the variable for other "double Touches" event
expired = null
} else {
// if the second touch was expired, make it as it's the first
expired = e.timeStamp + 400
}
}
}
let element = document.getElementById('btn')
element.addEventListener('touchstart', doubleTouch)
element.addEventListener('dblclick', doubleClick)
In case of this error :
Unable to preventDefault inside passive event listener due to target being treated as passive.
event.preventDefault( ) not working if element = "document" or "document.body"
So the solution of that, you should have a full page div container :
let element = document.getElementById('container')
element.style.minWidth = '100vw'
element.style.minHeight = '100vh'
document.body.style.margin = '0px'
element.addEventListener('touchstart', elementTouch)
element.addEventListener('dblclick', doubleClick)

AsyncFileUpload has logic error in AjaxControlToolkit, when component in a different tab, so not displayed

I am using the Nov version of the AjaxControlToolkit, and I found a logic error, but I am trying to figure out the best way to fix this, by Saturday, so that the program will work on IE.
This problem only has an error on IE, it works on Firefox3.5.
I have a AsyncFileUpload component on a tab that appears to not be visible when this function runs, and so the offset width is zero.
The problem is in the file AsyncFileUpload.pre.js, in function _app_onload, and this line:
this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";
I don't want to compile it from the source, but this may end up being my best option, so I can fix the error.
But, this is probably going to be my fix:
this._innerTB.style.width = ((this._inputFile.offsetWidth == 0) ? 200 : this._inputFile.offsetWidth) - 107) + "px";
But, I don't know if there is a better solution.
I could just write a new prototype function in my javascript class and just fix the logic error, which is better than recompiling. If I fix it in the code, then whenever I do an update I will need to keep replacing that line, until it gets fixed in the codebase.
But, I am trying to figure out if there is a way for an element to know that it has just become visible, as anytime you need to know the actual width of an element then you can't really set it up until it is displayed. I can't think of a way to know that, so what I tend to do is fix the elements on the tab the first time the tab is selected, but, for a generic library that is not a possible solution.
Location of the main question
So, before I send in a bug report about this I am curious if there is a better way to do it, rather than having it done when the page has been loaded, and assuming a minimum width that is probably wrong. <-- Question located here
I am using the follow code to create the element:
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload"
OnClientUploadComplete="UploadComplete"
CompleteBackColor="Lime" UploaderStyle="Modern" Width="400px"
ErrorBackColor="Red" ThrobberID="Throbber"
onuploadedcomplete="AsyncFileUpload1_UploadedComplete"
UploadingBackColor="#66CCFF" />
And if it makes any difference I am using this as the ToolkitScriptManager seemed to introduce other errors, but that may have been my error:
<ajax:AjaxScriptManager ID="scriptmanager1" runat="server" EnablePartialRendering="true" ></ajax:AjaxScriptManager>
I am not certain if LoadScriptsBeforeUI would be useful, but I believe that I want the UI done before the scripts are loaded actually.
I find it interesting that the width I set isn't actually set when the dom tree is completed.

try add this attribute to your scriptmanager
LoadScriptsBeforeUI="true"
I have download the source code and fix the codeline,but it still not working,
then I add this attr to the scriptmanager,it works !!
check this page for detail if U wanna change the source code
http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d

This is the solution that's worked for me:
Apply CssClass on ajaxToolkit:AsyncFileUpload like "imageUploaderField"
Write Css .imageUploaderField input{width:100%!important;}
Source: http://ajaxcontroltoolkit.codeplex.com/workitem/27429

This isn't the ideal solution, but it does work, hopefully someone will have a better solution, as this is something I cannot submit to fix the bug. I added this to a javascript file of mine, but it is a hack, not a good solution. I had to replace the second function because of the line I commented out.
$(document).ready(function() {
Sys.Extended.UI.AsyncFileUpload.prototype._app_onload = function(sender, e) {
this.setThrobber(false);
if (this._inputFile != null) {
if (this._onchange$delegate == null) {
this._onchange$delegate = Function.createDelegate(this, this._onchange);
$addHandlers(this._inputFile, {
change: this._onchange$delegate
});
}
if (Sys.Browser.agent == Sys.Browser.Firefox) {
this._inputFile.size = 0;
var width = this._inputFile.offsetWidth;
this._inputFile.style.width = "";
while (this._inputFile.offsetWidth < width) {
this._inputFile.size++;
}
}
if (this._innerTB != null) {
this._inputFile.blur();
var inputFile = this._inputFile;
setTimeout(function() { inputFile.blur(); }, 0);
this._innerTB.style.width = ((this._inputFile.offsetWidth == 0 ? 200 : this._inputFile.offsetWidth) - 107) + "px";
this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
$addHandlers(this._inputFile, {
mouseup: this._onmouseup$delegate
});
}
}
}
};
Sys.UI.DomEvent.prototype._removeHandler = function (elements, eventName, handler) {
Sys._queryAll(elements, function(element) {
var browserHandler = null;
// if ((typeof (element._events) !== 'object') || !element._events) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
var cache = element._events[eventName];
if (!(cache instanceof Array)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
for (var i = 0, l = cache.length; i < l; i++) {
if (cache[i].handler === handler) {
browserHandler = cache[i].browserHandler;
break;
}
}
if (typeof (browserHandler) !== 'function') throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
if (element.removeEventListener) {
element.removeEventListener(eventName, browserHandler, false);
}
else if (element.detachEvent) {
element.detachEvent('on' + eventName, browserHandler);
}
cache.splice(i, 1);
});
}

My Solution... probably not the best but works.
_app_onload: function(sender, e) {
this.setThrobber(false);
if (this._inputFile != null) {
if (this._onchange$delegate == null) {
this._onchange$delegate = Function.createDelegate(this, this._onchange);
$addHandlers(this._inputFile, {
change: this._onchange$delegate
});
}
if (Sys.Browser.agent == Sys.Browser.Firefox) {
this._inputFile.size = 0;
var width = this._inputFile.offsetWidth;
this._inputFile.style.width = "";
while (this._inputFile.offsetWidth < width) {
this._inputFile.size++;
}
}
if (this._innerTB != null) {
this._inputFile.blur();
var inputFile = this._inputFile;
setTimeout(function() { inputFile.blur(); }, 0);
if ((this._inputFile.offsetWidth - 107) >= 1) {
this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";
this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
}
if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
$addHandlers(this._inputFile, {
mouseup: this._onmouseup$delegate
});
}
}
}
},
have forked at http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix