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

<template id="pnsk-structured-editor-blockquote" noshadowroot>
        <span class="inputswrapper">
            <label>
                Quote
                <pnsk-structured-editor-prosemirror class="quote"></pnsk-structured-editor-prosemirror>
            </label>
            <label>
                Cite
                <input class="cite" type="text">
            </label>
            <label>
                Format preset
                <select class="format">

                </select>
            </label>
        </span>
    <content></content>
</template>


<script>
    Polymer({
        is: 'pnsk-structured-editor-blockquote',
        behaviors: [MinimalComponent],

        properties: {
            formats: Object,
            _format: Object
        },

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

        dataType: "blockquote",

        getState: function () {
            return {
                quote: this.qs(".quote").getState().markdown,
                cite: this.qs(".cite").value,
                // This will be called before the select is ready in which case we need to fetch from the variable
                format: this.qs(".format").value == "" ? this._format : this.qs(".format").value
            }
        },

        setState: function (state) {
            this.qs(".cite").value = state.cite;
            this.qs(".quote").setState({'markdown': state.quote});
            // Need to set both because this is called before the
            // select is ready (in which case the select building code
            // will populate it) and after, in which case it needs
            // to be set here
            this.qs(".format").value = state.format;
            this._format = state.format;
        },

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

        // Element Lifecycle

        created: function () {
            this.root.querySelector(".inputswrapper").addEventListener("change", this._onChange.bind(this));
            this.root.querySelector(".inputswrapper").addEventListener("keyup", this._onChange.bind(this));
            this.root.querySelector(".inputswrapper").addEventListener("paste", this._onChange.bind(this));
            this.root.querySelector(".inputswrapper").addEventListener("cut", this._onChange.bind(this));

        },

        /**
         * This function has an issue which is that if it is 'attached' then it's
         * called too late for getState() and if it's 'ready' then this._format
         * hasn't yet been set in setState()
         */
        attached: function () {
            if (typeof this.formats === "object") {
                for (var key in this.formats) {
                    var op = document.createElement("option");
                    op.text = this.formats[key];
                    op.value = key;
                    this.qs(".format").add(op);
                }
                this.qs(".format").value = this._format;
            }
        }

    });

</script>