Skip to content
This repository was archived by the owner on Mar 30, 2026. It is now read-only.

Commit 5cbcf43

Browse files
author
Sophy
committed
Update retirement messaging on EmbedOA
See oaworks/discussion#3548
1 parent a13686b commit 5cbcf43

File tree

1 file changed

+17
-226
lines changed

1 file changed

+17
-226
lines changed

‎static/openaccessbutton_widget.js‎

Lines changed: 17 additions & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -1,229 +1,20 @@
1-
2-
// to use this widget, just include this js file, and then call openaccessbutton_widget() in a script on the page
3-
// If jquery is not already used on the site, jquery is required too.
4-
// bootstrap can optionally be used to apply styling
5-
// this can be done like so:
6-
// <script src="https://openaccessbutton.org/static/jquery-1.10.2.min.js"></script>
7-
// <link rel="stylesheet" href="https://openaccessbutton.org/static/bootstrap.min.css">
8-
// <script src="https://openaccessbutton.org/static/openaccessbutton_widget.js"></script>
9-
// <script>jQuery(document).ready(function() { openaccessbutton_widget(); });</script>
10-
11-
// a comment to fix merge oddities
12-
// need an input field called oabutton_url
13-
// and an oabutton_find button to trigger it (although triggers on enter too)
14-
// and oabutton_availability div required for inserting results
15-
// and optional oabutton_loading
16-
17-
var openaccessbutton_widget = function(opts) {
18-
if (opts === undefined) opts = {};
19-
if (opts.placeholder === undefined) opts.placeholder = 'Skip the paywall using a URL, DOI, Title, or Citation';
20-
if (opts.redirect === undefined) opts.redirect = false;
21-
if (opts.data === undefined) opts.data = false;
22-
var api = opts.api ? opts.api : 'https://api.openaccessbutton.org';
23-
var site = opts.site ? opts.site : 'https://openaccessbutton.org';
24-
if (window.location.host.indexOf('dev.openaccessbutton.org') !== -1) {
25-
if (!opts.api) api = 'https://dev.api.cottagelabs.com/service/oab';
26-
if (!opts.site) site = 'https://dev.openaccessbutton.org';
1+
// Accessible retirement shim for EmbedOA / Open Access Button widget
2+
window.openaccessbutton_widget = function (opts) {
3+
opts = opts || {};
4+
var sel = opts.element || '#openaccessbutton_widget';
5+
var el = (typeof sel === 'string') ? document.querySelector(sel) : sel;
6+
if (!el) {
7+
el = document.createElement('div');
8+
el.id = (typeof sel === 'string' && sel[0] === '#') ? sel.slice(1) : 'openaccessbutton_widget';
9+
(document.body || document.documentElement).appendChild(el);
2710
}
28-
if (opts.element === undefined) opts.element = '#openaccessbutton_widget';
29-
if (opts.uid === undefined) opts.uid = 'anonymous';
30-
if ($(opts.element).length === 0) $('body').append('<div id="openaccessbutton_widget"></div>');
3111

32-
var w = '<div id="oabutton_inputs">\
33-
<input id="oabutton_url" placeholder="' + opts.placeholder + '"></input>\
34-
<a href="#" id="oabutton_find"><img style="height:90%;" src="' + site + '/static/search.png"></img></a>\
35-
</div>\
36-
<div id="oabutton_loading" style="display:none;"><p><img style="width:30px;" src="' + site + '/static/spin_orange.svg"> Powered by the <a href="https://openaccessbutton.org" target="_blank">Open Access Button</a></p></div>\
37-
<div id="oabutton_availability"></div>';
12+
el.innerHTML =
13+
'<div role="status" aria-live="polite" tabindex="-1">' +
14+
'<p><strong>The Open Access Button & EmbedOA are retiring.</strong> This widget no longer works.</p>' +
15+
'<p>Please contact this site’s administrator. ' +
16+
'<a href="https://blog.oa.works/sunsetting-the-open-access-button-instantill/" target="_blank" rel="noopener">Learn more</a>.</p>' +
17+
'</div>';
3818

39-
var ws = '#oabutton_inputs {\
40-
position: relative;\
41-
display: table;\
42-
width:100%;\
43-
border-collapse: separate;\
44-
}\
45-
#oabutton_url {\
46-
display: table-cell;\
47-
width: 100%;\
48-
height: 34px;\
49-
padding: 6px 12px;\
50-
font-size: 16px;\
51-
line-height: 1.428571429;\
52-
color: #555555;\
53-
vertical-align: middle;\
54-
background-color: #ffffff;\
55-
background-image: none;\
56-
border: 1px solid #cccccc;\
57-
border-radius: 4px 0px 0px 4px;\
58-
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\
59-
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\
60-
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\
61-
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\
62-
}\
63-
#oabutton_find {\
64-
display: table-cell;\
65-
height:34px;\
66-
width:40px;\
67-
padding: 6px 3px;\
68-
margin-bottom: 0;\
69-
font-size: 14px;\
70-
font-weight: normal;\
71-
line-height: 1.428571429;\
72-
text-align: center;\
73-
white-space: nowrap;\
74-
vertical-align: middle;\
75-
cursor: pointer;\
76-
background-image: none;\
77-
border: 1px solid transparent;\
78-
border-radius: 0px 4px 4px 0px;\
79-
-webkit-user-select: none;\
80-
-moz-user-select: none;\
81-
-ms-user-select: none;\
82-
-o-user-select: none;\
83-
user-select: none;\
84-
color: #ffffff;\
85-
background-color: #428bca;\
86-
border-color: #357ebd;\
87-
}';
88-
if (opts.css !== false) w = '<style>' + (typeof opts.css === 'string' ? opts.css : ws) + '</style>' + w;
89-
$(opts.element).html(w);
90-
91-
var availability = function(e) {
92-
if ($(this).attr('id') === 'oabutton_find' || e === undefined || e.keyCode === 13) {
93-
if (e && $(this).attr('id') === 'oabutton_find') e.preventDefault();
94-
var url = $('#oabutton_url').val().trim();
95-
if (!url.length) {
96-
$('#oabutton_url').css('border-color','#f04717').focus();
97-
return;
98-
}
99-
if (url.lastIndexOf('.') === url.length-1) url = url.substring(0,url.length-1);
100-
$('#oabutton_loading').show();
101-
var avopts = {
102-
type:'POST',
103-
//url:api+'/availability',
104-
url: (api.includes('dev.') ? 'https://bg.beta.oa.works' : 'https://api.oa.works') + '/availability',
105-
cache: false,
106-
processData: false,
107-
contentType: 'application/json',
108-
dataType: 'json',
109-
data: JSON.stringify({url:url,from:opts.uid,plugin:'widget',embedded:window.location.href}),
110-
success: function(data) {
111-
$('#oabutton_loading').hide();
112-
$('#oabutton_availability').show();
113-
var has = {};
114-
if (data.data.availability.length > 0) {
115-
for ( var a in data.data.availability ) {
116-
has[data.data.availability[a].type] = {url:data.data.availability[a].url};
117-
}
118-
}
119-
if (data.data.requests.length > 0) {
120-
for ( var r in data.data.requests ) {
121-
if (!has[data.data.requests[r].type]) has[data.data.requests[r].type] = {id:data.data.requests[r]._id,ucreated:data.data.requests[r].ucreated,usupport:data.data.requests[r].usupport};
122-
}
123-
}
124-
if (data.data.match && data.data.match.indexOf('http') !== 0 && data.data.meta && data.data.meta.article && data.data.meta.article.doi) data.data.match = 'https://doi.org/' + data.data.meta.article.doi;
125-
if (JSON.stringify(has) === '{}') {
126-
if (data.data.match.indexOf('http') === 0) {
127-
if (opts.redirect) {
128-
var dr = {};
129-
try { dr.title = data.data.meta.article.title; } catch(err) {}
130-
try { dr.doi = data.data.meta.article.doi; } catch(err) {}
131-
try { dr.url = data.data.match; } catch(err) {}
132-
var ropts = {
133-
type:'POST',
134-
url: api+'/request?fast=true',
135-
cache:false,
136-
processData:false,
137-
contentType: 'application/json',
138-
dataType: 'json',
139-
data: JSON.stringify(dr),
140-
success: function(resp) {
141-
window.location = site + '/request/' + resp._id;
142-
},
143-
error: function() {
144-
window.location = site + '/request?url=' + encodeURIComponent(data.data.match);
145-
}
146-
}
147-
$.ajax(ropts);
148-
} else {
149-
var availability = '<p><b>This article is not freely available</b></p>';
150-
availability += '<p><a target="_blank" href="' + site + '/request?data=false&url=' + encodeURIComponent(data.data.match) + '">Start a request to the author to share it with you</a> or ask the library to get you a copy through an Interlibrary Loan.</p>';
151-
$('#oabutton_availability').html(availability);
152-
}
153-
} else {
154-
$('#oabutton_availability').html('<p>Sorry, we couldn\'t find the article <b>' + data.data.match + '</b>.</p><p>Matching titles and citations can be tricky. Please find a URL, DOI, PMID or PMCID and try again.</p>');
155-
}
156-
} else if (has.article && !has.data) {
157-
var availability = '';
158-
if (has.article.id) {
159-
availability += '<p style="color:#212f3f;padding-top:0px;">';
160-
if (has.article.ucreated) {
161-
availability += 'You already created a request for this article <a class="btn btn-action" href="/request/' + has.article.id + '">View the request</a></p>';
162-
} else if (has.article.usupport) {
163-
availability += 'You already support a request for this article <a class="btn btn-action" href="/request/' + has.article.id + '">View the request</a></p>';
164-
} else {
165-
availability += '<p><b>This article is not freely available.</b></p>Someone has already requested the author freely share this article<a class="btn btn-action" href="/request/' + has.article.id + '?support=true">Notify me</a></p>';
166-
}
167-
} else {
168-
availability += '<p><b>This article is freely available!</b></p>';
169-
availability += '<p"><a style="word-wrap:break-word;overflow-wrap:break-word;" target="_blank" href="' + has.article.url + '">' + 'Click here to view it' + '</a></p>';
170-
}
171-
if (opts.data) {
172-
availability += '<p>';
173-
availability += 'Want the data supporting the article? ';
174-
availability += '<a target="_blank" class="btn btn-action" href="' + site + '/request?type=data&url=' + encodeURIComponent(data.data.match) + '">Request it from the author</a></p>';
175-
}
176-
$('#oabutton_availability').html(availability);
177-
} else if (!has.article && has.data) {
178-
var availability = '<p><b>This article is not freely available</b></p>';
179-
availability += '<p><a target="_blank" class="btn btn-action" href="' + site + '/request?data=false&url=' + encodeURIComponent(data.data.match) + '">Start a request</a></p>';
180-
if (opts.data) {
181-
availability += '<p>';
182-
if (has.data.id) {
183-
availability += 'Someone has requested access to the data. <a target="_blank" class="btn btn-action" href="' + site + '/request/' + has.data.id + '?support=true">Notify me';
184-
} else {
185-
availability += 'However there is data available:</p>';
186-
availability += '<p"><a style="word-wrap:break-word;overflow-wrap:break-word;" target="_blank" href="' + has.data.url + '">' + has.data.url;
187-
}
188-
availability += '</a></p>';
189-
}
190-
$('#oabutton_availability').html(availability);
191-
} else if (has.article && has.data) {
192-
if (has.article.id && has.data.id && opts.redirect) {
193-
window.location = site + '/request/' + has.article.id + '?data=false';
194-
} else {
195-
var availability = '<p><b>';
196-
if (has.article.url) {
197-
availability += 'This article is available!</b></p>';
198-
availability += '<h><a style="word-wrap:break-word;overflow-wrap:break-word;" target="_blank" href="' + has.article.url + '">' + 'Click here to view it';
199-
}
200-
if (has.article.id) {
201-
availability += 'Someone has already requested the author freely share this article. <a target="_blank" class="btn btn-action" href="' + site + '/request/' + has.article.id + '?data=false&support=true">Notify me';
202-
}
203-
availability += '</a></b></p>';
204-
if (opts.data) {
205-
availability += '<p>';
206-
if (has.data.url) {
207-
availability += 'And there is data available for this article:</p><p>';
208-
availability += '<a style="word-wrap:break-word;overflow-wrap:break-word;" target="_blank" href="' + has.data.url + '">' + has.data.url;
209-
}
210-
if (has.data.id) {
211-
availability += 'Someone has requested access to the data. <a target="_blank" class="btn btn-action" href="' + site + '/request/' + has.data.id + '?support=true">Notify me';
212-
}
213-
availability += '</a></p>';
214-
}
215-
$('#oabutton_availability').html(availability);
216-
}
217-
}
218-
},
219-
error: function() {
220-
$('#oabutton_loading').hide();
221-
$('#oabutton_loading').after('<p>Sorry, something went wrong. <a target="_blank" href="' + site + '/feedback#bug">Can you let us know?</a></p>');
222-
}
223-
};
224-
$.ajax(avopts);
225-
}
226-
}
227-
$('body').on('keyup','#oabutton_url',availability);
228-
$('body').on('click','#oabutton_find',availability);
229-
}
19+
if (opts.focus === true) el.firstElementChild.focus();
20+
};

0 commit comments

Comments
 (0)