summaryrefslogtreecommitdiff
path: root/assets/js/src/screenshot.js
blob: dce49c77c72e2c4dbd8e75c69c741f23f7c27c5d (plain)
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
Kanboard.Screenshot = (function() {

    var pasteCatcher = null;

    // Setup event listener and workarounds
    function init()
    {
        destroy();

        if (! window.Clipboard) {

            // Create a contenteditable element
            pasteCatcher = document.createElement("div");
            pasteCatcher.id = "screenshot-pastezone";
            pasteCatcher.contentEditable = "true";

            // Insert the content editable at the top to avoid scrolling down in the board view
            pasteCatcher.style.opacity = 0;
            pasteCatcher.style.position = "fixed";
            pasteCatcher.style.top = 0;
            pasteCatcher.style.right = 0;
            pasteCatcher.style.width = 0;

            document.body.insertBefore(pasteCatcher, document.body.firstChild);

            // Set focus on the contenteditable element
            pasteCatcher.focus();

            // Set the focus when clicked anywhere in the document
            document.addEventListener("click", setFocus);

            // Set the focus when clicked in screenshot dropzone (popover)
            document.getElementById("screenshot-zone").addEventListener("click", setFocus);
        }

        window.addEventListener("paste", pasteHandler);
    }

    // Set focus on the contentEditable element
    function setFocus()
    {
        if (pasteCatcher !== null) {
            pasteCatcher.focus();
        }
    }

    // Destroy contenteditable
    function destroy()
    {
        if (pasteCatcher != null) {
            document.body.removeChild(pasteCatcher);
        }
        else if (document.getElementById("screenshot-pastezone")) {
            document.body.removeChild(document.getElementById("screenshot-pastezone"));
        }

        document.removeEventListener("click", setFocus);
        pasteCatcher = null;
    }

    // Paste event callback
    function pasteHandler(e)
    {
        // Firefox doesn't have the property e.clipboardData.items (only Chrome)
        if (e.clipboardData && e.clipboardData.items) {

            var items = e.clipboardData.items;

            if (items) {

                for (var i = 0; i < items.length; i++) {

                    // Find an image in pasted elements
                    if (items[i].type.indexOf("image") !== -1) {

                        var blob = items[i].getAsFile();

                        // Get the image as base64 data
                        var reader = new FileReader();
                        reader.onload = function(event) {
                            createImage(event.target.result);
                        };

                        reader.readAsDataURL(blob);
                    }
                }
            }
        }
        else {

            // Handle Firefox
            setTimeout(checkInput, 100);
        }
    }

    // Parse the input in the paste catcher element
    function checkInput()
    {
        var child = pasteCatcher.childNodes[0];

        if (child) {
            // If the user pastes an image, the src attribute
            // will represent the image as a base64 encoded string.
            if (child.tagName === "IMG") {
                createImage(child.src);
            }
        }

        pasteCatcher.innerHTML = "";
    }

    // Creates a new image from a given source
    function createImage(blob)
    {
        var pastedImage = new Image();
        pastedImage.src = blob;

        // Send the image content to the form variable
        pastedImage.onload = function() {
            var sourceSplit = blob.split("base64,");
            var sourceString = sourceSplit[1];
            $("input[name=screenshot]").val(sourceString);
        };

        var zone = document.getElementById("screenshot-zone");
        zone.innerHTML = "";
        zone.className = "screenshot-pasted";
        zone.appendChild(pastedImage);

        destroy();
        init();
    }

    jQuery(document).ready(function() {

        if (Kanboard.Exists("screenshot-zone")) {
            init();
        }
    });

    return {
        Init: init,
        Destroy: destroy
    };
})();