summaryrefslogtreecommitdiff
path: root/assets/js/src/Screenshot.js
blob: e7430dd7b5bb5d4ad401b266d125f866ef1c45ea (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
function Screenshot() {
    this.pasteCatcher = null;
}

Screenshot.prototype.execute = function() {
    this.initialize();
};

// Setup event listener and workarounds
Screenshot.prototype.initialize = function() {
    this.destroy();

    if (! window.Clipboard) {

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

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

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

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

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

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

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

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

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

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

// Paste event callback
Screenshot.prototype.pasteHandler = function(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();
                    var self = this;
                    reader.onload = function(event) {
                        self.createImage(event.target.result);
                    };

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

        // Handle Firefox
        setTimeout(this.checkInput.bind(this), 100);
    }
};

// Parse the input in the paste catcher element
Screenshot.prototype.checkInput = function() {
    var child = this.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") {
            this.createImage(child.src);
        }
    }

    this.pasteCatcher.innerHTML = "";
};

// Creates a new image from a given source
Screenshot.prototype.createImage = function(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);

    this.destroy();
    this.initialize();
};