Creative Commons Pasteboard

Introduction

The Creative Commons Pasteboard is a browser extension used to help users easily clip content from different sources aroud the web. It also helps users by automatically adding attribution information when users paste their clips into documents.

Creative Commons Wiki about Pasteboard

Browser Extensions

Browser extensions are used to inject required scripts into the page in order to do the following:

Functions of browser extension

• Display the pasteboard user interface using an iframe
• Capture mouse gestures ( drag clips towards page bottom ) and display the UI
• Keep the channel ready for messages from the pasteboard

Supported Browsers

• Google Chrome
• Mozilla Firefox (todo)
• Opera (todo)

TODO

• Revise this TODO list
• Support Mozilla Firefox

Google Chrome

Mouse Gestures

The pasteboard is displayed when user selects content and drags it towards page bottom. gesture is recognized if user drags the clip 5 pixels towards page bottom within 300 milliseconds.

Communications with Pasteboard User Interface

Currently all communications with pasteboard is done directly using Mozilla jschannel. The iframe is used to create the channel.

TODO

• Revise this TODO list
• Improved drag gesture recognizer

Pasteboard User Interface

The app which loads inside the iframe created by the browser extension. At this stage it uses firebase to store clip content and firebase built-in authentication using Mozilla Persona. The interface is managed by AngularJS using AngularFire to connect with firebase.

Content Management

To keep data in sync, the pasteboard UI uses AngularJS and AngularFire and creates a 3-way data-binding between Firebase, Javascript and the page (DOM).

User Registration/Login

Uses Firebase built-in authentication "Firebase simple auth" via the AngularFire plugin. No user registration is required at the moment. The account and related data is created in Firebase when user logs in for the first time.

Communications with Browser Extension

Currently all communications with browser is done directly using Mozilla jschannel.

Listens to

• addClip(clip)
  clip : A javascript object which contains clip and attribution data

Calls

• ResizePasteboard(size)
  size : 'normal', 'maximized'

TODO

• Revise this TODO list
• Use html5 appcache to speedup loading resources
• Use html5 localStorage to cache clip data and user preferences
• Synchronize localStorage data with firebase data
• Rewrite the code to use CommonJS modules for better namespace management
• Decrease dependencies (AngularJS, AngularFire, Firebase Authentication, etc.)
• Use pasteboard server authentication instead of Firebase built-in system
• Connect and use Google Drive API to browse and open documents
• Implement dragging clips from pasteboard to Google Docs
• A javascript/node.js API to integrate the pasteboard with other editors
• Implement dragging clips from pasteboard to other editors using API
• Automatically add attribution information to documents when using clips