Is it possible to convert JSFiddle to VSCode format? - jsfiddle

I'm trying to convert my jsfiddle code to VSCode, but I wasn't able to, as copy and pasting + code format editing were not working.
(jsfiddle link in question: https://jsfiddle.net/b2pLmqrj/ )
I've attempted to copy and paste it in, fix the format with tags (script, style, etc), and completely redo it from scratch, but to no avail. Does anyone know what I should fix in it to change it to VSCode format?
HTML:
<div id="map"></div>
CSS:
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Javascript:
mapboxgl.accessToken = 'pk.eyJ1IjoiMWRyaXZlYnV5IiwiYSI6ImNsNjN1NjhjejBhZjYzaW44YXN0MzByb3YifQ.mykT1INa7Fbkk4VqIpdM_Q';
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11', // style URL
center: [-68.137343, 45.137451], // starting position
zoom: 5 // starting zoom
});
map.on('load', () => {
// Add a data source containing GeoJSON data.
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
// These coordinates outline the United States.
'coordinates': [
[
[-125.15625000000001, 48.04870994288686],
[-124.71679687499999, 43.32517767999296],
[-125.15625000000001, 39.639537564366684],
[-121.11328124999999, 34.59704151614417],
[-121.11328124999999, 34.59704151614417],
[-117.158203125, 32.47269502206151],
[-105.732421875, 31.27855085894653],
[-97.20703125, 25.64152637306577],
[-84.287109375, 29.84064389983441],
[-80.947265625, 24.84656534821976],
[-74.970703125, 35.38904996691167],
[-66.62109375, 45.02695045318546],
[-68.73046875, 47.39834920035926],
[-71.455078125, 44.84029065139799],
[-82.880859375, 41.96765920367816],
[-88.154296875, 48.22467264956519],
[-109.072265625, 49.03786794532644],
[-123.134765625, 49.15296965617042],
[-125.15625000000001, 48.04870994288686],
]
]
}
}
});
// Add a new layer to visualize the polygon.
map.addLayer({
'id': ' ',
'type': 'fill',
'source': 'maine', // reference the data source
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.2
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 0
}
});
});

Related

Chart.js pie chart in table shows weird behavior on page resize

There are chart.js pie charts in a html table.
The issue: on zoom-out and then zoom-in, the cells do not resize to their initial size.
The layout looks something like this:
__________________________
| inner div | inner div |
|_____________|____________|
| | |
| Pie1 | Pie2 |
|_____________|____________|
I have referred the documentation on resizing and this link to add responsive and maintainAspectRatio fields in options object.
On setting responsive:true, the diagram is enabled to resize on zoom.
Setting maintainAspectRatio:false, to fix previous irregular zoom issue where the multiple charts do not resize proportionally since they take table cell's width.
Just for reference there is a blurry text issue with chart.js zoom mentioned at
github here.
Sourcecode of issue on JS fiddle: http://jsfiddle.net/rfaLvuho/.
Use zoom-out and zoom-in back to reproduce.
You can switch to <div> elements for the layout to fix this. I used float in the snippet below but it should work with flex or grid layout as well.
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false
}
};
var myPie1 = new Chart('chart-area1', config);
var myPie2 = new Chart('chart-area2', config);
.canvas-holder {
width: 50%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="canvas-holder">
<canvas id="chart-area1"></canvas>
</div>
<div class="canvas-holder">
<canvas id="chart-area2"></canvas>
</div>

Cytoscape.js Edge and Arrow Style

How do I add directions to my edges?
How do I label my vertices?
Right now I have:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: graph_to_elements(graph),
style: 'node { background-color: blue; }'
});
graph is vertices and edges.
graph_to_elements is a function that graphs the inputted graph.
What other things can I add to style? When I tried adding different properties it would not work.
When you want to add directions to your edges, simply add the 'target-arrow-color' and 'target-arrow-shape' property to your style.
You can see this in a very easy example here: http://js.cytoscape.org/#getting-started/specifying-basic-options
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)' // here you can label the nodes
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle' // there are far more options for this property here: http://js.cytoscape.org/#style/edge-arrow
}
Stick to the notation provided by cytoscape when initializing the graph, when you have more than one style to define, you want to write:
style: [
{
selector: '...'
style: {...}
},
{
...
}
]

None of the chartist plugins are working

I have a working chartist Line chart and I have configured the plugins as suggested in documentations. I don't get any errors when loading the page. Its just that nothing gets reflected on the chart according to plugin. I have added two plugins - they don't show any error and my line chart shows perfectly fine.
But I see no effect of those plugins - tooltip plugin and pointlabel plugin.
And yes they are loaded in the HTML and their css files are also included else would have got errors about plugins not being present.
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
showGrid: false
},
axisY: {
},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: function(value) {console.log("i was called"); return '$' + value}
}),
Chartist.plugins.tooltip({
})
]
};
var m = new Chartist.Line('#myChart', data, options);
Here is simple working example using your code. One thing to watch out for is that the tooltips need additional CSS to display correctly.
https://jsfiddle.net/rxdb576n/1/
var data = {
labels: ["Mon", "Tue", "Wed"],
series: [
[10, 20, 75]
],
}
var options = {
low: 0,
high: 100,
showGridBackground: false,
showArea: true,
axisX: {
showGrid: false
},
axisY: {},
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle',
labelInterpolationFnc: function(value) {
console.log("i was called");
return '$' + value
}
}),
Chartist.plugins.tooltip({
})
]
};
var m = new Chartist.Line('#myChart', data, options);
.chartist-tooltip {
opacity: 0;
position: absolute;
margin: 20px 0 0 10px;
background: rgba(0, 0, 0, 0.8);
color: #FFF;
padding: 5px 10px;
border-radius: 4px;
}
.chartist-tooltip.tooltip-show {
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script>
<script src="https://unpkg.com/chartist-plugin-tooltips#0.0.17"></script>
<script src="https://unpkg.com/chartist-plugin-pointlabels#0.0.6"></script>
<div id="myChart"></div>

SenchaTouch onItemDisclosure 2 icons

I have a list and I want have two icons per line using onItemDisclosure. How can I do that?
I don't know how to implement onItemDisclousre() on two icons but probably this will help you.
In the following example i have put an image on every itemlist and functionality is provided on itemtap event. This will serve the purpose of doing multiple tasks with single itemlist.
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help you.
bye.
You can do this by manually adding a disclosure icon inside of itemTpl on your list items. Add this inside of your view:
{
xtype: 'list',
onItemDisclosure: true,
cls: 'my-list-cls',
itemTpl: [
'<div class="x-list x-list-disclosure check-mark" style="right: 48px"></div>'
]
}
Notice that the div inside of itemTpl has the CSS class "x-list x-list-disclosure check-mark". I set style="right: 48px" because I want this icon to appear on the left side of the regular disclosure icon (the one with the right arrow) and this rule leaves enough room on the right to show the arrow icon.
Then, in your app.scss, add:
.my-list-cls {
.x-list.check-mark.x-list-disclosure:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '3';
font-family: 'Pictos';
color: #fff;
text-align: center;
text-shadow: 0 0 0;
}
}
This controls the styling for your new disclosure icon.
By setting content: '3';, you are changing the icon from the default right arrow to a checkmark. (See all of the available icons here: Pictos fonts).
The result:
It is possible but not easy. In short you have to extend class Ext.dataview.List and/or Ext.dataview.element.List.

dojox.Grid row background color

I have a Grid and I would like to change the background color, do you know how to do it ?
Thanks for your help, have a nice day.
Here is my code :
var jsonStore = new dojo.data.ItemFileReadStore({url: "..." ?>"});
var model = new dojox.grid.data.DojoData(null,jsonStore,{jsId: 'model', rowsPerPage: 20, query: { date: '*' }});
var view1 = {
cells: [[
{name: 'x', width: "80px", field: "date"},
{name: 'y', width: "50px", field: "weight"},
{name: 'z', width: "100px", field: "nurse"}
]]
};
var layout = [ view1 ];
<div id="gridWeight" dojoType="dojox.Grid" model="model" structure="layout" autoWidth="true" style="height: 150px"></div>
You can either use the onStyleRow event or adapt the CSS directly - in your case:
.tundra #gridWeight .dojoxGridRow,
.tundra #gridWeight .dojoxGridRowOdd {
background: red;
}