Adds the guestbook functionality.

[rbdr/r.bdr.sh] / jekyll / js / unlimited_pizza.js

'use strict';

Class("UnlimitedPizza").inherits(Widget)({

  /**
   * Gets instance, creates it if not available.
   */
  instance : function getInstance(config) {
    if (!this._mainInstance) {
      this._mainInstance = new this(config);
    }
    return this._mainInstance;
  },

  prototype : {
    _fb : null,
    _loaded : false,

    init : function (config) {
      Widget.prototype.init.call(this, config)

      this._fb = new Firebase("https://guestbook-nsovocal.firebaseio.com");

      this._bindInternalEvents();
    },

    _bindInternalEvents : function bindInternalEvents() {
      this.bind('activate', this._onActivate.bind(this));
    },

    _onActivate : function _activate() {
      // If this is the first time activating it... then load
      if (!this._loaded) {
        this._load();
      }
    },

    /*
     * Loads everything.
     */
    _load : function _load() {

      // Melty cheese is our header image widget.
      this._loadMeltyCheese();

      // Pepperoni is our recording widget.
      this._loadPepperoni();

      // Simple guestbook functionality
      this._loadGuestbook();
      this._loadPosts();
    },

    _loadMeltyCheese : function () {
      this.element.find('.post-image').each(function (i, headerElement) {

        // Create and activate
        this.appendChild(new UnlimitedPizza.MeltyCheese({
          element : $(headerElement),
          name : 'header-' + i
        }));
        this['header-' + i].activate();
      }.bind(this));
    },

    _loadPepperoni : function () {
      this.element.find('.pepperoni-widget').each(function (i, widgetElement) {

        // Create and activate
        this.appendChild(new UnlimitedPizza.Pepperoni({
          element : $(widgetElement),
          name : 'recorder-' + i
        }));
        this['recorder-' + i].activate();
      }.bind(this));
    },

    _loadGuestbook : function () {
      var form = this.element.find('.guestbook-form form');
      form.on('submit', function submitPost(ev) {
        ev.preventDefault();

        var formArray = form.serializeArray();
        var recorder = this['recorder-0'];

        recorder.finalize(function (buffer) {
          var fb, arrayBuffer, fileReader;

          if (buffer.size <= 44) {
            alert("You need to record something.");
            return;
          }
          if (formArray[0].value.length === 0) {
            alert("You need a name.");
            return;
          }

          fb = this._fb;

          fileReader = new FileReader();
          fileReader.onload = function() {
            var binary, bytes, length, i;

            binary = '';
            bytes = new Uint8Array( this.result );
            length = bytes.byteLength;
            for (i = 0; i < length; i++) {
              binary += String.fromCharCode( bytes[ i ] );
            }

            fb.push({
              buffer: btoa(binary),
              name: formArray[0].value
            });
            recorder.clear();
          };
          fileReader.readAsArrayBuffer(buffer);
        }.bind(this));
        return false;
      }.bind(this))
    },

    _loadPosts : function () {
      var feed = this.element.find('.guestbook-feed');

      console.log("Loadin", feed.length);
      if (feed.length > 0) {
        this._fb.on('value', function (data) {
          var posts, property, post;

          // Clear feed
          feed.empty();
          posts = data.val();

          for (property in posts) {
            if (posts.hasOwnProperty(property)) {
              post = posts[property];

              feed.append($('<li>\
                    <div class="author">FROM: ' + post.name + '</div>\
                    <div class="content">\
                    <audio src="data:audio/wav;base64,' + post.buffer + '" controls></audio>\
                    </div></li>'))
            }
          }
        });
      }
    }
  }
});