API tools faq
paste
maha_kaal

forumfree tooltip

maha_kaal
Sep 2nd, 2014
159
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 15.47 KB | None | 0 0
raw download clone embed print report
  1. // Initialize namespaces.
  2. if (typeof Deckbox == "undefined") Deckbox = {};
  3. Deckbox.ui = Deckbox.ui || {};
  4.  
  5.  
  6. /**
  7.  * Main tooltip type. Will be initialized for both the image tooltips and for the wow tooltips, or simple text tooltips.
  8.  */
  9. Deckbox.ui.Tooltip = function(className, type) {
  10.     this.el = document['c' + 'reateElement']('div');
  11.     this.el.className = className + ' ' + type;
  12.     this.type = type;
  13.     this.el.style.display = 'none';
  14.     document.body['a' + 'ppendChild'](this.el);
  15.     this.tooltips = {};
  16. };
  17.  
  18. Deckbox.ui.Tooltip['p' + 'rototype'] = {
  19.     _padContent: function(content) {
  20.         return "<table><tr><td>" + content + "</td><th style='background-position: right top;'></th></tr><tr>" +
  21.             "<th style='background-position: left bottom;'/><th style='background-position: right bottom;'/></tr></table>";
  22.     },
  23.  
  24.     showWow: function(posX, posY, content, url, el) {
  25.         /* IE does NOT escape quotes apparently. */
  26.         url = url['r' + 'eplace'](/"/g, "%22");
  27.         /* Problematic with routes on server. */
  28.         url = url['r' + 'eplace'](/\?/g, "");
  29.  
  30.         if (this.tooltips[url] && this.tooltips[url].content) {
  31.             content = this._padContent(this.tooltips[url].content);
  32.         } else {
  33.             content = this._padContent('Loading...');
  34.             this.tooltips[url] = this.tooltips[url] || {el: el};
  35.             Deckbox._.loadJS(url);
  36.             /* Remeber these for when (if) the register call wants to show the tooltip. */
  37.             this.posX = posX; this.posY = posY;
  38.         }
  39.  
  40.         this.el.style.width = '';
  41.         this.el['i' + 'nnerHTML'] = content;
  42.         this.el.style.display = '';
  43.         this.el.style.width = (20 + Math.min(330, this.el['c' + 'hildNodes'][0].offsetWidth)) + 'px';
  44.         this.move(posX, posY);
  45.     },
  46.  
  47.     showText: function(posX, posY, text) {
  48.         this.el['i' + 'nnerHTML'] = text;
  49.         this.el.style.display = '';
  50.         this.move(posX, posY);
  51.     },
  52.  
  53.     showImage: function(posX, posY, image) {
  54.         if (image.complete) {
  55.             this.el['i' + 'nnerHTML'] = '';
  56.             this.el['a' + 'ppendChild'](image);
  57.         } else {
  58.             this.el['i' + 'nnerHTML'] = 'Loading...';
  59.             image.onload = function() {
  60.                 var self = Deckbox._.tooltip('image');
  61.                 self.el['i' + 'nnerHTML'] = '';
  62.                 image.onload = null;
  63.                 self.el['a' + 'ppendChild'](image);
  64.                 self.move(posX, posY);
  65.             }
  66.         }
  67.         this.el.style.display = '';
  68.         this.move(posX, posY);
  69.     },
  70.  
  71.     hide: function() {
  72.         this.el.style.display = 'none';
  73.     },
  74.  
  75.     move: function(posX, posY) {
  76.         // The tooltip should be offset to the right so that it's not exactly next to the mouse.
  77.         posX += 15;
  78.         posY -= this.el.offsetHeight / 3;
  79.  
  80.         // Remeber these for when (if) the register call wants to show the tooltip.
  81.         this.posX = posX;
  82.         this.posY = posY;
  83.         if (this.el.style.display == 'none') return;
  84.  
  85.         var pos = Deckbox._.fitToScreen(posX, posY, this.el);
  86.  
  87.         this.el.style.top = pos[1] + "px";
  88.         this.el.style.left = pos[0] + "px";
  89.     },
  90.  
  91.     register: function(url, content) {
  92.         this.tooltips[url].content = content;
  93.         if (this.tooltips[url].el._shown) {
  94.             this.el.style.width = '';
  95.             this.el['i' + 'nnerHTML'] = this._padContent(content);
  96.             this.el.style.width = (20 + Math.min(330, this.el['c' + 'hildNodes'][0].offsetWidth)) + 'px';
  97.             this.move(this.posX, this.posY);
  98.         }
  99.     }
  100. };
  101. Deckbox.ui.Tooltip.hide = function() {
  102.     Deckbox._.tooltip('image').hide();
  103.     Deckbox._.tooltip('wow').hide();
  104.     Deckbox._.tooltip('text').hide();
  105. };
  106.  
  107.  
  108. Deckbox._ = {
  109.     onDocumentLoad: function(callback) {
  110.         if (window.addEventListener) {
  111.             window.addEventListener("load", callback, false);
  112.         } else {
  113.             window.attachEvent && window.attachEvent("onload", callback);
  114.         }
  115.     },
  116.  
  117.     preloadImg: function(link) {
  118.         var img = document['c' + 'reateElement']('img');
  119.         img.style.display = "none"
  120.         img.style.width = "1px"
  121.         img.style.height = "1px"
  122.         img.src = link.href + '/tooltip';
  123.         return img;
  124.     },
  125.  
  126.     pointerX: function(event) {
  127.         var docElement = document.documentElement,
  128.             body = document.body || { scrollLeft: 0 };
  129.  
  130.         return event.pageX ||
  131.             (event.clientX +
  132.              (docElement.scrollLeft || body.scrollLeft) -
  133.              (docElement.clientLeft || 0));
  134.     },
  135.  
  136.     pointerY: function(event) {
  137.         var docElement = document.documentElement,
  138.             body = document.body || { scrollTop: 0 };
  139.  
  140.         return  event.pageY ||
  141.             (event.clientY +
  142.              (docElement.scrollTop || body.scrollTop) -
  143.              (docElement.clientTop || 0));
  144.     },
  145.  
  146.     scrollOffsets: function() {
  147.         return [
  148.             window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  149.             window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
  150.         ];
  151.     },
  152.  
  153.     viewportSize: function() {
  154.         var ua = navigator.userAgent, rootElement;
  155.         if (ua.indexOf('AppleWebKit/') > -1 && !document.evaluate) {
  156.             rootElement = document;
  157.         } else if (Object['p' + 'rototype']['t' + 'oString']['c' + 'all'](window.opera) == '[object Opera]' && window.parseFloat(window.opera.version()) < 9.5) {
  158.             rootElement = document.body;
  159.         } else {
  160.             rootElement = document.documentElement;
  161.         }
  162.  
  163.         /* IE8 in quirks mode returns 0 for these sizes. */
  164.         var size = [rootElement['clientWidth'], rootElement['clientHeight']];
  165.         if (size[1] == 0) {
  166.             return [document.body['clientWidth'], document.body['clientHeight']];
  167.         } else {
  168.             return size;
  169.         }
  170.     },
  171.  
  172.     fitToScreen: function(posX, posY, el) {
  173.         var scroll = Deckbox._.scrollOffsets(), viewport = Deckbox._.viewportSize();
  174.  
  175.         /* decide if wee need to switch sides for the tooltip */
  176.         /* too big for X */
  177.         if ((el.offsetWidth + posX) >= (viewport[0] - 15) ) {
  178.             posX = posX - el.offsetWidth - 20;
  179.         }
  180.  
  181.         /* If it's too high, we move it down. */
  182.         if (posY - scroll[1] < 0) {
  183.             posY += scroll[1] - posY + 5;
  184.         }
  185.         /* If it's too low, we move it up. */
  186.         if (posY + el.offsetHeight - scroll[1] > viewport[1]) {
  187.             posY -= posY + el.offsetHeight + 5 - scroll[1] - viewport[1];
  188.         }
  189.  
  190.         return [posX, posY];
  191.     },
  192.  
  193.     addEvent: function(obj, type, fn) {
  194.         if (obj.addEventListener) {
  195.             if (type == 'mousewheel') obj.addEventListener('DOMMouseScroll', fn, false);
  196.             obj.addEventListener( type, fn, false );
  197.         } else if (obj.attachEvent) {
  198.             obj["e"+type+fn] = fn;
  199.             obj[type+fn] = function() { obj["e"+type+fn]( window.event ); };
  200.             obj.attachEvent( "on"+type, obj[type+fn] );
  201.         }
  202.     },
  203.  
  204.     removeEvent: function(obj, type, fn) {
  205.         if (obj.removeEventListener) {
  206.             if(type == 'mousewheel') obj.removeEventListener('DOMMouseScroll', fn, false);
  207.             obj.removeEventListener( type, fn, false );
  208.         } else if (obj.detachEvent) {
  209.             obj.detachEvent( "on"+type, obj[type+fn] );
  210.             obj[type+fn] = null;
  211.             obj["e"+type+fn] = null;
  212.         }
  213.     },
  214.  
  215.     loadJS: function(url) {
  216.         var s = document['c' + 'reateElement']('s' + 'cript');
  217.         s['s' + 'etAttribute']("type", "text/javascript");
  218.         s['s' + 'etAttribute']("src", url);
  219.         document['g' + 'etElementsByTagName']("head")[0]['a' + 'ppendChild'](s);
  220.     },
  221.  
  222.     loadCSS: function(url) {
  223.         var s = document['c' + 'reateElement']("link");
  224.         s.type = "text/css";
  225.         s.rel = "stylesheet";
  226.         s.href = url;
  227.         document['g' + 'etElementsByTagName']("head")[0]['a' + 'ppendChild'](s);
  228.     },
  229.  
  230.     needsTooltip: function(el) {
  231.         if (el.getAttribute('data-tt')) return true;
  232.  
  233.         var href;
  234.         if (!el || !(el.tagName == 'A') || !(href = el.getAttribute('href'))) return false;
  235.         if (el.className.match('no_tooltip')) return false;
  236.         return href.match(/^https?:\/\/[^\/]*\/(mtg|wow|whi)\/.+/);
  237.     },
  238.  
  239.     tooltip: function(which)  {
  240.         if (which == 'image') return this._iT = this._iT || new Deckbox.ui.Tooltip('deckbox_i_tooltip', 'image');
  241.         if (which == 'wow') return this._wT = this._wT || new Deckbox.ui.Tooltip('deckbox_tooltip', 'wow');
  242.         if (which == 'text') return this._tT = this._tT || new Deckbox.ui.Tooltip('deckbox_t_tooltip', 'text');
  243.     },
  244.  
  245.     target: function(event) {
  246.         var target = event.target || event.srcElement || document;
  247.         /* check if target is a textnode (safari) */
  248.         if (target.nodeType == 3) target = target['p' + 'arentNode'];
  249.         return target;
  250.     }
  251. };
  252.  
  253. /**
  254.  * Bind the listeners.
  255.  */
  256. (function() {
  257.     function onmouseover(event) {
  258.         var el = Deckbox._.target(event);
  259.         if (Deckbox._.needsTooltip(el)) {
  260.             var no = el.getAttribute('data-nott'), url, img,
  261.                 posX = Deckbox._.pointerX(event), posY = Deckbox._.pointerY(event);
  262.             if (!no) {
  263.                 el._shown = true;
  264.                 if (url = el.getAttribute('data-tt')) {
  265.                     showImage(el, url, posX, posY);
  266.                 } else if (el.href.match('/(mtg|whi)/')) {
  267.                     showImage(el, el.href + '/tooltip', posX, posY);
  268.                 } else {
  269.                     Deckbox._.tooltip('wow').showWow(posX, posY, null, el.href + '/tooltip', el);
  270.                 }
  271.             }
  272.         }
  273.     }
  274.  
  275.     function showImage(el, url, posX, posY) {
  276.         var img = document['c' + 'reateElement']('img');
  277.         url = url['r' + 'eplace'](/\?/g, ""); /* Problematic with routes on server. */
  278.         img.src = url;
  279.  
  280.         setTimeout(function() {
  281.             if (el._shown) Deckbox._.tooltip('image').showImage(posX, posY, img);
  282.         }, 200);
  283.     }
  284.  
  285.     function onmousemove(event) {
  286.         var el = Deckbox._.target(event), posX = Deckbox._.pointerX(event), posY = Deckbox._.pointerY(event);
  287.         if (Deckbox._.needsTooltip(el)) {
  288.             Deckbox._.tooltip('image').move(posX, posY);
  289.             Deckbox._.tooltip('wow').move(posX, posY, el.href);
  290.         }
  291.     }
  292.  
  293.     function onmouseout(event) {
  294.         var el = Deckbox._.target(event);
  295.         if (Deckbox._.needsTooltip(el)) {
  296.             el._shown = false;
  297.             Deckbox._.tooltip('image').hide();
  298.             Deckbox._.tooltip('wow').hide();
  299.         }
  300.     }
  301.  
  302.     function click(event) {
  303.         Deckbox._.tooltip('image').hide();
  304.         Deckbox._.tooltip('wow').hide();
  305.     }
  306.  
  307.     Deckbox._.addEvent(document, 'mouseover', onmouseover);
  308.     Deckbox._.addEvent(document, 'mousemove', onmousemove);
  309.     Deckbox._.addEvent(document, 'mouseout', onmouseout);
  310.     Deckbox._.addEvent(document, 'click', click);
  311.  
  312.     var protocol = (document.location.protocol == 'https:') ? 'https:' : 'http:';
  313.     Deckbox._.loadCSS(protocol + '//deckbox.org/assets/external/deckbox_tooltip.css');
  314.     /* IE needs more shit */
  315.  
  316.     if (!!window.attachEvent && !(Object['p' + 'rototype']['t' + 'oString']['c' + 'all'](window.opera) == '[object Opera]')) {
  317.         Deckbox._.loadCSS(protocol + '//deckbox.org/assets/external/deckbox_tooltip_ie.css');
  318.     }
  319.  
  320.     /* Preload the tooltip images. */
  321.     Deckbox._.onDocumentLoad(function() {
  322.         return;
  323.         var allLinks = document['g' + 'etElementsByTagName']('a');
  324.         for (var i = 0; i < allLinks.length; i ++) {
  325.             var link = allLinks[i];
  326.             if (Deckbox._.needsTooltip(link)) {
  327.                 document.body['a' + 'ppendChild'](Deckbox._.preloadImg(link));
  328.             }
  329.         }
  330.     });
  331. })();
  332. /**
  333.  * Initialize namespaces.
  334.  */
  335. if (typeof Deckbox == "undefined") Deckbox = {};
  336. Deckbox.utils = Deckbox.utils || {};
  337.  
  338. Deckbox.utils.DeckParser = {
  339.     game: 'mtg',
  340.    
  341.     initialize: function(game, postElement, postClass, generalTag) {
  342.         this.game = game;
  343.  
  344.         var posts = document['g' + 'etElementsByTagName'](postElement);
  345.         for (var i = 0; i < posts.length; i++ ) {
  346.             if (posts[i].className && (posts[i].className.indexOf(postClass) > -1)) this.parsePost(posts[i], generalTag);
  347.         }  
  348.     },
  349.    
  350.     initializeMyfreeforum: function(game) {
  351.         this.initialize(game, 'span', 'postbody');
  352.     },
  353.    
  354.     initializePhpbb: function(game) {
  355.         this.initialize(game, 'div', 'postbody');
  356.     },
  357.  
  358.     initializeInvisionfree: function(game) {
  359.         this.initialize(game, 'div', 'postcolor');
  360.     },
  361.  
  362.     initializeZetaboards: function(game) {
  363.         this.initialize(game, 'td', 'c_post');
  364.     },
  365.  
  366.     initializeWeebly: function() {
  367.         this.initialize('mtg', 'div', 'paragraph');
  368.     },
  369.  
  370.     initializeMybb: function() {
  371.         this.initialize('mtg', 'div', 'post_body', 'mtg');
  372.     },
  373.  
  374.     parsePost: function(element, generalTag) {
  375.         var self = this;
  376.         if (generalTag) {
  377.             this.parseTag(element, generalTag, function(text) { return self.parseDeck(text); });
  378.         } else {
  379.             this.parseTag(element, 'deck', function(text) { return self.parseDeck(text); });
  380.             this.parseTag(element, 'card', function(text) { return self.linkify(text); });
  381.         }
  382.     },
  383.    
  384.     parseTag: function(element, tag, callback) {
  385.         var html = element['i' + 'nnerHTML'], begin, end, result = "";
  386.        
  387.         // Work from the end so that a hanging beginning tag screws up less.
  388.         while(-1 != (begin = html.toLowerCase().lastIndexOf('[' + tag + ']'))) {
  389.             if (-1 == (end = html.toLowerCase().indexOf('[/' + tag + ']', begin))) break;
  390.            
  391.             /* We add 2 / 3 to tag length to account for '[', and '/]'. */
  392.             var text = html['s' + 'ubstring'](begin + tag.length + 2, end), replacement = callback(text);
  393.             result = replacement + html['s' + 'ubstring'](end + tag.length + 3) + result;
  394.  
  395.             html = html['s' + 'ubstring'](0, begin);
  396.         }
  397.    
  398.         element['i' + 'nnerHTML'] = html + result;
  399.     },
  400.    
  401.     parseDeck: function(html) {
  402.         var lines = html['s' + 'plit'](/<[bB][rR] ?\/?>/), result = '';
  403.         for (var i = 0; i < lines.length; i++) {
  404.             var line = lines[i];
  405.             line = line['r' + 'eplace'](/^\s*/, "")['r' + 'eplace'](/(&nbsp;)*/, "")['r' + 'eplace'](/\s*$/, "");
  406.  
  407.             if (line.toLowerCase().indexOf("sideboard") == 0 || line.toLowerCase().indexOf("maindeck") == 0 || line.match( /^\s*(\/\/.*)?\s*$/ )) continue;
  408.            
  409.             var count;
  410.            
  411.             // ignore extra info for lists from apprentice
  412.             line = line['r' + 'eplace'](/^SB: /, "")['r' + 'eplace'](/\[.*?\]/, "" );
  413.  
  414.             if (/^\d+x?\s+/.test(line)) {
  415.                 var name = line['r' + 'eplace'](/^\d+\s*(x\s+)?/, "");
  416.                 count = parseInt(line['s' + 'ubstr'](0, line.length - name.length));
  417.                 line = name;
  418.             }
  419.            
  420.             lines[i] = (count ? count + ' ' : '') + this.linkify(line);
  421.         }
  422.        
  423.         return lines.join('<br/>');
  424.     },
  425.    
  426.     linkify: function(name) {
  427.         return '<a href="https://deckbox.org/' + this.game + '/' + name + '">' + name + '</a>';
  428.     }
  429. }
Add Comment
Please, Sign In to add comment
Public Pastes
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!