How to integrate Swiper and Laravel using Laravel Mix - css

I don't know whether this is allowed or not but I have a two-part question. How can I integrate swiper.js and swiper.min.css with Laravel? I'm using Laravel Mix to compile JS and SASS files. My second question is, how can I call an "onClick" event function in Laravel? I'm using Laravel 7.3.1.
app.js
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: 'true',
centeredSlides: 'true',
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
});
Blade
{{ asset('public/js/app.js') }}
{{ asset('public/css/swiper.min.css' )}}
For the second part of the question – I want to call the following function in my Blade/view.
function close() {
document.getElementByClassName("media-icons").style.width = "0";
document.getElementByID("hide-icon-panel").style.display = "none";
document.getElementByID("show-icon-panel").style.display = "inline-block";
}
Included the function in my Blade like in the following way:
<button id="hide-icons" onclick="w3_close();"><i class="left"></i>.
</button>
I tried all of the above and nothing seems to work. Please help, your assistance will be very much helpful.

import Swiper from './swiper.min.js'
const swiper = new Swiper(...)

Related

How I can apply styling to active slide in react-image-gallery?

I want to add custom styling to the slides and gallery control buttons in react-image-gallery But I am confused how to do this. I have searched the assets on google and tried to do it on my own but I am unable to apply custom styling on it.
This is the code which I have applied till now:
import 'react-image-gallery/styles/css/image-gallery.css';
import ImageGallery from 'react-image-gallery';
const GalleryComponent = (props)=>{
const properties = {
thumbnailPosition: 'left',
showFullscreenButton: false,
useBrowserFullscreen: false,
showPlayButton: false,
items: [
{
original: "https://placeimg.com/640/480/any/1",
thumbnail: "https://placeimg.com/250/150/any/1"
},
{
original: "https://placeimg.com/640/480/any/2",
thumbnail: "https://placeimg.com/250/150/any/2"
},
{
original: "https://placeimg.com/640/480/any/3",
thumbnail: "https://placeimg.com/250/150/any/3"
}
]
};
return (
<ImageGallery {...properties} />
)
}
Currently achived this :
Slider i wanted in actual:
So kindly tell me a way to target the required components in react-image-gallery to add styling to them.
Thanks!

It is possible to using flowbite (or any UI component libraries) for tailwindCSS on angular 12?

I'm trying to use tailwindCSS on angular 12, and it's works fine.
My question is about using flowbite or tailwindui for UI component - is it support on angular too?
because i'm trying to flow the instructions of flowbite and it's not working
https://flowbite.com/docs/getting-started/quickstart/
the css work's fine but not the script.
For example I try to build a dropdowns like this - and it's not working (i'm not getting any error on console)
https://flowbite.com/docs/components/dropdowns/#
What is wrong ?
Having the same issue, tried:
Using scripts:["../path/to/#themesberg/flowbite/dist/flowbite.bundle.js"] in angular.json
Adding <script src="../path/to/#themesberg/flowbite/dist/flowbite.bundle.js"></script> on the head of index.hmtl
Update:
Adding import '#themesberg/flowbite'; on either the main.ts or polyfills.ts correctly exports the functions to the vendor.js or polyfills.js respectfully. But even though they are present, the event listeners are not working:
() => {
const toggleCollapse = (elementId, show = true) => {
const collapseEl = document.getElementById(elementId);
if (show) {
collapseEl.classList.remove('hidden');
} else {
collapseEl.classList.add('hidden');
}
}; // Toggle target elements using [data-collapse-toggle]
document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
collapseToggleEl.addEventListener('click', function () {
toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
});
});
window.toggleCollapse = toggleCollapse;
/***/
},

Hide Docs tab in Storybook

I want to create stories using both Typescript and MDX, therefore I have in my main.js:
module.exports = {
stories: ['../src/**/*.stories.(mdx|ts)'],
addons: ['#storybook/addon-docs', 'storybook-addon-preview']
};
However I don't want to have "Docs" tab next to "Canvas". How do I remove it? Without '#storybook/addon-docs' MDX story is not displayed.
Put this in preview.js:
export const parameters = {
previewTabs: {
'storybook/docs/panel': {
hidden: true
}
}
};
Used in Storybook version 6.0.x
I am currently using #storybook/angular#6.0.21 and the previous answer unfortunately did not work for me. I was able to find a solution in the storybook DocsPage documentation.
The relevant section:
You can replace DocsPage at any level by overriding the docs.page parameter:
- With null to remove docs
- With MDX docs
- With a custom React component
I was able to completely remove the DocsPage for a single story like this:
export const myStory = () => ({
moduleMetadata: MODULE_METADATA,
component: MyComponent,
});
myStory.parameters = {
docs: { page: null },
};

How can I use CSS3DRenderer in a-frame?

I am trying to reproduce this example in a-frame:
https://threejs.org/examples/?q=you#css3d_youtube
According to the code is using CSS3DRenderer but I couldn't find how to use it with a-frame. This is my try
AFRAME.registerComponent('embed-html', {
schema: {
targetUrl: {type: 'string', default: 'https://www.google.com/'}
},
init: function () {
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
this.el.sceneEl.appendChild( renderer.domElement );
},
});
But my scene is stuck after that.
There are better options for styling in a-frame, but here is a CSS-Simulated solution.
However I personally didn't use this and write my own custom object

ReactTransitionGroup Lower Level API

Im really new to React and animation and I am trying to animate my components with ReactTransitionGroup and I am not quite sure how to do it. None of the ReactTransitionGroup lifecycle methods (componentWillAppear or ComponentDidAppear) are being called.
var React = require('react');
var ReactTransitionGroup = require('react-addons-transition-group');
var App = React.createClass({
render: function(){
return (
<div>
<h3>Type in the box below to watch it change color.</h3>
<div>
<ReactTransitionGroup component={List}>
{this.props.children}
</ReactTransitionGroup>
</div>
</div>
);
}
});
var List = React.createClass({
componentWillAppear: function(callback){
console.log('componentWillAppear');
setTimeout(callback, 1);
},
componentDidAppear: function(){
console.log('componentDidAppear');
},
componentWillLeave: function(callback){
console.log('componentWillLeave');
},
componentDidLeave: function(){
console.log('componentWillLeave');
},
render: function(){
return <div>{this.props.children}</div>
}
});
module.exports = App;
why aren't these ReactTransitionGroup hooks being called?? Please help.
Your problem is your attaching the life cycle methods to your custom component which is the Parent of the animating children.
From the docs:
When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
So it's the {this.props.children} which are expecting the life cycle methods, not List.
children need a key
change:
{this.props.children}
to:
{React.cloneElement(this.props.children, {
key: Math.random()
})}
Do your testing rendering hard coded content in List, try:
render: function(){
return Hello world
}
Also, ReactTransitionGroup takes propeties, you might be looking for an "appear" transition like documented here: https://facebook.github.io/react/docs/animation.html#getting-started

Resources