PairDrop/app/elements/buddy-finder/device-name.html

<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/iron-localstorage/iron-localstorage.html">
<link rel="import" href="device-name-dialog.html">
<dom-module id="device-name">
    <template>
        <style>
        :host {
            display: inline-block;
            cursor: pointer;
        }
        
        .name-label {
            @apply(--paper-font-subhead);
            text-align: center;
            cursor: pointer;
            width: 160px;
            line-height: 18px !important;
        }
        
        :root {
            /* Label and underline color when the input is not focused */
            --paper-input-container-color: #333;
            /* Label and underline color when the input is focused */
            --paper-input-container-focus-color: #4285f4;
            /* Label and underline color when the input is invalid */
            --paper-input-container-invalid-color: red;
            /* Input foreground color */
            --paper-input-container-input-color: #333;
        }
        
        @media all and (max-height: 370px) {
            :host {}
        }
        
        paper-dialog {
            width: 300px;
            text-align: left;
        }
        </style>
        <div class="name-label" hidden$="{{name}}">My Name</div>
        <div class="name-label" hidden$="{{!name}}">{{name}}</div>
        <iron-localstorage name="device-name" value="{{name}}" iron-localstorage-load="_nameChanged"></iron-localstorage>
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'device-name',
        properties: {
            name: {
                observer: '_nameChanged'
            }
        },
        open: function() {
            this.deviceNameDialog.open();
        },
        _nameChanged: function(name) {
            if (!name) {
                return;
            }
            this.cancelAsync(this.timer);
            this.timer = this.async(function() {
                if (!app.conn.notifyServer) {
                    this._nameChanged(name);
                    return;
                }
                this._sendNameToServer(name);

            }, 300);

        },
        _sendNameToServer: function(name) {
            app.conn.notifyServer({
                serverMsg: 'device-name',
                name: name
            });
        },
        _initialize: function() {
            console.log('initialize name');
        },
        get deviceNameDialog() {
            var deviceNameDialog = document.querySelector('device-name-dialog');
            if (!deviceNameDialog) {
                deviceNameDialog = Polymer.Base.create('device-name-dialog');
                deviceNameDialog.addEventListener('save-device-name', function(e) {
                    this.name = e.detail;
                    console.log(this.name);
                }.bind(this));
                document.body.appendChild(deviceNameDialog);
            };
            deviceNameDialog.deviceName = this.name;
            return deviceNameDialog;
        }
    });
    </script>
</dom-module>