pnsk-structured-editor/pnsk-structured-editor-facebook-post.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
118
119
120
121
122
123
124
125
126
127
128
129
<link rel="import" href="../polymer/polymer-micro.html">

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

<template id="pnsk-structured-editor-facebook-post" noshadowroot>

    <div class="preview">

    </div>
    <span class="inputswrapper">
        <label>
            URL
            <input class="url" type="url">
        </label>
        <label>
            Type
            <select name="type" class="type">
                <option value="post" selected>Normal post</option>
                <option value="video">Video post</option>
            </select>
        </label>
    </span>

    <content></content>
</template>


<script>

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

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

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

        dataType: "facebook-post",

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

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

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

        _updatePreview: function () {

            // Paste fires before URL is updated.
            window.setTimeout(function () {
                var plc = this.qs(".preview");
                var url = this.qs(".url").value;
                var type = this.qs(".type").value;
                var postDiv = this.qs(".embed");

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

                if (postDiv != null) {
                    plc.removeChild(postDiv);
                }

                if (url == "") {
                    plc.style.display = "none";
                    this._currentPreviewURL = '';
                    this._currentPreviewType = 'post'
                    return;
                }

                postDiv = document.createElement("div");
                postDiv.dataset.width = "500";
                postDiv.dataset.href = url;

                if (type == "video") {
                    postDiv.classList.add("fb-video");
                } else {
                    postDiv.classList.add("fb-post");
                }
                postDiv.classList.add("embed");

                postDiv.dataset.href = url;
                plc.appendChild(postDiv);
                FB.XFBML.parse(plc, function () {
                    plc.style.display = "block";
                });

                this._currentPreviewURL = url;
                this._currentPreviewType = type;

            }.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>