spacedeck-open/public/javascripts/spacedeck_directives.js

/*
  Spacedeck Directives
  This module registers custom Vue directives for Spacedeck.
*/

function setup_directives() {
  Vue.directive('clipboard', {
    bind: function () {
      this.clipboard = new Clipboard(".clipboard-btn");
    },
    update: function (value) {
    },
    unbind: function () {
      this.clipboard.destroy()
    }
  });

  Vue.directive('t', {
    update: function (value, key) {
      this.el.innerHTML = key;
    }
  });

  if ('ontouchstart' in window) {
    var edown = "touchstart";
    var emove = "touchmove";
    var eup = "touchend";
  } else {
    var edown = "mousedown";
    var emove = "mousemove";
    var eup = "mouseup";
  }

  Vue.directive('videoplayer', {
    update: function (a) {
      var el = this.el;
      var scope = this.vm.$root;
      var video = el.querySelectorAll("video")[0];
      var play_button = el.querySelectorAll(".play")[0];
      var pause_button = el.querySelectorAll(".pause")[0];
      var stop_button = el.querySelectorAll(".stop")[0];
      var player_state = "stop";

      var update_view = function() {
        try {
          if (!a.player_view) { a.player_view = {} };
          a.player_view.state = player_state;
        } catch (e) {
          // catch InvalidStateError
        }
      }

      var play_func = function() {
        video.play();
        player_state = "playing";
        update_view();
      }

      var pause_func = function() {
        try {
          video.pause();
          player_state = "paused";
          update_view();
        } catch (e) {
          // catch InvalidStateError
        }
      }

      var stop_func = function() {
        try {
          player_state = "stop";
          video.pause();
          video.currentTime = 0;
          update_view();

        } catch (e) {
          // catch InvalidStateError
        }      
      }

      el.addEventListener("remote_play",play_func);
      el.addEventListener("remote_pause",pause_func);
      el.addEventListener("remote_stop",stop_func);

      play_button.addEventListener(edown, function(evt) {
        try {
          play_func();
          spacedeck.presenter_send_media_action(a._id,"video","play",video.currentTime);
        } catch (e) {
          // catch InvalidStateError
        }
      }, false);

      pause_button.addEventListener(edown, function(evt) {
        pause_func();
        spacedeck.presenter_send_media_action(a._id,"video","pause",video.currentTime);
      }, false);

      stop_button.addEventListener(edown, function(evt) {
        stop_func();
        spacedeck.presenter_send_media_action(a._id,"video","stop",0);
      }, false);
    }
  });

  Vue.directive('audioplayer', {
    update: function (a) {
      var el = this.el;
      var scope = this.vm.$root;
      var play_button = el.querySelectorAll(".play")[0];
      var pause_button = el.querySelectorAll(".pause")[0];
      var stop_button = el.querySelectorAll(".stop")[0];
      var timeline = el.querySelectorAll(".timeline")[0];
      var set_inpoint = el.querySelectorAll(".set-inpoint")[0];
      var set_outpoint = el.querySelectorAll(".set-outpoint")[0];
      var reset_points = el.querySelectorAll(".reset-points")[0];

      var player_state = "stop";

      var play_from = 0.0;
      var play_to = 0.0;

      var audio = el.querySelectorAll("audio")[0];

      var update_markers = function() {
        try {
          if (a.meta) {
            if (!a.meta.play_to) a.meta.play_to = audio.duration;
            play_from = parseFloat(a.meta.play_from) || 0.0;
            play_to = parseFloat(a.meta.play_to) || 0.0;
          } else {
            play_from = 0.0;
            play_to = parseFloat(audio.duration) || 0.0;
            a.meta = {};
          }
        } catch (e) {
          // catch InvalidStateError
        }
      }

      var update_view = function() {
        try {
          if (!a.player_view) { a.player_view = {} };
          a.player_view.state = player_state;
          a.player_view.total_time_string = format_time(audio.duration);
          a.player_view.current_time_string = format_time(audio.currentTime);
          a.player_view.current_time_float = audio.currentTime/audio.duration;
          a.player_view.inpoint_float = play_from/audio.duration;
          a.player_view.outpoint_float = play_to/audio.duration;
          a.player_view.duration = audio.duration;
        } catch (e) {
          // catch InvalidStateError
        }
      }

      var pause_audio = function() {
        try {
          audio.pause();
          player_state = "paused";
        } catch (e) {
          // catch InvalidStateError
        }
        update_view();
      }

      var stop_audio = function() {
        try {
          audio.currentTime = play_from;
          audio.pause();
          player_state = "stop";
        } catch (e) {
          // catch InvalidStateError
        }
        update_view();
      }

      update_view();

      audio.addEventListener("loadedmetadata", function(evt) {
        update_markers();
        update_view();
      }, false);

      audio.addEventListener("timeupdate", function(evt) {
        try {
          update_markers();
          if (audio.currentTime >= play_to && player_state == "playing") stop_audio();
          update_view();
        } catch (e) {
          // catch InvalidStateError
        }
      }, false);

      var play_func = function() {
        if (player_state == "stop") {
          audio.currentTime = play_from;
        }

        player_state = "playing";
        update_markers();
        audio.play();
        update_view();
      }

      var pause_func = function() {
        pause_audio();
        update_view();
      }

      var stop_func = function() {
        stop_audio();
        update_view();
      }

      el.addEventListener("remote_play",play_func);
      el.addEventListener("remote_pause",pause_func);
      el.addEventListener("remote_stop",stop_func);
      
      play_button.addEventListener(edown, function(evt) {
        try {
          play_func();
          spacedeck.presenter_send_media_action(a._id,"audio","play",audio.currentTime);
        } catch (e) {
          // catch InvalidStateError
        }
      }, false);

      pause_button.addEventListener(edown, function(evt) {
        pause_func();
        spacedeck.presenter_send_media_action(a._id,"audio","pause",audio.currentTime);
      }, false);

      stop_button.addEventListener(edown, function(evt) {
        stop_func();
        spacedeck.presenter_send_media_action(a._id,"audio","stop",0);
      }, false);

      timeline.addEventListener(edown, function(evt) {
        var clicked_time = (parseFloat(evt.offsetX)/evt.currentTarget.offsetWidth)*audio.duration;
        if (isNaN(clicked_time)) {
          clicked_time = 0.0;
        }
        try {
          audio.currentTime = clicked_time;
        } catch (e) {
          // catch InvalidStateErrors
        }
      }, false);

      set_inpoint.addEventListener(edown, function(evt) {
        if (!a.meta) a.meta = {};
        
        a.meta.play_from = audio.currentTime;
        if (a.meta.play_to<a.meta.play_from) a.meta.play_to = audio.duration;
        update_markers();
        stop_audio();
        update_view();
        scope.save_artifact(a);
      }, false);

      set_outpoint.addEventListener(edown, function(evt) {
        if (!a.meta) a.meta = {};
        
        a.meta.play_to = audio.currentTime;
        if (a.meta.play_to<a.meta.play_from) a.meta.play_from = 0.0;
        update_markers();
        stop_audio();
        update_view();
        scope.save_artifact(a);
      }, false);

      reset_points.addEventListener(edown, function(evt) {
        if (!a.meta) a.meta = {};
        
        a.meta.play_from = 0.0;
        a.meta.play_to = audio.duration;
        update_markers();
        stop_audio();
        update_view();
        scope.save_artifact(a);
      }, false);
    }
  });

  Vue.directive('sd-richtext', {
    twoWay: true,
    update: function(obj) {
      this.mode = 'rich';

      $(this.el).addClass("text-editing");

      this.medium = new Medium({
        element: this.el,
        mode: Medium.richMode,
        attributes: {
		      remove: ['class','href','onclick','onmousedown','onmouseup']
	      },
      });
      this.medium.value(obj.description);
      this.medium.element.addEventListener('keyup', function() {
        obj.description = this.medium.value();
        spacedeck.queue_artifact_for_save(obj);
      }.bind(this));

      spacedeck.medium_for_object[obj._id] = this.medium;
    }
  });

  Vue.directive('focus', {
    bind: function () {
      var el = this.el;
      window.setTimeout(function() {
        if (el.contentEditable && el.contentEditable!="inherit") {
          var range = document.createRange();
          range.selectNodeContents(el);
        } else {
          el.focus();
          el.select();
        }
      }, 500);
    },
  });

  Vue.directive('sd-draggable', {
    update: function(data) {
      var el = this.el;

      el.addEventListener(
        'dragstart',
        function(evt) {
          if ($(el).find(".text-editing").length) {
            // FIXME: technical debt
            evt.stopPropagation();
            evt.preventDefault();
            return;
          }

          evt.dataTransfer.setData('application/json', JSON.stringify(data));
          $(el).addClass("dragging");
        },
        false
      );
    }
  });

  Vue.directive('sd-droppable', {
    isFn: true,
    bind: function() {
      var el = this.el;
      var expression = this.expression;
      var parts = expression.split(";");
      var func_key = parts[0];
      var data_key = parts[1];

      el.addEventListener(
        'dragover',
        function(e) {
          e.dataTransfer.dropEffect = 'copy';
          // allows us to drop
          if (e.preventDefault) e.preventDefault();
          el.classList.add('over');

          return false;
        }.bind(this),
        false
      );

      el.addEventListener(
        'dragenter',
        function(e) {
          el.classList.add('over');

          return false;
        }.bind(this),
        false
      );

      el.addEventListener(
        'dragleave',
        function(e) {
          el.classList.remove('over');
          return false;
        },
        false
      );

      el.addEventListener(
        'drop',
        function(e) {
          e.stopPropagation();
          e.preventDefault();

          $(e.currentTarget).find(".over").removeClass('over');
          $(e.currentTarget).find(".dragging").removeClass('dragging');

          var func = this.vm.$root[func_key].bind(this.vm.$root);
          if (this._scope) {
            var obj = this._scope[data_key];
          } else {
            var obj = this.vm[data_key];
          }
          func(e, obj);

          return false;
        }.bind(this),
        false
      );
    }
  });

  Vue.directive('sd-fader', {
    bind: function (section) {

      function clamp(v, mn, mx) {
        return Math.max(mn,Math.min(mx,v));
      }

      var scope = this.vm.$root;

      this.fader_state = "idle";
      this.fader_mx = 0;
      this.fader_my = 0;

      var $el = $(this.el);

      var handle = $el.find(".fader-selector");
      var indicator = $el.find(".fader-indicator");
      var constraint = $el.find(".fader-constraint");
      if (!constraint.length) constraint = $el;

      var fader_var_x = $el.attr("sd-fader-var-x");
      var fader_var_y = $el.attr("sd-fader-var-y");

      var knob_size = 0;
      var minx = 0;
      var miny = 0;
      var maxx = 0;
      var maxy = 0;

      var nx = 0;
      if (xfader) nx = scope.$get(fader_var_x);
      var ny = 0;
      if (yfader) ny = scope.$get(fader_var_y);

      var xfader = !!fader_var_x;
      var yfader = !!fader_var_y;
      var encoder = !handle[0];

      var step = parseFloat($el.attr("sd-fader-step"))||1;
      var sensitivity = parseFloat($el.attr("sd-fader-sens"))||1;

      var discover_minmax = function() {
        minx = (parseInt($el.attr("sd-fader-min-x"))||0);
        miny = (parseInt($el.attr("sd-fader-min-y"))||0);
        maxx = parseInt($el.attr("sd-fader-max-x"))||(constraint.width() - 1);
        maxy = parseInt($el.attr("sd-fader-max-y"))||(constraint.height() - 1);
      }

      var position_handle = function() {
        discover_minmax();
        if (!nx || isNaN(nx)) nx = 0;
        if (!ny || isNaN(ny)) ny = 0;

        if (handle[0]) {
          if (xfader) handle[0].style.left = nx+"px";
          if (yfader) handle[0].style.top  = (maxy-ny)+"px";
        }

        if (indicator[0]) {
          indicator[0].style.height = ny+"px";
        }
      }.bind(this);

      var move_handle = function(dx,dy) {
        discover_minmax();
        if (xfader) {
          nx = clamp(dx, minx, maxx);
          scope.$set(fader_var_x, nx);
        }

        if (yfader) {
          ny = clamp(dy, miny, maxy);
          if (step<1) ny = ny.toFixed(1); // float precision hack

          scope.$set(fader_var_y, ny);
        }
      }.bind(this);

      var handle_move = function(evt) {
        evt = fixup_touches(evt);

        var dx = parseInt((evt.pageX - this.fader_mx) * sensitivity);
        var dy = parseInt((evt.pageY - this.fader_my) * sensitivity);

        dx *= step;
        dy *= step;

        move_handle(this.fader_oldx+dx,this.fader_oldy-dy);
      }.bind(this);

      var handle_up = function(evt) {
        this.fader_state = "idle";

        $("body").off(emove, handle_move);
        $("body").off("mouseleave "+eup+" blur", handle_up);

        window._sd_fader_moving = false; // signal for other event systems
      }.bind(this);

      function prevent_event(evt) {
        evt.preventDefault();
        evt.stopPropagation();
      };

      $el.on(edown,function(evt) {
        evt.preventDefault();
        evt.stopPropagation();

        evt = fixup_touches(evt);
        var offset = $(evt.target).offset();

        this.fader_state = "drag";
        if (!encoder) {
          move_handle(evt.pageX-offset.left, maxy - (evt.pageY - offset.top) + knob_size/2);
        }

        if (yfader) {
          ny = scope.$get(fader_var_y);
        }

        $("body").on(emove, handle_move);
        $("body").on("mouseleave "+eup+" blur", handle_up);

        this.fader_mx = evt.pageX;
        this.fader_my = evt.pageY;
        this.fader_oldx = nx||0;
        this.fader_oldy = ny||0;

        window._sd_fader_moving = true; // signal for other event systems
      }.bind(this));

      // initial state
      position_handle();

      if (xfader) {
        scope.$watch(fader_var_x, function(a) {
          nx = parseInt(scope.$get(fader_var_x));
          position_handle();
        });
      }

      if (yfader) {
        scope.$watch(fader_var_y, function(a) {
          ny = parseInt(scope.$get(fader_var_y));
          position_handle();
        });
      }
    },

    unbind: function() {
      var scope = this.vm.$root;
      var $el = $(this.el);
      var fader_var_x = $el.attr("sd-fader-var-x");
      var fader_var_y = $el.attr("sd-fader-var-y");
    }
  });
}