I'm using Typo3 version 10+
I created a "Site package extension" to make some nice templates and styles (header / footer / etc)
I'm using constants like this (constants.typoscript):
#cat=My website variables//a; type=string; label=Some id value
config.some_id = 123
BE User can edit the constant in BE.
To use the constant in fluid template, I use this typoscript code (setup.typoscript)
page = PAGE
page {
typeNum = 0
10 = FLUIDTEMPLATE
10 {
variables {
some_id = TEXT
some_id.value = {$config.some_id}
}
}
...
}
In fluid (footer.html) I use this variable:
<f:link.page pageUid="{some_id}">Some link</f:link.page>
Everything works very nice so far.
Now I'm creating a new extension to output some simple events "Events ext" (list / details)
Now question: is it possible to use this constant (some_id from Site package ext) in the Events extension (List.html) as global variable ?
For some reason I can't see any constants in fluid templates of "Event ext". (empty values)
For both extensions I used the code below and included its configs in Typoscript setup
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
$extensionKey,
'Configuration/TypoScript',
'My ext'
);
Constants defined through page.10.variable are only available for page template, not in your extension template.
But you can easily access this variable in your extension with some TypoScript.
Add this TS - in your my_ext/TypoScript/setup.typoscript or through BE in template setup field :
plugin.tx_you_ext.settings {
some_id = {$config.some_id}
}
And then, you can access the data in your Fluid Template with :
{settings.some_id}
Just tired of typing console.log again and again, and do not find a way like Sysout + Control + Space in Eclipse will create System.out.println().
There's a predefined Postfix template that allows you to type .log after a JavaScript expression or string and hit Tab to transform it to console.log().
You can also create a Live template (see Preferences | Editor | Live templates) that would expand into a code snippet once you type the selected abbreviation and hit Tab.
Update: there's now also a plugin that allows you to add console.log with a shortcut: https://plugins.jetbrains.com/plugin/10986-console-log
Yes it does,
<anything>.log and press Tab key. This will result in console.log(<anything>);
ie,
<anything>.log + Tab => console.log(<anything>);
eg1: variable
let my_var = 'Hello, World!';
my_var.log + Tab => console.log(my_var);
eg2: string
'hello'.log + Tab => console.log('hello');
eg3: string and variable
'hello', my_var.log + Tab => console.log('hello', my_var);
[UPDATE 2020]
Typing log + Enter autocompletes to console.log()
I made my own template that seems to work.
It may be useful for somebody.
Abbreviation: ll
Template text:
console.log('$NAME$ ', $VALUE$);
$END$
Variables: (just select the given field values by clicking drop down box)
NAME - jsDefineParameter()
VALUE - jsSuggestVariableName
I'm including what I find to be the most efficient, which I added via live templates -> javascript -> applicable to "Everything". Hopefully someone finds it useful.
console.log('L$LINE$ $MYSTRING$ ===', $MYVAR$);$END$
What it does:
When I type cl and press tab, it creates the log and the first thing you type fills both MYSTRING and MYVAR variables. If you tab again, it selects MYVAR where you can rewrite/delete as desired. The third time you hit tab will take you to the end of the line at $END.
This snippet also prints the line number like L123 but you can easily remove that if it isn't helpful because obviously most browsers show line number anyway.
You also have to set the variables' behaviour as seen in the image below:
Edit variables setup
use Macros!
https://www.jetbrains.com/help/webstorm/using-macros-in-the-editor.html
I recorded a macro that takes the name my cursor is on and create
console.log("#### name = ", name);
on the next line.
and assigned a keyboard shortcut to it :)
super easy, and couldn't get Live Template to get the same result with 1 action.
to create a new macro: Edit -> Macros -> Start Macro Recording. then record your next moves and create the desired result.
this is mine:
This is my solution, it somewhat mimics a turbo-console approach and gives you certain freedoms to build on it.
Step 1: Go to Editor > General > Postfix Completion;
Step 2: Click on JavaScript, click the + button, select JavaScript and TypeScript;
Step 3: In the Key input, type a alias for your command, I choose 'cl' for mine;
Step 4: In the 'Minimum language level' select your desired preference, I choose ECMAScript 6+;
Step 5: In the bellow text area, add your logic, for me it is console.log('$EXPR$', $EXPR$, '$END$');
Step 6: Customize however you like.
So what does all of this do?
Lets consider the following:
const willNeedToBeLogged = 'some value you want to check';
All you need to do for a console long is type
willNeedToBeLogged.cl + press (Tab, Enter or Spance)
And you will get this
console.log('willNeedToBeLogged', willNeedToBeLogged, '');
With your cursor being on the $END$ variable, where you could write, a line, or anything you like.
Have fun!
I made a custom template. This can help you.
Abbreviation: clog
Template code:
console.log("\n\n--------------------------------");
console.log($END$);
console.log("--------------------------------\n\n");
Simplest live template text:
console.log($END$);
Maybe it is a recent addition but you can write log and hit tab and console.log() will appear with the caret in between the braces.
The answer from Ekaterina Prigara (https://stackoverflow.com/a/32975087/5653914) was very useful to me but if you want to log a string like "Test" this method is quicker.
Try a logit plugin. It provides the next logging pattern by default:
const data = 'data';
console.log('-> data', data);
You can configure it.
Try Dot Log (vscode extension), It can automatically transfer aaa.log to console.log('aaa', aaa )
So I'm using ui-router and stateparams to nest child states, and it works well. I'm now trying to find a way to dictate a css class what state level the app is at. main.route1.section1 would be 3 levels.
Here's some non-working code to help show:
<div ng-class="{findState().currentCount}"></div>
app.run(function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.findState = function() {
var currentName = $state.current.name;
var currentMatch = currentName.match(/./g);
$rootScope.currentCount = currentMatch.length;
};
});
I'm basically looking for a way to take $state.current.name which say equals main.route1.section1 and split it at the dot and count how many are in the array and return that number to the mg-class. Unless you have a better idea... like a regex filter?
Take a look of the object $state.$current (instead of $state.current). In particular, the property path : it's an array representing the state hierarchy of the current state.
So what you are looking for is : $state.$current.path.length
I'm trying to implement the google custom search engine to a website running with xslt.
This code is located in the head section
(function() {
var cx = '..............';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
And this snippet in the body
<gcse:search></gcse:search>
But i only get following error Warning: DOMDocument::load(): Namespace prefix google on search is not defined
Some idea why? Do i need a special xmlns?
Cheers
I am trying to make sense of https://developers.google.com/custom-search/docs/element#overview and your posted question. I am kind of guessing but based on https://developers.google.com/custom-search/docs/element#html5 try to replace <gcse:search></gcse:search> in your code with <div class="gcse-search"></div>, that way I hope your XSLT input is namespace well-formed and your attempt to include the Google search in the transformation result works.
Just bringing out how to add attributes example from the links shared by Martin above:
HTML5-valid div tags
You can use HTML5-valid div tags as long as you observe these guidelines:
The class attribute must be set to gcse-XXX
Any attributes must be prefixed with data-.
For example:
<div class="gcse-searchbox" data-resultsUrl="http://www.example.com"
data-newWindow="true" data-queryParameterName="search" >
I am using mako templates in pyramid which uses the ${} construct for variable substitution. I also use an Openlayers script to show a map with features. I want to style my features with Stylemap like so:
var symbolizer = OpenLayers.Util.applyDefaults(
{externalGraphic: "images/${thumbnail}.png", pointRadius: 20},
OpenLayers.Feature.Vector.style["default"]);
var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 30}});
var vectorLayer = new OpenLayers.Layer.Vector("thumbs", {styleMap: styleMap});
...
vectorLayer.features[0].attributes.thumbnail="sight";
vectorLayer.features[1].attributes.thumbnail="bar";
See also The OpenLayers Styles Framework.
The problem I have is that mako interprets the Openlayers ${} variable as its own variable and I get a "NameError: Undefined" from the server. I have searched a while but could not find a solution.
The most concise solution I found was this:
"images/$${}{thumbnail}.png"
For completeness, the ones in the post mentioned by tonio are:
"images/<%text>${thumbnail}.png"
"images/${"$"}{thumbnail}.png"
As far as I remember, you can use a double dollar sign to escape it:
"images/$${thumbnail}.png"
HTH,
EDIT: Huh, seems I was wrong, see https://groups.google.com/forum/#!topic/mako-discuss/g00Qq3_FNgg