How do I programmatically add a child to dojox/mobile/ScrollablePane?
The reference guide only has a declarative example - http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ScrollablePane.html.
ScrollablePane Doesn't seem to have an addChild method. I tried using placeAt on the child widget and passed in the containerNode of the ScrollablePane. That doesn't work either.
The following declarative code works. I'm not able to do it programmatically. Specifically, I cant figure out how to add RoundRectList under the ScrollablePane.
<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props='label:"Title", fixed:"top"'>
<span data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props='icon:"mblDomButtonWhiteSearch"'></span>
<span id="refreshButton" data-dojo-type="dojox/mobile/ToolBarButton"
data-dojo-props="label: 'Exit'"
style="float:right;"></span>
</div>
<div data-dojo-type="dojox.mobile.ScrollablePane" style="position: relative; overflow: hidden;" >
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Menu</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 1", moveTo:"#", transition:"slide", onClick:openScreen' />
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 2", moveTo:"#", transition:"slide", onClick:openScreen' />
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 3", moveTo:"#", transition:"slide", onClick:openScreen' />
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 4", moveTo:"#", transition:"slide", onClick:openScreen' />
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 5", moveTo:"#", transition:"slide", onClick:openScreen' />
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"Item 6", moveTo:"#", transition:"slide", onClick:openScreen' />
</ul>
</div>
</div>
can you try something like
this.ScrollablePane.domNode.appendChild(RoundRectList.domNode);
before this, you need to construct RoundRectList
Yeah , seems dojox exp missed implementation of this last ,
so you can workaround this issue by using the place methode of dojo/dom-construct module , so after creating you element , just place it's domNode inside the scrollpane's containers node as below code . (here I just affect the id="scrollpane" to the ScrollablePane and get it's reference using dijit/registry module )
var rectList = new RoundRectList();
domConstruct.place(rectList.domNode,registry.byId("scrollpane").containerNode, 'last');
you can see a sample Fiddle here
Related
I am using handlebars as templeting engine for my project. I am using prettier for formatting but during formatting hbs file i am getting error as SyntaxError: Handlebars partials are not supported . I tried to find solution on internet but failed.
Here is complete log of error:
SyntaxError: Handlebars partials are not supported:
(error occurred in 'an unknown module' # line 2 : column 2) (2:2)
1 |
2 | {{> header}}
| ^^^^^^^^^^^^
3 |
4 |
5 |
at n (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode
9.0.0\node_modules\prettier\parser-glimmer.js:1:1320)
at Object.parse (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode
9.0.0\node_modules\prettier\parser-glimmer.js:1:183895)
at Object.parse$a [as parse] (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode
9.0.0\node_modules\prettier\index.js:12513:19)
My code is:
{{> header}}
<header>
<nav class="navbar">
<a href="#" style="display: inline-block">
<object
data="./images/background.png"
width="100"
height="80"
style="pointer-events: none"
></object>
</a>
<div class="navbar_search">
<input
type="text"
name="search-bar"
id="search"
placeholder="Search..."
maxlength="15"
/>
<a href=""
><i data-feather="search" class="navbar_search-icon"></i
></a>
</div>
<div class="navbar_icons">
<i data-feather="bell"></i>
<i data-feather="user"></i>
<i data-feather="settings"></i>
</div>
</nav>
</header>
<br></br>
<h1 class="heading_pink" align = "center">WHAT TO DO AFTER 12TH?</h1>
<hr color = "black">
<section class="chain">
<ul class="chain_list">
<li class="chain_list-item">TIP 1</li>
<li class="chain_list-item">TIP 2</li>
<li class="chain_list-item">TIP 3</li>
<li class="chain_list-item">TIP 4</li>
<li class="chain_list-item">TIP 5</li>
<li class="chain_list-item">TIP 6</li>
<li class="chain_list-item">TIP 7</li>
</ul>
</section>
{{> footer}}
You can use a .prettierignore file to ignore templates.
# if your files are in a templates folder for example
# add this folder to the .prettierignore
templates
On the same docs page is also a section about handlebars. If you prefer to ignore only parts of your file you can follow this.
{{! prettier-ignore }}
<div>
"hello! my parent was ignored"
{{#my-crazy-component "shall" be="preserved"}}
<This
is = "also preserved as is"
/>
{{/my-crazy-component}}
</div>
Old question but ran into this and thought was worth posting here, if you are using handlebars with prettier, configure your .hbs files to use the Glimmer parser in your .prettierrc file, like so:
{
"overrides": [
{
"files": "**/*.{hbs}",
"options": {
"parser": "glimmer"
}
}
]
}
If you dont have a .prettierrc file, create one in the root of your project with the contents above, and you should be good to go.
This way all your templates also get properly formatted, better than ignoring them.
To check which input is enable, in our DOM structure(Knockout JS) there is no specific property, which says the button is enable..
Its handled by one of the CSS property, of ::before class :
CSS: {content: "\f013";}
HTML:
<div data-bind="foreach: XXXXXX ">
<div class=".col-xs-3 col-sm-3 col-md-3 -setting-radio" data-bind="attr: " >
<label class="radio-position radio-inline " data-view="widgets/input/radio/view" data-active-view="true" style="">
<input class="-widgets-input-radio-check" id="radio" type="radio" data-bind="Enable: enable, value: value, checked: checked" value="1" name="FS">
<span class="-radio-label"></span>
<span class="-widgets-input-radio-text" data-bind="html: data">Global</span>
</label>
</div>
<div class=".col-xs-3 col-sm-3 col-md-3 -setting-radio" data-bind="attr: " >
<label class="radio-position radio-inline" data-view="widgets/input/radio/view" data-active-view="true" style="">
<input class="-widgets-input-radio-check" id="radio" type="radio" data-bind="Enable: enable, value: value, checked: checked" value="2" name="FS">
<span class="-radio-label"> </span>
<span class="-widgets-input-radio-text" data-bind="html: data">Capital</span>
</label>
</div>
</div>
How can we achieve it ?
There is a special method for this in selenium, named value_of_css_property The name differs on the language you use, but the idea is the same.
As I understand from your question you can use it like as in the below example:
assert driver.find_element_by_css_selector('css_locator').value_of_css_property("content") == "\f013"
HTML is not enough, you need to check which CSS properties are changed as well.
You can use it to for waits and asserts.
I use computed tab for this:
I have one check box and two links with same classes & same Div.During the automation testing using protractor, i want to click on check box but it click on Links.
i am writing this code but its not working, please provide a solution.
Code:
element(by.id('Remember')).click();
[1
please find HTMl code:-
<div class="input-field">
<div class="pas_rembr">
<input name="remember" id="Remember" class="css-checkbox ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" ng-model="rememberMe" type="checkbox" ng-required="true" required="required">
<!-- <label for="Remember" class="css-label">I agree with the <a class="text_link" target="_blank" ng-href="{{baseUrl}}terms-conditions">Terms & Conditions</a>.</label> -->
<label for="Remember" class="css-label">I have read and I agree with <a class="text_link" target="_blank" ng-href="/lmd/terms-conditions" href="/lmd/terms-conditions">Terms and Conditions</a> and the <a class="text_link" target="_blank" ng-href="/lmd/privacy" href="/lmd/privacy">Privacy Policy</a> of this site.</label>
</div>
<span class="errorForm ng-hide" ng-show="(memberForm.remember.$dirty || submitted) && ((memberForm.remember.$error.required))">
<span class="errorForm ng-scope ng-hide" ng-show="memberForm.remember.$error.required" translate="TERAMS_CONDITION_IS_REQUIRED">Terms and condition is required</span>
</span>
</div>
Try this:-
var el = element(by.css('label[for="Remember"]'));
browser.actions().mouseMove(el, {x: 20, y: 3}).click().perform();
For your tests, the CSS selector would be
element = $$('label.css-label > a:nth-child(2)');
This should be able to click on the second a child of the label element.
I have a Typo3 Page with several wrappers and referenced elements on it.
I'm using flux-grid to create the content of the wrappers and then access it like this:
<v:variable.set name="contentElements" value="{flux:content.get(area:'content', render:'FALSE')}" />
<ul class="myClass">
<f:for each="{contentElements}" as="contentElement" iteration="iteration">
<li>
<h3 data-number="{iteration.cycle}">{contentElement.header}</h3>
<ul class="content" id="acc_{v:format.sanitizeString(string: '{contentElement.header}')}">
<li>
<v:content.render contentUids="{0:contentElement.uid}" />
</li>
</ul>
</li>
</f:for>
</ul>
Problem is, I always get the default language for contentElement.header instead of the translated version. The content itself that's been fetched via v:vcontent.render is shown in the correct language.
What am I doing wrong?
(Typo3 8.7.9)
I had to get the content first and then render it separately:
<f:for each="{contentElements}" as="contentElement" iteration="iteration">
<v:variable.set name="head" value="{v:content.get(contentUids: '{0: contentElement.uid}', render:'0')}" />
<v:variable.set name="theContent" value="{v:content.get(contentUids: '{0: head.0.records}', render:'0')}" />
<li>
<h3 data-number="{iteration.cycle}">{theContent.0.header}</h3>
<ul class="content" id="acc_{v:format.sanitizeString(string: '{theContent.0.header}')}">
<li>
<f:format.raw>{theContent.0.bodytext}</f:format.raw>
</li>
</ul>
</li>
</f:for>
Hope it helps someone...
I'm trying to use Tooltipster to show an image of hovered thumbnails that are in a loop. I've tried multiple ways to find the closest tooltip_templates class and show it, but am not having any success. Is there another way?
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img01.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img01.jpg" />
</span>
</div>
</li>
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img02.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img02.jpg" />
</span>
</div>
</li>
According to the docs (5. Use HTML inside your tooltips)
This should work:
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_1"></li>
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_2"></li>
<div class="tooltip_templates">
<li id="tooltip_content_1">
<img class="tooltip-swatch" src="/img01.jpg" />
</li>
<li id="tooltip_content_2">
<img class="tooltip-swatch" src="/img02.jpg" />
</li>
</div>
Note: it is not recommended to use the class 'tooltip' as it may conflict with Bootstrap or other styles but I left it as you had it.
Also, make sure your CSS includes:
.tooltip_templates { display: none; }
Finally, your jQuery should include:
$(document).ready(function() {
$('.tooltip').tooltipster();
});
That should do it. Let me know if you have any questions!
Thanks Jay. I also got this to work a couple of days ago. This is how I did it.
<div class="tooltip">
<span class="tooltip_content">
<img src="<?php echo $finish_image['value']; ?>" />
<p><?php echo $finish_name['value']; ?></p>
</span>
<img src="<?php echo $finish_image['value']; ?>" alt="<?php echo $image['alt'] ?>" />
</div>
jQuery('.tooltip').tooltipster({
trigger: 'custom',
triggerOpen: {
mouseenter: true,
touchstart: true
},
triggerClose: {
mouseleave: true,
tap: true
},
side: ['top'],
maxWidth: 200,
theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
functionInit: function(instance, helper){
var content = jQuery(helper.origin).find('.tooltip_content').detach();
instance.content(content);
}
});