I am trying to figure out how to dynamically change a size of ngDialog that I use for my popups. The dialog fires event when it's been opened:
$scope.$on('ngDialog.opened', function (e, $dialog) {
dialogReady($dialog);
});
I tried all of these:
function dialogReady(caseEditorWindow) {
caseEditorWindow.css({ 'width' : '1350px' });
caseEditorWindow.width(1350);
caseEditorWindow.css('width', '1350px' });
}
Nothing takes any effect.
It only gets sized if I use a class like this:
<style>
.ngdialog.dialogcaseeditor .ngdialog-content
{
width : 1350px;
height: 810px;
margin-top:-100px;
padding-top:10px;
}
</style>
at the time of creating the dialog:
ngDialog.open({
template: 'caseEditor.html',
controller: 'caseEditorController',
className: 'ngdialog-theme-default dialogcaseeditor',
closeByDocument: false,
disableAnimation: true,
scope: $scope
data: row
})
Any idea?
Thanks
var dialog = ngDialog.open(); //always return object {id: 'div attr id'};
$('#'+ dialog.id).css('width', '100px'); //You can get outer div like this
Althrough, not so good using jquery in angular controller, but it works (the only way).
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'd like to have an introductory hint in EnjoyHint that the user can move on from by simply pressing "Next". So no arrow to an element. Is this possible?
HTML
<div class="hidden"></div>
JS
var enjoyhint_script_steps = [
{
'click .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
showSkip: false,
showNext: true,
margin: 0,
onBeforeStart: function () {
document.getElementsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'none';
}
},
{
onBeforeStart: function () {
document.getElmentsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'block';
},
...rest of step 2...
}
...rest of steps...
];
Explanation
<div class="hidden"></div> is an empty element for EnjoyHint to target.
'click .hidden': '...description...' targets the empty element and adds a description.
showSkip: false hides the skip button.
showNext: true shows the next button.
margin: 0 hides the area highlighted by EnjoyHint.
onBeforeStart: function () {...} is used to hide the arrow in the first step and show it in the second step.
var enjoyhint_script_steps = [
{
'next .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
showSkip: false,
showNext: true,
onBeforeStart: function () {
$('#enjoyhint_arrpw_line').hide();
}
},
{
...rest of step 2...
}
...rest of steps...
];
Explanation
There is a better solution then target to a hidden div, when assigning the 'click' event.
The 'click' event expects the user to click on the highlithed element in order to move on to the next step and when your element is hidden you cannot click on it.
In order to have 'Next' button by default and target the user to click on it you need to use the 'next' event.
The onBeforeStart gives you the option to run any function you want just before this specific hint starts, so you can run:
function () {
$('#enjoyhint_arrpw_line').hide();
}
Inside the onBeforeStart.
When you do it like that you can highlight any element on page without an arrow and have a mandatory 'Next' button.
You can also write it that way if it's more readable:
var enjoyhint_script_steps = [
{
event: 'next',
selector: '.hidden', // or any element you want to highlight
description: '<h2>Introduction</h2><p>This is an introductory sentence, which
tells you a bit about everything.'</p>
showSkip: false,
showNext: true, // not necessary
onBeforeStart: function () {
$('#enjoyhint_arrpw_line').hide();
}
},
{
...rest of step 2...
}
...rest of steps...
];
You can make div class="hidden" and make arrow transparent
let enjoyhint_script_steps = [
{
'click .hidden': '<h2>Hello</h2>',
arrowColor:'transparent'
}
];
I have a div that is conditionally binded to a class in vueJS. The formula for my computed variable uses Screen.width. It seems to work correctly when first loading, but if I change the size of the screen it doesn't rebind with the new screen size, unless I refresh the page. Is there a way I can get my conditionally binding to honor the change in screen?
<div class="div_1" v-bind:class="{ horizontalScroll : showScroll }"/>
showScroll(){
return this.events.length*225>(screen.width*.84);
}
If you wanna do it this way, you will probably have to register a 'resize' listener. Your code should look something like this:
data: () => ({
windowWidth: document.documentElement.clientWidth,
windowHeight: document.documentElement.clientHeight
}),
mounted() {
window.addEventListener('resize', this.setDimensions);
},
methods: {
setDimensions() {
this.windowWidth = document.documentElement.clientWidth;
this.windowHeight = document.documentElement.clientHeight;
},
}
and don't forget to remove it:
beforeDestroy() {
window.removeEventListener('resize', this.setDimensions);
},
In a simplified scenario, I have two UI-Router states and want different body background colors for them.
Ideally, I would thus like to do the following:
<body ng-class="background" ui-view>
</body>
and then in the controller for the states set the background classes (which might be dynamic, meaning: calculated in the controller):
stateHelperProvider
.state({
name: 'a',
url: '/a',
templateUrl: 'views/a.html',
controller: function ($scope) {
$scope.background = 'bg1';
}
})
.state({
name: 'b',
url: '/b',
templateUrl: 'views/b.html',
controller: function ($scope) {
$scope.background = 'bg2';
}
});
But putting the ui-view attribute on the body deletes it. So I have to put the ui-view attribute on a div inside the body.
<body>
<div ui-view></div>
</body>
How can I now control the body background?
I am aware of various hacks (e.g. access the class DOM property of body in the onEnter function of UI-Router, ...), but is there a nice way to do that?
Or is it all about making the div[ui-view] full height (which is not trivial) and setting the background on this element to mimick how applying a background on the body takes up the full viewport?
So to sum up my learnings, there are two ways to do it. Both require the $state service to be in the $rootScope. The elegance of this can be disputed, but I will go for this solution.
If the background classes are depending on the state only, add them to the state's custom data:
Example code:
.state({
...,
data: {
bodyClass: 'bg1'
}
});
Then, on the body, put an ng-class and reference the current state's data:
<body ng-class="$state.current.data.bodyClass">
If the background classes are (besides the state) depending on something else (like a state parameter or a service, ...), use the state's resolve mechanism:
Example code:
.state({
...,
resolve: {
bodyClass: function($stateParams) {
// do some calculation
return ...
}
}
});
Then, on the body, put an ng-class and reference the resolved class name through $state.$current.locals.globals:
<body ng-class="$state.$current.locals.globals.bodyClass">
In both cases, bodyClass can anything that is valid for the ng-class directive.
Probably not accurate, but maybe could you just change your body background-color directly in the controller ?
stateHelperProvider
.state({
name: 'a',
url: '/a',
templateUrl: 'views/a.html',
controller: function ($scope) {
document.body.style.background = 'bg1';
}
})
.state({
name: 'b',
url: '/b',
templateUrl: 'views/b.html',
controller: function ($scope) {
document.body.style.background = 'bg2';
}
});
Or in this case just add/remove CSS classes to the body?
Good Luck'
I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.
Now I need help to make this button look like just regular menu item:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
// maybe to add some css class here
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
buttonConfig: {
style: {
background: "#f1f1f1",
border: 0
}
},
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', item.getValue());
}
}
});
Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.