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]

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

@@ 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 137: / Line 137: @@
    middle: '注释文字', // 选区内容占位符，选填
    close: ' -->', // 添加到光标后的内容
-   text: '<span class="material-icons">description</span>' // 按钮文字，被解析为html
+   text: 'low-vision' // 按钮标志，一个FontAwes名字
 }, { // 再举个栗子
    open: '<s>',
    middle: '删除线',
    close: '</s>',
-   text: '<span class="material-icons">strikethrough_s</span>'
+   text: 'strikethrough'
 }];
 </pre>
@@ 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"

Latest revision as of 00:23, 30 October 2020

快速编辑

快速重定向

快速删除

快速重命名

偏好设置

比较差异

添加编辑链接

加载框

更新日志

版本号

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

实例演示

IPE原版工具盒

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

注释

Navigation

Wiki tools

Page tools