API tools faq
paste
Advertisement
rAthus

showTip() by rAthur

rAthus
Feb 2nd, 2015
360
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 10.96 KB | None | 0 0
raw download clone embed print report
  1. /**************************************************************************************************************\
  2. |**************************************************************************************************************|
  3. |**                                                                                                          **|
  4. |**                                    showTip() by rAthus (version 2.0a)                                    **|
  5. |**                                                                                                          **|
  6. |**                            just call the function showTip(block,html,id,type)                            **|
  7. |**                                                                                                          **|
  8. |**   +-------+--------+-----------+---------------------------------------------------+-----------------+   **|
  9. |**   | Var   | Type   | Need      | Description                                       | Example         |   **|
  10. |**   +-------+--------+-----------+---------------------------------------------------+-----------------+   **|
  11. |**   | block | object | mandatory | the html element to be highlighted                | $('#mybutton')  |   **|
  12. |**   | html  | string | mandatory | the text/html to be shown beside the block        | "Suprise here!" |   **|
  13. |**   | id    | string | optional  | an ID that will never be shown again              | "my_unique_tip" |   **|
  14. |**   | type  | string | optional  | weather it highlights a square or a round element | "round"         |   **|
  15. |**   +-------+--------+-----------+---------------------------------------------------+-----------------+   **|
  16. |**                                                                                                          **|
  17. |**                               any question email me at arthur@arkanite.com                               **|
  18. |**                                                                                                          **|
  19. |**************************************************************************************************************|
  20. \**************************************************************************************************************/
  21. var tipConfig =
  22. {
  23.      shadowColor: {r:0,g:0,b:0} // couleur du fond qui va masquer le site en RGB (valeurs de 0 à 255)
  24.     ,shadowOpacity: 0.8 // opacité du fond (valeur de 0 à 1)
  25.     ,marginAroundElements: 10 // marge autour des éléments à mettre en surbrillance
  26.     ,textColor: '#fff' // couleur du texte
  27.     ,okButtonTextColor: '#fff' // couleur du texte du bouton de validation
  28.     ,okButtonBackgroundColor: '#E4B714' // couleur du fond du bouton de validation
  29.     ,okButtonText: 'Got it' // texte du bouton de validation
  30. }
  31. var stackedTips = new Array();
  32. var interval_showTip = false;
  33. function showTip(block,html,id,type)
  34. {
  35.     if (block.length>0)
  36.     {
  37.         if (typeof(id)=='undefined')
  38.             id = '';
  39.         if (id=='')
  40.             id = 'tip_'+(''+(Math.random()*10)).replace('.','');
  41.         else if (id.substr(0,4)!='tip_')
  42.             id = 'tip_'+id;
  43.         if (typeof(type)=='undefined' || (type!='square' && type!='round'))
  44.             type = 'square';
  45.         stackedTips.push({'block':block,'html':html,'id':id,'type':type});
  46.         if (!interval_showTip)
  47.             interval_showTip = setInterval(intervalTip,100);
  48.     }
  49.     else
  50.     {
  51.         console.log('Attention, élément non trouvé, showTip() impossible  : '+{'block':block,'html':html,'id':id});
  52.     }
  53. }
  54. function intervalTip()
  55. {
  56.     if (stackedTips.length>0)
  57.     {
  58.         if ($('.showTip').length==0)
  59.         {
  60.             var tip = stackedTips.shift();
  61.             var block = tip.block;
  62.             var id = tip.id;
  63.             var html = tip.html;
  64.             if (!localStorage['seen_'+id])
  65.             {
  66.                 var dw = $(document).width();
  67.                 var dh = $(document).height();
  68.                 var ww = $(window).width();
  69.                 var wh = $(window).height();
  70.                 var w = block.outerWidth();
  71.                 var h = block.outerHeight();
  72.                 var l = block.offset().left;
  73.                 var t = block.offset().top;
  74.                 var m = Math.sqrt(Math.pow(w/2,2)+Math.pow(h/2,2))*2+tipConfig.marginAroundElements;
  75.                 var l2 = Math.ceil((l+w/2)-m/2);
  76.                 var t2 = Math.ceil((t+h/2)-m/2);
  77.                 if (tip.type=='square')
  78.                 {
  79.                     $('body').append('<div id="'+id+'" class="showTip" style="display:none;position:absolute;left:0;top:0;width:'+dw+'px;height:'+dh+'px;overflow:hidden;margin:0;padding:0;background:rgba(0,0,0,0);z-index:1000000000;"><div id="'+id+'_rectangle_0"></div><div id="'+id+'_rectangle_1"></div><div id="'+id+'_rectangle_2"></div><div id="'+id+'_rectangle_3"></div><div id="'+id+'_rectangle_4"></div><div id="'+id+'_text" class="showTip"></div></div>');
  80.                     $('#'+id+'_rectangle_0').css(
  81.                     {
  82.                          'position': 'absolute'
  83.                         ,'width': (w+tipConfig.marginAroundElements*2)+'px'
  84.                         ,'height': (h+tipConfig.marginAroundElements*2)+'px'
  85.                         ,'left': (l-tipConfig.marginAroundElements)+'px'
  86.                         ,'top': (t-tipConfig.marginAroundElements)+'px'
  87.                         ,'box-sizing': 'border-box'
  88.                         ,'box-shadow': '0px 0px 20px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5)'
  89.                     });
  90.                     $('#'+id+'_rectangle_1').css(
  91.                     {
  92.                          'position': 'absolute'
  93.                         ,'width': dw+'px'
  94.                         ,'height': (t-tipConfig.marginAroundElements)+'px'
  95.                         ,'left': '0px'
  96.                         ,'top': '0px'
  97.                         ,'box-sizing': 'border-box'
  98.                         ,'background': 'rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+')'
  99.                     });
  100.                     $('#'+id+'_rectangle_2').css(
  101.                     {
  102.                          'position': 'absolute'
  103.                         ,'width': (l-tipConfig.marginAroundElements)+'px'
  104.                         ,'height': (h+tipConfig.marginAroundElements*2)+'px'
  105.                         ,'left': '0px'
  106.                         ,'top': (t-tipConfig.marginAroundElements)+'px'
  107.                         ,'box-sizing': 'border-box'
  108.                         ,'background': 'rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+')'
  109.                     });
  110.                     $('#'+id+'_rectangle_3').css(
  111.                     {
  112.                          'position': 'absolute'
  113.                         ,'width': (dw-(l+w)-tipConfig.marginAroundElements)+'px'
  114.                         ,'height': (h+tipConfig.marginAroundElements*2)+'px'
  115.                         ,'left': (l+w+tipConfig.marginAroundElements)+'px'
  116.                         ,'top': (t-tipConfig.marginAroundElements)+'px'
  117.                         ,'box-sizing': 'border-box'
  118.                         ,'background': 'rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+')'
  119.                     });
  120.                     $('#'+id+'_rectangle_4').css(
  121.                     {
  122.                          'position': 'absolute'
  123.                         ,'width': dw+'px'
  124.                         ,'height': (dh-(h+t)-tipConfig.marginAroundElements)+'px'
  125.                         ,'left': '0px'
  126.                         ,'top': (t+h+tipConfig.marginAroundElements)+'px'
  127.                         ,'box-sizing': 'border-box'
  128.                         ,'background': 'rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+')'
  129.                     });
  130.                 }
  131.                 else if (tip.type=='round')
  132.                 {
  133.                     var s = Math.ceil(Math.sqrt(Math.pow(dh,2)+Math.pow(dw,2)));
  134.                     var b = 0;
  135.                     if (navigator.userAgent.indexOf('Safari')>-1)
  136.                     {
  137.                         b = s-m/2;
  138.                         w2 = s*2;
  139.                         h2 = s*2;
  140.                         l2 = l+w/2-w2/2;
  141.                         t2 = t+h/2-h2/2;
  142.                     }
  143.                     else
  144.                     {
  145.                         var w2 = m;
  146.                         var h2 = m;
  147.                     }
  148.                     $('body').append('<div id="'+id+'" class="showTip" style="display:none;position:absolute;left:0;top:0;width:'+dw+'px;height:'+dh+'px;overflow:hidden;margin:0;padding:0;background:rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0);z-index:1000000000;"><div id="'+id+'_circle"></div><div id="'+id+'_text" class="showTip"></div></div>');
  149.                     $('#'+id+'_circle').css(
  150.                     {
  151.                          'position': 'absolute'
  152.                         ,'width': w2+'px'
  153.                         ,'height': h2+'px'
  154.                         ,'left': l2+'px'
  155.                         ,'top': t2+'px'
  156.                         ,'box-sizing': 'border-box'
  157.                         ,'-webkit-box-sizing': 'border-box'
  158.                         ,'-moz-box-sizing': 'border-box'
  159.                         ,'-o-box-sizing': 'border-box'
  160.                         ,'border-radius': '100%'
  161.                         ,'border': b+'px solid rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+')'
  162.                         ,'box-shadow': '0px 0px 0px '+s+'px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+'), 0px 0px 20px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5)'
  163.                         ,'-webkit-box-shadow': '0px 0px 0px '+s+'px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+'), 0px 0px 20px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5)'
  164.                         ,'-moz-box-shadow': '0px 0px 0px '+s+'px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+'), 0px 0px 20px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5)'
  165.                         ,'-o-box-shadow': '0px 0px 0px '+s+'px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+','+tipConfig.shadowOpacity+'), 0px 0px 20px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5)'
  166.                     });
  167.                 }
  168.                 var w3 = Math.floor(Math.min(l+w/2,ww-(l+w/2))*2);
  169.                 if (w3>ww/2)
  170.                     w3 = Math.round(ww/2);
  171.                 else if (w3<150+tipConfig.marginAroundElements*2)
  172.                     w3 = 150+tipConfig.marginAroundElements*2;
  173.                 var l3 = Math.round(l+w/2-w3/2);
  174.                 if (l3<0)
  175.                     l3 = 0;
  176.                 else if (l3+w3>ww)
  177.                     l3 = ww-w3;
  178.                 var t3 = Math.round((tip.type=='round')?t+h/2+m/2:t+h+tipConfig.marginAroundElements);
  179.                 $('#'+id+'_text').css(
  180.                 {
  181.                      'position': 'absolute'
  182.                     ,'width': w3+'px'
  183.                     ,'left': l3+'px'
  184.                     ,'top': t3+'px'
  185.                     ,'padding':'20px'
  186.                     ,'box-sizing': 'border-box'
  187.                     ,'color': tipConfig.textColor
  188.                     ,'text-align': 'center'
  189.                     ,'text-shadow': '0px 0px 5px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5)'
  190.                 }).html(html+'<br /><div id="'+id+'_ok" class="showTip_ok" style="display:inline-block;cursor:pointer;background:'+tipConfig.okButtonBackgroundColor+';color:'+tipConfig.okButtonTextColor+';font-weight:bold;border:none;margin-top:1em;font-size:1em;padding:0.5em 1em;box-shadow:0px 0px 10px rgba('+tipConfig.shadowColor.r+','+tipConfig.shadowColor.g+','+tipConfig.shadowColor.b+',0.5);text-shadow:none;">'+tipConfig.okButtonText+'</div>');
  191.                 $('#'+id).fadeTo(250,1);
  192.                 if (t3+$('#'+id+'_text').outerHeight()*1>dh)
  193.                 {
  194.                     $('#'+id+'_text').css({
  195.                          'top':'auto'
  196.                         ,'bottom':Math.round((tip.type=='round')?dh-t-h/2+m/2:dh-t+tipConfig.marginAroundElements)+'px'
  197.                     });
  198.                 }
  199.                 $('#'+id+'_ok').unbind('click').on('click',function()
  200.                 {
  201.                     seenTip(id);
  202.                 });
  203.                 setTimeout(function()
  204.                 {
  205.                     $('#'+id).unbind('click').on('click',function()
  206.                     {
  207.                         seenTip(id);
  208.                     });
  209.                 },2000);
  210.             }
  211.         }
  212.     }
  213.     else
  214.     {
  215.         clearInterval(interval_showTip);
  216.         interval_showTip = false;
  217.     }
  218. }
  219. function seenTip(id)
  220. {
  221.     localStorage['seen_'+id] = 1;
  222.     $('#'+id).fadeTo(250,0,function()
  223.     {
  224.         $(this).remove();
  225.     });
  226. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!