Why do I get an syntax error in IE11 when trying to generate a GOJS diagram - internet-explorer-11

I can generate the diagram in Chrome, Firefox, Safari and Microsoft Edge but not in IE11. When I look at the console, it tells me that there are two issues:
1.) 'init' is undefined
2.) Syntax error
In the initialization I do the following:
<script src="https://unpkg.com/gojs/release/go.js"></script>
<script src="/js/GenerateMap.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
Inside GenerateMap.js I have the following:
function init() {
var newString = document.getElementById("valueFromServer").value;
var GO = go.GraphObject.make;
....}
And for the Syntax error it tells me that it's at line 13. The line containing ").":
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
),
new go.Binding("location", "loc", go.Point.parse)
));
Why would these issues only be with IE11?

{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
The issue is related to the above code, at the end of the Binding method, there have an extra ',' symbol, try to remove it.
The following code should be works well, try to use it.
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name")
),
new go.Binding("location", "loc", go.Point.parse)
));

Related

Can't add custom colors in Tailwind

I'm trying to add a custom color:
extend: {
colors: {
'body-color': '#525B73'
}
}
This breaks compilation with an error about built-in Tailwind classes not existing:
The bg-white class does not exist.
Also tried color: { bodyColor: '#525B73' }, to no avail. This error vanishes if I remove my custom color. What's going on?
Below is a simplified version of my config file:
module.exports = {
purge: [
'./components/**/*.vue',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.js'
],
theme: {
fontFamily: {
'intro-black': ['intro-black', 'sans-serif']
},
container: {
maxWidth: {
lg: 'none'
},
},
extend: {
colors: {
'body-color': '#525B73'
},
fontSize: {
'30': '30px'
},
lineHeight: {
'40': '40px'
},
height: {
'60': '60px'
},
margin: {
'100': '100px'
},
padding: {
'40': '40px'
},
borderWidth: {
'6': '6px'
},
zIndex: {
'20000': '20000'
},
boxShadow: {
'25': '0 0 20px rgba(0, 0, 0, 0.25)'
},
borderRadius: {
'8': '8px'
}
}
}
}
EDIT: as per #BoussadjraBrahim's comment I updated to Tailwind 2.x which replaces the main compilation problem with a minor "'body-color' class does not exist" problem.
When you add a custom color it will applied to any colorable property like background, text, border and gradient ..., so if you define a color named body-color it will be available as :
bg-body-color : for background color
text-body-color : for text color
border-body-color : for border color
and so on
I recommend to give an appropriate name like primary or blue-gray instead of body-color

iOS 13 dark mode is not working using Titanium classic framework

I am trying to implement dark mode theme in our app for iOS 13 and above. I have followed this link Dark Mode in iOS 13. But I am facing some issue. I have attached the sample code below. I am expecting if I change enable dark appearance then it should change the color of window according to semantic colors file.
var deviceDetect = require('./deviceDetect');
var dialog = require('./dialogueBox');
var currentStyle = deviceDetect.isIos() ? Ti.App.iOS.userInterfaceStyle : undefined;
var colorWindow = Ti.UI.fetchSemanticColor("backgroundColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow,
layout: 'vertical'
});
var top = Ti.UI.createView({
backgroundColor: 'red',
layout: 'horizontal',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
top: deviceDetect.isAndroid() ? 0 : '50%'
});
var view = Ti.UI.createView({
center: { x: 205, y: 250 },
height: 400,
width: 300,
backgroundColor: colorWindow,
layout: 'vertical',
top: '20%'
});
var img = Titanium.UI.createImageView({
center: { x: 150, y: 110 },
image: './logo.png',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});
view.add(img);
var emailField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 30,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
var passField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 10,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
view.add(emailField);
view.add(passField);
if (deviceDetect.isIos() && currentStyle === Ti.App.iOS.USER_INTERFACE_STYLE_DARK) {
// dark mode
console.log("I am here", colorWindow, colorWindow[Ti.UI.semanticColorType]);
//win.backgroundColor = 'green';
}
if (deviceDetect.isIos()) {
Ti.App.iOS.addEventListener('traitcollectionchange', function (event) {
if (currentStyle !== Ti.App.iOS.userInterfaceStyle) {
currentStyle = Ti.App.iOS.userInterfaceStyle;
if (currentStyle == 2) {
//tfAmount.color = 'white';
// dark mode
//win.backgroundColor = colorWindow;
//view.backgroundColor =
} else {
//win.backgroundColor = '#AAAAFF';
//view.backgroundColor = '#90EE90';
}
//console.log(colorWindow);
//win.backgroundColor = colorWindow;
//Ti.API.info('User Interface Style changed: ' + currentStyle);
}
});
}
win.add(view);
win.add(top);
win.open();
Here are the semantic.colors.json file content:
{
"backgroundColor": {
"light": "#ffffff",
"dark": "#000000"
}
}
Thanks in advance!!!
let me know If I missing something.
I've slimmed down the example to see just the parts that are needed and it works fine (iOS + Android [I've used 9.1.0 already]):
/app/controllers/index.js
var colorWindow = Ti.UI.fetchSemanticColor("windowBackgroundColor");
var bgColor = Ti.UI.fetchSemanticColor("viewColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow
});
var view = Ti.UI.createView({
height: 300,
width: 300,
backgroundColor: bgColor
});
win.add(view);
win.open();
/app/assets/semantic.colors.json
{
"windowBackgroundColor": {
"dark": "#666666",
"light": "#ff0000"
},
"viewColor":{
"dark": "#00ff00",
"light": "#0000ff"
}
}
Make sure to use 9.0.3.GA (or later).
It will display a grey/green or red/blue screen, depending on your phones settings. Also make sure to close the window when changing the dark-mode on Android.

Newtonsoft.Json json string into Default.aspx for Highcharts

I Serialized my data in code behind as;
Dim classes As List(Of SerializedJsonDT) = SerializedJsonDT.GetJsonFriendlyClasses(dt)
jsonNTMS = JsonConvert.SerializeObject(classes)
Then I received this data from aspx page as;
<script type="text/javascript">
var obj = JSON.parse('<%=jsonNTMS%>');
var catName = obj[0].name;
var ser1Name = obj[1].name;
var ser2Name = obj[2].name;
var catData = obj[0].data;
var ser1Data = obj[1].data;
var ser2Data = obj[2].data;
var cSstopHere2 = 2;
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
height: 400,
width: 600,
spacingRight: 20,
type: 'spline',
backgroundColor: '#1a1818',
events: {
load: function () {
this.series[1].setData(eval(ser1Data), true, true);
this.series[0].setData(eval(ser2Data), true, true);
}
}
},
title: {
text: 'GÜNLÜK DÖVİZ STATİĞİ - USD',
style: {
color: '#ffffff',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
categories: catData,
labels: {
style: {
color: '#ffffff',
fontSize: '10px'
}
},
tickInterval: 1,
gridLineWidth: 0.2,
lineColor: '#ffffff'
},
yAxis: {
title: {
text: '1 USD = ? TL',
style: {
color: '#ffffff',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
},
},
min: 2.1,
gridLineWidth: 0.2,
lineColor: '#ffffff'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
color: '#ffffff'
}
},
lineWidth: 2
}
},
series: [{
name: "USD: " + ser1Name,
data: []
},{
name: "USD: " + ser2Name,
data: []
}],
});
chart.redraw
});
</script>
I can see my chart container but only the categories shown. I cant see my series in my highchart.
The web form I have;
<body>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<form id="form1" runat="server">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</form>
</body>
Does anyone knows how to make my highcharts shows my series?
My categories was time values and I convert them to string before serialized. (08:17, 09:45 etc). And my series data originally was decimal values and I convert them to string before serialized. I did place ser1Data first and didn't work. So I try to use set data events. I guess I have to convert my series data in javascript to decimal. But I rather use this process in my custom "Public Class SerializedJsonDT" class. mason help me to build the class.
Kind Regards...

Position ExtJs Color Picker

I am using ExtJs Color Picker component.
var cp = Ext.create('Ext.picker.Color', {
style: {
backgroundColor: "#fff"
} ,
listeners: {
scope:me,
select: selectColor
}
});
But I do not know how can I position color picker at the screen ?
You can encapsulate color component in window object
It will be something like this
var cp = Ext.create('Ext.picker.Color', {
style: {
backgroundColor: "#fff"
} ,
listeners: {
scope:me,
select: selectColor
}
});
var window = Ext.create('Ext.window.Window', {
title: 'Select Color',
resizable: false,
draggable: false,
closeAction: 'hide',
width: 150,
height: 135,
border: false,
hidden: true,
layout:'fit',
floating: true,
renderTo: "divCompare",
items: [cp]
})
Than you can use
win.showat(x,y)
method

I want to add Android Checkbox(SWITCH) to my data array for TableView Using appcelerator titanium?

I created table view with rows, those contains label and switch box , style is check box. My requirement is, among those row check boxes, I select some of them. Then after, I want those check boxes which are checked and which are unchecked. Here is my code:
// My Array Data for Table-view
var checkboxArray = [ { title: "Mountain View (North America)\nCloudy", leftImage: "http://www.google.com/ig/images/weather/cloudy.gif" },
{ title: "Sucre (South America)\nMostly Cloudy", leftImage: "http://www.google.com/ig/images/weather/mostly_cloudy.gif" },
{ title: "Prague (Europe)\nClear", leftImage: "http://www.google.com/ig/images/weather/sunny.gif" },
{ title: "St Petersburg (Europe)\nSnow", leftImage: "http://www.google.com/ig/images/weather/snow.gif" },];
// My Android checkbox
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"Sound Enabled",
value:true
});
// My Header label inside table-view
var headerLabel = Ti.UI.createLabel({
backgroundColor:'#035385',
color:"white",
font:{ fontSize: 30, fontWeight:"bold" },
text:"Favoriete Merken",
textAlign:"center",
height:45,
width:500
});
// My Table View
var table = Ti.UI.createTableView({
backgroundColor:"white",
data:checkboxArray,
headerView:headerLabel,
separatorColor:"black",
top:0,
width:'auto'
});
win2.add(table);
Rows created via object literals cannot have views added to them. But if you create the row via Ti.UI.createTableViewRow, you can. So to add checkboxes, just change your example to create the rows explicitly, add the checkboxes, store a reference to the checkboxes, and you're done.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var rows = [];
var data = [
{ title: 'Mountain View (North America)\nCloudy', leftImage: 'http://www.google.com/ig/images/weather/cloudy.gif' },
{ title: 'Sucre (South America)\nMostly Cloudy', leftImage: 'http://www.google.com/ig/images/weather/mostly_cloudy.gif' },
{ title: 'Prague (Europe)\nClear', leftImage: 'http://www.google.com/ig/images/weather/sunny.gif' },
{ title: 'St Petersburg (Europe)\nSnow', leftImage: 'http://www.google.com/ig/images/weather/snow.gif' }
];
for (var i = 0, l = data.length; i < l; i++) {
var row = Ti.UI.createTableViewRow();
row.add(Ti.UI.createImageView({
image: data[i].leftImage,
width: 45, height: 45,
left: 0
}));
row.add(Ti.UI.createLabel({
text: data[i].title, textAlign: 'left',
color: '#000',
left: 50, right: 50
}));
row.add(data[i].switch = Ti.UI.createSwitch({
style: Ti.UI.Android && Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title: 'Sound Enabled',
value: true,
right: 5,
width: 40
}));
rows[i] = row;
}
win.add(Ti.UI.createTableView({
data: rows,
backgroundColor: 'white',
separatorColor: 'black',
headerView: Ti.UI.createLabel({
backgroundColor: '#035385',
color: 'white',
font: { fontSize: 30, fontWeight: 'bold' },
text: 'Favoriete Merken', textAlign: 'center',
height: 45
}),
bottom: 45
}));
var alertFirstSwitchValue = Ti.UI.createButton({
title: 'Alert First Switch Value',
bottom: 0, right: 0, left: 0,
height: 45
});
alertFirstSwitchValue.addEventListener('click', function () {
alert(data[0].switch.value);
});
win.add(alertFirstSwitchValue);
win.open();