Has anyone had luck creating a vue application that utilizes Electron webviews? I have the following setup, but when I run the window is blank.
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
webviewTag: true,
width: 1276,
height: 800,
frame: false,
titleBarStyle: 'hiddenInset',
center: true,
movable: true,
webPreferences: {
nodeIntegration: true
}
})
}
Then in my component.
<webview id="foo" src="https://www.youtube.com/" style="display:inline-flex; width:640px; height:480px"></webview>
Move webviewTag: true, to webPreferences
Related
Im trying to do swiper marquee.
But I only found a solution with .swiper-wrapper { transition-timing-function: linear; } which doesn't work well with loop and safari IOS.
It is logical to assume that autoplay with delay:0 and freemode should create something similar to marquee, but alas, this does not work.
Are there any other ways to make a marquee swiper?
I tried this code and expecting marquee:
` const sliderInstance = new Swiper(root, {
...defaultOptions,
modules: [FreeMode, Autoplay],
init: false,
slidesPerView: 2.2,
loop: true,
freeMode: true,
spaceBetween: 8,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
});`
I'm using SweetAlert v10.14.1 as a toastr with code
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-right',
showConfirmButton: false,
timer: 5000,
})
</script>
it works fine .. but the message dropped down from top with white background .. i want to :
1- fade it in and out
2- change apperance to a bootstrap theme
No fade-in effect at the moment. If you want to remove the "boing" effect, you can just do it adding to your props:
Swal.fire({
... you other props...
showClass: {
popup: "", // it removes the 'boing' effect, the default value is 'swal2-show'
},
});
I'm using vue in combination with deck.gl, during a view state transition it keeps playing until the transition has finished even when interrupted.
Init deck:
this.deck = new Deck({
canvas: 'deck-canvas',
width: '100%',
height: '100%',
initialViewState: this.initialViewState,
controller: true,
onViewStateChange: ({ viewState }) => {
this.map.jumpTo({
center: [viewState.longitude, viewState.latitude],
zoom: viewState.zoom,
bearing: viewState.bearing,
pitch: viewState.pitch,
});
},
});
Creating a new view transition:
this.deck.setProps({
viewState: {
...predefinedCameraPosition,
transitionInterpolator: new FlyToInterpolator(),
transitionDuration: 2000,
transitionInterruption: this.deck._onViewStateChange.bind(this)
}
})
I expect the transition to stop when the user interrupts it.
Turns out another function was manipulating deck.gl's layer state. Updating the viewState at the same time fixed this.
this.deck.setProps({
layers: [...this.deckLayers],
viewState: this.deck.viewState
});
I made a video gallery with magnific popup.
But unlike the imagegallery, the videogallery doesn't show a counter e.g. 1/3 at the bottom right of the video. Why not? In the imagegallery it works well.
Code of the Videogallery:
$('.gallery_video').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: true,
fixedContentPos: false,
gallery: {
enabled:true
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
});
Code of imagegallery:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
Both scripts don't specify a counter so why isn't it showing up on both?
thank you
It has been a time ago when this was asked but a full anwser:
You have to add or specify the iframe markup.
You also want to add some small css updates for positioning the counter.
var $attachmentContainers = $('.js-attachments-in-gallery');
$attachmentContainers.magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled:true,
},
iframe: {
markup:
'<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});
.mfp-iframe-scaler .mfp-bottom-bar {
margin-top: 4px; }
Figured it out - for the iframe type you have to specify that you want a counter:
$(this).magnificPopup({
.....
iframe: {
markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
'<div class="mfp-counter"></div>'
}
I had rendered a list using SENCHA.Now i want to navigate to different screen/load different screen upon clicking the item in LIST.
var templist = new Ext.List( {
title:"xmli",
itemTpl : '{ename}',
floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
store:xmlStore,
modal: true,
onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
// I need to a load different page here how ?.
// ChangePage();
}
},
hideOnMaskTap: false
}).show();
Please help me how can we achieve this using SENCHA.
Thanks,
Shyam
You need to put this list inside a layout where you can switch the visible component to your different page. It sounds like you could use the card layout:
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html