forked from Blogger-Peer-Review/quotebacks
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathquoteback.js
More file actions
172 lines (152 loc) · 11.1 KB
/
quoteback.js
File metadata and controls
172 lines (152 loc) · 11.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
let editSVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.42852 8.1826L3.83008 6.04181C3.84249 5.9758 3.87452 5.91507 3.92201 5.86756L9.55515 0.234417C9.97431 -0.184732 10.7881 -0.0275712 11.408 0.592253C12.0277 1.21199 12.1848 2.02581 11.7657 2.44496L6.13255 8.0781C6.08504 8.12559 6.02431 8.15763 5.9583 8.17004L3.81761 8.5717C3.76434 8.58168 3.70943 8.57853 3.65765 8.56251C3.60587 8.54649 3.55878 8.51809 3.52045 8.47976C3.48212 8.44143 3.45372 8.39434 3.4377 8.34256C3.42168 8.29078 3.41853 8.23588 3.42852 8.1826ZM10.0266 0.705828L4.46633 6.26605L4.17359 7.82661L5.73407 7.53378L11.2943 1.97355C11.4042 1.86366 11.3175 1.44465 10.9365 1.06366C10.5555 0.682577 10.1364 0.59594 10.0266 0.705828ZM10.2326 12H0.333333C0.289558 12 0.246212 11.9914 0.205768 11.9746C0.165325 11.9579 0.128577 11.9333 0.0976236 11.9024C0.0666701 11.8714 0.0421171 11.8347 0.0253667 11.7942C0.00861633 11.7538 -3.32535e-06 11.7104 9.62344e-10 11.6667V1.76752C-3.32535e-06 1.72374 0.00861633 1.68039 0.0253667 1.63995C0.0421171 1.59951 0.0666701 1.56276 0.0976236 1.53181C0.128577 1.50085 0.165325 1.4763 0.205768 1.45955C0.246212 1.4428 0.289558 1.43418 0.333333 1.43418H5.7154L5.04872 2.10085H0.666667V11.3333H9.89922V6.95119L10.5659 6.28453V11.6667C10.5659 11.7104 10.5573 11.7538 10.5405 11.7942C10.5238 11.8347 10.4992 11.8714 10.4683 11.9024C10.4373 11.9333 10.4006 11.9579 10.3601 11.9746C10.3197 11.9914 10.2763 12 10.2326 12Z" fill="#9DB8BF"/></svg>`;
let quoteStyle = `.quoteback-container {
--background-color: white;
--border-color-normal: #C2DFE3;
--border-color-hover: #9DB8BF;
--author-color: black;
--title-color: #5C6D73;
--gototext-color: #9DB8BF;
--content-color: #464A4D;
--internal-blockquote-color: #5C6D73;
}
@media (prefers-color-scheme: dark) {
.quoteback-container {
--background-color: #161717;
--border-color-normal: #253237;
--border-color-hover: #5C6D73;
--author-color: #E0FBFC;
--title-color: #9DB8BF;
--gototext-color: #5C6D73;
--content-color: #9DB8BF;
--internal-blockquote-color: #5C6D73;
}
}
.quoteback-container{font-family:-apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";text-rendering:optimizeLegibility;border:1px solid var(--border-color-normal);border-radius:8px;margin-bottom:25px;max-width:800px;background-color:var(--background-color);text-align:left;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.quoteback-container:hover{transform:translateY(-0px);box-shadow:0px 6px 20px 0px rgba(0,0,0,0.15);border:1px solid var(--border-color-hover)}.quoteback-container .quoteback-parent{overflow:hidden;position:relative;width:100%;box-sizing:border-box}.quoteback-container .quoteback-parent .quoteback-content{font-family:-apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";font-size:16px;font-weight:400;padding:15px;color:var(--content-color);line-height:150%}.quoteback-container .quoteback-head{border-top:1px solid var(--border-color-normal);display:flex;flex-flow:row nowrap;justify-content:start;align-items:stretch;padding-left:15px;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.quoteback-container .quoteback-head .quoteback-avatar{border-radius:100%;border:1px solid var(--border-color-normal);width:42px;height:42px;min-width:42px !important;margin:12px 0px;position:relative}.quoteback-container .quoteback-head .quoteback-avatar .mini-favicon{width:44px;height:44px;border-radius:22px;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0}.quoteback-container .quoteback-head .quoteback-metadata{min-width:0px;display:flex;flex-shrink:1;align-items:center;margin-left:10px}.quoteback-container .quoteback-head .metadata-inner{font-size:14px;line-height:1.2;width:100%;max-width:525px}@media (max-width: 414px){.quoteback-container .quoteback-head .metadata-inner{max-width:200px}}.quoteback-container .quoteback-head .metadata-inner .quoteback-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;padding-right:20px;color:var(--title-color)}.quoteback-container .quoteback-head .metadata-inner .quoteback-author{font-size:14px;line-height:1.2;color:var(--author-color);font-weight:600;margin-bottom:2px}.quoteback-container .quoteback-head .quoteback-backlink{margin-left:auto;display:flex;flex-shrink:1;align-items:center;width:81px;min-width:81px !important;padding:0px 15px !important;border-left:1px solid var(--border-color-normal)}.quoteback-container .quoteback-head .quoteback-backlink .quoteback-arrow{border:none !important;font-family:inherit !important;font-size:14px !important;color:var(--gototext-color) !important;text-decoration:none !important;-webkit-transition:opacity 0.1s ease;-moz-transition:opacity 0.1s ease;-ms-transition:opacity 0.1s ease;-o-transition:opacity 0.1s ease;transition:opacity 0.1s ease}.quoteback-container .quoteback-head .quoteback-backlink .quoteback-arrow:hover{opacity:.5 !important}.quoteback-container .quoteback-head .quoteback-backlink .quoteback-arrow:visited{text-decoration:none !important}.editable:focus{outline:none}.editable:before{margin-right:8px;content: url(data:image/svg+xml,${encodeURIComponent(editSVG)}) ;}.quoteback-content a{color:var(--content-color);-webkit-transition:opacity 0.2s ease;-moz-transition:opacity 0.2s ease;-ms-transition:opacity 0.2s ease;-o-transition:opacity 0.2s ease;transition:opacity 0.2s ease}.quoteback-content a:hover{opacity:.5}.quoteback-content p{margin-block-start:0px;margin-block-end:.5em}.quoteback-content p:last-of-type{margin-block-end:0px}.quoteback-content img{width:100%;height:auto;margin:.5em 0em}.quoteback-content blockquote{border-left:2px solid var(--border-color-normal);padding-left:.75em;margin-inline-start:1em;color:var(--internal-blockquote-color)}.quoteback-content ol,.quoteback-content ul{margin-block-start:.5em;margin-block-end:.5em}.quoteback-content h1,.quoteback-content h2,.quoteback-content h3{margin-block-start:.5em;margin-block-end:.5em}`;
(function () {
function ensureQuotebackComponent() {
if (window.customElements.get('quoteback-component')) {
return;
}
const template = document.createElement('template');
template.innerHTML=`
<style>${quoteStyle}</style>
<div class="quoteback-container">
<div id="quoteback-parent" class="quoteback-parent">
<div class="quoteback-content"></div>
</div>
<div class="quoteback-head">
<div class="quoteback-avatar"><img class="mini-favicon" src=""/></div>
<div class="quoteback-metadata">
<div class="metadata-inner">
<div class="quoteback-author"></div>
<div class="quoteback-title"></div>
</div>
</div>
<div class="quoteback-backlink"><a target="_blank" href="" class="quoteback-arrow">Go to text <span class="right-arrow">→</span></a></div>
</div>
</div>`;
class Quoteback extends HTMLElement {
constructor(){
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.text = decodeURIComponent(this.getAttribute('text'));
this.author = this.getAttribute('author');
this.title = this.getAttribute('title');
this.url = this.getAttribute('url');
this.favicon = this.getAttribute('favicon');
this.editable = this.getAttribute('editable');
};
set text(value) {
this._text = value;
if (this.shadowRoot)
this.shadowRoot.querySelector('.quoteback-content').innerHTML = value;
};
get text() {
return this._text;
};
set author(value) {
this._author = value;
if (this.shadowRoot)
this.shadowRoot.querySelector('.quoteback-author').innerHTML = value;
};
get author() {
return this._author;
};
set title(value) {
this._title = value;
if (this.shadowRoot)
this.shadowRoot.querySelector('.quoteback-title').innerHTML = value;
};
get title() {
return this._title;
};
set url(value) {
this._url = value;
if (this.shadowRoot)
this.shadowRoot.querySelector('.quoteback-arrow').href = value;
};
get url() {
return this._url;
};
set favicon(value) {
this._favicon = value;
if (this.shadowRoot)
this.shadowRoot.querySelector('.mini-favicon').src = value;
};
get favicon() {
return this._favicon;
}
set editable(value) {
this._editable = value;
if (this.shadowRoot)
if (value == "true") {
this.shadowRoot.querySelector('.quoteback-author').setAttribute("contenteditable", true);
this.shadowRoot.querySelector('.quoteback-title').setAttribute("contenteditable", true);
}
};
get editable() {
return this._editable;
};
}
window.customElements.define('quoteback-component', Quoteback);
}
function renderQuotebacks(root) {
ensureQuotebackComponent();
var scope = root && typeof root.querySelectorAll === 'function' ? root : document;
var blocks = scope.querySelectorAll('blockquote.quoteback');
for (var i = 0; i < blocks.length; i++) {
var block = blocks[i];
var footer = block.querySelector('footer');
if (footer) {
footer.remove();
}
var text = block.innerHTML;
var url = block.cite;
var author = block.getAttribute('data-author');
var title = block.getAttribute('data-title');
var favicon = block.getAttribute('data-avatar');
if (favicon == null) {
favicon = `https://s2.googleusercontent.com/s2/favicons?domain_url=${url}&sz=64`;
}
if (title == null) {
title = "";
}
let component = `
<quoteback-component url="${url}" text="${encodeURIComponent(text)}" author="${author}" title="${title}" favicon="${favicon}">
<script src="./quoteback.js"></script>
</quoteback-component>
`;
let newEl = document.createElement('div');
newEl.innerHTML = component;
if (block.parentNode) {
block.parentNode.replaceChild(newEl, block);
}
}
}
document.addEventListener("DOMContentLoaded", function() {
renderQuotebacks();
});
window.microblog = window.microblog || {};
window.microblog.renderQuotebacks = renderQuotebacks;
})();