From c8baba77fedd447436bda183394b6dcee9fd1432 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Fri, 10 May 2019 00:22:27 +0800 Subject: [PATCH] =?UTF-8?q?JS=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/filter.js | 4 +- .../yilia/source-src/config/photo-wall.json | 30 ---- themes/yilia/source-src/js/anm.js | 162 +++++++++--------- themes/yilia/source-src/js/browser.js | 4 +- themes/yilia/source-src/js/comment.js | 8 +- themes/yilia/source-src/js/mobile.js | 20 +-- themes/yilia/source-src/js/photo-wall.js | 45 +++-- themes/yilia/source-src/js/share.js | 18 +- themes/yilia/source-src/js/slider.js | 4 +- themes/yilia/source-src/js/util.js | 36 ++-- themes/yilia/source-src/js/viewer.js | 4 +- themes/yilia/source-src/js/waifu.js | 4 +- 12 files changed, 166 insertions(+), 173 deletions(-) delete mode 100644 themes/yilia/source-src/config/photo-wall.json diff --git a/scripts/filter.js b/scripts/filter.js index 4ffb21e..a01f1e5 100644 --- a/scripts/filter.js +++ b/scripts/filter.js @@ -5,5 +5,5 @@ hexo.extend.filter.register('before_post_render', function(data){ data.content = data.content.replace(/\]\s*\((?=(?!http).*?\))/gi, `](${hexo.config.picture_cdn}`) } - return data; -}); \ No newline at end of file + return data +}) \ No newline at end of file diff --git a/themes/yilia/source-src/config/photo-wall.json b/themes/yilia/source-src/config/photo-wall.json deleted file mode 100644 index c8c0411..0000000 --- a/themes/yilia/source-src/config/photo-wall.json +++ /dev/null @@ -1,30 +0,0 @@ -[ - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00001.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00002.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00003.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00004.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00005.jpg"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00006.png"}, - {"url":"https://blog-cdn.nos-eastchina1.126.net/photo-wall/pic00007.jpg"} -] \ No newline at end of file diff --git a/themes/yilia/source-src/js/anm.js b/themes/yilia/source-src/js/anm.js index 8a36657..3547221 100644 --- a/themes/yilia/source-src/js/anm.js +++ b/themes/yilia/source-src/js/anm.js @@ -1,92 +1,92 @@ function init() { - var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; + var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; - // Main - initHeader(); - addListeners(); + // Main + initHeader(); + addListeners(); - function initHeader() { - width = window.innerWidth; - height = window.innerHeight; - target = {x: 0, y: height}; + function initHeader() { + width = window.innerWidth; + height = window.innerHeight; + target = {x: 0, y: height}; - largeHeader = document.getElementById('container'); - largeHeader.style.height = height+'px'; + largeHeader = document.getElementById('container'); + largeHeader.style.height = height+'px'; - canvas = document.getElementById('anm-canvas'); - canvas.width = width; - canvas.height = height; - ctx = canvas.getContext('2d'); + canvas = document.getElementById('anm-canvas'); + canvas.width = width; + canvas.height = height; + ctx = canvas.getContext('2d'); - // create particles - circles = []; - for(var x = 0; x < width*0.5; x++) { - var c = new Circle(); - circles.push(c); - } - animate(); + // create particles + circles = []; + for(var x = 0; x < width*0.5; x++) { + var c = new Circle(); + circles.push(c); + } + animate(); + } + + // Event handling + function addListeners() { + window.addEventListener('scroll', scrollCheck); + window.addEventListener('resize', resize); + } + + function scrollCheck() { + if(document.body.scrollTop > height) animateHeader = false; + else animateHeader = true; + } + + function resize() { + width = window.innerWidth; + height = window.innerHeight; + largeHeader.style.height = height+'px'; + canvas.width = width; + canvas.height = height; + } + + function animate() { + if(animateHeader) { + ctx.clearRect(0,0,width,height); + for(var i in circles) { + circles[i].draw(); + } + } + requestAnimationFrame(animate); + } + + // Canvas manipulation + function Circle() { + var _this = this; + + // constructor + (function() { + _this.pos = {}; + init(); + //console.log(_this); + })(); + + function init() { + _this.pos.x = Math.random()*width; + _this.pos.y = height+Math.random()*100; + _this.alpha = 0.1+Math.random()*0.3; + _this.scale = 0.1+Math.random()*0.3; + _this.velocity = Math.random(); } - // Event handling - function addListeners() { - window.addEventListener('scroll', scrollCheck); - window.addEventListener('resize', resize); - } - - function scrollCheck() { - if(document.body.scrollTop > height) animateHeader = false; - else animateHeader = true; - } - - function resize() { - width = window.innerWidth; - height = window.innerHeight; - largeHeader.style.height = height+'px'; - canvas.width = width; - canvas.height = height; - } - - function animate() { - if(animateHeader) { - ctx.clearRect(0,0,width,height); - for(var i in circles) { - circles[i].draw(); - } - } - requestAnimationFrame(animate); - } - - // Canvas manipulation - function Circle() { - var _this = this; - - // constructor - (function() { - _this.pos = {}; - init(); - //console.log(_this); - })(); - - function init() { - _this.pos.x = Math.random()*width; - _this.pos.y = height+Math.random()*100; - _this.alpha = 0.1+Math.random()*0.3; - _this.scale = 0.1+Math.random()*0.3; - _this.velocity = Math.random(); - } - - this.draw = function() { - if(_this.alpha <= 0) { - init(); - } - _this.pos.y -= _this.velocity; - _this.alpha -= 0.0005; - ctx.beginPath(); - ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false); - ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; - ctx.fill(); - }; - } + this.draw = function() { + if(_this.alpha <= 0) { + init(); + } + _this.pos.y -= _this.velocity; + _this.alpha -= 0.0005; + ctx.beginPath(); + ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false); + ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; + ctx.fill(); + }; + } } export default { init } \ No newline at end of file diff --git a/themes/yilia/source-src/js/browser.js b/themes/yilia/source-src/js/browser.js index 40eb88f..d8cc160 100644 --- a/themes/yilia/source-src/js/browser.js +++ b/themes/yilia/source-src/js/browser.js @@ -1,6 +1,6 @@ export default { versions: function() { - var u = window.navigator.userAgent; + var u = window.navigator.userAgent return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 @@ -13,6 +13,6 @@ export default { iPad: u.indexOf('iPad') > -1, //是否为iPad webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部 weixin: u.indexOf('MicroMessenger') == -1 //是否为微信浏览器 - }; + } }() } diff --git a/themes/yilia/source-src/js/comment.js b/themes/yilia/source-src/js/comment.js index 92223ca..350172d 100644 --- a/themes/yilia/source-src/js/comment.js +++ b/themes/yilia/source-src/js/comment.js @@ -1,6 +1,6 @@ -// const AV = require('leancloud-storage'); -window.AV = require('leancloud-storage'); -// const Valine = require('../lib/Valine.min'); +// const AV = require('leancloud-storage') +window.AV = require('leancloud-storage') +// const Valine = require('../lib/Valine.min') /** * 使用根据Valine项目源代码重新打包 * 可以支持对于AV对象的传参输入, 而不需要暴露全局变量 @@ -11,6 +11,6 @@ const commentConfig = require("../config/comment.json") import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({ default: Valine }) => { commentConfig.valine.config.path = window.location.pathname - // commentConfig.valine.config.av = AV; + // commentConfig.valine.config.av = AV new Valine(commentConfig.valine.config) }) diff --git a/themes/yilia/source-src/js/mobile.js b/themes/yilia/source-src/js/mobile.js index 70a7863..60c48a3 100644 --- a/themes/yilia/source-src/js/mobile.js +++ b/themes/yilia/source-src/js/mobile.js @@ -21,22 +21,22 @@ function tabActive() { } function getElementLeft(element) {　　　　 - var actualLeft = element.offsetLeft;　　　　 - var current = element.offsetParent;　　　　 + var actualLeft = element.offsetLeft　　　　 + var current = element.offsetParent　　　　 while (current !== null) {　　　　　　 - actualLeft += current.offsetLeft;　　　　 - current = current.offsetParent;　　 + actualLeft += current.offsetLeft　　　　 + current = current.offsetParent　　 }　　 - return actualLeft; + return actualLeft }　　 function getElementTop(element) {　　　　 - var actualTop = element.offsetTop;　　　　 - var current = element.offsetParent;　　　　 + var actualTop = element.offsetTop　　　　 + var current = element.offsetParent　　　　 while (current !== null) {　　　　　　 - actualTop += current.offsetTop;　　　　　　 - current = current.offsetParent;　　　　 + actualTop += current.offsetTop　　　　　　 + current = current.offsetParent　　　　 }　　　　 - return actualTop;　　 + return actualTop　　 } function scrollStop($dom, top, limit, zIndex, diff) { diff --git a/themes/yilia/source-src/js/photo-wall.js b/themes/yilia/source-src/js/photo-wall.js index 629b674..e8ee072 100644 --- a/themes/yilia/source-src/js/photo-wall.js +++ b/themes/yilia/source-src/js/photo-wall.js @@ -1,13 +1,36 @@ -import photoWallJson from '../config/photo-wall.json' +import axios from 'axios' -var content = '
' -photoWallJson.forEach(item => { - content += ` -
- -
- ` -}) -content += '
' +var groupid = 1, currentIndex = 0 -document.getElementById('photo-wall').innerHTML = content \ No newline at end of file +function loadMore(step) { + // 滚动到底部时调用 + axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => { + var itemContainer = document.createElement('div') + var imgItems = '', index = currentIndex + for( ; index + + + ` + } + if(index >= res.data.files.length) { // 已到达当前分组列表的末尾 + groupid++ + if(index { // 未加载到文件列表, 代表已经没有更多图片 + // TODO 显示已没有更多内容 + // console.log(res) + }) +} +loadMore(20) + +//TODO 在滚动到底部时调用loadMore \ No newline at end of file diff --git a/themes/yilia/source-src/js/share.js b/themes/yilia/source-src/js/share.js index 26670a7..037fc62 100644 --- a/themes/yilia/source-src/js/share.js +++ b/themes/yilia/source-src/js/share.js @@ -4,9 +4,9 @@ function generate(url, opts) { var url = url.replace(/<%-sUrl%>/g, encodeURIComponent(opts.sUrl)) .replace(/<%-sTitle%>/g, opts.sTitle) .replace(/<%-sDesc%>/g, opts.sDesc) - .replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic)); + .replace(/<%-sPic%>/g, encodeURIComponent(opts.sPic)) - window.open(url); + window.open(url) } var qrcodeInit = false @@ -47,18 +47,18 @@ function handleClick(type, opts) { } else if (type === 'google') { generate('https://plus.google.com/share?url=<%-sUrl%>', opts) } else if (type === 'weixin') { - showWX(); + showWX() } } let init = function() { - let $sns = document.querySelectorAll('.share-sns'); - if (!$sns || $sns.length === 0) return; + let $sns = document.querySelectorAll('.share-sns') + if (!$sns || $sns.length === 0) return - let sUrl = window.location.href; - let sTitle = document.querySelector('title').innerHTML; - let $img = document.querySelectorAll('.article-entry img'); - let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : ''; + let sUrl = window.location.href + let sTitle = document.querySelector('title').innerHTML + let $img = document.querySelectorAll('.article-entry img') + let sPic = $img.length ? document.querySelector('.article-entry img').getAttribute('src') : '' if ((sPic !== '') && !/^(http:|https:)?\/\//.test(sPic)) { sPic = window.location.origin + sPic } diff --git a/themes/yilia/source-src/js/slider.js b/themes/yilia/source-src/js/slider.js index 76e40ad..fbb4a2f 100644 --- a/themes/yilia/source-src/js/slider.js +++ b/themes/yilia/source-src/js/slider.js @@ -86,7 +86,7 @@ new Vue({ }, filters: { urlformat: (str) => { - return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str; + return (window.themeConfig && window.themeConfig.root) ? window.themeConfig.root + str : '/' + str } }, watch: { @@ -186,7 +186,7 @@ const waifuTools = { // 隐藏看板娘 setTimeout(function() { document.querySelector('.waifu').style.display = 'none' - }, 1300); + }, 1300) }, "tools.eye"() { // 切换到夜间模式 diff --git a/themes/yilia/source-src/js/util.js b/themes/yilia/source-src/js/util.js index f88c8b5..3e7ae42 100644 --- a/themes/yilia/source-src/js/util.js +++ b/themes/yilia/source-src/js/util.js @@ -18,7 +18,7 @@ const Util = (function(){ , a = //gi , i = /\r?\n/g , f = /\s/g - , p = {}; + , p = {} for (var s in u) p[u[s]] = s; return u["'"] = "'", @@ -32,39 +32,39 @@ const Util = (function(){ }, encodeBase16: function(e) { if (!e) - return e; - e += ""; + return e + e += "" for (var r = [], n = 0, t = e.length; t > n; n++) - r.push(e.charCodeAt(n).toString(16).toUpperCase()); + r.push(e.charCodeAt(n).toString(16).toUpperCase()) return r.join("") }, encodeBase16forJSON: function(e) { if (!e) - return e; + return e e = e.replace(/[\u4E00-\u9FBF]/gi, function(e) { return escape(e).replace("%u", "\\u") - }); + }) for (var r = [], n = 0, t = e.length; t > n; n++) - r.push(e.charCodeAt(n).toString(16).toUpperCase()); + r.push(e.charCodeAt(n).toString(16).toUpperCase()) return r.join("") }, decodeBase16: function(e) { if (!e) - return e; - e += ""; + return e + e += "" for (var r = [], n = 0, t = e.length; t > n; n += 2) - r.push(String.fromCharCode("0x" + e.slice(n, n + 2))); + r.push(String.fromCharCode("0x" + e.slice(n, n + 2))) return r.join("") }, encodeObject: function(r) { if (r instanceof Array) for (var n = 0, t = r.length; t > n; n++) - r[n] = e.encodeObject(r[n]); + r[n] = e.encodeObject(r[n]) else if ("object" == typeof r) for (var o in r) - r[o] = e.encodeObject(r[o]); + r[o] = e.encodeObject(r[o]) else if ("string" == typeof r) - return e.encode(r); + return e.encode(r) return r }, loadScript: function(path) { @@ -73,17 +73,17 @@ const Util = (function(){ $script.setAttribute('src', path) }, addLoadEvent: function(func){ - var oldonload = window.onload; + var oldonload = window.onload if (typeof window.onload !== "function") { - window.onload = func; + window.onload = func } else { window.onload = function() { - oldonload(); - func(); + oldonload() + func() } } } } -})(); +})() export default Util \ No newline at end of file diff --git a/themes/yilia/source-src/js/viewer.js b/themes/yilia/source-src/js/viewer.js index 63979b6..d3bd486 100644 --- a/themes/yilia/source-src/js/viewer.js +++ b/themes/yilia/source-src/js/viewer.js @@ -6,7 +6,7 @@ import '../lib/photoswipe/default-skin/default-skin.css' import Util from './util' function init() { - let pswpElement = document.querySelectorAll('.pswp')[0]; + let pswpElement = document.querySelectorAll('.pswp')[0] let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)')) Array.prototype.forEach.call($imgArr, ($em, i) => { $em.addEventListener('click', function(){ @@ -29,7 +29,7 @@ function init() { var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, { index: parseInt(i), bgOpacity: 0.8 - }); + }) gallery.init() }) }) diff --git a/themes/yilia/source-src/js/waifu.js b/themes/yilia/source-src/js/waifu.js index f26a81c..3bfab42 100644 --- a/themes/yilia/source-src/js/waifu.js +++ b/themes/yilia/source-src/js/waifu.js @@ -7,8 +7,8 @@ const isMobile = (Browser.versions.mobile && window.screen.width < 800) * 判断浏览器是否支持WebGL */ function isSupportWebGL() { - var canvas = document.createElement("canvas"); - var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); + var canvas = document.createElement("canvas") + var webGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") return webGL && webGL instanceof WebGLRenderingContext }