Copy to clipboard: Workaround for Safari on iOS (#626)

src/directives/message.ts

@@ -19,23 +19,27 @@
 
 import {saveAs} from 'file-saver';
 
+import {BrowserInfo} from '../helpers/browser_info';
 import {getSenderIdentity} from '../helpers/messages';
+import {BrowserService} from '../services/browser';
 import {MessageService} from '../services/message';
 import {ReceiverService} from '../services/receiver';
 import {WebClientService} from '../services/webclient';
 
 export default [
-    'WebClientService',
+    'BrowserService',
     'MessageService',
     'ReceiverService',
+    'WebClientService',
     '$mdDialog',
     '$mdToast',
     '$translate',
     '$rootScope',
     '$log',
-    function(webClientService: WebClientService,
+    function(browserService: BrowserService,
              messageService: MessageService,
              receiverService: ReceiverService,
+             webClientService: WebClientService,
              $mdDialog: ng.material.IDialogService,
              $mdToast: ng.material.IToastService,
              $translate: ng.translate.ITranslateService,
@@ -55,6 +59,9 @@ export default [
             controller: [function() {
                 this.logTag = '[MessageDirective]';
 
+                // Determine browser
+                this.browserInfo = browserService.getBrowser();
+
                 this.$onInit = function() {
 
                     // Defaults and variables
@@ -117,11 +124,26 @@ export default [
                         // In order to copy the text to the clipboard,
                         // put it into a temporary textarea element.
                         const textArea = document.createElement('textarea');
-                        let toastString = 'messenger.COPY_ERROR';
                         textArea.value = text;
                         document.body.appendChild(textArea);
-                        textArea.focus();
-                        textArea.select();
+
+                        if ((this.browserInfo as BrowserInfo).isSafari()) {
+                            // Safari: Create a selection range.
+                            // Inspiration: https://stackoverflow.com/a/34046084/284318
+                            textArea.contentEditable = 'true';
+                            textArea.readOnly = false;
+                            const range = document.createRange();
+                            const selection = self.getSelection();
+                            selection.removeAllRanges();
+                            selection.addRange(range);
+                            textArea.setSelectionRange(0, 999999);
+                        } else {
+                            textArea.focus();
+                            textArea.select();
+                        }
+
+                        // Copy selection to clipboard
+                        let toastString = 'messenger.COPY_ERROR';
                         try {
                             const successful = document.execCommand('copy');
                             if (!successful) {

src/helpers/browser_info.ts

@@ -89,11 +89,11 @@ export class BrowserInfo {
         }
     }
 
-    public isFirefox(requireVersion: boolean): boolean {
+    public isFirefox(requireVersion: boolean = false): boolean {
         return this.name === threema.BrowserName.Firefox && (!requireVersion || this.version !== null);
     }
 
-    public isSafari(requireVersion: boolean): boolean {
+    public isSafari(requireVersion: boolean = false): boolean {
         return this.name === threema.BrowserName.Safari && (!requireVersion || this.version !== null);
     }
 }