「Widget:网站维护时间线」：修訂間差異

於 2021年8月13日 (五) 23:54 的修訂

<style>

{

 margin: 0;

} .timeline {

 height: 100%;
 position: relative;

} .timeline canvas {

 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 46px;

} .timeline figcaption {

 font-weight: 400;
   font-size: 24px;
 text-transform: uppercase;
 -webkit-text-stroke: .25px;

} .timeline h2 {

 font-weight: 400;
   font-size: 30px;
 padding-bottom: 20px;
 color: #b2cde9!important;
  text-transform: uppercase;
  line-height: 1.2 !important;

} .timeline h6 {

 color: #0090F5!important;
   font-size: 17px;
   font-weight: 400;

} .timeline p, .timeline ol {

 font-weight: 400;
 padding: 3px 0 20px 0;
 color: #575757!important;
 text-align: justify;
 width: 70%;

} .timeline ol {

 list-style: disc;
 margin-top: -20px;
 padding-left: 40px;

} .timeline figure {

 float: right;
 width: 100%;

} .timeline article {

 position: relative;
 width: 38%;
 overflow: hidden;

} .timeline article:first-of-type {

 float: left;
 text-align: right;

} .timeline article:first-of-type p, .timeline article:first-of-type figure {

 float: right;

} .timeline article:last-of-type {

 float: right;

} .timeline article:last-of-type h2 {

 color: #c6e0aa!important;

} .timeline article:last-of-type h6, .timeline article:last-of-type a {

 color: #40aa00!important;

} .timeline article:last-of-type a:hover {

 color: #95D40D!important;

} </style> </head> <body>

   <section id="timeline">

       <canvas id="cvs3"></canvas>
       <article>

新增功能

           <figure>
               <figcaption>全站系统版本更新</figcaption>

2021.6.23

升級至2021年6月23日維基媒體發布的MW1.31.15(c755afe) 補丁版本，此次更新跨越了7個小版本。

           </figure>
           <figure>
               <figcaption>看板娘系统重构</figcaption>

2021.6.26-27

去除大量冗餘代碼，同時新增5個看板娘，並加入了換裝功能。（為 pio醬提供了86套皮膚 / 為 Tia醬提供了62套皮膚 / 為 22、33 提供了21套皮膚 / 為 22、33 提供了21套皮膚 / 為海王星提供了19套皮膚）

           </figure>
           <figure>
               <figcaption>支持繁简转换</figcaption>

2021.7.12-14

增添繁簡轉換插件，在左上角顯示按鈕，可在所有頁面使用，支持繁體源代碼編輯和繁體字搜索。

           </figure>
            <figure>
               <figcaption>编辑记录页改版</figcaption>

2021.7.15-16

添加圖標，引入顯示維護組用戶的用戶組的小工具，並更新最近更改圖例。

           </figure>
           <figure>
               <figcaption>左侧显示浮动目录</figcaption>

2021.8.10-12

當條目中的標題超過三個時，條目左側會出現目錄，側邊欄劃上去時可以看見，點擊可跳轉到指定標題。

           </figure>
       </article>

       <article>

修復BUG

           <figure>
               <figcaption>Mobile Friendly</figcaption>

with touch screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.

           </figure>
           <figure>
               <figcaption>Mobile Friendly</figcaption>

with touch screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.

           </figure>
                       <figure>
               <figcaption>Web Design</figcaption>

using Html CSS JS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, orn

           </figure>
           <figure>
               <figcaption>Retina Ready Display</figcaption>

Supported all devices

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis ma

           </figure>
           <figure>
               <figcaption>Retina Ready Display</figcaption>

Supported all devices

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus v

           </figure>
       </article>

</section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>

   function Timeline(cvs) {

   var self = this,
       paused = true,
       rafid = 0,
       mouse = { x: 0, y: 0 },
       canvas = cvs,
       ctx = null;

   self.lines = [];

   self.isOK = false;
   self.options = {
       speed: 0.1,
       density: 8,
       radius: 600,
   };
   self.targets = [
  [20, 26, 58, 64, 114],
  [26, 29, 30, 90 , 95]
  ];
   self.dotColors = [
       ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'],
       ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'],
   ];

   self.isPaused = function () {
       return paused;
   };

   function InitDots() {
       var tl = $('.timeline');
       var top = tl.find('h2').outerHeight();

       self.lines[0].dots = [];
       var y = top;
       tl.find('article:first figure').each(function () {

           self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]);

           y += $(this).outerHeight();
       });

       self.lines[1].dots = [];
       var y = top;
       tl.find('article:last figure').each(function () {

           self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]);

           y += $(this).outerHeight();
       });
   }

   function OnResize() {
       canvas.width = canvas.offsetWidth;
       canvas.height = canvas.offsetHeight;

       var wasPaused = paused;
       self.toggle(false);
       // Init lines
       self.lines[0].reset(canvas.offsetWidth / 2 - 15);
       self.lines[1].reset(canvas.offsetWidth / 2 + 15);

       InitDots();

       self.toggle(!wasPaused);
   }

   function init() {
       var result = false;
       try {
           result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));

           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);

       } catch (e) {
           return false;
       }

       $(canvas).mousemove(function (e) {

           if (e.offsetX) {
               mouse.x = e.offsetX;
               mouse.y = e.offsetY;
           }
           else if (e.layerX) {
               mouse.x = e.layerX;
               mouse.y = e.layerY;
           }
           else {
               mouse.x = e.pageX - $(canvas).offset().left;
               mouse.y = e.pageY - $(canvas).offset().top;
           }
       });

       $(window).resize(OnResize);

       OnResize();

       return result;
   }

   function Line(y, height, color, options, mouse) {
       var self = this;

       self.color = color;
       self.options = options;
       self.mouse = mouse;
       self.height = height;
       self.dots = [];
       self.y = y;

       self.points = [];

       self.reset = function (x, f) {
           self.points = [];
           for (var y = self.y; y < self.height; y += self.options.density)
               self.points.push(new Point(x, y, self.color));
       }

       self.update = function () {
           for (var i = 0; i < self.points.length; i++)
               self.points[i].update(self.mouse, self.options);
       }

       function Point(x, y) {
           this.y = y;
           this.x = x;
           this.base = { x: x, y: y };

           this.update = function (mouse, options) {
               var dx = this.x - mouse.x,
                   dy = this.y - mouse.y,
                   alpha = Math.atan2(dx, dy),
                   alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha),
                   d = options.radius / Math.sqrt(dx * dx + dy * dy);

               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;
           }
       }
   }

   function drawCircle(p, r, color) {
       ctx.fillStyle = color;
       ctx.beginPath();
       ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true);
       ctx.closePath();
       ctx.fill();
   }

   function drawLine(p1, p2) {
       ctx.beginPath();
       ctx.moveTo(p1.x, p1.y);
       ctx.lineTo(p2.x, p2.y);
       ctx.stroke();
       ctx.closePath();
   }

   function redraw() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);

       for (var i = 0; i < 2; i++) {
           var points = self.lines[i].points;

           ctx.beginPath();
           ctx.lineWidth = 2;
           ctx.strokeStyle = self.lines[i].color;
           ctx.moveTo(points[15].x, points[15].y);

           for (var j = 15; j < points.length - 2; j++) {
               var point = points[j];

               var xc = (points[j + 1].x + point.x) / 2;
               var yc = (points[j + 1].y + point.y) / 2;

               ctx.quadraticCurveTo(point.x, point.y, xc, yc);
           }
           ctx.stroke();
           ctx.closePath();

           // Dots
           ctx.lineWidth = 1.2;
           ctx.strokeStyle = self.dotColors[i][2];
           for (var j = 0; j < self.lines[i].dots.length; j++) {
               var dot = self.lines[i].dots[j],
                   id = self.targets[i][j];
                   dot2 = [
                       (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2,
                       (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2,
                   ];

               var p1 = { x: dot[0], y: dot[1] };
               var p2 = { x: dot2[0], y: dot2[1] };

               drawLine(p1, p2);
               drawCircle(p1, 4, self.dotColors[i][0]);

               drawCircle(p2, 11, self.dotColors[i][1]);
               drawCircle(p2, 5.5, self.dotColors[i][0]);
           }
       }
   }

   function animate() {
       rafid = requestAnimationFrame(animate);

       self.lines[0].update();
       self.lines[1].update();

       redraw();
   }

   self.toggle = function (run) {
       if (!self.isOK) return false;

       if (run === undefined)
           self.toggle(!paused);

       else if (!!run && paused) {
           paused = false;
           animate();
       }
       else if (!!!run) {
           paused = true;
           cancelAnimationFrame(rafid);
       }
       return true;
   }

   self.isOK = init();

} new Timeline($('#cvs3').get(0)).toggle(true); </script>

「Widget:网站维护时间线」：修訂間差異

於 2021年8月13日 (五) 23:54 的修訂

目次

新增功能

2021.6.23

2021.6.26-27

2021.7.12-14

2021.7.15-16

2021.8.10-12

修復BUG

with touch screen

with touch screen

using Html CSS JS

Supported all devices

Supported all devices

導覽選單

「Widget:网站维护时间线」：修訂間差異

於 2021年8月13日 (五) 23:54 的修訂

新增功能

2021.6.23

2021.6.26-27

2021.7.12-14

2021.7.15-16

2021.8.10-12

修復BUG

with touch screen

with touch screen

using Html CSS JS

Supported all devices

Supported all devices

導覽選單

搜尋