ChatItems.js

qx.Class.define("phwabe.ChatView.ChatItems", {
  extend: qx.ui.core.Widget,
  include: [qx.ui.form.MModelProperty],

  construct: function() {
    this.base(arguments);
    this._eventBus = qx.event.message.Bus;
    // console.log(this._highlighter)
    this._date = new Date()
    this._highlighter = hljs
    voteurl = {
      "vote": {
        method: "POST",
        url: "/event/vote/{eventid}"
      }
    };

    this._votepost = new phwabe.utils.ChatPoll(voteurl);
    var that = this
    this._markDowner = window.markdownit({

      html: false,
      xhtmlOut: false,
      breaks: true,
      langPrefix: 'language-',
      linkify: true, // Autoconvert URL-like text to links
      typographer: false,

      highlight: function(str, lang) {
        if (lang && that._highlighter.getLanguage(lang)) {
          try {
            return that._highlighter.highlight(lang, str).value;
          } catch (__) {}
        }

        try {
          return that._highlighter.highlightAuto(str).value;
        } catch (__) {}

        return ''; // use external default escaping
      }
    });

    // create a date format like "June 18, 2010 9:31 AM"
    this._dateFormat = new qx.util.format.DateFormat(
      qx.locale.Date.getDateFormat("long") + " " +
      qx.locale.Date.getTimeFormat("short")
    );

    // initialize the layout and allow wrap for "content"
    var layout = new qx.ui.layout.Grid(3, 3);

    layout.setRowFlex(1, 1);
    layout.setColumnFlex(2, 1);


    this._setLayout(layout);

    this._createChildControl("id");
    this._createChildControl("stamp");
    this._createChildControl("user");
    this._createChildControl("content");
    this._createChildControl("votes");
    // this.setMaxHeight(384);
    // console.log(this);


  },

  properties: {
    appearance: {
      refine: true,
      init: "custom-listitem"
    },

    id: {
      apply: "_applyOid",
      nullable: true
    },

    stamp: {
      apply: "_applyTime",
      nullable: true
    },

    user: {
      apply: "_applyUser",
      nullable: true
    },

    content: {
      apply: "_applyPost",
      nullable: true
    },
    votes: {
      apply: "_applyVotes",
      nullable: true,
      init: 0
    }
  },

  members: {
    _dateFormat: null,
    // overridden
    _createChildControlImpl: function(id) {
      var control;

      switch (id) {
        case "user":
          control = new qx.ui.basic.Label(this.getUser());
          control.set({
            appearance: "keyword"
          });
          control.setRich(true);
          // control.setAnonymous(true);
          this._add(control, {
            row: 0,
            column: 1
          });
          break;

        case "votes":
          control = new phwabe.ChatView.VoteWidget();
          control.main();
          // control.setAnonymous(true);
          // control.setBackgroundColor("Blue"); //debug
          control.addListener("onVoteUp", this._voteHandler, this);
          control.addListener("onVoteDown", this._voteHandler, this);
          this._add(control, {
            row: 1,
            column: 0,
            rowSpan: 3
          });
          break;

        case "id":
          control = new qx.ui.basic.Label(this.getId());
          control.set({
            appearance: "subtle"
          });
          this._add(control, {
            row: 0,
            column: 2
          });
          break;

        case "stamp":
          control = new qx.ui.basic.Label(this.getStamp());
          this._add(control, {
            row: 0,
            column: 3
          });
          control.set({
            appearance: "subtle"
          });
          break;

        case "content":
          control = new qx.ui.basic.Label();
          control.setAlignY("top")
          control.setAllowGrowX(true);
          control.setAllowGrowY(true);
          control.setRich(true);
          control.set({
            appearance: "content"
          });
          this._add(control, {
            row: 1,
            column: 1,
            colSpan: 3,
            rowspan: 2
          });
          break;
      }

      return control || this.base(arguments, id);
    },

    // property apply

    _applyVotes: function(value, old) {
      var votes = this.getChildControl("votes");
      votes.setTotalVote(value);

    },
    _applyOid: function(value, old) {
      var id = this.getChildControl("id");
      id.setValue(value);
    },

    _applyPost: function(value, old) {
      var content = this.getChildControl("content");
      content.setValue(this._markDowner.render(value));
    },

    // property apply
    _applyTime: function(value, old) {
      var stamp = this.getChildControl("stamp");
      stamp.setValue(value);
      //stamp.setValue(value);
    },

    _applyUser: function(value, old) {
      var user = this.getChildControl("user");
      user.setValue(value.getUser_name());
    },
    _voteHandler: function(data) {
      var req = this._votepost
      voteval = data.getData()
      req.vote({
        'eventid': this.getId()
      }, {
        "vote": voteval
      });
      req.addListener("success", function(e) {
        var target = e.getTarget()
      }, this);
    }
  },
  destruct: function() {
    this._dateFormat.dispose();
    this._dateFormat = null;
    this._markDowner = null;
    this._highlighter = null;
  }
});