I am wanting to output examples which has HTML within it such as
* #example
* <div ng-app="reportingBuilderApp">
* <div ng-view></div>
* </div>
But at the moment it renders it "safely" as HTML however I want it as text, at the moment I am needing to write the example as below (which is much more tedious and ugly in the actual JS)
* #example
* <div ng-app="reportingBuilderApp">
* <div ng-view></div>
* </div>
Is there any way of sorting JSDoc to prevent the HTML from being output "safely" automatically?
Using version 3.3.0-alpha4, with the following test file:
/**
* #example
* <div ng-app="reportingBuilderApp">
* <div ng-view></div>
* </div>
*/
function foo() {
}
I get an example that shows up correctly in the output of jsdoc.
As the name suggests, 3.3.0-alpha4 is still in alpha. To my knowledge there is no version previous to 3.3.0-alpha... which has the fix for this problem, and no workaround for it. The bug report that prompted the fix is here.
There is no way to get around this. You will need to use HTML escape code if you want to show the < and > symbols in the final HTML JSDoc pages.
Related
According to the documentation of YUIdoc (which seems to be in this case equivalent to jsdoc) there is a #throws tag to document a potentially thrown error.
Specifies an error which method throws. A #throws tag has the
structure #throws {type} description. The {type} is optional.
In my case there are several checks in a function which can throw an error so I would like to list them with #throws. But you can not have more than one #throws tag. So how can I put a list of potentially thrown errors in this tag?
I know it is old. But as this is the first google result but does not have a proper answer I will show you the solution I found here: https://stackoverflow.com/a/29720979/8466273
Just use multiple #throws:
/**
* -- other definitions --
* #throws {RangeError} must be in range 0 to 10
* #throws {URIError} wrong URI given
* -- other definitions --
*/
Finally I can answer the question myself:
Just make it a list. If you like you can change the look of the text via style tag - just add it to the <ul>
* #throws {}
* <ul >
* <li> {exception} Condition 1</li>
* <li> {exception} Condition 2/li>
* <li> {exception} Condition 3</li>
* </ul>
Is there a way to verify that element 'Adam Slodowy' is bold in Selenium IDE?
This is the fragment of site code:
...
<div class='thread-content-row.thread-content-row-1'>
<div class='thread-content-row-left'>
<div class='thread-content-row-right'>
<div class='discussion-info'>
<b>Daria Ogrodowska</b>
do
<span>super</span>
,
<span>Adam Slodowy</span>
</div>
<div class="discussion-content"> bla bl balkjbasdfsdfsdfdsfsdf sdfsdf sdf sdf </div>
</div>
</div>
I've tried to use verifyEval command:
Command: verifyEval
Target: var elem = window.document.querySelector("div.thread-content-row.thread-content-row-1 > div.thread-content-row-right > div.discussion-info span"); window.getComputedStyle(elem,null).getPropertyValue("font-weight");
Value: 700
but I have no idea how in querySelector refer to second span - querySelector("div.thread-content-row.thread-content-row-1 > div.thread-content-row-right > div.discussion-info span[2]") doesn't work.
It is really much more practical for a human person to check styles as even if it was bold it could look really bad and Selenium wouldn't be able to tell if it looked "bad" or not.
That being said, you would probably want to utilize xpath query on this one.
xpath=//span[contains(text(), 'Adam Slodowy')
or if you have more than one of those in your web page.
xpath=//div[#class='discussion-info']/span[contains(text(), 'Adam Slodowy')
the // indicates to look through the web page for an element that matches whatever follows. Which is very beneficial so that you don't have to include entire xpath which is very fragile if any of the structure changes.
Should be simple enough. I'm trying to add an input field to a fluid partial in the extension "yag" (yet another gallery).
Input: <f:form.textfield id="live-filter" name="test" />
Output: <input id="live-filter" type="text" name="test" />
Somehow the code get's filtered along the way, but I don't know why.
TYPO3 v. 6.2
YAG v. 3.2.1
Edit: A wild guess would be some output filtering in TYPO3 itself, but where? I didn't set anything by purpose.
You need to traverse the path upwards to check if there is any fluid tag wrapped around it, that does escaping. In general, all tags do escaping.
Also check the code around <f:render partial....
It could also be that the TypoScript code that does calls the fluid template, has a .htmlspecialchars = 1 set.
Since TYPO3 8 there is another pitfall: Custom Viewhelpers do htmlspecialchars on the output unless told otherwise. The solution is:
<?php
namespace Vendor\ArTest\ViewHelpers;
class YourViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHelper{
/**
* As this ViewHelper renders HTML, the output must not be escaped.
*
* #var bool
*/
protected $escapeOutput = false;
As of TYPO3 ver. 9.5 and up to ver. 10.4 you could also wrap the output in the Fluid template into <f:format.htmlentitiesDecode> Tags like this:
<f:format.htmlentitiesDecode>
<f:form.textfield id="live-filter" name="test" />
</f:format.htmlentitiesDecode>
Further information on this can be found in the TYPO3 View Helper Reference.
I've a mixed HTML / JS template, when I'm working with JS arrays, Fluid tries to make autosubstitutions.
Is there a way to escape curly brackets in Fluid template ?
UPD :
Actual working syntax to escape JS parts is :
<script type="text/javascript">/*<![CDATA[*/
/*]]>*/
var llKeyOne = '{f:translate(key:"key1")}';
var llKeyTwo = '{f:translate(key:"key2")}';
/*<![CDATA[*/
var myTranslations = {
llKeyOne: llKeyOne,
llKeyTwo: llKeyTwo
};
/*]]>*/</script>
Try to use
<![CDATA[...]]>
tags around your JS code.
The CDATA solution stopped working in 8.7
I managed to solve the problem using alias in a usecase that heavily mixes javascript and fluid. {l} stands for left (open curly bracket) and {r} stands for right (close curly bracket):
<f:alias map="{l: '{', r: '}'}">
var alter = {};
<f:for each="{alterDB}" as="a">
if (!alter[{a.einsatz}]) { alter[{a.einsatz}] = {}; }
alter[{a.einsatz}][alter[{a.einsatz}].length] = {l} label: "{a.bezeichnung} ({a.kuerzel})", value: {a.uid} {r};
</f:for>
</f:alias>
Since it didn't worked for me in TYPO3 v8.7.16 with the <![CDATA[]]> solution above, I wanted to share my own solution. My "hack" to escape the brackets is to wrap those with a <f:format> viewhelper.
My goal was to output this in the frontend (400 and swing are fluid variables):
<ul data-animate="{duration:400, easing:'swing'}">
...
</ul>
I did this in the Fluidtemplate and it worked perfectly:
<ul data-animate="<f:format.raw>{</f:format.raw>duration: {data.myfield1}, easing:'{data.myfield2}'<f:format.raw>}</f:format.raw>">
...
</ul>
Solution working in TYPO3 9.x / 9.5.x
To avoid too much markup around curly braces which has a "not so nice" impact on the summary markup (readability and IDE support / highlighting) here an additional solution.
Possible limitation:
In our case the fluid template only contained fluid template variables within the templates head section followed by the entire markup which is processed/rendered by angular.js.
So we've created a partial for the angular.js part and included those inside the main fluid template.
Example:
The included partial file now starts using a {parsing off} statement (see example below).
Partial (simplified):
{parsing off} <!-- This solved all our issues -->
<div ng-show="showSlider">
<div class="slider" data-test="slider-wrapper">
<div class="row">
<div class="slide-indicator-mask col-lg-12">
<div class="slider-scope page-{{firstSlide}}"></div>
</div>
</div>
</div>
Use a fluid-Variable to add "![CDATA[" into your script.
I use the the tag-notation of fluid in javascript, because the syntax-highlighting works better with it.
<script type="text/javascript">/*{startCDATA}*/
var llKeyOne = '<f:translate key="key1" />';
var llKeyTwo = '<f:translate key="key2" />';
var myTranslations = {
llKeyOne: llKeyOne,
llKeyTwo: llKeyTwo
};
/*{endCDATA}*/</script>
I solved the bracket-problem with TYPO3-fluid and angulars-expressions in my dynamic template in the same way
<f:alias map="{ang: {s: '{{', e: '}}'}}">
...
<div class="{ang.s}{class}-{subclass}{ang.e}">...
</f:alias>
The last answer helpt me insert the files public url of an YouTube Video in TYPO3 fluid template using Video-js with Video-js YouTube extension.
After adding an new video in fileadmin and posting {file.publicUrl} in fluid returns an error. wrapping it inside f:format will do the job!
<f:format.raw>{file.publicUrl}</f:format.raw>
This is the whole code for getting YouTube Videos:
<f:if condition="{file.originalFile.properties.extension} == 'youtube'
<video
id="vid1"
class="video-jS"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<f:format.raw>{file.publicUrl}</f:format.raw>"}] }'
>
</video>
</f:if>
Maybe too late but I found also one funny solution.
When I was integrating google seach structured data I found there this settings which should go to the template
<meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>
And this is the easiest way I found for integration there
<meta itemprop="target" content="https://query.example.com/search?q={<f:format.raw>search_term_string</f:format.raw>}"/>
For the issue with a data attribute like
<ul data-animate="{duration:400, easing:'swing'}">
...
</ul>
the easiest solution I found was to simply swap single quotes and double quotes, like
<ul data-animate='{"duration":"400", "easing":"swing"}'>
...
</ul>
I’m working in the Moovweb SDK and am optimizing my personal desktop site for mobile.
How do I transform all my <p> tags to <div> tags? I really don't want to do it manually! Search and replace?? haha
You can use the name() function to change the name of an element. For example:
$("//p") {
name("div")
}
See it in action here: http://tester.tritium.io/bd1be4f2c187aed317351688e23f01127d26343a
Cheap way: Add p{margin:0} to your CSS, this will remove the only special styling of <p> tags making them look like <div>s.
This is only a visual effect, though. For instance, you're still not allowed to put a <form> inside a <p>, even with the above CSS. If that's what you're after, a simple search and replace will do:
Replace <p> with <div>
Replace <p␣ (left angle, p, space) with <div␣ (there's a space at the end of that one too)
Replace </p> with </div>
That should do it!