Дополнения

Реализация Виджета

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Мы хотим, чтобы виджет выполнял две вещи:

  • При клике левой кнопкой мыши, Виджет должен активировать или деактивировать Аннотатор;
  • При клике правой кнопкой, Виджет должен отобразить список всех заметок, созданных пользователем.

Так как событие click не различает левую и правую кнопки мыши, мы будем использовать контент-скрипт для захвата событий клика мышью и отправлять соответствующее сообщение назад, нашему расширению.

Виджет должен иметь две иконки: одна для активного состояния, вторая для неактивного.

В итоге нам понадобится создать три файла: контент-скрипт для Виджета и две иконки.

Внутри папки 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() в контент-скрипте Виджета. Так как мы пока не имеем кода для отображения заметок, мы просто выведем в консоль событие нажатия правой кнопки.

Теперь, перейдя в папку annotator выполните команду cfx run. Вы должны увидеть Виджет в панели дополнений:

Левый и правый клики должы выводить соответсвующие сообщения в консоль, и левый клик также должен менять иконку для отображения состояния активности Виджета.

 

Далее мы добавим реализацию функции создания аннотаций.

Метки документа и участники

 Внесли вклад в эту страницу: kestik
 Обновлялась последний раз: kestik,