I have to hide my tippy when an element inside it has been clicked (element is i.e. small images acting as links) but I have not been able to find any usefull scripts that works with my tippy.
I have i.e. tried these without luck:
How to show tooltip on mouseenter and hide on click with Tippy.js
https://github.com/atomiks/tippyjs/issues/437
Can anyone help? :-)
Here is my TippyJS :
tippy('#ReactionBar' + val, {
a11y: true,
role: 'tooltip',
allowHTML: true,
animation: 'perspective-extreme',
appendTo: () => document.body,
arrow: true,
arrowType: 'sharp',
boundary: 'HTMLElement',
content: ReactionBarContent.get(0).outerHTML,
delay: 0,
offset: [0, 5],
duration: [325, 275],
hideOnClick: true,
ignoreAttributes: false,
inertia: false,
interactive: true,
interactiveBorder: 2,
interactiveDebounce: 0,
placement: 'top-end',
popperOptions: {},
showOnCreate: false,
size: 'regular',
target: '',
theme: 'light',
touch: true,
trigger: 'mouseenter focus',
triggerTarget: null,
moveTransition: 'transform 0.2s ease-out',
});
I was facing the same issue and found using the onShown prop and instance.hide() method worked. I found the hideOnClick prop wasn't needed for this.
this.tippy = tippy(this.element, {
// your other props
interactive: true,
trigger: 'click',
triggerTarget: this.triggerTarget,
onShown(instance) {
document.querySelector('[data-tippy-root]').addEventListener('click', event => {
instance.hide();
})
}
})
Related
I'm working on an app where my main window is type desktop, but opening a new window by clicking a tray opens the same index instead of opening the html file i want. If I add the file link by hardcoding it returns a white screen because vite can not complile vue and ts included in the html file.
I even added it to the input values of vite.config.js
vite.config.js
build: {
sourcemap: true,
target: `chrome${chrome}`,
outDir: 'dist',
assetsDir: '.',
rollupOptions: {
input: {
main: join(PACKAGE_ROOT, 'index.html'),
upload: './upload/upload.html', // file i want to compile with vite to make it work
},
external: [
...builtinModules.flatMap(p => [p, `node:${p}`]),
],
},
emptyOutDir: true,
brotliSize: false,
}
createSecondWindow.ts
async function createSecondWindow() {
const browserUploadWindow = new BrowserWindow({
//skipTaskbar: true,
movable: true,
roundedCorners: true,
titleBarStyle: 'default',
resizable: true,
hasShadow: true,
show: true, // Use 'ready-to-show' event to show window
height: screen.getPrimaryDisplay().size.height-300,
width: screen.getPrimaryDisplay().size.width-300,
minHeight:screen.getPrimaryDisplay().size.height-350,
minWidth:screen.getPrimaryDisplay().size.width-600,
enableLargerThanScreen: true,
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, '../../preload/dist/index.cjs'),
},
});
browserUploadWindow.on('ready-to-show', () => {
browserUploadWindow?.show();
if (import.meta.env.DEV) {
browserUploadWindow?.webContents.openDevTools();
}
});
const pageUrl = import.meta.env.DEV && import.meta.env.VITE_DEV_SERVER_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_URL
: new URL('../renderer/dist/upload.html', 'file://' + __dirname).toString();
const uploadUrl = new URL('../renderer/upload/upload.html', 'file://' + __dirname).toString();
await browserUploadWindow.loadURL(uploadUrl);
return browserUploadWindow;
}
mainWindow.ts
async function createWindow() {
//browserWindow.setVisibleOnAllWorkspaces(true)
// let the dock be on top of the window
const browserWindow = new BrowserWindow({
type: 'desktop',
skipTaskbar: true,
roundedCorners: false,
titleBarStyle: 'hidden',
resizable: false,
hasShadow: false,
show: false, // Use 'ready-to-show' event to show window
height: screen.getPrimaryDisplay().size.height,
width: screen.getPrimaryDisplay().size.width,
enableLargerThanScreen: true,
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, '../../preload/dist/index.cjs'),
},
});
browserWindow.on('ready-to-show', () => {
browserWindow?.show();
if (import.meta.env.DEV) {
browserWindow?.webContents.openDevTools();
}
});
const pageUrl = import.meta.env.DEV && import.meta.env.VITE_DEV_SERVER_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_URL
: new URL('../renderer/dist/index.html', 'file://' + __dirname).toString();
await browserWindow.loadURL(pageUrl);
return browserWindow;
}````
It's been days that I'm working on setting the swiper in my application but I still no luck and found no working sample anywhere from here to the Github issues or elsewhere on the net.
I can not set a dynamic height for the swiper in vertical mode via none of the suggested solutions to this problem.
I have several images as slides that give a height of thousands of pixels but if I switch it to a text it is fine as the height of the text is like 10 px. Any div above a certain height will result in abnormal height.
I found that the suggested CSS does not work as it just limits the height of the window and is very unpleasant as the pictures are cut off.
The js solutions are the correct way to do it but I can not find a working solution and the ones that I have tried all result in half of the job solutions.
It seems the correct way uses the onSlideChangeStart to correct the next slide height like below but this does not work as the swiper of the vertical is not recognized in its own settings.
onSlideChangeStart: (swiper)->
$(swiper.slides).each ->
$(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto'
I tried to use the active class instead of the API as it is not working when calling even the swiperV.activeIndex in its own onSlideChangeStart like below but swiper-slide-active is not defined.
This is my settings for the 3 nested sliders.
var swiperVV = new Swiper('.swiper-container-vv', {
direction: 'vertical',
updateOnWindowResize: true,
grabCursor: true,
loop: true,
mousewheel: true,
lazy: true,
zoom: true,
effect: 'slide',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
});
var swiperH = new Swiper('.swiper-container-h', {
initialSlide:0,
spaceBetween: 0,
autoHeight: true,
updateOnWindowResize: true,
grabCursor: true,
loop: true,
parallax: true,
lazy: true,
effect: 'slide',
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
});
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
autoplay: {
delay: 5000,
},
autoHeight: true,
updateOnWindowResize: true,
grabCursor: true,
loop: true,
mousewheel: true,
lazy: true,
zoom: true,
effect: 'slide',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
slideChange: resizeSwiper()
});
function resizeSwiper() {
console.log($('.swiper-container-v .swiper-slide swiper-slide-active').height());
$('.swiper-container-v, .swiper-container-v .swiper-slide').css({ height: $('.swiper-container-v .swiper-slide .swiper-slide-active').height() });
}
i have gone through all the samples of suggested users like the ones listed below in github, stackoverflow and codepen.
https://github.com/nolimits4web/swiper/issues/48
https://github.com/nolimits4web/Swiper/issues/153
This is the workaround worked for me
if (typeof Swiper != "undefined"){
var popularSwiper = new Swiper(".popularSwiper", {
direction: "vertical",
autoHeight: true,
autoplay: {
delay: 5000,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on:{
init:function(){
setSlideHeight(this);
},
slideChangeTransitionEnd:function(){
setSlideHeight(this);
}
}
});
function setSlideHeight(that){
$('.swiper-slide').css({height:'auto'});
var currentSlide = that.activeIndex;
var newHeight = $(that.slides[currentSlide]).height();
$('.swiper-wrapper,.swiper-slide').css({ height : newHeight })
that.update();
}
}
It's working for me.
calculate the total height of the swiper container including gap between slides.
then set the swiper container height to the previously calculated height
let pdpThumb = new Swiper('#pdp-thumbCarousel', {
slidesPerView: 4,
direction: 'vertical',
spaceBetween: 10,
freeMode: true,
loop: true,
on: {
init: (swiper) => {
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
swiper.el.style.height = containerHeight + 'px';
},
},
});
I added Slick slider for any device under 1024px, however every time a button within the div is clicked and the page is refreshed, the slider is gone and it leaves a mess. It fixes itself if I change the device width from the console. I tried adding a function to reinitialize it every time a button is clicked, but for some reason 'reInit' does not work. I can't provide Jsfiddle, if someone could help based on my description, I would appreciate it.
function slickify(){
event.preventDefault();
$('.cart-list').not('.slick-initialized').slick({
infinite: false,
responsive: [
{
breakpoint: 1024,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
dots: true
}
},
{
breakpoint: 786,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
},
{
breakpoint: 550,
autoplay: false,
dots: true,
infinite: false,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
}
]
});
}
$(window).resize(function(){
event.preventDefault();
var $windowWidth = $(window).width();
if ($windowWidth < 1024) {
slickify();
$(window).resize(function() {
$('.cart-list').slick('resize');
event.preventDefault();
});
$(window).on('orientationchange', function() {
$('.cart-list').slick('resize');
event.preventDefault();
});
}
});
$('.cart-list').on('click', function() {
$('.cart-list').slick('reInit');
});
});
I've tried adding a simple function such as :
('body').on('click', function() {
('.slick-slider-div').slick('reInit');
});
where reInit is reinitialization as per Slick.JS documentation. However, it breaks any click event on the page. I also tried to make the click event only withing the div, still no result. The '.slick-initialized' class just disappears on click event.
I found this code here: https://stackoverflow.com/a/32636784/2785140 but unfortunately it does not work correctly if the page contains more than one slider.
var oc = $('.owl-carousel');
var ocOptions = oc.data('carousel-options');
var defaults = {
loop: true,
nav: false,
autoplay: true,
}
oc.owlCarousel( $.extend( defaults, ocOptions) );
html:
<div class="owl-carousel" data-carousel-options='{"autoplay":"true","autoplayTimeout":"6000","items":"2"}'> ... </div>
How to make it work on multiple sliders?
Thanks in advance.
Init each carousel:
var oc = $('.owl-carousel');
oc.each(function () {
var el = $(this);
el.owlCarousel($.extend({
autoplay: 2000,
loop: true,
items: 4,
autowidth: true,
nav: false,
dots: false,
margin: 30
}, el.data('carousel-options')));
});
I am trying to use an ActionSheet to present the user several options to continue. I want to add a simple text box in the middle of the screen to describe the problem to the user.
Is there a simple/standard way to put such a prompt in Sencha-Touch?
You'll need to do something like this on your overlay ...
if (!this.popup) {
this.popup = new Ext.Panel({
hideOnMaskTap: false,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>msg here</p>'
});
}
this.popup.show('pop');
The key here being hideOnMaskTap: false, this will prevent the overlay from disappearing when you click in it's masked area.
You can then display your action sheet but you must remember to hide the overlay in the handler(s) for your action sheet buttons since it will no longer go away when you tap in the masked area.
if (!this.actions) {
this.actions = new Ext.ActionSheet({
items: [{
text: 'decline',
ui: 'decline',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'save',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'cancel',
scope: this,
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}]
});
}
this.actions.show();
note the hiding of the overlay in the sheet handlers.. (i don't do it above but you'll more than likely want to destroy the overlay and the action sheet after they are hidden as well just to keep things tidey)
You can use an Overlay popup to display a message after the ActionSheet renders.