We Keep Coding

JavaScript override only specified options from a list of default options belonging to an object

I want to create an object that has default options it resorts to unless certain options are specified by the user. The user can define any of the optional values as an array in any order and the values that haven't been defined by the user will instead take on the values defined in defaultOptions array.
In this case, the user wants to override the width and height of a Chart object only, while all the other defaultOptions will remain as defined in the class.
From my example, it doesn't seem to change the width and height to the user specified values, but instead uses the defaultOptions values.
class Chart {
constructor(div, data, options = {}) {
let defaultOptions = {
mode: "bar-chart",
width: div.clientWidth,
height: div.clientHeight,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
name: "Default Chart"
}
this.options = Object.assign({}, defaultOptions, options);
}
}
/* create Chart object /
/ should override defaultOptions array width and height with these new values */
let chart = new Chart(div,{
width: 400,
height: 400,
});
/* alternatively, could create a Chart object with only mode value change */
let chart = new Chart(div,{
mode: "pie-chart"
});
The answer should use vanilla Javascript, please!

One problem, and one thing to watch out for:
Your parameters are misaligned. You are sending your options as data. See below for an added data parameters when constructing.
Watch out for the nested objects if you want the caller to be able to apply individual margin properties. See below for one example of how to allow overriding only one margin property and keeping the others as default.
class Chart {
constructor(div, data, options = {}) {
let defaultOptions = {
mode: "bar-chart",
width: div.clientWidth,
height: div.clientHeight,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
name: "Default Chart"
}
this.options = Object.assign(
{},
defaultOptions,
options,
{margin: Object.assign(
defaultOptions.margin,
options.margin || {}
)}
);
}
}
/* create Chart object /
/ should override defaultOptions array width and height with these new values */
let chart1 = new Chart(div1, {}, {
width: 400,
height: 400,
});
/* alternatively, could create a Chart object with only mode value change */
let chart2 = new Chart(div2, {}, {
mode: "pie-chart",
margin: {bottom: 7},
});
console.log(chart1, chart2);
<div id="div1" style="width: 317px; height: 321px; background-color: blue;">
<div id="div2" style="width: 172px; height: 251px; background-color: green;">

Cannot set width of fancybox

I have Typescript code, where I need to set width of fancy box
Here is script code
export module Step2{
export function loading(){
Tabs.customCheckbox("conditions");
Tabs.customCheckbox("newsletter");
$('select.custom1').selectmenu();
LoadActions.load_passenger_datepickers();
LoadActions.load_field_actions();
LoadActions.load_button_actions();
LoadActions.load_form_actions();
$('.fancybox').fancybox();
$('.fancyconditions').fancybox({ width: '60%', height: '60%', baseClass: 'fancyconditions' });
$('.tip').tooltipster({ contentAsHTML: true });
$('.bonuscard_info').toggle();
if (gon && gon.search['id']) { CheckStatus.check_status(); }
if (localStorage.getItem('rescheduled_flight') === '1') {
localStorage.removeItem('rescheduled_flight');
Track.log_event("Show rescheduled flight");
return $.fancybox.open($('#step_2_rescheduled'));
}
}
};
But here $('.fancyconditions').fancybox({ width: '60%', height: '60%', baseClass: 'fancyconditions' });
I get error
Argument of type '{ width: string; height: string; baseClass: string; }' is not assignable to parameter of type 'any[]'.
Object literal may only specify known properties, and 'width' does not exist in type 'any[]'.
How I can solve it?

Change height of Highcharts with JavaScript. By default only re-sizes on window re-size

We're using HighCharts in our app, and I've added a function to expand the chart fullsize. I change the styles as well as use Javascript to change the height of the div.
However nothing changes until you actually resize the browser window. Anyone else run into this issue?
<section id="highchart-container" ng-class="{'high-chart-expanded' : highChartMax}">
<highchart id="chart1" config="chartConfig" style="height:auto"></highchart>
</section>
ChartHeader scope
function expandChartPanel() {
vm.chartMaxed = !vm.chartMaxed;
highChart = ScopeFactory.getScope('highChart');
if (vm.chartMaxed) {
highChart.highChartMax = true;
}
else {
highChart.highChartMax = false;
}
highChart.toggleChartSize();
}
HighChartDirective scope
function toggleChartSize() {
var chart1 = document.getElementById("chart1");
if (vs.highChartMax) {
chart1.style.height = "100%";
} else {
chart1.style.height = "400px";
}
}
Styles (SASS)
.high-chart-expanded {
min-height: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
#highcharts-6,
#chart1,
.highcharts-background,
.highcharts-container {
min-height: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
}
}
HighChart chartConfig
ApiFactory.quotes(buildFullUrl(url)).then(function (data) {
var quote_data = formatQuotes(data, 'quotes');
// Create the chart
vs.chartConfig = {
options: {
legend: {
itemStyle: {
color: "#333333",
cursor: "pointer",
fontSize: "10px",
fontWeight: "normal"
},
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
x: 60
},
chart : {
zoomType: 'x',
events: {
load: function () {
// HighChart loaded callback:
broadcastChartloaded();
}
}
},
This is what I see when I console out the chartConfig
console.log('highChart.chartConfig = ', highChart.chartConfig);

Try chart.setSize(width, height) ?
Here's a working example
UPDATE : for angular directive
To Pull out the chart object from directive you can just go the jQuery route:
var chart = $('#theChart').highcharts();
chart.setSize(width, height);
Specifically for ng-highcharts users, here's how its recommended to pull out the high-charts object by the author of the directive. The above method will work just fine too.
var chart = this.chartConfig.getHighcharts();
chart.setSize(width, height);
Although you can do it anywhere in your controller/directive/service, I would recommend you create a new service that returns this object , and then inject it in your controller if you are strict about following Angular design pattern, but if not just those two lines should work fine anywhere that you have access to chartsConfig object.
To reset the chart to being responsive again check this answer.

using jQuery options to animate

I am trying to write a jQuery plugin to do some animation but I want to pass the animation options in as a string like the following:
(function ($) {
$.fn.animateBox = function (options) {
options = $.extend({
animation: "backgroundColor: '#0E4839', padding: '10px', color: '#ffffff', fontSize: '153.846%', margin: '0 0 1em 0'"
}, options);
return $(this).each(function () {
var box = $(this);
box.animate({ options.animation }, 'slow');
});
};
})(jQuery);
Is this possible as the above is currently throwing an error complaining the dot in the options.animation should be a semi colon (as it is expecting something like backgroundColor: '#0E4839')

You are passing the property as a string, but the jQuery animate expects an object. And you can't substitute a variable inside {} (an object literal).
So the easiest solution would be to make animation an object instead of string, so that it looks like this:
options = $.extend({
animation: {
backgroundColor: '#0E4839',
padding: '10px',
color: '#ffffff',
fontSize: '153.846%',
margin: '0 0 1em 0'
}
}, options);
then change this:
box.animate({options.animation}, 'slow');
to this:
box.animate(options.animation, 'slow');

Dynamic creation of QML ObjectModel elements

I'am trying to dynamically create bunch of QML ObjectModel elements such as simple rectangles and then show them in ListView. But when I build my application nothing is appear. Console log shows only the message: "Created graphical object was not placed in the graphics scene". Is there any way to do it right with this approach, or anything else?
UPD: code
main.qml
import "imgRectsCreation.js" as ImgRectsCreationScript
import QtQuick 2.0
import QtQml.Models 2.1
Rectangle {
id: root
ObjectModel{
id: itemModel
Component.onCompleted: ImgRectsCreationScript.createImgRects();
}
ListView {
id: view
clip: true
anchors { fill: root; bottomMargin: 30 }
model: itemModel
preferredHighlightBegin: 0; preferredHighlightEnd: 0
highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem; flickDeceleration: 2000
cacheBuffer: 200
}
Rectangle {
width: root.width; height: 30
x: 10
y: 330
color: "gray"
Row {
anchors.centerIn: parent
spacing: 20
Repeater { // little points at the bottom
model: itemModel.count
Rectangle {
width: 5; height: 5
radius: 3
color: view.currentIndex == index ? "sandybrown" : "white"
MouseArea {
width: 20; height: 20
anchors.centerIn: parent
onClicked: view.currentIndex = index
}
}
}
}
}
}
imgRectsCreation.js
var sprite;
var component;
function createImgRects() {
component = Qt.createComponent("ImgRectSprite.qml");
if (component.status === Component.Ready)
finishCreation();
else
component.statusChanged.connect(finishCreation);
}
function finishCreation() {
for (var i = 0; i < 3; i++) {
if (component.status === Component.Ready) {
sprite = component.createObject(itemModel, {"x": 10, "y": 10});
if (sprite === null) { // Error Handling
console.log("Error creating object");
}
}
else if (component.status === Component.Error) { // Error Handling
console.log("Error loading component:", component.errorString());
}
}
}
and finally - ImgRectSprite.qml
import QtQuick 2.0
Rectangle {
width: 100; height: 100;
color: "red"
Image {
width: parent.width
height: parent.height
source: window.slotGetFileUrl()
}
}

I'm not a big fan of component creation from JS code - i tend to put QML code in .qml files, and "heavy" (well it's JS afterall) code inside .js files - .
Have you tried to dynamically create qml objects using the Loader object instead?

Well, okay, I've solved it by myself. But I'm not completely sure that it's a right decision.
I've decided to remove ObjectModel from my main.qml
... and replace it with ListModel
ListModel {
id: dataModel
dynamicRoles: true
Component.onCompleted: {
for (var i = 0; i < 3; i++)
{
append({ color: "orange" })
}
}
}
finally, I've added delegate to my ListView
delegate: Rectangle {
width: view.width
height: view.height
color: model.color
Image {
width: parent.width
height: parent.height
source: window.slotGetFileUrl() // includes logic to select images
}
???
PROFIT!
Thanks for your attention :)

Try to replace itemModel as a parent for dynamically created object with null or undefined value:
sprite = component.createObject(null, {"x": 10, "y": 10});