index-d3.min.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. var chatUI = function (e) {
  2. function t(e) {
  3. return function () {
  4. var t = d3.interpolateNumber(i.scroll.property("scrollTop"), e);
  5. return function (e) {
  6. i.scroll.property("scrollTop", t(e))
  7. }
  8. }
  9. }
  10. function n(e, t) {
  11. var n, i = t || 200;
  12. return function () {
  13. var t = this, l = arguments;
  14. clearTimeout(n), n = setTimeout(function () {
  15. e.apply(t, Array.prototype.slice.call(l))
  16. }, i)
  17. }
  18. }
  19. var i = {};
  20. return i.container = e.append("div").attr("id", "cb-container"), i.config = null, i.bubbles = [], i.ID = 0, i.keys = {}, i.types = {}, i.inputState = !1, i.height = 0, i.scroll = i.container.append("div").attr("id", "cb-flow"), i.flow = i.scroll.append("div").attr("class", "cb-inner"), i.input = i.container.append("div").attr("id", "cb-input").style("display", "none"), i.input.append("div").attr("id", "cb-input-container").append("input").attr("type", "text"), i.input.append("button").text("+"), i.updateContainer = function () {
  21. i.height = i.container.node().offsetHeight, i.flow.style("padding-top", i.height + "px"), i.scroll.style("height", i.height - (1 == i.inputState ? 77 : 0) + "px"), i.scrollTo("end")
  22. }, i.addBubble = function (e, t) {
  23. if (t = t || function () {
  24. }, e.type in i.types) {
  25. i.ID++;
  26. var n = i.ID;
  27. i.bubbles.push({id: n, type: e.type}), i.keys[n] = i.bubbles.length - 1;
  28. var l = i.flow.append("div").attr("class", "cb-segment cb-" + e.class + " cb-bubble-type-" + e.type).attr("id", "cb-segment-" + n);
  29. l.append("div").attr("class", "cb-icon");
  30. var c = l.append("div").attr("class", "cb-bubble " + e.class).append("div").attr("class", "cb-inner");
  31. return l.append("hr"), i.types[e.type](c, e, t), i.scrollTo("end"), i.ID
  32. }
  33. throw"Unknown bubble type"
  34. }, i.types.select = function (e, t, n) {
  35. e.selectAll(".cb-choice").data(t.value).enter().append("div").attr("class", "cb-choice").text(function (e) {
  36. return e.label
  37. }).on("click", function (e) {
  38. d3.select(this).classed("cb-active", !0), d3.select(this.parentNode).selectAll(".cb-choice").on("click", function () {
  39. }), n(e)
  40. })
  41. }, i.types.text = function (e, t, n) {
  42. if ("delay" in t && t.delay) {
  43. var l = '<div class="circle"></div><div class="circle"></div><div class="circle"></div>';
  44. e.append("div").attr("class", "cb-waiting").html(l), setTimeout(function () {
  45. e.select(".cb-waiting").remove(), i.appendText(e, t, n)
  46. }, isNaN(t.delay) ? 1e3 : t.delay)
  47. } else i.appendText(e, t, n)
  48. }, i.appendText = function (e, t, n) {
  49. e.attr("class", "bubble-ctn-" + t.class).append("p").html(t.value).transition().duration(200).style("width", "auto").style("opacity", 1), chat.scrollTo("end"), n()
  50. }, i.showInput = function (e, t) {
  51. i.inputState = !0, t ? i.input.select("input").on("change", function () {
  52. t(d3.select(this).node().value)
  53. }) : i.input.select("input").on("change", function () {
  54. }), i.input.select("input").on("keyup", function () {
  55. 13 == d3.event.keyCode && (e(i.input.select("input").node().value), i.input.select("input").node().value = "")
  56. }), i.input.select("button").on("click", function () {
  57. e(i.input.select("input").node().value), i.input.select("input").node().value = ""
  58. }), i.input.style("display", "block"), i.updateContainer(), i.input.select("input").node().focus(), i.scrollTo("end")
  59. }, i.hideInput = function () {
  60. i.input.select("input").node().blur(), i.input.style("display", "none"), i.inputState = !1, i.updateContainer(), i.scrollTo("end")
  61. }, i.removeBubble = function (e) {
  62. i.flow.select("#cb-segment-" + e).remove(), i.bubbles.splice(i.keys[e], 1), delete i.keys[e]
  63. }, i.removeBubbles = function (e) {
  64. for (var t = i.bubbles.length - 1; t >= i.keys[e]; t--) i.removeBubble(i.bubbles[t].id)
  65. }, i.getBubble = function (e) {
  66. return {el: i.flow.select("#cb-segment-" + e), obj: i.bubbles[i.keys[e]]}
  67. }, i.scrollTo = function (e) {
  68. var n = 0;
  69. "end" == e && (n = i.scroll.property("scrollHeight") - (window.innerHeight - 77)), d3.select("#cb-flow").transition().duration(300).tween("scroll", t(n))
  70. }, d3.select(window).on("resize", n(function () {
  71. i.updateContainer()
  72. }, 200)), i.updateContainer(), i
  73. };