I want to change colour dynamically using HEX code with inline CSS in the thymeleaf template.
But when I set hex code colour in the context.setVariable("invoiceColor","#E01B33"), the result of this template comes as \#E01B33.
Context context = new Context();
context.setVariable("invoiceColor", "#E01B33");
var templateHTML = templateEngine.process("invoiceA4", context);
Template Code
<style th:inline="css">
:root {
--primary-color: [[${invoiceColor}]];
}
</style>
Generated HTML
<style th:inline="css">
:root {
--primary-color: \#E01B33;
}
</style>
How do I change colour dynamically?
[[ ... ]] will escape what is there. Try [( .. )] instead:
--primary-color: [(${invoiceColor})];
See https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html chapter "Expression inlining":
Note that, while [[...]] corresponds to th:text (i.e. result will be HTML-escaped), [(...)] corresponds to th:utext and will not perform any HTML-escaping.
Related
I had used SpringRestDoc and want to collapse Table of Contents.
Below my index.adoc
= Service Rest Docs API Document
:doctype: book
:icons: font
:source-highlighter: highlightjs
:toc2: left
:theme: flatly
:toclevels: 1
:sectlinks:
[[introduction]]
== information
----
Spring Rest Document
----
...
Thanks,
The default template for Asciidoctor does not include functionality to expand/collapse the ToC. You would need to add your own CSS/JavaScript to achieve that goal.
The simplest way to do that is to use a "docinfo" file. See https://docs.asciidoctor.org/asciidoctor/latest/docinfo/ for details.
Here is a very simplistic implementation that demonstrates the concept:
In your document, in the header (say, just under the :doctype: attribute definition), add the line :docinfo: shared.
Create a file called "docinfo.html" in the same folder as your document; this file contains your custom CSS and JavaScript.
Add the following content to the docinfo.html file:
<style>
button.tocSwitch {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var target = document.querySelector('#header')
var button = document.createElement('button')
button.className = 'tocSwitch'
button.innerHTML = 'ToC'
button.addEventListener('click', function (e) {
e.stopPropagation()
var toc = document.querySelector('#toc')
var body = document.querySelector('body')
if (body.classList.contains('toc2')) {
body.classList.remove('toc2')
body.classList.remove('toc-left')
toc.style.display = 'none'
}
else {
body.classList.add('toc2')
body.classList.add('toc-left')
toc.style.display = 'block'
}
})
target.appendChild(button)
})
</script>
This content defines some CSS styling for a button, and some JavaScript the dynamically creates the button, adds the button to the header of the page, and an event listener such that when you click the button, the appropriate class name and CSS style adjustments are made to show/hide the ToC.
I have this class:
.currency-flag-clp:before {
background-image: url('~currency-flags/dist/square-flags/clp.svg');
}
I want to add that class dynamically to an html element, so I need to add a class like:
.currency-flag-XXXXX:before {
background-image: url('~currency-flags/dist/square-flags/XXXXX.svg');
}
Is there a way with sass to do that? I don't want to define 270 class per value, I just want to create the class depending on my data.
As you want to set an individual class on the element it seems you have access to your currency data when building the page. In that case there may be an alternative more simple approach without SASS.
(1) ALTERNATIVE (NON SASS) SOLUTION - maybe a simpler approach
(a) Write a css variable 'actual-currency-flag-url' for your actual flag-image to a style block in the head of your file based on the actual user setting/currency.
(b) Then use that variable to build the url-path in css.
// add to <head> of page:
// based on your data maybe you can do it by php
// note: don't use slashes when building url(...)
<style>
:root {
--actual-currency-url: url(url-path/flag-[actualCurrency].jpg);
}
</style>
// change class off html element
// from <div class="currency-flag-XXXXX"> to:
<div class="currency-flag">
// now you can do in your separate stylesheet file:
.currency-flag:before {
background-image: var(--actual-currency-url);
}
Writing the style direct to the element is less elegant but works as well of course.
(2) POSSIBLE SASS SOLUTION - building 270 classes in SASS using a mixin
(a) Based on your data: generate a simple suffix-list and use it to build a SASS map with the suffixes of your flags.
(b) Use #each to build all 270 classes at once
// example code in SASS:
$flag-suffixes: (
USD,
AUD,
EUR,
//...
);
#each $suffix in $flag-suffixes {
.currency-flag-#{$suffix}:before {
background-image: url('~currency-flags/dist/square-flags/#{$suffix}.svg');
}
}
I'm using Ck Editor in a program that builds email templates. Every email template has it's own styles that overwrites text inside the content blocks.
So currently when I add a smiley in the text block with Ck Editor, the template styles adds float left and display block to images inside the text block.
Which means that all smileys are floated to the left.
Is there a way that I can add inline styles to the actual smiley image that's inserted so that it looks like this:
<img alt="cool" height="23" src="/vendors/ckeditor/plugins/smiley/images/shades_smile.png" title="cool" width="23" style="float: none; display: inline-block;">
Thank you in advance.
You can try to check when inserting an element if it the src attribute contains a string like "smiley" for example and then add a class or inline style to the element:
CKEDITOR.replace('editor1', {
on: {
insertElement: function(e) {
if (e.data.getName() !== 'img') return;
if (e.data.getAttribute('src').indexOf('smiley') > -1) {
e.data.addClass('smiley-class');
}
}
}
});
<script src="https://cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
<textarea name="editor1"></textarea>
I am using a responsive image technique setting a max-width of 100% with CSS.
This isn't working for any images added through CKEditor, as an inline style is added.
In CSS I have added a style to override the width, which works, but height: auto doesn't, so the images is stretched.
I need to find a way to stop CKEditor from adding the inline style in the first place.
I am using CKEditor 4.x
Thank you
A far better alternative to the accepted answer is to use disallowedContent (see docs), as opposed to allowedContent.
Using allowedContent requires you to create a rather large white-list for every possible tag or attribute; where as disallowedContent does not; allowing you to target the styles to ignore.
This can be done like so:
CKEDITOR.replace( 'editor1', {
disallowedContent: 'img{width,height};'
});
Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your config.allowedContent that you don't want to have width and height in <img> styles, then editor will automatically convert styles to attributes. For example:
CKEDITOR.replace( 'editor1', {
allowedContent:
'img[!src,alt,width,height]{float};' + // Note no {width,height}
'h1 h2 div'
} );
then:
<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>
becomes in the output:
<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>
and, as I guess, it completely solves your problem.
You can listen to instanceReady event and alter any element before saving, in your case the img tag
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function (element) {
// check for the tag name
if (element.name == 'img') {
var style = element.attributes.style;
// remove style tag if it exists
if (style) {
delete element.attributes.style;
}
}
// return element without style attribute
return element;
}
}
});
});
I am writing a Firefox extension using JavaScript and XUL. Part of my code needs to be able to take some XUL markup and dynamically append it inside an existing container element. So basically I need to appendChild() but with a text string instead of a Node object. To do this, I tried the method listed in this question. Unfortunately this does not seem to work. It appears that div.childNodes returns an empty nodeList, which I can't even append to the container. The error is
Error: Could not convert JavaScript argument arg 0 [nsIDOMXULElement.appendChild]
I'm not quite sure what I am doing wrong. Is there a way to make this work, or some alternate method to dynamically set the container's markup?
Note: The container element is of type richlistbox.
function updateContainerData(containerName){
try{
var resultsArray = DB.queryAsync("SELECT nodeData FROM waffleapps_privateurl");
container = document.getElementById(containerName);
for (var i = 0; i < resultsArray.length; i++) {
/*
// This works - appending an actual Node ( duplicate from a template)
template = document.getElementById("list-item-template");
dupNode = template.cloneNode(true);
dupNode.setAttribute("hidden", false);
container.appendChild(dupNode);
*/
// This doesn't work
div = document.createElement("div");
//var s = '<li>text</li>';
var s = "<richlistitem id ='list-item-template'><hbox><checkbox label='' checked='true'/> <description>DESCRIPTION</description><textbox>test</textbox><textbox></textbox></hbox></richlistitem>";
div.innerHTML = s;
var elements = div.childNodes;
container.appendChild(elements); // error
}
}
catch(err){
alert( "Error: " + err.message);
}
}
I have gotten a bit further by using the following code. Now I am able to insert HTML elements in the container, but it appears that XUL elements are not parsed properly - the checkbox and textbox do not appear. I'm not sure how I would change this so it parses the HTML and XUL markup correctly.
var s = "<richlistitem id ='list-item-template'><hbox><checkbox label='' checked='true'/> <description>DESCRIPTION</description><textbox>test</textbox><textbox></textbox></hbox></richlistitem>";
var dp = new DOMParser();
container.appendChild(dp.parseFromString(s, "text/xml").documentElement);
You need to do an appendChild for each element in the "elements" nodeList (assuming there's more than one).
Also note: a list element should have a parent ol or ul element.
I finally figured out how to properly parse and append a XUL markup string. I was able to use the parseFromString method from a new DOMParser(). I had to make sure that the element's markup specified the namespace (xmlns) so the parser knew it was XUL markup.
The code below shows a full example.
test.js:
test = function(){
alert("testing");
container = document.getElementById("testing");
var dp = new DOMParser();
// must specify namespace
var s = "<textbox xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' value='test' size='20'></textbox>";
element = dp.parseFromString(s, "text/xml").documentElement;
container.appendChild(element);
document.getElementById("testing");
}
test.xul:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css"
href="chrome://testextensionname/skin/test.css" ?>
<!DOCTYPE window SYSTEM
"chrome://testextensionname/locale/test.dtd">
<window xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="testWindow"
orient="vertical" title="TEST" statictitle="TEST"
width="50" height="50;" screenX="10" screenY="10"
>
<script type="application/x-javascript" src="chrome://testextensionname/content/test.js" />
<hbox id="testing">
<button label="Go" oncommand="test()"/>
<textbox value='test' size='20'></textbox>
</hbox>
</window>