jeudi 13 octobre 2016

need someone to review quality of code - design pattern

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