I am using OneUI which is basically just an extension of the dojo didjit widgets.
I need to put a widget inside a widget.
I am using a div with data-dojo-type="dojo.store.Memory".
I am then setting various elements of this using data-dojo-props.
So for example I have some spans and links set within the data-dojo-props.
These are work and display fine.
I am now trying to add a div which itself is a widget. So I've added the div and within this div I am setting the data-dojo-type as a HoverHelpToolTip and setting some other elements such as an onmouseover and some data-dojo-props.
Essentially what should happen is that a hover help tooltip should pop up on mouse over - but it isn't working at all.
So I suppose my question here is how do I correctly nest one widget within another?
Thanks
Sample Code
I am declaring it as follows...
<div data-dojo-id="store1819454249457680384" data-dojo-type="dojo.store.Memory" id="store1819454249457680384" data-dojo-props="data:[{"Name":"<!--o3nv--> ","id":1,"gender":"Female","ActionColumn":"<span class=\"actions\" ><a href=\"...\" onclick=\"...\" title=\"Click here to edit this item\" >Edit<\/a><span class=\"linksDivider\" > | <\/span><a href=\"#\" onclick=\"...\" title=\"Click here to delete this item\" >Delete<\/a><\/span>","Person.firstName":"werrwewre",
<!-- This is the start of the code in question -->
"HelpColumn":"<div class=\"hiddenHelpDialog\" data-dojo- props=\"forceFocus:true,connectId:['helpAnchor_rowHelp10309939']\" data-dojo- type=\"idx\/oneui\/HoverHelpTooltip\" id=\"rowHelp10309939\" style=\"text-align: left; position:relative; display:none\" widgetid=\"rowHelp10309939\" ><div class=\"helpDivDialog\" ><p class=\"helpFieldHeadingDialog\" >\u00a0<\/p><p class=\"helpDescriptionTextDialog\" >BLAH BLAH BLAH BLAH<\/p><\/div><\/div><a class=\"openHelpLink openHelpLinkDisplayField\" id=\"helpAnchor_rowHelp10309939\" onmouseover=\"idx.oneui.HoverHelpTooltip.defaultPosition=['above']\" ><\/a>"}]" ><!-- comment--></div>
It produces the following HTML which works correctly apart from the HoverHelpTip not appearing. The onmouseover is firing. Its alsmot like the widget isn't registered with dojo?!?!
<div widgetid="rowHelp1248193624" style="text-align: left; position:relative; display:none" id="rowHelp1248193624" data-dojo-type="idx/oneui/HoverHelpTooltip" data-dojo-props="forceFocus:true,connectId:'helpAnchor_rowHelp1248193624'" class="hiddenHelpDialog"> <div class="helpDivDialog">
<p class="helpFieldHeadingDialog"> </p>
<p class="helpDescriptionTextDialog">BLAH BLAH BLAH BLAH</p></div></div>
<a class="openHelpLink openHelpLinkDisplayField" id="helpAnchor_rowHelp1248193624" onmouseover="idx.oneui.HoverHelpTooltip.defaultPosition=['above'];">
<span class="hidden"> </span></a>
I fixed this by calling parser.instantiate(node) on the DOM Node when dojo is ready.
I dont know why but for some reason the widget was not being picked up/parsed.
I check dijit.registry and there was no mention of it and a lookup using dijit.byid returned undefined.
Explicitly instantiating the node worked however.
Anyone got any idea why????
Related
I'm using a UIKit library for a tab component that listens to a uk-tab property that targets an id. The problem with this, is that it creates the same ID for every tabbed component. I like the UI, but whoever thought of this, didn't think too far into it. I could fix it by making the id dynamic but I am having trouble calling it in the uk-tab property because it is rendering a string. Coming from a react background, I would do a string literal and some JSX, something like #item-${_id}to show #item-12, #item-13....and so on. But That's not working. How can I do this in Vue?
Here is an example of how it works
<div class="mytrigger">
<ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul id="component-tab-left" class="uk-switcher">
</div>
Here is an example of how what I need
<div class="mytrigger">
<ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
Check out the dev tools. It should be 810switcher, but instead is taking it as a string
Any ideas? Thanks
I believe what you need is:
<ul :uk-tab="`connect: #${_uid}switcher; animation: uk-animation-fade`">
Or if you prefer not to use backticks:
<ul :uk-tab="'connect: #' + _uid + 'switcher; animation: uk-animation-fade'">
The output will be:
<ul uk-tab="connect: #22switcher; animation: uk-animation-fade">
A few notes:
Using a : is short for v-bind: but don't let the name confuse you. v-bind doesn't necessarily bind anything, it just makes the attribute value a JavaScript expression.
I'd avoid using numbers at the start of element ids, I've seen that cause problems in the past. It'd be better to put the numbers at the end.
The underscore at the start of _uid indicates that it's private to Vue. There are no guarantees about what form it will take or whether it will even exist going forward.
Use data-uk-tab instead of uk-tab like below.
<div class="mytrigger">
<ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
For more information => Switcher with tabs
You can use any javascript expression in a data binding in vue. So, if you bind a string template to the attribute, it'll populate what you expect.
<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">
I have an app that is using ngx-bootstrap to show a tooltip on mouseover. I want to test that the content, which is dynamically added, shows properly. In order to do this I have a test that looks like this:
it(shows the right tooltip', fakeAsync(() => {
fixture.debugElement.query(By.directive(TooltipDirective))
.triggerEventHandler('mouseover', null);
tick();
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.tooltip-inner')).nativeElement)
.toBe('the tooltip text');
}
This results in an error that indicates that fixture.debugElement.query(By.css('.tooltip-inner')): "Cannot read property 'nativeElement' of null"
If I print out the content of fixture.debugElement.nativeElement I get this:
<div id="root1" ng-version="5.2.9">
<my-component>
<div ng-reflect-tooltip="the tooltip text">
<img src="images/test.png">
</div>
<bs-tooltip-container role="tooltip" class="tooltip in tooltip-right">
<div class="tooltip-arrow arrow"></div>
<div class="tooltip-inner">the tooltip text</div>
</bs-tooltip-container>
<my-component>
</div>
The important take away is that the html exists - it is just not accessible by the DebugElement.query.
My current solution to get the spec passing is to change the expect to:
expect(fixture.debugElement.nativeElement.textContent.trim())
.toBe('the tooltip text');
This works, but it is a hack that will fall to pieces if I run into a similar situation with multiple tooltips (for example). Has anyone been able to handle this in a better way? Am I not setting this spec up correctly?
I got a paper-listbox containing a paper-checkbox contained within each paper-item of the list.
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</paper-item>
</template>
</paper-listbox>
Whenever the checkbox is clicked it also changes the selected state of the listbox items resulting in an paper-item becoming selected or deselected.
How can that be prevented?
paper-listbox uses Polymer.IronSelectableBehavior and Polymer.IronMultiSelectableBehavior. So, you can use selectable attribute in order to prevent changing the selected state.
selectable is a CSS selector string. If this is set, only items that match the CSS selector are selectable. You can put a random string so that it won't match the paper-item element.
Demo
i solved the problem by avoiding it ;)
Moved the checkbox out of the paper-item into the dom-repeat like so:
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
</paper-item>
<div class="checkWrapper">
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</div>
</template>
</paper-listbox>
With a bit of CSS positioning magic that works. Added a wrapper div to allow absolute positioning.
I'm using angular2 and bootstrap4. Popover correctly renders raw html as bold text asdf
<img src="assets/images/1.jpg"
data-container="body" data-toggle="popover" data-html="true" data-placement="top"
[attr.data-content]="getM()"/>
However, tooltip renders as plain <b>asdf</b> text including tags
<img src="assets/images/2.jpg"
data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
[attr.title]="getM()"/>
Component method getM:
public getM(): string {
return '<b>asdf</b>';
}
Both tooltip and popover are initialized the same way
$(function () {
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
$('[data-toggle="popover"]').popover({container: 'body'});
})
Could someone explain why is that and how to solve? It seems this is connected with initialization order, but I just don't know where to look further.
Well, the issue was that my element (which tooltip was attached to) was created dynamically.
In exact, I had a 1 sec delayed service. When new data arrived, the <img> element in my component was recreated, but $('[data-toggle="tooltip"]') selector doesn't work with dynamic elements.
Instead, I had to use this selector
$("body").tooltip({selector: '[data-toggle="tooltip"]'});
Now it works as intended.
PS I'm not a front-end developer, so anyone who can explain it in better terms is welcome.
Hot to find in dojo element when I know id of parent and I know type and style class of element which I looking for ?
For example, I want find and change (span style=tabLabel) ALARMS into Mga alarma
<div dojoattachpoint="focusNode" role="tab" style="-moz-user-select: none;" id="tab_div_tablist_dijit_layout_ContentPane_1" tabindex="-1" title="" aria-selected="false">
<img dojoattachpoint="iconNode" class="dijitIcon dijitTabButtonIcon dijitNoIcon" alt="" src="dojoroot/dojo/resources/blank.gif">
<span class="tabLabel" dojoattachpoint="containerNode" style="-moz-user-select: none;">Alarms</span>
<span role="presentation" dojoattachevent="onclick: onClickCloseButton" dojoattachpoint="closeNode" class="dijitInline dijitTabCloseButton dijitTabCloseIcon" style="display: none;">
<span class="dijitTabCloseText" dojoattachpoint="closeText">[x]</span></span>
</div>
In this case it is pretty easy. If you look at the span element you refer to it has a dojoattachpoint attribute specified. That means that the node can be accessed from the widget directly with that name.
Now I assume that the widget is called "tab_div_tablist_dijit_layout_ContentPane_1" from the id in your code so to get the widget:
var widget = dijit.byId("tab_div_tablist_dijit_layout_ContentPane_1");
And the dojoattachpoint on the span has the value containerNode so:
widget.containerNode.innerHTML = "Mga alarma";
I think that should work.
If you're creating a custom widget template and wish to localize a string, there is a mechanism to do this. Simply use a substitution pattern like ${alarm} and define a javascript property on your widget with that name. That property can then be populated with a localization bundle using dojo.i18n. You can look at some of the dijits like dijit.Dialog.postMixInProperties to see how this is done.