GithubHelp home page GithubHelp logo

__se__'s Introduction

__SE__ (SharedEvents)

JavaScript library for exchange events, data and tasks between browser tabs.

Подробный мануал на русском на Хабрахабре - если кто-нибудь переведёт всю эту лабуду на английский, буду очень признателен. :)

Requirements

  1. Blob
  2. Blob.URL
  3. Worker
  4. localStorage

API:

Options:
__SE__.Name - This tab name.
__SE__.SelfExecution - Self-emitting by not _Global events.
__SE__.Sync - Background worker interval in ms.
__SE__.TabTimeoutMult - Ctrl+F: "Inner relative values".
__SE__.SLockTimeoutMult - Ctrl+F: "Inner relative values".

Methods:
__SE__.clear( void );
__SE__.getActiveTabs( void );

__SE__.addEventListener ( Type , Listener [, TabName ] );
__SE__.hasEventListener ( Type [, Listener , TabName , Callback ] );
__SE__.removeEventListener ( Type [, Listener , TabName , Callback ] );
__SE__.dispatchEvent ( Type [, Data , TabName ] );

Constants:
__SE__.GID - global events and listeners target ("TabName") identifier.

Default global events:
tabOpened - { Name , ID } as GlobalEvent tabName: __SE__.GID
tabClosed - { Name , ID } as GlobalEvent tabName: __SE__.GID
tabNameChanged - { Name , ID , OldName } as GlobalEvent tabName: __SE__.GID

Inner relative values:

  1. Tab ping timeout expression: __SE__.Sync * __SE__.ActiveTabsCount * __SE__.TabTimeoutMult
  2. Storage lock timeout expression: __SE__.Sync * __SE__.SLockTimeoutMult

Examples:

Set local event listeners to default global events:

    var testFunction = function( data ){
        console.log( 'Local __SE__ event called on tabOpened.' );
        console.dir( data );
    };
    __SE__.addEventListener( 'tabOpened' , testFunction );

    var testFunctionB = function( data ){
        console.log( 'Local __SE__ event called on tabClosed.' );
        console.dir( data );
    };
    __SE__.addEventListener( 'tabClosed' , testFunctionB );

Local add/has/remove listeners:
    var testFunction = function( data ){
        console.log( 'Local __SE__ event called on TestEvent.' );
        console.dir( data );
    };
    var testResult = __SE__.addEventListener( 'TestEvent' , testFunction );
    console.log( 'Listener attachment result: ' + testResult );
console.log( 'Tests:' );

console.log( 'hasEventListener():' );
console.log( 'Expected "false", recieved: ' + __SE__.hasEventListener( 'Empty'      , testFunction ) );
console.log( 'Expected "false", recieved: ' + __SE__.hasEventListener( 'Empty'      , false ) );
console.log( 'Expected "true", recieved: '  + __SE__.hasEventListener( 'TestEvent'  , testFunction ) );
console.log( 'Expected "true", recieved: '  + __SE__.hasEventListener( 'TestEvent'  , false ) );

console.log( 'removeEventListener():' );
console.log( 'Expected "true", recieved: '  + __SE__.removeEventListener( 'Empty'       , testFunction ) );
console.log( 'Expected "true", recieved: '  + __SE__.removeEventListener( 'TestEvent'   , testFunction ) );
console.log( 'Expected "true", recieved: '  + __SE__.removeEventListener( 'TestEvent'   , testFunction ) );

Set local event listeners to tab-specified events:
    // part 1 (tab 1)
    var testFunction = function( data ){
        console.log( 'Local __SE__ event called on TestEvent.' );
        console.dir( data );
    };
    __SE__.addEventListener( 'TestEvent' , testFunction );
    __SE__.setName( 'Reciever' );
// part 2 (tab 2-3-4-n)
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } , 'UndefinedTab' ); // false, because send to 'UndefinedTab'
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } ); // true, because '_Global'
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } , 'Reciever' ); // true, because tab-specified

Set shared event listeners to tab-specified events:
    // part 1 (tab 1)
    var testFunction = function( data ){
        console.log( 'Shared __SE__ listener called on TestEvent.' );
        console.dir( data );
    };
    __SE__.addEventListener( 'TestEvent' , testFunction , 'Reciever' );
    __SE__.addEventListener( 'TestEvent' , testFunction , 'Tester' );
// part 2 (tab 2)
__SE__.setName( 'Reciever' );

// part 3 (tab 3)
__SE__.setName( 'Tester' );

// part 4 (tab 4)
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } , 'UndefinedTab' ); // TAB2 && TAB3: false, because send to 'UndefinedTab'
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } ); // TAB2 && TAB3: true, because '_Global'
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } , 'Reciever' ); // TAB2: true, because specified; TAB3: false
__SE__.dispatchEvent( 'TestEvent' , { Data: 'some data' } , 'Tester' ); // TAB3: true, because specified; TAB2: false

Shared events hasEventListener:
    // part 1 (tab 1)
    var testFunction = function( data ){
        console.log( 'Shared __SE__ listener called on TestEvent.' );
        console.dir( data );
    };
    __SE__.addEventListener( 'TestEvent' , testFunction , 'Reciever' );
// part 2 (tab 1)
var Callback = function( result ){
    if ( result ){
        console.log( 'TRUE! Listener exists.' );
    } else {
        console.log( 'FALSE! Listener not exists.' );
    }
}

__SE__.hasEventListener( 'TestEvent' , testFunction , 'Reciever' , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , testFunction , 'Reciever' , Callback ); // false
__SE__.hasEventListener( 'TestEvent' , testFunction , false , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , testFunction , false , Callback ); // false
__SE__.hasEventListener( 'TestEvent' , false , 'Reciever' , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , false , 'Reciever' , Callback ); // false
__SE__.hasEventListener( 'TestEvent' , false , false , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , false , false , Callback ); // false

// part 3 (tab 2)
var testFunction = function( data ){
    console.log( 'Shared __SE__ listener called on TestEvent.' );
    console.dir( data );
};

var Callback = function( result ){
    if ( result ){
        console.log( 'TRUE! Listener exists.' );
    } else {
        console.log( 'FALSE! Listener not exists.' );
    }
}

__SE__.hasEventListener( 'TestEvent' , testFunction , 'Reciever' , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , testFunction , 'Reciever' , Callback ); // false
__SE__.hasEventListener( 'TestEvent' , testFunction , false , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , testFunction , false , Callback ); // false
__SE__.hasEventListener( 'TestEvent' , false , 'Reciever' , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , false , 'Reciever' , Callback ); // false
__SE__.hasEventListener( 'TestEvent' , false , false , Callback ); // true
__SE__.hasEventListener( 'TestEventB' , false , false , Callback ); // false

__se__'s People

Contributors

sombressoul avatar

Stargazers

 avatar Danny avatar Dmitriy Mamontov avatar Egor Rudinsky avatar Dmitry Romanenko avatar andzil avatar Kirill Dlussky avatar Michael Anthony avatar Ichern avatar Vix Lazo avatar Alexander Taratin avatar Sergey Kryukov avatar Aleksandr Manichev avatar Anton Shurashov avatar Artur Brutian avatar Artur avatar  avatar Volodymyr avatar wentout avatar Mikhail Baranov avatar Azim Khakulov avatar  avatar Nikita Bayev avatar Dmitry Polushkin avatar Sukhorukov Olexandr avatar  avatar Shiryaev Andrey avatar Evgeny Shcherbinin avatar Dennis Liger avatar Oleg Petrov avatar Rodislav Moldovan avatar Serhii Pustovit avatar Petr Zelenin avatar Andy Chentsov avatar Vitaly P. avatar Oleksii Andrushevych avatar xRay avatar Artem Abashev avatar Alexzander thunder Shevchenko avatar  avatar Artem Zinoviev avatar Ax avatar Denis Ineshin avatar Dmitry Kuznetsov avatar Unconditional One avatar Dmitry Shadrunov avatar d-dozer avatar k1ife avatar Stanislav avatar Andrei Antropov avatar Oikio avatar Mykola Harmash avatar Alexandr Shumov avatar Maxim avatar AVIL P avatar  avatar Artem avatar

Watchers

xRay avatar James Cloos avatar Sukhorukov Olexandr avatar Michael Anthony avatar  avatar Ravil Mustafin avatar Nikolay avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.