Creating JavaScript snippets

[abbycabs]

Help wanted: developers

Our API is ready for use! Use the data we have available in our API to write a JS snippet that visualizes a users / a papers badges. Built using our JSON endpoints, implement the visualizations created in #71 (if finished). By providing these snippets, a journal (or an author, or ORCID) can just embed the snipped on their website to view badges for this paper/author.

We'll need two sets of snippets for our MVP

1. Paper view:
   To be embedded on a publisher's site, on a paper page. This will display all the authors and their corresponding badges.
   Using the endpoint: GET /papers/:doi1/:doi2/badges
2. User view:
   To be embedded on ORCID, or on an author's personal page. This will display all the papers for this author and their corresponding badges.
   Using the endpoint: GET /users/:orcid/badges

To Do:

• get design assets from Designing Badges #71
• implement paper view that integrates with BMC and PLoS (our partners)
• send snippet to publishers, BMC and PLoS
• implement author view that can integrate with ORCID or an author's personal page

[abbycabs]

Assigned to @omar-abdalla & Al from Springer / BMC! Does Al have github?

[abbycabs]

Hey @omar-abdalla - any update on this? Let me know if you need help integrating with github :)

[Alicole]

Hi Abby, my @github id is Alicole (Al @ Springer)

[abbycabs]

Thanks @Alicole! I appreciate it 😄

[Alicole]

@acabunoc Have included a screenshot of how the badges paper view looks on Gigascience -- please note this is still a work in progress. Have grouped authors underneath badges, by hovering over any author name you can see which other badges have been selected. Clicking on any name will take you to the author's orcid page.

[abbycabs]

👍 💯

This is pretty sweet @Alicole. Flagging design issue in #71

[abbycabs]

@Alicole - where is this code living now?

[Alicole]

@acabunoc Currently on our local servers. One question how are you for support of Jquery?

[abbycabs]

Thanks @Alicole!

Would you mind adding it to our GitHub repo? I know @rcpeters and I would love to take a look / help out. And Rob is keen to see if we can integrate this on the ORCID end.

I'm fine with adding JQuery as a dependency if we need it :) We may want to check with Rob, though.

Happy to hop in a video call if you have any questions!

[Alicole]

Jquery is a problem as some features are no longer being supported by IE9 and below, and they have no intention of remedying this.

Also one feature that deals with the highlighting of all like author badges can be more cleanly and elegantly be implemented with pure Javascript; have now achieved this, at the expense of loss of badge count information for tool tip.

@acabunoc I'm fine with uploading this, however you'll need to give me assistance for the Mozilla github paper's repository.

[abbycabs]

Hey @Alicole, we're not currently using jquery, so if you want to drop it, that's probably easier ;)

We can use part of tomorrow's meeting to work on sharing your work on our repo. Excited to see this come together, thanks for everything here, Al :)

[Alicole]

Hi @acabunoc, we've mostly dropped support of jquery here, in favour of vanilla Javascript. Although in some cases we still use it in prototypes.

We used it here mostly in terms of dealing with the AJAX request, unfortunately CORS isn't properly supported in IE 9 and below. Is there any intention for you to migrate to JSONP in future?

[abbycabs]

Hey @Alicole - I hadn't considered JSONP, but it sounds like you support a lot more older browsers than I'm used to!

I'll add this as a discussion point on our agenda for the call tomorrow :)

[Alicole]

@acabunoc We've been experimenting with a two-column layout, which uses a min-height specifier in css. This should enable us to accommodate more authors and hopefully the possibility for each block to expand with additional authors.

Is there any way we can restrict the number of badges added per author, for significant contributions? So each can have a maximum of let's say 5. As with a paper with 100 authors, if all choose them all - worst case scenario, we could end up with 1,000 badges in total.

[Alicole]

@acabunoc -- in our effort to rid the world from functional hell, which could only end up in something like Jquery, in favour of simpler all encompassing solutions for any one feature, we've come up with a replacement AJAX .get, which we'd like to include.

Incidentally this now works on IE9, which it didn't before.

Is it fine if we commit our change?

[abbycabs]

Yes please! Send the PR along :)

[Alicole]

@acabunoc -- I've just purged the last jquery from the widget, would you like us to commit?

So should all work for IE9 and above, and the rest.

Will we need a new pull request?

[abbycabs]

@Alicole - haven't merged this yet, so we can use this PR :)

Also, thanks for bringing in the url changes!

[Alicole]

@acabunoc Have added a new method to show site furniture on page showing widget and those connected to it too. Will only show if have badges available as uses the badge count endpoint.

Have committed it with a pull request.

[Alicole]

@acabunoc -- out of interest which field in the JSON /badge best represents each class in the taxonomy?

[abbycabs]

In a badgeInstance, that would be badge.name

[Alicole]

@acabunoc -- if you were using the JSON on its own as a source of meta data, it wouldn't be clear from this what the actual Taxonomy Class is. In this case it's being used as the badge name. Wouldn't something like "taxonomyClass" be a more accurate reflection of its purpose?

[abbycabs]

Yes, that definitely would be more accurate! However, that part is following the open badge standard, which I'm hesitant to change. This would limit interoperability and some reuse.

The taxonomy is represented by each of the different badges we offer. On the home page, you can all each taxonomy class a badges under 'Badges'.

We've added a few extra fields of our own to badgeInstance: authorName, orcid, and evidenceUrl. But we haven't modified existing fields in the open badge standard.

[Alicole]

Hi @acabunoc

We've made some changes so that a publisher can run analytics when they click on any of the author names.

This uses a user defined callback passed into the showBadges function. This will be provided a JSON object with the taxonomy class of the badge and author's orcid.

Please note we found the badge name shown on the image does not always correspond with the taxonomy class in badge.name.

So Testing = "Validation"
Computation = "Software"
and, Writing initial draft = "Writing - original draft"

Also we need to make some slight refactoring to incorporate these changes to several functions.

Should we create a pull request to include this, or do you want to wait for now?

[abbycabs]

Oh man, thanks for this @Alicole! Great feature to have.

Yes, there are some discrepancies between the image / names since the taxonomy has changed since the assets were created. This is our master list: http://dictionary.casrai.org/Contributor_Roles

Feel free to keep pushing your changes to Alicole/paperbadger:master -- this will keep us up to date on the changes. I'm sure @rcpeters / ORCID would be interested since they're working with your script now.

[Alicole]

@acabunoc I just went to create a pull request, and there only seems to be two branches now, none of which is Alicole.

[abbycabs]

Send a PR to master! We're looking to merge this into master in the long run, anyways :)

[Alicole]

I tried to create a pull request, but for some reason it won't let me, as it says there is nothing to compare for master to master.

[abbycabs]

It looks like you haven't pushed any changes to your fork?

http://github.com/Alicole/paperbadger

[Alicole]

@acabunoc Latest changes now committed to Alicole branch.

[abbycabs]

Thanks @Alicole! You should be able to make a pr now -- master...Alicole:master

[Alicole]

@acabunoc Did you get my pull request for latest change to be merged?

[abbycabs]

I did! Sorry i didn't realize it was ready for review/merge :) I'll look at it today, thanks!

[Alicole]

@acabunoc -- not sure if Rob requires the latest changes for the endpoints.

Also we've committed a bug fix for IE9, which we noticed whilst completing some browser tests.

This will ensure the site furniture correctly shows on IE9.

It's now been committed and we've issue a pull request too.

---

If you still require the endpoint changes, please inform me as this has been applied for both main functions -- now using a shared function to create all urls for various endpoints.

[abbycabs]

Hey @Alicole! Thanks for the fix! Will review.

If you still require the endpoint changes, please inform me as this has been applied for both main functions -- now using a shared function to create all urls for various endpoints.

We'll hold off on the endpoint changes till we need them :)

[Alicole]

@acabunoc -- from further testing it's unlikely that the widget will be able to support any version of IE below IE10.

It seems even using XDomainRequest, we are obtaining access denied even with CORS. Although documentation on the web suggests otherwise.

Only option for longer term is support for JSON-P for IE8 or IE9.

Has Mozilla come across a solution that works?

[Alicole]

@acabunoc -- have committed endpoint changes and created a pull request for it:
#131

[Alicole]

@acabunoc -- have updated the view to support the ability to show just badges, when endpoint contains an orcid.

Few changes required:

i). add new class to badge styles.

ii). detect there is an orcid in endpoint and provide new badgeClass string instead of one directly embedded, with default fallback show widget is rendered as expected.

iii). tidy up endpoint method so everything follows through logically.

All changes available -- would you like us to commit the code for review and merging?