Difference between revisions of "InPageEdit-v2/SDK"

Latest revision as of 00:23, 30 October 2020

快速编辑

InPageEdit.edit(options)

options: {object}
- page: 必须；编辑的页面名
- revision: 修订版本号，如果与当前页面版本号不同则取代
- section: 编辑的段落编号

最基础的调用

InPageEdit.edit({
  page: mw.config.get('wgPageName')
});

<html><button onclick="InPageEdit.edit({

 page: mw.config.get('wgPageName')

});">测试</button></html>

快速重定向

InPageEdit.redirect(type)

type: "string"(to/from)
- from 重定向页面至此
- to 将此页面重定向到

最基础的调用

InPageEdit.redirect('from');
InPageEdit.redirect('to');

<html><button onclick="InPageEdit.redirect('from')">测试from</button> <button onclick="InPageEdit.redirect('to')">测试to</button></html>

快速删除

InPageEdit.deletepage(page)

page "string"
- 要删除的页面，预设为当前页面

快速重命名

InPageEdit.renamepage()

打开快速重命名窗口

偏好设置

InPageEdit.preference()

打开InPageEdit偏好设置窗口

比较差异

InPageEdit.quickDiff(options)

options: {object}
- fromtitle: First title to compare.
- fromid: First page ID to compare. Type: integer
- fromrev: First revision to compare. Type: integer
- fromtext: Use this text instead of the content specified by fromtitle, fromid or fromrev.
- frompst: Do a pre-save transform on fromtext. Type: boolean
- totitle: Second title to compare.
- toid: Second page ID to compare. Type: integer
- torev: Second revision to compare. Type: integer
- torelative: Compare to a relative revision of fromtitle, fromid or fromrev. All the other "to" options will be ignored. Possible values: prev, next, cur
- totext: Use this text instead of the content specified by totitle, toid, torev, or torelative.
- topst: Do a pre-save transform on totext. Type: boolean

最简单的示例，比较本页面最后一次修改

InPageEdit.quickDiff({
  fromtitle: mw.config.get('wgPageName'),
  torelative: 'prev'
});

<html><button onclick="InPageEdit.quickDiff({

 fromtitle: mw.config.get('wgPageName'),
 torelative: 'prev'

});">测试</button></html>

添加编辑链接

该模块在页面加载时将运行一次^[1]

InPageEdit.articleLink(element)

element: <element>
- 缺省值：$('#mw-content-text a:not(.new)')
- 将该链接作为编辑链接，识别并添加快速编辑链接

无示例

加载框

不建议使用^[2]

InPageEdit.progress(title)

title: "string",√boolean×
- true: 将顶层加载框状态切换为已完成
- false: 关闭顶层的加载框
- string: 以字符串为标题创建加载框

function testProgress() {
  InPageEdit.progress('正在测试加载框……');
  setTimeout(function(){
    InPageEdit.progress(true);
    setTimeout(function(){
      InPageEdit.progress(false);
    },3000);
  },5000);
}

<html><button onclick="testProgress()">测试</button> <script> function testProgress() {

 InPageEdit.progress('正在测试加载框……');
 setTimeout(function(){
   InPageEdit.progress(true);
   setTimeout(function(){
     InPageEdit.progress(false);
   },3000);
 },5000);

} </script></html>

更新日志

Wjghj Project 的服务器不是高带宽高并发服务器，请不要过于频繁调用此模块^[3]

InPageEdit.versionInfo()

调出更新日志的弹窗，可以在不打开Wjghj Common Wiki的情况下查看更新日志
- <html><button onclick="InPageEdit.versionInfo()">测试</button></html>

版本号

请勿改写此变量；这是一个变量，不是一个函数

InPageEdit.version

获取版本号
- Response: 字符串 → <html><span onclick="$(this).text(InPageEdit.version)">获取</span></html>

快速编辑工具条自定义按钮

可以自定义需要的按钮，按以下提示在个人js页面写入全局变量window.InPageEdit.buttons即可，类型为Array。

window.InPageEdit = window.InPageEdit || {}; // 务必在之前添加这一行否则会报错
InPageEdit.buttons =[{
  open: '<-- ', // 添加到光标前的内容
  middle: '注释文字', // 选区内容占位符，选填
  close: ' -->', // 添加到光标后的内容
  text: 'low-vision' // 按钮标志，一个FontAwes名字
}, { // 再举个栗子
  open: '<s>',
  middle: '删除线',
  close: '</s>',
  text: 'strikethrough'
}];

实例演示

通过IPE的扩展接口，您可以制作很多自定义插件，这里提供一些简单、实用的代码实例

IPE原版工具盒

这里是IPE原版右下角工具盒的源代码，只要您明白了其中的原理，便完全可以自由自定义一个工具盒

原版代码

/**
 * @module toolbox 工具盒模块
 */
mw.hook('InPageEdit').add(({
  _analysis,
  _msg,
  InPageEdit
}) => {
  var config = mw.config.get();
  // 检测是否为文章页
  if (!config.wgIsArticle || $('#ipe-edit-toolbox').length > 0) {
    console.warn('[InPageEdit] 未载入 Toolbox');
    return;
  }

  /** IPE工具盒 **/
  var $toolbox = $('<div>', { id: 'ipe-edit-toolbox' }).append(
    $('<ul>', { class: 'btn-group group1' }).append(
      $('<li>', { class: 'btn-tip-group' }).append(
        $('<div>', { class: 'btn-tip', text: _msg('quick-edit') }),
        $('<button>', { id: 'edit-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-pencil"></i>' }).click(function () {
          InPageEdit.quickEdit({
            page: config.wgPageName,
            revision: config.wgRevisionId
          });
        })
      ),
      $('<li>', { class: 'btn-tip-group' }).append(
        $('<div>', { class: 'btn-tip', text: _msg('redirect-from') }),
        $('<button>', { id: 'redirectfrom-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-sign-in"></i>' }).click(function () {
          InPageEdit.quickRedirect('from');
        })
      ),
      $('<li>', { class: 'btn-tip-group' }).append(
        $('<div>', { class: 'btn-tip', text: _msg('redirect-to') }),
        $('<button>', { id: 'redirectto-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-sign-out"></i>' }).click(function () {
          InPageEdit.quickRedirect('to');
        })
      )
    ),
    $('<ul>', { class: 'btn-group group2' }).append(
      $('<div>', { style: 'display: flex;' }).append(
        $('<li>', { class: 'btn-tip-group' }).append(
          $('<div>', { class: 'btn-tip', text: _msg('quick-delete') }),
          $('<button>', { id: 'deletepage-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-trash"></i>' }).click(function () {
            InPageEdit.quickDelete();
          })
        ),
        $('<li>', { class: 'btn-tip-group' }).append(
          $('<div>', { class: 'btn-tip', text: _msg('quick-rename') }),
          $('<button>', { id: 'renamepage-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-italic"></i>' }).click(function () {
            InPageEdit.quickRename();
          })
        ),
        $('<li>', { class: 'btn-tip-group' }).append(
          $('<div>', { class: 'btn-tip', text: _msg('ipe-preference') }),
          $('<button>', { id: 'preference-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-gear"></i>' }).click(function () {
            InPageEdit.preference.modal();
          })
        )
      )
    ),
    $('<button>', { class: 'ipe-toolbox-btn', id: 'toolbox-toggle', html: '<i class="fa fa-plus"></i>' })
  );

  $toolbox.appendTo('body');

  $toolbox.find('.btn-group button').click(function () {
    _analysis('tool_box')
  });

  // 设置开关等
  var toolBoxInner = $toolbox.find('#toolbox-toggle, .btn-group');
  $toolbox.find('#toolbox-toggle').click(function () {
    if ($(this).hasClass('opened') && !$(this).hasClass('click')) {
      InPageEdit.preference.set({ lockToolBox: true });
      toolBoxInner.addClass('click');
    } else if ($(this).hasClass('click')) {
      InPageEdit.preference.set({ lockToolBox: false });
      toolBoxInner.removeClass('click');
    } else {
      InPageEdit.preference.set({ lockToolBox: true });
      toolBoxInner.addClass('click opened');
    }
  });
  // 如果锁定过工具盒，就自动展开
  if (InPageEdit.preference.get('lockToolBox') === true) {
    toolBoxInner.addClass('click opened');
  }
  // 鼠标覆盖与离开
  $toolbox.mouseover(function () {
    toolBoxInner.addClass('hover opened');
  });
  $toolbox.mouseout(function () {
    toolBoxInner.removeClass('hover');
    if (!$toolbox.find('#toolbox-toggle').hasClass('click')) {
      toolBoxInner.removeClass('opened');
    }
  });
  // 触发钩子，传递上下文
  mw.hook('InPageEdit.toolbox').fire({
    $toolbox
  });
});

在编辑链接后添加快速编辑链接

此示例代码已在Vector、Timeless以及Hydra皮肤上测试可用

源代码

mw.hook('InPageEdit').add(function(){
  $('#ca-view').after(
    $('<li>',{
      id:'ca-quick-edit',
      class:'collapsible'
    }).append(
      $('<span>').append(
        $('<a>',{
          href: 'javascript:void(0)'
        })
        .text('快速编辑')
        .click(function(){
          InPageEdit.edit({
            page: mw.config.get('wgPageName'),
            revision: mw.config.get('wgRevisionId')
          });
        })
      )
    )
  );
});

注释

↑ 当页面为文章页时，会以以下参数自动运行一次: InPageEdit.articleLink($('#mw-content-text a:not(.new)'))
↑ 这是一个内部模块，用于在特定步骤遮挡屏幕阻止用户的其他操作，不应该单独使用。
如果您喜欢IPE风格的progress-bar，请使用该部件:

<div class="ipe-progress" style="width:可规定一个长度"><div class="ipe-progress-bar"></div></div>
↑ 每调用一次该模块，就会向Wjghj_Project的服务器发送一次需要处理的get请求，这会给服务器带来一定的负荷

[1] 当页面为文章页时，会以以下参数自动运行一次: InPageEdit.articleLink($('#mw-content-text a:not(.new)'))

[2] 这是一个内部模块，用于在特定步骤遮挡屏幕阻止用户的其他操作，不应该单独使用。
如果您喜欢IPE风格的progress-bar，请使用该部件:

<div class="ipe-progress" style="width:可规定一个长度"><div class="ipe-progress-bar"></div></div>

[3] 每调用一次该模块，就会向Wjghj_Project的服务器发送一次需要处理的get请求，这会给服务器带来一定的负荷

[1]

[2]

[3]

@@ Line 7: / Line 7: @@
 最基础的调用
-<pre class="prettyprint">
+<pre class="highlight">
 InPageEdit.edit({
    page: mw.config.get('wgPageName')
@@ Line 23: / Line 23: @@
 最基础的调用
-<pre class="prettyprint">
+<pre class="highlight">
 InPageEdit.redirect('from');
 InPageEdit.redirect('to');
@@ Line 60: / Line 60: @@
 最简单的示例，比较本页面最后一次修改
-<pre class="prettyprint">
+<pre class="highlight">
 InPageEdit.quickDiff({
    fromtitle: mw.config.get('wgPageName'),
@@ Line 91: / Line 91: @@
 ** string: 以字符串为标题创建加载框
-<pre class="prettyprint">
+<pre class="highlight">
 function testProgress() {
    InPageEdit.progress('正在测试加载框……');
@@ Line 131: / Line 131: @@
 == 快速编辑工具条自定义按钮 ==
 可以自定义需要的按钮，按以下提示在个人js页面写入全局变量<code>window.InPageEdit.buttons</code>即可，类型为Array。
-<pre class="prettyprint lang-js">
+<pre class="highlight lang-js">
 window.InPageEdit = window.InPageEdit || {}; // 务必在之前添加这一行否则会报错
 InPageEdit.buttons =[{
@@ Line 152: / Line 152: @@
 这里是IPE原版右下角工具盒的源代码，只要您明白了其中的原理，便完全可以自由自定义一个工具盒
 {{hide|title=原版代码|content=
-<pre class="prettyprint lang-js">
+<pre class="highlight lang-js">
 /**
-  * InPageEdit Toolbox
+  * @module toolbox 工具盒模块
- * Example extension for InPageEdit-v2,
+  */
-  * Default loaded for everyone.
+mw.hook('InPageEdit').add(({
- **/
+  _analysis,
-mw.hook('InPageEdit').add(function () {
+  _msg,
-   // Not article
+  InPageEdit
-   if (mw.config.get('wgIsArticle') === false) {
+}) => {
+  var config = mw.config.get();
+   // 检测是否为文章页
+   if (!config.wgIsArticle || $('#ipe-edit-toolbox').length > 0) {
+    console.warn('[InPageEdit] 未载入 Toolbox');
      return;
    }
-   /**
+   /** IPE工具盒 **/
-   * @param{msg} type: function - this is the function for load i18n-js strings
+   var $toolbox = $('<div>', { id: 'ipe-edit-toolbox' }).append(
-   ** You can use normally strings insteed.
-   **/
-   $('<div>', { id: 'ipe-edit-toolbox' }).append(
      $('<ul>', { class: 'btn-group group1' }).append(
        $('<li>', { class: 'btn-tip-group' }).append(
-         $('<div>', { class: 'btn-tip', text: msg('quick-edit') }),
+         $('<div>', { class: 'btn-tip', text: _msg('quick-edit') }),
-         $('<button>', { id: 'edit-btn', class: 'ipe-toolbox-btn material-icons', text: 'edit' })
+         $('<button>', { id: 'edit-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-pencil"></i>' }).click(function () {
+          InPageEdit.quickEdit({
+            page: config.wgPageName,
+            revision: config.wgRevisionId
+          });
+        })
        ),
        $('<li>', { class: 'btn-tip-group' }).append(
-         $('<div>', { class: 'btn-tip', text: msg('redirect-from') }),
+         $('<div>', { class: 'btn-tip', text: _msg('redirect-from') }),
-         $('<button>', { id: 'redirectfrom-btn', class: 'ipe-toolbox-btn material-icons', text: 'flight_land' })
+         $('<button>', { id: 'redirectfrom-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-sign-in"></i>' }).click(function () {
+          InPageEdit.quickRedirect('from');
+        })
        ),
        $('<li>', { class: 'btn-tip-group' }).append(
-         $('<div>', { class: 'btn-tip', text: msg('redirect-to') }),
+         $('<div>', { class: 'btn-tip', text: _msg('redirect-to') }),
-         $('<button>', { id: 'redirectto-btn', class: 'ipe-toolbox-btn material-icons', text: 'flight_takeoff' })
+         $('<button>', { id: 'redirectto-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-sign-out"></i>' }).click(function () {
+          InPageEdit.quickRedirect('to');
+        })
        )
      ),
@@ Line 186: / Line 196: @@
        $('<div>', { style: 'display: flex;' }).append(
          $('<li>', { class: 'btn-tip-group' }).append(
-           $('<div>', { class: 'btn-tip', text: msg('quick-delete') }),
+           $('<div>', { class: 'btn-tip', text: _msg('quick-delete') }),
-           $('<button>', { id: 'deletepage-btn', class: 'ipe-toolbox-btn material-icons', text: 'delete_forever' })
+           $('<button>', { id: 'deletepage-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-trash"></i>' }).click(function () {
+            InPageEdit.quickDelete();
+          })
          ),
          $('<li>', { class: 'btn-tip-group' }).append(
-           $('<div>', { class: 'btn-tip', text: msg('quick-rename') }),
+           $('<div>', { class: 'btn-tip', text: _msg('quick-rename') }),
-           $('<button>', { id: 'renamepage-btn', class: 'ipe-toolbox-btn material-icons', text: 'format_italic' })
+           $('<button>', { id: 'renamepage-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-italic"></i>' }).click(function () {
+            InPageEdit.quickRename();
+          })
          ),
          $('<li>', { class: 'btn-tip-group' }).append(
-           $('<div>', { class: 'btn-tip', text: msg('ipe-preference') }),
+           $('<div>', { class: 'btn-tip', text: _msg('ipe-preference') }),
-           $('<button>', { id: 'preference-btn', class: 'ipe-toolbox-btn material-icons', text: 'settings' })
+           $('<button>', { id: 'preference-btn', class: 'ipe-toolbox-btn', html: '<i class="fa fa-gear"></i>' }).click(function () {
+            InPageEdit.preference.modal();
+          })
          )
        )
      ),
-     $('<button>', { class: 'ipe-toolbox-btn material-icons', id: 'toolbox-toggle', text: 'add' })
+     $('<button>', { class: 'ipe-toolbox-btn', id: 'toolbox-toggle', html: '<i class="fa fa-plus"></i>' })
-   ).appendTo('body');
+   );
-   $('#ipe-edit-toolbox #toolbox-toggle').click(function () {
-     $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').toggleClass('opened');
+  $toolbox.appendTo('body');
+   $toolbox.find('.btn-group button').click(function () {
+     _analysis('tool_box')
    });
-   $('body > *:not(#ipe-edit-toolbox)').click(function () {
-     $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').removeClass('opened');
+  // 设置开关等
+   var toolBoxInner = $toolbox.find('#toolbox-toggle, .btn-group');
+  $toolbox.find('#toolbox-toggle').click(function () {
+     if ($(this).hasClass('opened') && !$(this).hasClass('click')) {
+      InPageEdit.preference.set({ lockToolBox: true });
+      toolBoxInner.addClass('click');
+    } else if ($(this).hasClass('click')) {
+      InPageEdit.preference.set({ lockToolBox: false });
+      toolBoxInner.removeClass('click');
+    } else {
+      InPageEdit.preference.set({ lockToolBox: true });
+      toolBoxInner.addClass('click opened');
+    }
    });
-   $('#ipe-edit-toolbox .btn-group .ipe-toolbox-btn').click(function () {
+   // 如果锁定过工具盒，就自动展开
-     InPageEdit.analysis({ type: 'functionCount', function: '工具盒' });
+  if (InPageEdit.preference.get('lockToolBox') === true) {
-    switch ($(this).attr('id')) {
+     toolBoxInner.addClass('click opened');
-      case 'edit-btn':
+  }
-        InPageEdit.quickEdit({
+  // 鼠标覆盖与离开
-          page: mw.config.get('wgPageName'),
+  $toolbox.mouseover(function () {
-          revision: mw.config.get('wgRevisionId')
+    toolBoxInner.addClass('hover opened');
-        });
+  });
-        break;
+  $toolbox.mouseout(function () {
-      case 'redirectfrom-btn':
+    toolBoxInner.removeClass('hover');
-        InPageEdit.quickRedirect('from');
+    if (!$toolbox.find('#toolbox-toggle').hasClass('click')) {
-        break;
+       toolBoxInner.removeClass('opened');
-      case 'redirectto-btn':
-        InPageEdit.quickRedirect('to');
-        break;
-      case 'preference-btn':
-        InPageEdit.preference();
-        break;
-       case 'deletepage-btn':
-        InPageEdit.quickDelete();
-        break;
-      case 'renamepage-btn':
-        InPageEdit.quickRename();
-        break;
      }
    });
-   mw.hook('InPageEdit.toolbox').fire();
+  // 触发钩子，传递上下文
+   mw.hook('InPageEdit.toolbox').fire({
+    $toolbox
+  });
 });
 </pre>
@@ Line 241: / Line 263: @@
 此示例代码已在Vector、Timeless以及Hydra皮肤上测试可用
 {{hide|title=源代码|content=
-<pre class="prettyprint lang-js">
+<pre class="highlight lang-js">
 mw.hook('InPageEdit').add(function(){
    $('#ca-view').after(

Anonymous

Search

Site Notice

Difference between revisions of "InPageEdit-v2/SDK"

Namespaces

More

Page actions

Latest revision as of 00:23, 30 October 2020

Contents

快速编辑

快速重定向

快速删除

快速重命名

偏好设置

比较差异

添加编辑链接

加载框

更新日志

版本号

快速编辑工具条自定义按钮

实例演示

IPE原版工具盒

在编辑链接后添加快速编辑链接

注释

Navigation

Navigation

Wiki tools

Wiki tools

Anonymous

Search

Site Notice

Difference between revisions of "InPageEdit-v2/SDK"

Latest revision as of 00:23, 30 October 2020

快速编辑

快速重定向

快速删除

快速重命名

偏好设置

比较差异

添加编辑链接

加载框

更新日志

版本号

快速编辑工具条自定义按钮

实例演示

IPE原版工具盒

在编辑链接后添加快速编辑链接

注释

Navigation

Wiki tools

Page tools