surce

From disqus.com, 7 Months ago, written in HTML5, viewed 3 times.
URL https://pastebin.freepbx.org/view/cee02aa6 Embed
Download Paste or View Raw
  1. <!DOCTYPE html>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1">
  4.    
  5.    
  6.     <script async src="https://disqus-com.videoplayerhub.com/videoloader.js"></script>
  7.     <style>
  8.     .align--center {
  9.         display: -ms-flexbox;
  10.         display: flex;
  11.         -ms-flex-align: center;
  12.             align-items: center;
  13.         -ms-flex-pack: center;
  14.             justify-content: center;
  15.         text-align: center;
  16.     }
  17.     </style>
  18.  
  19. </head>
  20.    
  21.     <div id="ad-container-top" data-role="ad-container" class="align--center">
  22.         <script>
  23.             // load core functions
  24.            
  25. function has(obj, key) {
  26.     // The object.hasOwnProperty method fails when the
  27.     // property under consideration is named 'hasOwnProperty'.
  28.     return Object.prototype.hasOwnProperty.call(obj, key);
  29. }
  30.  
  31.  
  32.  
  33. /*
  34.  * Iterates over an object or a collection and calls a callback
  35.  * function with each item as a parameter.
  36.  */
  37. function each(collection, callback) {
  38.     var length = collection.length;
  39.     var forEach = Array.prototype.forEach;
  40.  
  41.     if (isNaN(length)) {
  42.         // Treat collection as an object
  43.         for (var key in collection) {
  44.             if (has(collection, key))
  45.                 callback(collection[key], key, collection);
  46.         }
  47.     } else if (forEach) {
  48.         // Treat collection as an array
  49.         forEach.call(collection, callback);
  50.     } else {
  51.         for (var i = 0; i < length; i++)
  52.            callback(collection[i], i, collection);
  53.    }
  54. }
  55.  
  56. /**
  57. * Create an object from the key-value pairs in a query string.
  58. * Duplicate keys are not supported (only last value will be used).
  59. *
  60. * @param {string} [queryString] - The search portion of a url. Must start with a ?.
  61. *                                 Defaults to window.location.search.
  62. * @returns {Object<string>} - The mapping of query string keys to values.
  63.  */
  64. function parseQueryString(queryString) {
  65.     if (typeof queryString === 'undefined')
  66.         queryString = window.location.search;
  67.  
  68.     var params = {};
  69.  
  70.     each(queryString.substr(1).split('&'), function (item) {
  71.        var pair = item.split('=').map(function (part) {
  72.            return decodeURIComponent(part.replace(/\+/g, '%20'));
  73.         });
  74.         if (pair[0])
  75.             params[pair[0]] = pair[1];
  76.     });
  77.  
  78.     return params;
  79. }
  80.  
  81.  
  82. /**
  83. * Wrap a function such that it can only be run once. The return value is cached and returned in subsequent calls.
  84. * @param {function} fn - Function to wrap.
  85. * @returns {any} - Return value as returned by the first invocation of fn, regardless of arguments.
  86. */
  87. function once(fn) {
  88.     var returnValue;
  89.     return function () {
  90.         if (fn) {
  91.             returnValue = fn.apply(this, arguments);
  92.             fn = null;
  93.         }
  94.         return returnValue;
  95.     };
  96. }
  97.  
  98. if (window.getComputedStyle) {
  99.     getCurrentStyle = function(elem, prop, _camel) {
  100.         try {
  101.             // We need this to both protect for the case where `elem` is not valid,
  102.             // such as it being `document` and for the broken ShadowDOMPolyfill script.
  103.             // See https://git.io/vrPIf for more details.
  104.             return window.document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
  105.         } catch (err) {
  106.             return null;
  107.         }
  108.     };
  109. } else {
  110.     // IE < 9, Opera
  111.    getCurrentStyle = function(elem, prop, camel) {
  112.        return elem.currentStyle[prop] || elem.currentStyle[camel];
  113.    }
  114. }
  115.  
  116. /**
  117. * Get the height of the document.
  118. *
  119. * @returns {number} - The document height
  120. */
  121. function getDocumentHeight() {
  122.    const container = document.body;
  123.    var height = container.offsetHeight
  124.  
  125.    var marginTop = parseInt(getCurrentStyle(container, 'margin-top', 'marginTop'), 10);
  126.    if (marginTop)
  127.        height += marginTop;
  128.  
  129.    var marginBottom = parseInt(getCurrentStyle(container, 'margin-bottom', 'marginBottom'), 10);
  130.    if (marginBottom)
  131.        height += marginBottom;
  132.  
  133.    return height;
  134. }
  135.  
  136. /**
  137. * Starts a loop to notice changes to the page height.
  138. *
  139. * @param {function} cb - Function to call with new height values.
  140. * @returns {void}
  141. */
  142. function onHeightChange(cb) {
  143.    let count = 0;
  144.    let lastHeight = 0;
  145.  
  146.    const loop = () => {
  147.         const currentHeight = getDocumentHeight();
  148.         if (currentHeight !== lastHeight) {
  149.             lastHeight = currentHeight;
  150.             cb(currentHeight);
  151.         }
  152.  
  153.         // We'll watch for height changes for a total of ~25.4 seconds,
  154.         // with these intervals:
  155.         // 100ms, 100ms, 200ms, 200ms, 400ms, 400ms, ..., 6400ms
  156.         // The idea behind these intervals is the following:
  157.         // - on fast websites, with small number of widgets, ad provider
  158.         // will be loaded fast and has good chances to be visible right away,
  159.         // so we need to detect resize quickly
  160.         // - on slow websites it doesn't make sense to check for resize every
  161.         // 100ms because well, they're slow and it might take more than 5sec
  162.         // for ad provider to render. Also most likely page will be long and it
  163.         // will take some time for user to scroll down
  164.         /* eslint-disable no-magic-numbers */
  165.         count += 1;
  166.         if (count < 15)
  167.            setTimeout(loop, 100 * Math.pow(2, Math.floor(count / 2)));
  168.        /* eslint-enable no-magic-numbers */
  169.    };
  170.  
  171.    loop();
  172. }
  173.  
  174. /**
  175. * Send a message to the host page. Mimics the format
  176. * used by core/utils/frameBus.
  177. *
  178. * @param {string} name - The event name.
  179. * @param {*} data - JSON-serializable data to send.
  180. * @returns {void}
  181. */
  182. function sendMessageToHost(name, data) {
  183.    data = data || {};
  184.    window.parent.postMessage(JSON.stringify({
  185.        data,
  186.        name,
  187.        scope: 'host',
  188.        sender:  window.name ,
  189.    }), '*');
  190. }
  191.  
  192.  
  193. const POST_MESSAGE_TYPES = Object.freeze({
  194.    click: 'click',
  195.    errorProviderNotReady: 'error-provider-not-ready',
  196.    errorNoHeight: 'error-no-height',
  197.    ready: 'ready',
  198.    resize: 'resize',
  199. });
  200.  
  201. const minHeight = 85;
  202.  
  203. /**
  204. * Generates events for resizing the frame and ad loads.
  205. *
  206. * @param {Object} options - Options
  207. *   {number} minHeight - The minimum height which indicates an ad has loaded. Default to 0.
  208. *   {function} readyData - The data to include with the ready event.
  209. * @returns {function} - A callback which should be called when the provider indicates the ad is ready.
  210. */
  211. function startAdsLoop(readyData) {
  212.    const startTime = new Date().getTime();
  213.  
  214.    let providerReadied = false;
  215.    let minHeightReached = false;
  216.    // This parameter isn't expected in the ready event so we delete it after capturing it's value.
  217.    const sendReady = readyData.sendReady;
  218.    delete readyData.sendReady;
  219.  
  220.    const sendReadyOnce = once(() => {
  221.         const extraData = window._OnReadyExtraData;
  222.         if (extraData) {
  223.             extraData.time_to_load = new Date().getTime() - startTime;
  224.             readyData.extraData = JSON.stringify(extraData);
  225.         }
  226.  
  227.         sendMessageToHost(POST_MESSAGE_TYPES.ready, readyData);
  228.     });
  229.     const detectReadyMismatch = once(() => {
  230.         setTimeout(() => {
  231.             if (!providerReadied)
  232.                 sendMessageToHost(POST_MESSAGE_TYPES.errorProviderNotReady, { provider: readyData.provider });
  233.  
  234.             const heightReached = minHeightReached || getDocumentHeight() >= minHeight;
  235.             if (!heightReached)
  236.                 sendMessageToHost(POST_MESSAGE_TYPES.errorNoHeight, { provider: readyData.provider });
  237.         }, 100); // eslint-disable-line no-magic-numbers
  238.     });
  239.  
  240.     onHeightChange(height => {
  241.         if (height < minHeight)
  242.            return;
  243.  
  244.        minHeightReached = true;
  245.        if (sendReady) {
  246.            sendReadyOnce();
  247.        }
  248.        detectReadyMismatch();
  249.        sendMessageToHost(POST_MESSAGE_TYPES.resize, { height });
  250.    });
  251.  
  252.    return once(() => {
  253.         providerReadied = true;
  254.         detectReadyMismatch();
  255.     });
  256. }
  257.  
  258.             // init loop
  259. const onAdLoad = startAdsLoop({
  260.     sendReady: true,
  261.     provider: 'blockthrough',
  262. });
  263.  
  264.  
  265. // The doublewide_threshold is the minimum width required on the page before the double ad experience kicks in.
  266. // Previously we used the width of 2 ads (each 300px wide) + 8px whitespace in between. The plan is to use a slightly
  267. // lower width since many pages are just shy of that threshold. Sites that look bad can be managed by disabling
  268. // doublewide.
  269. const doublewideEnabled = document.body.offsetWidth >= 590;
  270.  
  271.  
  272. // We need to create HTML elements for the ad slots we are going to run.
  273. const container = document.getElementById('ad-container-top');
  274. if (doublewideEnabled)  {
  275.     const div1 = document.createElement('div');
  276.     const div2 = document.createElement('div');
  277.     div1.className = 'ads-position';
  278.     div2.className = 'ads-position';
  279.     div1.id = 'doublewide_1-top';
  280.     div2.id = 'doublewide_2-top';
  281.     container.appendChild(div1);
  282.     container.appendChild(div2);
  283. } else {
  284.     const div = document.createElement('div');
  285.     div.className = 'ads-position';
  286.     div.id = 'single-top';
  287.     container.appendChild(div);
  288. }
  289.  
  290.  
  291.  
  292.         </script>
  293.     </div>
  294.  
  295. </body>
  296. </html>
  297.  

Reply to "surce"

Here you can reply to the paste above