缘起

事情的缘起是萌娘百科用户妹空酱编写了一款MediaWiki小编辑插件WikiPlus

由于WikiPlus对于移动设备糟糕的兼容性(在较小的手机上编辑框飞出屏幕)以及难看的绿色配色,加之其不支持Fandom/Wikia平台,我决定自行编写一款小编辑插件,这就是后来的InPageEdit-v2

遗憾而戏剧性的一幕是,最终由于Fandom平台jQuery版本过低的问题,本插件也没能兼容Fandom

于是乎只得将这款插件当做了自己编辑小破站的工具。

萌芽

期初这款插件外观非常简陋,原理是在点击快速编辑按钮后隐藏文章,并在文章处显示一个编辑框,因为太过远古是在找不到截图,但说实话真的很丑。

后来发现这样会导致许多bug,例如当点击两次快速编辑,就会让各种按钮的绑定事件变得混乱无比,于是我开始寻找可以避免这种现象的方案,受到W+的启发,我自己原创了一款模态框插件,它看起来是这样的:

初露锋芒的InPageEdit-v1

老实讲,很丑。

重点是BUG贼特么嗨多。

于是我开始意识到,最好的方法是借助“前辈们”的力量,去寻找一款成熟的模态框插件。

开端

在苦苦寻找了数十种模态框后,终于选定了一款成熟、延展性强、接口丰富的插件:ssi-modal

ssi-modal

满怀欣喜的我立刻着手重写代码,这便是最初的InPageEdit-v2

https://common.wjghj.cn/images/7/76/InPageEdit_qedit.png
InPageEdit-v2 Early-stage

爱美之心不可无,除了编辑功能之外,顺便让自己舒心岂不美哉?于是我对ssi-modal进行了一些初步的重设计,诸如按钮等元素的配色采用了我常逛的网站Fandom所使用的Fandom Design System的配色,此外使用了Google Material设计的icon。

成长

事情本该到这里就结束了,为了自己撰写个人网站更方便而设计的插件,基础功能已经具备,外观框架也说得过去。

但一切从我重回Gamepedia开始,故事开启了崭新的篇章。

由于亲友的邀请,我重拾了早已弃坑的电子游戏Minecraft,正巧还收到了我所属的Fandom网站将要与GP合并的消息,这让我想起了昔日编辑过的中文 Minecraft wiki

中文 Minecraft wiki

因此我便回坑了wiki,由于习惯了使用自己编写的小插件,于是我顺理成章的把ipe的代码存到了mc wiki的用户页。

也不愧是人多的大型wiki,我也忘记了到底是我自己宣传的,还是被其他人发现了我的代码,总之就是真的有除我以外的人开始使用我写的插件,这让我受宠若惊十分意外。

于是乎这给了我继续开发更新插件的动力,我开始为插件添加除了编辑以外的功能。

开始了,恶魔甲方行为

在此对不仅愿意使用、还给我反馈以及提出意见/建议的小伙伴们表示超级加倍的感谢!

恶魔妈妈买面膜

如果不是他们,我根本不会发现自己的插件会有这么多漏洞、他人会有建设性的实用的需求,这对我的Debug极其有帮助。

在此也十分感谢他们让我知道了我的审美有多么垃圾。

我要变好看

由于不止一个小伙伴提出IPE超级难看,我不得不思考是否应该重新设计外观,毕竟它不再是只供我使用的直男工具。

在聊天中注意到,大家都很喜欢维基媒体基金会使用的OOUI风格,于是我便着手,为IPE设计了仿OOUI的外观,这些截图放在版头。

因为oojs糟糕的调用接口,以及并不是每一个wiki网站都标配ooui库,因此我并未使用oojs重新编写底层代码,而是完全使用CSS模拟出了OOUI的外观。

整个CSS文件长达7KB,歪日…… 硬核

目前针对输入框、按钮、checkbox等核心组件进行了重新设计,暂且比以前看起来舒服了很多。

未完待续(?……

InPageEdit插件的开发故事远远没有到达尾声,也许本鸽子还有精力的话,仍会坚持开发下去。

欢迎各位恶魔甲方继续为我提出意见~

发表评论

电子邮件地址不会被公开。

您提交的电子邮件地址不会被公开显示,它仅会被用来查询Gravatar头像数据。除评论内容外其他均不是必填项目。