@penn-libraries/web 1.2.1-dev.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.cjs.js.map +1 -1
- package/dist/cjs/pennlibs-feedback_3.cjs.entry.js +35 -7
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.css +0 -28
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js +34 -6
- package/dist/collection/components/pennlibs-feedback/pennlibs-feedback.js.map +1 -1
- package/dist/components/pennlibs-feedback.js +35 -7
- package/dist/components/pennlibs-feedback.js.map +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.js.map +1 -1
- package/dist/esm/pennlibs-feedback_3.entry.js +35 -7
- package/dist/types/components/pennlibs-feedback/pennlibs-feedback.d.ts +6 -0
- package/dist/web/{p-37644cf5.entry.js → p-5c02b8da.entry.js} +35 -7
- package/dist/web/pennlibs-feedback.pennlibs-footer.pennlibs-header.entry.esm.js.map +1 -1
- package/dist/web/web.esm.js +1 -1
- package/hydrate/index.js +35 -7
- package/hydrate/index.mjs +35 -7
- package/package.json +1 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, d as getAssetPath, a as getElement } from './index-kmszRyIe.js';
|
|
2
2
|
|
|
3
|
-
const pennlibsFeedbackCss = ".feedback__container.sc-pennlibs-feedback{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{.sc-pennlibs-feedback-h{display:none}}*.sc-pennlibs-feedback,*.sc-pennlibs-feedback::before,*.sc-pennlibs-feedback::after{box-sizing:border-box}.viewport-margins.sc-pennlibs-feedback{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content.sc-pennlibs-feedback{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question.sc-pennlibs-feedback{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2.sc-pennlibs-feedback{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p.sc-pennlibs-feedback{margin:0;padding:calc(0.5em + 1px) 0}
|
|
3
|
+
const pennlibsFeedbackCss = ".feedback__container.sc-pennlibs-feedback{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{.sc-pennlibs-feedback-h{display:none}}*.sc-pennlibs-feedback,*.sc-pennlibs-feedback::before,*.sc-pennlibs-feedback::after{box-sizing:border-box}.viewport-margins.sc-pennlibs-feedback{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content.sc-pennlibs-feedback{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question.sc-pennlibs-feedback{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2.sc-pennlibs-feedback{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p.sc-pennlibs-feedback{margin:0;padding:calc(0.5em + 1px) 0}a.sc-pennlibs-feedback{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button.sc-pennlibs-feedback{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button.sc-pennlibs-feedback:hover{cursor:pointer}button.sc-pennlibs-feedback:hover span.sc-pennlibs-feedback{text-decoration:underline}button.selected.sc-pennlibs-feedback{background:var(--pl-color-bg-accent-emphasis);color:var(--pl-color-fg-on-emphasis);border-color:var(--pl-color-bg-accent-emphasis)}.feedback__inline-question.sc-pennlibs-feedback+.feedback__share-feedback.sc-pennlibs-feedback,p.sc-pennlibs-feedback{animation:none}.feedback__content.sc-pennlibs-feedback>p.sc-pennlibs-feedback{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*.sc-pennlibs-feedback:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2.sc-pennlibs-feedback{display:block;width:100%}}.visually-hidden.sc-pennlibs-feedback{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
4
4
|
|
|
5
|
-
const FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;
|
|
6
5
|
const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
|
|
7
6
|
const FEEDBACK_QUESTION = 'Did you find what you need?';
|
|
8
7
|
const PennlibsFeedback = class {
|
|
@@ -15,21 +14,50 @@ const PennlibsFeedback = class {
|
|
|
15
14
|
this.hideQuestion = false;
|
|
16
15
|
this.answer = undefined;
|
|
17
16
|
this.selected = undefined;
|
|
17
|
+
this.currentUrl = '';
|
|
18
|
+
this.onNavigate = (event) => {
|
|
19
|
+
try {
|
|
20
|
+
const destinationUrl = new URL(event.destination.url).href;
|
|
21
|
+
if (destinationUrl !== this.currentUrl) {
|
|
22
|
+
this.currentUrl = destinationUrl;
|
|
23
|
+
this.selected = undefined;
|
|
24
|
+
this.answer = undefined;
|
|
25
|
+
this.loadStoredAnswer();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
catch (_a) {
|
|
29
|
+
this.selected = undefined;
|
|
30
|
+
this.answer = undefined;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
get storageKey() {
|
|
35
|
+
return `pennlibs-feedback-${this.currentUrl}`;
|
|
36
|
+
}
|
|
37
|
+
connectedCallback() {
|
|
38
|
+
this.currentUrl = window.location.href;
|
|
39
|
+
window.navigation.addEventListener('navigate', this.onNavigate);
|
|
40
|
+
}
|
|
41
|
+
disconnectedCallback() {
|
|
42
|
+
window.navigation.removeEventListener('navigate', this.onNavigate);
|
|
18
43
|
}
|
|
19
44
|
componentWillLoad() {
|
|
20
|
-
|
|
45
|
+
this.loadStoredAnswer();
|
|
46
|
+
}
|
|
47
|
+
loadStoredAnswer() {
|
|
48
|
+
const stored = sessionStorage.getItem(this.storageKey);
|
|
21
49
|
if (stored) {
|
|
22
50
|
try {
|
|
23
51
|
const { answer, timestamp } = JSON.parse(stored);
|
|
24
52
|
if (Date.now() - timestamp > FEEDBACK_TTL) {
|
|
25
|
-
sessionStorage.removeItem(
|
|
53
|
+
sessionStorage.removeItem(this.storageKey);
|
|
26
54
|
}
|
|
27
55
|
else {
|
|
28
56
|
this.answer = answer;
|
|
29
57
|
}
|
|
30
58
|
}
|
|
31
59
|
catch (_a) {
|
|
32
|
-
sessionStorage.removeItem(
|
|
60
|
+
sessionStorage.removeItem(this.storageKey);
|
|
33
61
|
}
|
|
34
62
|
}
|
|
35
63
|
}
|
|
@@ -38,7 +66,7 @@ const PennlibsFeedback = class {
|
|
|
38
66
|
event.preventDefault();
|
|
39
67
|
const answer = event.submitter.value;
|
|
40
68
|
this.selected = answer;
|
|
41
|
-
sessionStorage.setItem(
|
|
69
|
+
sessionStorage.setItem(this.storageKey, JSON.stringify({ answer, timestamp: Date.now() }));
|
|
42
70
|
this.feedbackEvent.emit({
|
|
43
71
|
question: FEEDBACK_QUESTION,
|
|
44
72
|
answer: answer,
|
|
@@ -51,7 +79,7 @@ const PennlibsFeedback = class {
|
|
|
51
79
|
}, 600);
|
|
52
80
|
}
|
|
53
81
|
render() {
|
|
54
|
-
return (h("div", { key: '
|
|
82
|
+
return (h("div", { key: '12bdec6f975166a4c5d451fc1834f70fbce3b424', class: "feedback__container" }, h("div", { key: '4c607ceef5f10760d540d2549a2b186a871714c7', class: "viewport-margins" }, h("div", { key: 'a967498163e05ce60a12bf230d303caa31373c8d', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: 'f918da2833ae0c64e67a9e95551edaeb78e2ba05', class: "feedback__share-feedback" }, h("p", { key: '12928af116ffadf669cbc694160ee6ca3458528b' }, "To help us improve, ", h("a", { key: '7281b7423677b104fb622a7fdcf8e768517ea84e', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
|
|
55
83
|
}
|
|
56
84
|
};
|
|
57
85
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|
|
@@ -17,6 +17,11 @@ export declare class PennlibsFeedback {
|
|
|
17
17
|
hideQuestion: boolean;
|
|
18
18
|
answer: string | undefined;
|
|
19
19
|
selected: string | undefined;
|
|
20
|
+
private currentUrl;
|
|
21
|
+
private get storageKey();
|
|
22
|
+
connectedCallback(): void;
|
|
23
|
+
disconnectedCallback(): void;
|
|
24
|
+
private onNavigate;
|
|
20
25
|
/**
|
|
21
26
|
* Emitted when a visitor answers the feedback question. Includes the question,
|
|
22
27
|
* answer, current URL, and page heading/title for context.
|
|
@@ -29,6 +34,7 @@ export declare class PennlibsFeedback {
|
|
|
29
34
|
pageTitle?: string;
|
|
30
35
|
}>;
|
|
31
36
|
componentWillLoad(): void;
|
|
37
|
+
private loadStoredAnswer;
|
|
32
38
|
handleSubmit(event: SubmitEvent): void;
|
|
33
39
|
render(): any;
|
|
34
40
|
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, d as getAssetPath, a as getElement } from './p-kmszRyIe.js';
|
|
2
2
|
|
|
3
|
-
const pennlibsFeedbackCss = ".feedback__container.sc-pennlibs-feedback{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{.sc-pennlibs-feedback-h{display:none}}*.sc-pennlibs-feedback,*.sc-pennlibs-feedback::before,*.sc-pennlibs-feedback::after{box-sizing:border-box}.viewport-margins.sc-pennlibs-feedback{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content.sc-pennlibs-feedback{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question.sc-pennlibs-feedback{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2.sc-pennlibs-feedback{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p.sc-pennlibs-feedback{margin:0;padding:calc(0.5em + 1px) 0}
|
|
3
|
+
const pennlibsFeedbackCss = ".feedback__container.sc-pennlibs-feedback{display:block;background:#eeeff4;font-family:var(--pl-font-family);font-size:var(--pl-font-size);color:var(--pl-color-fg-default);line-height:1.4;box-sizing:border-box;padding:0.75em 0}@media print{.sc-pennlibs-feedback-h{display:none}}*.sc-pennlibs-feedback,*.sc-pennlibs-feedback::before,*.sc-pennlibs-feedback::after{box-sizing:border-box}.viewport-margins.sc-pennlibs-feedback{max-width:var(--pl-viewport-margins-max-width);margin:0 auto;padding:0 var(--pl-viewport-margins-gutter, 1em)}.feedback__content.sc-pennlibs-feedback{display:flex;justify-content:space-between;gap:var(--pl-space-s);flex-wrap:wrap}.feedback__inline-question.sc-pennlibs-feedback{display:flex;flex-wrap:wrap;gap:0.5em;align-items:center}h2.sc-pennlibs-feedback{display:inline-block;margin:0;font-family:var(--pl-font-sans-serif);font-size:1em;font-weight:400}p.sc-pennlibs-feedback{margin:0;padding:calc(0.5em + 1px) 0}a.sc-pennlibs-feedback{color:var(--pl-color-fg-accent);text-decoration:underline;text-underline-offset:var(--pl-link-text-underline-offset);text-decoration-thickness:var(--pl-link-hover-text-decoration-thickness)}button.sc-pennlibs-feedback{all:unset;display:flex;align-items:center;gap:0.5em;padding:0.25em 1.25em;font-family:var(--pl-font-family);font-weight:500;line-height:1.4;color:var(--pl-color-fg-default);background:var(--pl-color-bg-default);border:solid 1px var(--pl-color-fg-subtle);border-radius:1em;box-sizing:border-box}button.sc-pennlibs-feedback:hover{cursor:pointer}button.sc-pennlibs-feedback:hover span.sc-pennlibs-feedback{text-decoration:underline}button.selected.sc-pennlibs-feedback{background:var(--pl-color-bg-accent-emphasis);color:var(--pl-color-fg-on-emphasis);border-color:var(--pl-color-bg-accent-emphasis)}.feedback__inline-question.sc-pennlibs-feedback+.feedback__share-feedback.sc-pennlibs-feedback,p.sc-pennlibs-feedback{animation:none}.feedback__content.sc-pennlibs-feedback>p.sc-pennlibs-feedback{animation:fadeIn 300ms ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}*.sc-pennlibs-feedback:focus{outline:0;box-shadow:0 0 0 2px var(--pl-color-bg-attention),\n 0 0 0 3px var(--pl-color-bg-emphasis)}@media (max-width: 26em){h2.sc-pennlibs-feedback{display:block;width:100%}}.visually-hidden.sc-pennlibs-feedback{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
4
4
|
|
|
5
|
-
const FEEDBACK_STORAGE_KEY = `pennlibs-feedback-${window.location.pathname}`;
|
|
6
5
|
const FEEDBACK_TTL = 5 * 60 * 1000; // 5 minutes
|
|
7
6
|
const FEEDBACK_QUESTION = 'Did you find what you need?';
|
|
8
7
|
const PennlibsFeedback = class {
|
|
@@ -15,21 +14,50 @@ const PennlibsFeedback = class {
|
|
|
15
14
|
this.hideQuestion = false;
|
|
16
15
|
this.answer = undefined;
|
|
17
16
|
this.selected = undefined;
|
|
17
|
+
this.currentUrl = '';
|
|
18
|
+
this.onNavigate = (event) => {
|
|
19
|
+
try {
|
|
20
|
+
const destinationUrl = new URL(event.destination.url).href;
|
|
21
|
+
if (destinationUrl !== this.currentUrl) {
|
|
22
|
+
this.currentUrl = destinationUrl;
|
|
23
|
+
this.selected = undefined;
|
|
24
|
+
this.answer = undefined;
|
|
25
|
+
this.loadStoredAnswer();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
catch (_a) {
|
|
29
|
+
this.selected = undefined;
|
|
30
|
+
this.answer = undefined;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
get storageKey() {
|
|
35
|
+
return `pennlibs-feedback-${this.currentUrl}`;
|
|
36
|
+
}
|
|
37
|
+
connectedCallback() {
|
|
38
|
+
this.currentUrl = window.location.href;
|
|
39
|
+
window.navigation.addEventListener('navigate', this.onNavigate);
|
|
40
|
+
}
|
|
41
|
+
disconnectedCallback() {
|
|
42
|
+
window.navigation.removeEventListener('navigate', this.onNavigate);
|
|
18
43
|
}
|
|
19
44
|
componentWillLoad() {
|
|
20
|
-
|
|
45
|
+
this.loadStoredAnswer();
|
|
46
|
+
}
|
|
47
|
+
loadStoredAnswer() {
|
|
48
|
+
const stored = sessionStorage.getItem(this.storageKey);
|
|
21
49
|
if (stored) {
|
|
22
50
|
try {
|
|
23
51
|
const { answer, timestamp } = JSON.parse(stored);
|
|
24
52
|
if (Date.now() - timestamp > FEEDBACK_TTL) {
|
|
25
|
-
sessionStorage.removeItem(
|
|
53
|
+
sessionStorage.removeItem(this.storageKey);
|
|
26
54
|
}
|
|
27
55
|
else {
|
|
28
56
|
this.answer = answer;
|
|
29
57
|
}
|
|
30
58
|
}
|
|
31
59
|
catch (_a) {
|
|
32
|
-
sessionStorage.removeItem(
|
|
60
|
+
sessionStorage.removeItem(this.storageKey);
|
|
33
61
|
}
|
|
34
62
|
}
|
|
35
63
|
}
|
|
@@ -38,7 +66,7 @@ const PennlibsFeedback = class {
|
|
|
38
66
|
event.preventDefault();
|
|
39
67
|
const answer = event.submitter.value;
|
|
40
68
|
this.selected = answer;
|
|
41
|
-
sessionStorage.setItem(
|
|
69
|
+
sessionStorage.setItem(this.storageKey, JSON.stringify({ answer, timestamp: Date.now() }));
|
|
42
70
|
this.feedbackEvent.emit({
|
|
43
71
|
question: FEEDBACK_QUESTION,
|
|
44
72
|
answer: answer,
|
|
@@ -51,7 +79,7 @@ const PennlibsFeedback = class {
|
|
|
51
79
|
}, 600);
|
|
52
80
|
}
|
|
53
81
|
render() {
|
|
54
|
-
return (h("div", { key: '
|
|
82
|
+
return (h("div", { key: '12bdec6f975166a4c5d451fc1834f70fbce3b424', class: "feedback__container" }, h("div", { key: '4c607ceef5f10760d540d2549a2b186a871714c7', class: "viewport-margins" }, h("div", { key: 'a967498163e05ce60a12bf230d303caa31373c8d', class: "feedback__content" }, !this.hideQuestion && (this.answer === 'yes' ? (h("p", null, "Thank you for letting us know.")) : this.answer === 'no' ? (h("p", null, "We'd like to help. ", h("a", { href: "https://www.library.upenn.edu/contact-us" }, "Contact us"), " and let us know what you're looking for.")) : (h("form", { class: "feedback__inline-question", onSubmit: (e) => this.handleSubmit(e) }, h("h2", null, "Did you find what you need?"), h("button", { type: "submit", name: "answer", value: "yes", class: { 'selected': this.selected === 'yes' }, disabled: !!this.selected }, h("span", null, "Yes"), h("span", { class: "visually-hidden" }, ", I found what I needed.")), h("button", { type: "submit", name: "answer", value: "no", class: { 'selected': this.selected === 'no' }, disabled: !!this.selected }, h("span", null, "No"), h("span", { class: "visually-hidden" }, ", I did not find what I needed."))))), h("div", { key: 'f918da2833ae0c64e67a9e95551edaeb78e2ba05', class: "feedback__share-feedback" }, h("p", { key: '12928af116ffadf669cbc694160ee6ca3458528b' }, "To help us improve, ", h("a", { key: '7281b7423677b104fb622a7fdcf8e768517ea84e', href: `https://upenn.co1.qualtrics.com/jfe/form/SV_3xVrP7EKWS92zfE?reporting_from_url=${encodeURIComponent(window.location.href)}` }, "share your feedback"), "."))))));
|
|
55
83
|
}
|
|
56
84
|
};
|
|
57
85
|
PennlibsFeedback.style = pennlibsFeedbackCss;
|