From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../annotator/implementing_the_widget/index.html | 92 ---------------------- .../add-ons/sdk/tutorials/annotator/index.html | 36 --------- .../sdk/tutorials/annotator/overview/index.html | 54 ------------- 3 files changed, 182 deletions(-) delete mode 100644 files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/implementing_the_widget/index.html delete mode 100644 files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/index.html delete mode 100644 files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/overview/index.html (limited to 'files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator') diff --git a/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/implementing_the_widget/index.html b/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/implementing_the_widget/index.html deleted file mode 100644 index 04e4a75d23..0000000000 --- a/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/implementing_the_widget/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 实现控件 -slug: Mozilla/Add-ons/SDK/Tutorials/Annotator/Implementing_the_widget -tags: - - 附加组件 -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Annotator/Implementing_the_widget ---- -

我们想要控件做两件事：

- - - -

因为控件无法区分鼠标左右键的点击，我们应当使用内容脚本来捕获单击事件并发送相应的消息到附加组件。

- -

控件将有两个图标：一个在注释器启用时显示，一个在禁用时显示。

- -

因此，我们需要创建三个文件：控件的内容脚本和两个图标。

- -

在data子目录创建一个widget子目录，我们将把控件的文件保存在这里（注意，这个不是强制性的：你可以仅仅把它们放在data里，但分类放置会更加整洁）。

- -

控件的内容脚本

- -

控件的内容脚本仅仅监听鼠标的左右单击并发送相应的消息到附加组件代码：

- -
this.addEventListener('click', function(event) {
-  if(event.button == 0 && event.shiftKey == false)
-    self.port.emit('left-click');
-
-  if(event.button == 2 || (event.button == 0 && event.shiftKey == true))
-    self.port.emit('right-click');
-    event.preventDefault();
-}, true);
- -

把它保存在data/widget并命名为widget.js。

- -

控件图标

- -

你可以从这里复制图标：

- -

- -

或者自己动手做你觉得有创造性的图标。把它们保存在data/widget目录。

- -

main.js

- -

现在在lib目录创建main.js并添加下列内容：

- -
var widgets = require('sdk/widget');
-var data = require('sdk/self').data;
-
-var annotatorIsOn = false;
-
-function toggleActivation() {
-  annotatorIsOn = !annotatorIsOn;
-  return annotatorIsOn;
-}
-
-exports.main = function() {
-
-  var widget = widgets.Widget({
-    id: 'toggle-switch',
-    label: 'Annotator',
-    contentURL: data.url('widget/pencil-off.png'),
-    contentScriptWhen: 'ready',
-    contentScriptFile: data.url('widget/widget.js')
-  });
-
-  widget.port.on('left-click', function() {
-    console.log('activate/deactivate');
-    widget.contentURL = toggleActivation() ?
-              data.url('widget/pencil-on.png') :
-              data.url('widget/pencil-off.png');
-  });
-
-  widget.port.on('right-click', function() {
-      console.log('show annotation list');
-  });
-}
- -

注释器默认禁用。它创建控件并通过切换注释器的活动状态来回应来自控件内容脚本的消息。注意，由于bug 626326，附加组件状态栏的环境菜单会显示，尽管在控件的内容脚本中调用了event.preventDefault()。由于我们没有任何代码来显示注释，所以我们们仅仅记录右击事件到控制台。

- -

现在在注释器目录输入cfx run，你应该看见在附加组件状态栏的控件：

- -

- -

左击和右击应当产生合适的调试输出，同时左击应当改变控件的图标为启用状态。

- -

 

- -

下一步，我们将添加代码来创建注释器。

diff --git a/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/index.html b/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/index.html deleted file mode 100644 index 4f76d67802..0000000000 --- a/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: 注释器(Annotator) -slug: Mozilla/Add-ons/SDK/Tutorials/Annotator -tags: - - 附加组件 -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Annotator ---- -
-

请注意教程中Widget API适合的浏览器版本。（译者注）

-
- -

在这个教程中，我们将构建一个使用许多SDK高级API的附加组件.

- -

这个附加组件是一个注释器:它可以让用户选择网页的元素并输入有关的笔记(注释).注释器储存笔记.无论用户何时载入包含被注释元素的页面,这些元素都将会高亮显示,并且用户若把鼠标移动到被注释元素的上面,将会显示它的注释.

- -

接着我们将给出这个注释器设计的快速简介,然后一步步的讨论如何实现.

- -

如果你想参阅完整的附加组件,你可以在SDK例子目录找到它.

- - diff --git a/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/overview/index.html b/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/overview/index.html deleted file mode 100644 index da94f8142a..0000000000 --- a/files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator/overview/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 概述 -slug: Mozilla/Add-ons/SDK/Tutorials/Annotator/Overview -tags: - - addon sdk example - - annotator example - - 附加组件 -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Annotator/Overview ---- -

注释器使用内容脚本（content scripts）来构建用户界面，得到用户输入，并检查用户载入页面的DOM。

- -

同时，主要模块包括程序逻辑和调节不同SDK对象的交互。

- -

我们可以描述在主要模块和不同内容脚本的交互，像这样：

- -

- -

用户界面

- -

注释器的主要用户界面由一个控件和三个面板组成。

- - - -

除此之外，我们使用 notifications 模块来告知用户附加组件的储存限额已满。

- -

用DOM工作

- -

我们将使用 page-mods 来和用户打开的网页的DOM进行交互。

- - - -

处理数据

- -

我们将使用simple-storage模块来储存数据。

- -

由于我们将记录潜在的敏感信息，我们想阻止用户在隐私浏览模式下创建注释，最简单的方式是删除附加组件中“package.json“文件的”private-browsing"键。这样，附加组件就不能看见任何隐私浏览窗口，同时注释器的控件也将不再出现。

- -

开始行动

- -

现在让我们来创建叫“注释器”的目录。Navigate to it and type cfx init.

- -

下一步，我们将实现控件。

-- cgit v1.2.3-54-g00ecf