firebase-template/index.js

var Delegate = require('dom-delegate');
var Sequence = require('./lib/sequence');
var Firebase = require('firebase');

var insertCss = require('insert-css');
var prop = require('propper');
var store = require('store');
var uniqid = require('uniqid');
var extractFbPath = require('./lib/extract-fb-path');
var queryAll = require('./lib/query-all');
var mapIn = require('map-in');

function FirebaseTemplate(options) {
  options = options || {};

  var self = this;

  this.user = {
    name: options.name || 'Guest'
  };

  var root = this.root = options.el || document.querySelector('body');

  var trackMice = options.trackMice || false;

  this.userId = store.get('userId');
  if (!this.userId) {
    this.userId = uniqid();
    store.set('userId', this.userId);
  }

  var fbRoots = this.fbRoots = {};

  queryAll('[data-path^=\'https://\']', document.querySelector('html')).map(function(fbRoot) {
    var rootPath = fbRoot.getAttribute('data-path');

    var firebaseRef = new Firebase(rootPath);

    var usersRef = firebaseRef.child('users');

    var authToken = fbRoot.getAttribute('data-jwt');
    if (authToken) {
      firebaseRef.authWithCustomToken(authToken, function(err, authData) {
        if (err) {
          throw new Error('Auth Failed ' + err);
        }

        console.log('Login Succeeded!', authData);
      });
    } else {
      console.warn('WARNING: data-jwt not given, so assuming anonymous access');
    }

    fbRoot.removeAttribute('data-jwt');

    fbRoots[rootPath] = {
      dataRef: firebaseRef.child('data'),
      uploadsRef: firebaseRef.child('uploads'),
      usersRef: usersRef,
      userRef: usersRef.child(self.userId),
      oldData: undefined,
      newData: store.get('data:' + rootPath) || {},
      start: function() {
        var self = this;

        self.oldData = undefined;
        self.newData = store.get('data:' + rootPath) || {};

        self.dataRef.on('value', function(snapshot) {
          self.newData = snapshot.val();
          store.set('data:' + rootPath, self.newData);

          updateDom();
        });

        self.usersRef.on('value', function(snapshot) {
          self.users = snapshot.val();
          updateDom();
        });
      },
      stop: function() {
        this.dataRef.off('value');
        this.oldData = null;
        this.newData = {};
      }
    };
  });

  this.lookupFbRoot = function(fbPath) {
    var root = fbPath.root || extractFbPath.parse(fbPath).root;
    return fbRoots[root];
  };

  var updaters = this.updaters = new Sequence(require('./lib/dom-updaters/index'));
  var listeners = this.listeners = new Sequence(require('./lib/dom-listeners/index'));

  var transform = options.transform || identity;

  insertCss('img[data-path] { cursor: pointer; } .avatar .name { background-color: white; color: black; border: 1px solid #999; } .avatar { position: absolute; background-repeat: no-repeat; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAUdEVYdENyZWF0aW9uIFRpbWUAOC83LzEwvsEqxgAAAe9JREFUOI2N081qE1EUB/Bz7teY3GEGRwYSELsQbBkLboTZFGaW4tZko4us8hozD+ADaBKMD2AK2eQBwmySbLIxCW6sIKEgQqMQQ9o6x02nTNU0OXC5m/O7By7/A57nca21JiKaz+c1y7IKnufxKIoQbivHcQwpZZmuajgcVkzTLG7FlmUVOOcPiYh83yciSnfCpmkWOef7REQAsDu+ggcZ3Bn/D+6EN8FNOI5j3ApvxdvgJrwTzOPxePzCtu07eZjmm/LNfx/DMO7+A33fp9ls9jHDrVbrS6/X+4CIrxDxGWPsiVLq3g2YTeh2u8fNZvMkP5UxdsQ5P5BSlrXWOp+clIhSRHyJiNXsIQCgdrv9aTKZvFZKudkSMMYYAcAFAABj7DkifkbEr0mSvK/X6ycAAI1G45Hruk+JCLXWl9VqNc22o8QYe8w535dSloUQDxhjR/mpRJQKIe47jmPEcYysVCpdGobxU0p5qpQ6LRaLZ0KIH4j4PUmSd4PBgIiIRqPRWwC4jpyoVCppp9NZL5fLc601ua5L0+k0XSwWZ2EYviGiYwAgRPwmhFgZhpHeCHsW4CiKMAgCZllWQSnlCiH2hBB72ccEQcAAAHgG+/3+9V2r1WC9Xv9erVbniPhLKbW0bXt1eHh4EYYh9ft9+ANDWHBBjehDcAAAAABJRU5ErkJggg=="); padding-top: 20px; padding-left: 14px;}');

  var delegate = new Delegate(root);

  this.set = function(path, data) {
    self.dataRef.child(path).set(data);
  };

  this.setUserStat = function(name, value) {
    this.user[name] = value;
    this.user.updated = Date.now();
    mapIn(fbRoots, function(fbRoot) {
      fbRoot.userRef.set(self.user);
    });
  };

  this.start = function() {
    mapIn(fbRoots, function(fbRoot) {
      fbRoot.start();
    });

    updateDom();

    registerDomListeners();
  };

  this.stop = function() {
    delegate.off();

    mapIn(fbRoots, function(fbRoot) {
      fbRoot.stop();
    });
  };

  // exposed for unit testing
  this._updateDom = function(after, before) {
    self.newData = after;
    self.oldData = before || null;
    updateDom();
  };

  function updateDom() {
    mapIn(fbRoots, function(fbRoot) {
      fbRoot.newData = transform(fbRoot.newData) || fbRoot.newData;
    });

    queryAll('input[type=date][data-path]', self.root).forEach(function(e) {
      e.setAttribute('data-format', 'date');
      e.type = 'text';
    });

    updaters.each(function(updater) {
      if (updater.changed === true) {
        applyDomChanges(updater.selector, updater.update, updater.dataProp || 'path');
        return;
      }

      var hash = updater.hash || identity;

      applyDomChanges(updater.selector, function(el, newValue) {
        var fbPath = extractFbPath(el);
        var fbRoot = fbRoots[fbPath.root];

        var path = fbPath.path;
        var oldValue = prop(fbRoot.oldData || {}, path);

        if (fbRoot.oldData === undefined || hash(newValue) !== hash(oldValue)) {
          updater.update.apply(self, [el, newValue, path]);
        }
      }, updater.dataProp || 'path');
    });

    queryAll('input[type=file][data-path]', self.root).forEach(function(e) {
      e.name = extractFbPath(e).path;
    });

    queryAll('input[disabled][data-path],textarea[input][data-path]', self.root).forEach(function(e) {
      e.removeAttribute('disabled');
      e.title = '';
    });

    mapIn(self.users || {}, function(stats, userId) {
      if (stats.updated < Date.now() - 1000 * 60) {
        return;
      }

      if (userId !== self.userId) {
        var userFocus = stats.focus;
        if (userFocus) {
          var focus = self.root.querySelector('[data-path=\'' + userFocus + '\']');
          if (focus) {
            focus.disabled = true;
            focus.title = 'editor: ' + stats.name;
          }
        }

        if (trackMice && stats.pos) {
          var avatar = document.getElementById('avatar-' + userId);
          if (!avatar) {
            avatar = document.createElement('div');
            avatar.id = 'avatar-' + userId;
            avatar.className = 'avatar';
            avatar.innerHTML = '<span class="name">' + stats.name + '</span>';
            document.querySelector('body').appendChild(avatar);
          }

          avatar.style.left = stats.pos.x + 'px';
          avatar.style.top = stats.pos.y + 'px';
        }
      }
    });

    mapIn(fbRoots, function(fbRoot) {
      fbRoot.oldData = fbRoot.newData;
    });

    if (options.onDomChanged) {
      options.onDomChanged.apply(self);
    }
  }

  function registerDomListeners() {
    delegate.off();

    listeners.each(function(listener) {
      delegate.on(listener.event, listener.selector, listener.handler.bind(self));
    });

    // Take over a disabled field
    delegate.on('dblclick', '[disabled]', function(e) {
      var path = extractFbPath(e.target).full;
      mapIn(self.users, function(stats, userId) {
        if (stats.focus === path) {
          self.usersRef.child(userId).child('focus').set(false);
        }
      });
    });

    if (trackMice) {
      delegate.on('mousemove', 'body', debounce(function(e) {
        var pageX = e.pageX;
        var pageY = e.pageY;
        if (pageX === undefined) {
          pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
          pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }

        self.setUserStat('pos', {
          x: pageX,
          y: pageY
        });
      }, 100, true));
    }
  }

  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this;
      var args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) {
          func.apply(context, args);
        }
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) {
        func.apply(context, args);
      }
    };
  }

  function applyDomChanges(selector, applier, dataProp) {
    queryAll(selector, root).forEach(function(el) {
      var fbPath = extractFbPath(el, dataProp);
      var fbRoot = fbRoots[fbPath.root];

      applier.apply(self, [el, prop(fbRoot.newData, fbPath.path), fbPath.path]);
    });
  }
}

function identity(val) {
  return val;
}

module.exports = FirebaseTemplate;