foam-framework/js/foam/ui/md/ImagePickerView.js

MVC metaprogramming framework

/**
 * @license
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

CLASS({
  package: 'foam.ui.md',
  name: 'ImagePickerView',
  extends: 'foam.ui.SimpleView',
  traits: ['foam.ui.md.MDStyleTrait'],

  properties: [
    [ 'tagName', 'image-picker' ],
    {
      name: 'data',
    },
    {
      name: '$input',
      getter: function() { return this.X.$(this.inputId); },
    },
    {
      name: 'inputId',
      getter: function() { return this.id + "-input"; },
    },
    ['hintText', 'Click to select an image or Drag & drop an image file here'],
    ['mode', 'read-write'],
  ],

  methods: [
    function loadFile(files) { /* only loads the first file specified in arg */
      if ( files.length ) {
        var fr = new FileReader();
        fr.onload = this.setDataBuffer;
        fr.readAsDataURL(files[0]);
      }
    }
  ],

  listeners: [
    {
      name: 'setDataBuffer',
      code: function(e) {
        var buf = e.target.result; // an data url string from readAsDataURL
        this.data = buf;
      }
    },
    {
      name: 'inputClick',
      code: function(e) {
        // launch file browser from hidden input element
        this.$input && this.$input.click();

        e.preventDefault();
      }
    },
    {
      name: 'squelchEvent',
      code: function(e) {
        e.stopPropagation();
        e.preventDefault();
      },
    },
    {
      name: 'inputDrop',
      code: function(e) {
        e.stopPropagation();
        e.preventDefault();

        this.loadFile(e.dataTransfer.files);
      },
    },
    {
      name: 'inputFileChange',
      code: function() {
        this.loadFile(this.$input.files);
      }
    },
  ],

  templates: [
    function CSS() {/*
      image-picker {
        position: relative;
        min-height: 100px;
        min-width: 200px;
        border: 2px dashed;
        padding: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      image-picker .content {
        padding: 8px;
        margin: 8px;
        flex-grow: 0;
        background: rgba(0,0,0,0.5);
        color: white;
        z-index: 1;
      }

      image-picker .image-picker-preview {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
      }

    */},
    function toHTML() {/*
      <% if ( this.mode == 'read-only' ) { %>
        $$data{ model_: 'foam.ui.ImageView' }
      <% } else { %>
        <image-picker <%= this.cssClassAttr() %> id="%%id">
          $$data{ model_: 'foam.ui.ImageView', extraClassName: 'image-picker-preview' }
          <div class="content">
            $$hintText{ mode: 'read-only', floatingLabel: false }
          </div>
          <input type="file" id="%%inputId" accept="image/*" style="display:none">
        </image-picker>
        <%
        this.on('change', this.inputFileChange, this.inputId);
        this.on('click', this.inputClick, this.id);

        this.on("dragenter", this.squelchEvent, this.id);
        this.on("dragover", this.squelchEvent, this.id);
        this.on("drop", this.inputDrop, this.id);
        this.setMDClasses();
      }
      %>
    */}
  ]
});