I'll try to explain this the best I can. There is a JSON result which separates every paragraph of the text and marks them with 0 or 1 (or even 0.3 etc). The Stringified results on the frontend shows those numbers too. Is there a way to replace these and apply CSS styles based on the value (0, 0.1, or 1)?
the JSON:
RAW:
"content": [
[
0.0,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
[]
],
[
0.0,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
[]
],
[
1,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
[]
]
],
...
What I get in the front end is:
0Lorem ipsum dolor sit amet, consectetur adipiscing elit.0Lorem ipsum dolor sit amet, consectetur adipiscing elit.1Lorem ipsum dolor sit amet, consectetur adipiscing elit.
I should get:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With 0s and 1s replacedby html (and classes)
You should just be able to map over that content and pull the values out of each item, then render them.
data.content.map((item, i) =>
<p key={i} className={ item[0] < 0.5 ? 'low-value' : 'high-value' }>{ item[1] }</p>
)
Then you can use deconstructing assignment to make this cleaner and give each value a named local variable.
data.content.map(([value, text, array], i) =>
<p key={i} className={ value < 0.5 ? 'low-value' : 'high-value' }>{ text }</p>
)
Related
I have a variable source containing multiple lines containing indentation (i.e. leading whitespaces):
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
However, when printed with {{ source }}, Jinja actually prints
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
i.e. it strips leading whitespaces! How to preserve them?
Try:
{{ source|indent }}
See jinja documentation indent (default indentation is four spaces, the first and blank lines are not indented - which is exactly what you need)
When reproducing your example this way:
import jinja2
source = """
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
"""
template = jinja2.Template("""Content of 'source': {{ source }}
jinja2 version {{ version }} was used.""")
result = template.render(source=source, version=jinja2.__version__)
print(result)
the output was
Content of 'source':
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
jinja2 version 2.11.3 was used.
(so the indentation of source was not modified by jinja2).
I have a small problem. I'm getting a text from the server with innerHtml which is inserted in Angular component. Inside of this text, there are possibly some links. Example text block looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Is there a way to insert a bind there a click action like this?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thanks.
If I get you right, you render html loaded from server with innerHtml, in this case you can't use Angular directives inside of this template. But you can add listeners with common JS (document.addEventListener) after content rendering.
#Component({
template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
#ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;
ngAfterViewInit() {
const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
links.forEach(link =>
link.addEventListener('click', this.linkClickHandler.bind(this));
);
}
linkClickHandler(event: MouseEvent) {
...
}
}
For dynamic links you can bind your desired url link in you a tag like the following
<a [href]="some.url">Link</a>
If some is an object.
For click event you can have something like
method(url: string) {
window.location.href = url;
}
then you'll pass your url string like (click)="method('http://domain.tld/page.html')"
I'm using web-mode in Emacs to get syntax highlighting and indentation for PHP and HTML.
If I have this code in a .php file
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
And then put the cursor on the middle line and press tab then nothing happens.
I want it to look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
If I put the text in a tag on a single line and try to indent, it works.
This:
<p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</p>
turns into this, which it should
<p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</p>
My .emacs file
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(setq web-mode-markup-indent-offset 4)
(setq web-mode-css-indent-offset 4)
(setq web-mode-code-indent-offset 4)
(setq web-mode-indent-style 4)
try put these setting in a hook function:
(defun my-web-mode-hook ()
"Hooks for Web mode."
(setq web-mode-markup-indent-offset 4)
(setq web-mode-css-indent-offset 4)
(setq web-mode-code-indent-offset 4)
(setq web-mode-indent-style 4)
)
(add-hook 'web-mode-hook 'my-web-mode-hook)
Could you add this
(add-to-list 'auto-mode-alist '("\\.php\\'" . web-mode))
I have a string like the following:
lorep ipsum dolor sitamet, consectetur adipiscing elit.
I need to split it into fragments, but save link classes for fragments inside anchors. So perfect result would be:
['lorep ipsum ', {'link-1' => 'dolor sit'}, 'amet, consectetur', {'link-2' => 'adipiscing'}, ' elit.']<br />
Or:
['lorep ipsum ', ['link-1', 'dolor sit'], 'amet, consectetur', ['link-2', 'adipiscing'], ' elit.']
I've tried using this code:
string.split(/<[^>]>/)
But it returns returns only an array of fragments.
I'd do using Nokogiri
require 'nokogiri'
doc = Nokogiri::HTML.parse <<-eot
lorep ipsum dolor sitamet, consectetur adipiscing elit.
eot
ary = doc.search("//a").flat_map do |n,a|
[n.previous_sibling.text.strip,{n['class'] => n.text.strip},n.next_sibling.text.strip]
end.uniq
p ary
output
["lorep ipsum", {"link-1"=>"dolor sit"}, "amet, consectetur", {"link-2"=>"adipis
cing"}, "elit."]
Should have been very easy but somehow cannot get it to work. I want to display truncated text on my blog home page with a 'read more' link that shows up inline with the text i.e.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac tortor et felis aliquet vestibulum sed in sem. Aliquam pharetra ultricies nunc, non pellentesque ... Read More
Since I use simple_format for my text, all breaks in the text get wrapped in tags and I get Read More in a separate line as below
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac tortor et felis aliquet vestibulum sed in sem. Aliquam pharetra ultricies nunc, non pellentesque ...
Read More
How do I place it inline after a < p > tag. Guess it's more of a CSS question rather than a Rails one. Again, I feel this should be super simple. What am I forgetting?
Here's the code snippet in the view
<%= simple_format truncate(h(feed.description), length: 400, separator: ' ') %><%= link_to "Read More", feed_path(feed)%>
I suspect that you can just put your link inside the simple_format content-parameter link this:
<%= simple_format truncate((h(feed.description) + link_to("Read More", feed_path(feed))), length: 400, separator: ' ') %>
(Note: not tested)