I'm trying to style the width/height (including min/max width and height) of my ckeditors. I've ran across this post (about styling .ck-editor__editable_inline), but the problem is that I have multiple instances of editors on a page, and want to have different heights/widths for different instances of editors.
I've tried manually hanging the minheight of the particular div with .ck-editor__editable_inline class through javascript (styling editor.ui.view.editable._editableElement), but upon focusing the editor, the styling disappears.
One way I've found to approach this problem is through what is mentioned in this post which is to apply the styling again every time the focus of the editor is altered. This results in the follow code in my case:
CKEditor.PostEditor.create(e)
.then(editor => {
$('#submit-body-form').next().find('.ck-editor__editable_inline').addClass('post-editor-min-height');
editor.ui.focusTracker.on('change:isFocused', (evt, name, value) => {
$('#submit-body-form').next().find('.ck-editor__editable_inline').addClass('post-editor-min-height');
});
})
Related
With Jetpack Compose for Desktop, we can make pretty much any element clickable:
Text("I'm clickable", Modifier.clickable { onClick() })
This causes the element to be included in the tab order, and most of the time that's what you want. But in my case, the interaction that happens on click is also available in another way, so I don't want to force the user to tab through a lot of useless Texts.
How can I exclude the clickable element from the tab order?
Modifier.clickable is a high-level API, you can use a lower-level API to get more flexibility.
To detect tap you can use Modifier.pointerInput with detectTapGestures:
Modifier
.pointerInput(Unit) {
detectTapGestures {
onClick()
}
}
Many of the things clickable does won't be added in this case. For example, see this answer on how to add a ripple effect. See Modifier.clickable source code for other things you may need to add.
I'm practically brand new to Aurelia, but over the course of a few days I've picked up the starter template and gone through some video training in Pluralsight. I have a unique vision that I can't seem to decide whether compose element, custom element, or router is best to use for this scenario - or if I need to write something completely custom.
I prefer to continue using the router because it gives you the
URLs and history state. Linking deep within the web app may be necessary.
When a view / viewmodel is initialized, I want the view appended to the DOM, NOT replaced. The <router-view> element works by replacing the view.
With each view appended to the DOM, I would like to create a set of tabs representing every view that has been opened so far. Think of any modern text editor, IDE, or even a web browser shows tabs.
Sometimes it would be necessary to detect whether a view is already rendered in the DOM (viewmodel + parameter) and just bring that view to the front -vs- appending the new one.
Do you have any suggestions, examples, etc for someone relatively new to Aurelia, SPAs, and MVVM?
Thank you.
I believe the easiest way is using the compose element. You would need an array containing all screens, and another array to hold the opened screens. Something like this:
screens = [
{ id: 1, name: 'Test 1', view: './test-1.html', viewModel: './test-1' },
{ id: 2, name: 'Test 2', view: './test-2.html', viewModel: './test-2' }
];
_activeScreens = [];
get activeScreens() {
return this.screens.filter((s) => this._activeScreens.indexOf(s.id) !== -1);
}
In the HTML you just have to use <compose></compose> for each iteration of activeScreens.
I made this example https://gist.run/?id=c32f322b1f56e6f0a83679512247af7b to show you the idea. In my case, I've used an html table. In your case, you could use a tab plugin, like Bootstrap or jQuery.
Hope this helps!
I need to create a list of buttons inside a ContentPane (one under the other) as a "single column vertical grid". I did not found such a layout widget in dijit ref. guide.
What can I use? How can I get a new line when adding (addChild) elements to a content pane?
There's dojox grid container but looks overkill to me.
i know that this is the least elegant way to do it but it is one-of-a-kind: you could create a custom div-domNode containing your buttons just like this:
var btn1=new dijit.form.Button({...});
var btn2=new dijit.form.Button({...});
// custom div-domNode
var buttons = dojo.create('div');
// filling it with the domNodes of your buttons separated by a <br> node
dojo.create(btn1.domNode,null,listOfButtons);
dojo.create('br',null,listOfButtons);
dojo.create(btn2.domNode,null,listOfButtons);
and display it in you ContentPane
myContentPane.set('content', buttons);
A ul or a table would work as well.
Finally let me say that im very ashamed of myself for not knowing any better answer.
Hope its what you asked for.
I've been playing around with Dojo over the last couple of days.
The script below changes the background position of the list item when the mouse is over the link.
dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {
dojo.connect(linkTwo, "onmouseover", function(evt) {
dojo.query('#main-menu ul li').forEach(function(linkThree) {
dojo.style(linkThree, {
"backgroundPosition": "right center",
});
});
You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/
I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.
Check out the Animation quickstart. You can animate css properties and select from a set of existing animation effects and easings. Chaining is possible by requiring the NodeList-fx module.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});