Getting Started
This part is an instruction for getting developers set up to use the EasyNote library.
The fully functional library requires jQuery and EasyNote's css file. To use the library, download required files and add codes below to your website's html code.
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script defer src='easy-note.js'></script>
<link rel="stylesheet" type="text/css" href="easy-note.css"/>
Now, you can create an EasyNotePair object. The control widget and note widgets of the same EasyNotePair object are paired with each other and are independent to widgets of other EasyNotePairs.
const pair = new EasyNotePair('a-unique-name', 'style-of-control-widget', true) //set true to false when disabling copy highlights feature.Get the control widget and create note widgets of an EasyNotePair. One EasyNotePair has one control widget. You can create multiple note widgets in an EasyNotePair.
const control = pair.controller
const note = pair.createNoteWidget('text-of-widget', 'style-of-note-widget') //create a block note element
const inlineNote = pair.createNoteLine('text-of-widget', 'style-of-note-widget') //create an inline note element
How to Use
This part shows all users how to use EasyNote widgets to take notes in a website.
There are two modes of a control widget. You can switch between highlight mode and note mode. In highlight mode, you can use two colors to highlight texts at the same time. And you can change those two colors using the colorpicker respectively. To switch the color between the two, click on the colorpicker with the color you like. If you want to delete any highlights, simply select inside that area. You can only delete one highlighted area at a time. Selecting across the area with notes inside won't delete the highlight. In note mode, you can select an area and click add note button. Hover on that area and you can type your notes in the pop-up box. To delete a note, click that note and click delete note button. Please be aware that you can only have notes completely inside a highlighted area or completely outside highlighted areas and you can't start or end your highlighting in the middle of a note. Clicking copy highlights button will copy all your highlighted area of note widgets under the control widget you are using. You can clear all highlights and notes by clicking wipe all button.
A few examples are available.
API
Constructor
EasyNotePair(name, controllerStyle='', copy=true)
Creates an EasyNotePair object with a unique name and its controller widget with style of controllerStyle. The value of copy indicates whether copy highlights feature is enabled or not. Returns the EasyNotePair object.
EasyNotePair Property
name
A unique string to identify every EasyNotePair.
colorPicker
A number showing which colorPicker on the control widget is being used by the user. It is set to 1 on default.
controller
The control widget of the EasyNotePair. Returns a DOM element.
noteWidgets
An array of all note widget DOM elements of an EasyNotePair.
EasyNotePair Methods
.controlWidget(name, style='', copy=true)
Creates and returns a control widget of the EasyNotePair object with a specific style and copy highlights feature enabled on default. A EasyNotePair will contain a control widget automatically when created. You don't need to call this method yourself in most cases. And you can't have more than one control widget in one easy-note pair.
const control = pair.controlWidget('background: red', true)
//create a control widget of pair with red background and copy highlights feature enabled.
.createNoteWidget(text, style='')
Creates and returns a note widget as a block element of the EasyNotePair object with specific text and style.
const note = pair.createNoteWidget('Lorem ipsum', 'color: blue')
//create a note widget as a block element of pair with text 'Lorem ipsum' in blue.
.createNoteLine(text, style='')
Creates and returns a note widget as an inline element of the EasyNotePair object with specific text and style. You can embed the element in paragraphs that you just want a few sentences to be able to take notes on.
const inlineNote = pair.createNoteLine('Lorem ipsum', 'color: blue')
//create a note widget as an inline element of pair with text 'Lorem ipsum' in blue.
.highlightFunc()
This method handles the highlight and note-taking functionalities.
.getHighlights()
Returns the highlighted area in an array of strings of all note widgets of the EasyNotePair.
const highlightedAreas = pair.getHighlights()
.getAllHighlightsOnPage()
Returns the highlighted area in an array of strings of all note widgets of the EasyNotePair that have been added to window.document object.
const highlightedAreaOnPage = pair.getHighlightsOnPage()
.getHighlightsOfWidget(widget)
Returns the highlighted area in an array of strings of a specific note widget of the EasyNotePair.
const highlightedArea = pair.getHighlightsOfWidget(note)
.getNoteArea()
Returns the area that the user took notes on in an array of strings of all note widgets of the EasyNotePair.
const noteAreas = pair.getNoteArea()
.getNoteAreaOnPage()
Returns the area that the user took notes on in an array of strings of all note widgets of the EasyNotePair that have been added to window.document object.
const noteAreaOnPage = pair.getNoteAreaOnPage()
.getNoteAreaOfWidget(widget)
Returns the area that the user took notes on in an array of strings of a specific note widget of the EasyNotePair.
const noteArea = pair.getNoteAreaOfWidget(note)
.getNoteContent()
Returns the note area along with its note contents in an array of key-value pairs of all note widgets of the EasyNotePair.
const noteContents = pair.getNoteContent()
.getNoteContentOnPage()
Returns the note area along with its note contents in an array of key-value pairs of all note widgets of the EasyNotePair that have been added to window.document object.
const noteContentOnPage = pair.getNoteContentOnPage()
.getNoteContentOfWidget(widget)
Returns the note area along with its note contents in an array of key-value pairs of a specific note widget of the EasyNotePair.
const noteContent = pair.getNoteContentOfWidget(note)
.changeNoteWidgetStyle(style)
Changes all note widgets' style of the EasyNotePair to a new style.
pair.changeNoteWidgetStyle('color: purple')
//change pair's note widgets' text color to purple.
.changeControllerStyle(style)
Changes the control widget's style of the EasyNotePair to a new style.
pair.changeControllerStyle('border: 2px solid black')
//change pair's control widget's border style.
.changeControllerButtonStyle(addNoteButtonStyle='', copyButtonStyle='', deleteButtonStyle='', wipeButtonStyle='')
Changes each button's style of the control widget of the EasyNotePair.
pair.changeControllerButtonStyle('color: red', 'background: black', 'font-family: Arial', 'border-radius: 1px')
//change four buttons' styles respectively.
.changeModePickerStyle(textColor='', modePickerBackgroundColor='', highlightModeButtonColor='', noteModeButtonColor='')
Changes mode picker's style of the control widget of the EasyNotePair.
pair.changeModePickerStyle('aqua', 'white', 'green', 'yellow')
//change mode picker's text color, background color, two mode's buttons' background color respectively.