I am using vuejs with rails webpacker and turbolinks. I want to calculate the correct height of the iframe element on the initial page load. Currently, I am getting the height of the element when I manually refresh the page, and when someone navigates from any other pages to the page where the iframe element is located, the height of the element is not calculated.
My index.js setup:
Vue.use(TurbolinksAdapter);
document.addEventListener('turbolinks:load', () => {
const app = new Vue({
el: '[data-behaviour="vue"]',
});
});
My preview.vue where the iframe element is located.
data() {
return {
frameHeight: '',
};
},
computed: {
computeHeight() {
this.frameHeight =
this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';
},
},
mounted() {
window.addEventListener('load', () => {
this.computeHeight;
});
},
I have tried replacing the mounted hook with the created hook as well, and instead of listening for the load event I have tried listening for the turbolinks:load event as well. But it doesn't work.
Any help would be appreciated. Thanks.
Try wrapping the compute height code in nextTick like so:
data() {
return {
frameHeight: '',
};
},
mounted() {
this.$nextTick(() => {
window.addEventListener('load', () => {
this.frameHeight =
this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';
});
})
},
This should allow the elements to load before executing the code to grab height.
You won't need the eventListener when using nextTick. You can just do it like:
data() {
return {
frameHeight: '',
};
},
mounted() {
this.$nextTick(() => {
this.frameHeight =
this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';
});
},
Related
I am trying to animate buttons in my application using GSAP. User clicks button and animates the maxWidth of the button. I'd like to have this dynamic and add a percentage of the max width that is set using props. is it possible to pass the prop maxwidth to the gsap timeline? as of now it does not work for me.
props: {
maxWidth: {
type: String,
required: true,
},
},
methods: {
buttonTo(path) {
let tl = this.$gsap.timeline({
onComplete: function () {
pushToPath();
},
});
tl.to(this.$refs.primaryButton, {
duration: 0.6,
ease: 'power2.in',
maxWidth: `calc(${this.maxWidth} + 5%)`,
});
const pushToPath = () => {
this.$router.push({ path: path });
};
},
},
I've run into a similar issue before. The nice thing is that it has nothing to do with the Vue Lifecycle, so the value is available within methods.
There are a couple of things that could be causing this issue. I'd start by making sure your prop, "maxWidth," has "px" or some form of CSS measurement tied to it. CSS calc can't have a plain number within the CSS "calc" function.
Here is an example using your function:
props: {
maxWidth: {
type: String,
required: true,
},
},
methods: {
buttonTo(path) {
let tl = this.$gsap.timeline({
onComplete: function () {
pushToPath();
},
});
tl.to(this.$refs.primaryButton, {
duration: 0.6,
ease: 'power2.in',
maxWidth: `calc(${this.maxWidth}px + 5%)`,
});
const pushToPath = () => {
this.$router.push({ path: path });
};
},
},
You could also switch your prop to be of the type "Number" in case, for some reason, the string is causing issues within the timeline.
If this helps, please let me know!
I am trying to call window.addEventListener on my custom behavior however im not having any luck getting it to work.
test-bahvior.html
<script>
"use strict";
window.MyTest = window.MyTest || {};
MyTest.Test = {
properties: {
globals: {
type: Boolean,
notify: true,
value: false
}
},
ready: function() {
setTimeout(() => {
this.globals = true;
console.log('changed val ' + this.globals);
}, 5000);
},
};
</script>
i am then trying to callwindow.addEventListener("globals-changed", this._test); in the ready: function() of another html file (myapp.html) however this._test doesnt seem to fire despite the setTimeout causing the value change.
I have been following the Polymer 1 docs:
https://polymer-library.polymer-project.org/1.0/docs/devguide/properties#notify
Help is much appreciated.
TIA
I'm trying to implement barba.js on a HubSpot site.
Consider the following two pages:
Resources
Customers
With my current barba.js implementation, this is the current flow I'm experiencing:
I access the resources page (not by transitioning to it, by directly accessing it via /resources).
At this point, all my js is working (slick-sliders, scroll functions etc)
I then use the navigation to access the customers page. The page loads, but all of the js specific to modules and forms for that page are not working.
In short, js for pages that I transition to do not work.
To resolve this, what I'm trying to do is to reload all scripts within the container beforeEnter().
See below:
$(function() {
function delay(n){
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
barba.init({
sync: true,
prefetchIgnore: true,
debug: true,
transitions: [{
async leave(data){
const done = this.async();
await delay(200);
done();
},
async beforeEnter({ next, container }) {
$(container).find('script').each(function (i, script) {
var $script = $(script);
$.ajax({
url: $script.attr('src'),
cache: true,
dataType: 'script',
success: function () {
$script.trigger('load');
}
});
});
},
async enter(data){
let scrollX = 0
let scrollY = 0
barba.hooks.leave(() => {
scrollX = barba.history.current.scroll.x;
scrollY = barba.history.current.scroll.y;
});
window.scrollTo(scrollX, scrollY);
},
async once(data){
console.log("done");
},
}]
});
});
However, my current beforeEnter() still yields the same results. Any way around this?
Edit
To provide more details, this barba.js implementation is for a HubSpot site. When you create custom modules in HubSpot it spits out the JS for that module on the page (in script tags). For example, here is how JS is rendered on the page:
<script>
// js from custom module is here
</script>
<script src=".../scripts-min.min.js"></script>
As such, when a barba transition is executed, I need all JS that have src and those that are rendered inline (like custom modules) to reload.
Latest approach based on User863's feedback
$(function() {
function delay(n){
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function reload_scripts(param){
$(param).find('script').each(function (i, script) {
var $script = $(script);
$.ajax({
url: $script.attr('src'),
cache: true,
dataType: 'script',
success: function () {
$script.trigger('load');
console.log("scripts loaded");
}
});
});
}
barba.init({
sync: true,
prefetchIgnore: true,
debug: true,
transitions: [{
async leave(data){
const done = this.async();
await delay(200);
done();
},
async beforeEnter(data) {
reload_scripts(data.next.container);
},
async beforeEnter({ next }) {
reload_scripts(next.container);
},
async enter(data){
// scroll to top of page when transitioning
let scrollX = 0
let scrollY = 0
barba.hooks.leave(() => {
scrollX = barba.history.current.scroll.x;
scrollY = barba.history.current.scroll.y;
});
window.scrollTo(scrollX, scrollY);
},
async once(data){
console.log("transition complete");
},
}]
});
});
Current behaviour: Same as before (scripts for modules are broken when page changes). Modules with slick slider's for example, do not work (slick isn't initiated).
Might be solved by using eval as mentioned here: https://github.com/barbajs/barba/issues/32
Mentioned in the comments on the issue:
barba.hooks.after((data) => {
let js = data.next.container.querySelectorAll('main script');
if(js != null){
js.forEach((item) => {
console.log(js)
eval(item.innerHTML);
});
}
});
According to docs
The arguments of beforeEnter transition will be object of
Property
Description
data.current
Current page related
data.next
Next page related
data.trigger
Link that triggered the transition
https://barba.js.org/docs/advanced/hooks/#data-properties
Therefore the container property available inside both data.current and data.next properties. In this case, we have to use script from data.next which related to a new page.
Fixed code #1
async beforeEnter(data) {
$(data.next.container).find('script').each(function (i, script) {
// ...
})
}
Fixed code #2
async beforeEnter({ next }) {
$(next.container).find('script').each(function (i, script) {
// ...
})
}
I have a page in Vue/Nuxt that needs to refresh a list of items every few seconds. This is an SPA that does an Axios fetch to a server to get updated information. At the moment, I have something like this:
methods: {
doRefresh() {
setTimeout(function() {
// trigger server fetch here
doRefresh();
}, 5000);
}
}
It works, unless the other code in doRefresh throws an error, in which case the refreshing stops, or somehow the code gets called twice, and I get two timers going at the same time.
An alternative is call setInterval() only once. The trouble with that is that it keeps going even after I leave the page. I could store the reference returned by the setInterval(), and then stop it in a destroyed() hook. But again, an error might prevent that from happening.
Is there a safe and reliable way to run a timer on a Vue page, and destroy it when the user leaves the page?
This approach together with try-catch is a way to go, have a look at this snippet:
https://codepen.io/alexbrohshtut/pen/YzXjNeB
<div id="app">
<wrapper/>
</div>
Vue.component("interval-component", {
template: `
<div> {{lastRefreshed}}
<button #click="init">Start</button></div>`,
data() {
return {
timeoutId: undefined,
lastRefreshed: undefined
};
},
methods: {
doJob() {
if (Math.random() > 0.9) throw new Error();
this.lastRefreshed = new Date();
console.log("Job done");
},
init() {
if (this.timeoutId) return;
this.run();
},
run() {
console.log("cycle started");
const vm = this;
this.timeoutId = setTimeout(function() {
try {
vm.doJob();
} catch (e) {
console.log(e);
} finally {
vm.run();
}
}, 2000);
}
},
destroyed() {
clearTimeout(this.timeoutId);
console.log("Destroyed");
}
});
Vue.component("wrapper", {
template: `<div> <button #click="create" v-if="destroyed"> Create</button>
<button v-else #click="destroy">Destroy</button>
<interval-component v-if="!destroyed" /></div>`,
data() {
return {
destroyed: true
};
},
methods: {
destroy() {
this.destroyed = true;
},
create() {
this.destroyed = false;
}
}
});
new Vue({
el: "#app"
});
Setup:
I have multiple Vue components, and each component has multiple instances in different dialogs in my web app.
For each type of component I have a global state (handrailOptions in the example below) so that each type of component stays in sync across the dialogs.
I'd like for it so that when a component proceeds beyond step 1, I hide the other components in that dialog.
I have achieved this nicely using the computed / watch combo.
However, my problem is that it seems if I try to listen in with computed through more than 1 Vue instance, it hijacks the other listeners.
Problem
Below is a simplified version of what I'm working with, when the app starts up, the console logs 'computed 1' & 'computed 2'. But then when I change handrailOptions.step, only the second fires. ('computed 2' & 'watched 2')
Is there any way to have multiple Vues have a computed listener working on the same value?
handrailOptions = {
step: 1
};
Vue.component( 'handrail-options', {
template: '#module-handrail-options',
data: function() {
return handrailOptions;
},
});
var checkoutDialog = new Vue({
el: '#dialog-checkout',
computed: {
newHandrailStep() {
console.log('computed 1');
return handrailOptions.step;
}
},
watch: {
newHandrailStep( test ) {
console.log('watched 1');
}
}
});
new Vue({
el: '#dialog-estimate-questions',
computed: {
newHandrailStep() {
console.log('computed 2');
return handrailOptions.step;
}
},
watch: {
newHandrailStep( test ) {
console.log('watched 2');
}
}
});
This works as expected. I made handrailOptions responsive by making the data object of a new Vue. Making it the data object of a component, as you did, could also work, but the component would have to be instantiated at least once. It makes more sense to have a single object for your global, anyway.
handrailOptions = {
step: 1
};
// Make it responsive
new Vue({data: handrailOptions});
var checkoutDialog = new Vue({
el: '#dialog-checkout',
computed: {
newHandrailStep() {
console.log('computed 1', handrailOptions.step);
return handrailOptions.step;
}
},
watch: {
newHandrailStep(test) {
console.log('watched 1');
}
}
});
new Vue({
el: '#dialog-estimate-questions',
computed: {
newHandrailStep() {
console.log('computed 2', handrailOptions.step);
return handrailOptions.step;
}
},
watch: {
newHandrailStep(test) {
console.log('watched 2');
}
}
});
setInterval(() => ++handrailOptions.step, 1500);
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="dialog-estimate-questions">
Main step {{newHandrailStep}}
</div>
<div id="dialog-checkout">
CD step {{newHandrailStep}}
</div>