123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- var chatUI = function (e) {
- function t(e, t) {
- var n, i = t || 200;
- return function () {
- var t = this, c = arguments;
- clearTimeout(n), n = setTimeout(function () {
- e.apply(t, Array.prototype.slice.call(c))
- }, i)
- }
- }
- var n = {};
- return n.container = e.append('<div id="cb-container"></div>'), n.config = null, n.bubbles = [], n.ID = 0, n.keys = {}, n.types = {}, n.inputState = !1, n.height = 0, n.scroll = n.container.append('<div id="cb-flow"></div>'), n.flow = n.scroll.append('<div class="cb-inner"></div>'), n.input = n.container.append('<div id="cb-input" style="display:none;"></div>'), n.input.append('<div id="cb-input-container"><input type="text" /></div>'), n.input.append("<button>+</button>"), n.updateContainer = function () {
- n.height = n.container.outerHeight(), n.flow.css("padding-top", n.height + "px"), n.scroll.css("height", n.height - (1 == n.inputState ? 77 : 0) + "px"), n.scrollTo("end")
- }, n.addBubble = function (e, t) {
- if (t = t || function () {
- }, e.type in n.types) {
- n.ID++;
- var i = n.ID;
- n.bubbles.push({id: i, type: e.type}), n.keys[i] = n.bubbles.length - 1;
- var c = n.flow.append('<div class="cb-segment cb-' + e.class + " cb-bubble-type-" + e.type + '" id="cb-segment-' + i + '"></div>');
- c.append('<div class="cb-icon"></div>');
- var l = c.append('<div class="cb-bubble ' + e.class + '"><div class="cb-inner"></div></div>');
- return c.append("<hr />"), n.types[e.type](l, e, t), n.scrollTo("end"), n.ID
- }
- throw"Unknown bubble type"
- }, n.types.select = function (e, t, n) {
- t.value.forEach(function (t) {
- e.append('<div class="cb-choice">' + t.label + "</div>").on("click", function () {
- $(this).addClass("cb-active"), $(this).parent().find(".cb-choice").on("click", function () {
- }), n(t)
- })
- })
- }, n.types.text = function (e, t, i) {
- "delay" in t && t.delay ? (e.append('<div class="cb-waiting"><div class="circle"></div><div class="circle"></div><div class="circle"></div></div>'), setTimeout(function () {
- e.find(".cb-waiting").remove(), n.appendText(e, t, i)
- }, isNaN(t.delay) ? 1e3 : t.delay)) : n.appendText(e, t, i)
- }, n.appendText = function (e, t, n) {
- e.attr("class", "bubble-ctn-" + t.class).append("<p>" + t.value + "</p>").animate({
- width: "auto",
- opacity: 1
- }, 200), chat.scrollTo("end"), n()
- }, n.showInput = function (e, t) {
- n.inputState = !0, t ? n.input.find("input").on("change", function () {
- t($(this).val())
- }) : n.input.find("input").on("change", function () {
- }), n.input.find("input").on("keyup", function (t) {
- 13 == t.keyCode && (e(n.input.find("input").val()), n.input.find("input").val(""))
- }), n.input.find("button").on("click", function () {
- e(n.input.find("input").val()), n.input.find("input").val("")
- }), n.input.css("display", "block"), n.updateContainer(), n.input.find("input").focus(), n.scrollTo("end")
- }, n.hideInput = function () {
- n.input.find("input").blur(), n.input.css("display", "none"), n.inputState = !1, n.updateContainer(), n.scrollTo("end")
- }, n.removeBubble = function (e) {
- n.flow.find("#cb-segment-" + e).remove(), n.bubbles.splice(n.keys[e], 1), delete n.keys[e]
- }, n.removeBubbles = function (e) {
- for (var t = n.bubbles.length - 1; t >= n.keys[e]; t--) n.removeBubble(n.bubbles[t].id)
- }, n.getBubble = function (e) {
- return {el: n.flow.find("#cb-segment-" + e), obj: n.bubbles[n.keys[e]]}
- }, n.scrollTo = function (e) {
- var t = 0;
- "end" == e && (t = document.getElementById("cb-flow").scrollHeight - (window.innerHeight - 77)), $("#cb-flow").stop().animate({scrollTop: t}, 300)
- }, $(window).on("resize", t(function () {
- n.updateContainer()
- }, 200)), n.updateContainer(), n
- };
|