I like to integrate the Toasts from Materializecss to an SVG. I am able to import the css and js from Materializecss, but when I load the svg I get Uncaught TypeError: Cannot use 'in' operator to search for 'touchAction' in null
Example: http://www.idoodler.de/svgTest.svg
Is there any way to make this work?
I struggled with this for some time. I tried HTMLencoding the image, used base64-encoded image source, direct SVG inline image source. I got non of these to work, and that's mostly due to quotation marks. Plain old URLs proved simplest. (And the method I thought of last)
The solution proved very simple in the end:
Materialize.toast('<img src=\"http://www.idoodler.de/svgTest.svg\" />', 5000);
The escaping is kind of ugly and error prone, though. First time I got this working but calling my own function instead of triggering Materialize.toast() directly:
<script>
function imageToast(imageUrl) {
Materialize.toast('<img src="' + imageUrl + '" />', 5000);
}
</script>
imageToast(http://www.idoodler.de/svgTest.svg);
By wrapping the image source in it's own function, we don't have to deal with all kinds of quotation marks anymore. This solution should also work with inline sourcing of the image using pure SVG or base64.
My guess is that you want this kind of dynamic, right? My suggestion is simply to generate the SVG you want, save it, then apply toast() to the URL directly.
Sources:
https://css-tricks.com/probably-dont-base64-svg/
Here's a Codepen for you to try:
http://codepen.io/anon/pen/GJrvpj
Good luck.
Related
I have a function in my library that takes some variables and returns an HTML page with those variables inserted. What is the best practice not to litter my module with a large HTML literal? I mean that when I read my code it just "doesn't seem right" to have a piece of HTML that I have to scroll through.
I use the format! macro with "{}" in places in the literal where I want insert variables so I guess that keeping the page as a file and loading it wouldn't work. I don't have to use format! macro, but it seems elegant to not process text manually when I have this kind of tool.
Would creating an entire module just to hold this page be a good practice? In my mind a module is something "bigger", but maybe that's the best thing to do?
You can save the HTML in an external file and include it via std::include_str. For example
let html_code = format!(include_str!("src/index.html"), my, values, in, the, template);
A playground application doesn't quite work here due to the compile-time requirement of the file, but locally the following worked:
src/
foo.txt -- "{}"
main.rs -- println!(include_str!("foo.txt"), 1234);
I tried to create a Map using folium library in python3. It work's fine until i add a Marker to the map. On adding Marker the output results in just a blank HTML page.
import folium
map = folium.Map(location=[20.59,78.96], tiles = "Mapbox Bright")
folium.Marker([26.80,80.76],popup="Hey, It's Moradabad").add_to(map)
map.save("mapOutput.html")
#MCO is absolutely correct.
I like to leverage html.escape() to handle the problem characters like so
import folium
import html
map = folium.Map(location=[20.59,78.96], tiles = "Mapbox Bright")
folium.Marker([26.80,80.76],popup=html.escape("Hey, It's Moradabad")).add_to(map)
map.save("mapOutput.html")
in my experience, folium is very sensitive to single quotes (').
The reason being, folium generates javascript, and transforms your strings into javascript strings, which it encloses with single quotes. It does, however, not escape any single quotes contained in the string (not even sure if that's possible in js), so having a single quote in the string has the same effect as not closing a string in python.
Solution: Replace all single quotes in your strings with backticks (`) or (better) use #Bob Haffner's answer.
Edit: out of sheer coincidence i stumbled over another solution just now. Apparently folium.Popup has an argument parse_html. Use it like this:
folium.Marker([x,y], popup=folium.Popup("Foo'Bar",parse_html=True)).add_to(map)
however, i could not make it work without running into a unicodeescape error. nonetheless it exists, supposedly for this purpose, and might work for you.
Edit 2: As i've been told on github, this issue will be fixed in the next release. Ref: folium#962
A seemingly straightforward question I cannot seem to crack. I am retrieving escaped & sanitized html from a database and I want to unescape it and render it as html in Jade. I have seen this jade html escaped string question, but the answer is NOT what I want. In the answer to this question the tag is rendered as a string, and NOT as markup. I specifically want the escaped string to be rendered as markup. I have tried the following with the following results.
var escapedstring = '<p>Some Textlt;/p>';
In Jade...
1. div=escapedstring renders <div><p>Some Text</p></div>
2. div!=escapedstring renders <div><p>Some Text</p></div>
3.div
!{escapedstring} renders <div><p>Some Text</p></div>
4.div
#{escapedstring} renders <div><<p>Some Text</p>><!--<p>Head Lease</p>--></div>
Using unescape(escapedstring) produces the same results. Can someone show me what I am doing wrong please?
TIA
For anyone else who comes here, this is what I did. Many thanks to stdob who commented. I have a module called viewhelpers which I add to the locals object globally as a property called vh so that it is available to the jade views. I then npm install a module called html-entities (https://www.npmjs.com/package/html-entities). Then in my viewhelpers I added these two lines..
var ent = require('html-entities').XmlEntities;
module.exports.decode = ent.decode;
Then in my view I can simply use
div!= vh.decode(tenancynote.note)
Hope this helps someone.
I'm trying to use #font-face selector in cassius template with no luck.
Cassius uses # for interpolation, is there any way to escape it?
I've tried ## and \#, none of them works.
Following template
#font-face
font-family: 'Monsieur La Doulaise'
src: url('http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise')
Results in
src: url('http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise');}
This is pretty ugly, but may work:
...
defaultLayout $ do
let atSym = "#"
[cassius|#{atSym}font-face ... |]
...
in other words, bind a string to the value of "#" and interpolate that in the cassius file. I can't check the syntax now but it may work.
This is not a solution to your question but I thought I will let you know that ran into something related this morning. I had the following CSS section:
.myclass {
background: #d880efe;
background-image:url(#{StaticR img_myimage_png});
/* more stuff */
}
When Yesod compiled the CSS file, it did not generate the URL for the background-image. In fact, it skipped over the entire line and created a slightly different background property. I ended up skipping the `#{StaticR ...} and hard-coded the URL. When I get a chance I will create a reproducible code.
So I am guessing this is an issue with # interpolation and not so much escaping. Do you mind trying a #{Handler} for your src? If that line is not getting generated then it may be a different issue that we need to file a bug report for.
I am using watir-webdriver (0.5.3) in a Cucumber (1.1.9) test. I am attempting to verify the text value of an <acronym> tag. The code is legacy, and there are plans to change it to a <div> or <span> tag, but in the mean time I have to deal with it. I first attempted:
#browser.acronym(:id => /expense_code(.*)/).text
I received the following error:
NoMethodError: undefined method `acronym' for #<Watir::Browser:0x33e9940>
I poked around in the Watir code to see how tag objects were being created, and found that they seem to be dynamically created based on the HTML5 spec, but then I also found a comment in element.rb stating that they are no longer being created from the spec. At any rate, I couldn't see an easy way to inherit a <span> object and call it an <acronym> object. So, I looked into alternatives, and found the element object.
#browser.element(:id => /expense_code(.*)/).text
This code works, but it takes about a minute to traverse my page. I'm stuck with the regex for now, as the tag id is actually dynamically generated and I don't currently have a way to figure out those values. This is what the tag actually looks like:
<acronym class="editable select fillwith:exp_codes default:E100"
title="Expense Code: Expenses" id="expense_code114_582_10777">
E100 </acronym>
I would appreciate any thoughts on how I can improve the performance of my test.
Is that class name predictable? could you construct that from a set part plus the text you are about to validate (it's the same in your example above) and go that way?
acronym = 'E100'
browser.element(:class, 'editable select fillwith:exp_codes default:#{acronym}'.text.should == acronym
Does using XPath to limit the elements to just acronym tags help performance?
#browser.element(:xpath, "//acronym[contains(#id, 'expense_code')]")
UPDATE: As Chuck mentioned, CSS-Selector is also an option:
#browser.element(:css => "acronym[id^=expense_code]")
I was recently stealing logic from Watir 1.6.5 to make custom locators/collections for my page objects and I noticed in the Watir::TaggedElementLocator, it kind of supports any method that the element supports. Noticing in Watir-Webdriver that elements have a tag_name() method, I thought I would try the same and it looks like it works.
So you can use tag_name as a locator by doing:
#browser.element(:tag_name => 'acronym', :id => /expense_code(.*)/).text
I'm not sure what order the locators get run in, so since the regex is expensive, it might be faster to get all the acronym elements and then find the one with the right ID:
#browser.elements(:tag_name, 'acronym').find{ |acronym|
acronym.id =~ /expense_code(.*)/
}.text
While I think it makes the code look better, unfortunately I'm not sure if its any faster. I am guessing the performance of each will depend on the specific page layout being tested.
I'm not sure what the proper etiquette is here, but this is the answer I came up with using Chuck's reply and feedback from jarib in the #watir IRC chat. With all my examples, expense_code = 'E100'.
#browser.element(:tag_name => "acronym",
:class => "default:#{expense_code}").text
The above code works at a very reasonable speed and doesn't require an xpath. It is a shortening of the following code:
#browser.element(:tag_name => "acronym",
:class => "editable select fillwith:exp_codes default:#{expense_code}").text
I learned that I didn't need to pass the whole string. Anything in a class delimited by a space is dealt with gracefully by watir. I adapted that code from this xpath:
#browser.element(:xpath => "//acronym[contains(#class,
\'editable select fillwith:exp_codes default:#{expense_code}\')]").text
The gotcha in that code above was needing to escape out the ' around the class values so that it would evaluate correctly.
Just searching for the class (code below) did not work. I have no idea why. I did notice that it pounded the database with requests. Whatever it was doing, the page didn't like it. Though the reason it was trying multiple times is I slipped a wait_until_present in there.
#browser.element(:class, "editable select fillwith:exp_codes
default:#{expense_code}").text
Thanks for the help. :)