pnsk-structured-editor/pnsk-structured-editor-tweet.html at master · patternseek/pnsk-structured-editor · GitHub

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
<link rel="import" href="../polymer/polymer-micro.html">

<style>
    pnsk-structured-editor-tweet .preview {
        background-color: white;
        margin-bottom: 12px;
        padding: 8px;
        display: none;
        width: 100%;
    }
</style>

<template id="pnsk-structured-editor-tweet" noshadowroot>
    <div class="preview"></div>
        <span class="inputswrapper">
            <label>
                URL
                <input class="url" type="url">
            </label>
        </span>

    <content></content>
</template>


<script>
    window.twttr = (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
                t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function (f) {
            t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));

    Polymer({
        is: 'pnsk-structured-editor-tweet',
        behaviors: [MinimalComponent],

        template: currentImport.querySelector('#pnsk-structured-editor-tweet'),

        properties: {
            oembedProxyUrl: String,
            _currentPreviewURL: String
        },

        dataType: "tweet",

        getState: function () {
            return {
                'url': this.qs(".url").value
            };
        },

        setState: function (state) {
            this.qs(".url").value = state.url;
            this._updatePreview();
        },

        _onChange: function () {
            var event = new Event('pnsk-component-stateChanged');
            this.dispatchEvent(event);
            this._updatePreview();
        },

        _updatePreview: function () {

            window.setTimeout(function () {
                var req = new XMLHttpRequest();
                var plc = this.qs(".preview");
                var url = this.qs(".url").value;

                if (this._currentPreviewURL == url) {
                    return;
                }

                req.onreadystatechange = function () {
                    if (req.readyState == XMLHttpRequest.DONE) {
                        if (req.status == 200) {
                            plc.innerHTML = JSON.parse(req.responseText).html;
                            plc.style.display = "block";
                            twttr.widgets.load(plc);
                            this._currentPreviewURL = url;
                        }
                        else {
                            plc.style.display = "none";
                            this._currentPreviewURL = '';
                        }
                    }
                }.bind(this);
                req.open("GET", this.oembedProxyUrl + encodeURIComponent(url), true);
                req.send();
                plc.style.display = "none";
                this._currentPreviewURL = '';

            }.bind(this), 40);

        },

        // Element Lifecycle
        attachedCallback: function () {
            this.qs(".inputswrapper").addEventListener("change", this._onChange.bind(this));
            this.qs(".inputswrapper").addEventListener("cut", this._onChange.bind(this));
            this.qs(".inputswrapper").addEventListener("paste", this._onChange.bind(this));
        },

    });

</script>