├── package.json ├── bower.json ├── dist └── glio.min.js ├── glio.js ├── README-PT.md └── README.md /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gliojs", 3 | "version": "0.0.7", 4 | "description": "Detects if the mouse of a user leaves the viewport / document borders of your website — and when this happens, trigger your callback", 5 | "main": "glio.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "gliojs", 11 | "mousemove", 12 | "screencorner", 13 | "move", 14 | "exit" 15 | ], 16 | "homepage": "http://luisvinicius167.github.io/gliojs", 17 | "author": "Luis Vinícius", 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gliojs", 3 | "description": "Detects if the mouse of a user leaves the viewport / document borders of your website — and when this happens, trigger your callback", 4 | "main": "dist/glio.min.js", 5 | "authors": [ 6 | "Luis Vinícius < dev_luis@hotmail.com >" 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "glio.js", 11 | "mousemove", 12 | "screencorner", 13 | "detectmouse", 14 | "exitpopup" 15 | ], 16 | "homepage": "http://luisvinicius167.github.io/gliojs/", 17 | "moduleType": [], 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /dist/glio.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){var i={config:{screenWidthFragment:12,centerTopHeight:10,heightTopLeft:30,heightTopRight:30},statusTopLeft:"inactive",statusTopRight:"inactive",statusBottomLeft:"inactive",statusBottomRight:"inactive",statusTop:"inactive",init:function(){i.methods=Array.prototype.slice.call(arguments),Array.prototype.forEach.call(i.methods,function(t){i.getDirection(t[0],"top-left")?i.topLeftFn=i.trigger(t[1]):i.getDirection(t[0],"top-right")?i.topRightFn=i.trigger(t[1]):i.getDirection(t[0],"bottom-right")?i.bottomRightFn=i.trigger(t[1]):i.getDirection(t[0],"bottom-left")?i.bottomLeftFn=i.trigger(t[1]):i.getDirection(t[0],"top")&&(i.TopFn=i.trigger(t[1]))}),e.body.addEventListener("mousemove",function(t){var e=t.clientX,o=t.clientY;"function"==typeof i.topLeftFn&&"inactive"===i.statusTopLeft&&i.callTopleft(e,o,i.topLeftFn),"function"==typeof i.topRightFn&&"inactive"===i.statusTopRight&&i.callTopRight(e,o,i.topRightFn),"function"==typeof i.bottomLeftFn&&"inactive"===i.statusBottomLeft&&i.callBottomLeft(e,o,i.bottomLeftFn),"function"==typeof i.bottomRightFn&&"inactive"===i.statusBottomRight&&i.callBottomRight(e,o,i.bottomRightFn),"function"==typeof i.TopFn&&"inactive"===i.statusTop&&i.callTop(e,o,i.TopFn)})},trigger:function(t){return t},getWidthRightValue:function(){var t=i.getScreenWidthFragment(),e=t*i.config.screenWidthFragment-t;return parseInt(e)},getTopHeight:function(){var t=50;return t},getScreenWidthFragment:function(){var e=parseInt(t.innerWidth)/i.config.screenWidthFragment;return e},getScreenHeightFragment:function(){var e=parseInt(t.innerHeight)/i.config.screenWidthFragment;return e},getBottomHeightValue:function(){var t=i.getScreenHeightFragment(),e=t*i.config.screenWidthFragment-t;return e},getDirection:function(t,e){return t===e?!0:!1},callTopleft:function(t,e,o){t<=i.getScreenWidthFragment()&&e<=i.config.heightTopLeft&&(i.statusTopLeft="active",o())},callTopRight:function(t,e,o){t>i.getWidthRightValue()&&e<=i.config.heightTopRight&&(i.statusTopRight="active",o())},callBottomRight:function(t,e,o){t>=i.getWidthRightValue()&&e>=i.getBottomHeightValue()&&(i.statusBottomRight="active",o())},callBottomLeft:function(t,e,o){t<=i.getScreenWidthFragment()&&e>=i.getBottomHeightValue()&&(i.statusBottomLeft="active",o())},positionsTopY:[],callTop:function(t,e,o){e>i.config.centerTopHeight+1&&i.positionsTopY.push(e),t>i.getScreenWidthFragment()&&ti.config.centerTopHeight&&(i.statusTop="active",o())},start:function(){return{init:i.init,config:i.config}}};t.glio||(t.glio=i.start())}(window,document); -------------------------------------------------------------------------------- /glio.js: -------------------------------------------------------------------------------- 1 | ;(function ( window , document ) { 2 | var glio = { 3 | /** 4 | * Initial Configuration 5 | * you can change the values before init method 6 | * glio.config.key = value; 7 | **/ 8 | config: { 9 | screenWidthFragment: 12, // the width of screen : 12 10 | centerTopHeight: 10, // the value of height to trigger a callback on center-top 11 | heightTopLeft: 30, // the value of height when top-left direction is set 12 | heightTopRight: 30, // the value of height when top-right direction is set 13 | }, 14 | // glio methods status 15 | statusTopLeft: "inactive", 16 | statusTopRight: "inactive", 17 | statusBottomLeft: "inactive", 18 | statusBottomRight: "inactive", 19 | statusTop: "inactive", 20 | init: function ( ) { 21 | // return a Array with the methods 22 | glio.methods = Array.prototype.slice.call(arguments); 23 | // get the direction and your correspondent callback 24 | Array.prototype.forEach.call(glio.methods, function (index) { 25 | if ( glio.getDirection( index[0], "top-left" ) ) { 26 | glio.topLeftFn = glio.trigger(index[1]); 27 | } 28 | else if ( glio.getDirection( index[0], "top-right" ) ) { 29 | glio.topRightFn = glio.trigger(index[1]); 30 | } 31 | else if ( glio.getDirection( index[0], "bottom-right" ) ) { 32 | glio.bottomRightFn = glio.trigger(index[1]); 33 | } 34 | else if ( glio.getDirection( index[0], "bottom-left" ) ) { 35 | glio.bottomLeftFn = glio.trigger(index[1]); 36 | } 37 | else if ( glio.getDirection( index[0], "top" ) ) { 38 | glio.TopFn = glio.trigger(index[1]); 39 | } 40 | }); 41 | // Event mousemove just one time 42 | document.body.addEventListener('mousemove', function( event ) { 43 | var pointX = event.clientX 44 | , pointY = event.clientY 45 | ; 46 | 47 | if ( typeof glio.topLeftFn === "function" && glio.statusTopLeft === "inactive" ) { 48 | glio.callTopleft(pointX, pointY, glio.topLeftFn); 49 | } 50 | if (typeof glio.topRightFn === "function" && glio.statusTopRight === "inactive" ) { 51 | glio.callTopRight(pointX, pointY, glio.topRightFn); 52 | } 53 | if (typeof glio.bottomLeftFn === "function" && glio.statusBottomLeft === "inactive" ) { 54 | glio.callBottomLeft(pointX, pointY, glio.bottomLeftFn); 55 | } 56 | if (typeof glio.bottomRightFn === "function" && glio.statusBottomRight === "inactive" ) { 57 | glio.callBottomRight(pointX, pointY, glio.bottomRightFn); 58 | } 59 | if (typeof glio.TopFn === "function" && glio.statusTop === "inactive" ) { 60 | glio.callTop(pointX, pointY, glio.TopFn); 61 | } 62 | }); 63 | }, 64 | // return a callback who will pass like argument to other function 65 | trigger: function ( callback ) { 66 | return callback; 67 | }, 68 | // the value of top-right screen, for use when user pass the mouse in the area 69 | getWidthRightValue: function ( ) { 70 | var screenWidthFragment = glio.getScreenWidthFragment() 71 | , topRightValue = ( screenWidthFragment * glio.config.screenWidthFragment ) - screenWidthFragment 72 | ; 73 | return parseInt(topRightValue); 74 | }, 75 | // get the value of top height 76 | getTopHeight: function ( ) { 77 | var sHeight = 50; 78 | return sHeight; 79 | }, 80 | // The value of total screen width are divided in parts 81 | getScreenWidthFragment: function () { 82 | var screenWidthFragment = (parseInt(window.innerWidth) / glio.config.screenWidthFragment); 83 | return screenWidthFragment; 84 | }, 85 | // The value of total screen height are divided in parts 86 | getScreenHeightFragment: function () { 87 | var screenHeightFragment = (parseInt(window.innerHeight) / glio.config.screenWidthFragment); 88 | return screenHeightFragment; 89 | }, 90 | // the height value of bottom. this value is the same, independent the direction 91 | getBottomHeightValue: function ( ) { 92 | var screenHeightFragment = glio.getScreenHeightFragment() 93 | , bottomRightValue = ( screenHeightFragment * glio.config.screenWidthFragment ) - screenHeightFragment 94 | ; 95 | return bottomRightValue; 96 | }, 97 | // verify if direction who user is the same of directions who glio have 98 | getDirection: function ( directionUser, direction ) { 99 | if ( directionUser === direction ) { 100 | return true; 101 | }; 102 | return false; 103 | }, 104 | /* 105 | * Functions of each direction 106 | */ 107 | callTopleft: function ( x, y, callback ) { 108 | if ( x <= glio.getScreenWidthFragment() && y <= glio.config.heightTopLeft ) { 109 | glio.statusTopLeft = "active"; 110 | callback(); 111 | }; 112 | }, 113 | callTopRight: function ( x, y, callback ) { 114 | if ( x > glio.getWidthRightValue() && y <= glio.config.heightTopRight ) { 115 | glio.statusTopRight = "active"; 116 | callback(); 117 | }; 118 | }, 119 | callBottomRight: function ( x, y, callback ) { 120 | if ( x >= glio.getWidthRightValue() && y >= glio.getBottomHeightValue() ) { 121 | glio.statusBottomRight = "active"; 122 | callback(); 123 | }; 124 | }, 125 | callBottomLeft: function ( x, y, callback ) { 126 | if ( x <= glio.getScreenWidthFragment() && y >= glio.getBottomHeightValue() ) { 127 | glio.statusBottomLeft = "active"; 128 | callback(); 129 | }; 130 | }, 131 | // array to use in the callTop 132 | positionsTopY: [], 133 | callTop: function (x, y, callback ) { 134 | if ( y > (glio.config.centerTopHeight + 1)) { 135 | glio.positionsTopY.push(y); 136 | } 137 | if ( x > glio.getScreenWidthFragment() && x < glio.getWidthRightValue() ) { 138 | // check if the user mouse direction is bottom to top 139 | if ( y <= glio.config.centerTopHeight && glio.positionsTopY[0] > glio.config.centerTopHeight ) { 140 | glio.statusTop = "active"; 141 | callback(); 142 | } 143 | } 144 | }, 145 | // return only the methods init and config 146 | start: function () { 147 | return { 148 | init: glio.init, 149 | config: glio.config 150 | } 151 | } 152 | }; 153 | // return glio object 154 | if (!window.glio) { 155 | window.glio = glio.start(); 156 | }; 157 | 158 | }( window, document)); -------------------------------------------------------------------------------- /README-PT.md: -------------------------------------------------------------------------------- 1 | # glio 2 | Detecte se o mouse do usuário for para as bordas do viewport/documento de seu site ou sair dele, e quando isso acontecer, dispare um callback. 3 | Ver Demo. 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
Chrome logoFirefox logoInternet Explorer logoOpera logoSafari logo
17+ ✔14+ ✔9+ ✔17+ ✔5+ ✔
21 | 22 | 23 | #### Razões para uso: 24 | * Aumentar suas taxas de conversão! 25 | * Dar aos visitantes razões para ficar! 26 | * Atrair a atenção de seus usuários! 27 | 28 | #### Cases: 29 | * Se você estiver usando o gliojs em seu projeto, divulgue aqui. 30 | 31 | #### Artigos sobre Exit-Popups: 32 | * 7 Best Practices for Using Exit-Intent Popovers, Popups 33 | * 5 Scientific Reasons Exit Popups Are So Freaking Effective 34 | 35 | ### Como instalar: 36 | 37 | * Npm: ``` npm install gliojs ``` 38 | 39 | * Bower ``` bower install gliojs ``` 40 | 41 | Importe a biblioteca `glio.min.js` que está na pasta `dist` dentro do seu site `````` 42 | 43 | 44 | #### Uso: 45 | Os argumentos são passados como um Array, onde o primeiro argumento dentro do array é a direção e o segundo é o callback. Você pode colocar até 5 arrays com cada posição dentro do método init.
46 | ```glio( [ direction, callback ] )```. 47 | 48 | #### Direções: 49 | * top 50 | * top-left 51 | * top-right 52 | * bottom-left 53 | * bottom-right 54 | 55 | #### Exemplos: 56 | * Direção top-left e top-right 57 | ``` 58 | glio.init( 59 | [ 'top-left', function () { 60 | alert('this is top-left'); 61 | } 62 | ], 63 | [ 'top-right', function () { 64 | alert('this is top-right'); 65 | } 66 | ] 67 | ); 68 | ``` 69 | 70 | * Todas as direções 71 | ``` 72 | glio.init( 73 | [ 'top', function () { 74 | alert('this is top.'); 75 | } 76 | ], 77 | [ 'top-left', function () { 78 | alert('this is top-left'); 79 | } 80 | ], 81 | [ 'top-right', function () { 82 | alert('this is top-right'); 83 | } 84 | ], 85 | [ 'bottom-left', function () { 86 | alert('this is bottom-left'); 87 | } 88 | ], 89 | [ 'bottom-right', function () { 90 | alert('this is bottom-right'); 91 | } 92 | ] 93 | ); 94 | ``` 95 | 96 | #### Configurações: 97 | ```glio.config.key = value;``` Registre as configurações antes do método init. 98 | * screenWidthFragment: a quantidade de partes que a largura da tela será dividida. Valor padrão: 12. 99 | * centerTopHeight: altura da direção 'top'. Quando o mouse do usuário tiver a altura menor ou igual a esse valor, o callback será disparado. Padrão: 10. 100 | * heightTopLeft: altura da direção 'top-left'. Quando o mouse do usuário tiver a altura menor ou igual a esse valor, o callback será disparado. Padrão: 30. 101 | * heightTopRight: altura da direção 'top-right'. Quando o mouse do usuário tiver a altura menor ou igual a esse valor, o callback será disparado. Padrão: 30. 102 | 103 | MIT license. 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glio 2 | Detects if the mouse of an user leaves the viewport / document borders of your website and when this happens, trigger your callback. Portuguese documentation. 3 | 4 | Demo. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
Chrome logoFirefox logoInternet Explorer logoOpera logoSafari logo
17+ ✔14+ ✔9+ ✔17+ ✔5+ ✔
23 | 24 | #### Reasons for use: 25 | * Increase your conversion rates! 26 | * Give visitors reasons to stay! 27 | * Grab your users’ attention! 28 | 29 | #### Cases: 30 | * if you are using gliojs, paste your project here. 31 | 32 | #### Articles about Exit-popups: 33 | * 7 Best Practices for Using Exit-Intent Popovers, Popups 34 | * 5 Scientific Reasons Exit Popups Are So Freaking Effective 35 | 36 | #### Install: 37 | 38 | * Npm: ``` npm install gliojs ``` 39 | * Bower: ``` bower install gliojs ``` 40 | * Cdn: ``` https://cdnjs.cloudflare.com/ajax/libs/gliojs/0.0.7/glio.min.js ``` 41 | 42 | Import the library glio.min.js in 'dist' folder in your site. `````` 43 | 44 | #### Usage: 45 | The arguments are a Arrays, where the first index is the direction and the second is a callback.
46 | ```javascript 47 | glio( [ direction, callback ] ); 48 | ``` 49 | 50 | #### 5 Directions: 51 | * top 52 | * top-left 53 | * top-right 54 | * bottom-left 55 | * bottom-right 56 | 57 | #### Example: 58 | * top-left and top-right 59 | ```javascript 60 | glio.init( 61 | [ 'top-left', function () { 62 | alert('this is top-left'); 63 | } 64 | ], 65 | [ 'top-right', function () { 66 | alert('this is top-right'); 67 | } 68 | ] 69 | ); 70 | ``` 71 | 72 | * all directions 73 | ```javascript 74 | glio.init( 75 | [ 'top', function () { 76 | alert('this is top.'); 77 | } 78 | ], 79 | [ 'top-left', function () { 80 | alert('this is top-left'); 81 | } 82 | ], 83 | [ 'top-right', function () { 84 | alert('this is top-right'); 85 | } 86 | ], 87 | [ 'bottom-left', function () { 88 | alert('this is bottom-left'); 89 | } 90 | ], 91 | [ 'bottom-right', function () { 92 | alert('this is bottom-right'); 93 | } 94 | ] 95 | ); 96 | ``` 97 | 98 | #### Configurations: 99 | ```glio.config.key = value;``` Set the configuration before the init. 100 | * ```screenWidthFragment```: the quantity of parts the height and width screen will be divided. Default: 12. 101 | * ```centerTopHeight```: height of 'top' direction. When the mouse is equal or major this value, the callback is triggered. Default: 10. 102 | * ```heightTopLeft```: height of 'top-left' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30. 103 | * ```heightTopRight```: height of 'top-right' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30. 104 | 105 | This software is licensed under the MIT License. 106 | --------------------------------------------------------------------------------