The Tor Browser: addon-sdk/source/examples/annotator/lib/main.js@6474c204b198 (annotated)

addon-sdk/source/examples/annotator/lib/main.js@6474c204b198 (annotated)

addon-sdk/source/examples/annotator/lib/main.js

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 var widgets = require('sdk/widget');
 var pageMod = require('sdk/page-mod');
 var data = require('sdk/self').data;
 var panels = require('sdk/panel');
 var simpleStorage = require('sdk/simple-storage');
 var notifications = require("sdk/notifications");
 /*
 Global variables
 * Boolean to indicate whether the add-on is switched on or not
 * Array for all workers associated with the 'selector' page mod
 * Array for all workers associated with the 'matcher' page mod
 */
 var annotatorIsOn = false;
 var selectors = [];
 var matchers = [];
 if (!simpleStorage.storage.annotations)
   simpleStorage.storage.annotations = [];
 /*
 Update the matchers: call this whenever the set of annotations changes
 */
 function updateMatchers() {
   matchers.forEach(function (matcher) {
     matcher.postMessage(simpleStorage.storage.annotations);
   });
 }
 /*
 Constructor for an Annotation object
 */
 function Annotation(annotationText, anchor) {
   this.annotationText = annotationText;
   this.url = anchor[0];
   this.ancestorId = anchor[1];
   this.anchorText = anchor[2];
 }
 /*
 Function to deal with a new annotation.
 Create a new annotation object, store it, and
 notify all the annotators of the change.
 */
 function handleNewAnnotation(annotationText, anchor) {
   var newAnnotation = new Annotation(annotationText, anchor);
   simpleStorage.storage.annotations.push(newAnnotation);
   updateMatchers();
 }
 /*
 Function to tell the selector page mod that the add-on has become (in)active
 */
 function activateSelectors() {
   selectors.forEach(
     function (selector) {
       selector.postMessage(annotatorIsOn);
   });
 }
 /*
 Toggle activation: update the on/off state and notify the selectors.
 */
 function toggleActivation() {
   annotatorIsOn = !annotatorIsOn;
   activateSelectors();
   return annotatorIsOn;
 }
 function detachWorker(worker, workerArray) {
   var index = workerArray.indexOf(worker);
   if(index != -1) {
     workerArray.splice(index, 1);
   }
 }
 exports.main = function() {
 /*
 The widget provides a mechanism to switch the selector on or off, and to
 view the list of annotations.
 The selector is switched on/off with a left-click, and the list of annotations
 is displayed on a right-click.
 */
   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');
       annotationList.show();
   });
 /*
 The selector page-mod enables the user to select page elements to annotate.
 It is attached to all pages but only operates if the add-on is active.
 The content script highlights any page elements which can be annotated. If the
 user clicks a highlighted element it sends a message to the add-on containing
 information about the element clicked, which is called the anchor of the
 annotation.
 When we receive this message we assign the anchor to the annotationEditor and
 display it.
 */
   var selector = pageMod.PageMod({
     include: ['*'],
     contentScriptWhen: 'ready',
     contentScriptFile: [data.url('jquery-1.4.2.min.js'),
                         data.url('selector.js')],
     onAttach: function(worker) {
       worker.postMessage(annotatorIsOn);
       selectors.push(worker);
       worker.port.on('show', function(data) {
         annotationEditor.annotationAnchor = data;
         annotationEditor.show();
       });
       worker.on('detach', function () {
         detachWorker(this, selectors);
       });
     }
   });
 /*
 The annotationEditor panel is the UI component used for creating
 new annotations. It contains a text area for the user to
 enter the annotation.
 When we are ready to display the editor we assign its 'anchor' property
 and call its show() method.
 Its content script sends the content of the text area to the add-on
 when the user presses the return key.
 When we receives this message we create a new annotation using the anchor
 and the text the user entered, store it, and hide the panel.
 */
   var annotationEditor = panels.Panel({
     width: 220,
     height: 220,
     contentURL: data.url('editor/annotation-editor.html'),
     contentScriptFile: data.url('editor/annotation-editor.js'),
     onMessage: function(annotationText) {
       if (annotationText)
         handleNewAnnotation(annotationText, this.annotationAnchor);
       annotationEditor.hide();
     },
     onShow: function() {
       this.postMessage('focus');
     }
   });
 /*
 The annotationList panel is the UI component that lists all the annotations
 the user has entered.
 On its 'show' event we pass it the array of annotations.
 The content script creates the HTML elements for the annotations, and
 intercepts clicks on the links, passing them back to the add-on to open them
 in the browser.
 */
   var annotationList = panels.Panel({
     width: 420,
     height: 200,
     contentURL: data.url('list/annotation-list.html'),
     contentScriptFile: [data.url('jquery-1.4.2.min.js'),
                         data.url('list/annotation-list.js')],
     contentScriptWhen: 'ready',
     onShow: function() {
       this.postMessage(simpleStorage.storage.annotations);
     },
     onMessage: function(message) {
       require('sdk/tabs').open(message);
     }
   });
 /*
 We listen for the OverQuota event from simple-storage.
 If it fires we just notify the user and delete the most
 recent annotations until we are back in quota.
 */
   simpleStorage.on("OverQuota", function () {
     notifications.notify({
       title: 'Storage space exceeded',
       text: 'Removing recent annotations'});
     while (simpleStorage.quotaUsage > 1)
       simpleStorage.storage.annotations.pop();
   });
 /*
 The matcher page-mod locates anchors on web pages and prepares for the
 annotation to be displayed.
 It is attached to all pages, and when it is attached we pass it the complete
 list of annotations. It looks for anchors in its page. If it finds one it
 highlights the anchor and binds mouseenter/mouseout events to 'show' and 'hide'
 messages to the add-on.
 When the add-on receives the 'show' message it assigns the annotation text to
 the annotation panel and shows it.
 Note that the matcher is active whether or not the add-on is active:
 'inactive' only means that the user can't create new add-ons, they can still
 see old ones.
 */
   var matcher = pageMod.PageMod({
     include: ['*'],
     contentScriptWhen: 'ready',
     contentScriptFile: [data.url('jquery-1.4.2.min.js'),
                         data.url('matcher.js')],
     onAttach: function(worker) {
       if(simpleStorage.storage.annotations) {
         worker.postMessage(simpleStorage.storage.annotations);
       }
       worker.port.on('show', function(data) {
         annotation.content = data;
         annotation.show();
       });
       worker.port.on('hide', function() {
         annotation.content = null;
         annotation.hide();
       });
       worker.on('detach', function () {
         detachWorker(this, matchers);
       });
       matchers.push(worker);
     }
   });
 /*
 The annotation panel is the UI component that displays an annotation.
 When we are ready to show it we assign its 'content' attribute to contain
 the annotation text, and that gets sent to the content process in onShow().
 */
   var annotation = panels.Panel({
     width: 200,
     height: 180,
     contentURL: data.url('annotation/annotation.html'),
     contentScriptFile: [data.url('jquery-1.4.2.min.js'),
                         data.url('annotation/annotation.js')],
     contentScriptWhen: 'ready',
     onShow: function() {
       this.postMessage(this.content);
     }
   });
 }