I am trying to use shiny.fluent and implement one of the Nav examples from the Microsoft fluent UI documentation page. The example uses some JavaScript to apply a heading style to the group headings and I'm not sure how do apply the JavaScript in R.
Minimum example below:
library(shiny)
library(shiny.fluent)
navigation_styles <- list(
root = list(
height = "100%",
width = "30%",
boxSizing = "border-box",
border = "1px solid #eee",
overflowY = "auto"
)
)
link_groups <- list(
list(name = 'Pages',
links = list(
list(name = 'Activity'),
list(name = 'News'))),
list(name = 'More Pages',
links = list(
list(name = 'Settings'),
list(name = 'Notes')
)
)
)
shinyApp(
ui = fluidPage(
Nav(
groups = link_groups,
selectedKey = "key1",
styles = navigation_styles
)
),
server = function(input, output) {
}
)
And it looks like this. The group headings are collapsible menu items which is not what I want.
the example from Microsoft is the last example on this page. Their example code below:
import * as React from 'react';
import { Nav, INavLinkGroup } from '#fluentui/react/lib/Nav';
const navLinkGroups: INavLinkGroup[] = [
{
name: 'Pages',
links: [
{ name: 'Activity', url: 'http://msn.com', key: 'key1', target: '_blank' },
{ name: 'News', url: 'http://msn.com', key: 'key2', target: '_blank' },
],
},
{
name: 'More pages',
links: [
{ name: 'Settings', url: 'http://msn.com', key: 'key3', target: '_blank' },
{ name: 'Notes', url: 'http://msn.com', key: 'key4', target: '_blank' },
],
},
];
export const NavCustomGroupHeadersExample: React.FunctionComponent = () => {
return (
<Nav
onRenderGroupHeader={_onRenderGroupHeader}
ariaLabel="Nav example with custom group headers"
groups={navLinkGroups}
/>
);
};
function _onRenderGroupHeader(group: INavLinkGroup): JSX.Element {
return <h3>{group.name}</h3>;
}
It looks like this:
Can anyone help me implement this in shiny.fluent?
Thanks.
Related
I'm using marked.js to convert my text to html. I have the following code to disable bunch of commands, including header (# text), list/listItem and etc. but it doesn't disable "italic" and "bold".
Anyone here knows how to get that to work.
Thank you
const getUnfilteredContent = (content) => {
const lexer = new marked.Lexer({});
var list = [
'em',
'emStrong',
'code',
'def',
'lheading',
'fences',
'blockquote',
'html',
'heading',
'hr',
'list',
'listitem',
'paragraph',
'table',
'tablerow',
'tablecell',
'strong',
'codespan',
'br',
'del',
'link',
'image',
];
for (let i in list) {
const key = list[i];
lexer.tokenizer.rules.block[key] = { exec: function () { } }
}
return lexer.lex(content);
}
marked.parser(getUnfilteredContent(value), {})
Is there a way to close a slidable in flutter by tapping on the screen instead of sliding back? I just want the slidable to slide back automatically when there is any other interaction on the screen. Here is the section of my code where i added the slidable Widget.
Thank you in advance
Expanded(
child: ListView.builder(
//children: List.generate(todos.length, (index) => null),
itemCount: todos.length,
itemBuilder: (BuildContext context, int i){
return Slidable(
dismissal: SlidableDismissal(
child: SlidableDrawerDismissal(),
onDismissed: (actionType) {
setState(() {
todos.removeAt(i);
});
},
),
key: ValueKey(todos[i]),
actionPane: SlidableScrollActionPane(),
actionExtentRatio: 0.25,
child: ListTile(
onTap: (){
setState(() {
_isVisible= !_isVisible;
});
},
title: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: CustomCheckbox(
selectedColor: Color(0xFF005ef5)
),
),
SizedBox(
width: 5, // here put the desired space between the icon and the text
),
Flexible(
child: Text(
todos[i],
style: Theme.of(context).textTheme.bodyText1,
)
) // here we could use a column widget if we want to add a subtitle
],
),
),
actions: <Widget>[
IconSlideAction(
icon: Icons.close,
caption: 'Delete',
color: Theme.of(context).accentColor,
onTap: (){
setState(() {
todos.removeAt(i);
});
},
)
],
);
},
),
),
you can set the closeonTap:true inside IconSlideAction()
I created a custom block type called with the wp-cli, it's working, but when I add innerBlocks to it, the innerBlocks display, but don't save or adhere to any other attributes other than template, templateLock and allowedBlocks are all ignored. Also when I define wp.editor.InnerBlocks as a variable, it returns null, but if I include it in the block edit section, it works fine, still doesn't save. Full code:
( function( wp ) {
var registerBlockType = wp.blocks.registerBlockType,
__ = wp.i18n.__,
el = wp.element.createElement
;
registerBlockType( 'adventures/accommodations', {
title: __( 'Accommodations' ),
icon: 'admin-multisite',
category: 'layout',
supports: {
html: false,
align: true
},
attributes: {
align: {
type: 'string',
default: 'full'
},
},
edit: function( props ) {
var attributes = props.attributes;
return [
el( 'div', {className: props.className,},
el( 'h2', {className: 'sub-header'},
'Accommodations'
),
el( wp.editor.InnerBlocks, {
allowedBlocks: ['core/columns', 'core/column', 'core/paragraph', 'core/gallery'],
template: [
['core/columns', {},[
['core/column', {}, [
['core/gallery']
]],
['core/column', {},[
['core/paragraph', { placeholder: 'Enter short description...' }]
]]
]]
],
templateLock: 'all'
}),
)
]
},
save: function( props ) {
var attributes = props.attributes;
var InnerBlocks = props.innerBlocks
return [
el( 'div', {className: props.className,},
el( 'h2', {className: 'sub-header'},
'Accommodations'
),
el( InnerBlocks.Content ),
)
]
}
});
} )(
window.wp
);
Side note, also trying to make the block align full width without block alignment controls, but can't find any documentation on how to do that. Any help would be greatly appreciated, thanks!
I am trying to upload the file via Media Library from Inspect Control in Gutenberg. I am using this code currently in JS :
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
MediaUpload = wp.components.MediaUpload,
InspectorControls = wp.editor.InspectorControls;
And here I am registering the block type :
registerBlockType( 'myplugin/about-section', {
title: 'About Section',
icon: 'megaphone',
category: 'widgets',
edit: function( props ) {
return [
el( ServerSideRender, {
block: 'malinda/about-section',
attributes: props.attributes,
} ),
el( InspectorControls, {},
el( MediaUpload, {
label: 'Background Image',
value: props.attributes.bgimg,
// I think something need to be done here..
} ),
),
];
},
save: function() {
return null;
},
} );
But for some reason it's not working for me. In console it's giving me this error :
Error: Minified React error #130; visit
https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=
for the full message or use the non-minified dev environment for full
errors and additional helpful warnings.
and when I click on block it says :
The editor has encountered an unexpected error.
Can anyone please help me in that?
You need add attributes field for save image link. Then you need add MediaUpload element and add callback on click. And after save value. You can integrate my code in your
decision. I am add image select to inspector controls area.
( function( editor, components, i18n, element ) {
var el = element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.editor.InspectorControls;
var MediaUpload = wp.editor.MediaUpload;
registerBlockType( 'designa/image-block', {
title: 'Image block',
description: 'Image block.',
icon: 'video-alt3',
category: 'common',
attributes: {
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
}
},
edit: function( props ) {
var attributes = props.attributes;
var onSelectImage = function( media ) {
return props.setAttributes({
mediaURL: media.url
});
};
return [
el( InspectorControls, { key: 'inspector' },
el( components.PanelBody, {
title: 'Image block',
className: 'image-block',
initialOpen: true,
},
el( MediaUpload, {
onSelect: onSelectImage,
type: 'image',
render: function( obj ) {
return el( components.Button, {
className: 'components-icon-button image-block-btn is-button is-default is-large',
onClick: obj.open
},
el( 'svg', { className: 'dashicon dashicons-edit', width: '20', height: '20' },
el( 'path', { d: "M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z" } )
),
el( 'span', {},
'Select image'
),
);
}
}),
),
)
];
},
save: function( props ) {
var attributes = props.attributes;
return (
el( 'div', {
className: props.className
},
el( 'img', {
src: attributes.mediaURL
})
)
);
},
} );
} )(
window.wp.editor,
window.wp.components,
window.wp.i18n,
window.wp.element,
);
I have configured my own custom image repository using ckeditor image plugin.
Now i want to change the size of image dialog. I have checked a lot but found properties for changing height and width of file browser and ckeditor itself only.
How could i change the size of image dialog that appears on oncliking the image icon in ckeditor toolbar.
Here is my code:
CKEDITOR.editorConfig = function( config ) {
config.height = '350px';
//config.width = '1000px';
config.uiColor = '#d6d6d6';
config.fullPage = true;
config.extraPlugins = 'importdoc,docprops';
config.scayt_autoStartup = true;
config.filebrowserBrowseUrl = 'jcrPage';
config.filebrowserImageBrowseUrl = 'jcrPage';
config.filebrowserImageUploadUrl = 'imageUpload';
config.filebrowserWindowHeight = 500;
config.filebrowserWindowWidth = 500;
config.filebrowserImageWindowWidth = 700;
config.filebrowserImageWindowHeight = 700;
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode'] },
{ name: 'editing', groups: [ 'find', 'selection'] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
];
config.removePlugins = 'flash, iframe, templates, div, source, smiley, save, newpage';
config.removeDialogTabs = 'image:advanced';
};
Thanks
Size of the dialog is controlled by 4 properties: width, height, minWidth, minHeight.
And to know how to customize a definition of an existing dialog, please refer to my previous answer: How do I customize a ckeditor 4.2 builtin plugin like links?