Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adding classes to pastebox.js #2641

Merged
merged 3 commits into from
Dec 5, 2020
Merged

adding classes to pastebox.js #2641

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0246733
adding classes to pastebox.js
kushal-khare-official Nov 28, 2020
899fa42
Merge remote-tracking branch 'upstream/master' into editing-pastebox-js
kushal-khare-official Dec 5, 2020
8c77a28
adding classes to pastebox.js
kushal-khare-official Dec 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 44 additions & 42 deletions js/pastebox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,51 +9,53 @@
// License along with this library; if not, write to the Free Software
// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA

const PASTEBOX = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="280" height="55"> <rect width="280" height="55" x="0" y="-3.5762787e-06" style="fill:#f0f0f0;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <g transform="translate(225,0)" style="fill:#000000;display:block"> <path d="m 27.557,5.053 c -12.43,0 -22.5,10.076 -22.5,22.497 0,12.432 10.07,22.503 22.5,22.503 12.431,0 22.5,-10.071 22.5,-22.503 0,-12.421 -10.07,-22.497 -22.5,-22.497 z m 10.199,28.159 c 1.254,1.256 1.257,3.291 0,4.545 -0.628,0.629 -1.451,0.943 -2.274,0.943 -0.822,0 -1.644,-0.314 -2.27,-0.94 l -5.76,-5.761 -5.76,5.761 c -0.627,0.626 -1.449,0.94 -2.271,0.94 -0.823,0 -1.647,-0.314 -2.275,-0.943 -1.254,-1.254 -1.254,-3.289 0.004,-4.545 l 5.758,-5.758 -5.758,-5.758 c -1.258,-1.254 -1.258,-3.292 -0.004,-4.546 1.255,-1.254 3.292,-1.259 4.546,0 l 5.76,5.759 5.76,-5.759 c 1.252,-1.259 3.288,-1.254 4.544,0 1.257,1.254 1.254,3.292 0,4.546 l -5.758,5.758 5.758,5.758 z" style="fill:#000000;display:inline" /> </g></svg>';

// A pop up for pasting from the browser clipboard
function PasteBox() {
let PASTEBOX =
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="280" height="55"> <rect width="280" height="55" x="0" y="-3.5762787e-06" style="fill:#f0f0f0;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <g transform="translate(225,0)" style="fill:#000000;display:block"> <path d="m 27.557,5.053 c -12.43,0 -22.5,10.076 -22.5,22.497 0,12.432 10.07,22.503 22.5,22.503 12.431,0 22.5,-10.071 22.5,-22.503 0,-12.421 -10.07,-22.497 -22.5,-22.497 z m 10.199,28.159 c 1.254,1.256 1.257,3.291 0,4.545 -0.628,0.629 -1.451,0.943 -2.274,0.943 -0.822,0 -1.644,-0.314 -2.27,-0.94 l -5.76,-5.761 -5.76,5.761 c -0.627,0.626 -1.449,0.94 -2.271,0.94 -0.823,0 -1.647,-0.314 -2.275,-0.943 -1.254,-1.254 -1.254,-3.289 0.004,-4.545 l 5.758,-5.758 -5.758,-5.758 c -1.258,-1.254 -1.258,-3.292 -0.004,-4.546 1.255,-1.254 3.292,-1.259 4.546,0 l 5.76,5.759 5.76,-5.759 c 1.252,-1.259 3.288,-1.254 4.544,0 1.257,1.254 1.254,3.292 0,4.546 l -5.758,5.758 5.758,5.758 z" style="fill:#000000;display:inline" /> </g></svg>';

this._canvas = null;
this._stage = null;
this._refreshCanvas = null;
this._paste = null;
this._container = null;
this.save = null;
this.close = null;
this._scale = 1;

this.setCanvas = function(canvas) {
class PasteBox {
constructor() {

this._canvas = null;
this._stage = null;
this._refreshCanvas = null;
this._paste = null;
this._container = null;
this.save = null;
this.close = null;
this._scale = 1;
}

setCanvas(canvas) {
this._canvas = canvas;
return this;
};
}

this.setStage = function(stage) {
setStage(stage) {
this._stage = stage;
return this;
};
}

this.setPaste = function(paste) {
setPaste(paste) {
this._paste = paste;
return this;
};
}

this.setRefreshCanvas = function(refreshCanvas) {
setRefreshCanvas(refreshCanvas) {
this._refreshCanvas = refreshCanvas;
return this;
};
}

this.hide = function() {
hide() {
if (this._container != null) {
this._container.visible = false;
this._refreshCanvas();
// paste.visible = false;
docById("paste").value = "";
docById("paste").value = "";
docById("paste").style.visibility = "hidden";
}
};
}

this.createBox = function(scale, x, y) {
createBox(scale, x, y) {
if (this._container == null) {
this._scale = scale;

Expand All @@ -62,7 +64,7 @@ function PasteBox() {
this._container.x = x;
this._container.y = y;

function __processBackground(that, name, bitmap, extras) {
const __processBackground = (that, name, bitmap, extras) => {
that._container.addChild(bitmap);
that._loadClearContainerHandler();
that._container.visible = true;
Expand All @@ -71,20 +73,20 @@ function PasteBox() {

this._makeBoxBitmap(PASTEBOX, "box", __processBackground, null);
meganindya marked this conversation as resolved.
Show resolved Hide resolved
}
};
}

this.show = function() {
show() {
this._container.visible = true;
this._refreshCanvas();
// this._paste.visibile = true;
docById("paste").style.visibility = "visible";
};
}

this.getPos = function() {
getPos() {
return [this._container.x, this._container.y];
};
}

this._loadClearContainerHandler = function() {
_loadClearContainerHandler() {
let hitArea = new createjs.Shape();
this.bounds = this._container.getBounds();
hitArea.graphics
Expand All @@ -102,7 +104,7 @@ function PasteBox() {
let locked = false;
let that = this;

this._container.on("click", function(event) {
this._container.on("click", (event) => {
// We need a lock to "debouce" the click.
if (locked) {
console.debug("debouncing click");
Expand All @@ -111,31 +113,31 @@ function PasteBox() {

locked = true;

setTimeout(function() {
setTimeout(() => {
locked = false;
}, 500);

let x = event.stageX / that._scale - that._container.x;
let y = event.stageY / that._scale - that._container.y;
let x = event.stageX / this._scale - this._container.x;
let y = event.stageY / this._scale - this._container.y;
if (x > 125 && y < 55) {
that.hide();
this.hide();
}
});
};
}

this._makeBoxBitmap = function(data, name, callback, extras) {
_makeBoxBitmap(data, name, callback, extras) {
// Async creation of bitmap from SVG data
// Works with Chrome, Safari, Firefox (untested on IE)
let img = new Image();
let that = this;

img.onload = function() {
img.onload = () => {
let bitmap = new createjs.Bitmap(img);
callback(that, name, bitmap, extras);
callback(this, name, bitmap, extras);
};

img.src =
"data:image/svg+xml;base64," +
window.btoa(unescape(encodeURIComponent(data)));
};
}
}