You can mark interesting parts of the page content and share unique link from browser address bar.

РУС

MASHA

MASHA (short for Mark & Share) is a JavaScript utility allowing you to mark interesting parts of web page content and share it. Just select text (paragraphs, sentences, words) on MASHA powered page and copy generated URL from location bar. Try it on this page!

This utility was first developed for the official site of the President of Russia, where it was successfully launched. Since then we got a lot of questions “What is it?”, “Can I use it on my site?”, so we decided to bring development to public.

USAGE

MASHA is implemented in pure JavaScript and does’t need any third party libraries to work (except the ierange library, provided with MASHA to support Internet Explorer). To enable MASHA put the following code in the <head></head>:

                        <!--[IF IE]> 
                            <script type="text/javascript" src="ierange.js"></script> 
                        <![ENDIF]-->
                        <script type="text/javascript" src="masha.js"></script>
                        <link rel="stylesheet" type="text/css" href="masha.css">
                        <script type="text/javascript">
                        if(window.addEventListener){     
                            window.addEventListener('load', function(){
                                // can be called by domready
                                MaSha.instance = new MaSha();
                            }, false);
                        } else {
                            window.attachEvent('onload', function(){
                                // can be called by domready
                                MaSha.instance = new MaSha();
                            });
                        }
                        </script>

MASHA requires the following HTML elements on the page to work:

  1. element with text to select (see ‘selectable’ option below),
  2. button appearing when some text is selected with mouse (see ‘marker’ option below).

You can use MASHA with default settings or pass configuration object to constructor:

                        new MaSha({...})

The default setting are:

                        {
                          'regexp': new RegExp('[^\\s,;:–.!?<>…\\n\xA0\\*]+', 'ig'),
                          'selectable': 'selectable-content',
                          'marker': 'txtselect_marker',
                          'ignored': null,
                          'onMark': null,
                          'onUnmark': null,
                          'onHashRead': function(){ … }
                        }

Where
'regexp' — regular expression to determine words (as minimal selectable item),
'selectable' — HTML-element (or id of it) determining selectable area,
'marker' — HTML-element (or id of it) of marker icon appearing when some text is selected with mouse,
'ignored' — predicate function of HTML element argument returning true to forbid selection in some elements inside selectable area and false otherwise,
'onMark' — callback function called when user click on marker,
'onUnmark' — callback function called when user deletes mark,
'onHashRead' — function called when page is loaded and marks are restored (by default scrolls to first marked fragment).

Internet Explorer support

The ierange library is used for support Internet Explorer. Necessary version is a bit different from original. You can use ierange distributed with MASHA or add the following line to ierange’s top-level function:

                    window.DOMRange = DOMRange;

AUTHORS

Artem Geller

@darkboutique, facebook, gplus, moikrug

Denis Otkidach

@otkds, LinkedIn

Stas Bonbin

@iamn0s, facebook, gplus, moikrug

Harut Dagesyan

@harutune, moikrug, github

Kirill Grishin

@shiberz, moikrug, gplus

This work was inspired by Emphasis tool of New York Times. The goal was to make an utility that doesn’t require reading documentation to use.

LICENSE

MASHA is released under the terms of MIT license, which means you can use, modify, redistribute it with almost no restrictions.