Raphael not adding an id nor data attribute - svg

Hopefully someone has an answer because looking at the example code in the documentation and the 'Free Icons' script I just can't see how this isn't working.
My issue is I am trying to create a beanie (hat). This beanie is made up of a number of different sections which I have stored in a variable named 'beanie' like so:
beanie = {
section1: "PATH CO-ORDINATES",
section2: "PATH CO-ORDINATES",
section3: "PATH CO-ORDINATES"
};
Basically the same way the 'Free Icons' are done as mentioned previously. I have then looped through all sections and created each on the paper like so:
for (var section in beanie) {
activeSection = beanieWindow.path(beanie[section]).attr({
'fill': '#ffffff',
'stroke': 'none'
})
.data('section', beanie[section])
.click(function () {
makeActiveSection(this);
})
.hover(
function () {
this.attr('stroke', 'red');
},
function () {
this.attr('stroke', 'none');
}
);
}
This this all works wonderfully, but when inspecting the paths there is no data-section attribute added - not even an 'id' attribute, which Neil mentions in his answer on Raphael, after assigning data, i am not able to get it that the id is provided by Raphael.
Not sure if I'm missing something obvious, but if I am I just can't see it :-/
Any help would be much appreciated!
Thanks in advance,
Mat

Related

How to use content that's stored in other elements?

I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/

In Angular, how to parse and extract HTTP response that has Complex structure (JSON)?

I am new to Angular and need your help here. I have an Angular service that has the API calling function as shown below.
searcheBay() {
console.log("calling ebay service");
return this.httpClient.get (this.ebayURL);
}
and I am calling this function from the component as shown below.
this.searchService.searcheBay().subscribe((data) => {
this.svcdata = data
});
The data variable has complex JSON structure (see the image below).
The data I am looking to read is held by "searchResult" element. Could you suggest how to parse and extract the "searchResult" element? Thanks in advance.
I debugged in the Safari DEV console and see the element accessibility as shown below.
When I updated the same code in my component, I encounter compile: ERROR in src/app/search/search.component.ts(20,29): error TS2339: Property 'findItemsByKeywordsResponse' does not exist on type 'Object'. Please suggest your thoughts.
serviceOnButtonClick(){
this.searchService.searcheBay().subscribe((data) => {
this.svcdata = data.findItemsByKeywordsResponse[0].searchResult
});
#javapedia.net try this, if you response data Object is same as you shown in the image,
this.searchService.searcheBay().subscribe((data) => {
this.svcdata = data.findItemsByKeywordsResponse[0].searchResult;
console.log(this.svcdata);
});
Edit
this.searchService.searcheBay().subscribe((data: any) => {
this.svcdata = data.findItemsByKeywordsResponse[0].searchResult;
console.log(this.svcdata);
});
I ended up using the map projection as shown below. Hope this helps.
serviceOnButtonClick(){
this.searchService.searcheBay().pipe(map((data:any) => data.findItemsByKeywordsResponse[0].searchResult)).subscribe((data) => {
this.svcdata = data;
console.log(this.svcdata);
});
}

How to jBox from JS?

(This is embarrassing, I should not be asking this...but I just don't see the problem...)
As part of a JS-Fn, I would like to give the user immediate feedback by opening a jBox-Tooltip that is attached to the control user is dealing with. But the control tip does not open - what am I doing wrong? I have simpified stepwise by removing params and finally even this does not do.
var x=new jBox('Tooltip',{content:"Press Escape again to clear the input-field!"});
x.open();
I started with
var x = new jBox('Tooltip',{
content:"Press Escape again to clear the input-field!",
attach: "#ipExpr",
onInit: function() { this.open(); }
});
NB: I've chedcked that $("#ipExpr").length==1
It seems that attaching the jBox to an element and opening it when its being initialised seems to be the problem. Can you describe what kind of behavior your looking for in detail? For example, if you like to open the jBox right away on the element with id #idExpr, you could do it like this: jsfiddle.net/pbrrah37
var x = new jBox('Tooltip',{
content:"Press Escape again to clear the input-field!",
onInit: function() { this.open({target: $('#ipExpr')}); }
});

Hiding _all_ remote methods in loopback model

I'm using loopback 3.
I have this lines of codes in my model's js (survey.js):
let enabledRemoteMethods = []
Survey.sharedClass.methods().forEach(function(method) {
console.log(method.name, method.isStatic)
let matchingEnabledRemoteMethod = _.find(enabledRemoteMethods, {name: method.name});
if (!matchingEnabledRemoteMethod) {
Survey.disableRemoteMethodByName(method.name, method.isStatic);
}
});
It works.... almost. I could still see in the explorer the REST endpoint for "PATCH /surveys/{id}". My expectation is: there shouldn't be any REST endpoints listed in the explorer.
Then I examined the URL corresponding to that operation, it is:
http://localhost:3000/explorer/#!/Survey/Survey_prototype_patchAttributes
Which, according to the documentation, means that patchAttributes is a static method.
Then I cross checked with the output in the console... there it says: pathAttributes is not static.
Incosistency!
I even have tried adding this line:
Survey.disableRemoteMethodByName("patchAttributes", true);
Also
Survey.disableRemoteMethodByName("patchAttributes", false);
No luck.
Can someone confirm if it's a bug in loopback 3 (I don't know about loopback 2, haven't checked)? If it's a bug I wouldn't have to spend time on it and just wait until it gets fixed. But if it's not a bug, can someone point out what's missing in my code?
Thanks!
UPDATE: figured out how
With this line I'm able to get rid of it:
Survey.disableRemoteMethodByName("prototype.patchAttributes", true);
The second parameter doesn't seem to matter (you can put false as well). Not sure why though (I suppose it should've accepted true only).
This is my current solution:
let disabledPrototypesRemoteMethods = ['patchAttributes']
let enabledRemoteMethods = [
"create", "findById", "replaceById", "deleteById",
"replaceOrCreateQuestion"
]
Survey.sharedClass.methods().forEach(function(method) {
if (enabledRemoteMethods.indexOf(method.name) == -1) {
Survey.disableRemoteMethodByName(method.name);
}
if (disabledPrototypesRemoteMethods.indexOf(method.name) > -1) {
Survey.disableRemoteMethodByName("prototype." + method.name);
}
});
Still, one small detail: this thing still shows up (I suppose it provides the POST alternative for the normal PUT for the replaceById operation..., but I don't want it; I want to force user of my API to go with the PUT only):
http://localhost:3000/explorer/#!/Survey/Survey_replaceById_post_surveys_id_replace
I tried adding this line:
Survey.disableRemoteMethodByName("replaceById_post_surveys_id_replace");
No luck.
Anyway... hope this useful for others; loopback doc is kind of sketchy.
You can get the prototype methods as well by looking at the stringName property. That way you can include the prototypes in your list.
The stringName includes the sharedClass name in the value, so you will need to parse that out.
module.exports = BusinessProfileContacted => {
const enabledRemoteMethods = ["create", "findById", "replaceById", "deleteById", "replaceOrCreateQuestion", "prototype.replaceAttributes"];
Survey.sharedClass.methods().forEach(method => {
const methodName = method.stringName.replace(/.*?(?=\.)/, '').substr(1);
if (enabledRemoteMethods.indexOf(methodName) === -1) {
Survey.disableRemoteMethodByName(methodName);
}
});
};

Leaflet Control Search: open Popup for search result

I'm using the wonderful plugin Leaflet.Control.Search in order to search for markers (from a geoJson marker group) on my map – which works great.
I only have one simple question now:
how can I open a popup for the search result marker?
I'm using custom marker icons with popups (which open on click) already bound to them – but I would like to open the respective popup automatically once it has been found via the search.
My code looks like this:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.bindPopup(feature.properties.Name).openPopup();
}).on('search_collapsed', function(e) {
markers2.resetStyle(layer);
});
map.addControl( searchControl ); //inizialize search control
and thought it might work with that line:
e.layer.bindPopup(feature.properties.Name).openPopup();
but unfortunately it doesn't.. ;)
–
Oh, and a second question: at the moment I'm searching only in 1 geoJson layer ("markers2") – does anyone know whether it's possible to search in multiple layers at once?
Any suggestions? I'd be grateful for any help, thanks in advance!
got it: it works like this: e.layer.openPopup().openOn(map);
event.layer is set only for preloaded layer, if you search marker by ajax,jsonp or callData.. event.layer is undefined.
var geojsonLayer = new L.GeoJSON(data, {
onEachFeature: function(feature, marker) {
marker.bindPopup(feature.properties.name);
}
});
map.addLayer(geojsonLayer);
var controlSearch = new L.Control.Search({layer: geojsonLayer, initial: false});
controlSearch.on('search_locationfound', function(event) {
event.layer.openPopup();
});
Look at GeoJSON demo:
https://opengeo.tech/maps/leaflet-search/examples/geojson-layer.html
Recently, I was looking for an answer, and here is my solution for it
searchControl.on("search:locationfound", function (e) {
if (e.layer._popup) e.layer.openPopup();
});

Resources