In Scriptaculous 1, you could animate styles:
new Effect.Morph('id', {
style: { background: tomato },
duration: '4' });
But a better way was to keep the CSS and JS separate and merely reference a class:
new Effect.Morph('id', {
style: 'important',
duration: '4' });
Marvellous. But this doesn't seem to work with the new Scripty 2. Works:
$('id').morph('background: tomato', { duration: 4 });
Breaks:
$('id').morph('important', { duration: 4 });
What is the right way to animate using a class in Scripty 2? (I suspected Style, but the docs were vague.)
I checked out the source code and s2 only takes 'styleProp:value' for the style option. The string needs to have a colon.
The only method that will additionally take the class name as well 'styleProp:value' for the style option is a method called S2.FX.Operators.WebkitCssTransition. However, the S2.Extensions.webkitCSSTransitions are turned off by default. Although, the code in that method to be used to make your own patch to the .Morph method.
Related
I'm having a little issue using ngx-gallery Here is the github page and my stackblitz example.
Scenario - I want my user click a button to swap the images around to the first image in the gallery.
Ex. User clicks button and moves the image from position 3 to image position 1. Including the small thumbnail, the medium image (main viewer) and the big preview image.
Problem - Everything I've tried doesn't seem to work. I can't really find any methods that swap the indexes and when I swap them manually nothing happens.
FYI - I can add and delete images to the viewer with push and pop, I just can't set (swap) the first image programmatically with another.
stackblitz example
Here is some of the examples I've tried.
export class AppComponent implements OnInit {
#ViewChild('gallery') gallery: NgxGalleryComponent;
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
constructor() {}
ngOnInit() {
this.galleryOptions = [{
width: '600px',
height: '400px',
thumbnailsColumns: 4,
arrowPrevIcon: 'fa fa-chevron-left',
arrowNextIcon: 'fa fa-chevron-right',
imageAnimation: NgxGalleryAnimation.Slide
}
];
this.galleryImages = [{
small: 'https://preview.ibb.co/jrsA6R/img12.jpg',
medium: 'https://preview.ibb.co/jrsA6R/img12.jpg',
big: 'https://preview.ibb.co/jrsA6R/img12.jpg'
},
{
small: 'https://preview.ibb.co/kPE1D6/clouds.jpg',
medium: 'https://preview.ibb.co/kPE1D6/clouds.jpg',
big: 'https://preview.ibb.co/kPE1D6/clouds.jpg'
},
{
small: 'https://preview.ibb.co/mwsA6R/img7.jpg',
medium: 'https://preview.ibb.co/mwsA6R/img7.jpg',
big: 'https://preview.ibb.co/mwsA6R/img7.jpg'
}, {
small: 'https://preview.ibb.co/kZGsLm/img8.jpg',
medium: 'https://preview.ibb.co/kZGsLm/img8.jpg',
big: 'https://preview.ibb.co/kZGsLm/img8.jpg'
},
];
}
swap() {
console.log("button clicked!");
// doesn't do anything
[this.galleryImages[2], this.galleryImages[0]] = [this.galleryImages[0], this.galleryImages[2]];
// doesn't do anything
[this.gallery.thumbnails.images[2], this.gallery.thumbnails.images[0]] = [this.gallery.thumbnails.images[0], this.gallery.thumbnails.images[2]];
// doesn't do anything
[this.gallery.images[2], this.gallery.images[0]] = [this.gallery.images[0], this.gallery.images[2]];
}
}
<div class="gallery-wrapper">
<ngx-gallery #gallery [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>
</div>
<button (click)="swap()">swap image 1 and 3</button>
This may be because you are mutating the array. Sometimes Angular change detection only kicks in when you do not mutate.
Mutating happens when you change the array (the items in the array or the order of items in the array) but do not change the array reference.
To avoid mutating try:
this.galleryImages = [this.galleryImages[2], this.galleryImages[1], this.galleryImages[0]]
Alternatively, even when you do mutate an Array you can solve the problem by running lodash cloneDeep afterwards, which will get you a new reference after mutating:
import { cloneDeep } from 'lodash-es'
// your existing code
this.galleryImages = cloneDeep(this.galleryImages)
Note that there are some decent npm packages for changing the position of items in an array such as array-move - this avoids mutation - note there are other good packages for this too, look for competitors on npm trends
Check this documentation:
https://docs.nativescript.org/ui/animation
I'm trying to add a class or ID of this element as <Label> to animate anything but I'm not sure what's is supposed to assign an element using view to take full control of any animation by calling animation methods directly with code instead of CSS animations in Vue template.
there's a good example of doing this from the Groceries sample app by Tiago Alves. I borrowed some of his code here, and you can animate like this:
Give your element a ref:
<AbsoluteLayout marginTop="-340" ref="logoContainer" class="logo-container">
<Image translateY="0" src="res://seal" stretch="none"/>
</AbsoluteLayout>
and then grab that ref and animate it using the standard NativeScript Animation API:
this.$refs.logoContainer.nativeView
.animate({
translate: { x: 0, y: platformModule.isAndroid ? -70 : -50 },
duration: 500,
curve: enums.AnimationCurve.easeIn })
.then(() => {
this.state = 'main'
})
I'm working with jointJs and Rappid. I know how to draw a bpmn diagram, as the photo I have attached. I'm drawing the elements, but I'm having some problems with rows (flows). Is there any way to add a flow label or name? As I added on my image in red color.
I have seen this in their documentation, but I can't see anything about labels
var flow = new joint.shapes.bpmn.Flow({
source: { id: task.id },
target: { id: annotation.id },
flowType: 'association'
});
Thanks,
You may want to look into dia.Link.prototype.labels, since BPMN Flows are just Links extensions (joint.shapes.bpmn.Flow = joint.dia.Link.extend({).
An example to your flow:
flow.label(0, // the label's index (you can have multiple labels per link/flow)
{
position: .5, // place it halfway on the link (0-1)
attrs: {
text: { fill: 'red', text: 'Label' }
}
}
);
In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},
tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.
I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link
I have a bunch of interactive activities which have been written in flash by reading in all the parameters from an XML file. We are moving away from FLASH and so I am writing a script which will read in the XML elements I need and dynamically build a javascript object containing all the elements and their properties. In the end, I pass the object through a JSON.stringify() and pass back a JSON-ized version.
I'm reading in the XML using an ajax call with JQUERY and then a mix of JS and JQUERY. I like jquery for its DOM selectors.
I'm learning all this stuff as I go along and i'm not a developer by trade so i've hit a wall when I get to the point where I need to process a bunch of elements with .each(). I'm guessing its a syntax thing though i'm not sure. Everything was working great until it came time to adding the "panels" which in the XML looks like +...
I have to process each panel.
$.ajax({
type: "GET",
url: "activity.xml",
dataType: "xml",
success: function(xml) {
var activity = {
title : {
text: $(xml).find('title').text(),
xpos: $(xml).find('title').attr('xpos'),
ypos: $(xml).find('title').attr('ypos')
},
rubric : {
text: $(xml).find('rubric').text(),
xpos: $(xml).find('rubric').attr('xpos'),
ypos: $(xml).find('rubric').attr('ypos')
},
panels: {
$(xml).find('panel').each(function() {
panel :{width: $(this).attr('width'),
height: $(this).attr('height'),
xpos: $(this).attr('xpos'),
ypos: $(this).attr('ypos')
}});// end .each()
}// end panels object
});//end ajax.get(xml)
var activity_json = JSON.stringify(activity);
Im certain its not done this way but i don't know how it should be.
Thanks in advance
Your problem must be here
panels: {
$(xml).find('panel').each(function() {
panel :{width: $(this).attr('width'),
height: $(this).attr('height'),
xpos: $(this).attr('xpos'),
ypos: $(this).attr('ypos')
}});// end .each()
Rewrite your code as follows:
var activity = {
title : {
text: $(xml).find('title').text(),
xpos: $(xml).find('title').attr('xpos'),
ypos: $(xml).find('title').attr('ypos')
},
rubric : {
text: $(xml).find('rubric').text(),
xpos: $(xml).find('rubric').attr('xpos'),
ypos: $(xml).find('rubric').attr('ypos')
},
panels : []
};
$(xml).find('panel').each(function() {
var data = {
panel :{
width: $(this).attr('width')
},
height: $(this).attr('height'),
xpos: $(this).attr('xpos'),
ypos: $(this).attr('ypos')
}
activity.panels.push(data);
});
EDIT
You are breaking the syntax of the object literal. You should init an array and finish the object declaration. Then iterate over your collection and fill your object's panels property with appropriate value.
EDIT
Yeah. I see what do you mean.
Here is the fiddle that iterates over your dom elements. I used the native JavaScript api. I'm not very familiar with, say, jQuery2XML.