I'm starting to experiment with IHP's webframework. I am testing some different page layouts and I can't seem to find the right way of commenting out html within the hsx QuasiQuote (which has the blaze-html syntax) whilst experimenting with the design. For example, I want to temporarily comment the link to Users in the following:
[hsx |
<a class="nav-link active" href={UsersAction}> Users </a>
<a class="nav-link active" href={SitesAction}> Current Projects </a>
<a class="nav-link active" href={NewSiteAction}> Add New Project </a>
|]
I have tried commenting the line html style:
[hsx |
<!-- <a class="nav-link active" href={UsersAction}> Users </a> -->
|]
but that yields a compilation error:
unexpected '!'
I have also tried escaping it in curly braces as a haskell comment but that yields
compileToHaskell(-- <a class="nav-link active" href={UsersAction}> Users </a> ): "0\nSrcLoc \"\" 1 65\nParse error: EOF\n"
Essentially I am looking for a way to comment lines or blocks of code within an [hsx|...|] QuasiQuote block but I am unsure of what exactly I need to escape.
HSX previously had no support for HTML comments. I've just added this to the HSX syntax: https://github.com/digitallyinduced/ihp/pull/349
Will be part of the next version of IHP released later today. Then this syntax will work:
[hsx|
<div>
<!-- Comment -->
</div>
|]
Related
I have a problem where having an svg inside an a tag breaks a link that works in other browsers. The following code works in IE11:
<span class="login-user-name" *ngIf="isLoggedIn">
<a href="/auth/change-password" title="Change Password" attr.aria-label="Change Password Link">
Change your password
</a>
{{(user | async).displayName}}
</span>
However, the following works in other browsers, but not IE11. I was surprised the lack of relevant results I was able to find both on SO and google about SVGs not working inside tags on IE11:
<span class="login-user-name" *ngIf="isLoggedIn">
<a [routerLink]="['/auth/change-password']" title="Change Password" attr.aria-label="Change Password Link">
<svg-icon class="medium-gray tiny" icon="icon-torso" aria-hidden="true"></svg-icon>
</a>
{{(user | async).displayName}}
</span>
I don't totally understand the "why" of this, but one of the other developers solved it by simple substituting a tag for the . His only comment was "its the way inline elements work with nested items".
<div class="login-user-name" *ngIf="isLoggedIn">
<a class="change-password" [routerLink]="['/auth/change-password']" title="Change Password" attr.aria-label="Change Password Link">
<svg-icon class="medium-gray tiny" icon="icon-torso" aria-hidden="true">
</svg-icon>
</a>
{{(user | async).displayName}}
</div>
I have list of elements as below:
<div class="container-menu" _ngcontent-c13="">
<nav _ngcontent-c13="">
<ul _ngcontent-c13="">
<li _ngcontent-c13="">
<a class="" _ngcontent-c13="" href="/32info" role="link" routerlinkactive="active" ng-reflect-router-link="/32info" ng-reflect-router-link-active="active" title="Information"> Information test </a>
</li>
<li _ngcontent-c13="">
<a class="active" _ngcontent-c13="" href="/32address" role="link" routerlinkactive="active" ng-reflect-router-link="/32address" ng-reflect-router-link-active="active" title="Address"> Data address </a>
</li>
I wanted to first click on element two and then first in my test. I appealed this way:
element(by.partialLinkText('Data address')).click();
element(by.partialLinkText('Information test')).click();
but this doesn't work now. How can my tester click on these items?
To get the full compiler experience for TypeScript with Selenium WebDriverJS, add the type definitions to your project, for example using NPM.
npm install --save-dev #types/selenium-webdriver
The source code for the type definition is on GitHub,
Gretings, I have a problem with changing languages from Twig template.
My goal is to make it possible for user to switch page language according to his needs. I did everything according instruction:
Making the Locale "Sticky" during a User's Session
My question is, how to change language, which is stored in session, from Twig template?
My best guess was:
{{ app.session.set('_lang', 'en') }}
But result was, that language change needed page to be refreshed twice to show results, one to set values in session, second to load page according language stored in session. Please advise!
Solution was creating locale prefixes for all controllers and as malcolm offered, using route params:
{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'_locale': 'en'})) }}
This will allow you to get the route and the route's parameters without knowing them. Then it will override the _locale parameter with your value.
In Twig :
{{path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}
With the HTML/Bootstrap code
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="language_switcher" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe"></i></a>
<div class="dropdown-menu" aria-labelledby="language_switcher">
<a class="dropdown-item" href="{{ path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')|merge({'_locale': 'ru'})) }}"><span class="flag flag-ru"> </span> Russian</a>
<a class="dropdown-item" href="{{ path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}"><span class="flag flag-us"> </span> English</a>
</div>
</li>
I have the following code
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{exp:channel:entries channel="static" sort="asc" dynamic="off"}
<li>{title}</li>
{/exp:channel:entries}
</ul>
</div><!--/.nav-collapse -->
Which is looping through a channel I have for static pages on my website. Technically it is showing all the stuff it should do. This is the code it outputs:
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Small Builders</li>
</ul>
</div>
However, when I click the link it gives me a white page. I have the htaccess from the documentation set up. I'm new to ExpressionEngine. Am I missing something completely obvious? I just want to link the the entry I've created.
If you try to go to abc.com/index/small-builders does it work? (added index)
I don't know if you're hiding index in the url or not but that can cause it.
The way I fixed this was the enable the Pages plugin on ExpressionEngine. Where I'm using ExpressionEngine 3.0.5 the plugin isn't installed/activated by default like it is on EE2.
Once this was activated I was able to assign templates and url structure no problem.
guess your post would be better on the expressionengine.stackexchange.com site.
Post it there and i´ll have a look if i can explain this to you
I've used the Wayfinder menu building extra with MODx Evo and am now attempting to use it with MODx Revo for a new site. It's working well apart from I can't yet see a way to have the 3rd level different to the 2nd level . See the way Wayfinder is currently outputting the menu (simplified here for clarity):
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown">
<a class="dropdown-toggle notransition" href="index.php?id=200">
Help
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right " style="display: none;">
<li>
<a href="index.php?id=31">
FAQs
</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="index.php?id=54">
Policies
</a>
<ul class="dropdown-menu pull-right" style="display: none;">
<li>
<a href="index.php?id=490">
Privacy Policy
</a>
</li>
<li>
<a href="index.php?id=489">
Terms and Conditions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need the 'Policies' sub-menu, with 'Privacy Policy' etc, to pull to the left, not to the right - defined in Wayfinder InnerTpl:
<ul class="dropdown-menu pull-right" style="display: none;">[[+wf.wrapper]]</ul>
So, is it possible with Wayfinder to have a 3rd level different to the 2nd level ???
I've browsed the docs and forums for days to no avail and hope that the amazing SO community has some insights. Thanks in advance!
I think you are going to have to do this with CSS, you can add the &levelClass to your wayfinder call [docs say " CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').]
that way when you can write some css for your third level items when you see something like:
<li class="dropdown-submenu pull-left level2">
your css could go something like:
li.dropdown-submenu.pull-left.level2 > ul {
/* css for pulling it right */
}
unfortunately the &levelClass does not do anything if you add [[+wf.classnames]] to the UL tag in the outer wrapper so you have to come at it sideways.
OR
your inner wrappers could be written to use a snippet to decide what classes to add:
<ul class="dropdown-menu [[!pullLeftOrRight? &id=`[[+wf.docid]]`]]">
[[+wf.wrapper]]
</ul>
Then in your snippet use the docid to determine where in the menu tree that subnav is.
[hopefully docid is available in the outerTpl - I'm not sure]
UPDATE
After reading your comments & the docs again, I think I have an idea that might work - check out the &categoryFoldersTpl attribute, setup your tpl for that with your pull right classes & for your 3rd level drop downs, set the rel="category" on only the third level resources as suggested in the docs. [which doesn't help anyone who wants different submenus for different levels, but may get you out of your bind]