I was recently developing some canvas library and (mimicking canvas using div). The requirement was to develop something without using any third party library.
The sample app had a asset library and a div based canvas. Asset library can contain images and text that can be placed over canvas. Also images could be uploaded in the asset library.
I recently got the feedback that code wasn't structured properly. I used module pattern for the above task.
Guys I need some help to review the code and see what can be improved. Avoiding pasting long files here.
Here is the main JS file:
(function() {
let app = {};
const api = {
getImages: '/images',
uploadImages: '/uploads'
}
const selectors = {
getimageList: function() {
return document.querySelector('.image ul')
},
getuploadBtn: function() {
return document.querySelector('#submit')
},
getimageFileField: function() {
return document.querySelector('#imageUpload')
},
getaddImageToCanvasBtn: function() {
return document.querySelectorAll('.addImageToCanvas')
},
getCanvas: function() {
return document.querySelector('.canvas .block')
},
getAddTextBtn: function() {
return document.querySelector('#addText')
},
getTextField: function() {
return document.querySelector('#textField')
},
}
app.getImages = function() {
return ajax.get(api.getImages);
}
app.appendImagetoList = function(imageURL) {
selectors.getimageList().innerHTML += `<div class="image-item">
<img src=${imageURL} class="image-list" />
<button class="btn btn-warning btn-sm addImageToCanvas" data-imageURL=${imageURL}>Add to canvas</button>
</div>`;
}
app.renderImageList = function() {
return new Promise(function(resolve, reject) {
app.getImages().then(function(images) {
images.forEach(function(image) {
app.appendImagetoList(image);
})
resolve();
})
})
}
app.uploadFile = function(file) {
if (file.files.length) {
formData = new FormData();
formData.append('upload', file.files[0]);
return ajax.post(api.uploadImages, formData, [{
"Content-Type": "multipart/form-data"
}]);
}
}
app.generateDomElement = function(element, attributes) {
let domElement = document.createElement(element);
for (let key in attributes) {
if (attributes.hasOwnProperty(key)) {
domElement[key] = attributes[key];
}
}
return domElement;
}
app.placeElementOnCanvas = function(type, element) {
let canvas = selectors.getCanvas();
let removeBtn = app.generateDomElement('span', {
innerHTML: 'x',
className: 'removeCanvasElement'
});
let container = app.generateDomElement('div', {
className: type === 'image' ? 'canvasImageElementContainer' : 'canvasTextElementContainer'
});
let Element;
if (type === 'image') {
Element = app.generateDomElement('img', {
src: element,
className: 'canvasImageElement'
});
} else {
Element = app.generateDomElement('input', {
value: element,
className: 'canvasTextElement'
});
}
container.appendChild(Element);
container.appendChild(removeBtn);
canvas.appendChild(container);
removeBtn.addEventListener('click', function() {
container.parentNode.removeChild(container); //removes the element
})
}
//attaching event listeners
app.attachListeners = function() {
//file upload button
selectors.getuploadBtn().addEventListener('click', () => {
app.uploadFile(selectors.getimageFileField()).then(function(response) {
app.appendImagetoList(response.file);
})
})
//place image to canvas button
selectors.getaddImageToCanvasBtn().forEach(function(button) {
button.addEventListener('click', (evnt) => {
app.placeElementOnCanvas('image', evnt.target.dataset.imageurl);
})
})
//place text to canvas button
selectors.getAddTextBtn().addEventListener('click', (evnt) => {
let text = selectors.getTextField().value;
app.placeElementOnCanvas('text', text);
});
}
//initializing
app.renderImageList().then(function() {
app.attachListeners(); //attaching listeners
});
})();
Aucun commentaire:
Enregistrer un commentaire