I'm trying to incorporate the p5js javascript library into my Ember.js app. I want the following p5js example to appear on the template:
https://p5js.org/examples/sound-record-save-audio.html
I've included the cdn script in my index.html file:
I dont know how/where in the Ember run loop to put the javascript so it runs and loads when the page loads
I would suggest making a component, putting the component in whatever template you're rendering (could be application.hbs if you only have one page) and putting the Javascript into the component's didInsertElement method.
Along with that, I would place the p5 canvas inside your component's own Element, so that the component behaves normally (it's weird for a component to render things outside its own Element, and you'd want them to be cleaned up properly if you navigate away to some other template). The p5 docs say how to position the canvas.
In your component it would look like:
export default Component.extend({
didInsertElement() {
createCanvas(400,400);
canvas.parent(this.element);
background(200);
fill(0);
text('Enable mic and click the mouse to begin recording', 20, 20);
...etc...
}
})
```
This answer applies for Ember app versions 1.13 onward and was written as of 3.x. Versions of Ember < 3.x will need to use the older import syntax in the component boilerplate.
The most common place for code that should run after a page loads is the didInsertElement hook:
import Component from '#ember/component';
export default Component.extend({
didInsertElement() {
this._super(...arguments);
console.log(p5) // this should print a function to the console
}
});
Also check out didRender, which might be a better fit for your use case.
You can read more about the uses of different component lifecycle hooks in The Guides
Related
I recently built a website that uses a router system to load each page via ajax. The site is compiled using webpack and is structured as ES6 JavaScript modules. I am using some third-party jQuery plugins that only work if you refresh the page.
My question is how do I reinitialize or load third-party jQuery plugins and/or scripts using ES6 JS after an ajax page load?
For example, I am using the Elevate Zoom plugin to add an image zoom on images. When I navigate to another page on the site that uses this, the zoom breaks and only works again when re-loading the page.
$("#img_01").elevateZoom();
Something like the below?
import { component } from 'picoapp';
// import elevate zoom
// import jQuery
export default component(() => {
// reinitialize plugin here?
//$("#img_01").elevateZoom();
})
Yeah, so it seems to have worked. Dah. I guess I didn't think it would using jQuery inside ES6 so thanks for the gentle nudging!
I should've said I'm very new to ES6 and the world of Webpack.
import { component } from 'picoapp';
import $ from "jquery";
import zoom from '../lib/elevatezoom.js'
export default component(() => {
$(".zoom").elevateZoom({
zoomType: "inner",
cursor: "zoom-in"
});
})
I have a single page React website. Everything works fine in development mode. When I build it and run from the build folder, I encounter this one error:
If I visit any page, everything loads fine. However when I refresh the page, the styling doesn't get applied to certain aspects of the page.
Here is an example view file:
// Dependencies
import React from 'react';
...
// Style
import '../Styles/Landing.css';
...
// Images
import image from '../Images/landing/image.jpg';
// View
export default () => (
<div className="landing-page">
...
</div>
);
I'm new to React, and re-working an existing site, learning as I go. Is there a reason why the styling bugs out on refresh?
Any help would be deeply appreciated!
I want to include a js widget in my vue application.
After trying a lot of random solutions, I came up with "my own", that is just importing it outside of vue, in the html head, then moving it with vue dom bindings to where I want it to be.
The problem is, I don't know if that is what I should be doing, in html I would just put the script tag where I want the external component to be and it would work fine.
The standard way is indeed to create a custom Vue component.
<template>
<div></div>
</template>
<script>
import Widget from 'widget.js'
export default {
name: 'my-widget',
mounted(){
// assume that the widget is a constructor
// that requires an element to be bound to
new Widget(this.$el)
}
}
</script>
And then you can import this component in another one and use it like <my-widget></my-widget>
According to the Vue.js API documentation using nextTick() inside mounted() will guarantee that the entire view has rendered, but I am not sure what they mean by "rendered" in this case.
I am trying to integrate the intro.js library intro Vue.js, but if I use put introJs().start() inside of nextTick like the following:
mounted: function () {
this.$nextTick(function () {
// Code that supposedly will run only after the
// entire view has been rendered
introJs().start()
})
}
it seems like the DOM is still not fully ready and introJs fails to show all intro steps successfully.
Reproduction link
How can I know that everything is truly ready? Is there any other way to start introJs within Vue.js?
The problem is that you are using v-if. If the condition is false, the html element will not be in document, meaning introjs can't find it. In the browser dev tools, if you look at the component when the v-if condition is false, you would see an html comment, <!-- -->.
The easy fix is to use v-show. This way the element will be in document, introjs can find it, and the user still won't see it because v-show toggles the display css property.
I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:
I've am using vue-router and the following structure for the main app template:
<customNav></customNav>
<router-view></router-view>
The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.
I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.
How would I solve this problem?
You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
I think you can change this variable in two ways:
Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.