Site Notice

hello, world

Difference between revisions of "InPageEdit-v2/SDK"

From Project-EPB Commons
m (机智的小鱼君 moved page InPageEdit-v2/API to InPageEdit-v2/SDK: 快速重命名 → InPageEdit-v2/SDK)
([InPageEdit] 没有编辑摘要 第13部分)
(One intermediate revision by the same user not shown)
Line 163: Line 163:
 
{{hide|title=原版代码|content=
 
{{hide|title=原版代码|content=
 
<pre class="prettyprint lang-js">
 
<pre class="prettyprint lang-js">
−
// ipe工具盒
+
/**
−
$('body').append(
+
* InPageEdit Toolbox
−
  '<div id="ipe-edit-toolbox">' +
+
* Example extension for InPageEdit-v2,
−
 
+
* Default loaded for everyone.
−
  // group1 上方的一列按钮
+
**/
−
  '<ul class="btn-group group1">' +
+
mw.hook('InPageEdit').add(function () {
−
   '<li class="btn-tip-group"><div class="btn-tip">快速编辑</div><button id="edit-btn" class="ipe-toolbox-btn material-icons">edit</button></li>' +
+
   // Not article
−
   '<li class="btn-tip-group"><div class="btn-tip">重定向至此</div><button id="redirectfrom-btn" class="ipe-toolbox-btn material-icons">flight_land</button></li>' +
+
   if (mw.config.get('wgIsArticle') === false) {
−
  '<li class="btn-tip-group"><div class="btn-tip">重定向到</div><button id="redirectto-btn" class="ipe-toolbox-btn material-icons">flight_takeoff</button></li>' +
+
    return;
−
  '</ul>' +
+
   }
−
 
 
−
  // group2 左边的一排按钮
 
−
  '<ul class="btn-group group2"><div style="display: flex;">' +
 
−
  '<li class="btn-tip-group"><div class="btn-tip">删除本页面</div><button id="deletepage-btn" class="ipe-toolbox-btn material-icons">delete_forever</button></li>' +
 
−
  '<li class="btn-tip-group"><div class="btn-tip">重命名页面</div><button id="renamepage-btn" class="ipe-toolbox-btn material-icons">format_italic</button></li>' +
 
−
   '<li class="btn-tip-group"><div class="btn-tip">自定义设置</div><button id="preference-btn" class="ipe-toolbox-btn material-icons">settings</button></li>' +
 
−
  '</div></ul>' +
 
  
−
   '<button class="ipe-toolbox-btn material-icons" id="toolbox-toggle">add</button>' +
+
   /**
−
  '</div>');
+
  * @param{msg} type: function - this is the function for load i18n-js strings
−
$('#ipe-edit-toolbox #toolbox-toggle').click(function () {
+
  ** You can use normally strings insteed.
−
  $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').toggleClass('opened');
+
  **/
−
});
+
  $('<div>', { id: 'ipe-edit-toolbox' }).append(
−
$('body > *:not(#ipe-edit-toolbox)').click(function () {
+
    $('<ul>', { class: 'btn-group group1' }).append(
−
  $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').removeClass('opened');
+
      $('<li>', { class: 'btn-tip-group' }).append(
−
});
+
        $('<div>', { class: 'btn-tip', text: msg('quick-edit') }),
−
$('#ipe-edit-toolbox .ipe-toolbox-btn').click(function () {
+
        $('<button>', { id: 'edit-btn', class: 'ipe-toolbox-btn material-icons', text: 'edit' })
−
  switch ($(this).attr('id')) {
+
      ),
−
    case 'toolbox-toggle':
+
      $('<li>', { class: 'btn-tip-group' }).append(
−
       break;
+
        $('<div>', { class: 'btn-tip', text: msg('redirect-from') }),
−
    case 'edit-btn':
+
        $('<button>', { id: 'redirectfrom-btn', class: 'ipe-toolbox-btn material-icons', text: 'flight_land' })
−
      InPageEdit.edit({
+
      ),
−
        page: mw.config.get('wgPageName'),
+
      $('<li>', { class: 'btn-tip-group' }).append(
−
        revision: mw.config.get('wgRevisionId')
+
        $('<div>', { class: 'btn-tip', text: msg('redirect-to') }),
−
      });
+
        $('<button>', { id: 'redirectto-btn', class: 'ipe-toolbox-btn material-icons', text: 'flight_takeoff' })
−
      break;
+
      )
−
    case 'redirectfrom-btn':
+
    ),
−
      InPageEdit.redirect('from');
+
    $('<ul>', { class: 'btn-group group2' }).append(
−
      break;
+
      $('<div>', { style: 'display: flex;' }).append(
−
    case 'redirectto-btn':
+
        $('<li>', { class: 'btn-tip-group' }).append(
−
      InPageEdit.redirect('to');
+
          $('<div>', { class: 'btn-tip', text: msg('quick-delete') }),
−
      break;
+
          $('<button>', { id: 'deletepage-btn', class: 'ipe-toolbox-btn material-icons', text: 'delete_forever' })
−
    case 'preference-btn':
+
        ),
−
      InPageEdit.preference();
+
        $('<li>', { class: 'btn-tip-group' }).append(
−
      break;
+
          $('<div>', { class: 'btn-tip', text: msg('quick-rename') }),
−
    case 'deletepage-btn':
+
          $('<button>', { id: 'renamepage-btn', class: 'ipe-toolbox-btn material-icons', text: 'format_italic' })
−
      InPageEdit.deletepage();
+
        ),
−
      break;
+
        $('<li>', { class: 'btn-tip-group' }).append(
−
    case 'renamepage-btn':
+
          $('<div>', { class: 'btn-tip', text: msg('ipe-preference') }),
−
      InPageEdit.renamepage();
+
          $('<button>', { id: 'preference-btn', class: 'ipe-toolbox-btn material-icons', text: 'settings' })
−
      break;
+
        )
−
   }
+
      )
 +
    ),
 +
    $('<button>', { class: 'ipe-toolbox-btn material-icons', id: 'toolbox-toggle', text: 'add' })
 +
  ).appendTo('body');
 +
  $('#ipe-edit-toolbox #toolbox-toggle').click(function () {
 +
    $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').toggleClass('opened');
 +
  });
 +
  $('body > *:not(#ipe-edit-toolbox)').click(function () {
 +
    $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').removeClass('opened');
 +
  });
 +
  $('#ipe-edit-toolbox .btn-group .ipe-toolbox-btn').click(function () {
 +
    InPageEdit.analysis({ type: 'functionCount', function: '工具盒' });
 +
    switch ($(this).attr('id')) {
 +
       case 'edit-btn':
 +
        InPageEdit.quickEdit({
 +
          page: mw.config.get('wgPageName'),
 +
          revision: mw.config.get('wgRevisionId')
 +
        });
 +
        break;
 +
      case 'redirectfrom-btn':
 +
        InPageEdit.quickRedirect('from');
 +
        break;
 +
      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();
 
});
 
});
 
</pre>
 
</pre>

Revision as of 18:23, 1 April 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()

  • ?

功能正在开发

快速重命名

InPageEdit.renamepage()

  • 打开快速重命名窗口

InPageEdit设置

InPageEdit.preference()

  • 打开设置窗口

<html><button onclick="InPageEdit.preference()">测试</button></html>

比较差异

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>

实例演示

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

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

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

源代码 
$(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')
          });
        })
      )
    )
  );
});

IPE原版工具盒

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

原版代码 
/** 
 * InPageEdit Toolbox
 * Example extension for InPageEdit-v2,
 * Default loaded for everyone.
 **/
mw.hook('InPageEdit').add(function () {
  // Not article
  if (mw.config.get('wgIsArticle') === false) {
    return;
  }

  /** 
   * @param{msg} type: function - this is the function for load i18n-js strings
   ** 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') }),
        $('<button>', { id: 'edit-btn', class: 'ipe-toolbox-btn material-icons', text: 'edit' })
      ),
      $('<li>', { class: 'btn-tip-group' }).append(
        $('<div>', { class: 'btn-tip', text: msg('redirect-from') }),
        $('<button>', { id: 'redirectfrom-btn', class: 'ipe-toolbox-btn material-icons', text: 'flight_land' })
      ),
      $('<li>', { class: 'btn-tip-group' }).append(
        $('<div>', { class: 'btn-tip', text: msg('redirect-to') }),
        $('<button>', { id: 'redirectto-btn', class: 'ipe-toolbox-btn material-icons', text: 'flight_takeoff' })
      )
    ),
    $('<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 material-icons', text: 'delete_forever' })
        ),
        $('<li>', { class: 'btn-tip-group' }).append(
          $('<div>', { class: 'btn-tip', text: msg('quick-rename') }),
          $('<button>', { id: 'renamepage-btn', class: 'ipe-toolbox-btn material-icons', text: 'format_italic' })
        ),
        $('<li>', { class: 'btn-tip-group' }).append(
          $('<div>', { class: 'btn-tip', text: msg('ipe-preference') }),
          $('<button>', { id: 'preference-btn', class: 'ipe-toolbox-btn material-icons', text: 'settings' })
        )
      )
    ),
    $('<button>', { class: 'ipe-toolbox-btn material-icons', id: 'toolbox-toggle', text: 'add' })
  ).appendTo('body');
  $('#ipe-edit-toolbox #toolbox-toggle').click(function () {
    $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').toggleClass('opened');
  });
  $('body > *:not(#ipe-edit-toolbox)').click(function () {
    $('#ipe-edit-toolbox #toolbox-toggle, #ipe-edit-toolbox .btn-group').removeClass('opened');
  });
  $('#ipe-edit-toolbox .btn-group .ipe-toolbox-btn').click(function () {
    InPageEdit.analysis({ type: 'functionCount', function: '工具盒' });
    switch ($(this).attr('id')) {
      case 'edit-btn':
        InPageEdit.quickEdit({
          page: mw.config.get('wgPageName'),
          revision: mw.config.get('wgRevisionId')
        });
        break;
      case 'redirectfrom-btn':
        InPageEdit.quickRedirect('from');
        break;
      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();
});

注释

  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请求，这会给服务器带来一定的负荷

<html><!-- <script src="https://common.wjghj.cn/js/InPageEdit-v2"></script> --></html>

Retrieved from "https://common.epb.wiki/index.php?title=InPageEdit-v2/SDK&oldid=2549"