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
Related
When working with Embedded Zoom Component, the Zoom SDK return an element which you need to place it inside an html element
the problem is how to resize and position the returned component inside my code after rendering
const client = ZoomMtgEmbedded.createClient();
function getSignature(e) {
e.preventDefault();
// ... some code to get the signature
startMeetingZoomMtgEmbedded(response.signature);
}
function startMeetingZoomMtgEmbedded(signature) {
let meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
}
}
]
}
}
});
client.join({
apiKey: apiKey,
signature: signature,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
success: (success) => {
console.log('success');
},
error: (error) => {
console.log(error);
}
});
}
return (
<div className="App">
<main>
<h1>Zoom Meeting SDK Sample React</h1>
{/* For Component View */}
<div id="meetingSDKElement"></div>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
So my question is how to modify the style and the position of the component before or after the rendering of the code by the Zoom SDK.
For Resizing , You will find details in the following documentation link :
Zoom Documentation for resizing component view
For Positioning, You will find details in the following documentation link :
Zoom Documentation for positioning component view
The only way to resize camera view is editing #ZOOM_WEB_SDK_SELF_VIDEO id. So, you have to edit other classes also to make buttons, containers and etc resize like camera view does, but it is totally buggy and i don't think it is a good idea pay all this effort to a workaround, besides that, in next versions maybe they bring built in properties to do this job.
Just for example, this is the result when you change #ZOOM_WEB_SDK_SELF_VIDEO:
#ZOOM_WEB_SDK_SELF_VIDEO {
width: 720%;
height: 480%;
}
In general way, you can modify the style and position of your component by using reactive CSS styling.
In zoom way you can use (zoom web meeting SDK)
(a) "popper: {}" properties for positioning elements
(b) "viewSizes: {}" properties for default meeting canvas size
(c) for styling use "id" and "class" for reactive CSS styling
popper use:
client.init({
...
customize: {
video: {
popper: {
anchorElement: meetingSDKElement,
placement: 'top'
}
},
}
...
})
viewSizes use:
client.init({
...
customize: {
video: {
viewSizes: {
default: {
width: 1000,
height: 600,
}
}
},
}
...
})
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 },
};
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(...)
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
Has somebody found a good way to animate state transitions?
The router immediately removes the view from the DOM. The problem with that is that I can't defer that until the end of the animation. Note: I'm using v1.0.0-pre.4.
Billy's Billing just released an Ember module that supports animated transitions.
I'll expand on Lesyk's answer. If you need to apply it to multiple views in a DRY way, you can create a customization class like this:
App.CrossfadeView = {
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250);
}
};
And then in your code you apply it on your various view classes. As Ember depends on jQuery you can use pretty much any jQuery animation.
App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);
I know this is pretty old, but the best solution for this context-specific animation today is probably ember liquid fire.
It allows you to do things like this in a transition file:
export default function(){
this.transition(
this.fromRoute('people.index'),
this.toRoute('people.detail'),
this.use('toLeft'),
this.reverse('toRight')
);
};
Ran into this same requirement on my app. Tried Ember Animated Outlet, but didn't give the granularity I needed (element specific animations).
The solution that worked for me was as follows --
Change linkTo to be an action
{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}
Becomes...
<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>
Create Method for goToTodos in current controller
App.IndexController = Ember.Controller.extend({
goToTodos: function(){
// Get Current 'this' (for lack of a better solution, as it's late)
var holdThis = this;
// Do Element Specific Animation Here
$('#something').hide(500, function(){
// Transition to New Template
holdThis.transitionToRoute('todos');
});
}
});
Finally -- To animate in elements on the Todos Template, use didInsertElement on the view
App.TodosView = Ember.View.extend({
didInsertElement: function(){
// Hide Everything
this.$().hide();
// Do Element Specific Animations Here
$('#something_else').fadeIn(500);
}
});
So far, this is the most elegant solution I've found for element specific animations on transition. If there is anything better, would love to hear!
I've found another drop-in solution that implements animations in Views: ember-animate
Example:
App.ExampleView = Ember.View.extend({
willAnimateIn : function () {
this.$().css("opacity", 0);
},
animateIn : function (done) {
this.$().fadeTo(500, 1, done);
},
animateOut : function (done) {
this.$().fadeTo(500, 0, done);
}
}
Demo: author's personal website
App.SomeView = Ember.View.extend({
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250)
}
});