I am trying to copy an element to a given CSS selector in Tritium.
The Tritum Spec lists the signature for copy_to as:
copy_to(Text %xpath)
http://tritium.io/simple-mobile/1.0.224#Node.copy_to(Text%20%25xpath)
I am trying to do:
copy_to( CSS_SELECTOR )
For e.g:
copy_to("#header")
I cant seem to get this to work.
Here is the Tritium Tester URL: http://tester.tritium.io/4193cf46a239b4ff440cf1b4c36fb703cd22a5a4
Unfortunately, that won't work because of the way CSS selectors work in Tritium.
According to the spec, CSS selectors are converted into XPath local searches, which means they are scoped.
html() {
$("/html") {
$$("#header > img") {
add_class("logo")
}
$$("#content") {
$("./div[#id='courses']"){
$$("a") {
attribute("href", "http://console.moovweb.com/learn/training/getting_started/generate")
}
copy_to(css('#header'), "before")
}
}
}
}
In your example, your copy_to function is in the scope of $("./div[#id='courses']"), so it won't find the div#header in there.
You'll have to use an XPath selector like this: copy_to("/html/body/div[#id='header']","before")
See here: http://tester.tritium.io/5f0ae313a4f43038ee4adeb49b81236bfbc5f097
Related
I am trying to add a mixin in Magento 2 for the checkout/payment page shipping info section.
There is an existing section in vendor/magento/module-checkout/view/frontend/web/template/shipping-information/address-renderer/default.html as follows:
<each args="data: address().customAttributes, as: 'element'">
<text args="$parent.getCustomAttributeLabel(element)"/>
<br/>
</each>
I want to create a myNewFunction() and call it from here. So, I have temporarily added if="$parent.myNewFunction(element)" to it, like this:
<each args="data: address().customAttributes, as: 'element'">
<text if="$parent.myNewFunction(element)" args="$parent.getCustomAttributeLabel(element)"/>
<br/>
</each>
That pre-existing function getCustomAttributeLabel is defined in vendor/magento/module-checkout/view/frontend/web/js/view/shipping-information/address-renderer/default.js.
This is where I need to add my myNewFunction() at. I don't want to override that entire file and duplicate it into my theme, so I am trying to add the function to it via mixin.
To do this, I have stubbed out a module: app/code/MyCompany.
In this module, I have created:
app/code/MyCompany/Checkout/view/frontend/requirejs-config.js
with this code:
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/shipping-information/address-renderer/default': {
'MyCompany_Checkout/js/view/shipping-information/address-renderer/default-mixin': true
}
}
}
};
Then I created the mixin itself in:
app/code/MyCompany/Checkout/view/frontend/web/js/view/shipping-information/address-renderer/default-mixin.js
with this code:
define([
'uiComponent',
'underscore',
'Magento_Customer/js/customer-data'
], function (Component, _, customerData) {
'use strict';
return function (target) {
return target.extend({
myNewFunction: function (element) {
console.log(element);
return false;
}
});
}
});
I currently have deploy mode set to "development" in Magento. Nonetheless, I have tried removing all the var/* files, generating static content again, and clearing the cache, for good measure.
No matter what, upon loading the checkout/payment page, I keep getting this JS error in the console:
$parent.myNewFunction is not a function
What am I doing wrong here?
I suspected the module needs to have a register.php? Or the module is not loading? Yet, I have seen plenty of other examples such as this guide, this Magento mixin stackoverflow question, and this example on how to add shipping.js functionality via mixin, none of which mention doing anything more with the module other than declaring the requirejs-config.js and the mixin JS file itself.
Just found a way to override that function using 'mixins'.
On requirejs-config.js file I had to add:
config: {
mixins: {
'Magento_Checkout/js/view/shipping': {
'Mynamespace_Mymodule/js/view/shipping': true
}
}
}
How do I traverse comments with babelTraverse?
babelTraverse(nodes, {
CommentBlock: (path) => {
console.log(path)
},
CommentLine: (path) => {
console.log(path)
}
})
Error: You gave us a visitor for the node type CommentBlock but it's not a valid type
The CommentBlock and CommentLine are not part of the program.body in the ast returned by the babel parser. These comment types live outside of the program body. I am assuming that is why we get the Type error when we add CommentLine and CommentBlock.
The comments for a node can be accessed, using traverse, as follows:
traverse(ast, {
ClassDeclaration(path) {
console.log(path.node.leadingComments);
console.log(path.node.trailingComments);
},
});
Seems like you can't traverse that way but you can access comments with:
nodes.comments
I'm attempting to make use of an image uploader, and I have it working in normal posts. However, it does not work on custom post types.
After some searching, it seems I need to call wp_enqueue_media(); somewhere, however, if I do then neither normal posts nor custom post type image uploaders work.
What is the best way to call this function for custom post types?
function media_uploader() {
global $post_type;
if( 'custom-post-type' == $post_type) {
if(function_exists('wp_enqueue_media')) {
wp_enqueue_media();
}
else {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}
}
}
add_action('admin_enqueue_scripts', 'media_uploader');
I'm loving wysihtml5 but I can't find any documentation about something as simple as adding a class to an element.
Basically what I'm looking for is a way to allow 2 different variations on the blockquote element:
blockquote.pull-left
blockquote.pull-right
(where each class specifies different style attributes)
So ideally I'd like to create 2 additional toolbar buttons that allow me to not only use the formatBlock command (to wrap the selection withing a blockquote element) but also specify the blockquote's class.
Any idea?
Try adding a custom function like this into a separate custom.js file for clarity:
wysihtml5.commands.custom_class = {
exec: function(composer, command, className) {
return wysihtml5.commands.formatBlock.exec(composer, command, "blockquote", className, new RegExp(className, "g"));
},
state: function(composer, command, className) {
return wysihtml5.commands.formatBlock.state(composer, command, "blockquote", className, new RegExp(className, "g"));
}
};
And then in your toolbar pass the class name through like this assuming the class is "pull-left":
<a data-wysihtml5-command="custom_class" data-wysihtml5-command-value="pull-left">Pull left</a>
You will also have to add any custom classes into the "whitelist" by going to the advanced.js file and adding them there under classes, otherwise the classes will be stripped out when you save.
I'm defining a Javascript function in my KRL global block that I want to call when the user clicks a link. Here are the relevant parts of the ruleset:
global {
emit <|
function clear_hold() {
app = KOBJ.get_application("a421x26");
app.raiseEvent("clear_hold");
}
|>;
}
rule add_link_to_clear_hold {
select when pageview ".*"
pre {
clear_div = << <div id="clear_hold">
Clear Hold
</div> >>;
}
{
append("body", clear_div);
}
rule clear_the_hold {
select when web clear_hold
{
replace_html("#clear_link", "<div id='clear_link'>Not on hold</div>");
}
always {
clear ent:hold;
}
}
When I click the link I get an error message that clear_link is not defined.
What do I need to do to call my javascript function?
It is suggested to use the following name spacing method to attach JavaScript functions to the KOBJ object to avoid clashes with other apps the user might have running.
KOBJ.a60x33.clear_hold = function() {
KOBJ.log('...wohoo! You found me!');
}
The function can then be called with
KOBJ.a60x33.clear_hold();
The function is defined inside the KRL closure, but I was calling from outside the closure. To make it visible outside I added it to KOBJ after defining the function
KOBJ.clear_hold = clear_hold;
Then to call it from the link:
href="javascript:KOBJ.clear_hold()