As I know, a completion function is using with the next way (there is an example):
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2',
}, duration, function complete1() {
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty3: 'value3',
}, duration, function complete2() {
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty4: 'value4',
}, duration)
})
})
What if I need to animate new CSS-property, after previous was ended, many times? It will be a huge part of code.
Does exist any more simple way to introduce this code? More optimal?
i use five styles it calls specific intervals
<script>
$(document).ready(function(){
var s1=0;
var s2=3000;
var s3=6000;
var s4=9000;
var s5=12000;
function function1(){
s1=s1+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2',
},3000);
function function2(){
s2=s2+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2',
},3000);
function function3(){
s3=s3+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2',
},3000);
function function4(){
s4=s4+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2',
},3000);
function function5(){
s5=s5+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2',
},3000);
setTimeout(function1,s1);
setTimeout(function2,s2);
setTimeout(function3,s3);
setTimeout(function4,s4);
setTimeout(function5,s5);
});
</script>
Related
Using Ramda, I am trying to achieve something like this:
let data = {
'accountNumber' : '12345',
'holderName' : 'XYZ',
'id' : '12XX',
'type' : 'savings',
...rest
}
let newObj = R.pick(['accountNumber', 'id', 'type']) (data);
output -> newObj = {
'accountNumber' : '12345',
'id' : '12XX',
'type' : 'savings'
}
I want result like this:
newObj = {
'accountNumbers' : ['12345'],
'id' : '12XX',
'type' : 'savings'
}
I want accountNumber field to be put inside an array of accountNumbers.
I understand pick won't work in this case but I am not able to achieve it through Ramda. It can be done easily using JavaScript but is it possible to achieve via Ramda?
You can pick the properties, and create a new object with changed keys using R.applySpec():
const { applySpec, pipe, of, prop } = R
const fn = applySpec({
accountNumbers: pipe(prop('accountNumber'), of),
holderName: prop('holderName'),
id: prop('id')
})
const data = {
'accountNumber': '12345',
'holderName': 'XYZ',
'id': '12XX',
'type': 'savings',
}
const result = fn(data)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.28.0/ramda.min.js" integrity="sha512-t0vPcE8ynwIFovsylwUuLPIbdhDj6fav2prN9fEu/VYBupsmrmk9x43Hvnt+Mgn2h5YPSJOk7PMo9zIeGedD1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Another option is to add accountNumbers using R.applySpec (based on this answer), and then pick the properties, including the updated one from the object:
const { pipe, applySpec, chain, mergeLeft, prop, of, pick } = R
const updateObject = pipe(applySpec, chain(mergeLeft))
const addAccountNumbers = updateObject({
accountNumbers: pipe(prop('accountNumber'), of)
})
const fn = pipe(addAccountNumbers, pick(['accountNumbers', 'holderName', 'id']))
const data = {
'accountNumber': '12345',
'holderName': 'XYZ',
'id': '12XX',
'type': 'savings',
}
const result = fn(data)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.28.0/ramda.min.js" integrity="sha512-t0vPcE8ynwIFovsylwUuLPIbdhDj6fav2prN9fEu/VYBupsmrmk9x43Hvnt+Mgn2h5YPSJOk7PMo9zIeGedD1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
How can I switch from array to object data type in pipeline using ramda's reduce in point-free style?
I would like to achieve this:
(nodes) => nodes.reduce((acc, node: any) => {
acc[node.id] = {
out: node.outgoing_explicit,
in: node.incoming_explicit
};
return acc;
}, {})
Index the nodes by id, and the map them and use R.applySpec to change to the in/out format:
const { pipe, indexBy, map, applySpec, prop } = R
const fn = pipe(
indexBy(prop('id')),
map(applySpec({
out: prop('outgoing_explicit'),
in: prop('incoming_explicit'),
}))
)
const nodes = [{ id: 1, outgoing_explicit: 'abc1', incoming_explicit: 'xyz1' }, { id: 2, outgoing_explicit: 'abc2', incoming_explicit: 'xyz2' }, { id: 3, outgoing_explicit: 'abc3', incoming_explicit: 'xyz3' }]
const result = fn(nodes)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js" integrity="sha512-rZHvUXcc1zWKsxm7rJ8lVQuIr1oOmm7cShlvpV0gWf0RvbcJN6x96al/Rp2L2BI4a4ZkT2/YfVe/8YvB2UHzQw==" crossorigin="anonymous"></script>
this could also be a solution:
const spec = {
in: R.prop('incoming_explicit'),
out: R.prop('outgoing_explicit'),
}
const fn = R.reduceBy(
R.flip(R.applySpec(spec)),
null,
R.prop('id'),
);
const data = [
{ id: 'a', incoming_explicit: 'Hello', outgoing_explicit: 'World' },
{ id: 'b', incoming_explicit: 'Hello', outgoing_explicit: 'Galaxy' },
{ id: 'c', incoming_explicit: 'Hello', outgoing_explicit: 'Universe' },
{ id: 'd', incoming_explicit: 'Hello', outgoing_explicit: 'Dimension' },
];
console.log(
fn(data),
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js" integrity="sha512-3sdB9mAxNh2MIo6YkY05uY1qjkywAlDfCf5u1cSotv6k9CZUSyHVf4BJSpTYgla+YHLaHG8LUpqV7MHctlYzlw==" crossorigin="anonymous"></script>
The solutions involving applySpec are probably best, but just for variety, here's an alternative:
const convert = pipe (
map (juxt ([prop('id'), props(['incoming_explicit', 'outgoing_explicit'])])),
fromPairs,
map (zipObj (['in', 'out']))
)
const nodes = [{id: 'foo', outgoing_explicit: 43, incoming_explicit: 42}, {id: 'bar', outgoing_explicit: 20, incoming_explicit: 10}, {id: 'baz', outgoing_explicit: 309, incoming_explicit: 8675}]
console .log (convert (nodes))
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
<script>const {pipe, map, juxt, prop, props, fromPairs, zipObj} = R </script>
`juxt' is a bit of an oddball function. It works like this:
juxt([f, g, h, ...]) //=> (a, b, ...) -> [f(a, b, ...), g(a, b, ...), h(a, b, ...), ...]
I am using React-native-reanimated and react-native-gesture-handler,
I need to trigger a function after animation done, This is my my code:
let a = new Value(1);
let onStateChange = event([
{
nativeEvent: ({state}) =>
block([
cond(
eq(state, State.END),
set(a, runTiming(new Clock(), 1, 0)),
),
]),
},
]);
return <TapGestureHandler onHandlerStateChange={onStateChange}>
I need something like this :
onStateChange = event => {
if (event.nativeEvent.state === State.END) {
alert("I'm being pressed");
}
return block([
cond(
eq(event.nativeEvent.state, State.END),
set(a, runTiming(new Clock(), 1, 0)),
),
]);
},
But not works. :/
There is a call method to handle back from native section to JS.
You can use the call method once the animation is finished (state.END).
This example is for normal animation but the implementation for your case should be similar, notice that when you use call you can pass back parameters to the function you want to use.
function runTiming({ clock, value, dest, afterAnimationActions }) {
const state = {
finished: new Value(0),
position: value,
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: ANIMATION_DURATION,
toValue: dest,
easing: Easing.inOut(Easing.ease),
};
return block([
cond(clockRunning(clock), 0, [
set(state.finished, 0),
set(state.time, 0),
set(state.position, value),
set(state.frameTime, 0),
set(config.toValue, dest),
startClock(clock),
]),
timing(clock, state, config),
cond(state.finished, [
stopClock(clock),
call([dest], (d) => afterAnimationActions(d)), // <-- Add this
]),
state.position,
]);
}
With that, you can call runTiming like this:
transY = runTiming({
clock: this.clock,
value: this.from,
dest: this.toValue,
afterAnimationActions: this.afterAnimationActions,
});
And the afterAnimationActions should look like this:
afterAnimationActions = ([dest]) => {
// `dest` is the param we passed using `call`
// The function logic here
};
I have an object like this:
obj = {
'key1': {'prop1': 123,'prop2':345},
'key2': {'prop1': 673,'prop3':642}
}
I would like to have the following result:
result = {'prop1': 796, 'prop2':345, 'prop3':642}
That is, I want a single object that has all properties. I have a function like this:
Object.values(obj).reduce((acc,currentObj) => {
const props = Object.keys(currentObj);
props.forEach(prop => {
if(prop in acc){
acc[prop] += currentObj[prop]
} else {
acc[prop] = currentObj[prop]
}
})
return acc
}, {})
I believe this works fine, but is there any way to do the same with RamdaJS?
A simple reduce function would do that.
const fn = R.pipe(
R.values,
R.reduce(R.mergeWith(R.add), {}),
);
//--
const data = {
key1: { prop1: 123, prop2: 345 },
key2: { prop1: 673, prop3: 642 },
};
console.log(
fn(data),
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js" integrity="sha256-xB25ljGZ7K2VXnq087unEnoVhvTosWWtqXB4tAtZmHU=" crossorigin="anonymous"></script>
As a newbie i am trying to make List with 3 Items in Cycle.js. But code has bugs.
I made jsbin and placed code below as well
http://jsbin.com/labonut/10/edit?js,output
Problem: when i click on last checkbox, it adds new checkbox (which i did't want), and the old one does not change it's "ON/off" label. Also all except last one, not react at all. What am i doing wrong?
const xs = xstream.default;
const {div, span, input, label, makeDOMDriver} = CycleDOM;
function List(sources) {
sources.DOM
var vdom$ = xs.fromArray([
{text: 'Hi'},
{text: 'My'},
{text: 'Ho'}
])
.map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}))
.map(x => x.DOM)
.flatten()
.fold((x, y) => x.concat([y]), [])
.map(x => div('.list', x));
return {
DOM: vdom$
}
}
function ListItem(sources) {
const domSource = sources.DOM;
const props$ = sources.Props;
var newValue$ = domSource
.select('.checker')
.events('change')
.map(ev => ev.target.checked);
var state$ = props$
.map(props => newValue$
.map(val => ({
checked: val,
text: props.text
}))
.startWith(props)
)
.flatten();
var vdom$ = state$
.map(state => div('.listItem',[
input('.checker',{attrs: {type: 'checkbox', id: 'toggle'}}),
label({attrs: {for: 'toggle'}}, state.text),
" - ",
span(state.checked ? 'ON' : 'off')
]));
return {
DOM: vdom$
}
}
Cycle.run(List, {
DOM: makeDOMDriver('#app')
});
A little shorter variant.
1st line, get Items Dom streams array.
2nd line, then combine streams into one stream and wrap elements into parent div
function List(sources) {
var props = [
{text: 'Hi'},
{text: 'My'},
{text: 'Ho'}
];
var items = props.map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}).DOM);
var vdom$ = xs.combine(...items).map(x => div('.list', x));
return {
DOM: vdom$
}
}
Inspired by Vladimir's answer here's an "old school" variation of his answer and an improvement on my original answer:
function List(sources) {
const props = [
{text: 'Hi'},
{text: 'My'},
{text: 'Ho'}
];
var items = props.map(x => isolate(ListItem)({Props: xs.of(x), DOM: sources.DOM}).DOM);
const vdom$ = xs.combine.apply(null, items)
.map(x => div('.list', x));
return {
DOM: vdom$
};
}
Old school JSBin demo
(Original answer.)
It appears the problem is in your List function. Frankly I don't know the reason, but have worked out another solution:
function List(sources) {
const props = [
{text: 'Hi'},
{text: 'My'},
{text: 'Ho'}
];
function isolateList (props) {
return props.reduce(function (prev, prop) {
return prev.concat(isolate(ListItem)({Props: xs.of(prop), DOM: sources.DOM}).DOM);
}, []);
}
const vdom$ = xs.combine.apply(null, isolateList(props))
.map(x => div('.list', x));
return {
DOM: vdom$
};
}
JSBin demo
One difference here is I'm not streaming the items in the props object. Rather I'm passing the array to a function that reduces the props to an array of list item vdom streams, then applying that array to the xstream combine factory.