Vue JS computed property and jquery - javascript

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?

Related

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>

Showing a gray backdrop with a mixin

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.

Ionic Dragula, setOptions mirrorContainer is null. Loading before DOM

I have an ionic project that is using dragula, but I'm having an issue setting the mirrorContainer. I'd like to make the container something other than the default body because I believe that's what is attributing to a strange scrolling problem I'm having while dragging.
I've created my bag in html
<div class="step-container--line" [dragula]='"bag"' id="mirror">
<div class="card">
....
</div>
Then in the JS, I've initialized dragula in the constructor and started to set its options.
constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('bag', {
moves: function (el, container, handle) {
return handle.className === 'step__menu__button';
},
direction: 'vertical',
//mirrorContainer: document.getElementById('mirror')
});
dragulaService.drag.subscribe((value) => {
this.onDrag(value.slice(1));
});
dragulaService.drop.subscribe((value) => {
this.onDrop(value.slice(1));
});
}
The problem is; when I add mirrorContainer: document.getElementById('mirror') to the setOptions, my mirror container comes back as null. I'm assuming because this loads before the DOM does and there's no instance of #mirror yet.
If I moved everything down into ionViewDidLoad(){}, I get an error stating that the bag 'bag' already exists.
I'm not sure the best way to initialize or add to the options after the DOM loads. Any ideas?
I know I'm late to the party but I had the same issue using Angular 11.
After your element is in the DOM and is available you can do this.
ionViewDidLoad() {
(this.dragulaService as any).groups['bag'].options.mirrorContainer = document.getElementById('mirror');
}

Dojo Widget need event when everything is "ready"

i have an custom widget in dojo. My Problem is to check some kind of access rules wich are passed to the widget.
if check the rules after the widget is fully loaded everything works fine. But i have to remove some text and buttons before it is displayed.
I've tryted the startup, and postcreate hook (-: is there something like "aftercreate" ?
The first solution I can think of is to begin with hiding the restricted elements and then remove them.
In css:
.hidden{ display: none }
In widget's template for all permissions-sensitive elements:
<div class="${permissionsSensitiveElementsClass}">...</div>
In widget's code:
permissionsSensitiveElementsClass: "",
postMixInProperties: function(){
if(!this.hasPermissions()){
this.permissionsSensitiveElementsClass = "hidden";
}
this.inherited(arguments);
},
startup: function(){
// remove elements if necessary
},
hasPermissions: function(){
// permissions check
},
The final rendering function would be startup(). For widgets which are initially hidden, startup gets called automatically when call is made to show(). dijit.layout.Container has 'addChild(widget)' functionality, which will fire widget.startup() when a/multiple child(ren) are added.
You would benifit from:
http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/
Widget lifecycle:
([widget].constructor());
[widget].postscript();
[widget].create();
[widget].postMixinProperties();
[widget].buildRendering();
[widget].postCreate(); // this is the most important one!
[widget].startup();
The true answer to your question lies here;
dojo.declare("mydijit", ["dijit/_Widget"], {
startup: function() {
// call superclass functionality before applying hide on specific elements
this.inherited(arguments);
if(foo) dojo.destroy(this.fooNode);
if(bar) dojo.destroy(this.barNode);
},
onShow: function() {
if(foo.changed || bar.changed) {
// act upon it
}
}
}

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