How to animate selection / deselection in ace editor? - javascript

I'm working on live configuration tool for Apache Ignite.
UI organized in two columns. In left column I have various inputs, checkboxes, dropdowns... and in right column I have ace editor where I show preview of generated configuration.
I want to implement selection of changed parts by selecting them in ace edit.
And I already do that. But for better user experience I would like to select changed lines with fade-in / fade-out animation.
Could anyone give me some advice how to implement this.
Code for selection:
editor.selection.addRange(new Range(start, 0, end, 0));
I guess I need some how tweak CSS?
Or may be I should change selection color in loop and select with different colors several times with short pauses?
Update: after several hours of digging ace I found that animation part of css is ignored by ace. So I go to http://www.perbang.dk/rgbgradient, configure gradient with 10 steps and create 10 styles in my css. And apply them in loop for range. Here my code (I use AngularJS, so, it is a part of my controller):
var animation = {editor: null, stage: 0, start: 0, stop: 0};
function _clearSelection(editor) {
_.forEach(editor.session.getMarkers(false), function (marker) {
editor.session.removeMarker(marker.id);
});
}
function _animate() {
animation.stage = animation.stage + 1;
animation.editor.session.addMarker(new Range(animation.start, 0, animation.stop, 0),
'preview-highlight-' + animation.stage, 'line', false);
}
function _fade(editor, start, stop) {
var promise = editor.animatePromise;
if (promise) {
$interval.cancel(promise);
_clearSelection(editor);
}
animation = {editor: editor, stage: 0, start: start, stop: stop};
editor.animatePromise = $interval(_animate, 100, 10, false);
}

I've got an answer from one of Ace developers "nightwing":
Using css animations or transitions would be the best solution, but it doesn't work for now since marker layer uses innerHTML which removes all marker nodes restarting animation.
As a workaround it is possible to add dom node with animation to editor.container and use code similar to https://github.com/ajaxorg/ace/blob/master/lib/ace/line_widgets.js#L271 to position them inside the editor

Related

Is there a way to delay only a certain transition/animation for tooltips in Chart.js 3.x?

I'm using Chart.js 3.6.0, and I'm trying to have a tooltip show up after a hover over a data point for 2 seconds, and when it triggers i want the fade-in etc to have a duration of 200 ms. If i understand the documentation correctly, I should be able to set these properties separate of each other, but when I try this they seem to mix the animations together or something like it: When I hover over a data point and move to another point I get a tooltip that is both faded in and changes position over 2 seconds, i.e. 2 seconds becomes the duration of all animations and not the delay.
I'm using these options for the tooltip right now:
options: {
plugins: {
tooltip: {
animation: {
delay: 2000,
duration: 200,
}
}
}
}
JSFiddle example: https://jsfiddle.net/yzgxu5sm/
Is there a way to make this work with the built-in tooltip plugin, or do I have to make a custom plugin to make this work?

Phaser.io - Is it possible to move tileSprite.tilePosition to a particular target with a tween?

I am creating a simple slot machine and currently using TileSprite to achieve the effects that I want - for the spinning. So far, everything works. However, after the timer stops the initial spin, I want to smoothly scroll the texture to the correct 'result' position:
R1TimerTrigger: function()
{
R1Scroll = false;
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, false);
}
There are some immediate problems, in that apparently the native tween does not recognize properties of children. Is there a way to solve this, or an alternative approach that does not use tween to achieve the result?
You code looks fine to me and the tween should work on the tile sprite as expected.
Are you starting the tween? You can start the tween automatically using 'true' as the 'autoStart' parameter
to(properties, duration, ease, autoStart, delay, repeat, yoyo)
game.add.tween(SpriteReel[0].tilePosition).to( { y: R1Result }, 1000, Phaser.Easing.Bounce.Out, true);
Working example here https://phaser.io/sandbox/edit/iTLritEj
Look in the Play and Create tabs

Canvas: Detect if it is visible in browser

I have a list of charts. I use Chart.js to create those charts. Since my list can have 1 to 100 or more entries initializing all charts at once would not be smart because that would make the ui freeze for a long time. So instead I thought it would be much better to only initialize those charts which are visible inside the view bounds of the browser so that for example only the first chart is getting initialized and when the user scrolls down and the second canvas becomes visible the second is getting initialized and so on.
I have everything setup but the only problem that I have right now is: how can I create an eventlistener or anything similiar which I can add to each canvas element that gets triggered when a canvas becomes visible inside the view bounds of the browser so that i can perform the chart initialization for that canvas?
I'm the author of OnScreen, a small library that can call a callback function when a HTMLElement enters the viewport or the boundaries of its container.
// Uses ES6 syntax
import OnScreen from 'onscreen';
const os = new OnScreen();
os.on('enter', 'canvas', (element) => {
if (!element.chartInitialized) {
// Initialize the chart
// Update the `chartInitialized` property
// to avoid initializing it over and over
element.chartInitialized = true;
}
});
For more information, take a look at the documentation. Don't forget to check the demos repo for a couple simple examples.
I have used the onScreen jQuery plugin.
It is very easy. You just have to call for each canvas this:
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
// initialize canvas
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});

Javascript wheel dynamic abilities

I came across this wheel script that I'd like to possibly implement. However, I need the $ of wheel panels to be dynamic. The SASS had a variable in it already, but if I modify it to say 20, and add more div elements, the wheel still only shows 10. It looks like the mixins that calculate the angle use the $num-sides variable. I do see extra elements when it first loads, but they disappear as soon as the wheel is touched. What am I missing?
http://codepen.io/Aldlevine/pen/yGLqd
$num-wheels: 1;
$num-sides: 20;
$wheel-height: 10rem;
There's one more place where 10 existed and should change to 20 (see the comment in the code below):
$('.wheel').momentus({
u: 1,
mass: 1000,
wheelRatio: -1000,
mouseRatio: 6,
onChange: function(coords, velocity){
console.log('update');
$('.wheel > div').each(function(i){
var angle = -(coords.y/2) + (360/20)*i; // <-- CHANGE 10 to 20 HERE
$(this).css('transform', 'perspective(500px) rotate3d(1,0,0,'+angle+'deg) translate3d(0,0,122px)');
});
}
});
If you run it with only that change, the panels in the wheel are far too large. In order for it to look good, you should also halve the $wheel-height to 5rem.
Demo

Always show the tip text of Slider in Extjs

In Extjs 4.1.1a, How to keep the tip text of the slider always visible?
Currently, the tip text is being visible whenever the user drags the bar of the slider.
I searched on docs but couldn't find any related concepts.
If it is not documented or not possible, then please explain me how to create the tip text manually. The tip text should move along the bar of the slider and it should not overcome or hide any other adjacent components.
Here is my code which generates a simple slider:
xtype:'slider',
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,
tipText: function(thumb){
var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var value = Ext.String.format(months[thumb.value]);
return value;
},
Question 2: Is it atleast possible to show the tip text when hovered on the slider?
PS: I also asked the same question here.
EDIT 1: I am also moving the seek bar of the slider with two adjacent buttons (< and >). So, care must be taken that if I move the seek bar with the adjacent buttons then the tip text should also move.
EDIT 2: The tip text should be visible when hovered on the slider or the adjacent buttons.
Answer: http://jsfiddle.net/WdjZn/1/
I've managed to keep tip visible by overriding some event handlers in Ext.slider.Tip:
Ext.define('AlwaysVisibleTip', {
extend: 'Ext.slider.Tip',
init: function(slider) {
var me = this;
me.callParent(arguments);
slider.removeListener('dragend', me.hide);
slider.on({
scope: me,
change: me.onSlide,
afterrender: function() {
setTimeout(function() {
me.onSlide(slider, null, slider.thumbs[0]);
}, 100);
}
});
}
});
Ext.create('Ext.slider.Single', {
animate: false,
plugins: [Ext.create('AlwaysVisibleTip')],
// ...
});
Check out the demo.
Drawbacks of my approach:
It relies on private method onSlide
It applicable only to single slider
Keyboard navigation works properly only if animate is set to false
setTimeout is used in order to adjust initial position of the tip
Fixing this drawbacks would require hacking not only the Ext.slider.Tip class but Ext.slider.Multy class and probably Ext.slider.Thumb class.
Edit
Replaced changecomplete event with change event as changecomplete is not fired when slider.setValue() is called.
Added demo of slider with adjacent buttons.
Edit2
tipText config is no longer applied if custom tip plugin is used. You have to use getText config of the plugin:
Ext.create('Ext.slider.Single', {
animate: false,
plugins: [Ext.create('AlwaysVisibleTip',{
getText: function(thumb) {
var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return Ext.String.format(months[thumb.value]);
}
})],
// ...
});
Updated the demo.
for extjs 4.2,
change :
slider.removeListener('dragend', me.hide);
to :
slider.removeListener('dragend', me.hide, me);

Categories

Resources