diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
| commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
| tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator | |
| parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
| download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip | |
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/sdk/tutorials/annotator')
3 files changed, 0 insertions, 182 deletions
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 ---- -<p>我们想要控件做两件事:</p> - -<ul> - <li>点击鼠标左键,控件应当启用或禁用注释器。</li> - <li>点击鼠标右键,控件应当显示用户创建注释的清单。</li> -</ul> - -<p>因为控件无法区分鼠标左右键的点击,我们应当使用内容脚本来捕获单击事件并发送相应的消息到附加组件。</p> - -<p>控件将有两个图标:一个在注释器启用时显示,一个在禁用时显示。</p> - -<p>因此,我们需要创建三个文件:控件的内容脚本和两个图标。</p> - -<p>在data子目录创建一个widget子目录,我们将把控件的文件保存在这里(注意,这个不是强制性的:你可以仅仅把它们放在data里,但分类放置会更加整洁)。</p> - -<h2 id="控件的内容脚本">控件的内容脚本</h2> - -<p>控件的内容脚本仅仅监听鼠标的左右单击并发送相应的消息到附加组件代码:</p> - -<pre class="brush: js">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);</pre> - -<p>把它保存在data/widget并命名为widget.js。</p> - -<h2 id="控件图标">控件图标</h2> - -<p>你可以从这里复制图标:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6673/pencil-off.png"><img alt="" src="https://mdn.mozillademos.org/files/6675/pencil-on.png" style="width: 32px; height: 32px;"></p> - -<p>或者自己动手做你觉得有创造性的图标。把它们保存在data/widget目录。</p> - -<h2 id="main.js">main.js</h2> - -<p>现在在lib目录创建main.js并添加下列内容:</p> - -<pre class="brush: 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'); - }); -}</pre> - -<p>注释器默认禁用。它创建控件并通过切换注释器的活动状态来回应来自控件内容脚本的消息。注意,由于<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=626326">bug 626326</a>,附加组件状态栏的环境菜单会显示,尽管在控件的内容脚本中调用了event.preventDefault()。由于我们没有任何代码来显示注释,所以我们们仅仅记录右击事件到控制台。</p> - -<p>现在在注释器目录输入cfx run,你应该看见在附加组件状态栏的控件:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6679/widget-icon.png" style="width: 405px; height: 166px; display: block; margin-left: auto; margin-right: auto;"></p> - -<p>左击和右击应当产生合适的调试输出,同时左击应当改变控件的图标为启用状态。</p> - -<p> </p> - -<p>下一步,我们将添加代码来<a href="/en-US/Add-ons/SDK/Tutorials/Annotator/Creating_annotations">创建注释器</a>。</p> 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 ---- -<div class="warning"> -<p>请注意教程中Widget API适合的浏览器版本。(译者注)</p> -</div> - -<p>在这个教程中,我们将构建一个使用许多SDK高级API的附加组件.</p> - -<p>这个附加组件是一个注释器:它可以让用户选择网页的元素并输入有关的笔记(注释).注释器储存笔记.无论用户何时载入包含被注释元素的页面,这些元素都将会高亮显示,并且用户若把鼠标移动到被注释元素的上面,将会显示它的注释.</p> - -<p>接着我们将给出这个注释器设计的快速简介,然后一步步的讨论如何实现.</p> - -<p>如果你想参阅完整的附加组件,你可以在<a href="https://github.com/mozilla/addon-sdk/tree/master/examples/annotator">SDK例子目录</a>找到它.</p> - -<ul> - <li> - <p><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Annotator/Overview">设计概述</a></p> - </li> - <li> - <p><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Annotator/Implementing_the_widget">实现控件</a></p> - </li> - <li> - <p><a href="/en-US/Add-ons/SDK/Tutorials/Annotator/Creating_annotations">创建注释</a></p> - </li> - <li> - <p><a href="/en-US/Add-ons/SDK/Tutorials/Annotator/Storing_annotations">保存注释</a></p> - </li> - <li> - <p><a href="/en-US/Add-ons/SDK/Tutorials/Annotator/Displaying_annotations">显示注释</a></p> - </li> -</ul> 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 ---- -<p>注释器使用内容脚本(content scripts)来构建用户界面,得到用户输入,并检查用户载入页面的DOM。</p> - -<p>同时,主要模块包括程序逻辑和调节不同SDK对象的交互。</p> - -<p>我们可以描述在主要模块和不同内容脚本的交互,像这样:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6671/annotator-design.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h2 id="用户界面">用户界面</h2> - -<p>注释器的主要用户界面由一个控件和三个面板组成。</p> - -<ul> - <li><a href="/en-US/Add-ons/SDK/High-Level_APIs/widget">控件(widget)</a>用来选择打开或关闭注释器,显示所有已经储存的注释列表。</li> - <li><strong>注释编辑器(annotation-editor)</strong><a href="/en-US/Add-ons/SDK/High-Level_APIs/panel">面板</a>用来让用户输入注释。</li> - <li><strong>注释列表(annotation-list)</strong>面板用来显示保存的注释清单。</li> - <li><strong>注释(annotation)</strong>面板显示单条注释。</li> -</ul> - -<p>除此之外,我们使用 <a href="/en-US/Add-ons/SDK/High-Level_APIs/notifications">notifications</a> 模块来告知用户附加组件的储存限额已满。</p> - -<h2 id="用DOM工作">用DOM工作</h2> - -<p>我们将使用 <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod">page-mods</a> 来和用户打开的网页的DOM进行交互。</p> - -<ul> - <li> - <p><strong>选择器(selector)</strong>让用户选择一个元素来注释。它识别符合注释条件的页面元素,当鼠标在他们上方时高亮显示,并在用户点击高亮元素时通知主要的附加组件代码。</p> - </li> - <li> - <p><strong>匹配器(matcher)</strong>用来寻找被注释的元素:它初始化注释列表并网页中和注释相关连的元素。高亮网页上找到的关联元素,并高亮显示。当鼠标移动到已注释元素的上面,匹配器将通知显示注释面板的主要附加组件代码。</p> - </li> -</ul> - -<h2 id="处理数据">处理数据</h2> - -<p>我们将使用<a href="/en-US/Add-ons/SDK/High-Level_APIs/simple-storage">simple-storage</a>模块来储存数据。</p> - -<p>由于我们将记录潜在的敏感信息,我们想阻止用户在隐私浏览模式下创建注释,最简单的方式是删除附加组件中“package.json“文件的<a href="/en-US/Add-ons/SDK/Tools/package_json#permissions">”private-browsing"键</a>。这样,附加组件就不能看见任何隐私浏览窗口,同时注释器的控件也将不再出现。</p> - -<h2 id="开始行动">开始行动</h2> - -<p>现在让我们来创建叫“注释器”的目录。Navigate to it and type <code>cfx init</code>.</p> - -<p>下一步,我们将<a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Annotator/Implementing_the_widget">实现控件</a>。</p> |
