Skip to content

Commit 97eaead

Browse files
frankpaganfrankpagan
committed
fix: dispatch end event on action element rather than document
1 parent 8e0cd84 commit 97eaead

File tree

1 file changed

+156
-148
lines changed

1 file changed

+156
-148
lines changed

‎src/index.js‎

Lines changed: 156 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,164 @@
1-
import croppie from 'croppie';
2-
import action from '@cocreate/actions';
1+
import croppie from "croppie";
2+
import Action from "@cocreate/actions";
33

44
const CocreateCroppie = {
5-
6-
debug: true,
7-
selector_element: '[editor="croppie"]',
8-
selector_croppie: '.croppie',
9-
croppieElements: [],
10-
croppieObjs: [],
11-
12-
displayErrors: function (msg) {
13-
if (this.debug)
14-
console.error(msg)
15-
},
16-
17-
init: function () {
18-
this.croppieElements = document.querySelectorAll(this.selector_element);
19-
for (let i = 0; i < this.croppieElements.length; i++) {
20-
this.initCroppie(this.croppieElements[i]);
21-
}
22-
},
23-
24-
initCroppie: function (el) {
25-
let cropieInit = (el.tagName != 'IMG') ? el.querySelector(this.selector_croppie) : el;
26-
let fileInput = el.querySelector("input[type='file']");
27-
let objCroppie = {}
28-
29-
if (!cropieInit) {
30-
this.displayErrors("No genero Croppie = " + cropieInit)
31-
return false
32-
}
33-
34-
let resizer = new croppie(cropieInit, {
35-
boundary: { width: 300, height: 300 },
36-
viewport: { width: 200, height: 200 },
37-
showZoomer: true,
38-
// enableResize: true,
39-
enableOrientation: true,
40-
enableZoom: true,
41-
mouseWheelZoom: 'ctrl'
42-
});
43-
44-
objCroppie = { 'croppie': el, 'resizer': resizer }
45-
46-
el.getValue = async () => {
47-
let obj = this.croppieObjs.find((obj) => obj.croppie === elCroppie);
48-
let base64 = (elCroppie.tagName == 'IMG') ? await this.getCropResult(obj.resizer) : (obj.fileInput.files.length) ? await this.getCropResult(obj.resizer) : null
49-
return base64
50-
}
51-
52-
if (fileInput) {
53-
objCroppie["fileInput"] = fileInput
54-
fileInput.addEventListener('change', function (e) {
55-
if (this.files.length == 0) return;
56-
let file = this.files[0];
57-
let reader = new FileReader();
58-
reader.onload = function (e) {
59-
resizer.bind({
60-
url: e.target.result
61-
})
62-
};
63-
reader.readAsDataURL(file);
64-
})
65-
}
66-
67-
this.croppieObjs.push(objCroppie);
68-
},
69-
70-
save: async function (elCroppie) {
71-
elCroppie.save()
72-
},
73-
74-
__croppieUploadImageAction: function (btn) {
75-
let croppie = btn.closest(this.selector_element);
76-
if (!croppie) {
77-
console.error("It needs to be inside an element " + this.selector_element + "")
78-
return false
79-
}
80-
let fileInput = croppie.querySelector("input[type='file']");
81-
if (!fileInput) {
82-
console.error("You need in input file inside " + this.selector_element + "")
83-
return false
84-
}
85-
fileInput.click();
86-
document.dispatchEvent(new CustomEvent('CroppieUploadImage', {
87-
detail: {}
88-
}))
89-
},
90-
91-
__croppieSaveAction: function (btn) {
92-
93-
let croppie = btn.closest(this.selector_element);
94-
let executeMultiple = false;
95-
if (!croppie) {
96-
//btn It is not within the parent tag
97-
executeMultiple = true
98-
let that = this;
99-
let form = btn.closest('form');
100-
let croppies = form.querySelectorAll(this.selector_element);
101-
croppies.forEach(function (croppie) {
102-
that.save(croppie);
103-
});
104-
}
105-
106-
if (executeMultiple == false)
107-
this.save(croppie)
108-
109-
document.dispatchEvent(new CustomEvent('CroppieSave', {
110-
detail: {}
111-
}))
112-
},
113-
114-
readFile: function (file = {}, method = 'readAsText') {
115-
const reader = new FileReader()
116-
return new Promise((resolve, reject) => {
117-
reader[method](file)
118-
reader.onload = () => {
119-
resolve(reader)
120-
}
121-
reader.onerror = (error) => reject(error)
122-
})
123-
},
124-
125-
getCropResult: function (resizer) {
126-
return new Promise((resolve, reject) => {
127-
resizer.result('base64').then(function (base64) {
128-
129-
resolve(base64);
130-
131-
}).onerror = (error) => reject(error);
132-
});
133-
}
134-
135-
}//end class CocreateCroppie
136-
137-
action.init({
138-
name: "CroppieUploadImage",
139-
endEvent: "CroppieUploadImage",
140-
callback: (data) => {
141-
CocreateCroppie.__croppieUploadImageAction(data.element);
142-
}
5+
debug: true,
6+
selector_element: '[editor="croppie"]',
7+
selector_croppie: ".croppie",
8+
croppieElements: [],
9+
croppieObjs: [],
10+
11+
displayErrors: function (msg) {
12+
if (this.debug) console.error(msg);
13+
},
14+
15+
init: function () {
16+
this.croppieElements = document.querySelectorAll(this.selector_element);
17+
for (let i = 0; i < this.croppieElements.length; i++) {
18+
this.initCroppie(this.croppieElements[i]);
19+
}
20+
},
21+
22+
initCroppie: function (el) {
23+
let cropieInit =
24+
el.tagName != "IMG" ? el.querySelector(this.selector_croppie) : el;
25+
let fileInput = el.querySelector("input[type='file']");
26+
let objCroppie = {};
27+
28+
if (!cropieInit) {
29+
this.displayErrors("No genero Croppie = " + cropieInit);
30+
return false;
31+
}
32+
33+
let resizer = new croppie(cropieInit, {
34+
boundary: { width: 300, height: 300 },
35+
viewport: { width: 200, height: 200 },
36+
showZoomer: true,
37+
// enableResize: true,
38+
enableOrientation: true,
39+
enableZoom: true,
40+
mouseWheelZoom: "ctrl"
41+
});
42+
43+
objCroppie = { croppie: el, resizer: resizer };
44+
45+
el.getValue = async () => {
46+
let obj = this.croppieObjs.find((obj) => obj.croppie === elCroppie);
47+
let base64 =
48+
elCroppie.tagName == "IMG"
49+
? await this.getCropResult(obj.resizer)
50+
: obj.fileInput.files.length
51+
? await this.getCropResult(obj.resizer)
52+
: null;
53+
return base64;
54+
};
55+
56+
if (fileInput) {
57+
objCroppie["fileInput"] = fileInput;
58+
fileInput.addEventListener("change", function (e) {
59+
if (this.files.length == 0) return;
60+
let file = this.files[0];
61+
let reader = new FileReader();
62+
reader.onload = function (e) {
63+
resizer.bind({
64+
url: e.target.result
65+
});
66+
};
67+
reader.readAsDataURL(file);
68+
});
69+
}
70+
71+
this.croppieObjs.push(objCroppie);
72+
},
73+
74+
save: async function (elCroppie) {
75+
elCroppie.save();
76+
},
77+
78+
__croppieUploadImageAction: function (action) {
79+
let btn = action.element;
80+
let croppie = btn.closest(this.selector_element);
81+
if (!croppie) {
82+
console.error(
83+
"It needs to be inside an element " + this.selector_element + ""
84+
);
85+
return false;
86+
}
87+
let fileInput = croppie.querySelector("input[type='file']");
88+
if (!fileInput) {
89+
console.error(
90+
"You need in input file inside " + this.selector_element + ""
91+
);
92+
return false;
93+
}
94+
fileInput.click();
95+
action.element.dispatchEvent(
96+
new CustomEvent("CroppieUploadImage", {
97+
detail: {}
98+
})
99+
);
100+
},
101+
102+
__croppieSaveAction: function (action) {
103+
let btn = action.element;
104+
let croppie = btn.closest(this.selector_element);
105+
let executeMultiple = false;
106+
if (!croppie) {
107+
//btn It is not within the parent tag
108+
executeMultiple = true;
109+
let that = this;
110+
let form = btn.closest("form");
111+
let croppies = form.querySelectorAll(this.selector_element);
112+
croppies.forEach(function (croppie) {
113+
that.save(croppie);
114+
});
115+
}
116+
117+
if (executeMultiple == false) this.save(croppie);
118+
119+
action.element.dispatchEvent(
120+
new CustomEvent("CroppieSave", {
121+
detail: {}
122+
})
123+
);
124+
},
125+
126+
readFile: function (file = {}, method = "readAsText") {
127+
const reader = new FileReader();
128+
return new Promise((resolve, reject) => {
129+
reader[method](file);
130+
reader.onload = () => {
131+
resolve(reader);
132+
};
133+
reader.onerror = (error) => reject(error);
134+
});
135+
},
136+
137+
getCropResult: function (resizer) {
138+
return new Promise((resolve, reject) => {
139+
resizer.result("base64").then(function (base64) {
140+
resolve(base64);
141+
}).onerror = (error) => reject(error);
142+
});
143+
}
144+
}; //end class CocreateCroppie
145+
146+
Action.init({
147+
name: "CroppieUploadImage",
148+
endEvent: "CroppieUploadImage",
149+
callback: (action) => {
150+
CocreateCroppie.__croppieUploadImageAction(action);
151+
}
143152
});
144153

145-
146-
action.init({
147-
name: "CroppieSave",
148-
endEvent: "CroppieSave",
149-
callback: (data) => {
150-
CocreateCroppie.__croppieSaveAction(data.element);
151-
},
154+
Action.init({
155+
name: "CroppieSave",
156+
endEvent: "CroppieSave",
157+
callback: (action) => {
158+
CocreateCroppie.__croppieSaveAction(action);
159+
}
152160
});
153161

154162
CocreateCroppie.init();
155163

156-
export default CocreateCroppie;
164+
export default CocreateCroppie;

0 commit comments

Comments
 (0)