We have a solution based on a numeric field being set to 1 or 2 or displaying certain icons. It works.
<span *ngIf="config.icon"
[class.fas]="true"
[class.fa-plus]="icon===1"
[class.fa-minus]="icon===2"
class="indicator">
</span>
I sense what shortly, we'll have a whole bunch of such icons (about 15 different ones). The suggested solution is either to put in 15 lines of specific class assignments or to build a specialized component managing that.
I'm opposed to both but haven't got it working out when I tried and googling led to irrelevant hits. Possibly due to my incompetence recognized th egood stuff.
Is it possible to do something like one of the following pseudo code lines? How?
[class.fa-{{iconName}}]="true"
[class]="iconName"
edit
Based on the comments/answers, I got it working using the following.
<span *ngIf="config.icon"
[ngClass]='{ "fas": true, "fa-plus": true }'></span>
However, for some reason, I'm not getting anything using the syntax below.
<span *ngIf="config.icon"
[ngClass]="classes"></span>
...
classes: { "fas": true, "fa-plus": true };
What am I missing?
You can try something like this:
<span class= "indicator"
[class.fas]="true"
[ngClass]="'fa-' + iconName">
</span>
See working example at https://stackblitz.com/edit/angular-mgecjw
Related
I wan to undetand in english what does this code means exacty.
I have tried leanring codes from beautifulsoup i got the hint but i am not able to get confidence.
soup.find_all("p", class_="strikeout")
code says find all the tags which is ... and something
I'll translate
soup.find_all("p", class_="strikeout")
as:
find all <p> tags with class equals to strikeout ( <p class="strikeout"> )
You should search the documentation (https://www.crummy.com/software/BeautifulSoup/bs4/doc/#calling-a-tag-is-like-calling-find-all) to find out if the class search is strict or not, meaning it will match or not something like
<p class="strikeout foo">
Can someone give a full explanation of the syntax for Atom's data-grammar attribute (used in keybinding selectors)?
For instance, what is the difference between
[data-grammar='source example']
and
[data-grammar~='source example']
?
Also, how do you specify multiple grammars? For instance, how would you specify that a key binding should be limited to html or xml formats?
If there already exists documentation on this somewhere, I have not yet found it, but would appreciate being pointed to it.
Quick Example:
keymap.cson:
"atom-text-editor[data-grammar='text tex latex']":
'f5':'latex:build'
Grammar Information & Documentation
I began by looking at the file-types package. source and text categorize languages - source deals with development languages, while text deals with documentation/logs formats.
You can add and customize language recognition by reading the flight manual. I've linked some specific sections below that are helpful for that.
Flight Manual | Basic Customization:
Language Recognition
Language Specific Settings
Working with [data-grammar]:
The little doocumentation given is listed under the Keymaps in Depth section.
Flight Manual | Keymaps in Depth
Selectors and Custom Packages.
This also describes the not([...]) functionality used below and how to manipulate various rules.
Although in the above, grammars are listed in a dot format, ie source.c, to use them in the [data-grammar='<name>'] format spaces are instead required.
An example of how I might use the data grammar option in my keymap.cson config is as such (here I'm using the latex package):
"atom-text-editor[data-grammar='text tex latex']":
'f5':'latex:build'
The ~ is not the correct syntax for desired functionality with data-grammar. Instead, use something like "atom-text-editor:not([data-grammar='<name>'])":
Note that you wouldn't use data-grammar in something like config.cson. The syntax for language specifics looks something like this instead:
# **config.cson**
".latex.tex.text":
editor:
softWrap: true
Extra useful information - List of registered Grammars
A dump of the output of Object.keys(atom.grammars.grammarsByScopeName).sort().join('\n') through the Dev Console (View > Developer > Toggle Developer Options > Console)
source.c
source.cake
source.clojure
source.coffee
source.cpp
source.cs
source.css
source.css.less
source.css.scss
source.csx
source.diff
source.gfm
source.git-config
source.go
source.gotemplate
source.java
source.java-properties
source.js
source.js.rails source.js.jquery
source.js.regexp
source.js.regexp.replacement
source.json
source.litcoffee
source.makefile
source.nant-build
source.objc
source.objcpp
source.perl
source.perl6
source.plist
source.python
source.python.django
source.regexp.python
source.ruby
source.ruby.gemfile
source.ruby.rails
source.ruby.rails.rjs
source.sass
source.shell
source.sql
source.sql.mustache
source.sql.ruby
source.strings
source.toml
source.verilog
source.yaml
text.bibtex
text.git-commit
text.git-rebase
text.html.basic
text.html.erb
text.html.gohtml
text.html.jsp
text.html.mustache
text.html.php
text.html.ruby
text.hyperlink
text.junit-test-report
text.log.latex
text.plain
text.plain.null-grammar
text.python.console
text.python.traceback
text.shell-session
text.tex
text.tex.latex
text.tex.latex.beamer
text.tex.latex.memoir
text.todo
text.xml
text.xml.plist
text.xml.xsl
To complement Mr G's answer, atom-text-editor[data-grammar~='html'] with the ~= means match an <atom-text-editor> HTML element with a data-grammar attribute that contains "html" amongst any other possible whitespace separated words.
For example, if the current language of the file is PHP, then the text-editor HTML element will look something like this:
<atom-text-editor data-grammar="text html php">
And atom-text-editor[data-grammar~='html'] will match this.
More info on attribute selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
As for trying to select multiple grammars, I don't think it's possible unless they share a common word in the data-grammar attribute, e.g., both HTML and PHP share "html", or both C and JavaScript share "source" (but in this case many other grammars share "source"). The only other way is to specify a keymap for each grammar individually even if it's the same key combination.
How do you get the number of days between two dates in Thymeleaf?
Progress up until now:
<span th:text="${#dates.format(#dates.createNow(), 'dd/MMM/yyyy HH:mm') - #dates.format(feed.dateCreated, 'dd/MMM/yyyy HH:mm')}">Number of Days</span>
Any help would be highly appreciable.
Thanks
As far as I know, this isn't something that Thymeleaf's utilities support, so it is kind of ugly to do. I tried this, and it works for me:
<span th:with="days=${T(java.util.concurrent.TimeUnit).DAYS}, millis=${T(java.util.concurrent.TimeUnit).MILLISECONDS}" th:text="${days.convert(#dates.createNow().getTime() - feed.dateCreated.getTime(), millis)}" />
Instead of doing all this in thymeleaf, I would probably add a getNumberOfDays() method to the feed object that returns the number of days and handle the diff in there. (Or use something like timeago.)
Here's what I did and it worked !
<span class="text-small" th:text="${task.timeEnd.getDate() - task.timeStart.getDate()} + ' Days' "></span>
In my Rails 4 app, I have a Post model, with :copy and :short_copy as custom attributes (strings).
These attributes contain copies for social medias (Facebook, Twitter, Instagram, Pinterest, etc.).
I display the content of these attributes in my Posts#Show view.
Currently, URLs, #hashtags and #mentions are formatted like the rest of the text.
What I would like to do is to format them in a different fashion, for instance in another color or in bold.
I found the twitter-text gem, which seems to offer such features, but my problem is that I do NOT need — and do NOT want — to have these URLs, #hashtags and #mentions turn into real links.
Indeed, it looks like the twitter-text gem converts URLs, #hashtags and #mentions by default with Twitter::Autolink, as explained in this Stack Overflow question.
That's is not what I am looking for: I just want to update the style of my URLs, #hashtags and #mentions.
How can I do this in Ruby / Rails?
—————
UPDATE:
Following Wes Foster's answer, I implemented the following method in post.rb:
def highlight(string)
string.gsub!(/\S*#(\[[^\]]+\]|\S+)/, '<span class="highlight">\1</span>')
end
Then, I defined the following CSS class:
.highlight {
color: #337ab7;
}
Last, I implemented <%= highlight(post.copy) %> in the desired view.
I now get the following error:
ArgumentError
wrong number of arguments (1 for 2..3)
<td><%= highlight(post.copy) %></td>
What am I doing wrong?
—————
I'm sure each of the following regex patterns could be improved to match even more options, however, the following code works for me:
def highlight_url(str)
str.gsub!(/(https?:\/\/[\S]+)/, '[\1]')
end
def highlight_hashtag(str)
str.gsub!(/\S*#(\[[^\]]+\]|\S+)/, '[#\1]')
end
def highlight_mention(str)
str.gsub!(/\B(\#[a-z0-9_-]+)/i, '[\1]')
end
# Initial string
str = "Myself and #doggirl bought a new car: http://carpictures.com #nomoremoney"
# Pass through each
highlight_mention(str)
highlight_hashtag(str)
highlight_url(str)
puts str # > Myself and [#doggirl] bought a new car: [http://carpictures.com] [#nomoremoney]
In this example, I've wrapped the matches with brackets []. You should use a span tag and style it. Also, you can wrap all three gsub! into a single method for simplicity.
Updated for the asker's add-on error question
It looks like the error is references another method named highlight. Try changing the name of the method from highlight to new_highlight to see if that fixes the new problem.
I am running WYSIHTML5 to allow myself to enter email text and format it for sending as HTML. However when I view HTML of the formatted text I get classes associated with elements for Colors. This is expected behavior but since I need to send the output in an email hence I would like to have those colors to be in Inline CSS, since I cannot attach CSS files with the email like that. Example here
<span class="wysiwyg-color-green">Testing</span>
That is if I select green color for text: Testing. Is there any way to modify that green to become part of html itself like
<span style="color:green">Testing</span>
I have tried to search for this but could not find, so I am not asking without first looking for it. If anybody could please just point somewhere. Even a link to any guide to this, will do. I do not wish that you spend time writing code for me.
You could do it with php :
str_replace ( 'class="wysiwyg-color-green"', 'style="color:green"' ,$html)
You can do the same with javascript, altrough it's always safer to do everything server-side.
http://www.w3schools.com/jsref/jsref_replace.asp
Here's the javascript code I used but may be a good idea to heed Jean-Georges warning above:
replaceColorStylesWithInlineCss = function (htmlContents){
result = htmlContents.replace('class="wysiwyg-color-black"', 'class="wysiwyg-color-black" style="color:black"');
result = result.replace('class="wysiwyg-color-silver"', 'class="wysiwyg-color-silver" style="color:silver"');
result = result.replace('class="wysiwyg-color-gray"', 'class="wysiwyg-color-gray" style="color:gray"');
result = result.replace('class="wysiwyg-color-maroon"', 'class="wysiwyg-color-maroon" style="color:maroon"');
result = result.replace('class="wysiwyg-color-red"', 'class="wysiwyg-color-red" style="color:red"');
result = result.replace('class="wysiwyg-color-purple"', 'class="wysiwyg-color-purple" style="color:purple"');
result = result.replace('class="wysiwyg-color-green"', 'class="wysiwyg-color-green" style="color:green"');
result = result.replace('class="wysiwyg-color-olive"', 'class="wysiwyg-color-olive" style="color:olive"');
result = result.replace('class="wysiwyg-color-navy"', 'class="wysiwyg-color-navy" style="color:navy"');
result = result.replace('class="wysiwyg-color-blue"', 'class="wysiwyg-color-blue" style="color:blue"');
result = result.replace('class="wysiwyg-color-orange"', 'class="wysiwyg-color-orange" style="color:orange"');
return result
};
Note: I kept the wysiwyg styles in there because I'm saving to the db and want it to display properly in the wysihtml5 section when I load it again. DRY it up if you're clever.