first commit

历届学生/fontendsix/项目练习/学生项目/计梦梦/聊天 copy/fontend/js/lib/ImagePreview.js

@@ -0,0 +1,171 @@
+class ImagePreview {
+    option = {
+        l: 0,
+        t: 0,
+        startX: 0,
+        startY: 0,
+        scale: 1,
+        rotate: 0,
+        isLongTag: false,
+
+        images: [],
+        startPosition: 0,
+        showPagination: false,
+        onChange: () => { },
+        onClose: () => { }
+    }
+
+    constructor(option) {
+        if (option.hasOwnProperty("images") && option.images.length != 0) {
+            this.option.startPosition = option.startPosition || this.option.startPosition;
+            this.option.images = option.images || this.option.images;
+            this.option.showPagination = option.showPagination || this.option.showPagination;
+            this.option.onChange = option.onChange || this.option.onChange;
+            this.option.onClose = option.onClose || this.option.onClose;
+
+            this.initHTML();
+        } else {
+            throw new Error("images必传，images不能为空！！！")
+        }
+    }
+
+    initHTML() {
+        _("body").insertAdjacentHTML("beforeend", `
+            <div class="bmy_image_preview">
+                <div class="bmy_image_canvas">
+                    <img class="bmy_preview sx" 
+                    style="transform: scale(1) rotate(0deg); margin-left: 0px; margin-top: 0px; "
+                    src="${this.option.images[this.option.startPosition].match(/src="(\S*)"/)[1]}" alt="">
+
+                </div>
+                <div class="bmy_mask"></div>
+
+                <i class="iconfont icon-closedx bmy_button bmy_close"></i>
+                <i class="iconfont icon-zuo bmy_button bmy_prev"></i>
+                <i class="iconfont icon-zhankai-copy bmy_button bmy_next"></i>
+
+                <ul class="bmy_menu">
+                    <li>
+                        <i class="iconfont icon-suoxiao"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont icon-fangda"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont bl icon-fullscreen"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont icon-shuaxin left_xz"></i>
+                    </li>
+                    <li>
+                        <i class="iconfont icon-shuaxin right_xz"></i>
+                    </li>
+                </ul>
+            </div>
+        `);
+
+        this.onEvent()
+    }
+
+    onEvent() {
+        _(".bmy_close").onclick = () => {
+            _("body").removeChild(_(".bmy_image_preview"))
+            this.option.onClose()
+        }
+
+        _(".bmy_prev").onclick = () => {
+            this.option.startPosition--
+            this.option.startPosition < 0 ? this.option.startPosition = this.option.images.length - 1 : ''
+            this.changeImgSrc()
+        }
+
+        _(".bmy_next").onclick = () => {
+            this.option.startPosition++
+            this.option.startPosition >= this.option.images.length ? this.option.startPosition = 0 : ''
+            this.changeImgSrc()
+        }
+
+        _(".icon-suoxiao").onclick = () => {
+            if (this.option.scale > 0.2) {
+                this.option.scale = Number((this.option.scale - 0.2).toFixed(1));
+                this.ScaleAndRotate()
+            }
+        }
+
+        _(".icon-fangda").onclick = () => {
+            this.option.scale += 0.2;
+            this.ScaleAndRotate()
+        }
+
+        _(".left_xz").onclick = () => {
+            this.option.rotate -= 90;
+            this.ScaleAndRotate()
+        }
+        _(".right_xz").onclick = () => {
+            this.option.rotate += 90
+            this.ScaleAndRotate()
+        }
+
+        _(".bl").onclick = () => {
+            if (_(".bl").classList.contains("icon-fullscreen")) {
+                _(".bmy_preview").classList.remove("sx")
+                this.option.scale = 1
+                this.option.rotate = 0
+                this.ScaleAndRotate()
+            } else {
+                _(".bmy_preview").classList.add("sx")
+            }
+            _(".bl").classList.toggle("icon-suoxiao1")
+            _(".bl").classList.toggle("icon-fullscreen")
+        }
+
+        _(".bmy_preview").onmousedown = (e) => {
+            e.preventDefault()
+            this.isLongTag = true;
+            this.startX = e.screenX;
+            this.startY = e.screenY;
+
+            this.l = parseInt(_(".bmy_preview").style.marginLeft);
+            this.t = _(".bmy_preview").offsetTop;
+
+            this.move(".bmy_preview")
+        }
+
+        _(".bmy_preview").onmouseleave = () => {
+            if (this.isLongTag) {
+                this.move(".bmy_image_canvas")
+            }
+        }
+
+        _(".bmy_image_preview").onmouseup = () => {
+            this.isLongTag = false;
+            _(".bmy_preview").onmousemove = null
+            _(".bmy_image_canvas").onmousemove = null
+        }
+       
+    }
+
+
+    move(className) {
+        _(className).onmousemove = (ev) => {
+            ev.preventDefault()
+            var moveX = ev.screenX, moveY = ev.screenY;
+            var newX = moveX - this.startX, newY = moveY - this.startY;
+            _(".bmy_preview").style.marginLeft = `${newX + this.l}px`;
+            _(".bmy_preview").style.marginTop = `${newY + this.t}px`;
+        }
+    }
+
+    ScaleAndRotate() {
+        _(".bmy_preview").style.transform = `scale(${this.option.scale}) rotate(${this.option.rotate}deg)`
+    }
+
+    changeImgSrc() {
+        this.option.onChange(this.option.startPosition)
+        _(".bmy_preview").src = this.option.images[this.option.startPosition].match(/src="(\S*)"/)[1]
+    }
+}
+
+function _(className) {
+    return document.querySelector(className)
+}

历届学生/fontendsix/项目练习/学生项目/计梦梦/聊天 copy/fontend/js/page/index.js

@@ -0,0 +1,255 @@
+const { ipcRenderer } = require('electron');
+
+class Index {
+    constructor() {
+        this.socket = io("ws://helpcodes.com:3000");
+        this.fontSize = "13px"
+        this.fontColor = "#353535"
+        this.backgroundColor = "#f3f3f3"
+        this.giftp = []
+
+        if (localStorage.getItem("UserInfo") != null) {
+            this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"));
+            this.emitSocket();
+            this.onSocket();
+            this.onEvent();
+        } else {
+            location.href = "./login.html"
+        }
+    }
+
+    onEvent() {
+        var self = this;
+
+        // 修改群信息
+        $(".group_name").text(this.UserInfo.roomId)
+        // 修改当前登录的用户信息
+        $(".right span").text(this.UserInfo.name)
+        $(".right img").attr("src", this.UserInfo.headImg)
+
+        $(".record_text").keydown((event) => {
+            if (event.keyCode == 108 || event.keyCode == 13) {
+                event.preventDefault();
+                console.log("你按下了回车");
+                this.UserInfo.message = `<div class="qp" style="font-size: ${this.fontSize};color: ${this.fontColor};background:${this.backgroundColor};">
+                    ${$(".record_text").html()}
+                </div>`;
+                this.renderMessage(this.UserInfo);
+                this.socket.emit("sendMessage", this.UserInfo);
+                $(".record_text").text("")
+              
+            }
+        });
+
+        // 渲染QQ表情图片
+        for (let i = 0; i < 275; i++) {
+            $(".look").append(`
+              <img src="../img/icon/${i}fix@2x.png" alt="">
+            `)
+        }
+
+        $(".look img").hover(function () {
+            $(this).attr("src", `../img/icon/${$(this).index()}@2x.gif`);
+        })
+
+        $(".look img").mouseout(function () {
+            $(this).attr("src", `../img/icon/${$(this).index()}fix@2x.png`);
+        })
+
+        $(".look img").click(function () {
+            $(".record_text").append($(this).clone());
+            $(".menu").hide()
+
+            var a = $(".record_text")[0];
+            console.log(a.selectionStart);
+            console.log(a.selectionEnd);
+        })
+
+        $(".icon-zhendong").click(() => {
+            this.socket.emit("getShake", this.UserInfo);
+        });
+
+        $("body").click(function (event) {
+            if ($(".menu").css("display") != "none") {
+                if (event.target.className != "menu") {
+                    $(".menu").hide()
+                }
+            }
+        })
+
+        $(".menu").click(function (event) {
+            event.stopPropagation();
+        })
+
+        $(".icon-weixiao,.icon-gif,.icon-zitiyanse,.icon-xinbaniconshangchuan_huaban").click(function (event) {
+
+            event.stopPropagation();
+            if ($(".menu").css("display") == "none") {
+                console.log("1111");
+                $(".menu").show()
+                self.changeActive($(".menu_footer li").eq($(this).index()));
+            } else {
+                if ($(this).hasClass("i_active")) {
+                    $(".menu").hide()
+                } else {
+                    self.changeActive($(".menu_footer li").eq($(this).index()));
+                }
+            }
+            $(this).addClass("i_active")
+                .siblings()
+                .removeClass("i_active");
+        })
+
+        // // 渲染gif表情图片
+        for (let i = 0; i < 13; i++) {
+            $(".gif").append(`
+              <img src="../img/gif/${i}.gif" alt="">
+            `)
+        }
+        $(".gif img").click(function () {
+
+          
+            self.UserInfo.message = `<img class="dj" style="width:100px;height:100px" src="../img/gif/${$(this).index()}.gif" alt=""></img>`
+
+            self.renderMessage(self.UserInfo);
+            self.socket.emit("sendGif", self.UserInfo);
+            $(".menu").hide()
+        })
+
+
+        // 渲染表情的那些菜单
+        $(".menu_footer li").click(function (event) {
+            self.changeActive(this)
+        });
+
+        $('.font_select').change(function () {
+            self.fontSize = $(this).val();
+            $(".record_text").css("font-size", self.fontSize)
+        })
+
+        $('.fontColor').change(function () {
+            self.fontColor = $(this).val()
+            $(".record_text").css("color", self.fontColor)
+        })
+
+        $('.backColor').change(function () {
+            self.backgroundColor = $(this).val()
+        })
+    }
+
+    changeActive(el) {
+
+        $(".icon-weixiao,.icon-gif,.icon-zitiyanse,.icon-xinbaniconshangchuan_huaban").eq($(el).index())
+            .addClass("i_active")
+            .siblings()
+            .removeClass("i_active");
+
+        $(el).addClass("footer_active")
+            .siblings()
+            .removeClass("footer_active");
+
+        $(".menu_body .body_content")
+            .eq($(el).index())
+            .addClass("active")
+            .siblings()
+            .removeClass("active");
+
+        $(".menu_title").text(
+            $(el).text()
+        )
+    }
+
+
+    renderMessage(data, type = "right") {
+        $(".chat_record").append(`
+            <li class="${type == "right" ? 'mes_right' : ''}">
+                <img class="user_img" src="${data.headImg}" alt="">
+                <div class="record_right">
+                    <div class="user_nickname">${data.name}</div>
+                    <div class="record_content">
+                     ${data.message}
+                    </div>
+                </div>
+            </li>
+        `);
+        data.message.includes("dj") ? this.giftp.push(data.message) : ''
+
+            $(".chat_record .dj").each((i, v) => {
+                v.onclick = () => {
+                    console.log(666);
+                    console.log(v, i);
+                    new ImagePreview({
+                        images: this.giftp,
+                        startPosition: i,
+                        showPagination: true,
+                        onChange: (index) => {
+                            console.log("你当前切换：", index);
+                        },
+                        onClose() {
+                            console.log("关闭了");
+                        },
+                    });
+                }
+            })
+            
+     
+$(".content_left").animate({ scrollTop: $(".chat_record").outerHeight() }, 1);
+    }
+
+    emitSocket() {
+        this.socket.emit("Login", this.UserInfo);
+    }
+
+    // 监听后端的所有消息
+    onSocket() {
+
+
+        // this.socket.disconnect(() => {
+        //     alert(111)
+        //     this.socket.emit("UserNoLine", this.UserInfo);
+        // })
+
+
+        this.socket.on("sendShake", (res) => {
+            console.log("前端收到抖动");
+            ipcRenderer.send('shake');
+        })
+
+        //
+        this.socket.on("getGif", (res) => {
+            console.log(res);
+            this.renderMessage(res, "left")
+        })
+
+        this.socket.on("SendGroupMembers", (res) => {
+            console.log("SendGroupMembers: ", res);
+            $(".online_user_list").empty();
+            $(".list_title").text(`群成员 (${res.length})`)
+            res.forEach(v => {
+                $(".online_user_list").append(`
+                    <li>
+                        <img src="${v.headImg}" alt="">
+                        <span>${v.name}</span>
+                    </li>
+                `)
+            });
+        })
+
+
+        this.socket.on("getMessage", (res) => {
+            this.renderMessage(res, "left")
+        })
+
+        this.socket.on("system", function (res) {
+            console.log(res);
+            $(".chat_record").append(`
+                <li class="system">
+                    <span>${res}</span>
+                </li>
+            `)
+        })
+    }
+}
+
+new Index();
+

历届学生/fontendsix/项目练习/学生项目/计梦梦/聊天 copy/fontend/js/page/login.js

@@ -0,0 +1,73 @@
+const { ipcRenderer } = require('electron');
+
+class Login {
+    constructor () {
+
+        this.renderPage();
+        this.bindClick();
+
+    }
+
+
+    renderPage() {
+        var imageFileType = null;
+        for (var i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                imageFileType = "gif"
+            } else {
+                imageFileType = "jpg"
+            }
+
+            $(".chiooseUserImg").append(`
+                <li class="${i==1?'active':''}">
+                    <img src="../img/${i}.${imageFileType}" alt="">
+                </li>
+            `);
+        }
+
+        $(".chiooseUserImg li").click(function() {
+            $(this).addClass("active").siblings().removeClass("active");
+            $(".head").attr({
+                src: $(this).find("img").attr("src")
+            })
+        })
+    }
+
+    bindClick() {
+        $(".enter").click(function() {
+
+            if ($(".name").val().length == 0) {
+                new $.zui.Messager('用户名不能为空', {
+                    icon: 'icon-exclamation-sign',
+                    type: 'danger'
+                }).show();
+
+                return false
+            }
+
+            if ($(".room").val().length == 0) {
+                new $.zui.Messager('房间号不能为空', {
+                    icon: 'icon-exclamation-sign',
+                    type: 'danger'
+                }).show();
+
+                return false
+            }
+
+
+            var UserInfo = {
+                name: $(".name").val(),
+                roomId:  $(".room").val(),
+                headImg: $(".head").attr("src")
+            };
+            localStorage.setItem("UserInfo", JSON.stringify(UserInfo));
+
+            ipcRenderer.send('enterIndex');
+
+            // location.href = "./index.html"
+            
+        })
+    }
+}
+
+new Login();