Skip to content

Commit

Permalink
refactor: moved feedback widget script into a separate js file (#495)
Browse files Browse the repository at this point in the history
* refactor: moved feedback widget script into a seperate js file

* refactor: moved script loading in subscribe
  • Loading branch information
awais-ansari authored Oct 24, 2023
1 parent 396df97 commit 40cccac
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 154 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ coverage
dist
example
node_modules
src/lightning.js
141 changes: 1 addition & 140 deletions src/Notifications/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,145 +63,6 @@ const Notifications = () => {
};
}, []);

useEffect(() => {
const script = document.createElement('script');
script.defer = true;
script.type = 'text/javascript';
script.innerHTML = `
window.lightningjs ||
(function (n) {
var e = "lightningjs";
function t(e, t) {
var r, i, a, o, d, c;
return (
t && (t += (/\\?/.test(t) ? "&" : "?") + "lv=1"),
n[e] ||
((r = window),
(i = document),
(a = e),
(o = i.location.protocol),
(d = "load"),
(c = 0),
(function () {
n[a] = function () {
var t = arguments,
i = this,
o = ++c,
d = (i && i != r && i.id) || 0;
function s() {
return (s.id = o), n[a].apply(s, arguments);
}
return (
(e.s = e.s || []).push([o, d, t]),
(s.then = function (n, t, r) {
var i = (e.fh[o] = e.fh[o] || []),
a = (e.eh[o] = e.eh[o] || []),
d = (e.ph[o] = e.ph[o] || []);
return (
n && i.push(n), t && a.push(t), r && d.push(r), s
);
}),
s
);
};
var e = (n[a]._ = {});
function s() {
e.P(d), (e.w = 1), n[a]("_load");
}
(e.fh = {}),
(e.eh = {}),
(e.ph = {}),
(e.l = t
? t.replace(/^\\/\\//, ("https:" == o ? o : "http:") + "//")
: t),
(e.p = { 0: +new Date() }),
(e.P = function (n) {
e.p[n] = new Date() - e.p[0];
}),
e.w && s(),
r.addEventListener
? r.addEventListener(d, s, !1)
: r.attachEvent("onload", s);
var l = function () {
function n() {
return [
"<!DOCTYPE ",
o,
"><",
o,
"><head></head><",
t,
"><",
r,
' src="',
e.l,
'"></',
r,
"></",
t,
"></",
o,
">",
].join("");
}
var t = "body",
r = "script",
o = "html",
d = i[t];
if (!d) return setTimeout(l, 100);
e.P(1);
var c,
s = i.createElement("div"),
h = s.appendChild(i.createElement("div")),
u = i.createElement("iframe");
(s.style.display = "none"),
(d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
(u.frameBorder = "0"),
(u.id = "lightningjs-frame-" + a),
/MSIE[ ]+6/.test(navigator.userAgent) &&
(u.src = "javascript:false"),
(u.allowTransparency = "true"),
h.appendChild(u);
try {
u.contentWindow.document.open();
} catch (n) {
(e.domain = i.domain),
(c =
"javascript:var d=document.open();d.domain='" +
i.domain +
"';"),
(u.src = c + "void(0);");
}
try {
var p = u.contentWindow.document;
p.write(n()), p.close();
} catch (e) {
u.src =
c +
'd.write("' +
n().replace(/"/g, String.fromCharCode(92) + '"') +
'");d.close();';
}
e.P(2);
};
e.l && l();
})()),
(n[e].lv = "1"),
n[e]
);
}
var r = (window.lightningjs = t(e));
(r.require = t), (r.modules = n);
})({});
`;

document.body.appendChild(script);

return () => {
document.body.removeChild(script);
};
}, []);

const enableFeedback = useCallback(() => {
window.usabilla_live('click');
}, []);
Expand Down Expand Up @@ -261,7 +122,7 @@ const Notifications = () => {
</Popover.Content>
{getConfig().NOTIFICATION_FEEDBACK_URL && (
<Button
onClick={() => enableFeedback()}
onClick={enableFeedback}
variant="warning"
className="notification-feedback-widget"
alt="feedback button"
Expand Down
13 changes: 5 additions & 8 deletions src/Notifications/tours/NotificationTour.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,11 @@ const NotificationTour = () => {
}, [dispatch]);

return (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{!isEmpty(config) && (
<ProductTour
tours={config}
/>
)}
</>
!isEmpty(config) && (
<ProductTour
tours={config}
/>
)
);
};

Expand Down
10 changes: 9 additions & 1 deletion src/learning-header/LearningHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import {
} from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { AppContext, AppProvider } from '@edx/frontend-platform/react';
import classNames from 'classnames';
import AnonymousUserMenu from './AnonymousUserMenu';
import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
import messages from './messages';
import lightning from '../lightning';
import store from '../store';

ensureConfig([
Expand All @@ -17,6 +19,7 @@ ensureConfig([
], 'Learning Header component');

subscribe(APP_CONFIG_INITIALIZED, () => {
lightning();
mergeConfig({
ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL || '',
NOTIFICATION_FEEDBACK_URL: process.env.NOTIFICATION_FEEDBACK_URL || '',
Expand Down Expand Up @@ -76,7 +79,12 @@ const LearningHeader = ({
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
<div className="px-4 py-2.5 d-flex align-items-center learning-header-container">
{headerLogo}
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
<div
className={classNames('flex-grow-1', {
'course-title-lockup': courseTitle || courseOrg || courseNumber,
})}
style={{ lineHeight: 1 }}
>
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>
<span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
</div>
Expand Down
123 changes: 123 additions & 0 deletions src/lightning.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
module.exports = () => {
window.lightningjs || (function (n) {
const e = 'lightningjs';
function t(e, t) {
let r; let i; let a; let o; let d; let
c;
return (
t && (t += `${/\?/.test(t) ? '&' : '?'}lv=1`),
n[e]
|| ((r = window),
(i = document),
(a = e),
(o = i.location.protocol),
(d = 'load'),
(c = 0),
(function () {
n[a] = function () {
const t = arguments;
const i = this;
const o = ++c;
const d = (i && i != r && i.id) || 0;
function s() {
return (s.id = o), n[a].apply(s, arguments);
}
return (
(e.s = e.s || []).push([o, d, t]),
(s.then = function (n, t, r) {
const i = (e.fh[o] = e.fh[o] || []);
const a = (e.eh[o] = e.eh[o] || []);
const d = (e.ph[o] = e.ph[o] || []);
return n && i.push(n), t && a.push(t), r && d.push(r), s;
}),
s
);
};
var e = (n[a]._ = {});
function s() {
e.P(d), (e.w = 1), n[a]('_load');
}
(e.fh = {}),
(e.eh = {}),
(e.ph = {}),
(e.l = t
? t.replace(/^\/\//, `${o == 'https:' ? o : 'http:'}//`)
: t),
(e.p = { 0: +new Date() }),
(e.P = function (n) {
e.p[n] = new Date() - e.p[0];
}),
e.w && s(),
r.addEventListener
? r.addEventListener(d, s, !1)
: r.attachEvent('onload', s);
const l = function () {
function n() {
return [
'<!DOCTYPE ',
o,
'><',
o,
'><head></head><',
t,
'><',
r,
' src="',
e.l,
'"></',
r,
'></',
t,
'></',
o,
'>',
].join('');
}
var t = 'body';
var r = 'script';
var o = 'html';
const d = i[t];
if (!d) { return setTimeout(l, 100); }
e.P(1);
let c;
const s = i.createElement('div');
const h = s.appendChild(i.createElement('div'));
const u = i.createElement('iframe');
(s.style.display = 'none'),
(d.insertBefore(s, d.firstChild).id = `lightningjs-${a}`),
(u.frameBorder = '0'),
(u.id = `lightningjs-frame-${a}`),
/MSIE[ ]+6/.test(navigator.userAgent)
&& (u.src = 'javascript:false'),
(u.allowTransparency = 'true'),
h.appendChild(u);
try {
u.contentWindow.document.open();
} catch (n) {
(e.domain = i.domain),
(c = `javascript:var d=document.open();d.domain='${
i.domain
}';`),
(u.src = `${c}void(0);`);
}
try {
const p = u.contentWindow.document;
p.write(n()), p.close();
} catch (e) {
u.src = `${c
}d.write("${
n().replace(/"/g, `${String.fromCharCode(92)}"`)
}");d.close();`;
}
e.P(2);
};
e.l && l();
}())),
(n[e].lv = '1'),
n[e]
);
}
const r = (window.lightningjs = t(e));
(r.require = t), (r.modules = n);
}({}));
};
10 changes: 5 additions & 5 deletions src/studio-header/CourseLockUp.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
OverlayTrigger,
Tooltip,
} from '@edx/paragon';
import { OverlayTrigger, Tooltip } from '@edx/paragon';
import classNames from 'classnames';
import messages from './messages';

const CourseLockUp = ({
Expand All @@ -24,7 +22,9 @@ const CourseLockUp = ({
)}
>
<a
className="course-title-lockup w-25 mr-2"
className={classNames('w-25 mr-2', {
'course-title-lockup': outlineLink,
})}
href={outlineLink}
aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
data-testid="course-lock-up-block"
Expand Down

0 comments on commit 40cccac

Please sign in to comment.