How to use SASS functions in quarto / reveal.js plugins - sass

My custom plugin creates a button in a reveal.js presentation. It is similar to the menu & chalkboard buttons that come with quarto and is created by the css background-image property. I want it to have the fill attribute from the $link-color variable, which is defined in my custom theme.scss-file.
Just like the other buttons, that are coloured by the following SASS function (defined in quarto.scss):
// STYLESHEET FROM QUARTO
/*-- scss:functions --*/
#function colorToRGB($color) {
#return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}
/*-- scss:rules --*/
.reveal .slide-menu-button .fa-bars::before {
background-image: url('data:image/svg+xml,<svg fill="#{colorToRGB($link-color)}" ...</svg>');
}
Using a plugin.scss like this does not work.
// STYLESHEET FOR PLUGIN
/*-- scss:functions --*/
#function colorToRGB($color) {
#return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}
/*-- scss:rules --*/
.reveal .custom-button .fa-bars::before {
background-image: url('data:image/svg+xml,<svg fill="#{colorToRGB($link-color)}" ...</svg>');
}
Unfortunately this function (or functions defined by me) is not being created if I use my own custom stylesheet for my plugin using the command quarto render
.
Including it in the quarto.scss file works as well as styling it via javascript. However, using SASS would make more sense to create a standalone plugin.
Is it possible at all to use a custom stylesheet for my plugin that is built via SASS?

Related

Replace CKEditor toolbar images with font awesome icons

Is there some way to replace the default toolbar images (e.g. Bold, Italic, etc.) with Font Awesome icons?
I know this is an old issue, but on a plugin by plugin basis I've been able to add font-awesome icons to ckeditor buttons with the following code inside the plugin's init function. In my case my plugin was called trim:
//Set the button name and fontawesome icon
var button_name = 'trim';
var icon = 'fa-scissors';
//When a ckeditor with this plugin in it is created, find the button
//in the current instance and add the fontawesome icon
CKEDITOR.on("instanceReady", function(event) {
var this_instance = document.getElementById(event.editor.id + '_toolbox');
var this_button = this_instance.querySelector('.cke_button__' + button_name + '_icon');
if(typeof this_button != 'undefined') {
this_button.innerHTML = '<i class="fa ' + icon + '" style="font: normal normal normal 14px/1 FontAwesome !important;"></i>';
}
});
It hinges on knowing the class of the span inside the button, so it might not be the most convenient but it works.
The best thing is you can use Bootstrap theme on CKEditor or you can use Froala editor,It has inbuilt image uploader

Remove spinners from numeric field in Grid

I have noticed in the kendoNumericTextBox docs that there is a property named spinners that enables or disables the spinners.
The question is how can i access and set this property to false on a numeric field on a grid.
At the current stage i declare my field as number.
I do not know if this http://demos.kendoui.com/web/grid/editing-custom.html can be any help in this scenario or there is an easier work around.
There is a spinners flag in the initialization of kendoNumericTextBox.
$("#numeric").kendoNumericTextBox({
spinners : false
});
EDIT
For using it in grid you should define an editor function in the column definition. Example:
{ field: "number", title: "Number", editor: editNumberWithoutSpinners }
And define editNumberWithoutSpinners as:
function editNumberWithoutSpinners(container, options) {
$('<input data-text-field="' + options.field + '" ' +
'data-value-field="' + options.field + '" ' +
'data-bind="value:' + options.field + '" ' +
'data-format="' + options.format + '"/>')
.appendTo(container)
.kendoNumericTextBox({
spinners : false
});
}
late to the game but I just fiddled around with CSS and this seems to do the trick:
1. hide the select area within numeric textbox
2. remove the right padding which was added to allow for the selectors
.k-numerictextbox .k-select { display: none; }
.k-numerictextbox .k-numeric-wrap { padding-right: 2px; }
obviously inspect your html to make sure those styles exist and make it more or less inclusive depending on your situation.

How to make Webbrowser control with black background in Windows Phone 7.1

I am using webbrowser control to show local html content, cause the the background-color of the html page is black.
When I using NavigateToString method to navigate to the webbrowser, the webbrowser's background become white immediately, after a white coming the html page, then the background become black.
It's a little disturbing. Consider providing the best UX, I want to implement that the default background of the webbrowser is black.
Thx in advance.
Unfortunately this is a quirk of the WebBrowser control. I discovered the exact same issue when writing PhoneGap applications with WP7. The solution I came up with was to create a UI element that covers the WebBrowser control, wait for the content to be rendered, then fade out and hide the covering element, as described in this blog post.
Apply below code for your browser control.
public static readonly String StyleForBlackbody =
"<style type='text/css'>\n" +
" body {\n" +
" background-color : ??;\n" +
" font-size:$$px; \n" +
" font-family: ##;\n" +
" color: %%; \n" +
" };\n" +
"</style>\n";
public static String GetHtmlHead()
{
String html = StartHead;
html += StyleForBlackbody;
html = html.Replace("??", "auto");
html = html.Replace("%%", "black");
}
call above method.

External Tooltip plug-in on Jqgrid

Currently i am not using any other plug in for tool tip on mouse hover of grid row. I am using
$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});
Where the Name is the column name where the tool tip will be set and rowid identify the row. For more information read this answer including the references.
Is there any external plug in to achieve the same in better UI effect.
This tool tip does not seems to be good enough to fulfill my requirement
Because in the next version of jQuery UI will be included Tooltip (see demo) I recommend you better to download it now from github and a little play with it.
I prepared the demo which change the tooltip for the second column of the grid and use HTML contain with custom class (I use in demo standard ui-state-highlight class) and custom animation effect (slideUp/slideDown). So you will see about following
I hope the demo will help you to implement your requirements to custom tooltips.
It is also possible to use another approach.
As many "fancy" tooltips are based on class definitions and jquery, you could load the tooltip related class on loadcomplete, e.g.:
$(this).find("td").addClass('gridtip');
I have used a very small and effective tooltip from Alen Gracalic
which I call on hover event, like this:
jQuery("#competencegrid").live('hover',function(e){
gridtip();
});
Additionally, I make sure to remove all previous titles so that the browsers built-in tool-tip function does not show up. This is also done in after loadcomplete:
$('[title]').each(function(){
$this = $(this);
if($this.attr('title').length>1){
$.data(this, 'title', $this.attr('title'));
}
$this.removeAttr('title');
});
(In the original code from Alen Gracalic, the title attribute is removed while showing the tooltip and then restored. This method does not interact very well with jqgrid. Therefore it is better to remove it completely and rely on jquery data.)
The check on title length above is a specific need I have in my application and can be disregarded.
Finally, when loading the tooltip in the javaclass, I am referring to the jquery data rather than the title attribute (as that one now is empty).
this.gridtip = function(){
xOffset = 15;
yOffset = 20;
$(".gridtip").hover(function(e){
this.t = $.data(this, 'title');
if(this.t){
$("body").append("<p id='gridtip'>"+ this.t +"</p>");
$("#gridtip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}
},
function(){
$("#gridtip").remove();
});
$(".gridtip").mousemove(function(e){
$("#gridtip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Lastely, but not necessary - this is how my .css class looks like:
#gridtip{
position:absolute;
border:4px solid #adadad;
background:#fefefe;
-moz-border-radius: 5px;
padding:4px 5px;
color:#666;
display:none;
font-size:14px;
font-family:verdana;
text-align:left;
z-index:50;
filter: alpha(opacity=100);
opacity:0.85;
}
In my application, I am not using the main fields text to display as tool-tip.
Instead I am replacing the title contents by text from a hidden column, before loading it into jquery data. The procedure to do it looks something like this:
var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
if(description.length>0){
$("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
}
}

Wicket and SVG - any components exist?

SVG DOM can be controlled with JavaScript, so it can be AJAX-enabled... I wonder if there are some SVG components for Wicket yet. And if Wicket can have pure xml/svg as the output format.
Quick googling shows only a question at Code Ranch.
I don't know if you need a wicket-svg library anymore. But I have started a project at github to provide wicket components to work with svg.
Follow this link: wicket-svg
I don't know of components built, but Wicket definitely can have xml/svg as output format, and it's quite simple to make a Page that renders svg.
Dumb simple example code:
public class Rectangle extends Page {
#Override
public String getMarkupType() {
return "xml/svg";
}
#Override
protected void onRender(MarkupStream markupStream) {
PrintWriter writer = new PrintWriter(getResponse().getOutputStream());
writer.write(makeRectangleSVG());
writer.flush();
writer.close();
}
private String makeRectangleSVG() {
return "<?xml version=\"1.0\" standalone=\"no\"?>\n" +
"<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n" +
"\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n" +
"\n" +
"<svg width=\"100%\" height=\"100%\" version=\"1.1\"\n" +
"xmlns=\"http://www.w3.org/2000/svg\">\n" +
"\n" +
"<rect width=\"300\" height=\"100\"\n" +
"style=\"fill:rgb(0,0,255);stroke-width:1;\n" +
"stroke:rgb(0,0,0)\"/>\n" +
"\n" +
"</svg> ";
}
}
If you map this as a bookmarkable page and call it up, it does display a lovely blue rectangle, as per the hard-coded svg (stolen from a w3schools example). And of course you could easily parametrize the page and generate the svg instead of just sending a constant string...
I suspect it also wouldn't be hard to build a component based on the object tag so that svg could be shown as part of an html page rather than being the whole page like this, but I haven't yet tried to do so.

Resources