123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- var chatUI = function (e) {
- function t(e) {
- return function () {
- var t = d3.interpolateNumber(i.scroll.property("scrollTop"), e);
- return function (e) {
- i.scroll.property("scrollTop", t(e))
- }
- }
- }
- function n(e, t) {
- var n, i = t || 200;
- return function () {
- var t = this, l = arguments;
- clearTimeout(n), n = setTimeout(function () {
- e.apply(t, Array.prototype.slice.call(l))
- }, i)
- }
- }
- var i = {};
- 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 () {
- 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")
- }, i.addBubble = function (e, t) {
- if (t = t || function () {
- }, e.type in i.types) {
- i.ID++;
- var n = i.ID;
- i.bubbles.push({id: n, type: e.type}), i.keys[n] = i.bubbles.length - 1;
- var l = i.flow.append("div").attr("class", "cb-segment cb-" + e.class + " cb-bubble-type-" + e.type).attr("id", "cb-segment-" + n);
- l.append("div").attr("class", "cb-icon");
- var c = l.append("div").attr("class", "cb-bubble " + e.class).append("div").attr("class", "cb-inner");
- return l.append("hr"), i.types[e.type](c, e, t), i.scrollTo("end"), i.ID
- }
- throw"Unknown bubble type"
- }, i.types.select = function (e, t, n) {
- e.selectAll(".cb-choice").data(t.value).enter().append("div").attr("class", "cb-choice").text(function (e) {
- return e.label
- }).on("click", function (e) {
- d3.select(this).classed("cb-active", !0), d3.select(this.parentNode).selectAll(".cb-choice").on("click", function () {
- }), n(e)
- })
- }, i.types.text = function (e, t, n) {
- if ("delay" in t && t.delay) {
- var l = '<div class="circle"></div><div class="circle"></div><div class="circle"></div>';
- e.append("div").attr("class", "cb-waiting").html(l), setTimeout(function () {
- e.select(".cb-waiting").remove(), i.appendText(e, t, n)
- }, isNaN(t.delay) ? 1e3 : t.delay)
- } else i.appendText(e, t, n)
- }, i.appendText = function (e, t, n) {
- 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()
- }, i.showInput = function (e, t) {
- i.inputState = !0, t ? i.input.select("input").on("change", function () {
- t(d3.select(this).node().value)
- }) : i.input.select("input").on("change", function () {
- }), i.input.select("input").on("keyup", function () {
- 13 == d3.event.keyCode && (e(i.input.select("input").node().value), i.input.select("input").node().value = "")
- }), i.input.select("button").on("click", function () {
- e(i.input.select("input").node().value), i.input.select("input").node().value = ""
- }), i.input.style("display", "block"), i.updateContainer(), i.input.select("input").node().focus(), i.scrollTo("end")
- }, i.hideInput = function () {
- i.input.select("input").node().blur(), i.input.style("display", "none"), i.inputState = !1, i.updateContainer(), i.scrollTo("end")
- }, i.removeBubble = function (e) {
- i.flow.select("#cb-segment-" + e).remove(), i.bubbles.splice(i.keys[e], 1), delete i.keys[e]
- }, i.removeBubbles = function (e) {
- for (var t = i.bubbles.length - 1; t >= i.keys[e]; t--) i.removeBubble(i.bubbles[t].id)
- }, i.getBubble = function (e) {
- return {el: i.flow.select("#cb-segment-" + e), obj: i.bubbles[i.keys[e]]}
- }, i.scrollTo = function (e) {
- var n = 0;
- "end" == e && (n = i.scroll.property("scrollHeight") - (window.innerHeight - 77)), d3.select("#cb-flow").transition().duration(300).tween("scroll", t(n))
- }, d3.select(window).on("resize", n(function () {
- i.updateContainer()
- }, 200)), i.updateContainer(), i
- };
|