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

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

        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }

    pnsk-structured-editor-vimeo .preview iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

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

    <content></content>
</template>


<script>

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

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

        properties: {
            oembedProxyUrl: String
        },

        dataType: "vimeo",

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

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

        _onChange: function () {
            window.setTimeout(function () {
                        this.qs(".videoID").value = this._getVideoID(this.qs(".url").value);
                        var event = new Event('pnsk-component-stateChanged');
                        this.dispatchEvent(event);
                        this._updatePreview();
                    }.bind(this),
                    40);
        },

        _getVideoID: function (url) {
            if (url == "") {
                return '';
            }
            var vimParse = document.createElement('a');
            vimParse.href = url;
            var tmp = vimParse.pathname.split("/");
            var videoID = tmp[tmp.length - 1];
            return videoID;
        },

        _updatePreview: function () {
            var url = this.qs(".url").value;
            var preview = this.qs(".preview");
            var iframe = preview.querySelector("iframe");
            if (iframe !== null) {
                preview.removeChild(iframe);
            }
            if (url == "") {
                preview.style.display = "none";
                return;
            }

            var videoID = this.qs(".videoID").value;

            iframe = document.createElement("iframe");
            //iframe.id = "ytplayer"
            iframe.width = "100%";
            iframe.frameBorder = 0;
            iframe.webkitallowfullscreen = true;
            iframe.mozallowfullscreen = true;
            iframe.allowfullscreen = true;

            iframe.src = "https://player.vimeo.com/video/" + videoID;
            preview.appendChild(iframe);
            preview.style.display = "block";
            //<iframe src="https://player.vimeo.com/video/153339497?title=0&byline=0&badge=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        },

        // Element Lifecycle
        created: 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>