「Widget:网站维护时间线」:修訂間差異
跳至導覽
跳至搜尋
imported>=海豚= 無編輯摘要 |
imported>=海豚= 無編輯摘要 |
||
(未顯示同一使用者於中間所作的 30 次修訂) | |||
行 1: | 行 1: | ||
<noinclude>Only for [[H萌娘:维护日志]]</noinclude> | |||
<includeonly> | |||
<style> | <style> | ||
* { | * { | ||
行 10: | 行 12: | ||
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
height: | height: 105%; | ||
left: 0; | left: 0; | ||
top: | top: 43px; | ||
} | } | ||
.timeline figcaption { | .timeline figcaption { | ||
行 24: | 行 26: | ||
font-size: 30px; | font-size: 30px; | ||
padding-bottom: 20px; | padding-bottom: 20px; | ||
color: # | color: #a2c9f3!important; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
line-height: 1.2 !important; | line-height: 1.2 !important; | ||
行 67: | 行 69: | ||
} | } | ||
.timeline article:last-of-type h2 { | .timeline article:last-of-type h2 { | ||
color: # | color: #b9d79a!important; | ||
} | } | ||
.timeline article:last-of-type h6, | .timeline article:last-of-type h6, | ||
行 80: | 行 82: | ||
<body> | <body> | ||
<section id="timeline"> | <section id="timeline"> | ||
<div class="timeline"> | <div class="timeline"> | ||
<canvas id="cvs3"></canvas> | <canvas id="cvs3"></canvas> | ||
行 89: | 行 90: | ||
<h6>2021.6.23</h6> | <h6>2021.6.23</h6> | ||
<p> | <p> | ||
升级至2021年6月23日维基媒体发布 | 升级至2021年6月23日 由 维基媒体发布 的 MW1.31.15(c755afe) 补丁版本,此次 内部 更新跨越了7个小版本 (1.31.7→1.31.15) 。 | ||
</p> | </p> | ||
</figure> | </figure> | ||
<figure> | <figure> | ||
<figcaption>看板娘系统重构</figcaption> | <figcaption>看板娘系统重构 并支持换装</figcaption> | ||
<h6>2021.6.26-27</h6> | <h6>2021.6.26-27</h6> | ||
<p> | <p> | ||
行 110: | 行 111: | ||
<h6>2021.7.15-16</h6> | <h6>2021.7.15-16</h6> | ||
<p> | <p> | ||
添加图标;引入显示维护组用户的用户组的小工具; | 添加图标;引入显示维护组用户的用户组的小工具;更新最近更改图例。 | ||
</p> | </p> | ||
</figure> | </figure> | ||
行 125: | 行 126: | ||
<p> | <p> | ||
改变顶部用户信息控制栏;维护组用户可分名字空间查看其他用户的编辑数量。 | 改变顶部用户信息控制栏;维护组用户可分名字空间查看其他用户的编辑数量。 | ||
</p> | |||
</figure> | |||
<figure> | |||
<figcaption>讨论版分功能导航指向</figcaption> | |||
<h6>2021.8.27</h6> | |||
<p> | |||
加入讨论版导航,分功能指向不同版面,方便用户按需求反馈问题。 | |||
</p> | </p> | ||
</figure> | </figure> | ||
行 134: | 行 142: | ||
<h6>2021.6.23-7.6</h6> | <h6>2021.6.23-7.6</h6> | ||
<p> | <p> | ||
修正全站背景《画画的纱雾酱》,重新抠图,减少体积,加快显示效率;加入春天飞鸟的顶部栏背景 | 修正全站背景《画画的纱雾酱》,重新抠图,减少体积,加快显示效率;加入春天飞鸟的顶部栏背景 。 | ||
</p> | </p> | ||
</figure> | </figure> | ||
行 148: | 行 156: | ||
<h6>2021.7.4</h6> | <h6>2021.7.4</h6> | ||
<p> | <p> | ||
修复桌面端显示问题 | 修复桌面端显示问题 ; 并在移动端加入该工具。 | ||
</p> | </p> | ||
</figure> | </figure> | ||
行 162: | 行 170: | ||
<h6>2021.8.1</h6> | <h6>2021.8.1</h6> | ||
<p> | <p> | ||
相对较长的导航模板在条目中默认折叠,减少条目空间 | 相对较长的导航模板在条目中默认折叠,减少条目空间 。 | ||
</p> | </p> | ||
</figure> | </figure> | ||
<figure> | <figure> | ||
<figcaption>更改验证系统</figcaption> | <figcaption>更改验证系统</figcaption> | ||
<h6>2021. | <h6>2021.8.3</h6> | ||
<p> | <p> | ||
改为知识提问型验证系统,不再使用Cloudflare的验证,同时取消其频繁的JS质询 | 改为知识提问型验证系统,不再使用Cloudflare的验证,同时取消其频繁的JS质询 。 | ||
</p> | </p> | ||
</figure> | </figure> | ||
<figure> | <figure> | ||
<figcaption>改变条目中二级标题样式</figcaption> | <figcaption>改变条目中二级标题样式</figcaption> | ||
<h6>2021. | <h6>2021.8.6</h6> | ||
<p> | |||
为二级标题增加黄底主题色,更符合本站样式。 | |||
</p> | |||
</figure> | |||
<figure> | |||
<figcaption>更新移动端页面</figcaption> | |||
<h6>2021.8.20</h6> | |||
<p> | <p> | ||
在移动端条目顶部 加 入选项工具 ,更 好的方便用户使用;同时更改部分页面以适配APP。 | |||
</p> | </p> | ||
</figure> | </figure> | ||
行 182: | 行 197: | ||
<br style="clear:both" /> | <br style="clear:both" /> | ||
</div> | </div> | ||
</section> | </section> | ||
</body> | |||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | ||
<script> | <script> | ||
function Timeline(cvs) { | function Timeline(cvs) { | ||
var self = this, | var self = this, | ||
paused = true, | paused = true, | ||
行 194: | 行 208: | ||
canvas = cvs, | canvas = cvs, | ||
ctx = null; | ctx = null; | ||
self.lines = []; | self.lines = []; | ||
self.isOK = false; | self.isOK = false; | ||
self.options = { | self.options = { | ||
行 204: | 行 216: | ||
}; | }; | ||
self.targets = [ | self.targets = [ | ||
[20, 26, 58, 64, | [20, 26, 58, 64, 116, 122, 150], | ||
[ | [20, 40, 42, 90, 98, 102, 108, 136] | ||
]; | ]; | ||
self.dotColors = [ | self.dotColors = [ | ||
行 211: | 行 223: | ||
['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'], | ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'], | ||
]; | ]; | ||
self.isPaused = function () { | self.isPaused = function () { | ||
return paused; | return paused; | ||
}; | }; | ||
function InitDots() { | function InitDots() { | ||
var tl = $('.timeline'); | var tl = $('.timeline'); | ||
var top = tl.find('h2').outerHeight(); | var top = tl.find('h2').outerHeight(); | ||
self.lines[0].dots = []; | self.lines[0].dots = []; | ||
var y = top; | var y = top; | ||
tl.find('article:first figure').each(function () { | tl.find('article:first figure').each(function () { | ||
self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]); | self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]); | ||
y += $(this).outerHeight(); | y += $(this).outerHeight(); | ||
}); | }); | ||
self.lines[1].dots = []; | self.lines[1].dots = []; | ||
var y = top; | var y = top; | ||
tl.find('article:last figure').each(function () { | tl.find('article:last figure').each(function () { | ||
self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]); | self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]); | ||
y += $(this).outerHeight(); | y += $(this).outerHeight(); | ||
}); | }); | ||
} | } | ||
function OnResize() { | function OnResize() { | ||
canvas.width = canvas.offsetWidth; | canvas.width = canvas.offsetWidth; | ||
canvas.height = canvas.offsetHeight; | canvas.height = canvas.offsetHeight; | ||
var wasPaused = paused; | var wasPaused = paused; | ||
self.toggle(false); | self.toggle(false); | ||
行 248: | 行 250: | ||
self.lines[0].reset(canvas.offsetWidth / 2 - 15); | self.lines[0].reset(canvas.offsetWidth / 2 - 15); | ||
self.lines[1].reset(canvas.offsetWidth / 2 + 15); | self.lines[1].reset(canvas.offsetWidth / 2 + 15); | ||
InitDots(); | InitDots(); | ||
self.toggle(!wasPaused); | self.toggle(!wasPaused); | ||
} | } | ||
function init() { | function init() { | ||
var result = false; | var result = false; | ||
try { | try { | ||
result = !!(canvas.getContext && (ctx = canvas.getContext('2d'))); | result = !!(canvas.getContext && (ctx = canvas.getContext('2d'))); | ||
self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse); | self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse); | ||
self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse); | self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse); | ||
} catch (e) { | } catch (e) { | ||
return false; | return false; | ||
} | } | ||
$(canvas).mousemove(function (e) { | $(canvas).mousemove(function (e) { | ||
if (e.offsetX) { | if (e.offsetX) { | ||
mouse.x = e.offsetX; | mouse.x = e.offsetX; | ||
行 281: | 行 276: | ||
} | } | ||
}); | }); | ||
$(window).resize(OnResize); | $(window).resize(OnResize); | ||
OnResize(); | OnResize(); | ||
return result; | return result; | ||
} | } | ||
function Line(y, height, color, options, mouse) { | function Line(y, height, color, options, mouse) { | ||
var self = this; | var self = this; | ||
self.color = color; | self.color = color; | ||
self.options = options; | self.options = options; | ||
行 298: | 行 288: | ||
self.dots = []; | self.dots = []; | ||
self.y = y; | self.y = y; | ||
self.points = []; | self.points = []; | ||
self.reset = function (x, f) { | self.reset = function (x, f) { | ||
self.points = []; | self.points = []; | ||
行 306: | 行 294: | ||
self.points.push(new Point(x, y, self.color)); | self.points.push(new Point(x, y, self.color)); | ||
} | } | ||
self.update = function () { | self.update = function () { | ||
for (var i = 0; i < self.points.length; i++) | for (var i = 0; i < self.points.length; i++) | ||
self.points[i].update(self.mouse, self.options); | self.points[i].update(self.mouse, self.options); | ||
} | } | ||
function Point(x, y) { | function Point(x, y) { | ||
this.y = y; | this.y = y; | ||
this.x = x; | this.x = x; | ||
this.base = { x: x, y: y }; | this.base = { x: x, y: y }; | ||
this.update = function (mouse, options) { | this.update = function (mouse, options) { | ||
var dx = this.x - mouse.x, | var dx = this.x - mouse.x, | ||
行 323: | 行 308: | ||
alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha), | alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha), | ||
d = options.radius / Math.sqrt(dx * dx + dy * dy); | d = options.radius / Math.sqrt(dx * dx + dy * dy); | ||
this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed; | this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed; | ||
this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed; | this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed; | ||
行 329: | 行 313: | ||
} | } | ||
} | } | ||
function drawCircle(p, r, color) { | function drawCircle(p, r, color) { | ||
ctx.fillStyle = color; | ctx.fillStyle = color; | ||
行 337: | 行 320: | ||
ctx.fill(); | ctx.fill(); | ||
} | } | ||
function drawLine(p1, p2) { | function drawLine(p1, p2) { | ||
ctx.beginPath(); | ctx.beginPath(); | ||
行 345: | 行 327: | ||
ctx.closePath(); | ctx.closePath(); | ||
} | } | ||
function redraw() { | function redraw() { | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
for (var i = 0; i < 2; i++) { | for (var i = 0; i < 2; i++) { | ||
var points = self.lines[i].points; | var points = self.lines[i].points; | ||
ctx.beginPath(); | ctx.beginPath(); | ||
ctx.lineWidth = 2; | ctx.lineWidth = 2; | ||
ctx.strokeStyle = self.lines[i].color; | ctx.strokeStyle = self.lines[i].color; | ||
ctx.moveTo(points[15].x, points[15].y); | ctx.moveTo(points[15].x, points[15].y); | ||
for (var j = 15; j < points.length - 2; j++) { | for (var j = 15; j < points.length - 2; j++) { | ||
var point = points[j]; | var point = points[j]; | ||
var xc = (points[j + 1].x + point.x) / 2; | var xc = (points[j + 1].x + point.x) / 2; | ||
var yc = (points[j + 1].y + point.y) / 2; | var yc = (points[j + 1].y + point.y) / 2; | ||
ctx.quadraticCurveTo(point.x, point.y, xc, yc); | ctx.quadraticCurveTo(point.x, point.y, xc, yc); | ||
} | } | ||
ctx.stroke(); | ctx.stroke(); | ||
ctx.closePath(); | ctx.closePath(); | ||
// Dots | // Dots | ||
ctx.lineWidth = 1.2; | ctx.lineWidth = 1.2; | ||
行 380: | 行 353: | ||
(self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2, | (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2, | ||
]; | ]; | ||
var p1 = { x: dot[0], y: dot[1] }; | var p1 = { x: dot[0], y: dot[1] }; | ||
var p2 = { x: dot2[0], y: dot2[1] }; | var p2 = { x: dot2[0], y: dot2[1] }; | ||
drawLine(p1, p2); | drawLine(p1, p2); | ||
drawCircle(p1, 4, self.dotColors[i][0]); | drawCircle(p1, 4, self.dotColors[i][0]); | ||
drawCircle(p2, 11, self.dotColors[i][1]); | drawCircle(p2, 11, self.dotColors[i][1]); | ||
drawCircle(p2, 5.5, self.dotColors[i][0]); | drawCircle(p2, 5.5, self.dotColors[i][0]); | ||
行 393: | 行 362: | ||
} | } | ||
} | } | ||
function animate() { | function animate() { | ||
rafid = requestAnimationFrame(animate); | rafid = requestAnimationFrame(animate); | ||
self.lines[0].update(); | self.lines[0].update(); | ||
self.lines[1].update(); | self.lines[1].update(); | ||
redraw(); | redraw(); | ||
} | } | ||
self.toggle = function (run) { | self.toggle = function (run) { | ||
if (!self.isOK) return false; | if (!self.isOK) return false; | ||
if (run === undefined) | if (run === undefined) | ||
self.toggle(!paused); | self.toggle(!paused); | ||
else if (!!run && paused) { | else if (!!run && paused) { | ||
paused = false; | paused = false; | ||
行 419: | 行 382: | ||
return true; | return true; | ||
} | } | ||
self.isOK = init(); | self.isOK = init(); | ||
} | } | ||
new Timeline($('#cvs3').get(0)).toggle(true); | new Timeline($('#cvs3').get(0)).toggle(true); | ||
</script> | </script> | ||
</includeonly> |
於 2021年8月27日 (五) 20:37 的最新修訂
Only for H萌娘:維護日誌