I'm developing an application using Angular, Semantic-UI and Animate.
I'm creating a form and I'm experiencing problems with dropdown that overlaps other inputs when it is open.
Here is a Plunker: https://plnkr.co/edit/BTCxfk
As you can see removing animated fadeIn animation from the class of Semantic-UI fields fixes the problem.
Then, what can I do to keep using both Semantic-UI and Animate and having that dropdown menu working with no bugs?
In this case it's recommended to use the built-in fade in animation (transition) in semantic-ui . this won't cause any bug on the dropdown .So first
remove animated fadeIn class , then change your code to the following :
export class App {
constructor() {
jQuery('.fields')
.transition('fade in')
;
setTimeout(() => {
jQuery('.ui.dropdown').dropdown();
}, 1000);)
}
}
Note that you can set parameters for your transition like: duration,callback... ,in transition settings:
jQuery('.fields')
.transition({
animation : 'fade in',
duration : '2s',
onComplete : function() {
alert('done');
}
})
;
For more settings see Docs
Related
So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.
To calculate custom labels for Vue-Chartjs the only solution I could find was via
animation: { onComplete: function () {
The problem that follows is that these labels are blinking on bar hover. I also saw the same behaviour in many other custom label examples/solutiond. Did anyone manage to solve this?
See example here fiddle
The blinking effect is caused because the animation is only triggered when the bars are hovered. You can use the onHover option to trigger whenever the chart canvas is hovered.
Here's an example logic:
(uses the plugin chartjs-plugin-datalabels to make it easier)
options : {
onHover : function (e) {
const display = e.type === 'mouseout' ? false : true
const labels = this.chart.options.plugins.datalabels
if (display&&labels.display) return //avoid updating if already set
labels.display = display
this.chart.update();
}
}
working example
I need to add a preloading animation for vue.js SPA application meanwhile files in the background are being loaded, using SVG and a progress bar. So instead of user seeing empty screen, he can see an animation. Something like gmail loading animation or https://jsfiddle.net/ Thank you for any advice
VueJS has lifecycles. The most important for that are :
beforeCreate, created, beforeMount, mounted.
So, In your component, below the data, you can write some logic in these lifecycles.
So, for example in beforeCreate or created hook you can display your SVG loader, and then in mounted (inserted in DOM), you hide it.
Example :
//MyComponent.vue
<template>
...
</template
<script>
export default {
data() {
return {
article : {},
user_id: null
},
created() {
//Display your SVG
},
mounted() {
//Hide your SVG
},
methods: {
//etc,etc
}
</script>
//load up profile controller.
function go_to_profile() {
var controller = Alloy.createController('Profile', {
title : 'Profile',
name : '_profile',
isFlyout : true
});
var newWindow = controller.getView();
Alloy.Globals.navGroup.openWindow(newWindow, {
animated : true,
transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP
});
}
Here is my code. I would like to modify it, so that the window slides in upwards. The transition does not seem to work and keeps sliding in from left to right.
Any idea why, cheers.
It's simple, the Ti.UI.iOS.NavigationWindow doesn't allow the transitions.
Only when you call `Window.open()' you can define a transition prop.
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)