We Keep Coding

Ember.js - extending a Bootstrap plugin's function

I am trying to extend the hide method of the Bootstrap modal plugin. I have many modals throughout the application and I would like to have a blanket solution to close the modal when a user hits the browser back button (instead of having to add the function to each modal instance in the application)
I know in Ember JS, you can override a component by importing it, calling the super method and adding your own customization. How can I do this with a Bootstrap modal plugin? I am not familiar with how to import the node_modules file in this scenario.
Essentially, what I want to do is this as a solution for all modals in the application:
$(window).on('popstate', function() {
$('.modal').modal('hide');
});

I think every modal that is open in bootstrap has the modal-open class. If so, you can do this with jQuery. You can put this code in an instance initializer, or any place that runs before your application.
import $ from 'jQuery';
//...
$(window).on('popstate', function() {
$('.modal-open').each(function() {
$(this).modal('hide');
});
});
This doesn't have to do with Ember, just jQuery and Bootstrap. Make sure this code is not run if using Fastboot.

React production build styling not loading on refresh

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!

Conflict between requireJS and LoadJS

Background:
I'm currently using Webpack to bundle the newly developed components on top of an existing system which uses RequireJS to load the legacy components.
Issue:
I'm trying to import JS libraries dynamically with LoadJS to increase the performance of the platform. However, it's conflicting with RequireJS.
I've used jQuery $.getScript() and $scriptjs; both results in the same error.
$(...).Modal is not a function.
My JS is as follows:
$(document).ready(function(){
$(document).on("click", ".js-my-btn", function(){
loadjs("https://unpkg.com/bootstrap#4.1.0/dist/js/bootstrap.min.js", () => {
$('#myModal').modal('show');
});
});
})
JsFiddle link without RequireJS
Libraries loaded:
jQuery
LoadJS
Upon clicking on the button, the modal is displayed. It works fine.
JsFiddle link with RequireJS
Libraries loaded:
jQuery
LoadJS
RequireJS
Upon clicking on the button, the modal is not displayed. It throws an error.
Note: Loading RequireJS before LoadJS doesn't work.

Add p5js to Ember application

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

Function to check if jquery plugins are already initialized

i want to check if jquery plugins are already initialized / included (prevent dublicate resource loading) and if not i want to add the plugin by CDN or by a local source.
Anyone can help me with that Problem?
Update:
I'm currently building a custom template in drupal. In that template i'm using a slick slider for scrolling through pictures in a content gallery. I also want to use a custom module for a slideshow, which uses the slick slider too (js, css integrated in the module). So now i want to check if the slick slider of the slideshow module is already initialized, if not i want to load the slick slider js via cdn.
Hope that helps for understanding my problem.
Update 2:
Resolved the problem by using php and drupal core functions. I also found a solution with the modernizr.js load function -> asynchronous loading.

You can check and detect the plugin using this
if(jQuery().pluginName) {
//run plugin
}

You can try this:
if (!jQuery.fn.plugin) {
jQuery.getScript('http://url/to/the/script');
}

You can check for typeof jQuery. if undefined, load from CDN:
if (typeof jQuery == 'undefined') {
{
//load from CDN
}
or
if(!window.jQuery)
{
//load from CDN
}