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
}
});
Related
In my app, I have divs that I want to dim and disable mouse events for, depending on component state - for example, loading. The initial method I came up with is to have a helper function that returns an inline style for dimming an element and disabling pointer events on it, given a boolean value:
const disableOnTrue = (flag) => {
return {
opacity: flag ? 0.15 : 1,
pointerEvents: flag ? "none" : "initial"
}
}
and using it on elements as such:
{loading && {/** render a loading circle */}}
<div style={disableOnTrue(this.state.loading)}>{/** stuff to be dimmed & disabled while loading */}</div>
In the disabled div, there are Material-UI Buttons. However, it turns out that they don't care if pointerEvents are disabled on their parent div, and remain clickable, which is a big problem. So, on the Buttons I had to set disabled={loading}. Then, this dims the Buttons themselves, which unnecessarily compounds with the lowered opacity of disableOnTrue, meaning I would need to add some custom styling to ameliorate that; I want the entire div to be disabled, not for the Button to look especially disabled.
I've also tried using the Backdrop component from Material, but couldn't get it to dim anything but the entire viewport.
Before I implement any sort of hacky solution throughout my entire app, I figured I should ask here to see if there is a clean way to achieve this that I'm missing. I've looked for quite a while, but haven't found anything.
I split the concept of "disabling" into two functions:
const dimOnTrue = (flag) => {
return {
opacity: flag ? 0.15 : 1,
}
}
const disableOnTrue = (flag) => {
return {
pointerEvents: flag ? 'none' : 'initial'
}
}
to be used on divs that should be dimmed and inputs that should be disabled, respectively.
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.
Trying to do some simple animations for a shopping cart, but seem to be snagged on a couple of high level issues.
I wanted to be able to execute the animations when my cart is empty, so I put some coding in the attribute "changed" for my cart attribute.
But it seems the changed event handler is being called even when the page is not active, I only want to execute when this core-animated-page is active
Here is my code, which the part where I use "document.querySelector('html /deep/ #cart[active]')" is not working, and seems hacky. How can I do this better?
isloaded: false,
created : function(){
this.isloaded = true;
},
cartChanged: function() {
//hide cart if no items
if(document.querySelector('html /deep/ #cart[active]')){
console.log("cart.length:" + this.cart.length + " isloaded: " + this.isloaded)
if (this.cart.length == 0) {
if (this.isloaded) {
this.$.carthasitems.setAttribute('hidden', '');
} else {
this.$.cartemptycontainer.classList.add('transparent');
this.$.cartanimations.toggleSlide(
this.$.carttotalscontainer,
.5,
this.$.cartanimations.fadeInUp(this.$.cartemptycontainer, .5)
);
}
}
this.isloaded = false;
}
}
Thanks in advanced,
David
It sounds like you're using Polymer 0.5 based on mentioning core-animated-page. So first thing is just that you'll probably get better support & mileage by moving to Polymer 1.0 which is the supported library going forward.
And if you do move to Polymer 1.0 & base your app on https://github.com/polymerelements/polymer-starter-kit then it includes a basic router that you could leverage to know which page (i.e. route) is active.
I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.
On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.
Normal page with lower resolution:
Using the Chrome Dev Tools' Console: I can excecute this:
$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });
And the controls now are display correctly.
So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.
CAUSE
This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.
SOLUTION
You need to re-initialize those controls that become part of row details in a separate function.
The solution is to:
define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.
Example:
var table = $('#example').DataTable({
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
$(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
return $details;
}
}
},
createdRow: function( row, data, dataIndex ){
$(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });
}
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Responsive extension and custom controls article for more information.
I use jfcunit and I have the following code:
if ((Component)event.getSource() instanceof JScrollPane) {
JScrollPane scrollPane= (JScrollPane) (Component)event.getSource();
JScrollBar scrollBar=(JScrollBar) scrollPane.getVerticalScrollBar();
if(!scrollBar.isVisible()||!scrollBar.isEnabled()){
return;
}
which runs on a mouse-wheel event and it gets it's source.
Problem is scrollBar.isVisible() works fine but scrollBar.isEnabled() always returns true even though the scrollBar is disabled and I don't seem to figure out why.
Maybe there is a property that I should check for the scroll pane or maybe I am missing something. Any suggestions are appreciated. Thanks.
I found a way around it: if the visibleAmount and the maximum amount are the same it means the scrollbar is disabled:
if(!scrollBar.isVisible()
||(scrollBar.getVisibleAmount()==scrollBar.getMaximum())){
return;
}