1 | import {DT, suppressDTWarnings} from "./DT";
|
2 |
|
3 |
|
4 |
|
5 | var debugLog: (s: string) => void = function(s: string) {};
|
6 | var showWarnings = true;
|
7 |
|
8 |
|
9 |
|
10 | var warnOrLog = function() {
|
11 | (console.warn || console.log).apply(console, arguments);
|
12 | };
|
13 | var warn = warnOrLog.bind("[clipboard-polyfill]");
|
14 |
|
15 | var TEXT_PLAIN = "text/plain";
|
16 |
|
17 | declare global {
|
18 | interface Navigator {
|
19 | clipboard: {
|
20 | writeText?: (s: string) => Promise<void>;
|
21 | readText?: () => Promise<string>;
|
22 | };
|
23 | }
|
24 | }
|
25 |
|
26 | export default class ClipboardPolyfill {
|
27 | public static readonly DT = DT;
|
28 |
|
29 | public static setDebugLog(f: (s: string) => void): void {
|
30 | debugLog = f;
|
31 | }
|
32 |
|
33 | public static suppressWarnings() {
|
34 | showWarnings = false;
|
35 | suppressDTWarnings();
|
36 | }
|
37 |
|
38 | public static async write(data: DT): Promise<void> {
|
39 | if (showWarnings && !data.getData(TEXT_PLAIN)) {
|
40 | warn("clipboard.write() was called without a "+
|
41 | "`text/plain` data type. On some platforms, this may result in an "+
|
42 | "empty clipboard. Call clipboard.suppressWarnings() "+
|
43 | "to suppress this warning.");
|
44 | }
|
45 |
|
46 | if (execCopy(data)) {
|
47 | debugLog("regular execCopy worked");
|
48 | return;
|
49 | }
|
50 |
|
51 |
|
52 |
|
53 | if (navigator.userAgent.indexOf("Edge") > -1) {
|
54 | debugLog("UA \"Edge\" => assuming success");
|
55 | return;
|
56 | }
|
57 |
|
58 |
|
59 | if (seemToBeInIE()) {
|
60 | if (writeIE(data)) {
|
61 | return;
|
62 | } else {
|
63 | throw "Copying failed, possibly because the user rejected it.";
|
64 | }
|
65 | }
|
66 |
|
67 |
|
68 | if (copyUsingTempSelection(document.body, data)) {
|
69 | debugLog("copyUsingTempSelection worked");
|
70 | return;
|
71 | }
|
72 |
|
73 |
|
74 | if (copyUsingTempElem(data)) {
|
75 | debugLog("copyUsingTempElem worked");
|
76 | return;
|
77 | }
|
78 |
|
79 |
|
80 | var text = data.getData(TEXT_PLAIN);
|
81 | if (text !== undefined && copyTextUsingDOM(text)) {
|
82 | debugLog("copyTextUsingDOM worked");
|
83 | return;
|
84 | }
|
85 |
|
86 | throw "Copy command failed.";
|
87 | }
|
88 |
|
89 | public static async writeText(s: string): Promise<void> {
|
90 | if (navigator.clipboard && navigator.clipboard.writeText) {
|
91 | debugLog("Using `navigator.clipboard.writeText()`.");
|
92 | return navigator.clipboard.writeText(s);
|
93 | }
|
94 | return this.write(DTFromText(s));
|
95 | }
|
96 |
|
97 | public static async read(): Promise<DT> {
|
98 | return DTFromText(await this.readText());
|
99 | }
|
100 |
|
101 | public static async readText(): Promise<string> {
|
102 | if (navigator.clipboard && navigator.clipboard.readText) {
|
103 | debugLog("Using `navigator.clipboard.readText()`.");
|
104 | return navigator.clipboard.readText();
|
105 | }
|
106 | if (seemToBeInIE()) {
|
107 | debugLog("Reading text using IE strategy.");
|
108 | return readIE();
|
109 | }
|
110 | throw "Read is not supported in your browser.";
|
111 | }
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 | class FallbackTracker {
|
117 | public success: boolean = false;
|
118 | }
|
119 |
|
120 | function copyListener(tracker: FallbackTracker, data: DT, e: ClipboardEvent): void {
|
121 | debugLog("listener called");
|
122 | tracker.success = true;
|
123 | data.forEach((value: string, key: string) => {
|
124 | e.clipboardData.setData(key, value);
|
125 | if (key === TEXT_PLAIN && e.clipboardData.getData(key) != value) {
|
126 | debugLog("setting text/plain failed");
|
127 | tracker.success = false;
|
128 | }
|
129 | });
|
130 | e.preventDefault();
|
131 | }
|
132 |
|
133 | function execCopy(data: DT): boolean {
|
134 | var tracker = new FallbackTracker();
|
135 | var listener = copyListener.bind(this, tracker, data);
|
136 |
|
137 | document.addEventListener("copy", listener);
|
138 | try {
|
139 |
|
140 |
|
141 |
|
142 | document.execCommand("copy");
|
143 | } finally {
|
144 | document.removeEventListener("copy", listener);
|
145 | }
|
146 | return tracker.success;
|
147 | }
|
148 |
|
149 |
|
150 | function copyUsingTempSelection(e: HTMLElement, data: DT): boolean {
|
151 | selectionSet(e);
|
152 | var success = execCopy(data);
|
153 | selectionClear();
|
154 | return success;
|
155 | }
|
156 |
|
157 |
|
158 |
|
159 | function copyUsingTempElem(data: DT): boolean {
|
160 | var tempElem = document.createElement("div");
|
161 |
|
162 |
|
163 | tempElem.setAttribute("style", "-webkit-user-select: text !important");
|
164 |
|
165 | tempElem.textContent = "temporary element";
|
166 | document.body.appendChild(tempElem);
|
167 |
|
168 | var success = copyUsingTempSelection(tempElem, data);
|
169 |
|
170 | document.body.removeChild(tempElem);
|
171 | return success;
|
172 | }
|
173 |
|
174 |
|
175 | function copyTextUsingDOM(str: string): boolean {
|
176 | debugLog("copyTextUsingDOM");
|
177 |
|
178 | var tempElem = document.createElement("div");
|
179 |
|
180 |
|
181 | tempElem.setAttribute("style", "-webkit-user-select: text !important");
|
182 |
|
183 | var spanParent: Node = tempElem;
|
184 | if (tempElem.attachShadow) {
|
185 | debugLog("Using shadow DOM.");
|
186 | spanParent = tempElem.attachShadow({mode: "open"});
|
187 | }
|
188 |
|
189 | var span = document.createElement("span");
|
190 | span.innerText = str;
|
191 |
|
192 | spanParent.appendChild(span);
|
193 | document.body.appendChild(tempElem);
|
194 | selectionSet(span);
|
195 |
|
196 | var result = document.execCommand("copy");
|
197 |
|
198 | selectionClear();
|
199 | document.body.removeChild(tempElem);
|
200 |
|
201 | return result;
|
202 | }
|
203 |
|
204 |
|
205 |
|
206 | function selectionSet(elem: Element): void {
|
207 | var sel = document.getSelection();
|
208 | var range = document.createRange();
|
209 | range.selectNodeContents(elem);
|
210 | sel.removeAllRanges();
|
211 | sel.addRange(range);
|
212 | }
|
213 |
|
214 | function selectionClear(): void {
|
215 | var sel = document.getSelection();
|
216 | sel.removeAllRanges();
|
217 | }
|
218 |
|
219 |
|
220 |
|
221 | function DTFromText(s: string): DT {
|
222 | var dt = new DT();
|
223 | dt.setData(TEXT_PLAIN, s);
|
224 | return dt;
|
225 | }
|
226 |
|
227 |
|
228 |
|
229 | interface IEWindow extends Window {
|
230 | clipboardData: {
|
231 | setData: (key: string, value: string) => boolean;
|
232 |
|
233 | getData: (key: string) => string;
|
234 | }
|
235 | }
|
236 |
|
237 | function seemToBeInIE(): boolean {
|
238 | return typeof ClipboardEvent === "undefined" &&
|
239 | typeof (window as IEWindow).clipboardData !== "undefined" &&
|
240 | typeof (window as IEWindow).clipboardData.setData !== "undefined";
|
241 | }
|
242 |
|
243 | function writeIE(data: DT): boolean {
|
244 |
|
245 |
|
246 | var text = data.getData(TEXT_PLAIN);
|
247 | if (text !== undefined) {
|
248 | return (window as IEWindow).clipboardData.setData("Text", text);
|
249 | }
|
250 |
|
251 | throw ("No `text/plain` value was specified.");
|
252 | }
|
253 |
|
254 |
|
255 | async function readIE(): Promise<string> {
|
256 | var text = (window as IEWindow).clipboardData.getData("Text");
|
257 | if (text === "") {
|
258 | throw "Empty clipboard or could not read plain text from clipboard";
|
259 | }
|
260 | return text;
|
261 | }
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 | declare var module: any;
|
268 | module.exports = ClipboardPolyfill;
|