snapdrop/app/elements/text-sharing/text-input-dialog.html

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="linkify.html">
<link rel="import" href="clipboard-behavior.html">
<link rel="import" href="../sound-notification/sound-notification-behavior.html">
<dom-module id="text-input-dialog">
    <template>
        <style>
        :host {
            display: block;
        }
        
        #sendDialog,
        #receiveDialog {
            width: 324px;
            z-index: 101;
            max-height: 320px;
            overflow: hidden;
            margin: 16px;
        }
        
        @media all and (max-height: 600px) {
            #sendDialog {
                padding-top: 24px;
                top: 0px !important;
            }
        }
        
        #receivedText {
            word-break: break-all;
            word-break: break-word;
        }
        
        paper-textarea {
            max-height: 200px;
            width: calc(100% - 48px);
            overflow-x: hidden;
            overflow-y: auto;
        }
        
        #receivedText {
            max-height: 200px;
            overflow: hidden;
            width: calc(100% - 48px);
            text-overflow: ellipsis;
            -webkit-line-clamp: 9;
            clamp: 9;
        }
        </style>
        <paper-dialog id="sendDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
            <h2>Send Text</h2>
            <paper-textarea id="textInput" label="Enter Text" value="{{textToSend}}" autofocus></paper-textarea>
            <div class="buttons">
                <paper-button dialog-dismiss>Discard</paper-button>
                <paper-button dialog-dismiss on-tap="_send">Send</paper-button>
            </div>
        </paper-dialog>
        <paper-dialog id="receiveDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
            <h2>Text Received</h2>
            <div>
                <div id="receivedText">
                </div>
            </div>
            <div class="buttons">
                <paper-button dialog-dismiss>Close</paper-button>
                <paper-button on-tap="_copy" autofocus hidden$="{{!clipboardSupported}}">Copy</paper-button>
                <a href="tel:{{tel}}" hidden$="{{!tel}}">
                    <paper-button autofocus dialog-dismiss>Call</paper-button>
                </a>
                <a href="{{url}}" hidden$="{{!url}}" target="_blank">
                    <paper-button autofocus dialog-dismiss>Open</paper-button>
                </a>
            </div>
        </paper-dialog>
    </template>
    <script>
    'use strict';
    (function() {
        /* 
         *   
         *   /^\+?[0-9x]*$/ is the first usuful Text sent via Snapdrop 2015/1/2 5:30 
         *
         */
        var phoneNumbers = /^\+?[0-9x/ ]*$/;
        var urls = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;

        Polymer({
            is: 'text-input-dialog',
            behaviors: [Chat.ClipboardBehavior, Chat.SoundNotificationBehavior],
            properties: {
                textToSend: {
                    type: String
                },
                receivedText: {
                    type: String
                },
                contact: {
                    type: Object
                },
                tel: {
                    computed: '_isPhoneNumber(receivedText)',
                    value: false
                },
                url: {
                    computed: '_isUrl(receivedText)',
                    value: false
                },
                clipboardSupported: {
                    value: false
                },
                fallback: {
                    computed: '_isFallback(url,tel,clipboardSupported)',
                    value: false
                }
            },
            open: function(contact) {
                this.contact = contact;
                this.$.sendDialog.open();
            },
            attached: function() {
                // clipboard must be initalized by user interaction
                var that = this;
                var hackListener = function() {
                    document.body.removeEventListener('touchstart', hackListener, false);
                    document.body.removeEventListener('click', hackListener, false);
                    // wait 1s to tell the ui that copy is supported
                    that.async(function() {
                        that.clipboardSupported = document.queryCommandSupported && document.queryCommandSupported('copy');
                    }, 1000);
                };
                document.body.addEventListener('touchstart', hackListener, false);
                document.body.addEventListener('click', hackListener, false);


                this.async(function() {
                    app.conn.addEventListener('text-received', function(e) {
                        var receivedText = e.detail.text;
                        if (!receivedText || receivedText.trim() === '') {
                            this.playSound();
                            return;
                        }
                        this.receivedText = receivedText;
                        this.$.receivedText.textContent = receivedText;
                        window.linkifyElement(this.$.receivedText, {}, document);
                        this.$.receiveDialog.open();
                        this.playSound();
                    }.bind(this), false);
                }, 200);

                this.$.textInput.addEventListener('keypress', function(e) {
                    if (e.which === 13 || e.charCode === 13) {
                        var key;
                        var isShift;
                        if (window.event) {
                            key = window.event.keyCode;
                            isShift = !!window.event.shiftKey; // typecast to boolean
                        } else {
                            key = e.which;
                            isShift = !!e.shiftKey;
                        }
                        if (!isShift) {
                            e.preventDefault();
                            e.stopPropagation();
                            this._send();
                        }
                    }
                }.bind(this), false);


            },
            _send: function() {
                this.$.sendDialog.close();
                app.conn.sendText(this.contact.peerId, this.textToSend);
            },
            _copy: function() {
                this.copyToClipboard(this.receivedText);

                this.$.receiveDialog.close();
                console.log('text copied', this.receivedText);
            },
            _isPhoneNumber: function(text) {
                if (!text || text.length < 5 || text.length > 100) {
                    return false;
                }
                if (phoneNumbers.test(text)) {
                    return text;
                }

            },
            _isUrl: function(text) {
                if (!text) {
                    return false;
                }
                if (urls.test(text)) {
                    return text;
                }

            },
            _isFallback: function(url, tel, clipboardSupported) {
                return (!url && !tel && !clipboardSupported);
            }
        });
    }());
    </script>
</dom-module>