pnsk-structured-editor-soundcloud.html

<link rel="import" href="../polymer/polymer-micro.html">

<style>
    pnsk-structured-editor-soundcloud .preview {
        position: relative;
    }

</style>

<template id="pnsk-structured-editor-soundcloud" noshadowroot>
    <div class="preview"></div>
        <span class="inputswrapper">
            <input class="trackID" type="hidden">
            <input class="color" type="hidden">
            <input class="visual" type="hidden">
            <input class="height" type="hidden">
            <label>
                Embed code from SoundCloud
                <input class="embed" type="text">
            </label>
        </span>

    <content></content>
</template>


<script>

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

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

        properties: {
            oembedProxyUrl: String
        },

        dataType: "soundcloud",

        getState: function () {
            return {
                'trackID': this.qs(".trackID").value,
                'visual': this.qs(".visual").value,
                'height': this.qs(".height").value,
                'color': this.qs(".color").value
            };
        },

        setState: function (state) {
            this.qs(".trackID").value = state.trackID;
            this.qs(".visual").value = state.visual;
            this.qs(".height").value = state.height;
            this.qs(".color").value = state.color;
            this._updatePreview();
        },

        _onChange: function () {
            window.setTimeout(function () {
                        var params = this._getParams(this.qs(".embed").value);
                        this.qs(".trackID").value = params['trackID'];
                        this.qs(".visual").value = params['visual'];
                        this.qs(".height").value = params['height'];
                        this.qs(".color").value = params['color'];
                        var event = new Event('pnsk-component-stateChanged');
                        this.dispatchEvent(event);
                        this._updatePreview();
                    }.bind(this),
                    40);
        },

        _getParams: function (embedCode) {
            var ret = {};
            var tmp;
            tmp = embedCode.match(/tracks\/([0-9]+)/i);
            ret['trackID'] = ( tmp != null ) ? tmp[1] : '';
            tmp = embedCode.match(/visual=(true|false)/i);
            ret['visual'] = ( tmp != null ) ? tmp[1] : '';
            tmp = embedCode.match(/height="([a-f0-9]+)"/i);
            ret['height'] = ( tmp != null ) ? tmp[1] : '';
            tmp = embedCode.match(/color=([a-f0-9]+)/i);
            ret['color'] = ( tmp != null ) ? tmp[1] : '';
            return ret;
        },

        _updatePreview: function () {
            var trackID = this.qs(".trackID").value;
            var visual = this.qs(".visual").value;
            var height = this.qs(".height").value;
            var color = this.qs(".color").value;

            var preview = this.qs(".preview");
            var iframe = preview.querySelector("iframe");
            if (iframe !== null) {
                preview.removeChild(iframe);
            }
            if (trackID == "") {
                preview.style.display = "none";
                return;
            }

            var visualStr = '';
            if (visual == "true") {
                visualStr = "&amp;visual=" + visual;
            }
            var colorStr = '';
            if (color != "") {
                colorStr = "&amp;color=" + color;
            }

            iframe = document.createElement("iframe");

            iframe.width = "100%";
            iframe.height = height;

            iframe.frameBorder = 0;
            iframe.webkitallowfullscreen = true;
            iframe.mozallowfullscreen = true;
            iframe.allowfullscreen = true;

            iframe.src = "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/" + trackID + visualStr + colorStr;
            preview.appendChild(iframe);
            preview.style.display = "block";
            //<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/257722300&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
            //<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/257722300&amp;visual=true"></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>