${data.nick}
5 |${data.content}
6 | `; 7 | return tpl; 8 | } 9 | 10 | export default renderTpl; 11 | -------------------------------------------------------------------------------- /src/js/component/download-app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component 下载逻辑 3 | * @description 点击下载按钮后的逻辑 4 | * @author wuweishuan 5 | */ 6 | /** 7 | * 状态类名 8 | * @type {String} 9 | */ 10 | const active = 'is-active'; 11 | /** 12 | * 按钮选择器 13 | * @type {String} 14 | */ 15 | const selector = '[data-role="download-app"]'; 16 | 17 | import delegate from 'delegate'; 18 | import downloadTips from 'component/download-tips/index.js'; // 下载弹窗 19 | 20 | document.addEventListener('touchstart', delegate(selector, function ( event ) { 21 | this.classList.add(active); 22 | }), false); 23 | 24 | document.addEventListener('touchend', delegate(selector, function ( event ) { 25 | this.classList.remove(active); 26 | }), false); 27 | 28 | document.addEventListener('touchcancel', delegate(selector, function ( event ) { 29 | this.classList.remove(active); 30 | }), false); 31 | 32 | document.addEventListener('click', delegate(selector, function ( event ) { 33 | if(window.CONFIG.downloadLink) { 34 | window.location.href = window.CONFIG.downloadLink; 35 | } else { 36 | // 如果没有下载链接就打开下载窗 37 | downloadTips.show(); 38 | } 39 | }), false); 40 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-large/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 大礼物配置 3 | */ 4 | 5 | 6 | let config = { 7 | 'use-svga' : true, //大礼物动画使用SVGA（如果使用svga播放，svga文件需和页面同域） 8 | urlSVGA : '/assets/js/svga/svga.min.js', // svga库路径 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-large/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component 大礼物播放器 3 | * @author lixinliang 4 | */ 5 | 6 | import Event from '../../../lib/event/index.js'; 7 | import style from'./style/index.scss'; 8 | import config from'./config.js'; 9 | 10 | const componentSVGAPlayer = document.querySelector('[data-component="SVGAPlayer"]'); 11 | 12 | const giftLargeEvent = new Event; 13 | 14 | let cache = {}; 15 | let giftFromWeb = []; 16 | let giftFromUser = []; 17 | let readyToPlay = Promise.resolve(); 18 | 19 | let onSendGift = function () {}; 20 | 21 | let loadSVGA; 22 | 23 | export default { 24 | init ( giftSocket, giftMapObj ) { 25 | loadSVGA = Promise.all([ 26 | util.preloadScript(config.urlSVGA), 27 | // util.preloadScript(config.urlSVGADB), 28 | ]); 29 | return new Promise(( resolve ) => { 30 | componentSVGAPlayer.innerHTML = ``; 31 | this.send = ( svga ) => { 32 | giftFromUser.push(svga); 33 | // console.log('push'); 34 | readyToPlay = readyToPlay.then(play); 35 | }; 36 | // TODO: dev 37 | giftSocket.ioSocket.on(giftSocket.socketName, ( responese ) => { 38 | let data = responese.data; 39 | let svga = giftMapObj[data.propId].svga; 40 | if (svga) { 41 | giftFromWeb.push(svga); 42 | readyToPlay = readyToPlay.then(play); 43 | onSendGift({ 44 | uid: '', 45 | nickname: data.nick, 46 | name: giftMapObj[data.propId].name, 47 | }); 48 | } 49 | }); 50 | // TODO: dev 51 | this.on = giftLargeEvent.on.bind(giftLargeEvent); 52 | resolve(); 53 | }).catch((err) => console.log(err)); 54 | }, 55 | onSendGift ( callback ) { 56 | onSendGift = callback; 57 | }, 58 | setPosition () { 59 | let offsetTop = componentSVGAPlayer.offsetTop; 60 | let style = componentSVGAPlayer.style; 61 | style['transform'] = style['-webkit-transform'] = `translateY(${ -offsetTop/2 }px)`; 62 | }, 63 | destroy () { 64 | return new Promise(( resolve ) => { 65 | componentSVGAPlayer.style.display = 'none'; 66 | resolve(); 67 | }).catch((err) => console.log(err)); 68 | }, 69 | }; 70 | 71 | function play () { 72 | return new Promise(( resolve ) => { 73 | let url = giftFromUser.shift() || giftFromWeb.shift(); 74 | if (url) { 75 | getSVGA(url).then(playSVGA).then(resolve); 76 | } else { 77 | resolve(); 78 | } 79 | }).catch((err) => console.log(err)); 80 | } 81 | 82 | function getSVGA ( url ) { 83 | return new Promise(( resolve ) => { 84 | loadSVGA.then(() => { 85 | if (cache[url]) { 86 | resolve(cache[url]); 87 | } else { 88 | let a = document.createElement('a'); 89 | a.href = url; 90 | let canvas = document.createElement('canvas'); 91 | canvas.id = `svga-player__${ Object.keys(cache).length }`; 92 | canvas.width = canvas.height = 500; 93 | canvas.style.width = `400px`; 94 | canvas.style.height = `400px`; 95 | canvas.clearsAfterStop = true; 96 | componentSVGAPlayer.appendChild(canvas); 97 | 98 | var player = new SVGA.Player(`#${ canvas.id }`); 99 | var parser = new SVGA.Parser(); 100 | player.loops = 1; 101 | parser.load(url, function(videoItem) { 102 | player.canvas = canvas; 103 | componentSVGAPlayer.removeChild(canvas); 104 | canvas.classList.add('is-active'); 105 | resolve({ 106 | player, 107 | videoItem, 108 | }); 109 | }) 110 | } 111 | }); 112 | }).catch((err) => console.log(err)); 113 | } 114 | 115 | function playSVGA ( options ) { 116 | let {player, videoItem} = options; 117 | return new Promise(( resolve ) => { 118 | componentSVGAPlayer.appendChild(player.canvas); 119 | player.onFinished(() => { 120 | componentSVGAPlayer.removeChild(player.canvas); 121 | resolve(); 122 | }); 123 | player.setVideoItem(videoItem); 124 | player.startAnimation(); 125 | }).catch((err) => console.log(err)); 126 | } 127 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-large/style/index.scss: -------------------------------------------------------------------------------- 1 | .live-SVGAPlayer { 2 | position: absolute; 3 | left: 0; 4 | box-sizing: content-box; 5 | height: 0; 6 | width: 100%; 7 | padding-top: 100%; 8 | // top: 50%; 9 | // transform: translateY(-50%); 10 | bottom: 3.3rem + 0.9; 11 | // bottom: 3.3rem + .9rem + .46rem; 12 | // margin-top: (-3.3rem - .9rem - .46rem)/2; 13 | // margin-top: -1.7rem; 14 | pointer-events: none; 15 | canvas { 16 | position: absolute; 17 | display: block; 18 | width: 100%; 19 | height: 100%; 20 | top: 0; 21 | left: 0; 22 | opacity: 0; 23 | &.is-active { 24 | opacity: 1; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-lit/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 礼物配置 3 | */ 4 | 5 | 6 | let config = { 7 | // 小礼物连送时显示的等级图片 8 | levelMap: [ 9 | { 10 | "levelNum": 1, 11 | "levelImg": "https://legox.org/assets/project/h5live/img/gift-lit/level1.png" 12 | }, 13 | { 14 | "levelNum": 10, 15 | "levelImg": "https://legox.org/assets/project/h5live/img/gift-lit/level2.png" 16 | }, 17 | { 18 | "levelNum": 20, 19 | "levelImg": "https://legox.org/assets/project/h5live/img/gift-lit/level3.png" 20 | }, 21 | { 22 | "levelNum": 30, 23 | "levelImg": "https://legox.org/assets/project/h5live/img/gift-lit/level4.png" 24 | }, 25 | { 26 | "levelNum": 40, 27 | "levelImg": "https://legox.org/assets/project/h5live/img/gift-lit/level5.png" 28 | } 29 | ], 30 | 31 | // 礼物显示时间ms 32 | duration: 3000 33 | } 34 | 35 | export default config; 36 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-lit/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component 礼物模块 3 | * @author wilson 4 | */ 5 | 6 | import sprite from '../../../lib/sprite/index.js'; // 礼物动画 7 | import combo from './module/combo.js'; // 礼物连击 8 | import style from'./style/index.scss'; 9 | import createTpl from './tpl/index.js'; 10 | 11 | const componentGift = document.querySelector('[data-component="gift"]'); 12 | componentGift.innerHTML = ``; 13 | 14 | let giftMap = null; 15 | 16 | let main = { 17 | // 创建dom 18 | create: (data, position) => { 19 | main.comboId[`line${position}`] = data.comboId; 20 | let giftItem = document.createElement('div'); 21 | giftItem.setAttribute('class', `live-gift__item ext-line${position} gift-ani`); 22 | const tpl = createTpl(data); 23 | giftItem.innerHTML = tpl; 24 | componentGift.appendChild(giftItem); 25 | }, 26 | 27 | // 礼物连送ID 28 | comboId: { 29 | 'line1': '', 30 | 'line2': '', 31 | }, 32 | 33 | // 礼物连送对象 34 | comboObj: { 35 | 'line1': null, 36 | 'line2': null, 37 | }, 38 | 39 | // 礼物位置数 40 | giftQueueNum: 0, 41 | 42 | // 礼物推送 43 | pushGift: (queue, position) => { 44 | // 创建礼物dom,并指定显示位置 45 | main.create(queue.task, position); 46 | let currentGiftElement = document.querySelector(`.ext-line${position}`); 47 | let giftImgDom = currentGiftElement.querySelector('.live-gift__giftImg'); // 礼物图片动画 48 | let aniDom = currentGiftElement.querySelector('.live-gift__giftNum'); 49 | let comboImgDom = aniDom.children[1]; 50 | let originalDom = aniDom.children[2]; 51 | 52 | sprite(giftImgDom, giftMap[queue.task.propId].spriteImage, giftMap[queue.task.propId].spriteDuration); 53 | giftImgDom.dataset.status = 'play'; 54 | 55 | main.comboObj[`line${position}`] = new combo({ 56 | endNum: queue.task.giftNum, 57 | aniDom: aniDom, 58 | comboImgDom: comboImgDom, 59 | numDom: originalDom, 60 | cb: function(aniDom) { 61 | currentGiftElement.classList.add('is-hide'); 62 | 63 | //重置 64 | main.comboObj[`line${position}`] = null; 65 | main.comboId[`line${position}`] = ''; 66 | 67 | setTimeout(() => { 68 | componentGift.removeChild(currentGiftElement); 69 | queue.callback(queue.task); 70 | }, 500); 71 | } 72 | }) 73 | }, 74 | 75 | // 初始化队列 76 | initQueue: () => { 77 | let timer = null; 78 | //礼物消息队列 79 | let giftLit = queue.queue(function (task, callback) { 80 | let extPos1Dom = document.querySelector('.ext-line1'); 81 | let extPos2Dom = document.querySelector('.ext-line2'); 82 | let currentQuene = { 83 | task, 84 | callback, 85 | }; 86 | 87 | main.giftQueueNum++; 88 | if(main.giftQueueNum <= 2) { 89 | if(extPos1Dom) { 90 | main.pushGift(currentQuene, 2); 91 | } else { 92 | main.pushGift(currentQuene, 1); 93 | } 94 | } else { 95 | // 超出队列显示，队列暂停 96 | giftLit.pause(); 97 | } 98 | }, 2); 99 | 100 | return giftLit; 101 | }, 102 | 103 | // 加入队列 104 | addQueue: (data, giftLitle, isLast) => { 105 | let {nick, avatar, propId, propCount, comboId} = data.data; 106 | let giftItemObj = { 107 | "propId": propId, 108 | "nick":nick, 109 | "avatar": avatar, 110 | "giftNum": propCount, 111 | "giftName": giftMap[propId].name, 112 | "giftImg": giftMap[propId].thumb, 113 | "comboId": comboId 114 | }; 115 | 116 | if(isLast) { 117 | // 插到队列尾部 118 | giftLitle.push(giftItemObj, main.queueCallback(giftLitle)); 119 | } else { 120 | // 插到队列首部 121 | giftLitle.unshift(giftItemObj, main.queueCallback(giftLitle)); 122 | } 123 | 124 | }, 125 | 126 | // 队列回调 127 | queueCallback: (giftLitle) => { 128 | if(giftLitle.tasks.length > 0) { 129 | let tempArr = giftLitle.tasks, 130 | tempArrLen = tempArr.length; 131 | let comboArr = []; 132 | let comboTotal = 0; 133 | let beLeftArr = []; 134 | let firstTaskComboid = tempArr[0].data.comboId; 135 | for(let i = 0; i < tempArrLen;i++) { 136 | if(tempArr[i].data.comboId == firstTaskComboid) { 137 | comboArr.push(tempArr[i]); 138 | comboTotal += tempArr[i].data.giftNum; 139 | } else { 140 | beLeftArr.push(tempArr[i]); 141 | } 142 | } 143 | 144 | if(comboArr.length > 1) { 145 | // 累积comboid相同的礼物 146 | comboArr[0].data.giftNum = comboTotal; 147 | comboArr.length = 1; 148 | } 149 | 150 | // 拼接队列 151 | giftLitle.tasks = comboArr.concat(beLeftArr, giftLitle.tasks.slice(tempArrLen)); 152 | } 153 | main.giftQueueNum--; 154 | // 恢复队列 155 | if(giftLitle.paused) { 156 | giftLitle.resume(); 157 | } 158 | }, 159 | 160 | // 礼物推送判断 161 | giftHandle: (data, giftLit, callback) => { 162 | if(giftMap[data.propId]) { 163 | let svga = giftMap[data.propId].svga; 164 | if(!svga) { 165 | let comboId = data.comboId; 166 | if(comboId == main.comboId['line1']) { 167 | main.comboObj['line1'].update(data.propCount); 168 | } else if(comboId == main.comboId['line2']) { 169 | main.comboObj['line2'].update(data.propCount); 170 | } else { 171 | callback(data, giftMap, giftLit); 172 | } 173 | } 174 | } else { 175 | console.log('没有匹配到礼物！') 176 | } 177 | } 178 | } 179 | 180 | let onSendGift = function () {}; 181 | 182 | export default { 183 | // 初始化 184 | init(socket, giftMapObj) { 185 | giftMap = giftMapObj; 186 | if (componentGift.matches('.camera-pc ~ [data-component="gift"]')) { 187 | // HACK: camera pc mode 188 | const videoHeight = document.querySelector('[data-component="player"]').dataset.videoHeight; 189 | componentGift.style['top'] = `${ videoHeight }px`; 190 | componentGift.style['bottom'] = `0`; 191 | componentGift.style['transform'] = componentGift.style['-webkit-transform'] = `translateY(-100%)`; 192 | // HACK: image padding 193 | componentGift.style['margin-top'] = `-10px`; 194 | } 195 | 196 | let giftLit = main.initQueue(); 197 | 198 | socket.ioSocket.on(socket.socketName, (data) => { 199 | main.giftHandle(data.data, giftLit, function() { 200 | let {uid, nick, propId} = data.data; 201 | onSendGift({ 202 | uid: uid, 203 | nickname: nick, 204 | name: giftMap[propId].name, 205 | }); 206 | main.addQueue(data, giftLit, true); 207 | }) 208 | }); 209 | 210 | // 礼物面板送礼优先显示 211 | // this.unShiftQueue = (data) => { 212 | // main.giftHandle(data, giftLit, function() { 213 | // main.addQueue(data, giftLit, false); 214 | // }) 215 | // }; 216 | }, 217 | destroy () { 218 | componentGift.style['display'] = 'none'; 219 | }, 220 | onSendGift ( callback ) { 221 | onSendGift = callback; 222 | }, 223 | } 224 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-lit/module/combo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component 礼物连击 3 | * @author wilson 4 | */ 5 | 6 | import config from '../config.js'; // 连击参数配置 7 | 8 | let levelMap = config.levelMap; // 礼物连击图片映射数据 9 | 10 | 11 | let combo = function(option) { 12 | this.curNum = 0; 13 | this.endNum = option.endNum; 14 | this.aniDom = option.aniDom; 15 | this.comboImgDom = option.comboImgDom; 16 | this.numDom = option.numDom; 17 | this.cb = option.cb; 18 | 19 | this.hasCritModel = false; // 是否启动了暴击模式 20 | this.start(); 21 | } 22 | 23 | combo.prototype = { 24 | start() { 25 | this.countUp(); 26 | }, 27 | 28 | // 查询连击图片更换 29 | changeComboImg(curNum) { 30 | let levelMapLen = levelMap.length; 31 | for(let i = 0;i < levelMapLen;i++) { 32 | if(curNum == levelMap[i].levelNum) { 33 | return i; 34 | } else if(curNum > levelMap[i].levelNum) { 35 | if((i + 1) < levelMapLen && curNum < levelMap[i + 1].levelNum) { 36 | return i; 37 | } else if((i + 1) == levelMapLen) { 38 | return i; 39 | } 40 | } 41 | } 42 | 43 | return (levelMapLen - 1); 44 | }, 45 | 46 | // 计数 47 | countUp() { 48 | if(this.curNum < this.endNum) { // 累加 49 | 50 | this.remainNum = this.endNum - this.curNum; 51 | if(this.remainNum > 10) { 52 | this.curNum += 10; 53 | this.hasCritModel = true; 54 | } else { 55 | if(this.hasCritModel) { 56 | this.curNum += this.remainNum; 57 | } else { 58 | this.curNum++; 59 | } 60 | } 61 | this.numDom.textContent = this.curNum; 62 | setTimeout(() => { 63 | this.aniDom.classList.add('is-ani'); 64 | if(this.aniDom.classList.contains('is-ani')) { 65 | // 判断是否需要更换连击图片 66 | let level = this.changeComboImg(this.curNum); 67 | this.comboImgDom.style.backgroundImage = `url(${levelMap[level].levelImg})`; 68 | } 69 | }, 0); 70 | 71 | setTimeout(() => { 72 | this.aniDom.classList.remove('is-ani'); 73 | this.comboImgDom.style.backgroundImage = ''; 74 | setTimeout(() => { 75 | this.countUp(); 76 | }, 100) 77 | }, 250) 78 | } else { // 连击结束 79 | let checkTimer = setInterval(() => { 80 | if(this.curNum < this.endNum) { 81 | this.countUp(); 82 | clearTimeout(overTimer); 83 | clearInterval(checkTimer); 84 | } 85 | }, 200); 86 | 87 | let overTimer = setTimeout(() => { 88 | this.cb(this.aniDom); 89 | clearInterval(checkTimer); 90 | }, config.duration); 91 | } 92 | }, 93 | 94 | // 更新 95 | update(offsetNum) { 96 | this.endNum += offsetNum; 97 | } 98 | } 99 | 100 | export default combo; 101 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-lit/style/index.scss: -------------------------------------------------------------------------------- 1 | .live-gift { 2 | position: absolute; 3 | left: 0.2rem; 4 | bottom: 4.3rem; 5 | height: 1.64rem; 6 | pointer-events: none; 7 | } 8 | 9 | .live-gift__item { 10 | position: relative; 11 | width: 3.84rem; 12 | height: 0.64rem; 13 | transform: translateX(-4.5rem); 14 | background-color: rgba(46, 46, 46, 0.6); 15 | border-radius: 0.32rem; 16 | transition: opacity 0.3s ease-out 0.2s; 17 | &.ext-line1 { 18 | position: absolute; 19 | left: 0; 20 | bottom: 0; 21 | } 22 | &.ext-line2 { 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | } 27 | &.gift-ani { 28 | animation-name: giftAni; 29 | animation-duration: 0.3s; 30 | animation-timing-function: ease-out; 31 | animation-fill-mode: forwards; 32 | } 33 | 34 | &.is-hide { 35 | opacity: 0; 36 | } 37 | } 38 | 39 | @keyframes giftAni{ 40 | 0% { 41 | transform: translateX(-4.5rem); 42 | } 43 | 100% { 44 | transform: translateX(0); 45 | } 46 | } 47 | 48 | .live-gift__userImg { 49 | position: absolute; 50 | left: 0.02rem; 51 | top: 0.02rem; 52 | width: 0.6rem; 53 | height: 0.6rem; 54 | border-radius: 50%; 55 | } 56 | 57 | .live-gift__userName { 58 | width: 2.44rem; 59 | font-size: 0.24rem; 60 | line-height: 0.3rem; 61 | color: #e0b66c; 62 | font-weight: 500; 63 | padding: 0.05rem 0 0 0.76rem; 64 | white-space: nowrap; 65 | word-wrap: normal; 66 | overflow: hidden; 67 | text-overflow: ellipsis; 68 | text-align: left; 69 | } 70 | 71 | .live-gift__giftName { 72 | width: 2.44rem; 73 | font-size: 0.2rem; 74 | color: #fff; 75 | line-height: 0.26rem; 76 | padding-left: 0.76rem; 77 | white-space: nowrap; 78 | word-wrap: normal; 79 | overflow: hidden; 80 | text-overflow: ellipsis; 81 | text-align: left; 82 | font-weight: 400; 83 | span { 84 | margin-left: 0.08rem; 85 | color: #ffdda0; 86 | font-weight: 500; 87 | } 88 | } 89 | 90 | .live-gift__giftImg { 91 | position: absolute; 92 | left: 2.5rem; 93 | top: -0.15rem; 94 | width: 0.9rem; 95 | height: 0.9rem; 96 | } 97 | 98 | .live-gift__giftNum { 99 | position: absolute; 100 | left: 3.5rem; 101 | top: 0.09rem; 102 | width: 2rem; 103 | height: 0.44rem; 104 | line-height: 0.44rem; 105 | height: .44rem; 106 | font-size: 0.42rem; 107 | color: #ffc40f; 108 | font-weight: bold; 109 | -webkit-text-stroke: 0.02rem #fff; 110 | span { 111 | &:nth-of-type(1) { 112 | position: absolute; 113 | top: 0; 114 | left: 0; 115 | } 116 | &:nth-of-type(2) { 117 | position: absolute; 118 | top: -.65rem; 119 | left: -.4rem; 120 | width: 1.9rem; 121 | height: 1.86rem; 122 | text-align: center; 123 | line-height: 2.34rem; 124 | // background-image: url(http://page.yy.com/channel/assets/images/combo-effect/level1.png); 125 | background-size: 11.4rem 1.86rem; 126 | } 127 | &:nth-of-type(3) { 128 | position: absolute; 129 | top: -.9rem; 130 | left: .3rem; 131 | // width: 2.4rem; 132 | height: 2.34rem; 133 | // text-align: center; 134 | line-height: 2.34rem; 135 | } 136 | } 137 | &.is-ani { 138 | span { 139 | &:nth-of-type(1) { 140 | animation: txtani 0.25s ease-out 0s; 141 | animation-fill-mode: forwards; 142 | } 143 | &:nth-of-type(2) { 144 | animation: giftani 0.25s steps(6,end) 0s; 145 | } 146 | 147 | &:nth-of-type(3) { 148 | animation: txtani 0.25s ease-out 0s; 149 | animation-fill-mode: forwards; 150 | } 151 | } 152 | } 153 | } 154 | 155 | @keyframes giftani { 156 | from{ 157 | background-position: 0 0; 158 | } 159 | to { 160 | background-position: -11.4rem 0; 161 | } 162 | } 163 | 164 | @keyframes txtani { 165 | from{ 166 | opacity: 0; 167 | transform: scale(2.4); 168 | } 169 | to { 170 | opacity: 1; 171 | transform: scale(1); 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /src/js/component/gift/gift-lit/tpl/index.js: -------------------------------------------------------------------------------- 1 | let renderTpl = (data)=>{ 2 | let tpl = ` 3 |${data.nick}
5 |送了${data.giftName}
6 | 7 |x
8 | `; 9 | return tpl; 10 | } 11 | 12 | export default renderTpl; 13 | -------------------------------------------------------------------------------- /src/js/component/header/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component 头部主播名片 3 | * @author David 4 | */ 5 | 6 | import Event from '../../lib/event/index.js'; 7 | import style from './style/index.scss'; 8 | import renderTpl from './tpl/index.js'; 9 | 10 | const componentHeader = document.querySelector('[data-component="header"]'); 11 | 12 | const headerEvent = new Event; 13 | 14 | export default { 15 | init ( response ) { 16 | let tpl = renderTpl(response.data); 17 | componentHeader.innerHTML = `${ tpl }`; 18 | document.addEventListener('click', window.util.delegate('[data-role="follow"]', function () { 19 | headerEvent.trigger('follow', ( handler ) => { 20 | handler.apply(this); 21 | }); 22 | }, 1), false); 23 | this.on = headerEvent.on.bind(headerEvent); 24 | }, 25 | destroy () { 26 | componentHeader.innerHTML = ''; 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /src/js/component/header/style/index.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: auto) { 2 | @if($width) { 3 | max-width: $width; 4 | } 5 | white-space: nowrap; 6 | word-wrap: normal; 7 | overflow: hidden; 8 | -o-text-overflow: ellipsis; 9 | text-overflow: ellipsis; 10 | text-align: left; 11 | } 12 | 13 | .live-header { 14 | position: absolute; 15 | // top: .4rem + 1.1rem; 16 | top: .15rem; 17 | left: 0; 18 | width: 100%; 19 | padding: 0 .2rem; 20 | } 21 | .live-hostInfo { 22 | float: left; 23 | position: relative; 24 | padding: .09rem .1rem; 25 | // padding-right: .06rem + .72rem + .14rem; 26 | left: .08rem; 27 | // height: 0.62rem; 28 | // padding-right: .92rem; 29 | // padding-left: .1rem; 30 | border-radius: .1rem; 31 | background: rgba(0, 0, 0, 0.2); 32 | color: #fff; 33 | font-size: 0; 34 | } 35 | .live-hostInfo__avatar { 36 | display: inline-block; 37 | vertical-align: top; 38 | width: .56rem; 39 | height: .56rem; 40 | border-radius: 50%; 41 | background-size: 100% 100%; 42 | background-repeat: no-repeat; 43 | position: relative; 44 | // top: 50%; 45 | // transform: translateY(-50%); 46 | } 47 | .live-hostInfo__cnt { 48 | margin-left: .1rem; 49 | display: inline-block; 50 | vertical-align: top; 51 | // font-size: .20rem; 52 | font-size: .24rem; 53 | line-height: .28rem; 54 | position: relative; 55 | // top: 50%; 56 | // transform: translateY(-50%); 57 | // margin-top: .04rem; 58 | } 59 | .live-hostInfo__nick { 60 | @include ellipsis(1.5rem); 61 | font-weight: 700; 62 | } 63 | .live-hostInfo__online { 64 | @include ellipsis(1.5rem); 65 | } 66 | .live-hostInfo__follow { 67 | // position: absolute; 68 | // top: 50%; 69 | // right: .06rem; 70 | // transform: translate(0, -50%); 71 | display: inline-block; 72 | margin-left: .08rem; 73 | width: .72rem; 74 | height: .56rem; 75 | line-height: .56rem; 76 | text-align: center; 77 | border-radius: .1rem; 78 | font-size: .24rem; 79 | background-color: rgba(256, 256, 256, 1); 80 | color: #2e2e2e; 81 | font-weight: 500; 82 | } 83 | .live-uid { 84 | position: absolute; 85 | // top: .05rem; 86 | top: .03rem; 87 | right: .4rem; 88 | right: .3rem; 89 | font-size: .24rem; 90 | color: #fff; 91 | // text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 92 | text-shadow: 0 0 1px rgba(0, 0, 0, 1); 93 | } 94 | -------------------------------------------------------------------------------- /src/js/component/header/tpl/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file header主播信息 3 | */ 4 | 5 | let renderTpl = (data)=>{ 6 | let tpl = ` 7 |${data.anchorNick}
11 |${data.users}人
12 |${data.anchorNick}
10 |ME号：${data.anchorId}
11 | `; 12 | return tpl; 13 | } 14 | 15 | export default renderTpl; 16 | 17 | -------------------------------------------------------------------------------- /src/js/component/player/tpl/live-in.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 直播中UI 3 | */ 4 | 5 | let renderTpl = (data)=>{ 6 | let tpl = ` 7 | 12 | 13 |下载ME立即与TA
8 |零距离实时互动
9 | 10 | `; 11 | return tpl; 12 | } 13 | 14 | export default renderTpl; 15 | 16 | -------------------------------------------------------------------------------- /src/js/lib/anim/anim.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component animjs 包含以下功能：点赞图片预加载、点赞图片分组、定义点赞的canvas样式 3 | * @author lixinliang 4 | */ 5 | 6 | import Ticker from './modules/ticker.js'; 7 | 8 | const DPR = window.devicePixelRatio || 1; 9 | 10 | let closure = {}; 11 | let storage = []; 12 | 13 | // animjs 不涉及动画的实现 调用show方法时 把图片集合交给 动画引擎处理 14 | class Anim { 15 | 16 | /** 17 | * new的时候决定该实例使用那种动画引擎 18 | * @type {String} name 动画引擎 19 | */ 20 | constructor ( name = '' ) { 21 | let canvas = document.createElement('canvas'); 22 | let context = canvas.getContext('2d'); 23 | this.canvas = canvas; 24 | this.context = context; 25 | this.id = storage.length; 26 | this.name = name; 27 | let imageSet = {}; 28 | let imageMap = {}; 29 | storage.push({ imageSet, imageMap }); 30 | let ticker = new Ticker(); 31 | ticker.on(() => { 32 | context.clearRect(0, 0, canvas.width, canvas.height); 33 | }); 34 | this.ticker = ticker; 35 | this.dpr = DPR; 36 | if (DPR > 1) { 37 | this.canvas.style['transform'] = this.canvas.style['-webkit-transform'] = `scale(${ 1/DPR })`; 38 | } 39 | } 40 | 41 | /** 42 | * 传入一组图片集合 进行预加载 43 | * @param {Object} imageSet 资源集合 { 图片id : 图片url } 44 | * @return {Anim} this anim 45 | */ 46 | mainfest ( imageSet ) { 47 | let mySet = storage[this.id].imageSet; 48 | for (let key in imageSet) { 49 | let value = imageSet[key]; 50 | let image = { 51 | url : value, 52 | status : false 53 | }; 54 | image.img = loadImage(image.url, () => { 55 | image.status = true; 56 | }); 57 | mySet[key] = image; 58 | } 59 | return this 60 | } 61 | 62 | /** 63 | * 传入图片分组的映射关系 64 | * @param {Object} imageMap 资源分组映射 { 分组id : [图片id,...] } 65 | * @return {Anim} this anim 66 | */ 67 | group ( imageMap ) { 68 | let myMap = storage[this.id].imageMap; 69 | for (let key in imageMap) { 70 | myMap[key] = imageMap[key].slice(); 71 | } 72 | return this 73 | } 74 | 75 | /** 76 | * 随机播放动画 77 | * @param {String} groupName 资源分组名 78 | * @return {Anim} this anim 79 | */ 80 | show ( groupName ) { 81 | let { imageSet, imageMap } = storage[this.id]; 82 | let images = []; 83 | imageMap[groupName].forEach((imageName) => { 84 | let image = imageSet[imageName]; 85 | if (image.status) { 86 | images.push(image.img); 87 | } 88 | }); 89 | if (this.name) { 90 | return new closure[this.name](this, images); 91 | } 92 | return this 93 | } 94 | 95 | /** 96 | * 设置宽度 97 | * @param {Number} canvasWidth 画布宽度 98 | * @return {Anim} this anim 99 | */ 100 | width ( canvasWidth ) { 101 | let result = correct(canvasWidth); 102 | if (result) { 103 | let { num, str } = result; 104 | this.canvas.width = num; 105 | this.canvas.style.width = str; 106 | } 107 | return this 108 | } 109 | 110 | /** 111 | * 设置高度 112 | * @param {Number} canvasHeight 画布高度 113 | * @return {Anim} this anim 114 | */ 115 | height ( canvasHeight ) { 116 | 117 | let result = correct(canvasHeight); 118 | if (result) { 119 | let { num, str } = result; 120 | this.canvas.height = num; 121 | this.canvas.style.height = str; 122 | } 123 | 124 | return this 125 | } 126 | } 127 | 128 | export default Anim; 129 | 130 | /** 131 | * 加载图片 132 | * @param {String} url 图片地址 133 | * @param {Function} cb 加载回调 134 | * @return {HTMLImageElement} img 图片标签 135 | */ 136 | function loadImage ( url, cb ) { 137 | let img = new Image; 138 | img.onload = cb; 139 | img.src = url; 140 | return img; 141 | }; 142 | 143 | /** 144 | * 对canvas的宽高修正 在hidpi屏上 尺寸需要加倍 145 | * @param {Number} value 尺寸 146 | * @return {Number} value 尺寸 147 | */ 148 | function correct ( value ) { 149 | value *= DPR; 150 | let num; 151 | let str; 152 | if (typeof value == 'number') { 153 | num = value; 154 | str = value + 'px'; 155 | } else if (typeof value == 'string') { 156 | str = value; 157 | num = parseInt(value); 158 | } 159 | if (num && str) { 160 | return { num, str } 161 | } else { 162 | return null 163 | } 164 | }; 165 | 166 | /** 167 | * 定义动画引擎 168 | * @param {String} name 动画引擎名 169 | * @param {Class} plugin 动画引擎 170 | */ 171 | Anim.setup = function ( name, plugin ) { 172 | closure[name] = plugin; 173 | }; 174 | -------------------------------------------------------------------------------- /src/js/lib/anim/anim.like.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component anim.like 基于 animjs 的点赞动画引擎 3 | * @author lixinliang 4 | */ 5 | 6 | import { 7 | getRandomByMedian, 8 | getRandomBetweenInt, 9 | getRandomWithBinomial, 10 | } from './modules/random.js'; 11 | 12 | // 点赞动画引擎 13 | class Like { 14 | /** 15 | * 调用 new Like 创建一个赞的动画 16 | * @param {Anim} anim Anim实例 17 | * @param {Array} images 素材集合 18 | * @return {Like} like 点赞实例 19 | */ 20 | constructor ( anim, images ) { 21 | // 从图片集合 随机抽取一张 22 | let image = images[getRandomBetweenInt(0, images.length - 1)]; 23 | 24 | this.image = image; 25 | this.canvas = anim.canvas; 26 | 27 | let DPR = this.dpr = anim.dpr; 28 | 29 | let imageWidth = image.width; 30 | let imageHeight = image.height; 31 | 32 | // @return 当前动画进度 0 ~ 100 33 | let getImageTimeline = this.createImageTimeline(); 34 | // @return 旋转后的图片 canvas 35 | let getImageData = this.createImageData(); 36 | // @return 获取当前缩放曲线 number 37 | let getImageScaleSize = this.createImageScaleSize(); 38 | // @return 获取当前透明度曲线 number 39 | let getImageOpacityValue = this.createImageOpacityValue(); 40 | // @return 获取当前位移曲线 { x, y } 41 | let getImagePathPosition = this.createImagePathPosition(); 42 | 43 | let handler = () => { 44 | let percentage = getImageTimeline(); 45 | let { imageCanvas, imageContext } = getImageData(); 46 | let scaleSize = getImageScaleSize(percentage); 47 | let globalAlpha = getImageOpacityValue(percentage); 48 | let { x, y } = getImagePathPosition(percentage); 49 | 50 | // 最后渲染的时候 再把 dpr 计算进去 51 | if (scaleSize == 1 && globalAlpha == 1) { 52 | anim.context.drawImage(imageCanvas, x * DPR, y * DPR, imageWidth * DPR, imageHeight * DPR); 53 | } else { 54 | if (globalAlpha == 1) { 55 | let scaleWidth = imageWidth * scaleSize; 56 | let deltaWidth = (imageWidth - scaleWidth) / 2; 57 | let scaleHeight = imageHeight * scaleSize; 58 | let deltaHeight = (imageHeight - scaleHeight) / 2; 59 | anim.context.drawImage(imageCanvas, (x + deltaWidth) * DPR, (y + deltaHeight) * DPR, scaleWidth * DPR, scaleHeight * DPR); 60 | } else { 61 | anim.context.globalAlpha = globalAlpha; 62 | anim.context.drawImage(imageCanvas, x * DPR, y * DPR, imageWidth * DPR, imageHeight * DPR); 63 | anim.context.globalAlpha = 1; 64 | } 65 | } 66 | if (percentage == 100) { 67 | getImageTimeline = null; 68 | getImageData = null; 69 | getImageScaleSize = null; 70 | getImageOpacityValue = null; 71 | getImagePathPosition = null; 72 | anim.ticker.off(handler); 73 | } 74 | }; 75 | anim.ticker.on(handler); 76 | } 77 | 78 | /** 79 | * 创建每一个动画的独立时间线 80 | * @return {Function} getImageTimeline 获得该动画当前时间线的函数 81 | */ 82 | createImageTimeline () { 83 | // 动画总时基数 3000ms 浮动系数 20% 84 | let originDuration = 3000; 85 | let range = 0.2; 86 | 87 | let duration = getRandomByMedian(originDuration, range); 88 | let times = Math.round(duration / 16.7); 89 | let now = 0; 90 | return () => { 91 | now++; 92 | let percentage = parseInt(now * 1000 / times) / 10; 93 | return percentage > 100 ? 100 : percentage 94 | } 95 | } 96 | 97 | /** 98 | * 创建每一个动画的独立形态 99 | * @return {Function} getImageData 获得该动画形态的对象的函数 100 | */ 101 | createImageData () { 102 | // 图像旋转幅度 -30 ~ 30deg 103 | let minRotate = -30; 104 | let maxRotate = 30; 105 | // 缩放系数的二项分布 70 ~ 120 出现95的概率最高 106 | let minScale = 70; 107 | let maxScale = 120; 108 | // 缩放最大值为105 超出105的概率以105为对称轴 添加到 90 ~ 105 的区间 109 | let maxLimitScale = 105; 110 | 111 | let image = this.image; 112 | let { width, height } = image; 113 | let rotate = getRandomBetweenInt(minRotate, maxRotate); 114 | let scale = getRandomWithBinomial(minScale, maxScale); 115 | if (scale > maxLimitScale) { 116 | scale -= (maxScale - maxLimitScale); 117 | } 118 | scale = scale / 100; 119 | 120 | let imageCanvas = document.createElement('canvas'); 121 | let imageContext = imageCanvas.getContext('2d'); 122 | 123 | // 使用离屏canvas保存旋转后的图片并多次复用 为了避免旋转后图片被切割 画布的尺寸是图片的2倍 124 | imageCanvas.width = width * 2; 125 | imageCanvas.height = height * 2; 126 | 127 | imageContext.translate(width, height); 128 | imageContext.rotate(rotate * Math.PI / 180); 129 | imageContext.scale(scale, scale); 130 | imageContext.translate(-width, -height); 131 | 132 | imageContext.drawImage(image, width / 2, height / 2, width, height); 133 | 134 | return () => ({ imageCanvas, imageContext }) 135 | } 136 | 137 | /** 138 | * 创建每一个动画的独立放大曲线 139 | * @return {Function} getImageScaleSize 获得该动画当前尺寸的函数 140 | */ 141 | createImageScaleSize () { 142 | // 完成缩放动画的百分比阶段 9 ~ 11 143 | let minAppearStage = 9; 144 | let maxAppearStage = 11; 145 | 146 | let appearStage = getRandomBetweenInt(minAppearStage, maxAppearStage); 147 | return ( percentage ) => { 148 | return percentage >= appearStage ? 1 : ((parseInt(100 * percentage / appearStage) / 100) || 0.1) 149 | } 150 | } 151 | 152 | /** 153 | * 创建每一个动画的独立透明曲线 154 | * @return {Function} getImageOpacityValue 获得该动画当前透明度的函数 155 | */ 156 | 157 | createImageOpacityValue () { 158 | // 开始淡出动画的百分比阶段 82 ~ 86 159 | let minDisappearStage = 82; 160 | let maxDisappearStage = 86; 161 | 162 | let disappearStage = getRandomBetweenInt(minDisappearStage, maxDisappearStage); 163 | let area = 100 - disappearStage; 164 | return ( percentage ) => { 165 | if (percentage < disappearStage) { 166 | return 1; 167 | } else { 168 | let opacity = ((percentage - disappearStage) / area).toFixed(2) - 0; 169 | return 1 - opacity; 170 | } 171 | } 172 | } 173 | 174 | /** 175 | * 创建每一个动画的独立位移曲线 176 | * @return {Function} getImagePathPosition 获得该动画当前位移值的函数 177 | */ 178 | createImagePathPosition () { 179 | // 以下计算均以 dpr 为 1作为参考值 180 | // 动画初始位置的横向定位的浮动系数 10% 181 | let startX = 10; 182 | // 动画纵向位移距离delta y是总距离的 95% 浮动系数 5% 183 | let deltaY = 0.95; 184 | let deltaYRange = 1 - deltaY; 185 | // 动画横向位移距离符合正弦曲线 正弦波峰最小值10% 最大值15% 186 | let minCrest = 10; 187 | let maxCrest = 15; 188 | // 正弦波长系数 最小值16 最大值32 189 | let minWavelength = 16; 190 | let maxWavelength = 32; 191 | 192 | let DPR = this.dpr; 193 | // @2x 图片要先砍半 194 | let imageWidth = this.image.width / 2; 195 | let imageHeight = this.image.height / 2; 196 | // 画布尺寸根据dpr计算 197 | let canvasWidth = this.canvas.width / DPR; 198 | let canvasHeight = this.canvas.height / DPR; 199 | // console.log(imageWidth, imageHeight, canvasWidth, canvasHeight); 200 | let originX = canvasWidth * (0.5 + getRandomBetweenInt(-startX, startX) / 100); 201 | let originY = canvasHeight; 202 | // 初始值居中是画布总长度减去图片长度后的一半 203 | // 再减去旋转的偏移量 也是图片尺寸的一半 204 | // 刚好减去一倍的图片尺寸 205 | originX -= imageWidth; 206 | originY -= imageHeight; 207 | 208 | let translateX = canvasWidth * getRandomBetweenInt(minCrest, maxCrest) / 100; 209 | let translateY = getRandomByMedian(originY * deltaY, deltaYRange); 210 | 211 | let wavelength = getRandomBetweenInt(minWavelength, maxWavelength); 212 | 213 | // 方向是 -1/1 214 | let direction = getRandomBetweenInt(0, 1) * 2 - 1; 215 | 216 | return ( percentage ) => { 217 | let x = originX + translateX * Math.sin(percentage / wavelength) * direction; 218 | let y = originY - translateY * percentage / 100; 219 | return { x, y } 220 | } 221 | } 222 | } 223 | 224 | export default Like; 225 | -------------------------------------------------------------------------------- /src/js/lib/anim/custom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc 把点赞源码打包成一个js 可以提供给其他团队快速使用 3 | * @version 订制版 开发者自定义点赞图片 4 | * @author lixinliang 5 | * @doc 使用文档等待补充 6 | */ 7 | 8 | import Anim from 'anim'; 9 | import Like from 'anim.like'; 10 | 11 | // 把点赞引擎添加 animjs 上 12 | Anim.setup('like', Like); 13 | // 创建实例 14 | let anim = new Anim('like'); 15 | // 设置尺寸 16 | anim.width(60).height(280); 17 | // 设置资源 18 | let base64 = { 19 | user01 : require('../../../assets/like/heart/user/like01.png'), 20 | user02 : require('../../../assets/like/heart/user/like02.png'), 21 | user03 : require('../../../assets/like/heart/user/like03.png'), 22 | audience01 : require('../../../assets/like/heart/audience/like01.png'), 23 | audience02 : require('../../../assets/like/heart/audience/like02.png'), 24 | audience03 : require('../../../assets/like/heart/audience/like03.png'), 25 | audience04 : require('../../../assets/like/heart/audience/like04.png'), 26 | audience05 : require('../../../assets/like/heart/audience/like05.png'), 27 | audience06 : require('../../../assets/like/heart/audience/like06.png'), 28 | audience07 : require('../../../assets/like/heart/audience/like07.png'), 29 | }; 30 | // 设置资源集合 与 映射分组 31 | anim.mainfest(mainfest()).group(mainfest.group); 32 | 33 | export default anim; 34 | 35 | function mainfest () { 36 | let result = {}; 37 | let user = append.call(result, 'user', 3); 38 | let audience = append.call(result, 'audience', 7); 39 | // let user = result::append('user', 3); 40 | // let audience = result::append('audience', 7); 41 | // let user = mainfest::append('user', 6); 42 | // let audience = user; 43 | mainfest.group = { user, audience }; 44 | return result; 45 | } 46 | 47 | function append ( directory, length ) { 48 | const baseImageUrl = './assets/like/heart/'; 49 | // const baseImageUrl = './assets/like/luhan/'; 50 | const defaultFileName = 'like'; 51 | const defaultFileType = 'png'; 52 | return Array.apply(null, { length }).map((value, index) => fixed(index + 1 + '')).map((id) => { 53 | let key = directory + id; 54 | // this[key] = [baseImageUrl, directory, '/', defaultFileName, id, '.', defaultFileType].join(''); 55 | this[key] = base64[key]; 56 | return key; 57 | }); 58 | } 59 | 60 | function fixed ( value ) { 61 | return value.length == 1 ? '0' + value : value; 62 | } 63 | 64 | export default anim; 65 | -------------------------------------------------------------------------------- /src/js/lib/anim/modules/random.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 在区间 [min, max] 上的等概率随机整数 4 | * @param {Number} min 最小值 5 | * @param {Number} max 最大值 6 | * @return {Number} value 随机数 7 | */ 8 | let getRandomBetweenInt = function ( min, max ) { 9 | min = parseInt(min) || 0; 10 | max = parseInt(max) || 0; 11 | if (min > max) { 12 | [min, max] = [max, min]; 13 | } 14 | let value = min + Math.round(Math.random() * (max + 1 - min)); 15 | return value == max + 1 ? min : value; 16 | }; 17 | 18 | /** 19 | * 以 value 为中数上下浮动 percentage 的区间上的等概率随机整数 20 | * @param {Number} value 中数 21 | * @param {Number} percentage 浮动系数 22 | * @return {Number} value 随机数 23 | */ 24 | let getRandomByMedian = function ( value, percentage ) { 25 | value = parseInt(value) || 0; 26 | if (percentage < 0) { 27 | percentage = 0; 28 | } 29 | if (percentage > 1) { 30 | percentage = 1; 31 | } 32 | return getRandomBetweenInt(value * (1 - percentage), value * (1 + percentage)); 33 | }; 34 | 35 | /** 36 | * 在区间 [min, max] 上的遵循二项分布的随机整数 其中中数概率最高 37 | * @param {Number} min 最小值 38 | * @param {Number} max 最大值 39 | * @return {Number} value 随机数 40 | */ 41 | let getRandomWithBinomial = function ( min, max ) { 42 | min = parseInt(min) || 0; 43 | max = parseInt(max) || 0; 44 | if (min > max) { 45 | [min, max] = [max, min]; 46 | } 47 | let median = parseInt((max - min) / 2); 48 | return min + getRandomBetweenInt(0, median) + getRandomBetweenInt(0, median); 49 | }; 50 | 51 | export { 52 | getRandomByMedian, 53 | getRandomBetweenInt, 54 | getRandomWithBinomial, 55 | }; 56 | -------------------------------------------------------------------------------- /src/js/lib/anim/modules/ticker.js: -------------------------------------------------------------------------------- 1 | const TICK = 'tick'; 2 | const TICKER = new Event(TICK); 3 | 4 | let elements = []; 5 | 6 | let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || ((fn) => setTimeout(fn, 16)); 7 | 8 | let looper = () => { 9 | elements.forEach((elem) => elem.dispatchEvent(TICKER)); 10 | requestAnimationFrame(looper); 11 | }; 12 | 13 | requestAnimationFrame(looper); 14 | 15 | class Ticker { 16 | constructor () { 17 | this.elem = document.createElement('div'); 18 | elements.push(this.elem); 19 | } 20 | on ( fn ) { 21 | this.elem.addEventListener(TICK, fn, false); 22 | return this 23 | } 24 | off ( fn ) { 25 | this.elem.removeEventListener(TICK, fn, false); 26 | return this 27 | } 28 | } 29 | 30 | export default Ticker; 31 | -------------------------------------------------------------------------------- /src/js/lib/classlist-polyfill/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * classList.js: Cross-browser full element.classList implementation. 3 | * 1.1.20170427 4 | * 5 | * By Eli Grey, http://eligrey.com 6 | * License: Dedicated to the public domain. 7 | * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md 8 | */ 9 | 10 | /*global self, document, DOMException */ 11 | 12 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ 13 | 14 | if ("document" in window.self) { 15 | 16 | // Full polyfill for browsers with no classList support 17 | // Including IE < Edge missing SVGElement.classList 18 | if (!("classList" in document.createElement("_")) 19 | || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) { 20 | 21 | (function (view) { 22 | 23 | "use strict"; 24 | 25 | if (!('Element' in view)) return; 26 | 27 | var 28 | classListProp = "classList" 29 | , protoProp = "prototype" 30 | , elemCtrProto = view.Element[protoProp] 31 | , objCtr = Object 32 | , strTrim = String[protoProp].trim || function () { 33 | return this.replace(/^\s+|\s+$/g, ""); 34 | } 35 | , arrIndexOf = Array[protoProp].indexOf || function (item) { 36 | var 37 | i = 0 38 | , len = this.length 39 | ; 40 | for (; i < len; i++) { 41 | if (i in this && this[i] === item) { 42 | return i; 43 | } 44 | } 45 | return -1; 46 | } 47 | // Vendors: please allow content code to instantiate DOMExceptions 48 | , DOMEx = function (type, message) { 49 | this.name = type; 50 | this.code = DOMException[type]; 51 | this.message = message; 52 | } 53 | , checkTokenAndGetIndex = function (classList, token) { 54 | if (token === "") { 55 | throw new DOMEx( 56 | "SYNTAX_ERR" 57 | , "An invalid or illegal string was specified" 58 | ); 59 | } 60 | if (/\s/.test(token)) { 61 | throw new DOMEx( 62 | "INVALID_CHARACTER_ERR" 63 | , "String contains an invalid character" 64 | ); 65 | } 66 | return arrIndexOf.call(classList, token); 67 | } 68 | , ClassList = function (elem) { 69 | var 70 | trimmedClasses = strTrim.call(elem.getAttribute("class") || "") 71 | , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] 72 | , i = 0 73 | , len = classes.length 74 | ; 75 | for (; i < len; i++) { 76 | this.push(classes[i]); 77 | } 78 | this._updateClassName = function () { 79 | elem.setAttribute("class", this.toString()); 80 | }; 81 | } 82 | , classListProto = ClassList[protoProp] = [] 83 | , classListGetter = function () { 84 | return new ClassList(this); 85 | } 86 | ; 87 | // Most DOMException implementations don't allow calling DOMException's toString() 88 | // on non-DOMExceptions. Error's toString() is sufficient here. 89 | DOMEx[protoProp] = Error[protoProp]; 90 | classListProto.item = function (i) { 91 | return this[i] || null; 92 | }; 93 | classListProto.contains = function (token) { 94 | token += ""; 95 | return checkTokenAndGetIndex(this, token) !== -1; 96 | }; 97 | classListProto.add = function () { 98 | var 99 | tokens = arguments 100 | , i = 0 101 | , l = tokens.length 102 | , token 103 | , updated = false 104 | ; 105 | do { 106 | token = tokens[i] + ""; 107 | if (checkTokenAndGetIndex(this, token) === -1) { 108 | this.push(token); 109 | updated = true; 110 | } 111 | } 112 | while (++i < l); 113 | 114 | if (updated) { 115 | this._updateClassName(); 116 | } 117 | }; 118 | classListProto.remove = function () { 119 | var 120 | tokens = arguments 121 | , i = 0 122 | , l = tokens.length 123 | , token 124 | , updated = false 125 | , index 126 | ; 127 | do { 128 | token = tokens[i] + ""; 129 | index = checkTokenAndGetIndex(this, token); 130 | while (index !== -1) { 131 | this.splice(index, 1); 132 | updated = true; 133 | index = checkTokenAndGetIndex(this, token); 134 | } 135 | } 136 | while (++i < l); 137 | 138 | if (updated) { 139 | this._updateClassName(); 140 | } 141 | }; 142 | classListProto.toggle = function (token, force) { 143 | token += ""; 144 | 145 | var 146 | result = this.contains(token) 147 | , method = result ? 148 | force !== true && "remove" 149 | : 150 | force !== false && "add" 151 | ; 152 | 153 | if (method) { 154 | this[method](token); 155 | } 156 | 157 | if (force === true || force === false) { 158 | return force; 159 | } else { 160 | return !result; 161 | } 162 | }; 163 | classListProto.toString = function () { 164 | return this.join(" "); 165 | }; 166 | 167 | if (objCtr.defineProperty) { 168 | var classListPropDesc = { 169 | get: classListGetter 170 | , enumerable: true 171 | , configurable: true 172 | }; 173 | try { 174 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 175 | } catch (ex) { // IE 8 doesn't support enumerable:true 176 | // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36 177 | // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected 178 | if (ex.number === undefined || ex.number === -0x7FF5EC54) { 179 | classListPropDesc.enumerable = false; 180 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 181 | } 182 | } 183 | } else if (objCtr[protoProp].__defineGetter__) { 184 | elemCtrProto.__defineGetter__(classListProp, classListGetter); 185 | } 186 | 187 | }(window.self)); 188 | 189 | } 190 | 191 | // There is full or partial native classList support, so just check if we need 192 | // to normalize the add/remove and toggle APIs. 193 | 194 | (function () { 195 | "use strict"; 196 | 197 | var testElement = document.createElement("_"); 198 | 199 | testElement.classList.add("c1", "c2"); 200 | 201 | // Polyfill for IE 10/11 and Firefox <26, where classList.add and 202 | // classList.remove exist but support only one argument at a time. 203 | if (!testElement.classList.contains("c2")) { 204 | var createMethod = function(method) { 205 | var original = DOMTokenList.prototype[method]; 206 | 207 | DOMTokenList.prototype[method] = function(token) { 208 | var i, len = arguments.length; 209 | 210 | for (i = 0; i < len; i++) { 211 | token = arguments[i]; 212 | original.call(this, token); 213 | } 214 | }; 215 | }; 216 | createMethod('add'); 217 | createMethod('remove'); 218 | } 219 | 220 | testElement.classList.toggle("c3", false); 221 | 222 | // Polyfill for IE 10 and Firefox <24, where classList.toggle does not 223 | // support the second argument. 224 | if (testElement.classList.contains("c3")) { 225 | var _toggle = DOMTokenList.prototype.toggle; 226 | 227 | DOMTokenList.prototype.toggle = function(token, force) { 228 | if (1 in arguments && !this.contains(token) === !force) { 229 | return force; 230 | } else { 231 | return _toggle.call(this, token); 232 | } 233 | }; 234 | 235 | } 236 | 237 | testElement = null; 238 | }()); 239 | 240 | } 241 | -------------------------------------------------------------------------------- /src/js/lib/delegate/index.js: -------------------------------------------------------------------------------- 1 | if (!Element.prototype.matches) { 2 | Element.prototype.matches = 3 | Element.prototype.matchesSelector || 4 | Element.prototype.webkitMatchesSelector || 5 | function(s) { 6 | var matches = (this.document || this.ownerDocument).querySelectorAll(s), 7 | i = matches.length; 8 | while (--i >= 0 && matches.item(i) !== this) {} 9 | return i > -1; 10 | }; 11 | } 12 | 13 | export default function delegate ( selector, handler, counter ) { 14 | if (counter) { 15 | let callback = function ( event ) { 16 | for (let target = event.target; target && target != this; target = target.parentNode) { 17 | if (target.matches(selector)) { 18 | counter--; 19 | if (!counter) { 20 | this.removeEventListener(event.type, callback, false); 21 | } 22 | return handler.apply(target, arguments); 23 | } 24 | } 25 | }; 26 | return callback; 27 | } 28 | return function ( event ) { 29 | for (let target = event.target; target && target != this; target = target.parentNode) { 30 | if (target.matches(selector)) { 31 | return handler.apply(target, arguments); 32 | } 33 | } 34 | }; 35 | }; 36 | -------------------------------------------------------------------------------- /src/js/lib/event/index.js: -------------------------------------------------------------------------------- 1 | export default class Event { 2 | constructor() { 3 | this.handlers = {}; 4 | } 5 | on ( type, handler ) { 6 | let handlers = this.handlers; 7 | if (handlers[type]) { 8 | handlers[type].push(handler); 9 | } else { 10 | handlers[type] = [handler]; 11 | } 12 | return this; 13 | } 14 | trigger ( type, callback ) { 15 | let handlers = this.handlers; 16 | if (handlers[type] instanceof Array) { 17 | handlers[type].forEach(( handler ) => { 18 | callback(handler); 19 | }); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/js/lib/jsonp/index.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var JSONP, computedUrl, createElement, encode, noop, objectToURI, random, randomString; 3 | 4 | createElement = function(tag) { 5 | return window.document.createElement(tag); 6 | }; 7 | 8 | encode = window.encodeURIComponent; 9 | 10 | random = Math.random; 11 | 12 | JSONP = function(options) { 13 | var callback, callbackFunc, callbackName, done, head, params, script; 14 | if (options == null) { 15 | options = {}; 16 | } 17 | params = { 18 | data: options.data || {}, 19 | error: options.error || noop, 20 | success: options.success || noop, 21 | beforeSend: options.beforeSend || noop, 22 | complete: options.complete || noop, 23 | url: options.url || '' 24 | }; 25 | params.computedUrl = computedUrl(params); 26 | if (params.url.length === 0) { 27 | throw new Error('MissingUrl'); 28 | } 29 | done = false; 30 | if (params.beforeSend({}, params) !== false) { 31 | callbackName = options.callbackName || 'callback'; 32 | callbackFunc = options.callbackFunc || 'jsonp_' + randomString(15); 33 | callback = params.data[callbackName] = callbackFunc; 34 | window[callback] = function(data) { 35 | window[callback] = null; 36 | params.success(data, params); 37 | return params.complete(data, params); 38 | }; 39 | script = createElement('script'); 40 | script.src = computedUrl(params); 41 | script.async = true; 42 | 43 | script.onerror = function(evt) { 44 | params.error({ 45 | url: script.src, 46 | event: evt 47 | }); 48 | return params.complete({ 49 | url: script.src, 50 | event: evt 51 | }, params); 52 | }; 53 | script.onload = script.onreadystatechange = function() { 54 | var ref, ref1; 55 | 56 | if (done) { 57 | return; 58 | } 59 | done = true; 60 | if (script) { 61 | script.onload = script.onreadystatechange = null; 62 | if ((ref1 = script.parentNode) != null) { 63 | ref1.removeChild(script); 64 | } 65 | return script = null; 66 | } 67 | }; 68 | head = window.document.getElementsByTagName('head')[0] || window.document.documentElement; 69 | head.insertBefore(script, head.firstChild); 70 | } 71 | return { 72 | abort: function() { 73 | window[callback] = function() { 74 | return window[callback] = null; 75 | }; 76 | done = true; 77 | if (script != null ? script.parentNode : void 0) { 78 | script.onload = script.onreadystatechange = null; 79 | script.parentNode.removeChild(script); 80 | return script = null; 81 | } 82 | } 83 | }; 84 | }; 85 | 86 | noop = function() { 87 | return void 0; 88 | }; 89 | 90 | computedUrl = function(params) { 91 | var url; 92 | url = params.url; 93 | url += params.url.indexOf('?') < 0 ? '?' : '&'; 94 | url += objectToURI(params.data); 95 | return url; 96 | }; 97 | 98 | randomString = function(length) { 99 | var str; 100 | str = ''; 101 | while (str.length < length) { 102 | str += random().toString(36).slice(2, 3); 103 | } 104 | return str; 105 | }; 106 | 107 | objectToURI = function(obj) { 108 | var data, key, value; 109 | data = (function() { 110 | var results; 111 | results = []; 112 | for (key in obj) { 113 | value = obj[key]; 114 | results.push(encode(key) + '=' + encode(value)); 115 | } 116 | return results; 117 | })(); 118 | return data.join('&'); 119 | }; 120 | 121 | if (typeof define !== "undefined" && define !== null ? define.amd : void 0) { 122 | define(function() { 123 | return JSONP; 124 | }); 125 | } else if (typeof module !== "undefined" && module !== null ? module.exports : void 0) { 126 | module.exports = JSONP; 127 | } else { 128 | this.JSONP = JSONP; 129 | } 130 | 131 | }).call(this); 132 | -------------------------------------------------------------------------------- /src/js/lib/lazy-load-img/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * version: 3.0.6 3 | * github：https://github.com/lzxb/lazy-load-img 4 | */ 5 | 6 | (function (global, factory) { 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 8 | typeof define === 'function' && define.amd ? define(factory) : 9 | (global.LazyLoadImg = factory()); 10 | }(this, (function () { 'use strict'; 11 | 12 | var testMeet = function (el) { 13 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 14 | 15 | // 取得元素在可视区的位置（相对浏览器视窗）左右上下 16 | var bcr = el.getBoundingClientRect 17 | // padding+border+width 18 | ();var mw = el.offsetWidth; // 元素自身宽度 19 | var mh = el.offsetHeight; // 元素自身的高度 20 | // 包含了导航栏 21 | var w = window.innerWidth; // 视窗的宽度 22 | var h = window.innerHeight; // 视窗的高度 23 | 24 | var boolX = !(bcr.right - options.left <= 0 && bcr.left + mw - options.left <= 0) && !(bcr.left + options.right >= w && bcr.right + options.right >= mw + w); // 左右符合条件 25 | var boolY = !(bcr.bottom - options.top <= 0 && bcr.top + mh - options.top <= 0) && !(bcr.top + options.bottom >= h && bcr.bottom + options.bottom >= mh + h); // 上下符合条件 26 | return el.width !== 0 && el.height !== 0 && boolX && boolY; 27 | }; 28 | 29 | var canvas = document.createElement('canvas'); 30 | canvas.getContext('2d').globalAlpha = 0.0; 31 | var images = {}; 32 | 33 | var getTransparent = function (src, w, h) { 34 | if (images[src]) return images[src]; 35 | canvas.width = w; 36 | canvas.height = h; 37 | var data = canvas.toDataURL('image/png'); 38 | images[src] = data; 39 | return data; 40 | }; 41 | 42 | var classCallCheck = function (instance, Constructor) { 43 | if (!(instance instanceof Constructor)) { 44 | throw new TypeError("Cannot call a class as a function"); 45 | } 46 | }; 47 | 48 | var createClass = function () { 49 | function defineProperties(target, props) { 50 | for (var i = 0; i < props.length; i++) { 51 | var descriptor = props[i]; 52 | descriptor.enumerable = descriptor.enumerable || false; 53 | descriptor.configurable = true; 54 | if ("value" in descriptor) descriptor.writable = true; 55 | Object.defineProperty(target, descriptor.key, descriptor); 56 | } 57 | } 58 | 59 | return function (Constructor, protoProps, staticProps) { 60 | if (protoProps) defineProperties(Constructor.prototype, protoProps); 61 | if (staticProps) defineProperties(Constructor, staticProps); 62 | return Constructor; 63 | }; 64 | }(); 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | var _extends = Object.assign || function (target) { 73 | for (var i = 1; i < arguments.length; i++) { 74 | var source = arguments[i]; 75 | 76 | for (var key in source) { 77 | if (Object.prototype.hasOwnProperty.call(source, key)) { 78 | target[key] = source[key]; 79 | } 80 | } 81 | } 82 | 83 | return target; 84 | }; 85 | 86 | var _win = window; 87 | 88 | var LazyLoadImg = function () { 89 | // 构造函数 初始化参数 90 | function LazyLoadImg() { 91 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 92 | classCallCheck(this, LazyLoadImg); 93 | 94 | this.options = { 95 | el: document.querySelector('body'), // 选择的元素 96 | mode: 'default', // 默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分 97 | time: 300, // 设置一个检测时间间隔 98 | done: true, // 页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁：FALSE应用场景：页面异步不断获取数据的情况下 需要实时监听则不销毁 99 | diy: { // 此属性，只有在设置diy 模式时才生效 100 | backgroundSize: 'cover', 101 | backgroundRepeat: 'no-repeat', 102 | backgroundPosition: 'center center' 103 | }, 104 | position: { // 只要其中一个位置符合条件，都会触发加载机制 105 | top: 0, // 元素距离顶部 106 | right: 0, // 元素距离右边 107 | bottom: 0, // 元素距离下面 108 | left: 0 // 元素距离左边 109 | }, 110 | before: function before(el) {// 图片加载之前，执行钩子函数 111 | 112 | }, 113 | success: function success(el) {// 图片加载成功，执行钩子函数 114 | 115 | }, 116 | error: function error(el) {// 图片加载失败，执行的钩子函数 117 | 118 | } 119 | }; 120 | // 深拷贝 如果都有 则右面的值 option.position会覆盖this.options.position 121 | options.position = _extends({}, this.options.position, options.position); 122 | options.diy = _extends({}, this.options.diy, options.diy); 123 | _extends(this.options, options); 124 | this.start(); 125 | } 126 | 127 | createClass(LazyLoadImg, [{ 128 | key: 'start', 129 | value: function start() { 130 | this._timer = true; 131 | this._start(); 132 | } 133 | }, { 134 | key: '_start', 135 | value: function _start() { 136 | var _this = this; 137 | 138 | var options = this.options; 139 | 140 | clearTimeout(this._timer // 清除定时器 141 | );if (!this._timer) return; 142 | this._timer = setTimeout(function () { 143 | var list = Array.prototype.slice.apply(options.el.querySelectorAll('[data-src]')); 144 | if (!list.length && options.done) return clearTimeout(_this._timer); 145 | list.forEach(function (el) { 146 | if (!el.dataset.LazyLoadImgState && testMeet(el, options.position)) { 147 | _this.loadImg(el); 148 | } 149 | }); 150 | _this._start(); 151 | }, options.time); 152 | } 153 | }, { 154 | key: 'loadImg', 155 | value: function loadImg(el) { 156 | var _this2 = this; 157 | 158 | // 加载图片 159 | var options = this.options; 160 | 161 | el.dataset.LazyLoadImgState = 'start'; 162 | options.before.call(this, el); 163 | var img = new _win.Image(); 164 | img.src = el.dataset.src; 165 | // 图片加载成功 166 | img.addEventListener('load', function () { 167 | if (options.mode === 'diy') { 168 | el.src = getTransparent(el.src, el.width, el.height); 169 | options.diy.backgroundImage = 'url(' + img.src + ')'; 170 | _extends(el.style, options.diy); 171 | } else { 172 | el.src = img.src; 173 | } 174 | delete el.dataset.src; 175 | delete el.dataset.LazyLoadImgState; 176 | return options.success.call(_this2, el); 177 | }, false 178 | 179 | // 图片加载失败 180 | );img.addEventListener('error', function () { 181 | delete el.dataset.src; 182 | delete el.dataset.LazyLoadImgState; 183 | options.error.call(_this2, el); 184 | }, false); 185 | } 186 | }, { 187 | key: 'destroy', 188 | value: function destroy() { 189 | // 解除事件绑定 190 | delete this._timer; 191 | } 192 | }]); 193 | return LazyLoadImg; 194 | }(); 195 | 196 | return LazyLoadImg; 197 | 198 | }))); 199 | 200 | -------------------------------------------------------------------------------- /src/js/lib/queue/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @component 队列 3 | * @author wilson 4 | */ 5 | 6 | (function () { 7 | 8 | var queue = {}; 9 | function noop() {} 10 | 11 | var previous_async; 12 | 13 | var root = typeof self === 'object' && self.self === self && self || 14 | typeof global === 'object' && global.global === global && global || 15 | this; 16 | 17 | if (root != null) { 18 | previous_async = root.queue; 19 | } 20 | 21 | function only_once(fn) { 22 | return function() { 23 | if (fn === null) throw new Error("Callback was already called."); 24 | fn.apply(this, arguments); 25 | fn = null; 26 | }; 27 | } 28 | 29 | var _toString = Object.prototype.toString; 30 | 31 | var _isArray = Array.isArray || function (obj) { 32 | return _toString.call(obj) === '[object Array]'; 33 | }; 34 | 35 | function _arrayEach(arr, iterator) { 36 | var index = -1, 37 | length = arr.length; 38 | 39 | while (++index < length) { 40 | iterator(arr[index], index, arr); 41 | } 42 | } 43 | 44 | function _map(arr, iterator) { 45 | var index = -1, 46 | length = arr.length, 47 | result = Array(length); 48 | 49 | while (++index < length) { 50 | result[index] = iterator(arr[index], index, arr); 51 | } 52 | return result; 53 | } 54 | 55 | var _setImmediate = typeof setImmediate === 'function' && setImmediate; 56 | 57 | var _delay = _setImmediate ? function(fn) { 58 | // not a direct alias for IE10 compatibility 59 | _setImmediate(fn); 60 | } : function(fn) { 61 | setTimeout(fn, 0); 62 | }; 63 | 64 | queue.setImmediate = _delay; 65 | 66 | function _queue(worker, concurrency, payload) { 67 | if (concurrency == null) { 68 | concurrency = 1; 69 | } 70 | else if(concurrency === 0) { 71 | throw new Error('Concurrency must not be zero'); 72 | } 73 | function _insert(q, data, pos, callback) { 74 | if (callback != null && typeof callback !== "function") { 75 | throw new Error("task callback must be a function"); 76 | } 77 | q.started = true; 78 | if (!_isArray(data)) { 79 | data = [data]; 80 | } 81 | if(data.length === 0 && q.idle()) { 82 | // call drain immediately if there are no tasks 83 | return queue.setImmediate(function() { 84 | q.drain(); 85 | }); 86 | } 87 | _arrayEach(data, function(task) { 88 | var item = { 89 | data: task, 90 | callback: callback || noop 91 | }; 92 | 93 | if (pos) { 94 | q.tasks.unshift(item); 95 | } else { 96 | q.tasks.push(item); 97 | } 98 | 99 | if (q.tasks.length === q.concurrency) { 100 | q.saturated(); 101 | } 102 | }); 103 | queue.setImmediate(q.process); 104 | } 105 | function _next(q, tasks) { 106 | return function(){ 107 | workers -= 1; 108 | 109 | var removed = false; 110 | var args = arguments; 111 | _arrayEach(tasks, function (task) { 112 | _arrayEach(workersList, function (worker, index) { 113 | if (worker === task && !removed) { 114 | workersList.splice(index, 1); 115 | removed = true; 116 | } 117 | }); 118 | 119 | task.callback.apply(task, args); 120 | }); 121 | if (q.tasks.length + workers === 0) { 122 | q.drain(); 123 | } 124 | q.process(); 125 | }; 126 | } 127 | 128 | var workers = 0; 129 | var workersList = []; 130 | var q = { 131 | tasks: [], 132 | concurrency: concurrency, 133 | payload: payload, 134 | saturated: noop, 135 | empty: noop, 136 | drain: noop, 137 | started: false, 138 | paused: false, 139 | push: function (data, callback) { 140 | _insert(q, data, false, callback); 141 | }, 142 | unshift: function (data, callback) { 143 | _insert(q, data, true, callback); 144 | }, 145 | process: function () { 146 | while(!q.paused && workers < q.concurrency && q.tasks.length){ 147 | 148 | var tasks = q.payload ? 149 | q.tasks.splice(0, q.payload) : 150 | q.tasks.splice(0, q.tasks.length); 151 | 152 | var data = _map(tasks, function (task) { 153 | return task.data; 154 | }); 155 | 156 | if (q.tasks.length === 0) { 157 | q.empty(); 158 | } 159 | workers += 1; 160 | workersList.push(tasks[0]); 161 | var cb = only_once(_next(q, tasks)); 162 | worker(data, cb); 163 | } 164 | }, 165 | length: function () { 166 | return q.tasks.length; 167 | }, 168 | running: function () { 169 | return workers; 170 | }, 171 | workersList: function () { 172 | return workersList; 173 | }, 174 | idle: function() { 175 | return q.tasks.length + workers === 0; 176 | }, 177 | pause: function () { 178 | q.paused = true; 179 | }, 180 | resume: function () { 181 | if (q.paused === false) { return; } 182 | q.paused = false; 183 | var resumeCount = Math.min(q.concurrency, q.tasks.length); 184 | // Need to call q.process once per concurrent 185 | // worker to preserve full concurrency after pause 186 | for (var w = 1; w <= resumeCount; w++) { 187 | queue.setImmediate(q.process); 188 | } 189 | } 190 | }; 191 | return q; 192 | } 193 | 194 | queue.queue = function (worker, concurrency) { 195 | var q = _queue(function (items, cb) { 196 | worker(items[0], cb); 197 | }, concurrency, 1); 198 | 199 | return q; 200 | }; 201 | 202 | module.exports = queue; 203 | 204 | }()); 205 | -------------------------------------------------------------------------------- /src/js/lib/scrollTo/index.js: -------------------------------------------------------------------------------- 1 | export default function scrollTo ( direction, config ) { 2 | let { elem, speed = 20, interval = 16, transition = true } = config; 3 | return new Promise(( resolve ) => { 4 | if (transition) { 5 | let scrolling = true; 6 | let now = elem.scrollTop; 7 | let next = () => { 8 | let destination; 9 | if (direction == 'top') { 10 | destination = 0; 11 | now -= speed; 12 | if (now < destination) { 13 | now = destination; 14 | scrolling = false; 15 | } 16 | } else { 17 | destination = elem.scrollHeight; 18 | now += speed; 19 | if (now > destination) { 20 | now = destination; 21 | scrolling = false; 22 | } 23 | } 24 | elem.scrollTop = now; 25 | if (scrolling) { 26 | setTimeout(next, interval); 27 | } else { 28 | resolve(); 29 | } 30 | }; 31 | next(); 32 | } else { 33 | if (direction == 'top') { 34 | elem.scrollTop = 0; 35 | } else { 36 | elem.scrollTop = elem.scrollHeight; 37 | } 38 | resolve(); 39 | } 40 | }); 41 | } 42 | -------------------------------------------------------------------------------- /src/js/lib/sprite/index.js: -------------------------------------------------------------------------------- 1 | // 从时序图尺寸 动态生成动画函数 2 | 3 | let record = {}; 4 | 5 | export default function ( elem, src, duration ) { 6 | return new Promise(( resolve ) => { 7 | let img = new Image; 8 | img.onload = onload; 9 | img.src = src; 10 | elem.dataset.status = 'pause'; 11 | function onload () { 12 | let frame; 13 | let direction; 14 | if (this.width > this.height) { 15 | direction = 'x'; 16 | frame = Math.round(this.width / this.height); 17 | // elem.style['background-size'] = `auto ${ getComputedStyle(elem).width }`; 18 | elem.style['background-size'] = `auto 100%`; 19 | } else { 20 | direction = 'y'; 21 | frame = Math.round(this.height / this.width); 22 | // elem.style['background-size'] = `${ getComputedStyle(elem).height } auto`; 23 | elem.style['background-size'] = `100% auto`; 24 | } 25 | elem.dataset.frame = frame; 26 | elem.dataset.direction = direction; 27 | elem.style['background-image'] = `url(${ src })`; 28 | let unique = direction + frame; 29 | if (!record[unique]) { 30 | record[unique] = true; 31 | let style = document.createElement('style'); 32 | style.innerHTML = ` 33 | [data-status="play"][data-frame="${ frame }"][data-direction="${ direction }"] { 34 | animation-duration: ${ duration * frame }ms; 35 | -webkit-animation-duration: ${ duration * frame }ms; 36 | animation-name: spirit-animation-${ unique }; 37 | -webkit-animation-name: spirit-animation-${ unique }; 38 | animation-timing-function: steps(${ frame }); 39 | -webkit-animation-timing-function: steps(${ frame }); 40 | animation-iteration-count: infinite; 41 | -webkit-animation-iteration-count: infinite; 42 | } 43 | @keyframes spirit-animation-${ unique } { 44 | 0% { 45 | background-position: 0 0; 46 | } 47 | 100% { 48 | background-position: ${ direction == 'x' ? `-${ frame }00% 0` : `0 -${ frame }00%` }; 49 | } 50 | } 51 | @-webkit-keyframes spirit-animation-${ unique } { 52 | 0% { 53 | background-position: 0 0; 54 | } 55 | 100% { 56 | background-position: ${ direction == 'x' ? `-${ frame }00% 0` : `0 -${ frame }00%` }; 57 | } 58 | } 59 | `; 60 | document.head.appendChild(style); 61 | } 62 | resolve(); 63 | } 64 | }); 65 | }; 66 | -------------------------------------------------------------------------------- /src/js/lib/svga/svga-db.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @project : svga-web-canvas 3 | * @version : 0.0.1 4 | * @author : UED.lijialiang 5 | * @update : 2016-10-21 9:35:38 am 6 | * @email : lijialiang@yy.com 7 | */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SvgaDb=t():e.SvgaDb=t()}(this,function(){return function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a,r,o=function(){function e(e,t){for(var n=0;n