i tried the below code it's not working
<paper-toast class$="center cursor-d horizontal justified layout" duration="4000" id="toast" no-cancel-on-outside-click="false" on-iron-announce="toast_open" on-transitionend="transition">
<div class="cursor-p self-start" hidden="[[!undo]]" on-click="clear_undo">UNDO</div>
</paper-toast>
but
document.querySelector("#toast").noCancelOnOutsideClick = false
is working when i try it from console
what is correct html syntax to assign false ? pls help
This is actually a bit tricky. noCancelOnOutsideClick is a Boolean attribute. Normally, any presence in the HTML will set it to true, inlcluding no-cancel-on-outside-click="false".
If you want to set it to false you would just leave it away in your HTML.
So to set the value to true, you would do this:
<paper-toast no-cancel-on-outside-click>
And for false this:
<paper-toast>
However the attribute defaults to true, so the above does not work.
You could either set the attribute in the ready function like you do now in the console or use data-binding.
<paper-toast no-cancel-on-outside-click$=[[myFalseValue]]>
There's an interesting discussion on Boolean attributes in Polymer on Github.
Related
I use vega-react and I would like to know the easiest way not to display the "Actions" button on the chart.
if I declare all actions to be false it will not display any actions but the button will still be present.
<Vega spec={spec as VisualizationSpec} data={barData} actions={{
export: false,
source: false,
compiled: false,
editor: false,
}} />
As mentioned in the vega-embed documentation, the actions setting can either be an object or a Boolean, and relevant to your question:
If the value is true, all action links will be shown and none if the value is false
So I believe what you want is actions=false
Yes, set actions: false, however what I didnt realise is that this has to be in the third parameter of the vegaEmbed function
vegaEmbed(
'#vegaChart_traders',
yourVlSpec,
{renderer: "svg", actions: false}
);
rather than in the yourVlSpec object
hope that helps someone :)
I have multiple elements on a page that are triggering a load of select2 to the element. I'm trying to conditionally check if the element has a certain class, and if so add the tag option; otherwise do not. I thought something like this would work, but it's not:
$('.element_to_add_select_two_on').select2({
tags:function(element) {
return (element.className === 'classname_i_am_targeting');
},
});
What am I missing here? I'm subjecting myself to the following buffoonery to get this to target and load:
$('.element_to_add_select_two_on').each((index,element) => {
let showTags = false;
if ($(element).attr('class').split(' ').includes('classname_i_am_targeting')) {
showTags = true;
}
$(element).select2({
tags:showTags,
});
});
There are a few problems with your first attempt. First, you are defining tags as a function when what you want is the result of the function, since tags needs to be defined as a boolean true or false. The other is that inside your .select2() call, you do not have access to the calling element $('.element_to_add_select_two_on') in the way that you think. It isn't an event that you are listening on, it's a function call that wants an object passed with its configuration.
You conveyed that your second method works, but it can be simplified with the jQuery hasClass() function:
$('.element_to_add_select_two_on').each((index, element) => {
$(element).select2({
tags: $(element).hasClass('classname_i_am_targeting'),
});
});
There is a much simpler way to do all of this, however, and it is much more flexible and already built into select2 via the way of data-* attributes (note, you need jQuery > 1.x). You can simply add data-tags="true" to any of your select elements with which you want tags enabled. These will override any configuration options used when initializing select2 as well as any defaults:
<select data-tags="true">
...
</select>
I am reviewing polycasts ep 47 app code for blog-pages.html, specifically the data binding.
In blog-pages.html, the host properties isLoading, postsActive, and postsData were not declared as blog-pages host properties. How was this possible since they are blog-pages host properties?
<app-route route="{{route}}"
pattern="/posts/:slug"
active="{{postsActive}}"
data="{{postsData}}"></app-route>
<list-page category="{{category}}"
active={{listActive}}
loading="{{isLoading}}"></list-page>
<post-page post="{{postsData.slug}}"
active="{{postsActive}}"
loading="{{isLoading}}"></post-page>
<div class="overlay" hidden$="[[!isLoading]]">
<paper-spinner active="[[isLoading]]"></paper-spinner>
</div>
</template>
<script>
Polymer({
is: 'blog-pages',
observers: [
'_lockScroll(isLoading)'
],
_lockScroll: function(isLoading) {
if (isLoading) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'visible';
}
}
});
</script>
</dom-module>
This is not best example of how polymer works.. For beginners it might be confusing. All these variables you wrote are defined by some polymer's elements.
For example in blog-app.html you can see app-route which has property data, tail and pattern. When you look inside app-route.html file, you can see that property tail has notify: true option. Which means, that it will propagate this property to parent element. So when you define binding in app-route like: <app-route tail="{{someProp}}"></app-route> then in your element there will be existing someProp property.
The same is in other files. For example take a look at isLoading. In blog-pages.html you can see there is binding to isLoading but it is nowhere defined. Well it is. In child element. So open list-page.html and take a look at <iron-ajax> where you can see loading="{{loading}}". And again the same. take a look inside iron-ajax.html and find property loading. What you see? again notify: true option. Which means, it get propagated to parent (list-page.html) and in list-page.html you can see there is also defined loading property which has notify:true so it gets propagated once more to parent (blog-pages.html) And because in blog-pages.html we have binding loading="{{isLoading}}" then it's saved into isLoading property
And this is how polymer works.. This example of some project is really hard to udnerstand and for beginners it's impossible. I hope that my explanation helped you a little bit, but I think you are now much more confused :-D.
If you have more questions, then ask. It's no problem to explain something
I have been looking for a media player for a project that I am working on and I stumbled upon Speakker (http://www.speakker.com/) today. Speakker seems to offer exactly what I am looking for, however, there are a couple of buttons on the interface that I just can not have (see below in red).
Has anyone else used this player before, and if so, how can I get rid of these buttons?
You can disable them by altering the "plugin_share" config-object. You need to set the value for each entry to "false" like:
$projekktor('.speakker dark', {
plugin_share: {
links: {
'download': false
'lastfm': false,
'wikipedia': false,
'admin': false
}
});
For some attributes, it is the presence of the attribute that has an effect - the value that is assigned to it is irrelevant. For example, the autofocus attribute can be set to 'false' or 'true, or 'banana' and the element is still gets automatically focused. IE, the following are all equivalent and cause the div to get focus :
<div autofocus="false" contenteditable="true"></div>
<div autofocus="true" contenteditable="true"></div>
<div autofocus="banana" contenteditable="true"></div>
Knockout has an 'attr' binding, but it seems to be only useful for assigning values to attributes, not for adding/removing attributes.
Is there another way to do it in knockout, or am I forced to set it from javascript?
NB Using chrome on ubuntu.
Use a boolean false value to remove the attribute, use a string 'false' to set the attribute. What more do you need?
eg:
// Set as boolean, removes the attribute
autofocus(false);
// Set as boolean, adds the attribute
autofocus(true);
// Set as string, adds the attribute
autofocus('false');
// Set as string, adds the attribute
autofocus('true');
See here for an example: http://jsfiddle.net/badsyntax/XMDFh/
You can use hasfocus knockout binding:
<input data-bind="hasfocus: isSelected" />
Read more here: http://knockoutjs.com/documentation/hasfocus-binding.html
You can write a kohandler that removes attributes using jquery.
There is not a native binding in Knockout to add or remove an attribute, only to set an attribute.
The reason why the hasFocus binding exhibits the behavior it does is because it uses an element's native .focus() and .blur() methods to add or remove focus.
Knockout having difficulty managing non-boolean attributes has been reported before, here's one example where Michael Best mentioned it would not be addressed:
https://github.com/SteveSanderson/knockout/issues/391
Update:
You could create a binding handler along these lines:
ko.bindingHandlers.toggleAttr = {
update: function (element, valueAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor());
var attr = ko.utils.unwrapObservable(options.attr);
var param = ko.utils.unwrapObservable(options.param);
param ? element.setAttribute(attr, true) : element.removeAttribute(attr);
}
};
Which would allow you to do this:
<input data-bind="toggleAttr: { attr: 'autofocus', param: focusMe }" />
Here's a fiddle: http://jsfiddle.net/nathanjones/9EzBD/