Showing a gray backdrop with a mixin - javascript

I have a small window that I'm inserting into my page (and removing when the page is closed). I want a grayed-out background behind this window, as on dialogs. So I thought I'd use paper-dialog-behavior or iron-overlay-behavior as a mixin, and set this.withBackdrop = true in my ready() method. However, when I add ...extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) or ...extends Polymer.mixinBehaviors([Polymer.PaperDialogBehaviorImpl], Polymer.Element) to this element, it never appears.
I tired .open() like on a dialog and was told that it's undefined. I can trace my element loading in DevTools, and no errors print in the console, but it never appears on the screen.
You can see what I'm going for at this pen: https://codepen.io/johnthad/pen/zRLMpe
If I swap the class declarations of MyChild for the one with the mixin, the child loads but never displays.

You need to call open of MyChild after append:
_doTap(e) {
. . .
this.$.placeholder.appendChild(this.mychild);
this.mychild.open()
}
Then add withBackdrop property to true in MyChild component:
static get properties() {
return {
withBackdrop: {
type: Boolean,
value: true
}
}
}
Here you'll find working code.

Related

Vue JS computed property and jquery

I want to turn an element invisible when a (bootstrap) tab is active.
So, the way I'm trying to do it is creating a computed property that returns if the tab is active using jquery this way:
computed: {
IsAbainteracoesAtiva: function () {
return ($('div.active')[1].id == "interacoes")
}
}
But this computed property always returns false, even if it's true. My guess is that Vue is not updating it.
Any sugestions? I'm opened to other solutions too.
I assume the bootstrap tap is active with a click, otherwise correct me, and I'll come back with another answer.
// Simulate tab
<tab #click="toggleTabState"></tab>
// Simulate bootstrap element to show
<div v-if="tabIsOpen"></div>
export default {
data() {
return {
tabIsOpen: false
}
},
methods: {
toggleTabState() {
this.tabIsOpen = !this.tabIsOpen
}
}
}
Gonna need some of your HTML to see what else is going on. Are you iterating through a lot of elements with a v-for?

hiding angular-modal-gallery and trigger using service only

I want to hide the clickable preview icons on an angular-modal-gallery running on an angular 5 SPA component. As the modal is going to be triggered through a bootstrap button.
I have the following in my component.html;
<ks-modal-gallery [id]="1" [modalImages]="images"></ks-modal-gallery>
From inspecting I can see that it generates a div with the class plain-container. I have tried overriding this class in the component.css;
.plain-container {
display:none !important; }
However, this isn't been applied (I assume because of the point of html is being generated).
Can anyone help find a solution to this?
You can add the CSS globally in your style.css file. It will surely work.
add boolean isGalleryOpen = false, and set attr hidden with it.
isGalleryOpen = false;
open method
openModalViaService(id: number | undefined, index: number) {
this.isGalleryOpen = true;
this.galleryService.openGallery(id, index);
}
In HTML turn boolean false on close event.
<ks-modal-gallery [attr.hidden]="isGalleryOpen === true ? null : 'true'"
(close)="isGalleryOpen=false;" [id]="1" [modalImages]="images"></ks-modal-gallery>

Angular sub-component style does not change until next ngAfterViewChecked

Angular version: 5.0.3
I have put my code here.
I have made a custom inkbar module, and imported it to the app. I use
<lib-inkbar [nextEle]="inkbarSubject" [color]="inkbarColor"></lib-inkbar>
...to install it in my app.component.
The inkbar under the navigation menu tabs is expected to automatically go in position where router link is currently active. (And this is done by getting the width and offset left of a given element, and move to it.) For example, at the beginning, "/index" is active, so "Index" tab has a class "active", and inkbar should translate under it.
I have achieved this by putting the code in Angular's ngAfterViewChecked life-cycle. inkbarMove() tells inkbar where to go by telling it the element (i.e. the active nav tab).
ngAfterViewChecked() {
this.navMenus = this.ul.nativeElement.children;
let actMenu = this.getAvtiveMenu();
if (actMenu) {
this.inkbarMove(actMenu);
}
}
inkbarMove = (ele: HTMLBaseElement | MouseEvent) => {
if (ele instanceof MouseEvent) {
ele = ele.target as HTMLBaseElement;
}
this.inkbarSubject.next(ele);
};
However, this works only after next ngAfterViewChecked() fires. When page first loads, the inkbar will stay {width: 0px; left: 0px} style, as initial default value, no matter how many times I tell it to "Move" (I even wrote a for-loop, which made my browser crash, but still didn't work lol). It will only starts to move after I press the button and manually call ngAfterViewChecked() again.
Does someone know what is going on here?

Can't find element using UI hash in Marionette Layout

I'm not sure why I can't get the button element using my UI hash. This is what my Layout looks like:
Layout: App.Base.Objects.BaseLayout.extend({
// Rest of the code left out for brevity
ui: {
btnSave: "#btnSave"
},
events: {
"click #ui.btnSave": "onSave"
},
onInitialize: function () {
this.listenTo(App.vent, "DisableSaveButton", function(val) {
this.disableSaveButton(val);
},this);
},
disableSaveButton: function () {
this.ui.btnSave.prop("disabled",val).toggleClass("ui-state-disabled",val);
},
onSave: function () {
alert("saved!");
}
})
In VS2013, when my breakpoint hits the line inside disableSaveButton method, I entered $("#btnSave") into the Watch window and I was able to get the element back. I could tell because it had a length of 1. From this, I know the button is rendered. However, if I enter this.ui.btnSave into the Watch window, I would get an element with length of 0.
My BaseLayout object is basically a custom object extended from Marionette.Layout
Marionette version: 1.8.8
Any ideas why I can't find the button element using this.ui.btnSave?
Thanks in advance!
Got some help from a coworker and the issue might be because the element is out of scope. Basically, inside the Layout object, 'this' does not contain the element. We were able replace 'this.ui.btnSave' with '$("#btnSave",this.buttonset.el)' and that works fine. buttonset is the region that actually contains the html element.
This seems like an inconsistency because even though the ui hash didn't work, the click event utilizing the ui hash did work.
UPDATE 6/3/2015:
Another coworker of mine provided a better solution. Basically, in my Layout I use a display function to display my view. It looks something like this:
Layout: App.Base.Objects.BaseLayout.extend({
// Rest of the code left out for brevity
display: function() {
$(this.buttonset.el).html(_.template($("#buttonset-view").html(), {"viewType": viewType}));
}
})
Basically, I'm saying to set the html of my region, which is this.buttonset.el, to my template's html. As of now, my layout doesn't know any of the elements inside the region. It just contains a region which displays the elements. So there is some sort of disconnect between my layout and the elements in my region.
The correct solution, as opposed to my earlier workaround, is to simply add the following line of code at the end:
this.bindUIElements();
From Marionette Annotated Source:
This method binds the elements specified in the “ui” hash inside the
view’s code with the associated jQuery selectors.
So this final code looks like this:
Layout: App.Base.Objects.BaseLayout.extend({
// Rest of the code left out for brevity
display: function() {
$(this.buttonset.el).html(_.template($("#buttonset-view").html(), {"viewType": viewType}));
this.bindUIElements();
}
})
With this, I was able to finally able to retrieve my element using this.ui.btnSave.

How can I check to see if a Dojo dialog is loaded?

I am running a function that needs to close a Dojo dialog if it is loaded. How do I check if a dojo dialog is running? Do I use pure JavaScript and check by id if it is undefined?
if (dijit.byId("blah") !== undefined) {
destroyRecursive dijit;
}
Or do I use a property of the dialog object like:
isFocusable method
isLoaded property
Dialog provides two properties you might want to check: isLoaded and open. By digging the code you'll find the following descriptions:
open: True if Dialog is currently displayed on screen.
isLoaded: True if the ContentPane has data in it, either specified during initialization (via href or inline content), or set via attr('content', ...) / attr('href', ...) False if it doesn't have any content, or if ContentPane is still in the process of downloading href.
So, you could just:
var dialog = dijit.byId("blah");
if( dialog.open ) {
dialog.destroy();
}
Do you want to hide it or destroy it?
If you just want to show/hide it you can do the following:
var dialog = dijit.byId('blah');
if (dialog) {
if (dialog.open) {
dialog.hide();
}
else {
dialog.show();
}
}
If you wanted to destory it to free up memory:
var dialog = dijit.byId('blah');
dialog.destory();
I think destroy is recursive since it calls its parent destroy method and one of its parents is dijit.layout.ContentPane.

Categories

Resources