metamaps--metamaps/frontend/src/Metamaps/Account.js

/* uses window.Metamaps.Erb */

const Account = {
  listenersInitialized: false,
  init: function () {
    var self = Metamaps.Account
  },
  initListeners: function () {
    var self = Metamaps.Account

    $('#user_image').change(self.showImagePreview)
    self.listenersInitialized = true
  },
  toggleChangePicture: function () {
    var self = Account

    $('.userImageMenu').toggle()
    if (!self.listenersInitialized) self.initListeners()
  },
  openChangePicture: function () {
    var self = Account

    $('.userImageMenu').show()
    if (!self.listenersInitialized) self.initListeners()
  },
  closeChangePicture: function () {
    var self = Account

    $('.userImageMenu').hide()
  },
  showLoading: function () {
    var self = Account

    var loader = new CanvasLoader('accountPageLoading')
    loader.setColor('#4FC059'); // default is '#000000'
    loader.setDiameter(28) // default is 40
    loader.setDensity(41) // default is 40
    loader.setRange(0.9); // default is 1.3
    loader.show() // Hidden by default
    $('#accountPageLoading').show()
  },
  showImagePreview: function () {
    var self = Account

    var file = $('#user_image')[0].files[0]

    var reader = new FileReader()

    reader.onload = function (e) {
      var $canvas = $('<canvas>').attr({
        width: 84,
        height: 84
      })
      var context = $canvas[0].getContext('2d')
      var imageObj = new Image()

      imageObj.onload = function () {
        $('.userImageDiv canvas').remove()
        $('.userImageDiv img').hide()

        var imgWidth = imageObj.width
        var imgHeight = imageObj.height

        var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth
        // draw cropped image
        var nonZero = Math.abs(imgHeight - imgWidth) / 2
        var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero
        var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero
        var sourceWidth = dimensionToMatch
        var sourceHeight = dimensionToMatch
        var destX = 0
        var destY = 0
        var destWidth = 84
        var destHeight = 84

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
        $('.userImageDiv').prepend($canvas)
      }
      imageObj.src = reader.result
    }

    if (file) {
      reader.readAsDataURL(file)
      $('.userImageMenu').hide()
      $('#remove_image').val('0')
    }
  },
  removePicture: function () {
    var self = Account

    $('.userImageDiv canvas').remove()
    $('.userImageDiv img').attr('src', window.Metamaps.Erb['user.png']).show()
    $('.userImageMenu').hide()

    var input = $('#user_image')
    input.replaceWith(input.val('').clone(true))
    $('#remove_image').val('1')
  },
  changeName: function () {
    $('.accountName').hide()
    $('.changeName').show()
  },
  showPass: function () {
    $('.toHide').show()
    $('.changePass').hide()
  },
  hidePass: function () {
    $('.toHide').hide()
    $('.changePass').show()

    $('#current_password').val('')
    $('#user_password').val('')
    $('#user_password_confirmation').val('')
  }
}

export default Account