Look at this piece of code:
<script src="progressbar.js"></script>
<script>
var bar = new ProgressBar.Line(containera, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 40));
}
});
bar.animate(1.0);
</script>
The above code selects element with class "containera" and does something with them. I want change my code so it will select bellow classes too:
containerb,containerc,containerd,containere,containerf
but I don't like to repeat my code for every class. I hope you help me :) Thank you.
Why don't you wrap your configuration in a function and call it for every container you have? Could work along those lines:
var yourContainers = ['containerA','containerB']
function createProgressbars = function(container){
return new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 40));
}
});
}
yourContainers.forEach(function(container){
createProgressbars(container).animate(1.0);
});
Related
const CustomizedSlider = withStyles((theme) => ({
track: {
//styles the line between thumbs
height: 4,
backgroundColor: theme.palette.warning.main, // we can manipulate color here
},
rail: {
//styles line outside of thumbs
opacity: 1,
height: 4,
borderRadius: 0,
},
thumb: {
height: 14,
width: 14,
background: 'white',
border: '1px solid black',
},
mark: {
height: 8,
borderRadius: 0,
},
markActive: {
opacity: 1,
backgroundColor: 'currentColor',
},
}))(Slider);
<CustomizedSlider
className={className}
value={data.severity || 0}
valueLabelDisplay="off"
step={1}
min={0}
max={4}
marks={steps}
onChange={this.handleSeverityChange}
/>
This component is a part of UI. It rendered in class component in the same way:
I need to have a colored track that is based on steps (input[data-index]).
For example: if the step.value === 0 the backgroundColor of the active track is red, step.value === 1 - blue and so on
I have an application created with create-react-app. By default it seems to check that object keys are sorted alphabetically. This is not too bad when I'm typing the code myself, but it's crazy when I copy'n'paste from other sources. Here's an example:
const styles = theme => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9
}
},
hide: {
display: 'none'
},
menuButton: {
marginLeft: 12,
marginRight: 36
},
root: {
flexGrow: 1,
height: 430,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex'
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar
}
});
I sorted the first level keys but it seems to check the nested ones too! Now I'm getting
C:/Source/portal/src/components/MenuAppBar.js
(19,5): The key 'transition' is not sorted alphabetically
I can't seem to find a way to enable the JS linting. There were hints about disabling tslint but I'm not using Typescript in this case.
I am using VS Code and have tried Sort JS object keys as well as Sort JSON objects. Unfortunately neither of them sort nested keys.
/* eslint sort-keys: 0 */
Add this on the top of the styles file
I'm trying to replace text with functions, without clearing all drawn text. Right now I can replace a function but only by clearing the whole canvas. I'd like it to be a little bit more dynamic so that a third function (for example) would remain.
Here's what I've got so far; note how the original text is cleared:
var $ = function(id) {
return document.getElementById(id)
};
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
function textOne() {
canvas.clear();
canvas.add(new fabric.IText('One', {
left: 50,
top: 100,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
}));
}
// Text that should stay
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', {
left: 300,
top: 45,
fontFamily: 'Monsieur La Doulaise',
fontSize: 27,
hasBorders: false,
hasControls: false,
selectable: true,
lockRotation: true,
lockMovementX: true,
lockMovementY: true,
align: 'mid',
originX: 'center',
originY: 'center',
centeredScaling: true,
}));
function textTwo() {
canvas.clear();
canvas.add(new fabric.IText('Two', {
left: 200,
top: 100,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50
}));
}
canvas {
border: 1px solid #dddddd;
border-radius: 3px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>
Thanks in advance!
You just have to add an empty text inside your canvas and update it inside the corresponding functions. then execute canvas.renderAll after the updates. FYI, I have ZERO experience with fabric.js.
var $ = function(id) {
return document.getElementById(id)
};
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
var dynamicText = new fabric.IText('', {
left: 50,
top: 100,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
})
canvas.add(dynamicText);
function textOne() {
dynamicText.setText('ONE');
canvas.renderAll();
}
// Text that should stay
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', {
left: 300,
top: 45,
fontFamily: 'Monsieur La Doulaise',
fontSize: 27,
hasBorders: false,
hasControls: false,
selectable: true,
lockRotation: true,
lockMovementX: true,
lockMovementY: true,
align: 'mid',
originX: 'center',
originY: 'center',
centeredScaling: true,
}));
function textTwo() {
dynamicText.setText('TWO');
canvas.renderAll();
}
canvas {
border: 1px solid #dddddd;
border-radius: 3px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>
So this is my code:
var startWeekWin = Ti.UI.createWindow({
title:'Startup Weekend',
layout: 'vertical',
backgroundColor:'#b6e2e2'
});
// create scroll view here
var sv = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true
});
startWeekWin.add(sv);
var lblPicture = Ti.UI.createLabel({
top: 0,
width: 'fill',
height: 100,
backgroundImage: 'images/StartUpWeekend.png'
});
var lblTitle = Ti.UI.createLabel({
top: 15,
left: 15,
right: 15,
height: '15%',
font: {
fontSize: 24,
fontWeight: "bold",
fontFamily: "Helvetica"
},
text: "What is it?",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});
var lblText = Ti.UI.createLabel({
top: 30,
left: 15,
right: 15,
height: 70,
font: {
fontSize: 16,
fontFamily: "Helvetica",
},
text: "Etsy doostang zoodles disqus groupon " +
"greplin oooj voxy " +
"zoodles, weebly ning heekya " +
"handango imeem plugg",
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});
var lblDate = Ti.UI.createLabel({
top: 30,
width: 'fill',
height: 50,
font: {
fontSize: 24,
fontWeight: "normal",
fontFamily: "Helvetica",
fontStyle: "italic"
},
text: " January 23-25, 2015",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});
// video trailer goes here
var trailer = Ti.UI.createLabel({
top: 35,
width: 'fill',
height: 50,
text: 'Trailer Goes Here',
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});
// learn more button
var learnMoreButton = Ti.UI.createButton({
top: 40,
left: 40,
right: 40,
width: 180,
height: 50,
title: 'Learn More',
font: {
fontSize: 18,
fontFamily: "Helvetica",
fontWeight: "normal"
},
color: '#0a3f56',
backgroundColor: 'white'
});
sv.add(lblPicture);
sv.add(lblTitle);
sv.add(lblText);
sv.add(lblDate);
sv.add(trailer);
sv.add(learnMoreButton);
And this is what it displays: http://imgur.com/t4AQTMJ
I don't understand why everything is stacking on top of each other.
Could someone point out what I'm missing?
Thanks.
There is many way to build the UI That you want.
First you given all child element of sv(scroll view) to top. Every child element take top from the SV start position.
If you want to give top to every child element of sv then apply layout vertical property to scroll view.
And second way is give top after the end of first element.
every one is taking top from the scroll view so they all are over riding on every one,
First apply first way and let me know if face any difficulty in this.
Not using layout style will give it a property similar position:absolute of HTML.
Not using layout is at times good as it helps in centering the view.
The Issue is with the top that you have given to every element. As all elements have top that is coming over other elements. If you will update the top your layout will be fixed.
Developing in Titanium Mobile.
I need to remove a view from a scrollView when a delete button is clicked. I have a custom event firing when my button is clicked, which the scrollView listens for. My question is, how do I reference the view that needs to be deleted? These views are added to the scrollView dynamically, and there is no unique information about the view. I tried passing the view itself when firing the custom event, but this does not work. How do I tell the scrollView which view to delete?
When you have a delete button inside the view - that's a piece of cake :) Just get its' parent and delete it - scrollView.remove(e.source.parent);
Here I created a demo page:
var scrollView = Titanium.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: true,
layout: 'vertical'
});
var colors = ['red', 'green', 'blue', 'orange', 'purple', 'yellow'];
for (var i = 0; i < 6; i++) {
var view = Ti.UI.createView({
backgroundColor: colors[i],
borderRadius: 10,
width: 300,
height: 200,
top: 10,
id: i
});
scrollView.add(view);
var deleteButton = Ti.UI.createButton({
borderRadius: 3,
style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
backgroundGradient: {
type: 'linear',
colors: [ '#c7c7c7', '#686868' ],
startPoint: { x: 0, y: 0 },
endPoint: { x: 0, y: 30 },
backFillStart: false
},
title: 'Delete view ' + i,
font: { fontSize: 12, fontWeight: 'bold' },
color: '#fff',
width: 120,
height: 30
});
view.add(deleteButton);
deleteButton.addEventListener('click', function(e) {
Ti.API.info(e.source.id); // use this ID
scrollView.remove(e.source.parent);
});
}
Ti.UI.currentWindow.add(scrollView);