Hugo nested shortcodes struggles (shortcode inside bootstrap table) - hugo

On my Hugo-website I use Bootstrap for the layout and as such wanted to have my tables styled by bootstrap as well.
I found this thread, leading me to this nice solution by zwbetz.
However, if I use another shortcode in one of the table cell's markdown, the rendering goes wrong. The table is rendered correctly up until the nested shortcode, and the remainder of the table (starting at that nested shortcode) is rendered in raw markdown inside a separate <p>-element instead of as part of the html table.
The implementation of the table shortcode (table.html) (I just changed the positional parameter with a named one):
{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get "class" | default "" }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}
The nested shortcode is one that allows me to access the .Site.Params (param.html):
{{ $list := .Site.Params }}
{{ range $index, $element := .Params }}
{{ $list = index $list . }}
{{ end }}
{{ $list }}
The combination of both shortcodes appears in my cookie-policy page (cookies.md excerpt):
...
{{< table class="table" >}}
| Name | Duration | Contents | Purpose |
|---|---|---|---|
| Orejime | {{< param "plugins" "orejime" "cookieExpiresAfterDays" >}} days| | Used for letting the website know which cookies you want to allow/decline. |
{{< /table >}}
...
The rendered html looks like this (I manually added some indentation for clarity):
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Duration</th>
<th>Contents</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orejime</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p>365 days | | Used for letting the website know which cookies you want to allow/decline. |
</p>
While the expected output is:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Duration</th>
<th>Contents</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orejime</td>
<td>365 dagen</td>
<td></td>
<td>Used for letting the website know which cookies you want to allow/decline.</td>
</tr>
</tbody>
</table>
If I expose .Inner of the table-shortcode, I do get the correct markdown with the param-shortcode substituted. But applying markdownify, Hugo decides to do some funny stuff.
I tried all combinations of {{< ... >}}-style and {{% ... %}}-style shortcodes, but nothing yields me the expected output.

Related

How can show <p> tag content in place of first row when my table has now rows(No filtered matched)

I have jquery , angularjs Datatable based table.
When no filter matches then it shows empty rows with only table headers.
I have to show p tag content below table header.
This table is in wordpress so may be css is not working as it should.
<table>
<tr>
<th>Program Name</th>
</tr>
<tr>
<td>Some program Name</td>
</tr>
</table>
<p>No filters found</p>
<!-- This content should be shown below table header-->
How can i achieve this ?
I got solution for my own answer
I changed my ng-repeat
<tr ng-repeat="user in filtered= (products | inArray:selectedCountries:'Institute' | filter : searchtxt1 | filter : searchtxt2 | filter : searchtxt3 | filter : searchtxt4 | rangeFilter:'Fees':ui.min:ui.max) | limitTo: 5">
Also added tbody with ng-show
<tbody><tr><td style="text-align:center;" colspan="21" ng-show="filtered.length === 0" class="agamotto">Filters didn't matched ! Please try Other Filters</td></tbody>
SOLVED !

AngularJS - Insert ng-repeat into another one between two TR

My question is - I think - pretty simple.
I have a table, a classic one. In this table, I want to display values of two arrays named networks and channels.
Each network in networks could contain channels but not all.
What I want is to display all the networks and their related channels.
In DIV or TD in TR it's simple but I can't do this with multiple TR.
Example :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="channel in channels | filter: { networkId: network.networkId}">{{channel.Name}}</td>
</tr>
Works like a charm!
But I'm searching thing like this :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
But I know that is not the good code to do this :)
Someone know how to do that ?
I don't want to change the TABLE by DIV.
Kind regards !
Each ng-repeat has its own scope so your network is not available on the second TR repeat.
If you really want to stick with table, you can create a table inside your tr like this:
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
<td>
<table>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
</tr>
</table>
</td>
</tr>

how to display the number of filtered rows outside table definition?

I have implemented a filter for my ngtable. Trying to display the number of filtered items like this:
How to display nr of filtered rows here? Outside the table definition?
{{filtered.length}} result(s) matching the filter
<table ng-table="tableParams" class="table">
<tr ng-repeat="account in filtered =($data | filter:search.accountName | filter:search.id)">
<td>{{filtered.length}}</td>
<td data-title="'id'">
{{account.account.accountId.id}}
</td>
<td data-title="'name'">
{{account.account.accountName}}
</td>
</tr>
</table>
plunkr: http://plnkr.co/edit/Sx4YAO?p=preview
Just add $parent before your filtered in your ng-repeat and you should be fine.
Ng-repeat has an isolated scope.
<tr ng-repeat="account in $parent.filtered =($data | filter:search.accountName | filter:search.id)">
If you create the array before you use it within the child scopes then they'll reference and use the one from the parent scope
JS
$scope.model = {filtered:[]}
HTML
How to display nr of filtered? {{model.filtered.length}} result(s) matching the filter
<tr ng-repeat="account in model.filtered =($data | filter:search.accountName | filter:search.id)">
http://plnkr.co/edit/mcuN34?p=preview
Use built in function:
total() {{ tableParams.total() }}

dir-paginate with two dir-pagination-control

at the moment I have list of events with a pagination on the bottom of the list. That works well, but now I want to add a addintional pagination on the to of the list. When I now change the pagination on the bottom the pagination on the top is not updated.
My working code is:
<tbody>
<tr dir-paginate="event in events | orderBy:['id', 't']:true | itemsPerPage: dirPaginate.pageSize" current-page="dirPaginate.currentPage">
<td><i class="{{ ::(event.el | eventtype).icon }}" tooltip="{{ ::(event.el | eventtype).tooltip }}"></i></td>
<td class="hidden-xs">{{::event.nr}}</td>
<td><span ng-bind-html="::('' + event.tg | eventMessage:event.d:'html')"></span>
<span class="visible-xs"> ({{::event.nr}})</span>
</td>
<td>{{ ::(event.t * 1000 | date:'mediumDate')}} <span class="visible-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</span></td>
<td class="hidden-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="paginationContainer"><dir-pagination-controls></dir-pagination-controls></td>
</tr>
</tfoot>
How can I uptate both paginations when one of them is changed?
Download dirPagination.js from here. .
Now include dirPagination.js to your page.
Add angularUtils.directives.dirPagination in your module like this
var app = angular.module("myApp",
['angularUtils.directives.dirPagination']);
4.we use dir-paginate directive for pagination add dir-paginate in tr tag
<tr dir-paginate="event in events|orderBy:['id', 't']:true |
itemsPerPage: dirPaginate.pageSize">
5.Add below given code on upper and lower side of your grid .it will automatically update page no. in both pagination controls.
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>

Haml interpolation with underscore template variable

I am trying to output an underscore template variable in my haml template but I'm not having any luck.
The HTML is not being escaped so I can't seem to figure out why the underscore variable isn't rendering.
HAML - Full Template
%script{:type => "text/template", :id => "user_list_template"}
%h4 Users
#test
%table.table.table-bordered
%thead
%tr
%th #
%th Name
%th Nickname
%th
%tbody
{{ _.each( users, function(user) { }}
%tr
%td {{= user.get('id') }}
%td {{= user.get('name') }}
%td {{= user.get('nickname') }}
%td
%a.btn{:href => "{{= user.get('nickname') }}"}
View User
{{ }); }}
The source
<tr>
<td>9</td>
<td>TacoHell</td>
<td>TacoHelll</td>
<td>
<a class="btn" href="<%= user.get('nickname') %>">
View User
</a>
</td>
</tr>
Console.log of template
<h4>Users</h4>
<div id='test'></div>
<table class='table table-bordered'>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Nickname</th>
<th></th>
</tr>
</thead>
<tbody>
{{ _.each( users, function(user) { }}
<tr>
<td>{{= user.get('id') }}</td>
<td>{{= user.get('name') }}</td>
<td>{{= user.get('nickname') }}</td>
<td>
<a class='btn' href="{{= user.get('nickname') }}">
View User
</a>
</td>
</tr>
{{ }); }}
</tbody>
</table>
I have read through previously asked question but cannot get it to work. Any ideas?
Interpolating underscore.js template with HAML
Rendering “<%%=” with HAML
Interpolate inside html attributes with Underscore.js
Edit 1
Added full template
Edit 2
console.log of template
This isn't so much a solution as it is a workaround, but one alternative would be to use a different syntax for your Underscore templates (one that doesn't involve < and >). If you look at:
http://documentcloud.github.com/underscore/#template
you'll find they provide an example of alternate Django/Mustache-style template syntax:
If ERB-style delimiters aren't your cup of tea, you can change
Underscore's template settings to use different symbols to set off
interpolated code. Define an interpolate regex to match expressions
that should be interpolated verbatim, an escape regex to match
expressions that should be inserted after being HTML escaped, and an
evaluate regex to match expressions that should be evaluated without
insertion into the resulting string. You may define or omit any
combination of the three. For example, to perform Mustache.js style
templating:
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
var template = _.template("Hello {{ name }}!");
template({name : "Mustache"});
=> "Hello Mustache!"
Of course, if you were considering looking in to a more powerful templating system anyway, then it certainly wouldn't hurt to abandon _.template and use Mustache, Handlebars, or a similar templating system instead. But if you're happy with Underscore, the _.templateSettings.interpolate will let you use it without < or >.

Resources