How to change an attribute of a button without invalidating - validation

I want to change the color of a button in R/Shiny without invalidating it.
Specifically, I want the button to be red if the parameters for the execution changed but only execute if the button is pressed.
I have isolated the parameters in the reactive and only react to the change of the button:
# react on button pressed (unfortunately also if color is changed
input$Button
# don't react on parameters changes
paramet <- isolate(input$parameter)
In an observer I check the parameters and change the color:
if (!modified) {
# cat(file = stderr(), "\n\ntsne not modified\n\n\n")
actionButton(name, "apply changes", width = '80%',
style = "color: #fff; background-color: #00b300; border-color: #2e6da4")
} else {
# cat(file = stderr(), "\n\ntsne modified\n\n\n")
actionButton(name, "apply changes", width = '80%',
style = "color: #fff; background-color: #cc0000; border-color: #2e6da4")
}
But somehow this triggers the button.
The only thing I can think of is creating a new reactive that only changed only if the button is pressed. I.e. in my observer I would change a reactive value if the button value is increased, meaning, I will have to store the old value in a project-specific variable. I was hoping that there would be an easier way to accomplish this.
Thanks for your help.

using shinyjs with addClass(ButtonName, cssElement) , removeClass(ButtonName, cssElement), [cssElement = 'red' | 'green'] and in the UI:
shinydashboard::dashboardBody(
shinyjs::useShinyjs(debug = TRUE),
inlineCSS(list(.red = "background: red")),
inlineCSS(list(.green = "background: green")),
...
In fact, I was using actionButton and not updateActionButton, which was reinitialziing the actionButton, causing some unwanted side-effects, and updateActionButton doesn't allow changing the color.

Related

kendo ui - override k-animation-container style for one dropdown only

I use kendo-ui dropdown.
I add some ovveriding-css, and it works well.
.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element
.k-popup.k-list-container {
.k-item,
.k-item.k-state-selected,
.k-item.k-state-focused {
background-color: transparent;
color: $darken-gray-color;
margin-left: 0;
margin-top: 0;
}
}
}
The problem is, that while each dropdown has other input element instance, the list has one instance that is hidden and when you click any combo - is shown near the currently clicked combo.
What say - when you ovveride the list-container style - dows it for all of the combooxes.
Is there any solution for this issue?
Well this is a known problem, for every popup kendo renders independent div with class k-animation-container
You can try with this solution suggested on telerik forum:
k-animation-container
$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
var animationContainer = $(".k-animation-container").last();
// use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
if (true) {
animationContainer.children(".k-popup").css("min-width", 200);
}
});
Didn't try it my self, gl.
One solution I found was to use
popup: {
appendTo: $(some parent with ID)
}
This way we can manipulate styling of that particular .k-animation-container.
But this doesn't work on every widget, unfortunately.
My team find a great solution:
There is an option to give the input-element custom id.
Then you can select the list-container by the custom id you gave +'list' str.
Now, if you want to get the k-animation-container, you can select the list element and then request its parent.
Code sample:
The input element:
<span
kendo-multi-select
id="my-type-dd"
k-options="$ctrl.getVMultySelectConfig()"
k-ng-model="$ctrl.selectedTypes"
></span>
Selectors:
If you need only the k-list-container and not must the k-animation-container, you can do that by css:
.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'
&.k-popup.k-list-container {
padding: $space-normal 0 $space-small $space-small;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
}
}
If you need the k-aniamation-container you need to select it by jQuery becouse css doesn't have parent selector:
var kAnimationElement = $("#my-type-dd-list").parent();

How to customize the window title bar of an Electron app?

I'm getting started working with Electron to build a desktop app. How can I customize the window title bar (which contains the close, minimize, and full screen buttons) to add custom views? Safari is an example that I am thinking of:
Your only option in Electron would be to create a frameless (aka borderless) window, and then create a "fake" title bar with CSS, including any UI elements you need.
Electron/webkit provides CSS properties that allows you to make any element draggable, like a titlebar:
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
The first, and cross-platform option is to create a frameless window. The second is macOS only, and allows you to hide the title bar, but retain the window controls, allowing for the addition of custom buttons.
Example:
const { BrowserWindow } = require('electron')
// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()
Then you could use the css properties -webkit-user-select and -webkit-app-region to specify the drag zone.
Hide the default titlebar by creating a frameless window:
// main.js
window = new BrowserWindow({
titlebarStyle: 'hidden',
trafficLightPosition: {
x: 15,
y: 13, // macOS traffic lights seem to be 14px in diameter. If you want them vertically centered, set this to `titlebar_height / 2 - 7`.
},
})
Then create your own makeshift titlebar using HTML + CSS:
<!-- index.html -->
<body>
<header class="titlebar"></header>
...
</body>
/* styles.css */
.titlebar {
background-color: #f0f0f0;
height: 40px;
border-bottom: 1px solid #d0d0d0;
-webkit-app-region: drag; /* Allow user to drag the window using this titlebar */
-webkit-user-select: none; /* Prevent user from selecting things */
user-select: none;
}
The result so far:
Notice that the titlebar appears under the scrollbar. It even moves when the user scrolls. We need to separate it from the scrollable content by wrapping everything below the titlebar in a <div class="main-content"> and then adding these styles:
.main-content {
height: calc(100vh - 40px); /* Force the content to take up the viewport height minus the titlebar height */
overflow: auto; /* Allow the main content to be scrollable */
}
body {
overflow: hidden; /* Make the HTML body be non-scrollable */
}
Final result:
Now you can add whatever HTML content you want up there.

AngularJS : router : load view manually from within controller

Is there a way of manually loading the view from within the controller, after say some animation was triggered first? The scenario I have is the previous page content sliding up, after that the view would be updated when being off-the screen and once ready - slides back down with the new view from the new controller.
I've got already the router set up, but it just instantly replaces the view whenever the new controller is called.
Any fiddle if possible please?
Code in Controller shouldn't manipulate DOM, directives should. Here is directive to prevent preloading content of element with "src" (by browser's parser) and show content of element only after loading, and before loading show splash with spinner:
directive('onloadSrc', function($compile) {
return function(scope, element, attrs) {
element.bind('load', function() {
var parent = $compile(element[0].parentElement)(scope);
if (!element.attr('src') && attrs.onloadSrc) {
element.attr("src", attrs.onloadSrc);
// replace this dirty hardcode with your template for splash spinner
var spinner_div = $compile('<div style="z-index: 100; width: '+element.attr('width')+'px; height: '+element.attr('height')+'px; display:block; vertical-align:middle;"><img src="/img/spinner.gif" style="position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px;"/></div>')(scope);
attrs.onloadSrc = "";
parent.prepend(spinner_div);
element.css("display", 'none');
attrs.xloading = spinner_div;
}
else {
if (attrs.xloading) {
attrs.xloading.remove();
attrs.xloading = false;
element.css("display", 'block');
}
}
}
);
}});
To use this directive, leave empty attribute src of element and fill attribute onload-src.
Angular has animations build in in unstable branch, which should perfectly fit your scenario.
Just check out http://www.nganimate.org/angularjs/tutorial/how-to-make-animations-with-angularjs.
ng-view directive has build in 'enter' and 'leave' animations.
Check you this sample: http://jsfiddle.net/nFhX8/18/ which does more less what you'd like to achieve.

Full Calendar customized colors

I need to add custom color in creating each event in the full calendar (just like in the google calendar- the user can customize the text and bg colors of events).
Do you know any color picker plugins that may best fit to full calendar?
You can set the CSS Class name for a new event. Like
var myEvents = [
{
title: 'XMas',
start: theDate,
className : 'holiday'
}
];
Then to update the style of the given event type do something like the following:
#calendar .holiday,
#calendar .holiday div,
#calendar .holiday span {
background-color: #6d4d47;
color: #ffffff;
border-color: #6d4d47;
font-size: 12px;
}
It's in the fullcalendar documentation... which seems to be down at the moment. You can pass in colours for each event as elements of the array:
'backgroundColor' => "#36c",
'borderColor' => "#36c",
'textColor' => "#36c",
No plugin needed!

dijit.form.button with img src in programmatic

Is there a way to add img src tag in programmatic for a dijit.form.button?
In declarative, we can do something like this :
<div dojoType="dijit.form.Button"><img src="images/img.png"/></div>
In this case, the dijit button is completely replace by the image.
If I try something like this, the image not replace button but appear in :
var button = new dijit.form.Button({
showLabel : false,
label : "Validate",
iconClass : "alphaIcon validateIcon",
})
Your help would be very appreciated.
Thanks in advance
I think your approach should be to do exactly what you did AND create custom css to modify the appearance.
myIconButton.dijitButton .dijitButtonNode {
border: 0;
background-image: none;
background-color: transparent;
box-shadow: none;
}
var button = ... // same as above
dojo.addClass(button.domNode, 'myIconButton');
To directly answer your question, you could create your own button widget with a custom template that only had the image source.
dojo.declare("MyIconButton", [Button], {
templateString: '<div><img src="${imageSrc}"></img></div>'
});
NOTE: I didn't test this approach and there may be other modifications that you would need in MyIconButton because the base Button class would be expecting other nodes in the template.
The following will do what you want
this.button1.attr('label','<img src="' + this.constants.packagePrefix + '/images/button1.gif"/>');
I found it here:
http://mail.dojotoolkit.org/pipermail/dojo-interest/2009-August/038353.html
I have been using a class with background-image for buttons. This really made it hard to dynamically set the image. So, I had success using this:
domStyle.set(myButton.iconNode, 'background-image', 'url(images/icon.png)');
The trick was using iconNode, rather than domNode or containerNode.

Resources