A website has the following code:
var Items = {
drop: function (a, b, d) {
if (!(typeof a == "undefined" || typeof sockets[a.id] == "undefined")) {
SSocket.send(sockets[a.id], {
action: "item_drop",
data: {
id: d
}
});
Inventory.add(a, d)
}
},
give_to_player: function (a, b) {
Items.drop(a, void 0, b)
},
take_from_player: function (a, b) {
var d = clients[a];
Inventory.remove(d, b);
Player.send_inventory(d.id)
},
};
I am trying to replace the give_to_player property with my own function using a userscript. However, I am having zero luck doing so. I am familiar with javascript injection and the variable scope.
I have tried the following:
Object.defineProperty(window.Item, 'give_to_player', {
value:
function(a,b){
console.log('Change occured');
}
});
This does not generate any errors, however the change does not take hold and the console remains empty. I have tried Object.defineProperties as well with no luck.
Finally the following code failed to produce results either:
window.Item.give_to_player = function(a,b){ console.log('Change occured');};
Does anyone have any suggestions?
I am using Chrome to run my userscripts.
The second method would work if you change the name to Items with a s and drop the window in the method to just Items.give_to_player = function(a,b){ console.log('Change occured');};.
EDIT: the var in var Items makes the method not accessible thru the window scope. if the var was dropped this window.Items.give_to_player won't throw error but since its there you'll not need to use the window in front of Items.(if that makes sense)
JSFIDDLE
side note: your error
window.Items.give_to_player = function(a,b){ console.log('Change occured');};
// Uncaught TypeError: Cannot set property 'give_to_player' of undefined
I really don't know how the rest of code looks like (if that object is in some particular scope, deeply nested or what) but if Items object is in global scope you can define AFTER that object (and its properties definition) again that property and that should override the previous one:
Items.give_to_player: function () {
//write your own function
}
But I'm not sure if this will work as long as I have so little information.
Related
I want to create a similar construction in my code.
var inList = findItem(list, data);
if(!inList) {
var item = inList.item;
}
function findItem(list, data) {
var item = list.find("[data-day='"+data.day+"']")
// more code.
// conditional return
return {item: item, valueOf:function(){return false}};
}
But it doesn't work because overwriting valueOf doesn't play nicely with a simple truthfull check (in the way that I want it to work).
and having code like if(inList == false){} looks less clean imo. Is there a way to make this work?
Boolean checks don't invoke valueOf - all objects are considered truthy. If you want to circumvent that, you'll have to invoke it yourself explicitly:
if (!inList.valueOf()) …
You should not depend on code that uses valueOf,
if you wanted to do something where you are returning an object,
just add another property instead.
var findResult = findItem(list, data);
if(!findResult.found) {
var item = findResult.item;
}
function findItem(list, data) {
var item = list.find("[data-day='"+data.day+"']");
// more code.
// conditional return
return {item: item, found: false};
}
Then again, I forgot what I was doing 5 years ago.
Im currently trying to load fabricjs objects using enlivenObjects like this:
fabric.util.enlivenObjects(elements, function(objects) {
objects.forEach(function(o) {
canvas.add(o);
});
});
The problem is, after those objects have been added and displayed on the canvas, I can't interact with them, even if object and canvas 'selectable' properties are set to true.
Even if I call 'fabric.renderAll();' after.
The problem may be related to the fact that oCoords attributes of loaded objects are all 'NaN'
oCoords: Object
bl : n
corner : Object
x : NaN
y : NaN
...
I tried to fix that problem with 'o.setCoords();' in the forEach loop, but those values are still NaN.
Do you have any idea why I can't interact with thoses objects?
Thank you guys!!
Update
I added the oCoords attributes in the prototype.toObject override:
fabric.Object.prototype.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
oCoords: this.oCoords
});
};
})(fabric.Object.prototype.toObject);
Now the oCoords values are set in the 'elements' object array before the fabric.util.enlivenObjects(elements, function(objects) { ...
But still, after the objects have been added to the canvas, all oCoords values are NaN. I tried again to use setCoords in the forEach loop but without success..
Update 2
Well.. it actually works it my jsfiddle
I don't use exactly the same code in my app.. but I can't manage to fix my problem, it must be related to the fact that I use angular to interact with fabricjs.
I'll let you know...
You should have values on the oCoords object x & y properties.
As i see you use correctly the enliveObjects() function , just also add the canvas.renderAll() into it:
fabric.util.enlivenObjects([tmpObject], function (objects) {
console.log(objects);
objects.forEach(function (o) {
canvas.add(o);
console.log(o);
});
canvas.renderAll();
});
Have you checked if the values exist on the fabric objects before you execute the enliveObjects() function?
Update
you should better extend toObject() function and pass the properties that you need to export , like :
A. you can do it only on an object:
canvas.getActiveObject().toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
oCoords: this.oCoords
});
};
})(canvas.getActiveObject().toObject);
B. Or you can override prototype.toObject to affect all objects
fabric.Object.prototype.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
oCoords: this.oCoords
});
};
})(fabric.Object.prototype.toObject);
I am trying to use some code from this tutorial and it contains some strange javascript notation that I am not familiar with chart.attr = function(name, value) {... . More than it being unfamiliar to me, it is throwing errors. I am trying to figure out how it can be changes to work in pure javascript.
function LineChart(config) {
function chart() {
// Draw the line.
chartContainer.append("path")
.datum(p.data)
.attr("class", "line")
.attr("d", line);
}
// **** This is the notation I do not understand, and gives me errors ****
chart.attr = function(name, value) {
if (arguments.length == 1)
{
return p[name];
}
else if (arguments.length == 2)
{
p[name] = value;
}
return chart;
}
chart.update = function() {
}
return chart;
}
Your code is trying to use a variable p which is undefined. It should be defined in the LineChart function as:
function LineChart(config) {
var p =
{
parent : null,
labels : [ "X", "Y" ],
...
};
...
}
As for the notation that you don't understand, this is an anonymous function expression which is being assigned to the chart.attr property. Even though it can be called by chart.attr(), this is still an anonymous function because it doesn't have a name.
The purpose of this particular function is to be a getter and setter for properties of the p object. It looks at the arguments to determine the way the function should behave: if there is only one argument, then it needs to return the property value, if there are two arguments then it should set the property value.
Example usage would look like:
var c = new LineChart();
var parent = c.attr('parent'); // get the value of the parent property
c.attr('parent', $('#something')); // set the value of the parent property
Let's dissect that line of code:
//Define chart.attr as a function that by default takes 2 parameters;
chart.attr = function(name, value) {
//If the function only gets 1 argument (so the first one)
if (arguments.length == 1)
{
//return the element with key "name" from the array p
//effectively a getter
return p[name];
}
// else, check if there are 2 arguments, but no more
else if (arguments.length == 2)
{
Assign the value of "value" to the element with key "name" from p
effectively a setter;
p[name] = value;
}
//at the end, return the chart
return chart;
}
So what this piece of code does is that if you pass only 1 argument to chart.attr(), it retrieves the value associated with that key from the array p. If you pass 2 arguments, it uses the second argument as the value of the key-valuepair from the array p with the first argument as the key.
now, without knowing the error you get, it's hard to debug this. However, the only way in which this would give an error is if p is undefined. if p doesn't contain that key, it returns null if it's a getter, and creates if it's a setter.
There is another way for this code to fail. And since the op didn't provide the error I will just speculate.
This can fail if you call, for example, chart.attr('somekey','somevalue') before chart.attr = function(name,value) { } is executed. This happens because of function hoisting...you are assigning a value to a property in this line of code. You're not defining a function...you're assigning one.
If you call chart.attr('somekey','somevalue') in the above conditions, you'll get a chart.attr is not a function error.
I have just run into an unexpected problem whilst trying to create an array prototype for a function that emulates what is available in .net (linq) called SingleOrDefault().
Whilst the prototype function worked fine, I found that when iterating over a normal array using the following syntax for (var x in y)... my function name appeared as one of the properties and broke my logic.
As a result of some googling I have redefined the function (below).
My question is, is the code in the Current block the right way to extend the Array object without causing any unwanted side effects?
Previous
Array.prototype.singleOrDefault = function (predicate) {
var items = applyPredicate(this, predicate);
if (items.length > 1) {
throw new Error(errorOutput.multipleElements);
}
return (items) ? items[0] : null;
};
Current
Object.defineProperty(Array.prototype, 'singleOrDefault', {
value: function (predicate) {
var items = applyPredicate(this, predicate);
if (items.length > 1) {
throw new Error(errorOutput.multipleElements);
}
return (items) ? items[0] : null;
},
enumerable: false
});
Yes your 'current' code is correct, not as supported with older browsers as the previous code which is a downside if you need ie6/7 support (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).
You could use the object.hasOwnProperty method with the 'previous' code to achieve the same effect when you are iterating:
for (var x in y) {
if (y.hasOwnProperty(y[x])) {
//would filter out SingleOrDefault in your examples above
}
}
I'm receiving some 'body' content from a jquery's json call, where I can get the unique javascript element returned by doing:
script_element = $(data.body)[1]
This equals to:
<script type="text/javascript">
updater('foo', 'bar', {}, '0', constant='');
</script>
So, typeof script_element returns "object"
And, if I run script_element.innerText, I can get:
updater('foo', 'bar', {}, '0', constant='');
After receiving this script, what I'm doing right now is just run an eval on it, but searching around I couldn't get a way to run eval changing function call params.
What I'm trying to do is change the third param of the call, in this case the {}, that can change depending on the return of the json call, so I can't just search for {}.
I could also do script_element.text.split(',')[2] for example, and change this text on the fly, but I was thinking there should be a better way to do this.
I don't know if javascript can recognize and treat a "future method call", but still think there should be a better way.
Any idea?
What you could do is shadowing the function so as to be able to alter the third argument. You ought to define that shadowing function before fetching the JSON.
var originalUpdater = updater; // keep old function to call
// overwrite (shadowing)
updater = function(a, b, c, d, e) {
// change c appropriately here
originalUpdater(a, b, c, d, e);
}
Then you can still just eval it (which is not very safe, but that's not your point if I'm not mistaking), and it will call the shadow function.
A more generic shadowing method would be along the lines of:
var originalUpdater = updater; // keep old function to call
// overwrite (shadowing)
updater = function() {
// change arguments[2] appropriately here
originalUpdater.apply(this, arguments);
}
Fiddle: http://jsfiddle.net/n7dLX/
Change the server. Rather than returning
<script type="text/javascript">
updater('foo', 'bar', {}, '0', constant='');
</script>
Return
{
"method": "updater",
"params": [
"foo", "bar", {}, "0", ''
]
}
Assuming that you cannot change what is being sent over from the server, you can simply run through the innerText with a regular expression and pass update the HTML before you insert it.
var replacer = /\w+\(([^()]+)\)/gi;
script_element.innerText.replace(replacer, function(matched_text, func_params){
var orig_func_params = func_params;
// Make changes to func_params here.
return matched_text.replace(orig_func_params, func_params);
});
This can be functionized by doing the following:
var replacer = /\w+\(([^()]+)\)/gi;
function replace_arg(script_element, arg_index, replacement_value) {
script_element.innerHTML = script_element.innerHTML.replace(replacer,
function(matched_text, func_params){
var orig_func_params = func_params;
func_params = func_params.split(",");
if (arg_index >= func_params.length) {
throw new RangeError(arg_index + " is out of range. Total args in function:" + func_params.length);
}
func_params[arg_index] = JSON.stringify(replacement_value);
return matched_text.replace(orig_func_params, func_params.join(","));
});
return script_element;
}
This can be called in this way:
script_element = replace_arg(script_element, 3, {"new":"arg"});
I don't understand what you are doing, but in general if you don't want to rely on the order of parameters make the function take one parameter that is an object whose properties are the parameters:
function add(params) {
var a = params.hasOwnProperty("paramA") ? params.paramA : 0;
var b = params.hasOwnProperty("paramB") ? params.paramB : 0;
return a + b;
}
add({paramA: 1, paramB: 2});
In this case you should use hasOwnProperty to check if the function was passed the parameter you are looking for before trying to access it.